import { Html } from "@react-three/drei"; import React from "react"; import { Line } from "react-chartjs-2"; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ChartData, ChartOptions, } from "chart.js"; import { ThroughputIcon } from "../../../icons/3dChartIcons"; // Register Chart.js components ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); // Define Props for LineGraphComponent interface LineGraphProps { data: ChartData<"line">; // Type for chart data options?: ChartOptions<"line">; // Type for chart options (optional) } // LineGraphComponent using react-chartjs-2 const LineGraphComponent: React.FC = ({ data, options }) => { return ; }; const Throughput = () => { // Sample data for the line graph const graphData: ChartData<"line"> = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "Throughput", data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values borderColor: "rgba(75, 192, 192, 1)", backgroundColor: "rgba(75, 192, 192, 0.2)", fill: true, }, ], }; // Options for the line graph const graphOptions: ChartOptions<"line"> = { responsive: true, plugins: { legend: { position: "top", display: false, }, title: { display: true, text: "Throughput Over Time", }, }, scales: { x: { grid: { display: true, // Show vertical grid lines }, ticks: { display: false, // Hide x-axis labels }, }, y: { grid: { display: false, // Hide horizontal grid lines }, ticks: { display: false, // Hide y-axis labels }, }, }, }; return (
Throughput
1,200
Units/hr
316
sales
5.77%
{/* Line graph using react-chartjs-2 */}
You made an extra $1256.13 this month
); }; export default Throughput;