From 23bba8f322b443166204cf3a12fb78dcb03d0bc9 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 26 Aug 2024 09:51:14 +0200 Subject: [PATCH 1/5] [charts] Fix tooltip --- .../x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 874d00f3ca35..18aca391bc5b 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -56,7 +56,7 @@ function ChartsAxisTooltipContent(props: { }) { const { content, contentProps, axisData, sx, classes } = props; - const isXaxis = (axisData.x && axisData.x.index) !== undefined; + const isXaxis = axisData.x && axisData.x.index !== undefined && axisData.x.index !== -1; const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index; const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value; From f2597f293a622d4f5b2d1a9de117f8c645a36e1f Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 26 Aug 2024 09:58:30 +0200 Subject: [PATCH 2/5] Improve TS --- .../x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx | 2 +- packages/x-charts/src/context/InteractionProvider.tsx | 6 ++++-- packages/x-charts/src/hooks/useAxisEvents.ts | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 18aca391bc5b..b9daca3379cb 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -56,7 +56,7 @@ function ChartsAxisTooltipContent(props: { }) { const { content, contentProps, axisData, sx, classes } = props; - const isXaxis = axisData.x && axisData.x.index !== undefined && axisData.x.index !== -1; + const isXaxis = axisData.x && axisData.x.index !== -1; const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index; const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value; diff --git a/packages/x-charts/src/context/InteractionProvider.tsx b/packages/x-charts/src/context/InteractionProvider.tsx index 2c26dc32aea9..35cee12e71e6 100644 --- a/packages/x-charts/src/context/InteractionProvider.tsx +++ b/packages/x-charts/src/context/InteractionProvider.tsx @@ -10,11 +10,13 @@ export type ItemInteractionData = ChartItemIdentifier export type AxisInteractionData = { x: null | { value: number | Date | string; - index?: number; + // Set to -1 if no index. + index: number; }; y: null | { value: number | Date | string; - index?: number; + // Set to -1 if no index. + index: number; }; }; diff --git a/packages/x-charts/src/hooks/useAxisEvents.ts b/packages/x-charts/src/hooks/useAxisEvents.ts index 83994d170929..789f9ea45d54 100644 --- a/packages/x-charts/src/hooks/useAxisEvents.ts +++ b/packages/x-charts/src/hooks/useAxisEvents.ts @@ -39,7 +39,7 @@ export const useAxisEvents = (disableAxisListener: boolean) => { const value = scale.invert(mouseValue); if (axisData === undefined) { - return { value }; + return { value, index: -1 }; } const valueAsNumber = getAsANumber(value); From 5335fc6c05e0f5ab9874c40f09e683a9c8212729 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 26 Aug 2024 12:07:51 +0200 Subject: [PATCH 3/5] add-tests --- .../src/ChartsTooltip/ChartsTooltip.test.tsx | 251 ++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 packages/x-charts/src/ChartsTooltip/ChartsTooltip.test.tsx diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.test.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.test.tsx new file mode 100644 index 000000000000..6b4634241e3d --- /dev/null +++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.test.tsx @@ -0,0 +1,251 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, fireEvent } from '@mui/internal-test-utils'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { firePointerEvent } from '../tests/firePointerEvent'; + +const config = { + dataset: [ + { x: 'A', v1: 4, v2: 2 }, + { x: 'B', v1: 1, v2: 1 }, + ], + margin: { top: 0, left: 0, bottom: 0, right: 0 }, + width: 400, + height: 400, +}; + +// Plot as follow to simplify click position +// +// | X +// | X +// | X X +// | X X X X +// ---A---B- + +const isJSDOM = /jsdom/.test(window.navigator.userAgent); + +describe('ChartsTooltip', () => { + const { render } = createRenderer(); + + describe('axis trigger', () => { + it('should show right values with vertical layout', function test() { + if (isJSDOM) { + // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527 + this.skip(); + } + + render( +
+ +
, + ); + const svg = document.querySelector('svg')!; + + firePointerEvent(svg, 'pointermove', { + clientX: 198, + clientY: 60, + }); + + let cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal([ + // Header + 'A', + // First row + '', // mark + 'S1', // label + '4', // value + // Second row + '', + 'S2', + '2', + ]); + + firePointerEvent(svg, 'pointermove', { + clientX: 201, + clientY: 60, + }); + + cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal([ + // Header + 'B', + // First row + '', + 'S1', + '1', + // Second row + '', + 'S2', + '1', + ]); + }); + + it('should show right values with horizontal layout', function test() { + if (isJSDOM) { + // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527 + this.skip(); + } + + render( +
+ +
, + ); + const svg = document.querySelector('svg')!; + + firePointerEvent(svg, 'pointermove', { + clientX: 150, + clientY: 60, + }); + + let cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal([ + // Header + 'A', + // First row + '', + 'S1', + '4', + // Second row + '', + 'S2', + '2', + ]); + + firePointerEvent(svg, 'pointermove', { + clientX: 150, + clientY: 220, + }); + + cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal([ + // Header + 'B', + // First row + '', + 'S1', + '1', + // Second row + '', + 'S2', + '1', + ]); + }); + }); + + describe('item trigger', () => { + it('should show right values with vertical layout', function test() { + if (isJSDOM) { + // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527 + this.skip(); + } + + render( +
+ +
, + ); + const svg = document.querySelector('svg')!; + const rectangles = document.querySelectorAll('rect'); + + fireEvent.pointerEnter(rectangles[0]); + + firePointerEvent(svg, 'pointermove', { + clientX: 150, + clientY: 60, + }); // Only to set the tooltip position + + let cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', 'S1', '4']); + + fireEvent.pointerEnter(rectangles[3]); + cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', 'S2', '1']); + }); + + it('should show right values with horizontal layout', function test() { + if (isJSDOM) { + // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527 + this.skip(); + } + + render( +
+ +
, + ); + const svg = document.querySelector('svg')!; + const rectangles = document.querySelectorAll('rect'); + + fireEvent.pointerEnter(rectangles[0]); + + firePointerEvent(svg, 'pointermove', { + clientX: 150, + clientY: 60, + }); // Only to set the tooltip position + + let cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', 'S1', '4']); + + fireEvent.pointerEnter(rectangles[3]); + cells = document.querySelectorAll('.MuiChartsTooltip-root td'); + expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', 'S2', '1']); + }); + }); +}); From 73991589a5ce5667dbba97ecbce9d4c5ec31fa47 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 26 Aug 2024 12:19:51 +0200 Subject: [PATCH 4/5] rename to fix docs:api --- .../{ChartsTooltip.test.tsx => contentDIsplayed.test.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/x-charts/src/ChartsTooltip/{ChartsTooltip.test.tsx => contentDIsplayed.test.tsx} (100%) diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.test.tsx b/packages/x-charts/src/ChartsTooltip/contentDIsplayed.test.tsx similarity index 100% rename from packages/x-charts/src/ChartsTooltip/ChartsTooltip.test.tsx rename to packages/x-charts/src/ChartsTooltip/contentDIsplayed.test.tsx From b6df34e4e309a3dfbdd3fbe607b6caa1c901f8aa Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 26 Aug 2024 13:17:18 +0200 Subject: [PATCH 5/5] rename --- .../{contentDIsplayed.test.tsx => contentDisplayed.test.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/x-charts/src/ChartsTooltip/{contentDIsplayed.test.tsx => contentDisplayed.test.tsx} (100%) diff --git a/packages/x-charts/src/ChartsTooltip/contentDIsplayed.test.tsx b/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx similarity index 100% rename from packages/x-charts/src/ChartsTooltip/contentDIsplayed.test.tsx rename to packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx