added donut and pole area chart and added its iot data

2025-03-31 19:22:37 +05:30
parent ec87acb824 dd03216393
commit bb5c9563d8
121 changed files with 4527 additions and 1424 deletions
--- a/app/src/components/ui/realTimeVis/floating/WarehouseThroughputComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/WarehouseThroughputComponent.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { Line } from 'react-chartjs-2'
+import axios from 'axios';
+
+const WarehouseThroughputComponent = ({
+    object
+}: any) => {
+
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+
+    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
+          },
+        },
+      };
+
+
+    //   const fetchSavedInputes = async() => {
+    
+    //     if (object.id !== "") {
+    //       try {
+    //         const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+    //         if (response.status === 200) {
+    //           setmeasurements(response.data.Data.measurements)
+    //           setDuration(response.data.Data.duration)
+    //           setName(response.data.widgetName)
+    //         } else {
+    //           console.log("Unexpected response:", response);
+    //         }
+    //       } catch (error) {
+    //         console.error("There was an error!", error);
+    //       }
+    //     }
+    //   }
+
+      
+    return (
+        <>
+            <div className="header">
+                <h2>Warehouse Throughput</h2>
+                <p>
+                    <span>(+5) more</span> in 2025
+                </p>
+            </div>
+            <div className="lineGraph" style={{ height: "100%" }}>
+                <Line data={lineGraphData} options={lineGraphOptions} />
+            </div>
+        </>
+    )
+}
+
+export default WarehouseThroughputComponent