@mui/x-charts 9.2.0 → 9.4.0

package/BarChart/BarChart.js

@@ -172,11 +172,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
+    type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -196,11 +196,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -231,11 +231,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
+    type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   })]).isRequired),
   /**
    * The direction of the bar elements.
@@ -365,11 +365,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/BarChart/BarChart.mjs

@@ -165,11 +165,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar'])
+    type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    type: PropTypes.oneOf(['bar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -189,11 +189,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -224,11 +224,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar'])
+    type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    type: PropTypes.oneOf(['bar'])
   })]).isRequired),
   /**
    * The direction of the bar elements.
@@ -358,11 +358,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/BarChart/BarElement.d.mts

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type BarElementOwnerState } from "./barClasses.mjs";
 import { type BarProps } from "./AnimatedBarElement.mjs";
+import type { BarPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface BarElementSlots {
   /**
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.JSXElementConstructor<BarProps>;
+  bar?: React.JSXElementConstructor<BarProps & BarPropsOverrides>;
 }
 export interface BarElementSlotProps {
-  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  bar?: SlotComponentPropsFromProps<BarProps, BarPropsOverrides, BarElementOwnerState>;
 }
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted' | 'isFocused'> & Omit<React.SVGProps<SVGRectElement>, 'ref'> & {
   /**

package/BarChart/BarElement.d.ts

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type BarElementOwnerState } from "./barClasses.js";
 import { type BarProps } from "./AnimatedBarElement.js";
+import type { BarPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface BarElementSlots {
   /**
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.JSXElementConstructor<BarProps>;
+  bar?: React.JSXElementConstructor<BarProps & BarPropsOverrides>;
 }
 export interface BarElementSlotProps {
-  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  bar?: SlotComponentPropsFromProps<BarProps, BarPropsOverrides, BarElementOwnerState>;
 }
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted' | 'isFocused'> & Omit<React.SVGProps<SVGRectElement>, 'ref'> & {
   /**

package/BarChart/BarLabel/BarLabelItem.d.mts

@@ -3,15 +3,16 @@ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type BarLabelOwnerState, type BarItem, type BarLabelContext } from "./BarLabel.types.mjs";
 import { type BarLabelProps } from "./BarLabel.mjs";
 import { type BarValueType } from "../../models/index.mjs";
+import type { BarLabelPropsOverrides } from "../../models/chartsSlotsComponentsProps.mjs";
 export interface BarLabelSlots {
   /**
    * The component that renders the bar label.
    * @default BarLabel
    */
-  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  barLabel?: React.JSXElementConstructor<BarLabelProps & BarLabelPropsOverrides>;
 }
 export interface BarLabelSlotProps {
-  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, BarLabelPropsOverrides, BarLabelOwnerState>;
 }
 export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
   /**

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -3,15 +3,16 @@ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type BarLabelOwnerState, type BarItem, type BarLabelContext } from "./BarLabel.types.js";
 import { type BarLabelProps } from "./BarLabel.js";
 import { type BarValueType } from "../../models/index.js";
+import type { BarLabelPropsOverrides } from "../../models/chartsSlotsComponentsProps.js";
 export interface BarLabelSlots {
   /**
    * The component that renders the bar label.
    * @default BarLabel
    */
