80. 마무리 및 다음 단계

이제 dataPoint들을 전달할 것이다

왜 차트가 안 나오나 한참 고민했는데.... css 를 import 안 해서 안 나왔다 ㅋㅋ

 

Chart.js

import ChartBar from "./ChartBar";
import "./Chart.css";
const Chart = props => {
  const dataPointValues = props.dataPoints.map((dataPoint) => dataPoint.value);
  
  const totalMaxium = Math.max(...dataPointValues);
  return <div className="chart">
    {props.dataPoints.map(dataPoint =>
      // <div>hello</div>
      <ChartBar value={dataPoint.value} maxValue={totalMaxium} label={dataPoint.label} key={dataPoint.label} />
    )}
  </div>
}

export default Chart;

 

ChartBar.js

import React from 'react';
import "./ChartBar.css";

const ChartBar = (props) => {

  let barFillHeight = '0%';
  if (props.maxValue > 0) {
    barFillHeight = Math.round((props.value / props.maxValue) * 100) + '%';
    console.log(barFillHeight);
  }

  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">CB</div>
  </div>
}

export default ChartBar;

 

ExpensesChart.js

import React from 'react';
import Chart from "../Chart/Chart";
const ExpenseChart = 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: 'Dev', value: 0 },
  ];

  for (const expense of props.expenses) {
    const expenseMonth = expense.date.getMonth();
    chartDataPoints[expenseMonth].value += expense.amount;
  }
  return <Chart dataPoints={chartDataPoints} />
}

export default ExpenseChart;