From 1568cf10dcdce613068989f1e610849e65c7fce8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 9 Dec 2024 11:16:56 +0100 Subject: [PATCH 1/5] [charts] Fix scatter dataset with missing data (#15802) --- .../src/ScatterChart/ScatterChart.test.tsx | 95 ++++++++++++++++++- .../x-charts/src/ScatterChart/extremums.ts | 7 +- .../x-charts/src/ScatterChart/formatter.ts | 4 +- 3 files changed, 100 insertions(+), 6 deletions(-) diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx index 6a0810ce8dd3..f0b6ce301b81 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer } from '@mui/internal-test-utils/createRenderer'; +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 +38,97 @@ describe('', () => { ], }), ); + + 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( +
+ +
, + ); + const svg = document.querySelector('svg')!; + const marks = document.querySelectorAll('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('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '', '(0, 10)']); + + fireEvent.pointerEnter(marks[4]); + cells = document.querySelectorAll('.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( + , + ); + + const labelX = await screen.findByText('100'); + expect(labelX).toBeVisible(); + + const labelY = await screen.findByText('600'); + expect(labelY).toBeVisible(); + }); }); diff --git a/packages/x-charts/src/ScatterChart/extremums.ts b/packages/x-charts/src/ScatterChart/extremums.ts index 806295a1997f..3e739e90eb42 100644 --- a/packages/x-charts/src/ScatterChart/extremums.ts +++ b/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; diff --git a/packages/x-charts/src/ScatterChart/formatter.ts b/packages/x-charts/src/ScatterChart/formatter.ts index 60c024f88c2e..fa55ee74a6b9 100644 --- a/packages/x-charts/src/ScatterChart/formatter.ts +++ b/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; From e3dd007748bab057d4051939aaaceb2a198b4fad Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Mon, 9 Dec 2024 12:46:39 +0100 Subject: [PATCH 2/5] Apply suggestions from code review Signed-off-by: Jose C Quintas Jr --- packages/x-charts/src/ScatterChart/ScatterChart.test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx index f0b6ce301b81..1592fbafd84c 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -39,6 +39,8 @@ describe('', () => { }), ); + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + const config = { dataset: [ { id: 1, x: 0, y: 10 }, From 04f86c2239139d4a4e39fa433fc975db6e454385 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Mon, 9 Dec 2024 12:55:49 +0100 Subject: [PATCH 3/5] Apply suggestions from code review Signed-off-by: Jose C Quintas Jr --- packages/x-charts/src/ScatterChart/ScatterChart.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx index 1592fbafd84c..384b88bad52c 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +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'; From 0432f5963f070baedfa808f8c7c4de5b5e70535d Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Mon, 9 Dec 2024 14:12:32 +0100 Subject: [PATCH 4/5] Apply suggestions from code review Signed-off-by: Jose C Quintas Jr --- .../src/ScatterChart/ScatterChart.test.tsx | 34 +------------------ 1 file changed, 1 insertion(+), 33 deletions(-) diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx index 384b88bad52c..80c02b2f3863 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils/createRenderer'; +import { createRenderer, screen } from '@mui/internal-test-utils/createRenderer'; import { describeConformance } from 'test/utils/describeConformance'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; @@ -55,38 +55,6 @@ describe('', () => { 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( -
- -
, - ); - const svg = document.querySelector('svg')!; - const marks = document.querySelectorAll('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('.MuiChartsTooltip-root td'); - expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '', '(0, 10)']); - - fireEvent.pointerEnter(marks[4]); - cells = document.querySelectorAll('.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(); From 16ca69799d920e064b62c5744f20a8e04f8ff64d Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Mon, 9 Dec 2024 17:47:54 +0100 Subject: [PATCH 5/5] Apply suggestions from code review Signed-off-by: Jose C Quintas Jr --- .../x-charts/src/ScatterChart/ScatterChart.test.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx index 80c02b2f3863..354d06465b4b 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -42,19 +42,6 @@ describe('', () => { 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 support dataset with missing values', async function test() { if (isJSDOM) { this.skip();