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

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -1,5 +1,22 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    paper: ['paper'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
+    markCell: ['markCell'],
+    labelCell: ['labelCell'],
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
+  };
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
+};

package/modern/ChartsTooltip/index.js

@@ -1,10 +1,10 @@
 export * from "./ChartsTooltip.js";
-export * from "./chartsTooltipClasses.js";
+export * from "./ChartsTooltipContainer.js";
+export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.js";
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
-export * from "./DefaultChartsAxisTooltipContent.js";
-export * from "./DefaultChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
 export * from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
-export { useMouseTracker } from "./utils.js";
+export { useMouseTracker } from "./utils.js";
+export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -1,34 +1,33 @@
 'use client';
 
-import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useSeries } from "../hooks/useSeries.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
+import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export function useAxisTooltip() {
-  const {
-    axis
-  } = React.useContext(InteractionContext);
+  const defaultXAxis = useXAxis();
+  const defaultYAxis = useYAxis();
+  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
+  const store = useStore();
+  const axisData = useSelector(store, xAxisHasData ? selectorChartsInteractionXAxis : selectorChartsInteractionYAxis);
   const series = useSeries();
   const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = useCartesianContext();
+    xAxis
+  } = useXAxes();
+  const {
+    yAxis
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxes();
   const colorProcessors = useColorProcessor();
-
-  // By default use the x-axis
-  const isXaxis = axis.x !== null && axis.x.index !== -1;
-  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
   if (axisData === null) {
     return null;
   }
@@ -36,8 +35,8 @@ export function useAxisTooltip() {
     index: dataIndex,
     value: axisValue
   } = axisData;
-  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
+  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
   const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -47,14 +46,14 @@ export function useAxisTooltip() {
       const seriesToAdd = seriesOfType.series[seriesId];
       const providedXAxisId = seriesToAdd.xAxisId;
       const providedYAxisId = seriesToAdd.yAxisId;
-      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
 
       // Test if the series uses the default axis
       if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? xAxisIds[0];
-        const yAxisId = providedYAxisId ?? yAxisIds[0];
-        const zAxisId = seriesToAdd.zAxisId ?? zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const xAxisId = providedXAxisId ?? defaultXAxis.id;
+        const yAxisId = providedYAxisId ?? defaultYAxis.id;
+        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex
@@ -65,18 +64,22 @@ export function useAxisTooltip() {
           color,
           value,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
         };
       }
       return undefined;
     });
-  }).filter(item => item != null);
+  }).filter(function truthy(item) {
+    return Boolean(item);
+  });
   const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
     location: 'tooltip'
   });
   return {
-    identifier: axis,
+    axisDirection: xAxisHasData ? 'x' : 'y',
+    dataIndex,
     seriesItems: relevantSeries,
     axisValue,
     axisFormattedValue

package/modern/ChartsTooltip/useItemTooltip.js

@@ -1,64 +1,40 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useSeries } from "../hooks/useSeries.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
-import { getLabel } from "../internals/getLabel.js";
+import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 export function useItemTooltip() {
-  const {
-    item
-  } = React.useContext(InteractionContext);
+  const store = useStore();
+  const identifier = useSelector(store, selectorChartsInteractionItem);
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
   const series = useSeries();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
-  const colorProcessors = useColorProcessor();
+  } = useZAxes();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!item || item.dataIndex === undefined) {
+  if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
-  const itemSeries = series[item.type].series[item.seriesId];
-  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  if (itemSeries.type === 'pie') {
-    const point = itemSeries.data[item.dataIndex];
-    const label = getLabel(point.label, 'tooltip');
-    const value = _extends({}, point, {
-      label
-    });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
-      dataIndex: item.dataIndex
-    });
-    return {
-      identifier: item,
-      color: getColor(item.dataIndex),
-      label,
-      value,
-      formattedValue
-    };
-  }
-  const label = getLabel(itemSeries.label, 'tooltip');
-  const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
-    dataIndex: item.dataIndex
+  const itemSeries = series[identifier.type].series[identifier.seriesId];
+  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  return seriesConfig[itemSeries.type].tooltipGetter({
+    series: itemSeries,
+    getColor,
+    identifier
   });
-  return {
-    identifier: item,
-    color: getColor(item.dataIndex),
-    label,
-    value,
-    formattedValue
-  };
 }

