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

package/node/context/ChartProvider/index.js

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

package/node/context/ChartProvider/useChartContext.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartContext = require("./ChartContext");
+const useChartContext = () => {
+  const context = React.useContext(_ChartContext.ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};
+exports.useChartContext = useChartContext;

package/node/context/PolarProvider/PolarProvider.js

@@ -1,54 +1,62 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PolarProvider = PolarProvider;
-var React = _interopRequireWildcard(require("react"));
-var _computeAxisValue = require("../../internals/computeAxisValue");
-var _useDrawingArea = require("../../hooks/useDrawingArea");
-var _useSeries = require("../../hooks/useSeries");
-var _PolarContext = require("./PolarContext");
-var _useRadiusExtremumGetter = require("../PluginProvider/useRadiusExtremumGetter");
-var _useRotationExtremumGetter = require("../PluginProvider/useRotationExtremumGetter");
-var _jsxRuntime = require("react/jsx-runtime");
-function PolarProvider(props) {
-  const {
-    rotationAxis,
-    radiusAxis,
-    children
-  } = props;
-  const formattedSeries = (0, _useSeries.useSeries)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const rotationExtremumGetters = (0, _useRotationExtremumGetter.useRotationExtremumGetter)();
-  const radiusExtremumGetters = (0, _useRadiusExtremumGetter.useRadiusExtremumGetter)();
-  const rotationValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: rotationAxis,
-    extremumGetters: rotationExtremumGetters,
-    axisDirection: 'rotation'
-  }), [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters]);
-  const radiusValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: radiusAxis,
-    extremumGetters: radiusExtremumGetters,
-    axisDirection: 'radius'
-  }), [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      rotationAxis: rotationValues.axis,
-      radiusAxis: radiusValues.axis,
-      rotationAxisIds: rotationValues.axisIds,
-      radiusAxisIds: radiusValues.axisIds
-    }
-  }), [rotationValues, radiusValues]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolarContext.PolarContext.Provider, {
-    value: value,
-    children: children
-  });
-}
+// 'use client';
+// import * as React from 'react';
+// import { computeAxisValue } from '../../internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue';
+// import { useDrawingArea } from '../../hooks/useDrawingArea';
+// import { useSeries } from '../../hooks/useSeries';
+// import { PolarContext } from './PolarContext';
+// import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter';
+// import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter';
+// import { PolarProviderProps } from './Polar.types';
+
+// function PolarProvider(props: PolarProviderProps) {
+//   const { rotationAxis, radiusAxis, children } = props;
+
+//   const formattedSeries = useSeries();
+//   const drawingArea = useDrawingArea();
+//   const rotationExtremumGetters = useRotationExtremumGetter();
+//   const radiusExtremumGetters = useRadiusExtremumGetter();
+
+//   const rotationValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: rotationAxis,
+//         extremumGetters: rotationExtremumGetters,
+//         axisDirection: 'rotation',
+//       }),
+//     [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters],
+//   );
+
+//   const radiusValues = React.useMemo(
+//     () =>
+//       computeAxisValue({
+//         drawingArea,
+//         formattedSeries,
+//         axis: radiusAxis,
+//         extremumGetters: radiusExtremumGetters,
+//         axisDirection: 'radius',
+//       }),
+//     [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters],
+//   );
+
+//   const value = React.useMemo(
+//     () => ({
+//       isInitialized: true,
+//       data: {
+//         rotationAxis: rotationValues.axis,
+//         radiusAxis: radiusValues.axis,
+//         rotationAxisIds: rotationValues.axisIds,
+//         radiusAxisIds: radiusValues.axisIds,
+//       },
+//     }),
+//     [rotationValues, radiusValues],
+//   );
+
+//   return <PolarContext.Provider value={value}>{children}</PolarContext.Provider>;
+// }
+
+// export { PolarProvider };

package/node/context/PolarProvider/getAxisExtremum.js

