first commit

2025-03-25 11:47:41 +05:30
commit 61b3c4ee2c
211 changed files with 36430 additions and 0 deletions
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -0,0 +1,124 @@
+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;