From 06bc9b6b2e39c8e30a099955fe61534274fd4296 Mon Sep 17 00:00:00 2001
From: Sina Blattmann <sina.blattmann@noser.com>
Date: Wed, 10 May 2023 10:40:08 +0200
Subject: [PATCH] working version with all the graphs with the same x axis

---
 .../Installations/Log/ScalarGraph.tsx         | 162 +++++++++++-------
 typescript/Frontend/src/util/graph.util.tsx   |   2 +
 2 files changed, 100 insertions(+), 64 deletions(-)

diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
index 05248d03a..ce77c6cba 100644
--- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
+++ b/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[timeRange.length - 1].toDate(),
+    timeRange[0].toDate().getTime(),
+    timeRange[timeRange.length - 1].toDate().getTime(),
   ]);
   const [uiRevision, setUiRevision] = useState(Math.random());
   const [plotTitles, setPlotTitles] = useState<string[]>([]);
@@ -193,67 +199,95 @@ const ScalarGraph = () => {
   };
 
   const renderGraphs = () => {
-    if (checkedToggles) {
-      const coordinateTimeSeries = transformToGraphData(timeSeries);
-      console.log("coordinateTimeSeries", coordinateTimeSeries, checkedToggles);
-      return Object.keys(coordinateTimeSeries)
-        .filter((path) => {
-          return checkedToggles[path];
-        })
-        .map((path) => {
-          const data = coordinateTimeSeries[path] ?? { x: [], y: [] };
-          return (
-            <Plot
-              key={path}
-              data={[
-                {
-                  ...data,
-                  type: "scatter",
-                  mode: "lines+markers",
-                  marker: { color: "red" },
-                },
-              ]}
-              layout={{
-                width: 1000,
-                height: 500,
-                title: path,
-                uirevision: uiRevision,
-                xaxis: {
-                  autorange: false,
-                  range: range,
-                  type: "date",
-                },
-              }}
-              config={{
-                modeBarButtonsToRemove: [
-                  "lasso2d",
-                  "select2d",
-                  "pan2d",
-                  "autoScale2d",
-                ],
-              }}
-              onRelayout={(params) => {
-                const xaxisRange0 = params["xaxis.range[0]"];
-                const xaxisRange1 = params["xaxis.range[1]"];
+    const coordinateTimeSeries = transformToGraphData(timeSeries);
+    const graphCoordinates: GraphCoordinates[] = Object.keys(
+      coordinateTimeSeries
+    )
+      .filter((path) => {
+        return checkedToggles?.[path];
+      })
+      .map((path, i) => {
+        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
+          data={graphCoordinates}
+          layout={{
+            title: "Graphs",
+            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: [
+              "lasso2d",
+              "select2d",
+              "pan2d",
+              "autoScale2d",
+            ],
+          }}
+          onRelayout={(params) => {
+            const xaxisRange0 = params["xaxis.range[0]"];
+            const xaxisRange1 = params["xaxis.range[1]"];
 
-                if (xaxisRange0 && xaxisRange1) {
-                  setRange([new Date(xaxisRange0), new Date(xaxisRange1)]);
-                  setUiRevision(Math.random());
-                  const times = createTimes(
-                    TimeRange.fromTimes(
-                      UnixTime.fromDate(new Date(xaxisRange0)),
-                      UnixTime.fromDate(new Date(xaxisRange1))
-                    ),
-                    NUMBER_OF_NODES
-                  );
-                  console.log("times", times);
-                  cache.getSeries(times);
-                  times$.next(times);
-                }
-              }}
-            />
-          );
-        });
+            if (xaxisRange0 && xaxisRange1) {
+              setRange([
+                new Date(xaxisRange0).getTime(),
+                new Date(xaxisRange1).getTime(),
+              ]);
+              setUiRevision(Math.random());
+              const times = createTimes(
+                TimeRange.fromTimes(
+                  UnixTime.fromDate(new Date(xaxisRange0)),
+                  UnixTime.fromDate(new Date(xaxisRange1))
+                ),
+                NUMBER_OF_NODES
+              );
+              console.log("times", times);
+              cache.getSeries(times);
+              times$.next(times);
+            }
+          }}
+        />
+      );
     }
   };
   return <>{renderGraphs()}</>;
diff --git a/typescript/Frontend/src/util/graph.util.tsx b/typescript/Frontend/src/util/graph.util.tsx
index f54f33159..18e0e33c8 100644
--- a/typescript/Frontend/src/util/graph.util.tsx
+++ b/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 {