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

package/node/LineChart/MarkPlot.js

@@ -23,7 +23,7 @@ var _MarkElement = require("./MarkElement");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 /**
  * Demos:
  *
@@ -39,8 +39,7 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick,
-      experimentalRendering
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
@@ -57,7 +56,6 @@ function MarkPlot(props) {
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
-  const Mark = slots?.mark ?? (experimentalRendering ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -77,7 +75,8 @@ function MarkPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          showMark = true
+          showMark = true,
+          shape = 'circle'
         } = series[seriesId];
         if (showMark === false) {
           return null;
@@ -91,6 +90,7 @@ function MarkPlot(props) {
         const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+        const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -138,7 +138,7 @@ function MarkPlot(props) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
               id: seriesId,
               dataIndex: index,
-              shape: "circle",
+              shape: shape,
               color: colorGetter(index),
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
@@ -161,12 +161,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true` the mark element will only be able to render circle.
-   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-   * @default false
-   */
-  experimentalRendering: _propTypes.default.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/node/LineChart/plugin.js

@@ -8,9 +8,11 @@ exports.plugin = void 0;
 var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
 const plugin = exports.plugin = {
   colorProcessor: _getColor.default,
   seriesProcessor: _formatter.default,
+  legendGetter: _legend.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY
 };

package/node/LineChart/useLineChartProps.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _calculateMargins = require("../internals/calculateMargins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -49,8 +49,7 @@ const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -111,8 +110,7 @@ const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,

package/node/PieChart/PieChart.js

@@ -17,7 +17,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsSurface = require("../ChartsSurface");
-var _context = require("../context");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -82,7 +82,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     skipAnimation
   }), ref);
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',

package/node/PieChart/plugin.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.plugin = void 0;
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
 const plugin = exports.plugin = {
   colorProcessor: _getColor.default,
-  seriesProcessor: _formatter.default
+  seriesProcessor: _formatter.default,
+  legendGetter: _legend.default
 };

package/node/ScatterChart/ScatterChart.js

@@ -21,7 +21,7 @@ var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandle
 var _ChartsGrid = require("../ChartsGrid");
 var _useScatterChartProps = require("./useScatterChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-var _context = require("../context");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -57,7 +57,7 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {

package/node/ScatterChart/plugin.js

@@ -8,9 +8,11 @@ exports.plugin = void 0;
 var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
 const plugin = exports.plugin = {
   seriesProcessor: _formatter.default,
   colorProcessor: _getColor.default,
+  legendGetter: _legend.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY
 };

package/node/context/AnimationProvider/AnimationProvider.js

@@ -23,7 +23,7 @@ function AnimationProvider(props) {
 
   // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
   // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
-  const [skipAnimation, setSkipAnimation] = React.useState(isAnimationDisabledEnvironment || undefined);
+  const [skipAnimation, setSkipAnimation] = React.useState(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
   (0, _web.useIsomorphicLayoutEffect)(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;

package/node/context/index.js

@@ -3,19 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  ChartDataProvider: true
-};
-Object.defineProperty(exports, "ChartDataProvider", {
-  enumerable: true,
-  get: function () {
-    return _ChartDataProvider.ChartDataProvider;
-  }
-});
 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,
@@ -23,5 +13,4 @@ Object.keys(_HighlightedProvider).forEach(function (key) {
       return _HighlightedProvider[key];
     }
   });
-});
-var _ChartDataProvider = require("./ChartDataProvider");
+});

package/node/hooks/useLegend.js

@@ -1,25 +1,17 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLegend = useLegend;
-var _legend = _interopRequireDefault(require("../BarChart/legend"));
-var _legend2 = _interopRequireDefault(require("../ScatterChart/legend"));
-var _legend3 = _interopRequireDefault(require("../LineChart/legend"));
-var _legend4 = _interopRequireDefault(require("../PieChart/legend"));
+var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
 var _useSeries = require("./useSeries");
