chartComponent.js

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

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

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Utility Usage',
    },
  },
};

const ChartComponent = (props) => {

  const [chartData, setChartData] = useState(null);

  const fetchData = async () => {
    try {
      const response = await fetch('http://127.0.0.1:5000/api/costData');

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      
      const chartData = await response.json();
      setChartData(chartData);
    } catch (error) {
      console.error('There was a problem with the fetch operation:', error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const data = {
    labels: chartData ? chartData.map(data => data[0]) : [],
    datasets: [
      {
        label: 'Power Usage (MW)',
        data: chartData ? chartData.map(data => (data[1] / 1000)) : [],
        borderColor: 'red',
        backgroundColor: 'red',
      },
      {
        label: 'Cost ($)',
        data: chartData ? chartData.map(data => data[2]) : [],
        borderColor: 'green',
        backgroundColor: 'green',
      },
      {
        label: 'Water Usage',
        data: chartData ? chartData.map(data => data[3]) : [],
        borderColor: 'blue',
        backgroundColor: 'blue',
      },
    ],
  };

  return (
    <div id="chart">
      {chartData && <Line options={options} data={data} />}
    </div>
  );
};

export default ChartComponent;