STRETCH - CHART.JS IMPLEMENTATION - OUTLOOK PAGE

[keanacobarde]

User Story

• I, as a diligent student looking to improve my spending habits, should be able to see within the 'Timeline' Page and spot the trends of category spending - both within the last month and this month.

Acceptance Criteria

WIREFRAME

• User should be able to see a pie chart that represents the amount they allocated towards a category, versus how much they ended up spending on a specific category.
• This should be a separate component that's referenced within the timeline page. You don't have to prop drill to pull the data of a specific month. Just reference the Outlook page.

Dependecies

N / A - All data required for this exists within FireBase already. It's just getting around to using Chart.js in order to visualize the information.

Dev Notes

• Here: https://www.chartjs.org/docs/latest/. As you know, with your time w/ Material UI - this will be SO VERY HELPFUL. Keep it bookmarked.

[keanacobarde]

Installation guide:

npm install chart.js react-chartjs-2

The first dependency will install chart.js itself, which can be used in vanilla JS. react-chartjs-2 is used as a React wrapper which will allow for an easier time with implementing chart.js within React.

[keanacobarde]

IMPORTS

import { Chart as ChartJS } from 'chart.js/auto';
import { Doughtnut } from 'react-chartjs-2';

[keanacobarde]

• ChartJS, if you learn how to feed data into a component one way, is consistent across charts with how you feed them data. Look up the documentation to figure out what values you need to provide to the Chart.

Taken from Chart.js documentation - a Vanilla JS setup. Find the React component.

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

[keanacobarde]

CURRENT COURSE OF ACTION:

• [x] Modify card CSS
• [x] Get expenses graph figured out
• [x] Re-structure color code
• [x] Ensure that toggling from month to month changes the value of the charts

[keanacobarde]

IMPLEMENTATION COMPLETED WITHIN #50 - CLOSING TICKET