@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.8

package/node/context/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ZAxisContextProvider: true,
   ChartDataProvider: true
 };
 Object.defineProperty(exports, "ChartDataProvider", {
@@ -13,12 +12,6 @@ Object.defineProperty(exports, "ChartDataProvider", {
     return _ChartDataProvider.ChartDataProvider;
   }
 });
-Object.defineProperty(exports, "ZAxisContextProvider", {
-  enumerable: true,
-  get: function () {
-    return _ZAxisContextProvider.ZAxisContextProvider;
-  }
-});
 var _HighlightedProvider = require("./HighlightedProvider");
 Object.keys(_HighlightedProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -31,5 +24,4 @@ Object.keys(_HighlightedProvider).forEach(function (key) {
     }
   });
 });
-var _ZAxisContextProvider = require("./ZAxisContextProvider");
 var _ChartDataProvider = require("./ChartDataProvider");

package/node/hooks/index.js

@@ -8,7 +8,9 @@ var _exportNames = {
   unstable_usePieSeries: true,
   unstable_useLineSeries: true,
   unstable_useBarSeries: true,
-  unstable_useScatterSeries: true
+  unstable_useScatterSeries: true,
+  useChartGradientId: true,
+  useChartGradientIdObjectBound: true
 };
 Object.defineProperty(exports, "unstable_useBarSeries", {
   enumerable: true,
@@ -40,6 +42,18 @@ Object.defineProperty(exports, "unstable_useSeries", {
     return _useSeries.useSeries;
   }
 });
+Object.defineProperty(exports, "useChartGradientId", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientId;
+  }
+});
+Object.defineProperty(exports, "useChartGradientIdObjectBound", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientIdObjectBound;
+  }
+});
 var _useDrawingArea = require("./useDrawingArea");
 Object.keys(_useDrawingArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,6 +102,18 @@ Object.keys(_useAxis).forEach(function (key) {
     }
   });
 });
+var _useZAxis = require("./useZAxis");
+Object.keys(_useZAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useZAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useZAxis[key];
+    }
+  });
+});
 var _useColorScale = require("./useColorScale");
 Object.keys(_useColorScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -124,4 +150,5 @@ Object.keys(_useLegend).forEach(function (key) {
       return _useLegend[key];
     }
   });
-});
+});
+var _useChartGradientId = require("./useChartGradientId");

package/node/hooks/useAxis.js

@@ -4,22 +4,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useXAxes = useXAxes;
 exports.useXAxis = useXAxis;
+exports.useYAxes = useYAxes;
 exports.useYAxis = useYAxis;
