Merge branch 'feature/plot-unit-tests' of github.com:Lichtblick-Suite…

…/lichtblick into feature/plot-unit-tests
Lichtblick-Suite · Jan 9, 2025 · e668065 · e668065
2 parents 553fa0b + 39380f2
commit e668065
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 12 deletions.
diff --git a/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts b/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts
@@ -6,6 +6,7 @@ import { Zoom as ZoomPlugin } from "@lichtblick/chartjs-plugin-zoom";
 import { Immutable } from "@lichtblick/suite";
 import { ChartRenderer } from "@lichtblick/suite-base/panels/Plot/ChartRenderer";
 import { getChartOptions } from "@lichtblick/suite-base/panels/Plot/ChartUtilities/ChartOptions";
+import { DEFAULT_ANNOTATION } from "@lichtblick/suite-base/panels/Plot/constants";
 import BasicBuilder from "@lichtblick/suite-base/testing/builders/BasicBuilder";
 
 import {
@@ -16,6 +17,7 @@ import {
   PanEndInteractionEvent,
   PanMoveInteractionEvent,
   PanStartInteractionEvent,
+  ReferenceLine,
   UpdateAction,
   WheelInteractionEvent,
 } from "./types";
@@ -345,6 +347,44 @@ describe("ChartRenderer", () => {
 
       expect(panHandlerSpy).toHaveBeenCalledTimes(1);
     });
+
+    it("should handle reference lines in update action", () => {
+      (Chart as unknown as jest.Mock).mockImplementationOnce(() => ({
+        update: jest.fn(),
+        scales: SCALES_CHART,
+        options: {
+          plugins: {
+            annotation: {
+              annotations: [{}],
+            },
+          },
+        } as ChartOptions,
+      }));
+      const referenceLines: ReferenceLine[] = [
+        { value: BasicBuilder.number(), color: BasicBuilder.string() },
+        { value: BasicBuilder.number(), color: BasicBuilder.string() },
+      ];
+      const { chartRenderer, action } = setup({
+        actionOverride: { referenceLines },
+      });
+      const chartInstance = (chartRenderer as any).getChartInstance();
+
+      chartRenderer.update(action);
+
+      const newAnnotations = chartInstance.options.plugins?.annotation?.annotations;
+      expect(newAnnotations).toEqual([
+        {
+          ...DEFAULT_ANNOTATION,
+          borderColor: referenceLines[0]?.color,
+          value: referenceLines[0]?.value,
+        },
+        {
+          ...DEFAULT_ANNOTATION,
+          borderColor: referenceLines[1]?.color,
+          value: referenceLines[1]?.value,
+        },
+      ]);
+    });
   });
 
   describe("getElementsAtPixel", () => {

diff --git a/packages/suite-base/src/panels/Plot/ChartRenderer.ts b/packages/suite-base/src/panels/Plot/ChartRenderer.ts
@@ -17,6 +17,7 @@ import {
   addEventListener,
   removeEventListener,
 } from "@lichtblick/suite-base/panels/Plot/ChartUtilities/EventHandler";
+import { DEFAULT_ANNOTATION } from "@lichtblick/suite-base/panels/Plot/constants";
 import { Bounds } from "@lichtblick/suite-base/types/Bounds";
 import { maybeCast } from "@lichtblick/suite-base/util/maybeCast";
 
@@ -144,13 +145,8 @@ export class ChartRenderer {
 
       const newAnnotations: AnnotationOptions[] = action.referenceLines.map((config) => {
         return {
-          type: "line",
-          display: true,
-          drawTime: "beforeDatasetsDraw",
-          scaleID: "y",
+          ...DEFAULT_ANNOTATION,
           borderColor: config.color,
-          borderDash: [5, 5],
-          borderWidth: 1,
           value: config.value,
         };
       });

diff --git a/packages/suite-base/src/panels/Plot/Plot.tsx b/packages/suite-base/src/panels/Plot/Plot.tsx
@@ -30,7 +30,7 @@ import Stack from "@lichtblick/suite-base/components/Stack";
 import TimeBasedChartTooltipContent from "@lichtblick/suite-base/components/TimeBasedChart/TimeBasedChartTooltipContent";
 import useGlobalVariables from "@lichtblick/suite-base/hooks/useGlobalVariables";
 import { VerticalBars } from "@lichtblick/suite-base/panels/Plot/VerticalBars";
-import { defaultSidebarDimension } from "@lichtblick/suite-base/panels/Plot/constants";
+import { DEFAULT_SIDEBAR_DIMENSION } from "@lichtblick/suite-base/panels/Plot/constants";
 import useHoverHandlers from "@lichtblick/suite-base/panels/Plot/hooks/useHoverHandlers";
 import usePanning from "@lichtblick/suite-base/panels/Plot/hooks/usePanning";
 import { PlotProps, TooltipStateSetter } from "@lichtblick/suite-base/panels/Plot/types";
@@ -58,7 +58,7 @@ export function Plot(props: PlotProps): React.JSX.Element {
     xAxisVal: xAxisMode,
     xAxisPath,
     legendDisplay = config.showSidebar === true ? "left" : "floating",
-    sidebarDimension = config.sidebarWidth ?? defaultSidebarDimension,
+    sidebarDimension = config.sidebarWidth ?? DEFAULT_SIDEBAR_DIMENSION,
     [PANEL_TITLE_CONFIG_KEY]: customTitle,
   } = config;
 

diff --git a/packages/suite-base/src/panels/Plot/constants.ts b/packages/suite-base/src/panels/Plot/constants.ts
@@ -1,6 +1,8 @@
 // SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<[email protected]>
 // SPDX-License-Identifier: MPL-2.0
 
+import { AnnotationOptions } from "chartjs-plugin-annotation";
+
 import { MathFunction } from "@lichtblick/suite-base/panels/Plot/mathFunctions";
 
 export const MATH_FUNCTIONS: { [fn: string]: MathFunction } = {
@@ -22,4 +24,13 @@ export const MATH_FUNCTIONS: { [fn: string]: MathFunction } = {
   trunc: Math.trunc,
 };
 
-export const defaultSidebarDimension = 240;
+export const DEFAULT_SIDEBAR_DIMENSION = 240;
+
+export const DEFAULT_ANNOTATION: AnnotationOptions = {
+  type: "line",
+  display: true,
+  drawTime: "beforeDatasetsDraw",
+  scaleID: "y",
+  borderWidth: 1,
+  borderDash: [5, 5],
+};
diff --git a/packages/suite-base/src/panels/Plot/index.tsx b/packages/suite-base/src/panels/Plot/index.tsx
@@ -18,7 +18,7 @@ import Panel from "@lichtblick/suite-base/components/Panel";
 
 import { Plot } from "./Plot";
 import { PlotConfig } from "./config";
-import { defaultSidebarDimension } from "./constants";
+import { DEFAULT_SIDEBAR_DIMENSION } from "./constants";
 
 const defaultConfig: PlotConfig = {
   paths: [],
@@ -31,7 +31,7 @@ const defaultConfig: PlotConfig = {
   showPlotValuesInLegend: false,
   isSynced: true,
   xAxisVal: "timestamp",
-  sidebarDimension: defaultSidebarDimension,
+  sidebarDimension: DEFAULT_SIDEBAR_DIMENSION,
 };
 
 export default Panel(

diff --git a/packages/suite-base/src/panels/Plot/types.ts b/packages/suite-base/src/panels/Plot/types.ts
@@ -59,6 +59,8 @@ export type HoverElement = {
 
 export type Size = { width: number; height: number };
 
+export type ReferenceLine = { color: string; value: number };
+
 export type UpdateAction = {
   type: "update";
   size?: { width: number; height: number };
@@ -67,7 +69,7 @@ export type UpdateAction = {
   xBounds?: Partial<Bounds1D>;
   yBounds?: Partial<Bounds1D>;
   zoomMode?: "x" | "y" | "xy";
-  referenceLines?: { color: string; value: number }[];
+  referenceLines?: ReferenceLine[];
   interactionEvents?: InteractionEvent[];
 };