-const legendGetter = {
-  bar: _legend.default,
-  scatter: _legend2.default,
-  line: _legend3.default,
-  pie: _legend4.default
-};
-function getSeriesToDisplay(series) {
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+function getSeriesToDisplay(series, seriesConfig) {
   return Object.keys(series).flatMap(seriesType => {
-    const getter = legendGetter[seriesType];
+    const getter = seriesConfig[seriesType].legendGetter;
     return getter === undefined ? [] : getter(series[seriesType]);
   });
 }
@@ -35,7 +27,9 @@ function getSeriesToDisplay(series) {
  */
 function useLegend() {
   const series = (0, _useSeries.useSeries)();
+  const store = (0, _useStore.useStore)();
+  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
   return {
-    items: getSeriesToDisplay(series)
+    items: getSeriesToDisplay(series, seriesConfig)
   };
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.8
+ * @mui/x-charts v8.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -295,4 +295,15 @@ Object.keys(_ChartContainer).forEach(function (key) {
       return _ChartContainer[key];
     }
   });
+});
+var _ChartDataProvider = require("./ChartDataProvider");
+Object.keys(_ChartDataProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartDataProvider[key];
+    }
+  });
 });

package/node/internals/index.js

@@ -115,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;
@@ -333,18 +333,6 @@ Object.keys(_AnimationProvider).forEach(function (key) {
   });
 });
 var _getAxisExtremum = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum");
-var _ChartDataProvider = require("../context/ChartDataProvider");
-Object.keys(_ChartDataProvider).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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProvider[key];
-    }
-  });
-});
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -20,6 +20,18 @@ Object.defineProperty(exports, "useChartCartesianAxis", {
   }
 });
 var _useChartCartesianAxis = require("./useChartCartesianAxis");
+var _useChartCartesianAxis2 = require("./useChartCartesianAxis.selectors");
+Object.keys(_useChartCartesianAxis2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianAxis2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianAxis2[key];
+    }
+  });
+});
 var _defaultizeAxis = require("./defaultizeAxis");
 var _computeAxisValue = require("./computeAxisValue");
 Object.keys(_computeAxisValue).forEach(function (key) {

package/node/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js

@@ -30,7 +30,7 @@ const selectorChartRawYAxis = exports.selectorChartRawYAxis = (0, _selectors.cre
  */
 
 const selectorChartZoomMap = (0, _selectors.createSelector)(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
-const selectorChartZoomOptionsLookup = (0, _selectors.createSelector)(selectorChartZoomState, zoom => zoom?.optionsLookup);
+const selectorChartZoomOptionsLookup = (0, _selectors.createSelector)(selectorChartZoomState, () => undefined);
 const selectorChartXFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup, _useChartSeries.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)({
   zoomMap,
   zoomOptions,
@@ -51,6 +51,7 @@ const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorCha
     return undefined;
   }
   const xFilters = xAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
     const filter = xMapper(axis, index);
     if (filter !== null) {
       acc[axis.id] = filter;
@@ -58,6 +59,7 @@ const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorCha
     return acc;
   }, {});
   const yFilters = yAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
     const filter = yMapper(axis, index);
     if (filter !== null) {
       acc[axis.id] = filter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0-alpha.8",
+  "version": "8.0.0-alpha.9",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -38,8 +38,8 @@
     "react-is": "^18.3.1 || ^19.0.0",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-charts-vendor": "8.0.0-alpha.8",
-    "@mui/x-internals": "8.0.0-alpha.8"
+    "@mui/x-internals": "8.0.0-alpha.9",
+    "@mui/x-charts-vendor": "8.0.0-alpha.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/context/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -1,13 +0,0 @@
-import type { ChartDataProviderProps } from './ChartDataProvider';
-import { HighlightedProviderProps } from '../HighlightedProvider';
-import { AnimationProviderProps } from '../AnimationProvider';
-import { ChartProviderProps } from '../ChartProvider';
-import { ChartAnyPluginSignature } from '../../internals/plugins/models';
-import { ChartSeriesType } from '../../models/seriesType/config';
-import { AllPluginSignatures } from '../../internals/plugins/allPlugins';
-export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = keyof import("../../internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>) => {
-    children: import("react").ReactNode;
-    highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
-    animationProviderProps: Omit<AnimationProviderProps, "children">;
-    chartProviderProps: Omit<ChartProviderProps<TSeries, TSignatures>, "children">;
-};