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/charts/BarGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx
@@ -345,7 +345,7 @@ const BarGraphComponent = ({
    
    if (id !== "") {
      try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements)
          setDuration(response.data.Data.duration)
--- a/app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
@@ -158,7 +158,7 @@ const DoughnutGraphComponent = ({
    
    if (id !== "") {
      try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements)
          setDuration(response.data.Data.duration)
--- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
@@ -158,7 +158,7 @@ const LineGraphComponent = ({
    
    if (id !== "") {
      try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements)
          setDuration(response.data.Data.duration)
--- a/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
@@ -344,7 +344,7 @@ const PieChartComponent = ({
    
    if (id !== "") {
      try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
        if (response.status === 200) {
          setmeasurements(response.data.Data.measurements)
          setDuration(response.data.Data.duration)
--- a/app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx
@@ -1,22 +1,64 @@
-import { useMemo } from "react";
-import { Line, PolarArea } from "react-chartjs-2";
+import React, { useEffect, useMemo, useState } from "react";
+import { PolarArea } from "react-chartjs-2";
+import io from "socket.io-client";
+import { useThemeStore } from "../../../../store/useThemeStore";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";

 interface ChartComponentProps {
+  id: string;
  type: any;
  title: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
 }

 const PolarAreaGraphComponent = ({
+  id,
+  type,
  title,
  fontFamily,
  fontSize,
  fontWeight = "Regular",
 }: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
+  const { themeColor } = useThemeStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const [measurements, setmeasurements] = useState<any>({});
+  const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    labels: [],
+    datasets: [],
+  });
+   const { selectedChartId } = useWidgetStore();
+
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0]
+  const defaultData = {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "Dataset",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: ["#6f42c1"],
+        borderColor: "#b392f0",
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
+  // Memoize Theme Colors
+  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+
+  // Memoize Font Styling
  const chartFontWeightMap = useMemo(
    () => ({
      Light: "lighter" as const,
@@ -26,19 +68,9 @@ const PolarAreaGraphComponent = ({
    []
  );

-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);

-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
  const chartFontStyle = useMemo(
    () => ({
      family: fontFamily || "Arial",
@@ -48,46 +80,110 @@ const PolarAreaGraphComponent = ({
    [fontFamily, fontSizeValue, fontWeightValue]
  );

-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: false, // This hides the x-axis labels
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: name,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
          },
        },
-      },
-    }),
-    [title, chartFontStyle]
-  );
+        scales: {
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
+        },
+      }),
+      [title, chartFontStyle, name]
+    );

-  const chartData = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
-        borderColor: "#ffffff", // Keeping border color white
-        borderWidth: 2,
-        fill: false,
-      },
-    ],
-  };
+    // useEffect(() => {console.log(measurements);
+    // },[measurements])

-  return <PolarArea data={chartData} options={options} />;
+  useEffect(() => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+
+    const socket = io(`http://${iotApiUrl}`);
+
+    const inputData = {
+      measurements,
+      duration,
+      interval: 1000,
+    };
+
+
+    const startStream = () => {  
+      socket.emit("lineInput", inputData);
+    };
+
+    socket.on("connect", startStream);
+
+    socket.on("lineOutput", (response) => {
+      const responseData = response.data;
+
+      // Extract timestamps and values
+      const labels = responseData.time;
+      const datasets = Object.keys(measurements).map((key) => {
+        const measurement = measurements[key];
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
+        return {
+          label: datasetKey,
+          data: responseData[datasetKey]?.values ?? [],
+          backgroundColor: "#6f42c1",
+          borderColor: "#b392f0",
+          borderWidth: 1,
+        };
+      });
+
+      setChartData({ labels, datasets });
+    });
+
+    return () => {
+      socket.off("lineOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.disconnect();
+    };
+  }, [measurements, duration, iotApiUrl]);
+
+  const fetchSavedInputes = async() => {
+    
+    if (id !== "") {
+      try {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_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);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }
+  ,[chartMeasurements, chartDuration, widgetName])
+
+  return <PolarArea data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

-export default PolarAreaGraphComponent;
+export default PolarAreaGraphComponent;
--- a/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx
@@ -14,8 +14,6 @@ const FleetEfficiency = () => {
      per: progress,

    });
-
-    console.log("Dragged Data:", cardData);
    event.dataTransfer.setData("text/plain", cardData);
  };

--- a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+type Props = {}
+
+const FleetEfficiencyComponent = ({
+    object
+}: any) => {
+    return (
+        <>
+            <h2 className="header">Fleet Efficiency</h2>
+            <div className="progressContainer">
+                <div className="progress">
+                    <div className="barOverflow">
+                        <div
+                            className="bar"
+                            style={{ transform: `rotate(${object.value}deg)` }}
+                        ></div>
+                    </div>
+                </div>
+            </div>
+            <div className="scaleLabels">
+                <span>0%</span>
+                <div className="centerText">
+                    <div className="percentage">{object.per}%</div>
+                    <div className="status">Optimal</div>
+                </div>
+                <span>100%</span>
+            </div>
+        </>
+    )
+}
+
+export default FleetEfficiencyComponent
--- a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
+++ b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
@@ -23,6 +23,7 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
      value,
      per,
      icon: Icon,
+      
      className: event.currentTarget.className,
      position: [rect.top, rect.left], // ✅ Store position
    });
--- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { WalletIcon } from '../../../icons/3dChartIcons'
+import { useWidgetStore } from '../../../../store/useWidgetStore';
+
+const TotalCardComponent = ({
+    object
+}: any) => {
+
+    const { setSelectedChartId } =
+        useWidgetStore();
+    return (
+        <>
+            <div className="header-wrapper" onClick={() => {
+                setSelectedChartId(object.id)
+            }}>
+                <div className="header">{object.header}</div>
+                <div className="data-values">
+                    <div className="value">{object.value}</div>
+                    <div className="per">{object.per}</div>
+                </div>
+            </div>
+            <div className="icon">
+                <WalletIcon />
+            </div>
+        </>
+    )
+}
+
+export default TotalCardComponent
--- 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