From 688b7eb4a0c7f5f6198fd0fded20050b395a0e21 Mon Sep 17 00:00:00 2001 From: gabriel Date: Tue, 1 Apr 2025 19:06:29 +0530 Subject: [PATCH] Add iot data and custom input card for floting cards --- .../visualization/widgets/Widgets2D.tsx | 8 +- .../FleetEfficiencyInputComponent.tsx | 178 ++++++++++++++++++ .../IotInputCards/InputSelecterComponent.tsx | 39 ++++ .../IotInputCards/Progress1Input.tsx | 171 +++++++++++++++++ .../IotInputCards/Progress2Input.tsx | 171 +++++++++++++++++ .../components/ui/componets/DisplayZone.tsx | 5 +- .../ui/componets/DraggableWidget.tsx | 36 +--- .../ui/componets/Dropped3dWidget.tsx | 1 + .../ui/realTimeVis/charts/ProgressCard1.tsx | 105 +++++++++++ .../ui/realTimeVis/charts/ProgressCard2.tsx | 125 ++++++++++++ .../floating/FleetEfficiencyComponent.tsx | 83 +++++++- .../floating/TotalCardComponent.tsx | 92 ++++++++- app/src/styles/pages/realTimeViz.scss | 7 +- 13 files changed, 976 insertions(+), 45 deletions(-) create mode 100644 app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx create mode 100644 app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx create mode 100644 app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx create mode 100644 app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx create mode 100644 app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx index c3696e0..561c82b 100644 --- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx @@ -59,9 +59,11 @@ const ProgressBarWidget = ({ id, title, data, + type }: { id: string; title: string; + type: string; data: any; }) => { const { setDraggedAsset } = useWidgetStore((state) => state); @@ -72,7 +74,7 @@ const ProgressBarWidget = ({ draggable onDragStart={() => { setDraggedAsset({ - type: "progress", + type: type, id, title, panel: "top", @@ -99,7 +101,7 @@ const ProgressBarWidget = ({ ); }; -console.log(chartTypes,"chartTypes"); +console.log(chartTypes, "chartTypes"); const Widgets2D = () => { return ( @@ -124,6 +126,7 @@ const Widgets2D = () => { { key: "units", value: 1000, description: "Initial stock" }, ], }} + type={"progress 1"} /> { { key: "units", value: 500, description: "Additional stock" }, ], }} + type={"progress 2"} /> diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx new file mode 100644 index 0000000..3a86ea9 --- /dev/null +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx @@ -0,0 +1,178 @@ +import React, { useEffect, useState } from "react"; +import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown"; +import { AddIcon } from "../../../../icons/ExportCommonIcons"; +import RegularDropDown from "../../../../ui/inputs/RegularDropDown"; +import useChartStore from "../../../../../store/useChartStore"; +import { useSelectedZoneStore } from "../../../../../store/useZoneStore"; +import { useWidgetStore } from "../../../../../store/useWidgetStore"; +import axios from "axios"; +import RenameInput from "../../../../ui/inputs/RenameInput"; + +type Props = {}; + +const FleetEfficiencyInputComponent = (props: Props) => { + const [widgetName, setWidgetName] = useState('Widget'); + const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = useChartStore(); + const [duration, setDuration] = useState('1h') + const [dropDowndata, setDropDownData] = useState({}); + const [selections, setSelections] = useState>({}); + const { selectedZone } = useSelectedZoneStore(); + 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] + + useEffect(() => { + const fetchZoneData = async () => { + try { + const response = await axios.get(`http://${iotApiUrl}/getinput`); + if (response.status === 200) { + // console.log("dropdown data:", response.data); + setDropDownData(response.data); + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + }; + fetchZoneData(); + }, []); + + useEffect(() => { + const fetchSavedInputes = async () => { + if (selectedChartId.id !== "") { + try { + const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`); + if (response.status === 200) { + console.log(response.data); + + setSelections(response.data.Data.measurements) + setDuration(response.data.Data.duration) + setWidgetName(response.data.header) + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + } + } + + fetchSavedInputes(); + + }, [selectedChartId.id]); + + // Sync Zustand state when component mounts + useEffect(() => { + setFlotingMeasurements(selections); + updateFlotingDuration(duration); + updateHeader(widgetName); + }, [selections, duration, widgetName]); + + + const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => { + try { + const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, { + organization: organization, + zoneId: selectedZone.zoneId, + widget: { + id: selectedChartId.id, + header: inputName, + Data: { + measurements: inputMeasurement, + duration: inputDuration + } + } + } as any); + if (response.status === 200) { + return true + } else { + console.log("Unexpected response:", response); + return false + } + } catch (error) { + console.error("There was an error!", error); + return false + } + } + + const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => { + + // async() => { + const newSelections = { ...selections }; + if (selectedData === null) { + delete newSelections[inputKey]; + } else { + newSelections[inputKey] = selectedData; + } + // setMeasurements(newSelections); // Update Zustand store + console.log(newSelections); + if (await sendInputes(newSelections, duration, widgetName)) { + setSelections(newSelections); + } + // sendInputes(newSelections, duration); // Send data to server + // return newSelections; + // }; + }; + + const handleSelectDuration = async (option: string) => { + if (await sendInputes(selections, option, widgetName)) { + setDuration(option); + } + // setDuration(option); + }; + + const handleNameChange = async (name:any) => { + console.log('name change requested',name); + + if (await sendInputes(selections, duration, name)) { + setWidgetName(name); + } + } + + return ( + <> +
+
+
Title
+ +
+ {[...Array(1)].map((_, index) => { + const inputKey = `input${index + 1}`; + return ( +
+
Input {index + 1}
+
+ handleSelect(inputKey, selectedData)} + onUnselect={() => handleSelect(inputKey, null)} + selectedValue={selections[inputKey]} // Load from Zustand + /> +
+ +
+
+
+ ); + })} +
+
+ {/*
+
Duration
+
+ +
+
*/} +
+ + ); +}; + +export default FleetEfficiencyInputComponent; \ No newline at end of file diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx index 45ce802..04451d6 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx @@ -3,6 +3,9 @@ import LineGrapInput from './LineGrapInput' import BarChartInput from './BarChartInput' import PieChartInput from './PieChartInput' import FlotingWidgetInput from './FlotingWidgetInput' +import FleetEfficiencyInputComponent from './FleetEfficiencyInputComponent' +import Progress1Input from './Progress1Input' +import Progress2Input from './Progress2Input' import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent' import { useWidgetStore } from '../../../../../store/useWidgetStore' @@ -56,6 +59,24 @@ const InputSelecterComponent = () => { ) } + else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) { + return ( + <> +
2D Widget Input
+ + + ) + } + + else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) { + return ( + <> +
2D Widget Input
+ + + ) + } + else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) { return ( <> @@ -65,6 +86,24 @@ const InputSelecterComponent = () => { ) } + else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) { + return ( + <> +
Floting Widget Input
+ + + ) + } + + else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) { + return ( + <> +
Floting Widget Input
+ + + ) + } + else { return (
No chart selected
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx new file mode 100644 index 0000000..545df45 --- /dev/null +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx @@ -0,0 +1,171 @@ +import React, { useEffect, useState } from "react"; +import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown"; +import { AddIcon } from "../../../../icons/ExportCommonIcons"; +import RegularDropDown from "../../../../ui/inputs/RegularDropDown"; +import useChartStore from "../../../../../store/useChartStore"; +import { useSelectedZoneStore } from "../../../../../store/useZoneStore"; +import { useWidgetStore } from "../../../../../store/useWidgetStore"; +import axios from "axios"; +import RenameInput from "../../../../ui/inputs/RenameInput"; + +type Props = {}; + +const Progress1Input = (props: Props) => { + const [widgetName, setWidgetName] = useState('Widget'); + const { setMeasurements, updateDuration, updateName } = useChartStore(); + const [duration, setDuration] = useState('1h') + const [dropDowndata, setDropDownData] = useState({}); + const [selections, setSelections] = useState>({}); + const { selectedZone } = useSelectedZoneStore(); + 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] + + useEffect(() => { + const fetchZoneData = async () => { + try { + const response = await axios.get(`http://${iotApiUrl}/getinput`); + if (response.status === 200) { + // console.log("dropdown data:", response.data); + setDropDownData(response.data); + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + }; + fetchZoneData(); + }, []); + + useEffect(() => { + const fetchSavedInputes = async () => { + if (selectedChartId.id !== "") { + try { + const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`); + if (response.status === 200) { + setSelections(response.data.Data.measurements) + setDuration(response.data.Data.duration) + setWidgetName(response.data.widgetName) + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + } + } + + fetchSavedInputes(); + + }, [selectedChartId.id]); + + // Sync Zustand state when component mounts + useEffect(() => { + setMeasurements(selections); + updateDuration(duration); + updateName(widgetName); + }, [selections, duration, widgetName]); + + + const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => { + try { + const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, { + organization: organization, + zoneId: selectedZone.zoneId, + widget: { + id: selectedChartId.id, + panel: selectedChartId.panel, + widgetName: inputName, + Data: { + measurements: inputMeasurement, + duration: inputDuration + } + } + } as any); + if (response.status === 200) { + return true + } else { + console.log("Unexpected response:", response); + return false + } + } catch (error) { + console.error("There was an error!", error); + return false + } + } + + const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => { + + // async() => { + const newSelections = { ...selections }; + if (selectedData === null) { + delete newSelections[inputKey]; + } else { + newSelections[inputKey] = selectedData; + } + // setMeasurements(newSelections); // Update Zustand store + console.log(newSelections); + if (await sendInputes(newSelections, duration, widgetName)) { + setSelections(newSelections); + } + }; + + const handleSelectDuration = async (option: string) => { + if (await sendInputes(selections, option, widgetName)) { + setDuration(option); + } + }; + + const handleNameChange = async (name:any) => { + if (await sendInputes(selections, duration, name)) { + setWidgetName(name); + } + } + + return ( + <> +
+
+
Title
+ +
+ {[...Array(1)].map((_, index) => { + const inputKey = `input${index + 1}`; + return ( +
+
Input {index + 1}
+
+ handleSelect(inputKey, selectedData)} + onUnselect={() => handleSelect(inputKey, null)} + selectedValue={selections[inputKey]} // Load from Zustand + /> +
+ +
+
+
+ ); + })} +
+ {/*
+
+
Duration
+
+ +
+
+
*/} + + ); +}; + +export default Progress1Input; \ No newline at end of file diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx new file mode 100644 index 0000000..3a11a29 --- /dev/null +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx @@ -0,0 +1,171 @@ +import React, { useEffect, useState } from "react"; +import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown"; +import { AddIcon } from "../../../../icons/ExportCommonIcons"; +import RegularDropDown from "../../../../ui/inputs/RegularDropDown"; +import useChartStore from "../../../../../store/useChartStore"; +import { useSelectedZoneStore } from "../../../../../store/useZoneStore"; +import { useWidgetStore } from "../../../../../store/useWidgetStore"; +import axios from "axios"; +import RenameInput from "../../../../ui/inputs/RenameInput"; + +type Props = {}; + +const Progress2Input = (props: Props) => { + const [widgetName, setWidgetName] = useState('Widget'); + const { setMeasurements, updateDuration, updateName } = useChartStore(); + const [duration, setDuration] = useState('1h') + const [dropDowndata, setDropDownData] = useState({}); + const [selections, setSelections] = useState>({}); + const { selectedZone } = useSelectedZoneStore(); + 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] + + useEffect(() => { + const fetchZoneData = async () => { + try { + const response = await axios.get(`http://${iotApiUrl}/getinput`); + if (response.status === 200) { + // console.log("dropdown data:", response.data); + setDropDownData(response.data); + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + }; + fetchZoneData(); + }, []); + + useEffect(() => { + const fetchSavedInputes = async () => { + if (selectedChartId.id !== "") { + try { + const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`); + if (response.status === 200) { + setSelections(response.data.Data.measurements) + setDuration(response.data.Data.duration) + setWidgetName(response.data.widgetName) + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + } + } + + fetchSavedInputes(); + + }, [selectedChartId.id]); + + // Sync Zustand state when component mounts + useEffect(() => { + setMeasurements(selections); + updateDuration(duration); + updateName(widgetName); + }, [selections, duration, widgetName]); + + + const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => { + try { + const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, { + organization: organization, + zoneId: selectedZone.zoneId, + widget: { + id: selectedChartId.id, + panel: selectedChartId.panel, + widgetName: inputName, + Data: { + measurements: inputMeasurement, + duration: inputDuration + } + } + } as any); + if (response.status === 200) { + return true + } else { + console.log("Unexpected response:", response); + return false + } + } catch (error) { + console.error("There was an error!", error); + return false + } + } + + const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => { + + // async() => { + const newSelections = { ...selections }; + if (selectedData === null) { + delete newSelections[inputKey]; + } else { + newSelections[inputKey] = selectedData; + } + // setMeasurements(newSelections); // Update Zustand store + console.log(newSelections); + if (await sendInputes(newSelections, duration, widgetName)) { + setSelections(newSelections); + } + }; + + const handleSelectDuration = async (option: string) => { + if (await sendInputes(selections, option, widgetName)) { + setDuration(option); + } + }; + + const handleNameChange = async (name:any) => { + if (await sendInputes(selections, duration, name)) { + setWidgetName(name); + } + } + + return ( + <> +
+
+
Title
+ +
+ {[...Array(2)].map((_, index) => { + const inputKey = `input${index + 1}`; + return ( +
+
Input {index + 1}
+
+ handleSelect(inputKey, selectedData)} + onUnselect={() => handleSelect(inputKey, null)} + selectedValue={selections[inputKey]} // Load from Zustand + /> +
+ +
+
+
+ ); + })} +
+ {/*
+
+
Duration
+
+ +
+
+
*/} + + ); +}; + +export default Progress2Input; \ No newline at end of file diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index 3889139..9ce64cb 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState, useCallback } from "react"; -import { Widget } from "../../../store/useWidgetStore"; +import { useWidgetStore, Widget } from "../../../store/useWidgetStore"; import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; import { InfoIcon } from "../../icons/ExportCommonIcons"; import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore"; @@ -74,6 +74,7 @@ const DisplayZone: React.FC = ({ const [showLeftArrow, setShowLeftArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false); const { floatingWidget, setFloatingWidget } = useFloatingWidget() + const{setSelectedChartId}=useWidgetStore() // Function to calculate overflow state const updateOverflowState = useCallback(() => { @@ -152,9 +153,9 @@ const DisplayZone: React.FC = ({ async function handleSelect2dZoneData(zoneId: string, zoneName: string) { try { if (selectedZone?.zoneId === zoneId) { - return; } + setSelectedChartId(null) const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; // Fetch data from backend diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx index db8c408..11b4bfb 100644 --- a/app/src/components/ui/componets/DraggableWidget.tsx +++ b/app/src/components/ui/componets/DraggableWidget.tsx @@ -5,6 +5,8 @@ import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent"; import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent"; import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent"; import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent"; +import ProgressCard1 from "../realTimeVis/charts/ProgressCard1"; +import ProgressCard2 from "../realTimeVis/charts/ProgressCard2"; import { DeleteIcon, DublicateIcon, @@ -203,6 +205,7 @@ export const DraggableWidget = ({ onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop } }; + console.log("widget.type", widget.type); return ( <> @@ -249,9 +252,12 @@ export const DraggableWidget = ({ )} {/* Render charts based on widget type */} - - {widget.type === "progress" && ( - + + {widget.type === "progress 1" && ( + + )} + {widget.type === "progress 2" && ( + )} {widget.type === "line" && ( )} {widget.type === "bar" && ( @@ -277,14 +275,6 @@ export const DraggableWidget = ({ title={widget.title} fontSize={widget.fontSize} fontWeight={widget.fontWeight} - // data={{ - // measurements: [ - // { name: "testDevice", fields: "powerConsumption" }, - // { name: "furnace", fields: "powerConsumption" }, - // ], - // interval: 1000, - // duration: "1h", - // }} /> )} {widget.type === "pie" && ( @@ -294,14 +284,6 @@ export const DraggableWidget = ({ title={widget.title} fontSize={widget.fontSize} fontWeight={widget.fontWeight} - // data={{ - // measurements: [ - // { name: "testDevice", fields: "powerConsumption" }, - // { name: "furnace", fields: "powerConsumption" }, - // ], - // interval: 1000, - // duration: "1h", - // }} /> )} {widget.type === "doughnut" && ( diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index 94c5e45..0a3534a 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -126,6 +126,7 @@ export default function Dropped3dWidgets() { return ( <> {activeZoneWidgets.map(({ id, type, position }) => { + console.log('Typeeeeeeeeeeee',type); switch (type) { case "ui-Widget 1": return ; diff --git a/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx b/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx new file mode 100644 index 0000000..8fe8777 --- /dev/null +++ b/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx @@ -0,0 +1,105 @@ +import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons"; +import React, { useEffect, useMemo, useState } from "react"; +import { Line } from "react-chartjs-2"; +import io from "socket.io-client"; +import useChartStore from "../../../../store/useChartStore"; +import { useWidgetStore } from "../../../../store/useWidgetStore"; +import axios from "axios"; + +const ProgressCard1 = ({ id,title,}: { + id: string, + title: string; +}) => { + const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") + const [name, setName] = useState(title) + const [value, setValue] = useState('') + 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] + + + useEffect(() => { + const socket = io(`http://${iotApiUrl}`); + if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; + + const inputData = { + measurements, + duration, + interval: 1000, + }; + + + const startStream = () => { + socket.emit("lastInput", inputData); + }; + + socket.on("connect", startStream); + + socket.on("lastOutput", (response) => { + const responseData = response.input1; + setValue(responseData); + + }); + + return () => { + socket.off("lastOutput"); + socket.emit("stop_stream"); // Stop streaming when component unmounts + socket.disconnect(); + }; + }, [measurements, duration]); + + 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( +
+
{name}
+
+ + +
{value}
+
Units
+ + +
{ + measurements ? `${measurements?.input1?.fields}` : 'description'}
+ +
+ +
+
+
+ ) +}; + +export default ProgressCard1; \ No newline at end of file diff --git a/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx b/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx new file mode 100644 index 0000000..083bbed --- /dev/null +++ b/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx @@ -0,0 +1,125 @@ +import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons"; +import React, { useEffect, useMemo, useState } from "react"; +import { Line } from "react-chartjs-2"; +import io from "socket.io-client"; +import useChartStore from "../../../../store/useChartStore"; +import { useWidgetStore } from "../../../../store/useWidgetStore"; +import axios from "axios"; + +const ProgressCard2 = ({ id,title,}: { + id: string, + title: string; +}) => { + const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") + const [name, setName] = useState(title) + const [value1, setValue1] = useState('') + const [value2, setValue2] = useState('') + 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] + + + 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("lastInput", inputData); + }; + + socket.on("connect", startStream); + + socket.on("lastOutput", (response) => { + const responseData1 = response.input1; + const responseData2 = response.input2; + setValue1(responseData1); + setValue2(responseData2); + }); + + return () => { + socket.off("lastOutput"); + socket.emit("stop_stream"); // Stop streaming when component unmounts + socket.disconnect(); + }; + }, [measurements, duration]); + + 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( +
+
{name}
+ +
+ + +
{value1}
+
Units
+ + +
{ + measurements ? `${measurements?.input1?.fields}` : 'description'}
+ +
+ +
+
+ +
+ + +
{value2}
+
Units
+ + +
{ + measurements ? `${measurements?.input2?.fields}` : 'description'}
+ +
+ +
+
+ +
+ ) +}; + +export default ProgressCard2; \ No newline at end of file diff --git a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx index e9221e8..2cf12e0 100644 --- a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx +++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx @@ -1,14 +1,93 @@ -import React,{ useEffect, useState} from 'react' +import React, { useState, useEffect } from 'react' +import { Line } from 'react-chartjs-2' +import useChartStore from '../../../../store/useChartStore'; +import { useWidgetStore } from '../../../../store/useWidgetStore'; +import axios from 'axios'; +import io from "socket.io-client"; const FleetEfficiencyComponent = ({object}: any) => { const [ progress, setProgress ] = useState(0) + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") + const [name, setName] = useState(object.header ? object.header : '') + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0] + const { header, flotingDuration, flotingMeasurements } = useChartStore(); + const { selectedChartId } = useWidgetStore(); + + const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; // Calculate the rotation angle for the progress bar const rotationAngle = 45 + progress * 1.8; + + + 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("lastInput", inputData); + }; + + socket.on("connect", startStream); + + socket.on("lastOutput", (response) => { + const responseData = response.input1; + console.log(responseData); + + if (typeof responseData === "number") { + console.log("It's a number!"); + setProgress(responseData); + } + }); + + return () => { + socket.off("lastOutput"); + socket.emit("stop_stream"); // Stop streaming when component unmounts + socket.disconnect(); + }; + }, [measurements, duration, iotApiUrl]); + + const fetchSavedInputes = async() => { + + if (object?.id !== "") { + try { + const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`); + if (response.status === 200) { + setmeasurements(response.data.Data.measurements) + setDuration(response.data.Data.duration) + setName(response.data.header) + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + } + } + + useEffect(() => { + fetchSavedInputes(); + }, []); + + useEffect(() => { + if (selectedChartId?.id === object?.id) { + fetchSavedInputes(); + } + } + ,[header, flotingDuration, flotingMeasurements]) return ( <> -

Fleet Efficiency

+

{name}

diff --git a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx index 00ec479..da03fce 100644 --- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx +++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx @@ -1,21 +1,95 @@ -import React from 'react' -import { WalletIcon } from '../../../icons/3dChartIcons' +import React, { useState, useEffect } from 'react' +import { Line } from 'react-chartjs-2' +import useChartStore from '../../../../store/useChartStore'; import { useWidgetStore } from '../../../../store/useWidgetStore'; +import axios from 'axios'; +import io from "socket.io-client"; +import { WalletIcon } from '../../../icons/3dChartIcons'; + const TotalCardComponent = ({ object }: any) => { - const { setSelectedChartId } = - useWidgetStore(); + const [ progress, setProgress ] = useState(0) + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") + const [name, setName] = useState(object.header ? object.header : '') + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0] + const { header, flotingDuration, flotingMeasurements } = useChartStore(); + const { selectedChartId } = useWidgetStore(); + + const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; + + 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("lastInput", inputData); + }; + + socket.on("connect", startStream); + + socket.on("lastOutput", (response) => { + const responseData = response.input1; + + if (typeof responseData === "number") { + setProgress(responseData); + } + }); + + return () => { + socket.off("lastOutput"); + socket.emit("stop_stream"); // Stop streaming when component unmounts + socket.disconnect(); + }; + }, [measurements, duration, iotApiUrl]); + + const fetchSavedInputes = async() => { + + if (object?.id !== "") { + try { + const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`); + if (response.status === 200) { + setmeasurements(response.data.Data.measurements) + setDuration(response.data.Data.duration) + setName(response.data.header) + } else { + console.log("Unexpected response:", response); + } + } catch (error) { + console.error("There was an error!", error); + } + } + } + + useEffect(() => { + fetchSavedInputes(); + }, []); + + useEffect(() => { + if (selectedChartId?.id === object?.id) { + fetchSavedInputes(); + } + } + ,[header, flotingDuration, flotingMeasurements]) + return ( <> -
{ - setSelectedChartId(object.id) - }}> -
{object.header}
+
+
{name}
-
{object.value}
+
{progress}
{object.per}
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 4440e6d..17407cb 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -546,9 +546,9 @@ .floating-wrapper { .icon { - width: 25px !important; - height: 25px !important; - background-color: transparent; + // width: 25px !important; + // height: 25px !important; + // background-color: transparent; } .kebab { @@ -560,6 +560,7 @@ z-index: 10; cursor: pointer; @include flex-center; + background-color: transparent !important; } .kebab-options {