Dwinzo_dev/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx

// 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: true, // 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;


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 { Line } 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: [],
  });

  // 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(() => {
    if ( measurements.length > 0 ) {
      const socket = io("http://192.168.0.192:5010");

      var inputes = {
        measurements: measurements,
        duration: duration,
        interval: 1000,
      }

      console.log('graphHHHHHHHHHHHHHHHHHHHHHHHHHHHHH',inputes);
      

    // 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 = data.measurements.map((measurement: any) => ({
        label: `${measurement.name}.${measurement.fields}`,
        data: responceData[`${measurement.name}.${measurement.fields}`]?.values || [],
        backgroundColor: themeColor[0] || "#5c87df",
        borderColor: themeColor[1] || "#ffffff",
        borderWidth: 2,
        // fill: false,
      }));

      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 <Line data={chartData} options={options} />;
};

export default LineGraphComponent;