-var _CartesianProvider = require("../context/CartesianProvider");
-function useXAxis(identifier) {
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+function useXAxes() {
+  const store = (0, _useStore.useStore)();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  };
+}
+function useYAxes() {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+function useXAxis(identifier) {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 function useYAxis(identifier) {
+  const store = (0, _useStore.useStore)();
   const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/node/hooks/useAxisEvents.js

@@ -9,25 +9,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAxisEvents = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
-var _useDrawingArea = require("./useDrawingArea");
 var _useStore = require("../internals/store/useStore");
+var _ChartProvider = require("../context/ChartProvider");
+var _useAxis = require("./useAxis");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 const useAxisEvents = disableAxisListener => {
   const svgRef = (0, _useSvgRef.useSvgRef)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const store = (0, _useStore.useStore)(disableAxisListener);
+  } = (0, _useAxis.useYAxes)();
+  const store = (0, _useStore.useStore)();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -113,7 +117,7 @@ const useAxisEvents = disableAxisListener => {
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, {
+      if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
@@ -164,6 +168,6 @@ const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
 };
 exports.useAxisEvents = useAxisEvents;

package/node/hooks/useChartGradientId.js

@@ -0,0 +1,56 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartGradientId = useChartGradientId;
+exports.useChartGradientIdBuilder = useChartGradientIdBuilder;
+exports.useChartGradientIdObjectBound = useChartGradientIdObjectBound;
+exports.useChartGradientIdObjectBoundBuilder = useChartGradientIdObjectBoundBuilder;
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("./useChartId");
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+function useChartGradientIdBuilder() {
+  const chartId = (0, _useChartId.useChartId)();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+function useChartGradientIdObjectBoundBuilder() {
+  const chartId = (0, _useChartId.useChartId)();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}-object-bound`, [chartId]);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+function useChartGradientId(axisId) {
+  return useChartGradientIdBuilder()(axisId);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}

package/node/hooks/useColorScale.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useXColorScale = useXColorScale;
 exports.useYColorScale = useYColorScale;
 exports.useZColorScale = useZColorScale;
-var _CartesianProvider = require("../context/CartesianProvider");
+var _useAxis = require("./useAxis");
 var _useZAxis = require("./useZAxis");
 function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useXAxes)();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -21,7 +21,7 @@ function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }
@@ -29,7 +29,7 @@ function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/node/hooks/useDrawingArea.js

@@ -1,30 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDrawingArea = useDrawingArea;
-var React = _interopRequireWildcard(require("react"));
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 function useDrawingArea() {
-  const {
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useMemo(() => ({
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  }), [height, left, top, width, bottom, right, isPointInside]);
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
 }

package/node/hooks/useSeries.js

@@ -11,7 +11,9 @@ exports.usePieSeries = usePieSeries;
 exports.useScatterSeries = useScatterSeries;
 exports.useSeries = useSeries;
 var React = _interopRequireWildcard(require("react"));
-var _SeriesProvider = require("../context/SeriesProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
@@ -19,14 +21,8 @@ var _SeriesProvider = require("../context/SeriesProvider");
  * @returns FormattedSeries series
  */
 function useSeries() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(_SeriesProvider.SeriesContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
 }
 
 /**

package/node/hooks/useZAxis.js

@@ -1,15 +1,33 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useZAxis = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-const useZAxis = () => {
-  const data = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  return data;
-};
-exports.useZAxis = useZAxis;
+exports.useZAxes = useZAxes;
+exports.useZAxis = useZAxis;
+var _useStore = require("../internals/store/useStore");
+var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
+var _useSelector = require("../internals/store/useSelector");
+function useZAxes() {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: zAxis,
+    axisIds: zAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartZAxis.selectorChartZAxis) ?? {
+    axis: {},
+    axisIds: []
+  };
+  return {
+    zAxis,
+    zAxisIds
+  };
+}
+function useZAxis(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = useZAxes();
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id];
+}

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.7
+ * @mui/x-charts v8.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -6,26 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAxesGradients = ChartsAxesGradients;
-exports.useChartGradient = useChartGradient;
-exports.useChartGradientObjectBound = useChartGradientObjectBound;
 var React = _interopRequireWildcard(require("react"));
-var _CartesianProvider = require("../../../context/CartesianProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
 var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
 var _ChartsContinuousGradientObjectBound = _interopRequireDefault(require("./ChartsContinuousGradientObjectBound"));
 var _useZAxis = require("../../../hooks/useZAxis");
+var _useChartGradientId = require("../../../hooks/useChartGradientId");
 var _jsxRuntime = require("react/jsx-runtime");
-function useChartGradient() {
-  const chartId = (0, _hooks.useChartId)();
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
-}
-
-// TODO: make public?
-function useChartGradientObjectBound() {
-  const chartId = (0, _hooks.useChartId)();
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}-object-bound`, [chartId]);
-}
 function ChartsAxesGradients() {
   const {
     top,
@@ -37,18 +25,20 @@ function ChartsAxesGradients() {
   } = (0, _hooks.useDrawingArea)();
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
-  const getGradientId = useChartGradient();
-  const getObjectBoundGradientId = useChartGradientObjectBound();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+  const getObjectBoundGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   const {
-    zAxisIds,
-    zAxis
-  } = (0, _useZAxis.useZAxis)();
+    zAxis,
+    zAxisIds
+  } = (0, _useZAxis.useZAxes)();
   const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
   const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
   const filteredZAxisIds = zAxisIds.filter(axisId => zAxis[axisId].colorMap !== undefined);
@@ -57,8 +47,8 @@ function ChartsAxesGradients() {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
     children: [filteredYAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'y');
-      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'y');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -95,8 +85,8 @@ function ChartsAxesGradients() {
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'x');
-      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'x');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -133,7 +123,7 @@ function ChartsAxesGradients() {
       }
       return null;
     }), filteredZAxisIds.map(axisId => {
-      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'z');
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         colorScale

package/node/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -16,6 +16,9 @@ function ChartsPiecewiseGradient(props) {
     scale,
     colorMap
   } = props;
+  if (size <= 0) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
     id: gradientId,
     x1: "0",