[charts] Fix onAxisClick with layour='horizontal' (mui#14547)

arthurbalduini · Sep 30, 2024 · 450d84f · 450d84f
1 parent 8bf945a
commit 450d84f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/packages/x-charts/src/BarChart/checkClickEvent.test.tsx b/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
@@ -80,6 +80,59 @@ describe('BarChart - click event', () => {
         seriesValues: { s1: 1, s2: 1 },
       });
     });
+
+    it('should provide the right context as second argument with layout="horizontal"', function test() {
+      if (isJSDOM) {
+        // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
+        this.skip();
+      }
+      const onAxisClick = spy();
+      render(
+        <div
+          style={{
+            margin: -8, // Removes the body default margins
+            width: 400,
+            height: 400,
+          }}
+        >
+          <BarChart
+            {...config}
+            layout="horizontal"
+            series={[
+              { dataKey: 'v1', id: 's1' },
+              { dataKey: 'v2', id: 's2' },
+            ]}
+            yAxis={[{ scaleType: 'band', dataKey: 'x' }]}
+            onAxisClick={onAxisClick}
+          />
+        </div>,
+      );
+      const svg = document.querySelector<HTMLElement>('svg')!;
+
+      firePointerEvent(svg, 'pointermove', {
+        clientX: 60,
+        clientY: 198,
+      });
+      fireEvent.click(svg);
+
+      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        dataIndex: 0,
+        axisValue: 'A',
+        seriesValues: { s1: 4, s2: 2 },
+      });
+
+      firePointerEvent(svg, 'pointermove', {
+        clientX: 60,
+        clientY: 201,
+      });
+      fireEvent.click(svg);
+
+      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        dataIndex: 1,
+        axisValue: 'B',
+        seriesValues: { s1: 1, s2: 1 },
+      });
+    });
   });
 
   describe('onItemClick', () => {

diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
@@ -38,7 +38,7 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
     const handleMouseClick = (event: MouseEvent) => {
       event.preventDefault();
 
-      const isXaxis = (axis.x && axis.x.index) !== undefined;
+      const isXaxis = axis.x && axis.x.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
       const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;