package/modern/ChartsTooltip/utils.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useSvgRef } from "../hooks/index.js";
 /**
@@ -74,14 +76,6 @@ export function usePointerType() {
   }, [svgRef]);
   return pointerType;
 }
-export function getTooltipHasData(trigger, displayedData) {
-  if (trigger === 'item') {
-    return displayedData !== null;
-  }
-  const hasAxisXData = displayedData.x !== null;
-  const hasAxisYData = displayedData.y !== null;
-  return hasAxisXData || hasAxisYData;
-}
 export function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,16 +1,18 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { InteractionContext } from "../context/InteractionProvider.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useStore } from "../internals/store/useStore.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
-import { useDrawingArea, useSvgRef } from "../hooks/index.js";
-import { useHighlighted } from "../context/index.js";
 import { useScatterSeries } from "../hooks/useSeries.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -19,15 +21,18 @@ function ChartsVoronoiHandler(props) {
   } = props;
   const svgRef = useSvgRef();
   const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
-  const {
-    dispatch
-  } = React.useContext(InteractionContext);
+  } = useYAxes();
+  const store = useStore();
   const {
     series,
     seriesOrder
@@ -35,24 +40,22 @@ function ChartsVoronoiHandler(props) {
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
   const lastFind = React.useRef(undefined);
-  const {
-    setHighlighted,
-    clearHighlighted
-  } = useHighlighted();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
-    dispatch({
-      type: 'updateVoronoiUsage',
-      useVoronoiInteraction: true
-    });
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        useVoronoiInteraction: true
+      })
+    }));
     return () => {
-      dispatch({
-        type: 'updateVoronoiUsage',
-        useVoronoiInteraction: false
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          useVoronoiInteraction: false
+        })
+      }));
     };
-  }, [dispatch]);
+  }, [store]);
   useEnhancedEffect(() => {
     // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
 
@@ -78,7 +81,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -98,16 +101,16 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new Delaunay(points);
     lastFind.current = undefined;
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -141,43 +144,55 @@ function ChartsVoronoiHandler(props) {
       };
     }
     const handleMouseLeave = () => {
-      dispatch({
-        type: 'exitChart'
-      });
-      clearHighlighted();
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      }));
+      instance.clearHighlight();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
       if (closestPoint === 'outside-chart') {
-        dispatch({
-          type: 'exitChart'
-        });
-        clearHighlighted();
+        store.update(prev => _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            axis: {
+              x: null,
+              y: null
+            },
+            item: null
+          })
+        }));
+        instance.clearHighlight();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
-        dispatch({
-          type: 'leaveItem',
-          data: {
-            type: 'scatter'
-          }
-        });
-        clearHighlighted();
+        store.update(prev => _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            item: null
+          })
+        }));
+        instance.clearHighlight();
         return;
       }
       const {
         seriesId,
         dataIndex
       } = closestPoint;
-      dispatch({
-        type: 'enterItem',
-        data: {
-          type: 'scatter',
-          seriesId,
-          dataIndex
-        }
-      });
-      setHighlighted({
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        })
+      }));
+      instance.setHighlight({
         seriesId,
         dataIndex
       });
@@ -209,7 +224,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, drawingArea, store, instance]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
@@ -19,6 +18,8 @@ import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { useXAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -114,9 +115,9 @@ const defaultProps = {
  */
 function ChartsXAxis(inProps) {
   const {
-    xAxisIds,
-    xAxis
-  } = useCartesianContext();
+    xAxis,
+    xAxisIds
+  } = useXAxes();
   const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
       scale: xScale,
@@ -137,8 +138,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -157,9 +156,11 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
@@ -171,9 +172,9 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({
+        fontSize: 12,
         textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize ?? 12
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -202,7 +203,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -233,13 +234,13 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = isPointInside({
+      const showTick = instance.isPointInside({
         x: offset,
         y: -1
       }, {
         direction: 'x'
       });
-      const showTickLabel = isPointInside({
+      const showTickLabel = instance.isPointInside({
         x: offset + xTickLabel,
         y: -1
       }, {
@@ -299,12 +300,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The label of the axis.
    */
   label: PropTypes.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: PropTypes.number,
   /**
    * The style applied to the axis label.
    */
@@ -329,12 +324,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   stroke: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: PropTypes.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be: