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/ui/realTimeVis/floating/WarehouseThroughput.tsx
+++ b/app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler, // Import Filler for area fill
+} from "chart.js";
+
+// Register ChartJS components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+const WarehouseThroughput = () => {
+  // Line graph data for a year (monthly throughput)
+  const lineGraphData = {
+    labels: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ], // Months of the year
+    datasets: [
+      {
+        label: "Throughput (units/month)",
+        data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
+        borderColor: "#6f42c1", // Use the desired color for the line (purple)
+        backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
+        borderWidth: 2, // Line thickness
+        fill: true, // Enable fill for this dataset
+        pointRadius: 0, // Remove dots at each data point
+        tension: 0.5, // Smooth interpolation for the line
+      },
+    ],
+  };
+
+  // Line graph options
+  const lineGraphOptions = {
+    responsive: true,
+    maintainAspectRatio: false, // Allow custom height/width adjustments
+    plugins: {
+      legend: {
+        display: false, // Hide legend
+      },
+      title: {
+        display: false, // No chart title needed
+      },
+      tooltip: {
+        callbacks: {
+          label: (context: any) => {
+            const value = context.parsed.y;
+            return `${value} units`; // Customize tooltip to display "units"
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          display: false, // Hide x-axis grid lines
+        },
+        ticks: {
+          maxRotation: 0, // Prevent label rotation
+          autoSkip: false, // Display all months
+          font: {
+            size: 8, // Adjust font size for readability
+            color: "#ffffff", // Light text color for labels
+          },
+        },
+      },
+      y: {
+        display: true, // Show y-axis
+        grid: {
+          drawBorder: false, // Remove border line
+          color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
+          borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
+        },
+        ticks: {
+          font: {
+            size: 8, // Adjust font size for readability
+            color: "#ffffff", // Light text color for ticks
+          },
+        },
+      },
+    },
+    elements: {
+      line: {
+        tension: 0.5, // Smooth interpolation for the line
+      },
+    },
+  };
+
+  return (
+    <div className="warehouseThroughput floating" draggable>
+      <div className="header">
+        <h2>Warehouse Throughput</h2>
+        <p>
+          <span>(+5) more</span> in 2025
+        </p>
+      </div>
+      <div className="lineGraph" style={{ height: "100%" }}>
+        {/* Line Graph */}
+        <Line data={lineGraphData} options={lineGraphOptions} />
+      </div>
+    </div>
+  );
+};
+
+export default WarehouseThroughput;