diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx index 4d406d9..baf1fcd 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx @@ -122,23 +122,29 @@ 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"; type Props = {}; const LineGrapInput = (props: Props) => { - const { measurements, setMeasurements, updateDuration, duration } = useChartStore(); - + const { setMeasurements, updateDuration } = useChartStore(); + const [duration, setDuration] = useState('1h') const [dropDowndata, setDropDownData] = useState({}); - const [selections, setSelections] = useState>(measurements); + 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); + // console.log("dropdown data:", response.data); setDropDownData(response.data); } else { console.log("Unexpected response:", response); @@ -150,26 +156,84 @@ const LineGrapInput = (props: Props) => { 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) + } 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(() => { - setSelections(measurements); - }, [measurements]); + setMeasurements(selections); + updateDuration(duration); + }, [selections, duration]); - const handleSelect = (inputKey: string, selectedData: { name: string; fields: string } | null) => { - setSelections((prev) => { - const newSelections = { ...prev }; + + const sendInputes = async(inputMeasurement: any, inputDuration: 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, + 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 - return newSelections; - }); + // 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 handleSelectDuration = (option: string) => { - updateDuration(option); + const handleSelectDuration = async(option: string) => { + if ( await sendInputes(selections, option)) { + setDuration(option); + } + // setDuration(option); }; return ( diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx index 979e685..9c17c03 100644 --- a/app/src/components/ui/componets/DraggableWidget.tsx +++ b/app/src/components/ui/componets/DraggableWidget.tsx @@ -230,11 +230,13 @@ export const DraggableWidget = ({ )} {/* Render charts based on widget type */} + {widget.type === "progress" && ( )} {widget.type === "line" && ( { const { themeColor } = useThemeStore(); - const { measurements, duration } = useChartStore(); // Zustand Store + const { measurements: chartMeasurements, duration: chartDuration } = useChartStore(); + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") 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: [ @@ -254,31 +262,34 @@ const BarGraphComponent = ({ [fontFamily, fontSizeValue, fontWeightValue] ); - // Memoized Chart Options - const options = useMemo( - () => ({ - responsive: true, - maintainAspectRatio: false, - plugins: { - title: { - display: true, - text: title, - font: chartFontStyle, - }, - legend: { - display: false, - }, - }, - scales: { - x: { - ticks: { + // Memoize Chart Options + const options = useMemo( + () => ({ + responsive: true, + maintainAspectRatio: false, + plugins: { + title: { display: true, + text: title, + font: chartFontStyle, + }, + legend: { + display: false, }, }, - }, - }), - [title, chartFontStyle] - ); + scales: { + x: { + ticks: { + display: true, // This hides the x-axis labels + }, + }, + }, + }), + [title, chartFontStyle] + ); + + // useEffect(() => {console.log(measurements); + // },[measurements]) useEffect(() => { if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; @@ -291,15 +302,18 @@ const BarGraphComponent = ({ interval: 1000, }; - const startStream = () => { + + 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; - console.log("Received data:", responseData); // Extract timestamps and values const labels = responseData.time; @@ -325,8 +339,35 @@ const BarGraphComponent = ({ }; }, [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) + } 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]) + return 0 ? chartData : defaultData} options={options} />; }; export default BarGraphComponent; - diff --git a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx index fcc5aeb..34420fa 100644 --- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx +++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx @@ -3,8 +3,11 @@ import { Line } 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; @@ -13,6 +16,7 @@ interface ChartComponentProps { } const LineGraphComponent = ({ + id, type, title, fontFamily, @@ -20,14 +24,18 @@ const LineGraphComponent = ({ fontWeight = "Regular", }: ChartComponentProps) => { const { themeColor } = useThemeStore(); - const { measurements, duration } = useChartStore(); // Zustand Store + const { measurements: chartMeasurements, duration: chartDuration } = useChartStore(); + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") 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: [ @@ -93,8 +101,8 @@ const LineGraphComponent = ({ [title, chartFontStyle] ); - useEffect(() => {console.log(measurements); - },[measurements]) + // useEffect(() => {console.log(measurements); + // },[measurements]) useEffect(() => { if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; @@ -107,7 +115,8 @@ const LineGraphComponent = ({ interval: 1000, }; - const startStream = () => { + + const startStream = () => { socket.emit("lineInput", inputData); }; @@ -140,6 +149,34 @@ const LineGraphComponent = ({ }; }, [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) + } 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]) + return 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 ca6b728..46516fa 100644 --- a/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx +++ b/app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx @@ -184,14 +184,16 @@ // export default PieChartComponent; - import React, { useEffect, useMemo, useState } from "react"; import { Pie } 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; @@ -200,6 +202,7 @@ interface ChartComponentProps { } const PieChartComponent = ({ + id, type, title, fontFamily, @@ -207,14 +210,18 @@ const PieChartComponent = ({ fontWeight = "Regular", }: ChartComponentProps) => { const { themeColor } = useThemeStore(); - const { measurements, duration } = useChartStore(); // Zustand Store + const { measurements: chartMeasurements, duration: chartDuration } = useChartStore(); + const [measurements, setmeasurements] = useState({}); + const [duration, setDuration] = useState("1h") 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: [ @@ -254,31 +261,34 @@ const PieChartComponent = ({ [fontFamily, fontSizeValue, fontWeightValue] ); - // Memoized Chart Options - const options = useMemo( - () => ({ - responsive: true, - maintainAspectRatio: false, - plugins: { - title: { - display: true, - text: title, - font: chartFontStyle, + // Memoize Chart Options + const options = useMemo( + () => ({ + responsive: true, + maintainAspectRatio: false, + plugins: { + title: { + display: true, + text: title, + font: chartFontStyle, + }, + legend: { + display: false, + }, }, - legend: { - display: false, + scales: { + // x: { + // ticks: { + // display: true, // This hides the x-axis labels + // }, + // }, }, - }, - scales: { - // x: { - // ticks: { - // display: true, - // }, - // }, - }, - }), - [title, chartFontStyle] - ); + }), + [title, chartFontStyle] + ); + + // useEffect(() => {console.log(measurements); + // },[measurements]) useEffect(() => { if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; @@ -291,7 +301,8 @@ const PieChartComponent = ({ interval: 1000, }; - const startStream = () => { + + const startStream = () => { socket.emit("lineInput", inputData); }; @@ -299,7 +310,6 @@ const PieChartComponent = ({ socket.on("lineOutput", (response) => { const responseData = response.data; - console.log("Received data:", responseData); // Extract timestamps and values const labels = responseData.time; @@ -325,8 +335,35 @@ const PieChartComponent = ({ }; }, [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) + } 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]) + return 0 ? chartData : defaultData} options={options} />; }; -export default PieChartComponent; - +export default PieChartComponent; \ No newline at end of file