diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png index ed3e2ea78e..cf336556a0 100644 Binary files a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png index ed3e2ea78e..cf336556a0 100644 Binary files a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png differ diff --git a/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXLabel-chromium-linux.png b/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXLabel-chromium-linux.png index d3c9d3d886..60470b657d 100644 Binary files a/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXLabel-chromium-linux.png and b/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXLabel-chromium-linux.png differ diff --git a/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXYLabels-chromium-linux.png b/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXYLabels-chromium-linux.png index 8965e6900c..f92d57b977 100644 Binary files a/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXYLabels-chromium-linux.png and b/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartXYLabels-chromium-linux.png differ diff --git a/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartYLabel-chromium-linux.png b/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartYLabel-chromium-linux.png index 17fb7dcca1..a68734967a 100644 Binary files a/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartYLabel-chromium-linux.png and b/packages/pluggableWidgets/line-chart-web/e2e/LineChart.spec.js-snapshots/lineChartYLabel-chromium-linux.png differ diff --git a/packages/shared/charts/src/utils/__tests__/configs.spec.ts b/packages/shared/charts/src/utils/__tests__/configs.spec.ts new file mode 100644 index 0000000000..2faba86bf1 --- /dev/null +++ b/packages/shared/charts/src/utils/__tests__/configs.spec.ts @@ -0,0 +1,69 @@ +import { + CustomLayoutProps, + defaultConfigs, + getCustomLayoutOptions, + getModelerConfigOptions, + getModelerLayoutOptions, + getModelerSeriesOptions +} from "../configs"; + +const props: CustomLayoutProps = { + showLegend: true, + xAxisLabel: { text: "X-Axis" }, + yAxisLabel: { text: "Y-Axis" }, + gridLinesMode: "both" +}; + +describe("getCustomLayoutOptions", () => { + it("passes axis titles through as { text } without extra nesting", () => { + const layout = getCustomLayoutOptions(props); + + expect(layout.showlegend).toBe(true); + expect(layout.xaxis?.title).toEqual({ text: "X-Axis" }); + expect(layout.yaxis?.title).toEqual({ text: "Y-Axis" }); + }); + + it("leaves the axis title undefined when no label is given", () => { + const layout = getCustomLayoutOptions({ ...props, xAxisLabel: undefined, yAxisLabel: undefined }); + + expect(layout.xaxis?.title).toBeUndefined(); + expect(layout.yaxis?.title).toBeUndefined(); + }); + + it.each([ + ["both", true, true], + ["vertical", true, false], + ["horizontal", false, true], + ["none", false, false] + ] as const)("maps gridLinesMode %s to showgrid x=%s y=%s", (gridLinesMode, x, y) => { + const layout = getCustomLayoutOptions({ ...props, gridLinesMode }); + + expect(layout.xaxis?.showgrid).toBe(x); + expect(layout.yaxis?.showgrid).toBe(y); + }); +}); + +describe("modeler options merging", () => { + it("keeps axis titles intact and layers defaults, custom layout and overrides", () => { + const layout = getModelerLayoutOptions(getCustomLayoutOptions(props), { + xaxis: { gridcolor: "#d7d7d7" }, + margin: { t: 10 } + }); + + expect(layout.xaxis).toEqual({ title: { text: "X-Axis" }, showgrid: true, gridcolor: "#d7d7d7" }); + expect(layout.yaxis).toEqual({ title: { text: "Y-Axis" }, showgrid: true }); + expect(layout.margin).toEqual({ ...defaultConfigs.layout.margin, t: 10 }); + expect(layout.font).toEqual(defaultConfigs.layout.font); + }); + + it("applies defaults for config and series with custom values winning", () => { + expect(getModelerConfigOptions({ displayModeBar: true })).toEqual({ + ...defaultConfigs.configuration, + displayModeBar: true + }); + expect(getModelerSeriesOptions({ hoverinfo: "text" })).toEqual({ + ...defaultConfigs.series, + hoverinfo: "text" + }); + }); +}); diff --git a/packages/shared/charts/src/utils/configs.ts b/packages/shared/charts/src/utils/configs.ts index aba3deacfe..cb8b8e7d92 100644 --- a/packages/shared/charts/src/utils/configs.ts +++ b/packages/shared/charts/src/utils/configs.ts @@ -69,11 +69,11 @@ export const getCustomLayoutOptions = ({ }: CustomLayoutProps): Partial => ({ showlegend: showLegend, xaxis: { - title: { text: xAxisLabel } as Layout["xaxis"]["title"], + title: xAxisLabel, showgrid: gridLinesMode === "both" || gridLinesMode === "vertical" }, yaxis: { - title: { text: yAxisLabel } as Layout["yaxis"]["title"], + title: yAxisLabel, showgrid: gridLinesMode === "both" || gridLinesMode === "horizontal" } });