Tel 95 make graph component to be used in different places

.vscode/settings.json

@@ -12,5 +12,8 @@
     "editor.formatOnSave": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

client/src/components/molecules/GraphMolecules/DraggableGraph.tsx

@@ -0,0 +1,41 @@
+import { type MutableRefObject, useEffect } from "react";
+import Draggable from "react-draggable";
+import { IoIosClose } from "react-icons/io";
+
+import { type AnchorElTooltipsRefHandle } from "@/components/molecules/GraphMolecules/FieldGraphTooltip";
+import GraphComponent from "@/components/molecules/GraphMolecules/GraphComponent";
+import { usePacket } from "@/contexts/PacketContext";
+
+function DraggableGraph({
+  graphRef,
+  closeGraph,
+  graphID,
+}: {
+  graphRef: MutableRefObject<AnchorElTooltipsRefHandle | null>;
+  graphID: string;
+  closeGraph: (field: string) => void;
+}) {
+  const { currentPacket } = usePacket();
+  useEffect(() => {}, [currentPacket, graphRef]);
+
+  return (
+    <Draggable handle="strong">
+      <div className="box bg-light text-light dark:bg-dark dark:text-dark absolute z-50 w-fit rounded shadow-2xl">
+        <div className="flex w-full flex-row ">
+          <strong className="flex grow justify-center ">
+            <button className=" cursor-all-scroll  select-none text-center">
+              {graphID}
+            </button>
+          </strong>
+          <IoIosClose
+            onClick={() => closeGraph(graphID)}
+            size={40}
+            className=" cursor-pointer select-none text-black dark:text-white"
+          />
+        </div>
+        <GraphComponent graphData={graphRef.current?.getData()[0]} />
+      </div>
+    </Draggable>
+  );
+}
+export default DraggableGraph;

client/src/components/molecules/GraphMolecules/FieldGraphTooltip.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+// Random build issue and prettier
+import { useGraphOverlay } from "@/contexts/GraphOverlayContext";
+import {
+  type I_PISField,
+  type I_PISFieldData,
+} from "@/objects/PIS/PIS.interface";
+import { Tooltip } from "@mui/material";
+import type { Instance } from "@popperjs/core";
+
+export type AnchorElTooltipsRefHandle = {
+  getData: () => I_PISFieldData[];
+};
+
+type AnchorElTooltipsProps = {
+  children: React.ReactNode;
+  field: I_PISField;
+};
+
+const AnchorElTooltips = forwardRef<
+  AnchorElTooltipsRefHandle,
+  AnchorElTooltipsProps
+>(function AnchorElTooltips(props: AnchorElTooltipsProps, ref) {
+  const { children, field } = props;
+  const positionRef = useRef<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const popperRef = useRef<Instance>(null);
+  const areaRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    positionRef.current = { x: event.clientX, y: event.clientY };
+
+    if (popperRef.current != null) {
+      void popperRef.current.update();
+    }
+  };
+  const { openNewGraph } = useGraphOverlay();
+
+  const getData = useCallback(() => {
+    return field.data;
+  }, [field.data]);
+
+  useImperativeHandle(ref, () => {
+    return {
+      getData,
+    };
+  }, [getData]);
+
+  return (
+    <Tooltip
+      arrow
+      title={
+        <button onClick={() => openNewGraph(field.name, ref)}>
+          Open Graph
+        </button>
+      }
+      slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 14],
+              },
+            },
+          ],
+        },
+      }}
+      PopperProps={{
+        popperRef,
+        anchorEl: {
+          getBoundingClientRect: () => {
+            return new DOMRect(
+              positionRef.current.x,
+              areaRef.current!.getBoundingClientRect().y,
+              0,
+              0,
+            );
+          },
+        },
+      }}
+    >
+      <div ref={areaRef} onMouseMove={handleMouseMove}>
+        {children}
+      </div>
+    </Tooltip>
+  );
+});
+
+export default AnchorElTooltips;

client/src/components/molecules/GraphMolecules/GraphComponent.tsx

