[FIX] charts: fix zoomable scatter chart

src/helpers/figures/charts/runtime/chart_zoom.ts

@@ -12,8 +12,7 @@ export function generateMasterChartConfig(
         .filter((ds) => !isTrendLineAxis(ds["xAxisID"]))
         .map((ds) => ({
           ...ds,
-          pointRadius: 0,
-          showLine: true,
+          pointRadius: ds.showLine === false ? 2 : 0, // Show points only for scatter plots
         })),
     },
     options: {

src/helpers/figures/charts/runtime/chartjs_scales.ts

@@ -86,12 +86,12 @@ export function getBarChartScales(
 export function getLineChartScales(
   definition: GenericDefinition<LineChartDefinition>,
   args: ChartRuntimeGenerationArgs
-): ChartScales {
+): DeepPartial<ScaleChartOptions<"line">["scales"]> {
   const { locale, axisType, trendDataSetsValues: trendDatasets, labels, axisFormats } = args;
   const labelFormat = axisFormats?.x;
   const stacked = definition.stacked;
 
-  let scales: ChartScales = {
+  let scales: DeepPartial<ScaleChartOptions<"line">["scales"]> = {
     x: getChartAxis(definition, "bottom", "labels", { locale }),
     y: getChartAxis(definition, "left", "values", { locale, stacked, format: axisFormats?.y }),
     y1: getChartAxis(definition, "right", "values", { locale, stacked, format: axisFormats?.y1 }),
@@ -144,7 +144,7 @@ export function getLineChartScales(
 export function getScatterChartScales(
   definition: GenericDefinition<ScatterChartDefinition>,
   args: ChartRuntimeGenerationArgs
-) {
+): DeepPartial<ScaleChartOptions<"line">["scales"]> {
   const lineScales = getLineChartScales(definition, args);
   return {
     ...lineScales,

src/helpers/figures/charts/scatter_chart.ts

@@ -232,7 +232,7 @@ export function createScatterChartRuntime(
   const definition = chart.getDefinition();
   const chartData = getLineChartData(definition, chart.dataSets, chart.labelRange, getters);
 
-  const config: ChartConfiguration = {
+  const config: ChartConfiguration<"line"> = {
     // use chartJS line chart and disable the lines instead of chartJS scatter chart. This is because the scatter chart
     // have less options than the line chart (it only works with linear labels)
     type: "line",

src/types/chart/line_chart.ts

@@ -14,7 +14,7 @@ export interface LineChartDefinition extends CommonChartDefinition {
 }
 
 export type LineChartRuntime = {
-  chartJsConfig: ChartConfiguration;
-  masterChartConfig?: ChartConfiguration;
+  chartJsConfig: ChartConfiguration<"line">;
+  masterChartConfig?: ChartConfiguration<"line">;
   background: Color;
 };

tests/figures/chart/__snapshots__/chart_plugin.test.ts.snap

@@ -166,7 +166,6 @@ exports[`Linear/Time charts font color is white with a dark background color 1`]
           "label": "10",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -444,7 +443,6 @@ exports[`Linear/Time charts snapshot test of chartJS configuration for date char
           "label": "Series 1",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -724,7 +722,6 @@ exports[`Linear/Time charts snapshot test of chartJS configuration for linear ch
           "label": "Series 1",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -959,7 +956,6 @@ exports[`datasource tests create a chart with stacked bar 1`] = `
           "hidden": false,
           "label": "P4",
           "pointRadius": 0,
-          "showLine": true,
           "xAxisID": "x",
           "yAxisID": "y",
         },
@@ -1193,7 +1189,6 @@ exports[`datasource tests create chart with a dataset of one cell (no title) 1`]
           "label": "Series 1",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -1448,7 +1443,6 @@ exports[`datasource tests create chart with column datasets 1`] = `
           "label": "first column dataset",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -1465,7 +1459,6 @@ exports[`datasource tests create chart with column datasets 1`] = `
           "label": "second column dataset",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -1722,7 +1715,6 @@ exports[`datasource tests create chart with column datasets with category title
           "label": "first column dataset",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -1739,7 +1731,6 @@ exports[`datasource tests create chart with column datasets with category title
           "label": "second column dataset",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -1996,7 +1987,6 @@ exports[`datasource tests create chart with column datasets without series title
           "label": "Series 1",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -2013,7 +2003,6 @@ exports[`datasource tests create chart with column datasets without series title
           "label": "Series 2",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -2251,7 +2240,6 @@ exports[`datasource tests create chart with only the dataset title (no data) 1`]
           "label": "30",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -2507,7 +2495,6 @@ exports[`datasource tests create chart with rectangle dataset 1`] = `
           "label": "first column dataset",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -2524,7 +2511,6 @@ exports[`datasource tests create chart with rectangle dataset 1`] = `
           "label": "second column dataset",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -2781,7 +2767,6 @@ exports[`datasource tests create chart with row datasets 1`] = `
           "label": "first row dataset",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -2798,7 +2783,6 @@ exports[`datasource tests create chart with row datasets 1`] = `
           "label": "second row dataset",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -3055,7 +3039,6 @@ exports[`datasource tests create chart with row datasets with category title 1`]
           "label": "first row dataset",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -3072,7 +3055,6 @@ exports[`datasource tests create chart with row datasets with category title 1`]
           "label": "second row dataset",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -3329,7 +3311,6 @@ exports[`datasource tests create chart with row datasets without series title 1`
           "label": "Series 1",
           "pointBackgroundColor": "#4EA7F2",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },
@@ -3346,7 +3327,6 @@ exports[`datasource tests create chart with row datasets without series title 1`
           "label": "Series 2",
           "pointBackgroundColor": "#EA6175",
           "pointRadius": 0,
-          "showLine": true,
           "tension": 0,
           "yAxisID": "y",
         },

tests/figures/chart/charts_zoom.test.ts → tests/figures/chart/zoomable_charts/zoomable_charts_component.test.ts

@@ -1,19 +1,19 @@
-import { Model } from "../../../src";
-import { ZoomableChartStore } from "../../../src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store";
-import { ChartPanel } from "../../../src/components/side_panel/chart/main_chart_panel/main_chart_panel";
-import { CreateFigureCommand, SpreadsheetChildEnv, UID } from "../../../src/types";
-import { LineChartDefinition } from "../../../src/types/chart/line_chart";
-import { openChartDesignSidePanel } from "../../test_helpers/chart_helpers";
-import { createChart, setCellContent } from "../../test_helpers/commands_helpers";
-import { TEST_CHART_DATA } from "../../test_helpers/constants";
-import { clickAndDrag, simulateClick, triggerMouseEvent } from "../../test_helpers/dom_helper";
+import { Model } from "../../../../src";
+import { ZoomableChartStore } from "../../../../src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store";
+import { ChartPanel } from "../../../../src/components/side_panel/chart/main_chart_panel/main_chart_panel";
+import { CreateFigureCommand, SpreadsheetChildEnv, UID } from "../../../../src/types";
+import { LineChartDefinition } from "../../../../src/types/chart/line_chart";
+import { openChartDesignSidePanel } from "../../../test_helpers/chart_helpers";
+import { createChart, setCellContent } from "../../../test_helpers/commands_helpers";
+import { TEST_CHART_DATA } from "../../../test_helpers/constants";
+import { clickAndDrag, simulateClick, triggerMouseEvent } from "../../../test_helpers/dom_helper";
 import {
   mockChart,
   mountComponentWithPortalTarget,
   mountSpreadsheet as mountSpreadsheetHelper,
   nextTick,
-} from "../../test_helpers/helpers";
-import { extendMockGetBoundingClientRect } from "../../test_helpers/mock_helpers";
+} from "../../../test_helpers/helpers";
+import { extendMockGetBoundingClientRect } from "../../../test_helpers/mock_helpers";
 
 extendMockGetBoundingClientRect({
   "o-master-chart-canvas": () => ({ top: 0, left: 0, width: 100, height: 50 }),

tests/figures/chart/zoomable_charts/zoomable_charts_plugin.test.ts

@@ -0,0 +1,103 @@
+import { Scale } from "chart.js";
+import { Model } from "../../../../src";
+import { TREND_LINE_XAXIS_ID } from "../../../../src/helpers/figures/charts";
+import { LineChartRuntime, ScatterChartRuntime } from "../../../../src/types/chart";
+import { createChart, setCellContent } from "../../../test_helpers/commands_helpers";
+
+let model: Model;
+
+beforeEach(() => {
+  model = new Model();
+});
+
+describe("Zoomable chart configuration tests", () => {
+  test("Master charts do not contain title/legend/tooltips", () => {
+    createChart(
+      model,
+      { type: "line", legendPosition: "top", title: { text: "myTitle" }, showValues: true },
+      "chartId"
+    );
+
+    const runtime = model.getters.getChartRuntime("chartId") as LineChartRuntime;
+
+    expect(runtime.masterChartConfig?.options?.plugins?.legend?.display).toBe(false);
+    expect(runtime.masterChartConfig?.options?.plugins?.title?.display).toBe(false);
+    expect(runtime.masterChartConfig?.options?.plugins?.tooltip?.enabled).toBe(false);
+    expect(runtime.masterChartConfig?.options?.plugins?.chartShowValuesPlugin).toBe(undefined);
+  });
+
+  test("Master chart do not have Y axis", () => {
+    setCellContent(model, "B2", "5");
+    setCellContent(model, "C2", "10");
+    createChart(
+      model,
+      { type: "line", dataSets: [{ dataRange: "B1:B5" }, { dataRange: "C1:C5", yAxisId: "y1" }] },
+      "chartId"
+    );
+
+    const runtime = model.getters.getChartRuntime("chartId") as LineChartRuntime;
+
+    expect(runtime.chartJsConfig.options?.scales?.y?.display).toBe(undefined); // chartJS default is display=true
+    expect(runtime.chartJsConfig.options?.scales?.y1?.display).toBe(undefined);
+
+    expect(runtime.masterChartConfig?.options?.scales?.y?.display).toBe(false);
+    expect(runtime.masterChartConfig?.options?.scales?.y1?.display).toBe(false);
+  });
+
+  test("Master chart X axis does not have a title and labels are truncated", () => {
+    setCellContent(model, "A2", "Long label 1");
+    setCellContent(model, "B2", "5");
+    createChart(
+      model,
+      {
+        type: "line",
+        dataSets: [{ dataRange: "B1:B5" }],
+        labelRange: "A1:A5",
+        axesDesign: { x: { title: { text: "axis title" } } },
+      },
+      "chartId"
+    );
+
+    const runtime = model.getters.getChartRuntime("chartId") as LineChartRuntime;
+
+    expect(runtime.masterChartConfig?.options?.scales?.x?.title).toBe(undefined);
+    const labels = runtime.chartJsConfig.data.labels;
+    const fakeScale = {
+      getLabelForValue: (index: number) => labels?.[index],
+    } as Scale;
+    const callback = runtime.masterChartConfig?.options?.scales?.x?.ticks?.callback;
+    expect(callback?.call(fakeScale, 0, 0, [])).toBe("Long …");
+  });
+
+  test("Trend lines are not present in master charts", () => {
+    setCellContent(model, "B2", "5");
+    setCellContent(model, "B3", "10");
+    createChart(
+      model,
+      {
+        type: "line",
+        dataSets: [{ dataRange: "B1:B5", trend: { display: true, type: "logarithmic" } }],
+      },
+      "chartId"
+    );
+
+    const runtime = model.getters.getChartRuntime("chartId") as LineChartRuntime;
+
+    expect(runtime.chartJsConfig.data.datasets.length).toBe(2);
+    expect(runtime.masterChartConfig?.data.datasets.length).toBe(1);
+
+    expect(runtime.chartJsConfig.options?.scales?.[TREND_LINE_XAXIS_ID]).toBeDefined();
+    expect(runtime.masterChartConfig?.options?.scales?.[TREND_LINE_XAXIS_ID]).toBeUndefined();
+  });
+
+  test("Scatter chart master chart does not show lines and has smaller point size", () => {
+    createChart(model, { type: "scatter", dataSets: [{ dataRange: "A1:A5" }] }, "chartId");
+    const runtime = model.getters.getChartRuntime("chartId") as ScatterChartRuntime;
+
+    expect(runtime.chartJsConfig.data.datasets[0].showLine).toBe(false);
+    expect(runtime.chartJsConfig.data.datasets[0].pointRadius).toBe(3);
+
+    expect(runtime.masterChartConfig?.data.datasets[0].showLine).toBe(false);
+    expect(runtime.masterChartConfig?.data.datasets[0].pointRadius).toBe(2);
+  });
+});