@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.11

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -15,10 +15,16 @@ var _useSelector = require("../../../store/useSelector");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
+var _useChartCartesianAxis = require("./useChartCartesianAxis.selectors");
+var _getAxisValue = require("./getAxisValue");
+var _getSVGPoint = require("../../../getSVGPoint");
+var _useChartInteraction = require("../useChartInteraction");
 const useChartCartesianAxis = ({
   params,
   store,
-  seriesConfig
+  seriesConfig,
+  svgRef,
+  instance
 }) => {
   const {
     xAxis,
@@ -33,7 +39,16 @@ const useChartCartesianAxis = ({
     }
   }
   const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
-  const formattedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesState);
+  const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
+  const interactionAxis = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionAxis);
+  const {
+    axis: xAxisWithScale,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  const {
+    axis: yAxisWithScale,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -49,14 +64,136 @@ const useChartCartesianAxis = ({
         y: (0, _defaultizeAxis.defaultizeAxis)(yAxis, dataset, 'y')
       })
     }));
-  }, [seriesConfig, drawingArea, formattedSeries, xAxis, yAxis, dataset, store]);
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  const usedXAxis = xAxisIds[0];
+  const usedYAxis = yAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    isInChart: false,
+    x: -1,
+    y: -1
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      mousePosition.current = {
+        isInChart: false,
+        x: -1,
+        y: -1
+      };
+      instance.cleanInteraction();
+    };
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+      if (!instance.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
+        if (mousePosition.current.isInChart) {
+          store.update(prev => (0, _extends2.default)({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+      mousePosition.current.isInChart = true;
+      instance.setAxisInteraction({
+        x: (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x),
+        y: (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)
+      });
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !params.onAxisClick) {
+      return () => {};
+    }
+    const handleMouseClick = event => {
+      event.preventDefault();
+      let dataIndex = null;
+      let isXaxis = false;
+      if (interactionAxis.x === null && interactionAxis.y === null) {
+        const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+        const xIndex = (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
+        isXaxis = xIndex !== null && xIndex !== -1;
+        dataIndex = isXaxis ? xIndex : (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
+      } else {
+        isXaxis = interactionAxis.x !== null && interactionAxis.x.index !== -1;
+        dataIndex = isXaxis ? interactionAxis.x && interactionAxis.x.index : interactionAxis.y && interactionAxis.y.index;
+      }
+      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXaxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          const providedXAxisId = seriesItem.xAxisId;
+          const providedYAxisId = seriesItem.yAxisId;
+          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            seriesValues[seriesId] = seriesItem.data[dataIndex];
+          }
+        });
+      });
+      params.onAxisClick?.(event, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    };
+    element.addEventListener('click', handleMouseClick);
+    return () => {
+      element.removeEventListener('click', handleMouseClick);
+    };
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, params, interactionAxis, usedXAxis, usedYAxis]);
   return {};
 };
 exports.useChartCartesianAxis = useChartCartesianAxis;
 useChartCartesianAxis.params = {
   xAxis: true,
   yAxis: true,
-  dataset: true
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params

package/node/models/axis.js

@@ -15,4 +15,8 @@ function isBandScaleConfig(scaleConfig) {
 }
 function isPointScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'point';
-}
+}
+
+/**
+ * The data format returned by onAxisClick.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.11",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -39,7 +39,7 @@
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
     "@mui/x-charts-vendor": "8.0.0-alpha.10",
-    "@mui/x-internals": "8.0.0-alpha.10"
+    "@mui/x-internals": "8.0.0-alpha.11"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-export type ChartsAxisData = {
-    dataIndex: number;
-    axisValue?: number | Date | string;
-    seriesValues: Record<string, number | null | undefined>;
-};
-export interface ChartsOnAxisClickHandlerProps {
-    /**
-     * The function called for onClick events.
-     * The second argument contains information about all line/bar elements at the current mouse position.
-     * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-     * @param {null | AxisData} data The data about the clicked axis and items associated with it.
-     */
-    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
-}
-declare function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps): React.JSX.Element;
-declare namespace ChartsOnAxisClickHandler {
-    var propTypes: any;
-}
-export { ChartsOnAxisClickHandler };

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,82 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useSeries } from "../hooks/useSeries.js";
-import { useSvgRef, useXAxes, useYAxes } from "../hooks/index.js";
-import { useStore } from "../internals/store/useStore.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function ChartsOnAxisClickHandler(props) {
-  const {
-    onAxisClick
-  } = props;
-  const svgRef = useSvgRef();
-  const series = useSeries();
-  const store = useStore();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !onAxisClick) {
-      return () => {};
-    }
-    const handleMouseClick = event => {
-      event.preventDefault();
-      const {
-        x: axisX,
-        y: axisY
-      } = store.value.interaction.axis;
-      const isXaxis = axisX && axisX.index !== -1;
-      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-      const dataIndex = isXaxis ? axisX && axisX.index : axisY && axisY.index;
-      if (dataIndex == null) {
-        return;
-      }
-      const seriesValues = {};
-      Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        series[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = series[seriesType].series[seriesId];
-          const providedXAxisId = seriesItem.xAxisId;
-          const providedYAxisId = seriesItem.yAxisId;
-          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
-          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-            seriesValues[seriesId] = seriesItem.data[dataIndex];
-          }
-        });
-      });
-      const axisValue = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data?.[dataIndex];
-      onAxisClick(event, {
-        dataIndex,
-        axisValue,
-        seriesValues
-      });
-    };
-    element.addEventListener('click', handleMouseClick);
-    return () => {
-      element.removeEventListener('click', handleMouseClick);
-    };
-  }, [onAxisClick, series, store, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
-
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return /*#__PURE__*/_jsx(React.Fragment, {});
-}
-process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
-   */
-  onAxisClick: PropTypes.func
-} : void 0;
-export { ChartsOnAxisClickHandler };

