import React, { useMemo } from "react"; import { Line } from "react-chartjs-2"; import { Chart as ChartJS, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend, } from "chart.js"; ChartJS.register( LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend ); const EnergyUsage = ({comparedProducts}:any) => { const data = useMemo(() => { const randomizeData = () => Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300); return { labels: ["Mon", "Tue", "Wed", "Thu", "Fri"], datasets: [ { label: "Simulation 1", data: randomizeData(), borderColor: "#6a0dad", fill: false, tension: 0.5, // More curved line pointRadius: 0, // Remove point indicators }, { label: "Simulation 2", data: randomizeData(), borderColor: "#b19cd9", fill: false, tension: 0.5, pointRadius: 0, }, ], }; }, []); const options = useMemo( () => ({ responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, }, legend: { display: false, }, }, scales: { x: { display: false, // Hide x-axis grid: { display: false, }, }, y: { display: false, // Hide y-axis grid: { display: false, }, }, }, }), [] ); return (

Energy Usage

2500 kWh

{comparedProducts[0]?.productName}
98%
{comparedProducts[1]?.productName}
97%
); }; export default EnergyUsage;