From ec87acb82461688ad2efa4a14443b57a1ec57bdd Mon Sep 17 00:00:00 2001
From: gabriel <gabriel@hexrfactory.com>
Date: Mon, 31 Mar 2025 15:02:35 +0530
Subject: [PATCH] added input for name
---
app/.env | 2 +
app/package-lock.json | 38 ++--
app/package.json | 1 +
.../IotInputCards/LineGrapInput.tsx | 77 ++++---
.../sidebarRight/visualization/data/Data.tsx | 22 +-
.../ui/componets/DraggableWidget.tsx | 9 +-
.../realTimeVis/charts/BarGraphComponent.tsx | 19 +-
.../charts/DoughnutGraphComponent.tsx | 202 +++++++++++++-----
.../realTimeVis/charts/LineGraphComponent.tsx | 16 +-
.../realTimeVis/charts/PieGraphComponent.tsx | 16 +-
.../zoneData/addWidgets.ts | 2 +-
.../zoneData/getSelect2dZoneData.ts | 2 +-
.../zoneData/getZoneData.ts | 2 +-
.../realTimeVisulization/zoneData/getZones.ts | 2 +-
app/src/store/useChartStore.ts | 6 +
15 files changed, 281 insertions(+), 135 deletions(-)
diff --git a/app/.env b/app/.env
index 153338d..c93e3d1 100644
--- a/app/.env
+++ b/app/.env
@@ -7,6 +7,8 @@ REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
# Base URL for the server REST API, used for HTTP requests to the backend server.
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
+REACT_APP_SERVER_REST_API_LOCAL_BASE_URL=192.168.0.102:5000
+
# Base URL for the server marketplace API.
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
diff --git a/app/package-lock.json b/app/package-lock.json
index d3aa21e..7d72590 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -26,6 +26,7 @@
"@types/react-dom": "^18.3.0",
"@use-gesture/react": "^10.3.1",
"chart.js": "^4.4.8",
+ "chartjs-plugin-annotation": "^3.1.0",
"glob": "^11.0.0",
"gsap": "^3.12.5",
"leva": "^0.10.0",
@@ -2018,7 +2019,7 @@
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"@jridgewell/trace-mapping": "0.3.9"
},
@@ -2030,7 +2031,7 @@
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.0.3",
"@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4263,25 +4264,25 @@
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
"integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
- "dev": true
+ "devOptional": true
},
"node_modules/@tsconfig/node12": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
- "dev": true
+ "devOptional": true
},
"node_modules/@tsconfig/node14": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
- "dev": true
+ "devOptional": true
},
"node_modules/@tsconfig/node16": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
- "dev": true
+ "devOptional": true
},
"node_modules/@turf/along": {
"version": "7.2.0",
@@ -8498,6 +8499,15 @@
"pnpm": ">=8"
}
},
+ "node_modules/chartjs-plugin-annotation": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+ "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
+ "license": "MIT",
+ "peerDependencies": {
+ "chart.js": ">=4.0.0"
+ }
+ },
"node_modules/check-more-types": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
@@ -9006,7 +9016,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
- "dev": true
+ "devOptional": true
},
"node_modules/cross-env": {
"version": "7.0.3",
@@ -9874,7 +9884,7 @@
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
- "dev": true,
+ "devOptional": true,
"engines": {
"node": ">=0.3.1"
}
@@ -15224,7 +15234,7 @@
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
- "dev": true
+ "devOptional": true
},
"node_modules/makeerror": {
"version": "1.0.12",
@@ -20683,7 +20693,7 @@
"version": "10.9.2",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"@cspotcode/source-map-support": "^0.8.0",
"@tsconfig/node10": "^1.0.7",
@@ -20726,7 +20736,7 @@
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"acorn": "^8.11.0"
},
@@ -20738,7 +20748,7 @@
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
- "dev": true
+ "devOptional": true
},
"node_modules/tsconfig-paths": {
"version": "3.15.0",
@@ -21225,7 +21235,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
- "dev": true
+ "devOptional": true
},
"node_modules/v8-to-istanbul": {
"version": "8.1.1",
@@ -22284,7 +22294,7 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
- "dev": true,
+ "devOptional": true,
"engines": {
"node": ">=6"
}
diff --git a/app/package.json b/app/package.json
index 541d3a1..66e3b39 100644
--- a/app/package.json
+++ b/app/package.json
@@ -21,6 +21,7 @@
"@types/react-dom": "^18.3.0",
"@use-gesture/react": "^10.3.1",
"chart.js": "^4.4.8",
+ "chartjs-plugin-annotation": "^3.1.0",
"glob": "^11.0.0",
"gsap": "^3.12.5",
"leva": "^0.10.0",
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
index baf1fcd..f36207e 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -58,11 +58,11 @@
// name: string;
// fields: string;
// }
-
+
// interface InputData {
// [key: string]: Measurement;
// }
-
+
// const extractMeasurements = (input: InputData): Measurement[] => {
// return Object.values(input);
// };
@@ -71,7 +71,7 @@
// const measurementsData = extractMeasurements(selections);
// setMeasurements(measurementsData);
// }, [selections]);
-
+
// return (
// <>
@@ -125,20 +125,22 @@ 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 LineGrapInput = (props: Props) => {
- const { setMeasurements, updateDuration } = useChartStore();
+ const [widgetName, setWidgetName] = useState('Widget');
+ const { setMeasurements, updateDuration, updateName } = useChartStore();
const [duration, setDuration] = useState('1h')
const [dropDowndata, setDropDownData] = useState({});
- const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
+ const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
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 {
@@ -157,13 +159,14 @@ const LineGrapInput = (props: Props) => {
}, []);
useEffect(() => {
- const fetchSavedInputes = async() => {
+ 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}`);
+ const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_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);
}
@@ -181,17 +184,19 @@ const LineGrapInput = (props: Props) => {
useEffect(() => {
setMeasurements(selections);
updateDuration(duration);
- }, [selections, duration]);
+ updateName(widgetName);
+ }, [selections, duration, widgetName]);
- const sendInputes = async(inputMeasurement: any, inputDuration: any) => {
+ 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`,{
+ const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/widget/save`, {
organization: organization,
zoneId: selectedZone.zoneId,
- widget:{
+ widget: {
id: selectedChartId.id,
panel: selectedChartId.panel,
+ widgetName: inputName,
Data: {
measurements: inputMeasurement,
duration: inputDuration
@@ -210,35 +215,47 @@ const LineGrapInput = (props: Props) => {
}
}
- 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)) {
- setSelections(newSelections);
- }
- // sendInputes(newSelections, duration); // Send data to server
- // return newSelections;
+ 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)) {
+ 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 (
<>
<div className="inputs-wrapper">
+ <div className="datas">
+ <div className="datas__label">Widget name</div>
+ <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+ </div>
{[...Array(6)].map((_, index) => {
const inputKey = `input${index + 1}`;
return (
diff --git a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
index 71847c7..1100954 100644
--- a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
import LineGrapInput from "../IotInputCards/LineGrapInput";
+import RenameInput from "../../../../ui/inputs/RenameInput";
// Define the data structure for demonstration purposes
const DATA_STRUCTURE = {
@@ -107,27 +108,32 @@ const Data = () => {
[selectedChartId.id]: currentChartData.map((group) =>
group.id === groupId
? {
- ...group,
- children: group.children.filter(
- (child) => child.id !== childId
- ),
- }
+ ...group,
+ children: group.children.filter(
+ (child) => child.id !== childId
+ ),
+ }
: group
),
};
});
};
+ console.log("selectedChartId", selectedChartId);
return (
<div className="dataSideBar">
- {selectedChartId?.title && (
+ {/* {selectedChartId?.title && (
<div className="sideBarHeader">{selectedChartId?.title}</div>
- )}
+ )} */}
+
+
+ {/* <RenameInput value={selectedChartId?.title || "untited"} /> */}
+
{/* Render groups dynamically */}
{
chartDataGroups[selectedChartId?.id] && <LineGrapInput />
}
-
+
{/* Info Box */}
<div className="infoBox">
<span className="infoIcon">i</span>
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 9c17c03..f79c55c 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -287,18 +287,11 @@ export const DraggableWidget = ({
)}
{widget.type === "doughnut" && (
<DoughnutGraphComponent
+ id={widget.id}
type={widget.type}
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 === "polarArea" && (
diff --git a/app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx
index 26f7a4b..8a18d0f 100644
--- a/app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx
@@ -211,9 +211,10 @@ const BarGraphComponent = ({
fontWeight = "Regular",
}: ChartComponentProps) => {
const { themeColor } = useThemeStore();
- const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+ 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: [],
@@ -236,6 +237,10 @@ const BarGraphComponent = ({
],
};
+ useEffect(() => {
+ console.log("titleeeeeeeeeeeeeeeeeee",title);
+ },[])
+
// Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -270,7 +275,7 @@ const BarGraphComponent = ({
plugins: {
title: {
display: true,
- text: title,
+ text: name,
font: chartFontStyle,
},
legend: {
@@ -285,7 +290,7 @@ const BarGraphComponent = ({
},
},
}),
- [title, chartFontStyle]
+ [title, chartFontStyle, name]
);
// useEffect(() => {console.log(measurements);
@@ -304,15 +309,12 @@ const BarGraphComponent = ({
const startStream = () => {
- console.log("inputtttttttttt",inputData);
socket.emit("lineInput", inputData);
};
socket.on("connect", startStream);
socket.on("lineOutput", (response) => {
- console.log("responce dataaaaaaaaa",response.data);
-
const responseData = response.data;
// Extract timestamps and values
@@ -343,10 +345,11 @@ const BarGraphComponent = ({
if (id !== "") {
try {
- const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+ 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);
}
@@ -365,7 +368,7 @@ const BarGraphComponent = ({
fetchSavedInputes();
}
}
- ,[chartMeasurements, chartDuration])
+ ,[chartMeasurements, chartDuration, widgetName])
return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
diff --git a/app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
index c1d5ac2..8a6adf8 100644
--- a/app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
@@ -1,22 +1,64 @@
-import { useMemo } from "react";
-import { Doughnut, Line } from "react-chartjs-2";
+import React, { useEffect, useMemo, useState } from "react";
+import { Doughnut } 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 DoughnutGraphComponent = ({
+ 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 DoughnutGraphComponent = ({
[]
);
- // 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 DoughnutGraphComponent = ({
[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 <Doughnut 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_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);
+ }
+ }
+ }
+
+ useEffect(() => {
+ fetchSavedInputes();
+ }, []);
+
+ useEffect(() => {
+ if (selectedChartId?.id === id) {
+ fetchSavedInputes();
+ }
+ }
+ ,[chartMeasurements, chartDuration, widgetName])
+
+ return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
-export default DoughnutGraphComponent;
+export default DoughnutGraphComponent;
\ No newline at end of file
diff --git a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
index 34420fa..0425408 100644
--- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
@@ -24,9 +24,10 @@ const LineGraphComponent = ({
fontWeight = "Regular",
}: ChartComponentProps) => {
const { themeColor } = useThemeStore();
- const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+ 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: [],
@@ -49,6 +50,10 @@ const LineGraphComponent = ({
],
};
+ useEffect(() => {
+ console.log("titleeeeeeeeeeeeeeeeeee",title);
+ },[])
+
// Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -83,7 +88,7 @@ const LineGraphComponent = ({
plugins: {
title: {
display: true,
- text: title,
+ text: name,
font: chartFontStyle,
},
legend: {
@@ -98,7 +103,7 @@ const LineGraphComponent = ({
},
},
}),
- [title, chartFontStyle]
+ [title, chartFontStyle, name]
);
// useEffect(() => {console.log(measurements);
@@ -153,10 +158,11 @@ const LineGraphComponent = ({
if (id !== "") {
try {
- const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+ 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);
}
@@ -175,7 +181,7 @@ const LineGraphComponent = ({
fetchSavedInputes();
}
}
- ,[chartMeasurements, chartDuration])
+ ,[chartMeasurements, chartDuration, widgetName])
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
diff --git a/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
index 46516fa..8f32791 100644
--- a/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
@@ -210,9 +210,10 @@ const PieChartComponent = ({
fontWeight = "Regular",
}: ChartComponentProps) => {
const { themeColor } = useThemeStore();
- const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+ 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: [],
@@ -235,6 +236,10 @@ const PieChartComponent = ({
],
};
+ useEffect(() => {
+ console.log("titleeeeeeeeeeeeeeeeeee",title);
+ },[])
+
// Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -269,7 +274,7 @@ const PieChartComponent = ({
plugins: {
title: {
display: true,
- text: title,
+ text: name,
font: chartFontStyle,
},
legend: {
@@ -284,7 +289,7 @@ const PieChartComponent = ({
// },
},
}),
- [title, chartFontStyle]
+ [title, chartFontStyle, name]
);
// useEffect(() => {console.log(measurements);
@@ -339,10 +344,11 @@ const PieChartComponent = ({
if (id !== "") {
try {
- const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+ 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);
}
@@ -361,7 +367,7 @@ const PieChartComponent = ({
fetchSavedInputes();
}
}
- ,[chartMeasurements, chartDuration])
+ ,[chartMeasurements, chartDuration, widgetName])
return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
diff --git a/app/src/services/realTimeVisulization/zoneData/addWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addWidgets.ts
index 683943e..64be803 100644
--- a/app/src/services/realTimeVisulization/zoneData/addWidgets.ts
+++ b/app/src/services/realTimeVisulization/zoneData/addWidgets.ts
@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
export const addingWidgets = async (
zoneId: string,
diff --git a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
index 71d9c2f..f509a5d 100644
--- a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
+++ b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
console.log("url_Backend_dwinzo: ", url_Backend_dwinzo);
export const getSelect2dZoneData = async (
diff --git a/app/src/services/realTimeVisulization/zoneData/getZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getZoneData.ts
index d2df867..5d84167 100644
--- a/app/src/services/realTimeVisulization/zoneData/getZoneData.ts
+++ b/app/src/services/realTimeVisulization/zoneData/getZoneData.ts
@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
export const getZone2dData = async (organization?: string) => {
try {
diff --git a/app/src/services/realTimeVisulization/zoneData/getZones.ts b/app/src/services/realTimeVisulization/zoneData/getZones.ts
index 39031d8..32f850a 100644
--- a/app/src/services/realTimeVisulization/zoneData/getZones.ts
+++ b/app/src/services/realTimeVisulization/zoneData/getZones.ts
@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
export const getZoneData = async (zoneId: string, organization: string) => {
try {
diff --git a/app/src/store/useChartStore.ts b/app/src/store/useChartStore.ts
index 4d61952..079b9ff 100644
--- a/app/src/store/useChartStore.ts
+++ b/app/src/store/useChartStore.ts
@@ -9,20 +9,26 @@ interface MeasurementStore {
measurements: Record<string, Measurement>; // Change array to Record<string, Measurement>
interval: number;
duration: string;
+ name: string;
setMeasurements: (newMeasurements: Record<string, Measurement>) => void;
updateDuration: (newDuration: string) => void;
+ updateName: (newName: string) => void;
}
const useChartStore = create<MeasurementStore>((set) => ({
measurements: {}, // Initialize as an empty object
interval: 1000,
duration: "1h",
+ name:'',
setMeasurements: (newMeasurements) =>
set(() => ({ measurements: newMeasurements })),
updateDuration: (newDuration) =>
set(() => ({ duration: newDuration })),
+
+ updateName: (newName) =>
+ set(() => ({ duration: newName })),
}));
export default useChartStore;