125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
|
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<LineGraphProps> = ({ data, options }) => {
|
||
|
|
return <Line data={data} options={options} />;
|
||
|
|
};
|
||
|
|
|
||
|
|
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 (
|
||
|
|
<Html position={[0, 0, 0]} transform occlude>
|
||
|
|
<div className="throughput-wrapper">
|
||
|
|
<div className="header">Throughput</div>
|
||
|
|
<div className="display-value">
|
||
|
|
<div className="left">
|
||
|
|
<div className="icon">
|
||
|
|
<ThroughputIcon />
|
||
|
|
</div>
|
||
|
|
<div className="value-container">
|
||
|
|
<div className="value-wrapper">
|
||
|
|
<div className="value">1,200</div>
|
||
|
|
<div className="key"> Units/hr</div>
|
||
|
|
</div>
|
||
|
|
<div className="total-sales">
|
||
|
|
<div className="value">316</div>
|
||
|
|
<div className="key">sales</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="right">
|
||
|
|
<div className="percent-increase">5.77%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="line-graph">
|
||
|
|
{/* Line graph using react-chartjs-2 */}
|
||
|
|
<LineGraphComponent data={graphData} options={graphOptions} />
|
||
|
|
</div>
|
||
|
|
<div className="footer">
|
||
|
|
You made an extra <span className="value">$1256.13</span> this month
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Html>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Throughput;
|