[charts] Fix scatter dataset with missing data (@alexfauquette)

packages/x-charts/src/ScatterChart/ScatterChart.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils/createRenderer';
+import { expect } from 'chai';
+import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils/createRenderer';
 import { describeConformance } from 'test/utils/describeConformance';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 
@@ -38,4 +39,99 @@ describe('<ScatterChart />', () => {
       ],
     }),
   );
+
+  const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+  const config = {
+    dataset: [
+      { id: 1, x: 0, y: 10 },
+      { id: 2, x: 10, y: 10 },
+      { id: 3, x: 10, y: 0 },
+      { id: 4, x: 0, y: 0 },
+      { id: 5, x: 5, y: 5 },
+    ],
+    margin: { top: 0, left: 0, bottom: 0, right: 0 },
+    width: 100,
+    height: 100,
+  };
+
+  it('should show the tooltip without errors in default config', function test() {
+    if (isJSDOM) {
+      // svg.createSVGPoint not supported by JSDom https://github.com/jsdom/jsdom/issues/300
+      this.skip();
+    }
+    render(
+      <div
+        style={{
+          margin: -8, // Removes the body default margins
+          width: 100,
+          height: 100,
+        }}
+      >
+        <ScatterChart {...config} series={[{ id: 's1', data: config.dataset }]} />
+      </div>,
+    );
+    const svg = document.querySelector<HTMLElement>('svg')!;
+    const marks = document.querySelectorAll<HTMLElement>('circle');
+
+    fireEvent.pointerEnter(marks[0]);
+
+    fireEvent.pointerEnter(svg); // Trigger the tooltip
+    fireEvent.pointerMove(marks[0]); // Only to set the tooltip position
+
+    let cells = document.querySelectorAll<HTMLElement>('.MuiChartsTooltip-root td');
+    expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '', '(0, 10)']);
+
+    fireEvent.pointerEnter(marks[4]);
+    cells = document.querySelectorAll<HTMLElement>('.MuiChartsTooltip-root td');
+    expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '', '(5, 5)']);
+  });
+
+  it('should support dataset with missing values', async function test() {
+    if (isJSDOM) {
+      this.skip();
+    }
+
+    // x from 500 to 600
+    // y from 100 to 200
+    const dataset = [
+      {
+        version: 'data-0',
+        a1: 500,
+        a2: 100,
+      },
+      {
+        version: 'data-1',
+        a1: 600,
+        a2: 200,
+      },
+      {
+        version: 'data-2',
+        // Item with missing x-values
+        // a1: 500,
+        a2: 200,
+      },
+      {
+        version: 'data-2',
+        // Item with missing y-values
+        a1: 500,
+        // a2: 200,
+      },
+    ];
+
+    render(
+      <ScatterChart
+        dataset={dataset}
+        series={[{ datasetKeys: { id: 'version', x: 'a1', y: 'a2' }, label: 'Series A' }]}
+        width={500}
+        height={300}
+      />,
+    );
+
+    const labelX = await screen.findByText('100');
+    expect(labelX).toBeVisible();
+
+    const labelY = await screen.findByText('600');
+    expect(labelY).toBeVisible();
+  });
 });

packages/x-charts/src/ScatterChart/extremums.ts

@@ -6,9 +6,10 @@ import {
 const mergeMinMax = (
   acc: ExtremumGetterResult,
   val: ExtremumGetterResult,
-): ExtremumGetterResult => {
-  return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
-};
+): ExtremumGetterResult => [
+  val[0] === null ? acc[0] : Math.min(acc[0], val[0]),
+  val[1] === null ? acc[1] : Math.max(acc[1], val[1]),
+];
 
 export const getExtremumX: ExtremumGetter<'scatter'> = (params) => {
   const { series, axis, isDefaultAxis, getFilters } = params;

packages/x-charts/src/ScatterChart/formatter.ts

@@ -23,8 +23,8 @@ const formatter: SeriesFormatter<'scatter'> = ({ series, seriesOrder }, dataset)
         ? (seriesData.data ?? [])
         : (dataset?.map((d) => {
             return {
-              x: d[datasetKeys.x],
-              y: d[datasetKeys.y],
+              x: d[datasetKeys.x] ?? null,
+              y: d[datasetKeys.y] ?? null,
               z: datasetKeys.z && d[datasetKeys.z],
               id: d[datasetKeys.id],
             } as ScatterValueType;