@@ -0,0 +1,100 @@
+import * as Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import { useEffect, useRef, useState } from "react";
+
+import { type I_PISFieldData } from "@/objects/PIS/PIS.interface";
+
+export default function GraphComponent({
+  graphData,
+}: {
+  graphData?: I_PISFieldData;
+}) {
+  const [chartOptions] = useState<Highcharts.Options>({
+    chart: {
+      backgroundColor: "#D2D2D2",
+      type: "spline",
+      height: 200,
+    },
+    xAxis: {
+      title: { text: "Time" },
+    },
+    yAxis: {
+      title: { text: `Value (${graphData?.unit})` },
+    },
+    series: [
+      {
+        showInLegend: false,
+        data: new Array(15).fill(0),
+        name: undefined,
+        color: "#9C0534",
+        type: "spline",
+      },
+    ],
+    credits: {
+      enabled: false,
+    },
+    title: {
+      text: undefined,
+    },
+  });
+  const [chart, setChart] = useState<Highcharts.Chart | null>(null);
+  const chartComponent = useRef<HighchartsReact.RefObject>(null);
+  interface PulseSeries extends Highcharts.Series {
+    pulse: Highcharts.SVGElement;
+    markerGroup?: Highcharts.SVGElement;
+  }
+  interface AddPointEvent {
+    point: Highcharts.Point;
+    target: PulseSeries;
+  }
+  Highcharts.addEvent(Highcharts.Series, "addPoint", (e: AddPointEvent) => {
+    const point: Highcharts.Point = e.point,
+      series: PulseSeries = e.target;
+
+    if (!series.pulse) {
+      series.pulse = series.chart.renderer.circle().add(series.markerGroup);
+    }
+    setTimeout(() => {
+      series.pulse
+        .attr({
+          x: series.xAxis.toPixels(point.x, true),
+          y: series.yAxis.toPixels(point.y as number, true),
+          // @ts-expect-error: Necessary for accessing 'radius' property.
+          r: (series.options.marker as { object }).radius as number,
+          opacity: 1,
+          fill: series.color,
+        })
+        .animate(
+          {
+            r: 20,
+            opacity: 0,
+          },
+          {
+            duration: 1000,
+          },
+        );
+    }, 1);
+  });
+
+  useEffect(() => {
+    setChart(chartComponent.current && chartComponent.current.chart);
+  }, []);
+
+  const updateSeries = () => {
+    if (chart) {
+      chart.series[0].addPoint([graphData?.value], true, true);
+    }
+  };
+  useEffect(() => {
+    updateSeries();
+  }, [graphData]);
+  return (
+    <div className=" w-80">
+      <HighchartsReact
+        ref={chartComponent}
+        highcharts={Highcharts}
+        options={chartOptions}
+      />
+    </div>
+  );
+}

client/src/components/molecules/GraphMolecules/GraphContainer.tsx

@@ -0,0 +1,26 @@
+import { type MutableRefObject } from "react";
+
+import DraggableGraph from "@/components/molecules/GraphMolecules/DraggableGraph";
+import { type AnchorElTooltipsRefHandle } from "@/components/molecules/GraphMolecules/FieldGraphTooltip";
+import { useGraphOverlay } from "@/contexts/GraphOverlayContext";
+
+export default function GraphContainer() {
+  const { openGraphs, closeGraph } = useGraphOverlay();
+
+  return (
+    <div className="absolute z-50 m-auto">
+      {openGraphs.map((graph) => {
+        return (
+          <DraggableGraph
+            graphRef={
+              graph.ref as MutableRefObject<AnchorElTooltipsRefHandle | null>
+            }
+            closeGraph={closeGraph}
+            graphID={graph.name}
+            key={graph.name}
+          />
+        );
+      })}
+    </div>
+  );
+}

client/src/components/transformers/PISTransformer.tsx

