Added ChartBar and Chart component

Author: svwoodhouse

Sections/Section 3/01-starting-setup/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;
+}

Sections/Section 3/01-starting-setup/src/components/Chart/Chart.js

@@ -0,0 +1,22 @@
+import ChartBar from './ChartBar'
+import './Chart.css'
+
+const 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

Sections/Section 3/01-starting-setup/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;
+  }

Sections/Section 3/01-starting-setup/src/components/Chart/ChartBar.js

@@ -0,0 +1,22 @@
+import './ChartBar.css'
+
+const 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>
+        <div className='chart-bar__label'>{props.label}</div>
+      </div>
+    )
+}
+
+export default ChartBar

Sections/Section 3/01-starting-setup/src/components/Expenses/Expenses.js

@@ -2,6 +2,7 @@ import './Expenses.css'
 import ExpensesList from './ExpensesList'
 import Card from '../UI/Card'
 import ExpensesFilter from './ExpensesFilter'
+import ExpensesChart from './ExpensesChart'
 import { useState } from 'react'
 
 const Expenses = (props) => {
@@ -19,6 +20,7 @@ const Expenses = (props) => {
         <div>
             <Card className='expenses'>
                 <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler}/>
+                <ExpensesChart expenses={filteredExpenses}/>
                 <ExpensesList items = {filteredExpenses}/>
             </Card>
         </div>

Sections/Section 3/01-starting-setup/src/components/Expenses/ExpensesChart.js

@@ -0,0 +1,26 @@
+import Chart from '../Chart/Chart'
+const ExpensesChart = props => {
+    const chartDataPoints = [
+        { label: 'Jan', value: 0 },
+        { label: 'Feb', value: 0 },
+        { label: 'Mar', value: 0 },
+        { label: 'Apr', value: 0 },
+        { label: 'May', 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