2d and 3d widgets duplication removed
This commit is contained in:
1
app/.env
1
app/.env
@@ -2,6 +2,7 @@
|
|||||||
PORT=8200
|
PORT=8200
|
||||||
|
|
||||||
# Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
|
# Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
|
||||||
|
# REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.110:8000
|
||||||
REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
|
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.
|
# Base URL for the server REST API, used for HTTP requests to the backend server.
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
import { Bar } from "react-chartjs-2";
|
|
||||||
|
|
||||||
interface ChartComponentProps {
|
|
||||||
type: any;
|
|
||||||
title: string;
|
|
||||||
fontFamily?: string;
|
|
||||||
fontSize?: string;
|
|
||||||
fontWeight?: "Light" | "Regular" | "Bold";
|
|
||||||
data: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LineGraphComponent = ({
|
|
||||||
title,
|
|
||||||
fontFamily,
|
|
||||||
fontSize,
|
|
||||||
fontWeight = "Regular",
|
|
||||||
}: ChartComponentProps) => {
|
|
||||||
// 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]
|
|
||||||
);
|
|
||||||
|
|
||||||
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
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
[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,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Bar data={chartData} options={options} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LineGraphComponent;
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
import { Line } from "react-chartjs-2";
|
|
||||||
|
|
||||||
interface ChartComponentProps {
|
|
||||||
type: any;
|
|
||||||
title: string;
|
|
||||||
fontFamily?: string;
|
|
||||||
fontSize?: string;
|
|
||||||
fontWeight?: "Light" | "Regular" | "Bold";
|
|
||||||
data: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LineGraphComponent = ({
|
|
||||||
title,
|
|
||||||
fontFamily,
|
|
||||||
fontSize,
|
|
||||||
fontWeight = "Regular",
|
|
||||||
}: ChartComponentProps) => {
|
|
||||||
// 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]
|
|
||||||
);
|
|
||||||
|
|
||||||
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
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
[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", // Updated to #6f42c1 (Purple)
|
|
||||||
borderColor: "#ffffff", // Keeping border color white
|
|
||||||
borderWidth: 2,
|
|
||||||
fill: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Line data={chartData} options={options} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LineGraphComponent;
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
import { Pie } from "react-chartjs-2";
|
|
||||||
|
|
||||||
interface ChartComponentProps {
|
|
||||||
type: any;
|
|
||||||
title: string;
|
|
||||||
fontFamily?: string;
|
|
||||||
fontSize?: string;
|
|
||||||
fontWeight?: "Light" | "Regular" | "Bold";
|
|
||||||
data: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PieChartComponent = ({
|
|
||||||
title,
|
|
||||||
fontFamily,
|
|
||||||
fontSize,
|
|
||||||
fontWeight = "Regular",
|
|
||||||
}: ChartComponentProps) => {
|
|
||||||
// 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]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Access the CSS variable for the primary accent color
|
|
||||||
const accentColor = getComputedStyle(document.documentElement)
|
|
||||||
.getPropertyValue("--accent-color")
|
|
||||||
.trim();
|
|
||||||
|
|
||||||
const options = useMemo(
|
|
||||||
() => ({
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: title,
|
|
||||||
font: chartFontStyle,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
[title, chartFontStyle]
|
|
||||||
);
|
|
||||||
|
|
||||||
const chartData = {
|
|
||||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Dataset",
|
|
||||||
data: [12, 19, 3, 5, 2, 3],
|
|
||||||
backgroundColor: ["#6f42c1"],
|
|
||||||
borderColor: "#ffffff",
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Pie data={chartData} options={options} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PieChartComponent;
|
|
||||||
@@ -1,187 +1,4 @@
|
|||||||
// 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 React, { useEffect, useMemo, useState } from "react";
|
||||||
import { Bar } from "react-chartjs-2";
|
import { Bar } from "react-chartjs-2";
|
||||||
@@ -243,7 +60,7 @@ const BarGraphComponent = ({
|
|||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {}, []);
|
useEffect(() => { }, []);
|
||||||
|
|
||||||
// Memoize Theme Colors
|
// Memoize Theme Colors
|
||||||
const buttonActionColor = useMemo(
|
const buttonActionColor = useMemo(
|
||||||
|
|||||||
@@ -1,188 +1,3 @@
|
|||||||
// 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 { Pie } 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 PieChartComponent = ({
|
|
||||||
// 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] || "#6f42c1",
|
|
||||||
// [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 <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export default PieChartComponent;
|
|
||||||
|
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import { Pie } from "react-chartjs-2";
|
import { Pie } from "react-chartjs-2";
|
||||||
import io from "socket.io-client";
|
import io from "socket.io-client";
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
set({ socket, visualizationSocket });
|
set({ socket, visualizationSocket });
|
||||||
|
console.log('visualizationSocket: ', visualizationSocket);
|
||||||
},
|
},
|
||||||
disconnectSocket: () => {
|
disconnectSocket: () => {
|
||||||
set((state: any) => {
|
set((state: any) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user