378 lines
10 KiB
TypeScript
378 lines
10 KiB
TypeScript
// import React, { useEffect, useRef, useMemo, useState } from "react";
|
|
// import { Chart } from "chart.js/auto";
|
|
// import { useThemeStore } from "../../../../store/useThemeStore";
|
|
// import io from "socket.io-client";
|
|
// import { Bar } from 'react-chartjs-2';
|
|
// import useChartStore from "../../../../store/useChartStore";
|
|
|
|
// // WebSocket Connection
|
|
// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
|
|
|
|
// interface ChartComponentProps {
|
|
// type: any;
|
|
// title: string;
|
|
// fontFamily?: string;
|
|
// fontSize?: string;
|
|
// fontWeight?: "Light" | "Regular" | "Bold";
|
|
// data: any;
|
|
// }
|
|
|
|
// const LineGraphComponent = ({
|
|
// type,
|
|
// title,
|
|
// fontFamily,
|
|
// fontSize,
|
|
// fontWeight = "Regular",
|
|
// data,
|
|
// }: ChartComponentProps) => {
|
|
// const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
// const { themeColor } = useThemeStore();
|
|
// const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
|
// labels: [],
|
|
// datasets: [],
|
|
// });
|
|
|
|
// const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
|
|
|
// const defaultData = {
|
|
// labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
// datasets: [
|
|
// {
|
|
// label: "Dataset",
|
|
// data: [12, 19, 3, 5, 2, 3],
|
|
// backgroundColor: ["#6f42c1"],
|
|
// borderColor: "#ffffff",
|
|
// borderWidth: 2,
|
|
// },
|
|
// ],
|
|
// };
|
|
|
|
// // Memoize Theme Colors to Prevent Unnecessary Recalculations
|
|
// const buttonActionColor = useMemo(
|
|
// () => themeColor[0] || "#5c87df",
|
|
// [themeColor]
|
|
// );
|
|
// const buttonAbortColor = useMemo(
|
|
// () => themeColor[1] || "#ffffff",
|
|
// [themeColor]
|
|
// );
|
|
|
|
// // Memoize Font Weight Mapping
|
|
// const chartFontWeightMap = useMemo(
|
|
// () => ({
|
|
// Light: "lighter" as const,
|
|
// Regular: "normal" as const,
|
|
// Bold: "bold" as const,
|
|
// }),
|
|
// []
|
|
// );
|
|
|
|
// // Parse and Memoize Font Size
|
|
// const fontSizeValue = useMemo(
|
|
// () => (fontSize ? parseInt(fontSize) : 12),
|
|
// [fontSize]
|
|
// );
|
|
|
|
// // Determine and Memoize Font Weight
|
|
// const fontWeightValue = useMemo(
|
|
// () => chartFontWeightMap[fontWeight],
|
|
// [fontWeight, chartFontWeightMap]
|
|
// );
|
|
|
|
// // Memoize Chart Font Style
|
|
// const chartFontStyle = useMemo(
|
|
// () => ({
|
|
// family: fontFamily || "Arial",
|
|
// size: fontSizeValue,
|
|
// weight: fontWeightValue,
|
|
// }),
|
|
// [fontFamily, fontSizeValue, fontWeightValue]
|
|
// );
|
|
|
|
// // Memoize Chart Data
|
|
// // const data = useMemo(() => propsData, [propsData]);
|
|
|
|
// // Memoize Chart Options
|
|
// const options = useMemo(
|
|
// () => ({
|
|
// responsive: true,
|
|
// maintainAspectRatio: false,
|
|
// plugins: {
|
|
// title: {
|
|
// display: true,
|
|
// text: title,
|
|
// font: chartFontStyle,
|
|
// },
|
|
// legend: {
|
|
// display: false,
|
|
// },
|
|
// },
|
|
// scales: {
|
|
// x: {
|
|
// ticks: {
|
|
// display: true, // This hides the x-axis labels
|
|
// },
|
|
// },
|
|
// },
|
|
// }),
|
|
// [title, chartFontStyle]
|
|
// );
|
|
|
|
// const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
|
|
|
|
// useEffect(() => {
|
|
|
|
// const socket = io(`http://${iotApiUrl}`);
|
|
|
|
// if ( measurements.length > 0 ) {
|
|
// var inputes = {
|
|
// measurements: measurements,
|
|
// duration: duration,
|
|
// interval: 1000,
|
|
// }
|
|
|
|
// // Start stream
|
|
// const startStream = () => {
|
|
// socket.emit("lineInput", inputes);
|
|
// }
|
|
|
|
// socket.on('connect', startStream);
|
|
|
|
// socket.on("lineOutput", (response) => {
|
|
// const responceData = response.data;
|
|
// console.log("Received data:", responceData);
|
|
|
|
// // Extract timestamps and values
|
|
// const labels = responceData.time;
|
|
// const datasets = measurements.map((measurement: any) => {
|
|
// const key = `${measurement.name}.${measurement.fields}`;
|
|
// return {
|
|
// label: key,
|
|
// data: responceData[key]?.values ?? [], // Ensure it exists
|
|
// backgroundColor: "#6f42c1",
|
|
// borderColor: "#ffffff",
|
|
// };
|
|
// });
|
|
|
|
// setChartData({ labels, datasets });
|
|
// });
|
|
// }
|
|
|
|
// return () => {
|
|
// socket.off("lineOutput");
|
|
// socket.emit("stop_stream"); // Stop streaming when component unmounts
|
|
// };
|
|
// }, [measurements, duration]);
|
|
|
|
// // useEffect(() => {
|
|
// // if (!canvasRef.current) return;
|
|
// // const ctx = canvasRef.current.getContext("2d");
|
|
// // if (!ctx) return;
|
|
|
|
// // const chart = new Chart(ctx, {
|
|
// // type,
|
|
// // data: chartData,
|
|
// // options: options,
|
|
// // });
|
|
|
|
// // return () => chart.destroy();
|
|
// // }, [chartData, type, title]);
|
|
|
|
// return <Bar data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
|
|
// };
|
|
|
|
// export default LineGraphComponent;
|
|
|
|
|
|
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|
import { Bar } from "react-chartjs-2";
|
|
import io from "socket.io-client";
|
|
|
|
import axios from "axios";
|
|
import { useThemeStore } from "../../../../../store/useThemeStore";
|
|
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
|
import useChartStore from "../../../../../store/useChartStore";
|
|
|
|
interface ChartComponentProps {
|
|
id: string;
|
|
type: any;
|
|
title: string;
|
|
fontFamily?: string;
|
|
fontSize?: string;
|
|
fontWeight?: "Light" | "Regular" | "Bold";
|
|
}
|
|
|
|
const BarGraphComponent = ({
|
|
id,
|
|
type,
|
|
title,
|
|
fontFamily,
|
|
fontSize,
|
|
fontWeight = "Regular",
|
|
}: ChartComponentProps) => {
|
|
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(() => {
|
|
|
|
},[])
|
|
|
|
// 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,
|
|
Regular: "normal" as const,
|
|
Bold: "bold" as const,
|
|
}),
|
|
[]
|
|
);
|
|
|
|
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
|
|
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
|
|
|
|
const chartFontStyle = useMemo(
|
|
() => ({
|
|
family: fontFamily || "Arial",
|
|
size: fontSizeValue,
|
|
weight: fontWeightValue,
|
|
}),
|
|
[fontFamily, fontSizeValue, fontWeightValue]
|
|
);
|
|
|
|
// Memoize Chart Options
|
|
const options = useMemo(
|
|
() => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: name,
|
|
font: chartFontStyle,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
display: true, // This hides the x-axis labels
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
[title, chartFontStyle, name]
|
|
);
|
|
|
|
// useEffect(() => {console.log(measurements);
|
|
// },[measurements])
|
|
|
|
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 <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
|
};
|
|
|
|
export default BarGraphComponent;
|