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

package/modern/context/PolarProvider/PolarProvider.js

@@ -1,49 +1,61 @@
 'use client';
 
-import * as React from 'react';
-import { computeAxisValue } from "../../internals/computeAxisValue.js";
-import { useDrawingArea } from "../../hooks/useDrawingArea.js";
-import { useSeries } from "../../hooks/useSeries.js";
-import { PolarContext } from "./PolarContext.js";
-import { useRadiusExtremumGetter } from "../PluginProvider/useRadiusExtremumGetter.js";
-import { useRotationExtremumGetter } from "../PluginProvider/useRotationExtremumGetter.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function PolarProvider(props) {
-  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 /*#__PURE__*/_jsx(PolarContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-export { PolarProvider };
+// '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/modern/context/PolarProvider/getAxisExtremum.js

@@ -1,20 +1,48 @@
-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)];
-};
-export 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;
-};
+// 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;
+// };

package/modern/context/PolarProvider/usePolarContext.js

@@ -1,10 +1,11 @@
 'use client';
 
-import * as React from 'react';
-import { PolarContext } from "./PolarContext.js";
-export const usePolarContext = () => {
-  const {
-    data
-  } = React.useContext(PolarContext);
-  return data;
-};
+// '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/modern/context/index.js

@@ -1,3 +1 @@
-export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
-export { ChartDataProvider } from "./ChartDataProvider/index.js";
+export {};

package/modern/hooks/index.js

@@ -2,6 +2,11 @@ export * from "./useDrawingArea.js";
 export * from "./useChartId.js";
 export * from "./useScale.js";
 export * from "./useAxis.js";
+export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
-export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
+export * from "./useItemHighlighted.js";
+export * from "./useItemHighlightedGetter.js";
+export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
+export * from "./useLegend.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";

package/modern/hooks/useAxis.js

@@ -1,19 +1,45 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-export function useXAxis(identifier) {
+import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+export function useXAxes() {
+  const store = useStore();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  };
+}
+export function useYAxes() {
+  const store = useStore();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+export function useXAxis(identifier) {
+  const store = useStore();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 export function useYAxis(identifier) {
+  const store = useStore();
   const {
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/modern/hooks/useAxisEvents.js

@@ -2,25 +2,29 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
-import { useDrawingArea } from "./useDrawingArea.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 export const useAxisEvents = disableAxisListener => {
   const svgRef = useSvgRef();
-  const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
-  const store = useStore(disableAxisListener);
+  } = useYAxes();
+  const store = useStore();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -106,7 +110,7 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = 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) {
@@ -157,5 +161,5 @@ export 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]);
 };

package/modern/hooks/useChartGradientId.js

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { useChartId } from "./useChartId.js";
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdBuilder() {
+  const chartId = useChartId();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdObjectBoundBuilder() {
+  const chartId = 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
+ */
+export 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
+ */
+export function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}

package/modern/hooks/useChartId.js

@@ -1,10 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 export function useChartId() {
-  const {
-    chartId
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = useStore();
+  return useSelector(store, selectorChartId);
 }

package/modern/hooks/useColorScale.js

@@ -1,13 +1,12 @@
 'use client';
 
-import * as React from 'react';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
+import { useZAxes } from "./useZAxis.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  } = useXAxes();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -15,7 +14,7 @@ export function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }
@@ -23,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxes();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/modern/hooks/useDrawingArea.js

@@ -1,24 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 export function useDrawingArea() {
-  const {
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => ({
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  }), [height, left, top, width, bottom, right, isPointInside]);
+  const store = useStore();
+  return useSelector(store, selectorChartDrawingArea);
 }

package/modern/hooks/useInteractionItemProps.js

@@ -1,14 +1,10 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { useHighlighted } from "../context/index.js";
-import { useStore } from "../internals/useStore.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export const useInteractionItemProps = skip => {
-  const store = useStore();
   const {
-    setHighlighted,
-    clearHighlighted
-  } = useHighlighted();
+    instance
+  } = useChartContext();
   if (skip) {
     return () => ({});
   }
@@ -19,31 +15,18 @@ export const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      store.update(prev => _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          item: data
-        })
-      }));
-      setHighlighted({
+      instance.setItemInteraction(data);
+      instance.setHighlight({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      store.update(prev => {
-        const prevItem = prev.interaction.item;
-        if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {
-          // The item is already something else, no need to clean it.
-          return prev;
-        }
-        return _extends({}, prev, {
-          interaction: _extends({}, prev.interaction, {
-            item: null
-          })
-        });
-      });
-      clearHighlighted();
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      instance.removeItemInteraction(data);
+      instance.clearHighlight();
     };
     return {
       onPointerEnter,

package/modern/hooks/useItemHighlighted.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useItemHighlightedGetter` hook instead.
+ *
+ * @param {HighlightItemData | null} item is the item to check
+ * @returns {UseItemHighlightedReturnType} the state of the item
+ */
+export function useItemHighlighted(item) {
+  const store = useStore();
+  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
+  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  return {
+    isHighlighted,
+    isFaded: !isHighlighted && isFaded
+  };
+}

package/modern/hooks/useItemHighlightedGetter.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js";
+
+/**
+ * A hook to check the highlighted state of multiple items.
+ * If you're interested by a single one, consider using `useItemHighlighted`.
+ *
+ * Warning: highlighted and faded can both be true at the same time.
+ * We recommend to first test if item is highlighted: `const faded = !highlighted && isFaded(item)`
+ * @returns {{ isHighlighted, isFaded }} callbacks to get the state of the item.
+ */
+export function useItemHighlightedGetter() {
+  const store = useStore();
+  const isHighlighted = useSelector(store, selectorChartsIsHighlightedCallback);
+  const isFaded = useSelector(store, selectorChartsIsFadedCallback);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/modern/hooks/useLegend.js

@@ -0,0 +1,30 @@
+'use client';
+
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
+import { useSeries } from "./useSeries.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+function getSeriesToDisplay(series, seriesConfig) {
+  return Object.keys(series).flatMap(seriesType => {
+    const getter = seriesConfig[seriesType].legendGetter;
+    return getter === undefined ? [] : getter(series[seriesType]);
+  });
+}
+
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+export function useLegend() {
+  const series = useSeries();
+  const store = useStore();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  return {
+    items: getSeriesToDisplay(series, seriesConfig)
+  };
+}

package/modern/hooks/useSeries.js

@@ -1,8 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { SeriesContext } from "../context/SeriesProvider/index.js";
-
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
@@ -10,14 +11,8 @@ import { SeriesContext } from "../context/SeriesProvider/index.js";
  * @returns FormattedSeries series
  */
 export function useSeries() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(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 = useStore();
+  return useSelector(store, selectorChartSeriesProcessed);
 }
 
 /**

package/modern/hooks/useSvgRef.js

@@ -1,14 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { SvgRefContext } from "../context/SvgRefProvider/index.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgRefContext);
-  if (!isInitialized) {
+  const context = useChartContext();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data.svgRef;
+  return context.svgRef;
 }