@@ -1,27 +1,49 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getAxisExtremum = void 0;
-const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
-  const getter = getters[chartType];
-  const series = formattedSeries[chartType]?.series ?? {};
-  const [minChartTypeData, maxChartTypeData] = getter?.({
-    series,
-    axis,
-    axisIndex,
-    isDefaultAxis: axisIndex === 0
-  }) ?? [Infinity, -Infinity];
-  const [minData, maxData] = acc;
-  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
-};
-const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
-  const charTypes = Object.keys(getters);
-  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
-  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
-    return [Infinity, -Infinity];
-  }
-  return extremums;
-};
-exports.getAxisExtremum = getAxisExtremum;
+// import { AxisConfig } from '../../models';
+// import { CartesianChartSeriesType } from '../../models/seriesType/config';
+// import { FormattedSeries } from '../SeriesProvider';
+// import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider';
+
+// const axisExtremumCallback = <T extends CartesianChartSeriesType>(
+//   acc: ExtremumGetterResult,
+//   chartType: T,
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig<T>,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ): ExtremumGetterResult => {
+//   const getter = getters[chartType];
+//   const series = formattedSeries[chartType]?.series ?? {};
+
+//   const [minChartTypeData, maxChartTypeData] = getter?.({
+//     series,
+//     axis,
+//     axisIndex,
+//     isDefaultAxis: axisIndex === 0,
+//   }) ?? [Infinity, -Infinity];
+
+//   const [minData, maxData] = acc;
+
+//   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+// };
+
+// export const getAxisExtremum = (
+//   axis: AxisConfig,
+//   getters: ExtremumGettersConfig,
+//   axisIndex: number,
+//   formattedSeries: FormattedSeries,
+// ) => {
+//   const charTypes = Object.keys(getters) as CartesianChartSeriesType[];
+
+//   const extremums = charTypes.reduce<ExtremumGetterResult>(
+//     (acc, charType) =>
+//       axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries),
+//     [Infinity, -Infinity],
+//   );
+
+//   if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+//     return [Infinity, -Infinity];
+//   }
+
+//   return extremums;
+// };
+"use strict";

package/node/context/PolarProvider/usePolarContext.js

@@ -1,17 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.usePolarContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _PolarContext = require("./PolarContext");
-const usePolarContext = () => {
-  const {
-    data
-  } = React.useContext(_PolarContext.PolarContext);
-  return data;
-};
-exports.usePolarContext = usePolarContext;
+// 'use client';
+// import * as React from 'react';
+// import { PolarContext } from './PolarContext';
+// import { PolarContextState } from './Polar.types';
+
+// export const usePolarContext = (): PolarContextState => {
+//   const { data } = React.useContext(PolarContext);
+//   return data;
+// };

package/node/context/index.js

@@ -2,34 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-var _exportNames = {
-  ZAxisContextProvider: true,
-  ChartDataProvider: true
-};
-Object.defineProperty(exports, "ChartDataProvider", {
-  enumerable: true,
-  get: function () {
-    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;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _HighlightedProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _HighlightedProvider[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;
@@ -112,4 +138,41 @@ Object.keys(_useSvgRef).forEach(function (key) {
     }
   });
 });
-var _useSeries = require("./useSeries");
+var _useItemHighlighted = require("./useItemHighlighted");
+Object.keys(_useItemHighlighted).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useItemHighlighted[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemHighlighted[key];
+    }
+  });
+});
+var _useItemHighlightedGetter = require("./useItemHighlightedGetter");
+Object.keys(_useItemHighlightedGetter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useItemHighlightedGetter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemHighlightedGetter[key];
+    }
+  });
+});
+var _useSeries = require("./useSeries");
+var _useLegend = require("./useLegend");
+Object.keys(_useLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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

@@ -1,169 +1 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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/useStore");
-function getAsANumber(value) {
-  return value instanceof Date ? value.getTime() : value;
-}
-const useAxisEvents = disableAxisListener => {
-  const svgRef = (0, _useSvgRef.useSvgRef)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const store = (0, _useStore.useStore)(disableAxisListener);
-  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 || disableAxisListener || !store) {
-      return () => {};
-    }
-    function getNewAxisState(axisConfig, mouseValue) {
-      const {
-        scale,
-        data: axisData,
-        reverse
-      } = axisConfig;
-      if (!(0, _isBandScale.isBandScale)(scale)) {
-        const value = scale.invert(mouseValue);
-        if (axisData === undefined) {
-          return {
-            value,
-            index: -1
-          };
-        }
-        const valueAsNumber = getAsANumber(value);
-        const closestIndex = axisData?.findIndex((pointValue, index) => {
-          const v = getAsANumber(pointValue);
-          if (v > valueAsNumber) {
-            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
-              return true;
-            }
-          }
-          if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
-              return true;
-            }
-          }
-          return false;
-        });
-        return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
-          index: closestIndex
-        };
-      }
-      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
-      if (dataIndex < 0 || dataIndex >= axisData.length) {
-        return null;
-      }
-      if (reverse) {
-        const reverseIndex = axisData.length - 1 - dataIndex;
-        return {
-          index: reverseIndex,
-          value: axisData[reverseIndex]
-        };
-      }
-      return {
-        index: dataIndex,
-        value: axisData[dataIndex]
-      };
-    }
-    const handleOut = () => {
-      mousePosition.current = {
-        isInChart: false,
-        x: -1,
-        y: -1
-      };
-      store.update(prev => (0, _extends2.default)({}, prev, {
-        interaction: {
-          item: null,
-          axis: {
-            x: null,
-            y: null
-          }
-        }
-      }));
-    };
-    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 (!drawingArea.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;
-      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      store.update(prev => (0, _extends2.default)({}, prev, {
-        interaction: (0, _extends2.default)({}, prev.interaction, {
-          axis: (0, _extends2.default)({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
-            x: newStateX
-          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
-            y: newStateY
-          } : {})
-        })
-      }));
-    };
-    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, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
-};
-exports.useAxisEvents = useAxisEvents;
+"use strict";