From 01fc5441e571ab704d1dc690b2d40593b22ce2ed Mon Sep 17 00:00:00 2001 From: Luiz Bezerra Date: Thu, 9 Jan 2025 18:04:43 +0000 Subject: [PATCH 1/2] test to handle reference lines in update action --- .../src/panels/Plot/ChartRenderer.test.ts | 40 +++++++++++++++++++ .../src/panels/Plot/ChartRenderer.ts | 8 +--- packages/suite-base/src/panels/Plot/Plot.tsx | 4 +- .../suite-base/src/panels/Plot/constants.ts | 13 +++++- packages/suite-base/src/panels/Plot/index.tsx | 4 +- packages/suite-base/src/panels/Plot/types.ts | 4 +- 6 files changed, 61 insertions(+), 12 deletions(-) diff --git a/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts b/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts index ea96ad3364..58920522c3 100644 --- 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: 10, color: "red" }, + { value: 20, color: "blue" }, + ]; + 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 index c6274e55ab..7933951aff 100644 --- 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 index 0f2e2b48fa..08fc130e8b 100644 --- a/packages/suite-base/src/panels/Plot/Plot.tsx +++ b/packages/suite-base/src/panels/Plot/Plot.tsx @@ -42,7 +42,7 @@ import { } from "@lichtblick/suite-base/context/TimelineInteractionStateContext"; 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 { PlotProps } from "@lichtblick/suite-base/panels/Plot/types"; import { SubscribePayload } from "@lichtblick/suite-base/players/types"; @@ -73,7 +73,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 index 382f5e667f..f631a2572c 100644 --- 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) // 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 index 7412a334ed..cc650f10eb 100644 --- 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 index 970f44b862..dc0b09fce6 100644 --- a/packages/suite-base/src/panels/Plot/types.ts +++ b/packages/suite-base/src/panels/Plot/types.ts @@ -58,6 +58,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 }; @@ -66,7 +68,7 @@ export type UpdateAction = { xBounds?: Partial; yBounds?: Partial; zoomMode?: "x" | "y" | "xy"; - referenceLines?: { color: string; value: number }[]; + referenceLines?: ReferenceLine[]; interactionEvents?: InteractionEvent[]; }; From 39380f28e23af363c0e2f5149e62bf77e2f1b61e Mon Sep 17 00:00:00 2001 From: Luiz Bezerra Date: Thu, 9 Jan 2025 18:20:38 +0000 Subject: [PATCH 2/2] improved chart renderer unit test --- packages/suite-base/src/panels/Plot/ChartRenderer.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts b/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts index 58920522c3..054046f2b2 100644 --- a/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts +++ b/packages/suite-base/src/panels/Plot/ChartRenderer.test.ts @@ -361,8 +361,8 @@ describe("ChartRenderer", () => { } as ChartOptions, })); const referenceLines: ReferenceLine[] = [ - { value: 10, color: "red" }, - { value: 20, color: "blue" }, + { value: BasicBuilder.number(), color: BasicBuilder.string() }, + { value: BasicBuilder.number(), color: BasicBuilder.string() }, ]; const { chartRenderer, action } = setup({ actionOverride: { referenceLines },