added dynamic input based on graph
This commit is contained in:
@@ -1,6 +1,195 @@
|
||||
import { useMemo } from "react";
|
||||
// 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 { useThemeStore } from "../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
interface ChartComponentProps {
|
||||
type: any;
|
||||
@@ -8,16 +197,42 @@ interface ChartComponentProps {
|
||||
fontFamily?: string;
|
||||
fontSize?: string;
|
||||
fontWeight?: "Light" | "Regular" | "Bold";
|
||||
data: any;
|
||||
}
|
||||
|
||||
const LineGraphComponent = ({
|
||||
const BarGraphComponent = ({
|
||||
type,
|
||||
title,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
fontWeight = "Regular",
|
||||
}: ChartComponentProps) => {
|
||||
// Memoize Font Weight Mapping
|
||||
const { themeColor } = useThemeStore();
|
||||
const { measurements, duration } = useChartStore(); // Zustand Store
|
||||
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: "#b392f0",
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 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,
|
||||
@@ -27,19 +242,9 @@ const LineGraphComponent = ({
|
||||
[]
|
||||
);
|
||||
|
||||
// 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",
|
||||
@@ -49,6 +254,7 @@ const LineGraphComponent = ({
|
||||
[fontFamily, fontSizeValue, fontWeightValue]
|
||||
);
|
||||
|
||||
// Memoized Chart Options
|
||||
const options = useMemo(
|
||||
() => ({
|
||||
responsive: true,
|
||||
@@ -66,7 +272,7 @@ const LineGraphComponent = ({
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
display: false, // This hides the x-axis labels
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -74,21 +280,53 @@ const LineGraphComponent = ({
|
||||
[title, chartFontStyle]
|
||||
);
|
||||
|
||||
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",
|
||||
borderColor: "#ffffff",
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
|
||||
return <Bar data={chartData} options={options} />;
|
||||
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;
|
||||
console.log("Received data:", responseData);
|
||||
|
||||
// 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]);
|
||||
|
||||
return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
||||
};
|
||||
|
||||
export default LineGraphComponent;
|
||||
export default BarGraphComponent;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user