@@ -1,3 +1,8 @@
+import React, { useRef } from "react";
+
+import AnchorElTooltips, {
+  type AnchorElTooltipsRefHandle,
+} from "@/components/molecules/GraphMolecules/FieldGraphTooltip";
 import { APPUNITS, useAppState } from "@/contexts/AppStateContext";
 import type I_PIS from "@/objects/PIS/PIS.interface";
 import {
@@ -9,7 +14,6 @@ import {
 type RangeCheckedFieldDataProps = {
   fieldData: I_PISFieldData;
 };
-
 function FieldUnitsHandler(
   unit: UnitType | undefined,
   value: string | number | boolean,
@@ -101,7 +105,6 @@ type FormatStringProps = {
 function FormatString(props: FormatStringProps): JSX.Element {
   const { fstring, data } = props;
   // %s •C (%s) - %s •C (%s)
-  // console.log("TEST", fstring.split("%s"));
 
   return (
     <span>
@@ -130,7 +133,6 @@ function FieldDataFormatter(props: FieldDataFormatterProps): JSX.Element {
 
   const formatString = (string: string, params: I_PISFieldData[]) => {
     // %s •C (%s) - %s •C (%s)
-    // console.log("TEST", string.split("%s"));
     return string
       .split("%s")
       .map((part, index) => {
@@ -157,12 +159,9 @@ function FieldDataFormatter(props: FieldDataFormatterProps): JSX.Element {
   );
 }
 
-type FieldPrinterProps = {
-  field: I_PISField;
-};
-
-function FieldPrinter(props: FieldPrinterProps): JSX.Element {
+function FieldPrinter(props: { field: I_PISField }): JSX.Element {
   const { field } = props;
+  const tooltipRef = useRef<AnchorElTooltipsRefHandle | null>(null);
   if (
     field.fstring !== undefined &&
     (field?.fstring.match(/%s/g) || []).length !== field.data.length
@@ -174,7 +173,9 @@ function FieldPrinter(props: FieldPrinterProps): JSX.Element {
   }
   return (
     <div className="mt-1 flex items-center justify-between text-xs">
-      {field.name}:
+      <AnchorElTooltips {...props} ref={tooltipRef}>
+        <p>{field.name}</p>
+      </AnchorElTooltips>
       <FieldDataFormatter data={field.data} fstring={field.fstring} />
     </div>
   );

client/src/contexts/GraphOverlayContext.tsx

@@ -0,0 +1,59 @@
+import {
+  type ForwardedRef,
+  type ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from "react";
+
+import { type AnchorElTooltipsRefHandle } from "@/components/molecules/GraphMolecules/FieldGraphTooltip";
+
+interface GraphOverlayContextProps {
+  children: ReactNode | ReactNode[];
+}
+interface GraphElement {
+  name: string;
+  ref: ForwardedRef<AnchorElTooltipsRefHandle>;
+}
+interface IGraphOverlayContexttReturn {
+  openNewGraph: (
+    name: string,
+    ref: React.ForwardedRef<AnchorElTooltipsRefHandle>,
+  ) => void;
+  openGraphs: GraphElement[];
+  closeGraph: (field: string) => void;
+}
+
+const graphOverlayContext = createContext<IGraphOverlayContexttReturn>(
+  {} as IGraphOverlayContexttReturn,
+);
+
+export function GraphOverlayContextProvider({
+  children,
+}: GraphOverlayContextProps): JSX.Element {
+  const [openGraphs, setOpenGraphs] = useState<GraphElement[]>([]);
+
+  const openNewGraph = (
+    name: string,
+    ref: ForwardedRef<AnchorElTooltipsRefHandle>,
+  ) => {
+    setOpenGraphs([...openGraphs, { name, ref }]);
+  };
+  const closeGraph = (field: string) => {
+    setOpenGraphs((prevGraph) =>
+      prevGraph.filter((graph) => graph.name !== field),
+    );
+  };
+
+  return (
+    <graphOverlayContext.Provider
+      value={{ openNewGraph, openGraphs, closeGraph }}
+    >
+      {children}
+    </graphOverlayContext.Provider>
+  );
+}
+
+export function useGraphOverlay(): IGraphOverlayContexttReturn {
+  return useContext(graphOverlayContext);
+}