working version with all the graphs with the same x axis

typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx

@@ -1,6 +1,11 @@
 import Plot from "react-plotly.js";
 import { RecordSeries } from "../../../dataCache/data";
-import { GraphData, mergeDeep, parseCsv } from "../../../util/graph.util";
+import {
+  GraphCoordinates,
+  GraphData,
+  mergeDeep,
+  parseCsv,
+} from "../../../util/graph.util";
 import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs";
@@ -27,13 +32,14 @@ const NUMBER_OF_NODES = 100;
 
 const ScalarGraph = () => {
   const timeRange = createTimes(
-    UnixTime.fromTicks(1682085650).rangeBefore(TimeSpan.fromDays(4)),
+    UnixTime.now() /* .fromTicks(1682085650) */
+      .rangeBefore(TimeSpan.fromDays(4)),
     NUMBER_OF_NODES
   );
   const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
   const [range, setRange] = useState([
-    timeRange[0].toDate(),
+    timeRange[0].toDate().getTime(),
-    timeRange[timeRange.length - 1].toDate(),
+    timeRange[timeRange.length - 1].toDate().getTime(),
   ]);
   const [uiRevision, setUiRevision] = useState(Math.random());
   const [plotTitles, setPlotTitles] = useState<string[]>([]);
@@ -193,36 +199,62 @@ const ScalarGraph = () => {
   };
 
   const renderGraphs = () => {
-    if (checkedToggles) {
     const coordinateTimeSeries = transformToGraphData(timeSeries);
-      console.log("coordinateTimeSeries", coordinateTimeSeries, checkedToggles);
+    const graphCoordinates: GraphCoordinates[] = Object.keys(
-      return Object.keys(coordinateTimeSeries)
+      coordinateTimeSeries
+    )
       .filter((path) => {
-          return checkedToggles[path];
+        return checkedToggles?.[path];
       })
-        .map((path) => {
+      .map((path, i) => {
-          const data = coordinateTimeSeries[path] ?? { x: [], y: [] };
+        return {
+          ...coordinateTimeSeries[path],
+          xaxis: "x",
+          yaxis: i === 0 ? "y" : "y" + (i + 1),
+          type: "scatter",
+        };
+      });
+    if (checkedToggles && graphCoordinates.length > 0) {
+      const subplots = graphCoordinates.map((coordinate) => [
+        (coordinate?.xaxis || "") + (coordinate.yaxis || ""),
+      ]);
       return (
         <Plot
-              key={path}
+          data={graphCoordinates}
-              data={[
-                {
-                  ...data,
-                  type: "scatter",
-                  mode: "lines+markers",
-                  marker: { color: "red" },
-                },
-              ]}
           layout={{
-                width: 1000,
+            title: "Graphs",
-                height: 500,
-                title: path,
             uirevision: uiRevision,
+            showlegend: false,
             xaxis: {
               autorange: false,
               range: range,
               type: "date",
+              mirror: "allticks",
             },
+            grid: {
+              subplots: subplots as any,
+              xside: "top",
+              ygap: 0.1,
+            },
+            height: graphCoordinates.length * 300,
+            annotations: [
+              {
+                text: "X1/Y1 title",
+                showarrow: false,
+                x: 0,
+                y: 1,
+                yref: "paper",
+                yanchor: "bottom",
+              },
+              {
+                text: "X2/Y2 title",
+                showarrow: false,
+                x: 0,
+                y: 1,
+                yref: "paper",
+                yanchor: "bottom",
+              },
+            ],
           }}
           config={{
             modeBarButtonsToRemove: [
@@ -237,7 +269,10 @@ const ScalarGraph = () => {
             const xaxisRange1 = params["xaxis.range[1]"];
 
             if (xaxisRange0 && xaxisRange1) {
-                  setRange([new Date(xaxisRange0), new Date(xaxisRange1)]);
+              setRange([
+                new Date(xaxisRange0).getTime(),
+                new Date(xaxisRange1).getTime(),
+              ]);
               setUiRevision(Math.random());
               const times = createTimes(
                 TimeRange.fromTimes(
@@ -253,7 +288,6 @@ const ScalarGraph = () => {
           }}
         />
       );
-        });
     }
   };
   return <>{renderGraphs()}</>;

typescript/Frontend/src/util/graph.util.tsx

@@ -25,6 +25,8 @@ export const mergeDeep = (...objects: any[]) => {
 export interface GraphCoordinates {
   x: Datum[] | Datum[][] | TypedArray;
   y: Datum[] | Datum[][] | TypedArray;
+  xaxis?: string;
+  yaxis?: string;
 }
 
 export interface GraphData {