diff --git a/react-complete-guide/.eslintcache b/react-complete-guide/.eslintcache index 35dbb80..e0b0f00 100644 --- a/react-complete-guide/.eslintcache +++ b/react-complete-guide/.eslintcache @@ -1 +1 @@ -[{"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/index.js":"1","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/App.js":"2","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/Expenses.js":"3","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseItem.js":"4","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseDate.js":"5","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/UI/Card.js":"6","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/NewExpense.js":"7","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/ExpenseForm.js":"8","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesFilter.js":"9","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesList.js":"10"},{"size":179,"mtime":1663691555700,"results":"11","hashOfConfig":"12"},{"size":1074,"mtime":1663784301191,"results":"13","hashOfConfig":"12"},{"size":865,"mtime":1663784016200,"results":"14","hashOfConfig":"12"},{"size":554,"mtime":1663784250244,"results":"15","hashOfConfig":"12"},{"size":560,"mtime":1663696520001,"results":"16","hashOfConfig":"12"},{"size":203,"mtime":1663696382418,"results":"17","hashOfConfig":"12"},{"size":870,"mtime":1663785090702,"results":"18","hashOfConfig":"12"},{"size":2284,"mtime":1663784961415,"results":"19","hashOfConfig":"12"},{"size":808,"mtime":1663783729073,"results":"20","hashOfConfig":"12"},{"size":643,"mtime":1663784178162,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"3vr72g",{"filePath":"25","messages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/index.js",[],["43","44"],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/App.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/Expenses.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseItem.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseDate.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/UI/Card.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/NewExpense.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/ExpenseForm.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesFilter.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesList.js",[],{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","replacedBy":"48"},"no-native-reassign",["49"],"no-negated-in-lhs",["50"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/index.js":"1","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/App.js":"2","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/Expenses.js":"3","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseItem.js":"4","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseDate.js":"5","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/UI/Card.js":"6","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/NewExpense.js":"7","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/ExpenseForm.js":"8","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesFilter.js":"9","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesList.js":"10","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesChart.js":"11","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Chart/Chart.js":"12","/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Chart/ChartBar.js":"13"},{"size":179,"mtime":1663691555700,"results":"14","hashOfConfig":"15"},{"size":1074,"mtime":1663784301191,"results":"16","hashOfConfig":"15"},{"size":971,"mtime":1663786538824,"results":"17","hashOfConfig":"15"},{"size":554,"mtime":1663784250244,"results":"18","hashOfConfig":"15"},{"size":560,"mtime":1663696520001,"results":"19","hashOfConfig":"15"},{"size":203,"mtime":1663696382418,"results":"20","hashOfConfig":"15"},{"size":870,"mtime":1663785090702,"results":"21","hashOfConfig":"15"},{"size":2284,"mtime":1663784961415,"results":"22","hashOfConfig":"15"},{"size":808,"mtime":1663783729073,"results":"23","hashOfConfig":"15"},{"size":643,"mtime":1663784178162,"results":"24","hashOfConfig":"15"},{"size":774,"mtime":1663786597836,"results":"25","hashOfConfig":"15"},{"size":617,"mtime":1663786514528,"results":"26","hashOfConfig":"15"},{"size":603,"mtime":1663786636312,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},"3vr72g",{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/index.js",[],["55","56"],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/App.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/Expenses.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseItem.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpenseDate.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/UI/Card.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/NewExpense.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/NewExpense/ExpenseForm.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesFilter.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesList.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Expenses/ExpensesChart.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Chart/Chart.js",[],"/Users/tyrel.souza/code/udemy/react-course/react-complete-guide/src/components/Chart/ChartBar.js",[],{"ruleId":"57","replacedBy":"58"},{"ruleId":"59","replacedBy":"60"},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/react-complete-guide/src/components/Chart/Chart.css b/react-complete-guide/src/components/Chart/Chart.css new file mode 100644 index 0000000..be69b13 --- /dev/null +++ b/react-complete-guide/src/components/Chart/Chart.css @@ -0,0 +1,9 @@ +.chart { + padding: 1rem; + border-radius: 12px; + background-color: #f8dfff; + text-align: center; + display: flex; + justify-content: space-around; + height: 10rem; + } \ No newline at end of file diff --git a/react-complete-guide/src/components/Chart/Chart.js b/react-complete-guide/src/components/Chart/Chart.js new file mode 100644 index 0000000..2df25bd --- /dev/null +++ b/react-complete-guide/src/components/Chart/Chart.js @@ -0,0 +1,24 @@ +import React from "react" + +import ChartBar from "./ChartBar" +import "./Chart.css" + +function Chart(props) { + const dataPointValues = props.dataPoints.map(dataPoint => dataPoint.value) + const totalMaximum = Math.max(...dataPointValues) + + return ( +
+ {props.dataPoints.map((dataPoint) => ( + + ))} +
+ ) +} + +export default Chart diff --git a/react-complete-guide/src/components/Chart/ChartBar.css b/react-complete-guide/src/components/Chart/ChartBar.css new file mode 100644 index 0000000..e674c45 --- /dev/null +++ b/react-complete-guide/src/components/Chart/ChartBar.css @@ -0,0 +1,30 @@ +.chart-bar { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + .chart-bar__inner { + height: 100%; + width: 100%; + border: 1px solid #313131; + border-radius: 12px; + background-color: #c3b4f3; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .chart-bar__fill { + background-color: #4826b9; + width: 100%; + transition: all 0.3s ease-out; + } + + .chart-bar__label { + font-weight: bold; + font-size: 0.5rem; + text-align: center; + } \ No newline at end of file diff --git a/react-complete-guide/src/components/Chart/ChartBar.js b/react-complete-guide/src/components/Chart/ChartBar.js new file mode 100644 index 0000000..a1f3e2d --- /dev/null +++ b/react-complete-guide/src/components/Chart/ChartBar.js @@ -0,0 +1,23 @@ +import React from "react" +import "./ChartBar.css" + +function ChartBar(props) { + let barFillHeight = "0%" + if (props.maxValue > 0) { + barFillHeight = Math.round((props.value / props.maxValue) * 100) + "%" + } + + return ( +
+
+
+
{props.label}
+
+
+ ) +} + +export default ChartBar diff --git a/react-complete-guide/src/components/Expenses/Expenses.js b/react-complete-guide/src/components/Expenses/Expenses.js index a7a17f3..6673954 100644 --- a/react-complete-guide/src/components/Expenses/Expenses.js +++ b/react-complete-guide/src/components/Expenses/Expenses.js @@ -1,5 +1,6 @@ import React, { useState } from "react" import ExpensesList from "./ExpensesList" +import ExpensesChart from "./ExpensesChart" import ExpensesFilter from "./ExpensesFilter" import Card from "../UI/Card" @@ -25,6 +26,7 @@ const Expenses = (props) => { selected={filteredYear} onChangeFilter={filterChangeHandler} /> + diff --git a/react-complete-guide/src/components/Expenses/ExpensesChart.js b/react-complete-guide/src/components/Expenses/ExpensesChart.js new file mode 100644 index 0000000..f69a037 --- /dev/null +++ b/react-complete-guide/src/components/Expenses/ExpensesChart.js @@ -0,0 +1,27 @@ +import React from "react" +import Chart from "../Chart/Chart" +function ExpensesChart(props) { + const chartDataPoints = [ + { label: "Jan", value: 0 }, + { label: "Feb", value: 0 }, + { label: "Mar", value: 0 }, + { label: "Apr", value: 0 }, + { label: "Jun", value: 0 }, + { label: "Jul", value: 0 }, + { label: "Aug", value: 0 }, + { label: "Sep", value: 0 }, + { label: "Oct", value: 0 }, + { label: "Nov", value: 0 }, + { label: "Dec", value: 0 }, + ] + + for (const expense of props.expenses){ + const expenseMonth = expense.date.getMonth() + chartDataPoints[expenseMonth].value += expense.amount + } + + + return +} + +export default ExpensesChart