SimpleCalculator

//Here is SimpleCalculator.js

import React, {useState} from 'react';
import {SimpleCalculatorControls} from './SimpleCalculatorControls';
import {handleInterest} from './handleInterest';
import {SimpleGraph} from  './SimpleGraph';
import {HeaderFigures} from './HeaderFigures';

export const SimpleCalculator = () => {
    const [deposit, setDeposit] = useState(100000);
    const [interestRate, setInterestRate] = useState(5);
    const [duration, setDuration] = useState(20);

    const yearlyBalance = handleInterest(deposit, interestRate, duration);



    return(
        <>
            <HeaderFigures
                deposit={deposit}
                interestRate={interestRate}
                duration={duration}
            />
            <SimpleCalculatorControls
                deposit={deposit}
                setDeposit={setDeposit}
                interestRate={interestRate}
                setInterestRate={setInterestRate}
                duration={duration}
                setDuration={setDuration}
            />
            <SimpleGraph
                yearlyBalance={yearlyBalance}
            />

        </>
    )
}

// Here is SimpleGraph.js


import React, {useState, useEffect} from 'react';
import { Bar } from 'react-chartjs-2';
import { Line } from 'react-chartjs-2';
import { PointElement } from 'chart.js';
import {
        Chart as ChartJS,
        CategoryScale,
        LinearScale,
        BarElement,
        LineElement,
        Title,
        Tooltip,
        Legend,
      } from 'chart.js';


ChartJS.register(
        CategoryScale,
        LinearScale,
        BarElement,
        LineElement,
        PointElement,
        Title,
        Tooltip,
        Legend
      );

export function SimpleGraph(props) {
        const [graphData, setGraphData] = useState ({
                datasets: [],
        });

        const [graphOptions, setGraphOptions] = useState ({});

        useEffect(() => {
                setGraphData ({
                        labels: props.yearlyBalance.year,
                        datasets: [
                                {
                                        label: "Balance",
                                        data: props.yearlyBalance.balance,
                                        borderColor: "rgb(53, 162, 235)",
                                        backgroundColor: "rgb(53, 162, 235, 0.4)",
                                },
                        ]
                });
                setGraphOptions ({
                        responsive: true,
                        plugins: {
                                legend: {
                                        postion: "top"
                                },
                                title: {
                                        display: true,
                                        text: "Duration",
                                }
                        }
                })

        }, [])



        return(

                <div className="SimpleGraph">
                        <Bar
                                data={graphData}
                                options={graphOptions}
                        />
                </div>
         )
}