105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
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<any>({});
|
|
const [duration, setDuration] = useState("1h")
|
|
const [name, setName] = useState(title)
|
|
const [value, setValue] = useState<any>('')
|
|
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(
|
|
<div className="chart progressBar">
|
|
<div className="header">{name}</div>
|
|
<div className="stock">
|
|
<span className="stock-item">
|
|
<span className="stockValues">
|
|
<div className="value">{value}</div>
|
|
<div className="key">Units</div>
|
|
|
|
</span>
|
|
<div className="stock-description">{
|
|
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
|
|
</span>
|
|
<div className="icon">
|
|
<StockIncreseIcon />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default ProgressCard1; |