package/ChartsOnAxisClickHandler/index.d.ts

@@ -1 +0,0 @@
-export * from './ChartsOnAxisClickHandler';

package/ChartsOnAxisClickHandler/index.js

@@ -1 +0,0 @@
-export * from "./ChartsOnAxisClickHandler.js";

package/ChartsOnAxisClickHandler/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/ChartsOnAxisClickHandler/index.js",
-  "types": "./index.d.ts"
-}

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,82 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useSeries } from "../hooks/useSeries.js";
-import { useSvgRef, useXAxes, useYAxes } from "../hooks/index.js";
-import { useStore } from "../internals/store/useStore.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function ChartsOnAxisClickHandler(props) {
-  const {
-    onAxisClick
-  } = props;
-  const svgRef = useSvgRef();
-  const series = useSeries();
-  const store = useStore();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !onAxisClick) {
-      return () => {};
-    }
-    const handleMouseClick = event => {
-      event.preventDefault();
-      const {
-        x: axisX,
-        y: axisY
-      } = store.value.interaction.axis;
-      const isXaxis = axisX && axisX.index !== -1;
-      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-      const dataIndex = isXaxis ? axisX && axisX.index : axisY && axisY.index;
-      if (dataIndex == null) {
-        return;
-      }
-      const seriesValues = {};
-      Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        series[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = series[seriesType].series[seriesId];
-          const providedXAxisId = seriesItem.xAxisId;
-          const providedYAxisId = seriesItem.yAxisId;
-          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
-          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-            seriesValues[seriesId] = seriesItem.data[dataIndex];
-          }
-        });
-      });
-      const axisValue = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data?.[dataIndex];
-      onAxisClick(event, {
-        dataIndex,
-        axisValue,
-        seriesValues
-      });
-    };
-    element.addEventListener('click', handleMouseClick);
-    return () => {
-      element.removeEventListener('click', handleMouseClick);
-    };
-  }, [onAxisClick, series, store, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
-
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return /*#__PURE__*/_jsx(React.Fragment, {});
-}
-process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
-   */
-  onAxisClick: PropTypes.func
-} : void 0;
-export { ChartsOnAxisClickHandler };

package/modern/ChartsOnAxisClickHandler/index.js

@@ -1 +0,0 @@
-export * from "./ChartsOnAxisClickHandler.js";

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,88 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartsOnAxisClickHandler = ChartsOnAxisClickHandler;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useSeries = require("../hooks/useSeries");
-var _hooks = require("../hooks");
-var _useStore = require("../internals/store/useStore");
-var _jsxRuntime = require("react/jsx-runtime");
-function ChartsOnAxisClickHandler(props) {
-  const {
-    onAxisClick
-  } = props;
-  const svgRef = (0, _hooks.useSvgRef)();
-  const series = (0, _useSeries.useSeries)();
-  const store = (0, _useStore.useStore)();
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _hooks.useXAxes)();
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _hooks.useYAxes)();
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !onAxisClick) {
-      return () => {};
-    }
-    const handleMouseClick = event => {
-      event.preventDefault();
-      const {
-        x: axisX,
-        y: axisY
-      } = store.value.interaction.axis;
-      const isXaxis = axisX && axisX.index !== -1;
-      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-      const dataIndex = isXaxis ? axisX && axisX.index : axisY && axisY.index;
-      if (dataIndex == null) {
-        return;
-      }
-      const seriesValues = {};
-      Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        series[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = series[seriesType].series[seriesId];
-          const providedXAxisId = seriesItem.xAxisId;
-          const providedYAxisId = seriesItem.yAxisId;
-          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
-          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-            seriesValues[seriesId] = seriesItem.data[dataIndex];
-          }
-        });
-      });
-      const axisValue = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data?.[dataIndex];
-      onAxisClick(event, {
-        dataIndex,
-        axisValue,
-        seriesValues
-      });
-    };
-    element.addEventListener('click', handleMouseClick);
-    return () => {
-      element.removeEventListener('click', handleMouseClick);
-    };
-  }, [onAxisClick, series, store, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
-
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});
-}
-process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
-   */
-  onAxisClick: _propTypes.default.func
-} : void 0;

package/node/ChartsOnAxisClickHandler/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ChartsOnAxisClickHandler = require("./ChartsOnAxisClickHandler");
-Object.keys(_ChartsOnAxisClickHandler).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartsOnAxisClickHandler[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartsOnAxisClickHandler[key];
-    }
-  });
-});