2d and 3d widgets duplication removed
This commit is contained in:
parent
28e11d04b4
commit
b1dc6216b3
1
app/.env
1
app/.env
|
|
@ -2,6 +2,7 @@
|
|||
PORT=8200
|
||||
|
||||
# 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
|
||||
|
||||
# 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 { Bar } from "react-chartjs-2";
|
||||
|
|
@ -243,7 +60,7 @@ const BarGraphComponent = ({
|
|||
],
|
||||
};
|
||||
|
||||
useEffect(() => {}, []);
|
||||
useEffect(() => { }, []);
|
||||
|
||||
// Memoize Theme Colors
|
||||
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 { Pie } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
|
|||
);
|
||||
|
||||
set({ socket, visualizationSocket });
|
||||
console.log('visualizationSocket: ', visualizationSocket);
|
||||
},
|
||||
disconnectSocket: () => {
|
||||
set((state: any) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue