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

package/node/internals/index.js

@@ -73,15 +73,27 @@ Object.keys(_ChartsAxesGradients).forEach(function (key) {
     }
   });
 });
-var _ResizableContainer = require("../ChartContainer/ResizableContainer");
-Object.keys(_ResizableContainer).forEach(function (key) {
+var _ChartsWrapper = require("./components/ChartsWrapper");
+Object.keys(_ChartsWrapper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ResizableContainer[key]) return;
+  if (key in exports && exports[key] === _ChartsWrapper[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ResizableContainer[key];
+      return _ChartsWrapper[key];
+    }
+  });
+});
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
+Object.keys(_ChartsLabelMark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsLabelMark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLabelMark[key];
     }
   });
 });
@@ -103,7 +115,7 @@ Object.keys(_useChartContainerProps).forEach(function (key) {
     }
   });
 });
-var _useChartDataProviderProps = require("../context/ChartDataProvider/useChartDataProviderProps");
+var _useChartDataProviderProps = require("../ChartDataProvider/useChartDataProviderProps");
 Object.keys(_useChartDataProviderProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -115,209 +127,245 @@ Object.keys(_useChartDataProviderProps).forEach(function (key) {
     }
   });
 });
-var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
-Object.keys(_defaultizeValueFormatter).forEach(function (key) {
+var _useChartId = require("./plugins/corePlugins/useChartId");
+Object.keys(_useChartId).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _defaultizeValueFormatter[key]) return;
+  if (key in exports && exports[key] === _useChartId[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _defaultizeValueFormatter[key];
+      return _useChartId[key];
     }
   });
 });
-var _configInit = require("./configInit");
-Object.keys(_configInit).forEach(function (key) {
+var _useChartSeries = require("./plugins/corePlugins/useChartSeries");
+Object.keys(_useChartSeries).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _configInit[key]) return;
+  if (key in exports && exports[key] === _useChartSeries[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _configInit[key];
+      return _useChartSeries[key];
     }
   });
 });
-var _getLabel = require("./getLabel");
-Object.keys(_getLabel).forEach(function (key) {
+var _useChartDimensions = require("./plugins/corePlugins/useChartDimensions");
+Object.keys(_useChartDimensions).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _getLabel[key]) return;
+  if (key in exports && exports[key] === _useChartDimensions[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _getLabel[key];
+      return _useChartDimensions[key];
     }
   });
 });
-var _getSVGPoint = require("./getSVGPoint");
-Object.keys(_getSVGPoint).forEach(function (key) {
+var _useChartZAxis = require("./plugins/featurePlugins/useChartZAxis");
+Object.keys(_useChartZAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _getSVGPoint[key]) return;
+  if (key in exports && exports[key] === _useChartZAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _getSVGPoint[key];
+      return _useChartZAxis[key];
     }
   });
 });
-var _isDefined = require("./isDefined");
-Object.keys(_isDefined).forEach(function (key) {
+var _useChartCartesianAxis = require("./plugins/featurePlugins/useChartCartesianAxis");
+Object.keys(_useChartCartesianAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _isDefined[key]) return;
+  if (key in exports && exports[key] === _useChartCartesianAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _isDefined[key];
+      return _useChartCartesianAxis[key];
     }
   });
 });
-var _domUtils = require("./domUtils");
-var _getScale = require("./getScale");
-Object.keys(_getScale).forEach(function (key) {
+var _useChartInteraction = require("./plugins/featurePlugins/useChartInteraction");
+Object.keys(_useChartInteraction).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _getScale[key]) return;
+  if (key in exports && exports[key] === _useChartInteraction[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _getScale[key];
+      return _useChartInteraction[key];
     }
   });
 });
-var _computeAxisValue = require("./computeAxisValue");
-Object.keys(_computeAxisValue).forEach(function (key) {
+var _useChartHighlight = require("./plugins/featurePlugins/useChartHighlight");
+Object.keys(_useChartHighlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _computeAxisValue[key]) return;
+  if (key in exports && exports[key] === _useChartHighlight[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _computeAxisValue[key];
+      return _useChartHighlight[key];
     }
   });
 });
-var _CartesianProvider = require("../context/CartesianProvider");
-Object.keys(_CartesianProvider).forEach(function (key) {
+var _selectors = require("./plugins/utils/selectors");
+Object.keys(_selectors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CartesianProvider[key]) return;
+  if (key in exports && exports[key] === _selectors[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _CartesianProvider[key];
+      return _selectors[key];
     }
   });
 });
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
-Object.keys(_DrawingAreaProvider).forEach(function (key) {
+var _useCharts = require("./store/useCharts");
+Object.keys(_useCharts).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DrawingAreaProvider[key]) return;
+  if (key in exports && exports[key] === _useCharts[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _DrawingAreaProvider[key];
+      return _useCharts[key];
     }
   });
 });
-var _InteractionProvider = require("../context/InteractionProvider");
-Object.keys(_InteractionProvider).forEach(function (key) {
+var _useStore = require("./store/useStore");
+Object.keys(_useStore).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _InteractionProvider[key]) return;
+  if (key in exports && exports[key] === _useStore[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _InteractionProvider[key];
+      return _useStore[key];
     }
   });
 });
-var _SeriesProvider = require("../context/SeriesProvider");
-Object.keys(_SeriesProvider).forEach(function (key) {
+var _useSelector = require("./store/useSelector");
+Object.keys(_useSelector).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SeriesProvider[key]) return;
+  if (key in exports && exports[key] === _useSelector[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _SeriesProvider[key];
+      return _useSelector[key];
     }
   });
 });
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-Object.keys(_ZAxisContextProvider).forEach(function (key) {
+var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
+Object.keys(_defaultizeValueFormatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ZAxisContextProvider[key]) return;
+  if (key in exports && exports[key] === _defaultizeValueFormatter[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ZAxisContextProvider[key];
+      return _defaultizeValueFormatter[key];
     }
   });
 });
-var _PluginProvider = require("../context/PluginProvider");
-Object.keys(_PluginProvider).forEach(function (key) {
+var _configInit = require("./configInit");
+Object.keys(_configInit).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _PluginProvider[key]) return;
+  if (key in exports && exports[key] === _configInit[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _PluginProvider[key];
+      return _configInit[key];
     }
   });
 });
-var _AnimationProvider = require("../context/AnimationProvider");
-Object.keys(_AnimationProvider).forEach(function (key) {
+var _getLabel = require("./getLabel");
+Object.keys(_getLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _AnimationProvider[key]) return;
+  if (key in exports && exports[key] === _getLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _AnimationProvider[key];
+      return _getLabel[key];
     }
   });
 });
-var _getAxisExtremum = require("../context/CartesianProvider/getAxisExtremum");
-var _ChartDataProvider = require("../context/ChartDataProvider");
-Object.keys(_ChartDataProvider).forEach(function (key) {
+var _getSVGPoint = require("./getSVGPoint");
+Object.keys(_getSVGPoint).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
+  if (key in exports && exports[key] === _getSVGPoint[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ChartDataProvider[key];
+      return _getSVGPoint[key];
     }
   });
 });
-var _SizeProvider = require("../context/SizeProvider");
-Object.keys(_SizeProvider).forEach(function (key) {
+var _isDefined = require("./isDefined");
+Object.keys(_isDefined).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SizeProvider[key]) return;
+  if (key in exports && exports[key] === _isDefined[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _SizeProvider[key];
+      return _isDefined[key];
     }
   });
 });
-var _SvgRefProvider = require("../context/SvgRefProvider");
-Object.keys(_SvgRefProvider).forEach(function (key) {
+var _domUtils = require("./domUtils");
+var _getScale = require("./getScale");
+Object.keys(_getScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SvgRefProvider[key]) return;
+  if (key in exports && exports[key] === _getScale[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _SvgRefProvider[key];
+      return _getScale[key];
+    }
+  });
+});
+var _getCurve = require("./getCurve");
+Object.keys(_getCurve).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getCurve[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getCurve[key];
+    }
+  });
+});
+var _AnimationProvider = require("../context/AnimationProvider");
+Object.keys(_AnimationProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AnimationProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimationProvider[key];
+    }
+  });
+});
+var _getAxisExtremum = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum");
+var _ChartProvider = require("../context/ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider[key];
     }
   });
 });
@@ -368,4 +416,16 @@ Object.keys(_axis).forEach(function (key) {
       return _axis[key];
     }
   });
+});
+var _models = require("./plugins/models");
+Object.keys(_models).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _models[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _models[key];
+    }
+  });
 });

package/node/internals/plugins/allPlugins.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_PLUGINS = void 0;
+var _useChartCartesianAxis = require("./featurePlugins/useChartCartesianAxis");
+var _useChartHighlight = require("./featurePlugins/useChartHighlight/useChartHighlight");
+var _useChartInteraction = require("./featurePlugins/useChartInteraction");
+var _useChartZAxis = require("./featurePlugins/useChartZAxis");
+// This file should be removed after creating all plugins in favor of a file per chart type.
+
+const ALL_PLUGINS = exports.ALL_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];

package/node/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHART_CORE_PLUGINS = void 0;
+var _useChartDimensions = require("./useChartDimensions/useChartDimensions");
+var _useChartId = require("./useChartId");
+var _useChartSeries = require("./useChartSeries");
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartId.useChartId, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries];

package/node/internals/plugins/corePlugins/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CHART_CORE_PLUGINS", {
+  enumerable: true,
+  get: function () {
+    return _corePlugins.CHART_CORE_PLUGINS;
+  }
+});
+var _corePlugins = require("./corePlugins");

package/node/internals/plugins/corePlugins/useChartDimensions/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartDimensions: true
+};
+Object.defineProperty(exports, "useChartDimensions", {
+  enumerable: true,
+  get: function () {
+    return _useChartDimensions.useChartDimensions;
+  }
+});
+var _useChartDimensions = require("./useChartDimensions");
+var _useChartDimensions2 = require("./useChartDimensions.selectors");
+Object.keys(_useChartDimensions2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartDimensions2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartDimensions2[key];
+    }
+  });
+});

