charts

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;
+  }

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 (
+        <div className="chart">
+            {props.dataPoints.map((dataPoint) => (
+                <ChartBar
+                    key={dataPoint.label}
+                    value={dataPoint.value}
+                    maxValue={totalMaximum}
+                    label={dataPoint.label}
+                />
+            ))}
+        </div>
+    )
+}
+
+export default Chart

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;
+  }

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 (
+        <div className="chart-bar">
+            <div className="chart-bar__inner">
+                <div
+                    className="chart-bar__fill"
+                    style={{ height: barFillHeight }}
+                ></div>
+                <div className="chart-bar__label">{props.label}</div>
+            </div>
+        </div>
+    )
+}
+
+export default ChartBar

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}
                 />
+                <ExpensesChart expenses={filteredExpenses} />
                 <ExpensesList items={filteredExpenses} />
             </Card>
         </div>

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 <Chart dataPoints={chartDataPoints} />
+}
+
+export default ExpensesChart