-  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  barLabel?: React.JSXElementConstructor<BarLabelProps & BarLabelPropsOverrides>;
 }
 export interface BarLabelSlotProps {
-  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, BarLabelPropsOverrides, BarLabelOwnerState>;
 }
 export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
   /**

package/BarChart/seriesConfig/bar/extremums.js

@@ -42,10 +42,14 @@ const getValueExtremum = direction => params => {
   } = params;
   return Object.keys(series).filter(seriesId => {
     const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      return false;
+    }
     return axisId === axis.id || isDefaultAxis && axisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
-      stackedData
+      stackedData,
+      visibleStackedData
     } = series[seriesId];
     const filter = getFilters?.({
       currentAxisId: axis.id,
@@ -53,7 +57,8 @@ const getValueExtremum = direction => params => {
       seriesXAxisId: series[seriesId].xAxisId,
       seriesYAxisId: series[seriesId].yAxisId
     });
-    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
+    const stackedDataToUse = axis.domainSeries === 'visible' ? visibleStackedData : stackedData;
+    const [seriesMin, seriesMax] = stackedDataToUse?.reduce((seriesAcc, values, index) => {
       if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
         return seriesAcc;
       }

package/BarChart/seriesConfig/bar/extremums.mjs

@@ -36,10 +36,14 @@ const getValueExtremum = direction => params => {
   } = params;
   return Object.keys(series).filter(seriesId => {
     const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      return false;
+    }
     return axisId === axis.id || isDefaultAxis && axisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
-      stackedData
+      stackedData,
+      visibleStackedData
     } = series[seriesId];
     const filter = getFilters?.({
       currentAxisId: axis.id,
@@ -47,7 +51,8 @@ const getValueExtremum = direction => params => {
       seriesXAxisId: series[seriesId].xAxisId,
       seriesYAxisId: series[seriesId].yAxisId
     });
-    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
+    const stackedDataToUse = axis.domainSeries === 'visible' ? visibleStackedData : stackedData;
+    const [seriesMin, seriesMax] = stackedDataToUse?.reduce((seriesAcc, values, index) => {
       if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
         return seriesAcc;
       }

package/BarChart/seriesConfig/bar/getColor.js

@@ -4,60 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getSeriesColorFn = require("../../../internals/getSeriesColorFn");
+var _resolveColorProcessor = require("../../../internals/resolveColorProcessor");
 const getColor = (series, xAxis, yAxis) => {
   const verticalLayout = series.layout === 'vertical';
-  const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
-  const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
-  const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
-  const getSeriesColor = (0, _getSeriesColorFn.getSeriesColorFn)(series);
-  if (valueColorScale) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = series.data[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : valueColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  if (bandColorScale && bandValues) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = bandValues[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : bandColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  return dataIndex => {
-    if (dataIndex === undefined) {
-      return series.color;
-    }
-    const value = series.data[dataIndex];
-    return getSeriesColor({
-      value,
-      dataIndex
-    });
-  };
+  return (0, _resolveColorProcessor.resolveColorProcessor)({
+    series,
+    valueColorScale: verticalLayout ? yAxis?.colorScale : xAxis?.colorScale,
+    categoryColorScale: verticalLayout ? xAxis?.colorScale : yAxis?.colorScale,
+    categoryValues: verticalLayout ? xAxis?.data : yAxis?.data
+  });
 };
 var _default = exports.default = getColor;

package/BarChart/seriesConfig/bar/getColor.mjs

@@ -1,57 +1,11 @@
-import { getSeriesColorFn } from "../../../internals/getSeriesColorFn.mjs";
+import { resolveColorProcessor } from "../../../internals/resolveColorProcessor.mjs";
 const getColor = (series, xAxis, yAxis) => {
   const verticalLayout = series.layout === 'vertical';
-  const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
-  const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
-  const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
-  const getSeriesColor = getSeriesColorFn(series);
-  if (valueColorScale) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = series.data[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : valueColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  if (bandColorScale && bandValues) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = bandValues[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : bandColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  return dataIndex => {
-    if (dataIndex === undefined) {
-      return series.color;
-    }
-    const value = series.data[dataIndex];
-    return getSeriesColor({
-      value,
-      dataIndex
-    });
-  };
+  return resolveColorProcessor({
+    series,
+    valueColorScale: verticalLayout ? yAxis?.colorScale : xAxis?.colorScale,
+    categoryColorScale: verticalLayout ? xAxis?.colorScale : yAxis?.colorScale,
+    categoryValues: verticalLayout ? xAxis?.data : yAxis?.data
+  });
 };
 export default getColor;

package/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -44,7 +44,9 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Bar series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : (0, _formatErrorMessage2.default)(33, id));
     }
     if (process.env.NODE_ENV !== 'production') {

package/BarChart/seriesConfig/bar/seriesProcessor.mjs

@@ -37,7 +37,9 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Bar series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : _formatErrorMessage(33, id));
     }
     if (process.env.NODE_ENV !== 'production') {

package/BarChart/seriesConfig/bar/tooltip.js

@@ -4,33 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.axisTooltipGetter = void 0;
-var _getLabel = require("../../../internals/getLabel");
-const tooltipGetter = params => {
-  const {
-    series,
-    getColor,
-    identifier
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
-    return null;
-  }
-  const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
-  const value = series.data[identifier.dataIndex];
-  if (value == null) {
-    return null;
-  }
-  const formattedValue = series.valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
-  return {
-    identifier,
-    color: getColor(identifier.dataIndex),
-    label,
-    value,
-    formattedValue,
-    markType: series.labelMarkType
-  };
-};
+var _getLineLikeTooltip = require("../../../internals/getLineLikeTooltip");
+const tooltipGetter = params => (0, _getLineLikeTooltip.getLineLikeTooltip)(params, {
+  skipNullValues: true
+});
 const axisTooltipGetter = series => {
   return Object.values(series).map(s => s.layout === 'horizontal' ? {
     direction: 'y',

package/BarChart/seriesConfig/bar/tooltip.mjs

@@ -1,30 +1,7 @@
-import { getLabel } from "../../../internals/getLabel.mjs";
-const tooltipGetter = params => {
-  const {
-    series,
-    getColor,
-    identifier
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
-    return null;
-  }
-  const label = getLabel(series.label, 'tooltip');
-  const value = series.data[identifier.dataIndex];
-  if (value == null) {
-    return null;
-  }
-  const formattedValue = series.valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
-  return {
-    identifier,
-    color: getColor(identifier.dataIndex),
-    label,
-    value,
-    formattedValue,
-    markType: series.labelMarkType
-  };
-};
+import { getLineLikeTooltip } from "../../../internals/getLineLikeTooltip.mjs";
+const tooltipGetter = params => getLineLikeTooltip(params, {
+  skipNullValues: true
+});
 export const axisTooltipGetter = series => {
   return Object.values(series).map(s => s.layout === 'horizontal' ? {
     direction: 'y',