@mui/x-charts 7.13.0 → 7.15.0

package/models/index.js

@@ -1,38 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _seriesType = require("./seriesType");
-Object.keys(_seriesType).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _seriesType[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _seriesType[key];
-    }
-  });
-});
-var _layout = require("./layout");
-Object.keys(_layout).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _layout[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _layout[key];
-    }
-  });
-});
-var _stacking = require("./stacking");
-Object.keys(_stacking).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _stacking[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _stacking[key];
-    }
-  });
-});
+export * from './seriesType';
+export * from './layout';
+export * from './stacking';
+export {};

package/models/layout.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/models/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/models/index.js",
   "types": "./index.d.ts"
 }

package/models/seriesType/bar.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/common.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/config.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/index.js

@@ -1,71 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  isDefaultizedBarSeries: true,
-  isBarSeries: true
-};
-exports.isBarSeries = isBarSeries;
-exports.isDefaultizedBarSeries = isDefaultizedBarSeries;
-var _line = require("./line");
-Object.keys(_line).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _line[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _line[key];
-    }
-  });
-});
-var _bar = require("./bar");
-Object.keys(_bar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _bar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _bar[key];
-    }
-  });
-});
-var _scatter = require("./scatter");
-Object.keys(_scatter).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _scatter[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _scatter[key];
-    }
-  });
-});
-var _pie = require("./pie");
-Object.keys(_pie).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _pie[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _pie[key];
-    }
-  });
-});
 // Series definition
 
 // item identifier
 
+export * from './line';
+export * from './bar';
+export * from './scatter';
+export * from './pie';
 // Helpers
 
-function isDefaultizedBarSeries(series) {
+export function isDefaultizedBarSeries(series) {
   return series.type === 'bar';
 }
-function isBarSeries(series) {
+export function isBarSeries(series) {
   return series.type === 'bar';
 }

package/models/seriesType/line.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/pie.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/scatter.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/stacking.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/z-axis.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/modern/BarChart/BarChart.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
@@ -24,7 +25,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiBarChart'
+  });
   const {
     chartContainerProps,
     barPlotProps,

package/modern/BarChart/BarLabel/BarLabel.js

@@ -29,12 +29,12 @@ export const BarLabelComponent = styled(animated.text, {
     opacity: 0.3
   }
 }));