package/node/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -0,0 +1,183 @@
+"use strict";
+'use client';
+
+/* eslint-disable react-compiler/react-compiler */
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartDimensions = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
+var _constants = require("../../../../constants");
+var _useChartDimensions = require("./useChartDimensions.selectors");
+const MAX_COMPUTE_RUN = 10;
+const useChartDimensions = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const hasInSize = params.width !== undefined && params.height !== undefined;
+  const stateRef = React.useRef({
+    displayError: false,
+    initialCompute: true,
+    computeRun: 0
+  });
+  // States only used for the initialization of the size.
+  const [innerWidth, setInnerWidth] = React.useState(0);
+  const [innerHeight, setInnerHeight] = React.useState(0);
+  const computeSize = React.useCallback(() => {
+    const mainEl = svgRef?.current;
+    if (!mainEl) {
+      return {};
+    }
+    const win = (0, _ownerWindow.default)(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
+    store.update(prev => {
+      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
+      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
+      if (prevWidth === newWidth && prevHeight === newHeight) {
+        return prev;
+      }
+      return (0, _extends2.default)({}, prev, {
+        dimensions: (0, _extends2.default)({}, prev.dimensions, {
+          width: newWidth - prev.dimensions.left - prev.dimensions.right,
+          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
+        })
+      });
+    });
+    return {
+      height: newHeight,
+      width: newWidth
+    };
+  }, [store, svgRef]);
+  store.update(prev => {
+    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
+      return prev;
+    }
+    return (0, _extends2.default)({}, prev, {
+      dimensions: (0, _extends2.default)({}, prev.dimensions, {
+        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
+        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
+        propsWidth: params.width,
+        propsHeight: params.height
+      })
+    });
+  });
+  React.useEffect(() => {
+    // Ensure the error detection occurs after the first rendering.
+    stateRef.current.displayError = true;
+  }, []);
+
+  // This effect is used to compute the size of the container on the initial render.
+  // It is not bound to the raf loop to avoid an unwanted "resize" event.
+  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
+  (0, _useEnhancedEffect.default)(() => {
+    // computeRun is used to avoid infinite loops.
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
+      return;
+    }
+    const computedSize = computeSize();
+    if (computedSize.width !== innerWidth || computedSize.height !== innerHeight) {
+      stateRef.current.computeRun += 1;
+      if (computedSize.width !== undefined) {
+        setInnerWidth(computedSize.width);
+      }
+      if (computedSize.height !== undefined) {
+        setInnerHeight(computedSize.height);
+      }
+    } else if (stateRef.current.initialCompute) {
+      stateRef.current.initialCompute = false;
+    }
+  }, [innerHeight, innerWidth, computeSize, hasInSize]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (hasInSize) {
+      return () => {};
+    }
+    computeSize();
+    const elementToObserve = svgRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(() => {
+        computeSize();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [computeSize, hasInSize, svgRef]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (stateRef.current.displayError && params.width === undefined && innerWidth === 0) {
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      stateRef.current.displayError = false;
+    }
+    if (stateRef.current.displayError && params.height === undefined && innerHeight === 0) {
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      stateRef.current.displayError = false;
+    }
+  }
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }, options) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const drawingArea = (0, _useChartDimensions.selectorChartDimensionsState)(store.value);
+    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
+    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
+    if (options?.direction === 'x') {
+      return isInsideX;
+    }
+    if (options?.direction === 'y') {
+      return isInsideY;
+    }
+    return isInsideX && isInsideY;
+  }, [store.value]);
+  return {
+    instance: {
+      isPointInside
+    }
+  };
+};
+exports.useChartDimensions = useChartDimensions;
+useChartDimensions.params = {
+  width: true,
+  height: true,
+  margin: true
+};
+useChartDimensions.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
+  margin: params.margin ? (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, params.margin) : _constants.DEFAULT_MARGINS
+});
+useChartDimensions.getInitialState = ({
+  width,
+  height,
+  margin
+}) => ({
+  dimensions: (0, _extends2.default)({}, margin, {
+    width: (width ?? 0) - margin.left - margin.right,
+    height: (height ?? 0) - margin.top - margin.bottom,
+    propsWidth: width,
+    propsHeight: height
+  })
+});

package/node/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartPropsSize = exports.selectorChartHasIntrinsicSize = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorChartDimensionsState = state => state.dimensions;
+exports.selectorChartDimensionsState = selectorChartDimensionsState;
+const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width,
+  left: dimensionsState.left,
+  right: dimensionsState.right,
+  height: dimensionsState.height,
+  top: dimensionsState.top,
+  bottom: dimensionsState.bottom
+}));
+const selectorChartPropsSize = exports.selectorChartPropsSize = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.propsWidth,
+  height: dimensionsState.propsHeight
+}));
+const selectorChartContainerSize = exports.selectorChartContainerSize = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
+  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
+}));
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+const selectorChartHasIntrinsicSize = exports.selectorChartHasIntrinsicSize = (0, _selectors.createSelector)(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);