-function BarLabel(props) {
-  const themeProps = useThemeProps({
-    props,
+function BarLabel(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiBarLabel'
   });
-  const otherProps = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps));
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {

package/modern/BarChart/BarPlot.js

@@ -191,6 +191,7 @@ function BarPlot(props) {
       barLabel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
     from: leaveStyle,
@@ -199,7 +200,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  const maskTransition = useTransition(masksData, {
+  const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: v => v.id,
     from: leaveStyle,
     leave: leaveStyle,
@@ -208,7 +209,7 @@ function BarPlot(props) {
     immediate: skipAnimation
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [maskTransition((style, {
+    children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,
       hasNegative,
@@ -242,7 +243,7 @@ function BarPlot(props) {
         }),
         style: style
       }));
-      if (!borderRadius || borderRadius <= 0) {
+      if (withoutBorderRadius) {
         return barElement;
       }
       return /*#__PURE__*/_jsx("g", {

package/modern/BarChart/extremums.js

@@ -1,22 +1,57 @@
+const createResult = (data, direction) => {
+  if (direction === 'x') {
+    return {
+      x: data,
+      y: null
+    };
+  }
+  return {
+    x: null,
+    y: data
+  };
+};
 const getBaseExtremum = params => {
   const {
-    axis
+    axis,
+    getFilters,
+    isDefaultAxis
   } = params;
-  const minX = Math.min(...(axis.data ?? []));
-  const maxX = Math.max(...(axis.data ?? []));
+  const filter = getFilters?.({
+    currentAxisId: axis.id,
+    isDefaultAxis
+  });
+  const data = filter ? axis.data?.filter((_, i) => filter({
+    x: null,
+    y: null
+  }, i)) : axis.data;
+  const minX = Math.min(...(data ?? []));
+  const maxX = Math.max(...(data ?? []));
   return [minX, maxX];
 };
-const getValueExtremum = params => {
+const getValueExtremum = direction => params => {
   const {
     series,
     axis,
+    getFilters,
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
     const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
-    const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => {
+    const {
+      stackedData
+    } = series[seriesId];
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
+      if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
+        return seriesAcc;
+      }
       return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
     }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
@@ -27,7 +62,7 @@ export const getExtremumX = params => {
   // Don't think it's a problem for now
   const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
   if (isHorizontal) {
-    return getValueExtremum(params);
+    return getValueExtremum('x')(params);
   }
   return getBaseExtremum(params);
 };
@@ -36,5 +71,5 @@ export const getExtremumY = params => {
   if (isHorizontal) {
     return getBaseExtremum(params);
   }
-  return getValueExtremum(params);
+  return getValueExtremum('y')(params);
 };

package/modern/ChartContainer/useChartContainerProps.js

@@ -30,7 +30,7 @@ export const useChartContainerProps = (props, ref) => {
   const chartSurfaceRef = useForkRef(ref, svgRef);
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
-  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis);
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
   const drawingProviderProps = {
     width,
     height,

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-const defaultizeAxis = (inAxis, axisName) => {
+const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({
     id: `defaultized-${axisName}-axis-${index}`
@@ -10,10 +10,21 @@ const defaultizeAxis = (inAxis, axisName) => {
   }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
     id: DEFAULT_AXIS_KEY,
     scaleType: 'linear'
-  }] : [])];
+  }] : [])].map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
 };
-export const useDefaultizeAxis = (inXAxis, inYAxis) => {
-  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
-  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+export const useDefaultizeAxis = (inXAxis, inYAxis, dataset) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
   return [xAxis, yAxis];
 };

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -25,16 +25,30 @@ export const ChartsAxisHighlightPath = styled('path', {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
-  ownerState,
   theme
-}) => _extends({
-  pointerEvents: 'none'
-}, ownerState.axisHighlight === 'band' && {
-  fill: theme.palette.mode === 'light' ? 'gray' : 'white',
-  fillOpacity: 0.1
-}, ownerState.axisHighlight === 'line' && {
-  strokeDasharray: '5 2',
-  stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff'
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: _extends({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: _extends({
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
 }));
 /**
  * Demos:

package/modern/ChartsGrid/ChartsGrid.js

@@ -8,6 +8,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
@@ -48,23 +49,24 @@ const useUtilityClasses = ({
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-function ChartsGrid(props) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsGrid(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsGrid'
   });
+  const drawingArea = useDrawingArea();
   const {
       vertical,
       horizontal
-    } = themeProps,
-    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = useCartesianContext();
-  const classes = useUtilityClasses(themeProps);
+  const classes = useUtilityClasses(props);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {
@@ -93,8 +95,8 @@ function ChartsGrid(props) {
       formattedValue,
       offset
     }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: yScale.range()[0],
-      y2: yScale.range()[1],
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
       x1: offset,
       x2: offset,
       className: classes.verticalLine
@@ -104,8 +106,8 @@ function ChartsGrid(props) {
     }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
       className: classes.horizontalLine
     }, `horizontal-${formattedValue}`))]
   }));

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
 import { useChartId, useDrawingArea } from '../hooks';
 import { getScale } from '../internals/getScale';
@@ -187,6 +188,7 @@ const defaultLabelFormatter = ({
 }) => formattedValue;
 function ContinuousColorLegend(props) {
   const theme = useTheme();
+  const isRtl = useRtl();
   const {
     id: idProp,
     minLabel = defaultLabelFormatter,
@@ -204,7 +206,6 @@ function ContinuousColorLegend(props) {
   } = props;
   const chartId = useChartId();
   const id = idProp ?? `gradient-legend-${chartId}`;
-  const isRTL = theme.direction === 'rtl';
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -255,7 +256,7 @@ function ContinuousColorLegend(props) {
 
   // Place bar and texts
 
-  const barBox = direction === 'column' || isRTL && direction === 'row' ? {
+  const barBox = direction === 'column' || isRtl && direction === 'row' ? {
     width: thickness,
     height: size
   } : {

package/modern/ChartsLegend/LegendPerItem.js

@@ -4,6 +4,7 @@ const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { ChartsText } from '../ChartsText';
 import { getWordsByLines } from '../internals/getWordsByLines';
 import { legendItemPlacements } from './legendItemsPlacement';
@@ -54,7 +55,7 @@ export function LegendPerItem(props) {
     labelStyle: inLabelStyle
   } = props;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -121,10 +122,10 @@ export function LegendPerItem(props) {
         positionY
       }) => /*#__PURE__*/_jsxs("g", {
         className: classes?.series,
-        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
         children: [/*#__PURE__*/_jsx("rect", {
           className: classes?.mark,
-          x: isRTL ? -itemMarkWidth : 0,
+          x: isRtl ? -itemMarkWidth : 0,
           y: -itemMarkHeight / 2,
           width: itemMarkWidth,
           height: itemMarkHeight,
@@ -132,7 +133,7 @@ export function LegendPerItem(props) {
         }), /*#__PURE__*/_jsx(ChartsText, {
           style: labelStyle,
           text: label,
-          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
           y: 0
         })]
       }, id))

package/{esm → modern/ChartsSurface}/ChartsSurface.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useAxisEvents } from './hooks/useAxisEvents';
+import { useAxisEvents } from '../hooks/useAxisEvents';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -14,7 +14,11 @@ const ChartChartsSurfaceStyles = styled('svg', {
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
-const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChartsSurface'
+  });
   const {
       children,
       width,

package/modern/ChartsSurface/index.js

@@ -0,0 +1 @@
+export * from './ChartsSurface';

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -19,7 +19,7 @@ function ChartsAxisTooltipContent(props) {
     sx,
     classes
   } = props;
-  const isXaxis = (axisData.x && axisData.x.index) !== undefined;
+  const isXaxis = axisData.x && axisData.x.index !== -1;
   const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
   const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
   const {

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -150,7 +150,8 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height
+    height,
+    isPointInside
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
@@ -225,8 +226,18 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = offset >= left - 1 && offset <= left + width + 1;
-      const showTickLabel = offset + xTickLabel >= left - 1 && offset + xTickLabel <= left + width + 1;
+      const showTick = isPointInside({
+        x: offset,
+        y: -1
+      }, {
+        direction: 'x'
+      });
+      const showTickLabel = isPointInside({
+        x: offset + xTickLabel,
+        y: -1
+      }, {
+        direction: 'x'
+      });
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,