@mui/x-charts-premium 8.23.0 → 8.24.0

package/ChartZoomSlider/internals/previews/RangeBarPreviewPlot.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeBarPreviewPlot = RangeBarPreviewPlot;
+var _internals = require("@mui/x-charts/internals");
+var _BarChart = require("@mui/x-charts/BarChart");
+var _useRangeBarPlotData = require("../../../BarChartPremium/RangeBar/useRangeBarPlotData");
+var _jsxRuntime = require("react/jsx-runtime");
+function RangeBarPreviewPlot(props) {
+  const drawingArea = {
+    left: props.x,
+    top: props.y,
+    width: props.width,
+    height: props.height,
+    right: props.x + props.width,
+    bottom: props.y + props.height
+  };
+  const completedData = useBarPreviewData(props.axisId, drawingArea);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: completedData.map(({
+      seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
+      data
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      children: data.map(({
+        dataIndex,
+        color,
+        x,
+        y,
+        width,
+        height
+      }) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarElement, {
+          id: seriesId,
+          dataIndex: dataIndex,
+          color: color,
+          skipAnimation: true,
+          layout: layout ?? 'vertical',
+          x: x,
+          xOrigin: xOrigin,
+          y: y,
+          yOrigin: yOrigin,
+          width: width,
+          height: height
+        }, dataIndex);
+      })
+    }, seriesId))
+  });
+}
+function useBarPreviewData(axisId, drawingArea) {
+  const store = (0, _internals.useStore)();
+  const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
+  return (0, _useRangeBarPlotData.useRangeBarPlotData)(drawingArea, xAxes, yAxes);
+}

package/esm/BarChartPremium/BarChartPremium.d.ts

@@ -1,6 +1,21 @@
 import * as React from 'react';
 import { type BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
-export interface BarChartPremiumProps extends BarChartProProps {}
+import { type BarSeries } from '@mui/x-charts/BarChart';
+import { type BarItemIdentifier, type RangeBarItemIdentifier, type RangeBarSeriesType } from "../models/index.js";
+export type RangeBarSeries = RangeBarSeriesType;
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick'> {
+  /**
+   * Callback fired when a bar or range bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {BarItemIdentifier | RangeBarItemIdentifier} itemIdentifier The item identifier.
+   */
+  onItemClick?(event: React.MouseEvent<SVGElement, MouseEvent>, itemIdentifier: BarItemIdentifier | RangeBarItemIdentifier): void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
+   */
+  series: ReadonlyArray<BarSeries | RangeBarSeries>;
+}
 /**
  * Demos:
  *

package/esm/BarChartPremium/BarChartPremium.js

@@ -19,11 +19,14 @@ import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartZoomSlider } from '@mui/x-charts-pro/ChartZoomSlider';
 import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
-import { useChartContainerProProps } from '@mui/x-charts-pro/internals';
+import { seriesPreviewPlotMap, useChartContainerProProps } from '@mui/x-charts-pro/internals';
 import { useBarChartPremiumProps } from "./useBarChartPremiumProps.js";
 import { BAR_CHART_PREMIUM_PLUGINS } from "./BarChartPremium.plugins.js";
 import { ChartDataProviderPremium } from "../ChartDataProviderPremium/index.js";
+import { RangeBarPlot } from "./RangeBar/RangeBarPlot.js";
+import { RangeBarPreviewPlot } from "../ChartZoomSlider/internals/previews/RangeBarPreviewPlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+seriesPreviewPlotMap.set('rangeBar', RangeBarPreviewPlot);
 /**
  * Demos:
  *
@@ -52,6 +55,7 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
     chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
+    rangeBarPlotProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -77,7 +81,7 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+          children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
@@ -158,6 +162,31 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['bar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -225,6 +254,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -251,6 +285,15 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] or [[RangeBarSeries]] objects.

package/esm/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.ts

@@ -0,0 +1,3 @@
+import { type BarProps } from '@mui/x-charts/BarChart';
+export interface AnimatedRangeBarElementProps extends BarProps {}
+export declare function AnimatedRangeBarElement(props: AnimatedRangeBarElementProps): import("react/jsx-runtime").JSX.Element;

package/esm/BarChartPremium/RangeBar/AnimatedRangeBarElement.js

@@ -0,0 +1,21 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
+import * as React from 'react';
+import { useAnimateRangeBar } from "../../hooks/animation/useAnimateRangeBar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AnimatedRangeBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const animatedProps = useAnimateRangeBar(props);
+  return /*#__PURE__*/_jsx("rect", _extends({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
+  }, animatedProps));
+}

package/esm/BarChartPremium/RangeBar/RangeBarPlot.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type BarElementSlotProps, type BarElementSlots, type BarLabelSlots, type BarLabelSlotProps } from '@mui/x-charts/BarChart';
+import { type RangeBarItemIdentifier } from "../../models/index.js";
+export interface RangeBarPlotSlots extends BarElementSlots, BarLabelSlots {}
+export interface RangeBarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
+export interface RangeBarPlotProps {
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void;
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius?: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RangeBarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RangeBarPlotSlots;
+}
+/**
+ * Demos:
+ *
+ * - [Range Bar](https://mui.com/x/react-charts/range-bar/)
+ *
+ * API:
+ *
+ * - [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
+ */
+declare function RangeBarPlot(props: RangeBarPlotProps): React.JSX.Element;
+declare namespace RangeBarPlot {
+  var propTypes: any;
+}
+export { RangeBarPlot };

package/esm/BarChartPremium/RangeBar/RangeBarPlot.js

@@ -0,0 +1,135 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useSkipAnimation } from '@mui/x-charts/internals';
+import { BarElement, barElementClasses } from '@mui/x-charts/BarChart';
+import { useDrawingArea, useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { useIsZoomInteracting } from '@mui/x-charts-pro/hooks';
+import { useUtilityClasses } from "./useUtilityClasses.js";
+import { useRangeBarPlotData } from "./useRangeBarPlotData.js";
+import { AnimatedRangeBarElement } from "./AnimatedRangeBarElement.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RangeBarPlotRoot = styled('g', {
+  name: 'MuiRangeBarPlot',
+  slot: 'Root'
+})({
+  [`& .${barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
+
+/**
+ * Demos:
+ *
+ * - [Range Bar](https://mui.com/x/react-charts/range-bar/)
+ *
+ * API:
+ *
+ * - [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
+ */
+function RangeBarPlot(props) {
+  const {
+      skipAnimation: inSkipAnimation,
+      onItemClick,
+      borderRadius
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isZoomInteracting = useIsZoomInteracting();
+  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const completedData = useRangeBarPlotData(useDrawingArea(), xAxes, yAxes);
+  const classes = useUtilityClasses();
+  const slots = _extends({}, props.slots, {
+    bar: props.slots?.bar ?? AnimatedRangeBarElement
+  });
+  return /*#__PURE__*/_jsx(RangeBarPlotRoot, {
+    className: classes.root,
+    children: completedData.map(({
+      seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
+      data
+    }) => {
+      return /*#__PURE__*/_jsx("g", {
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          x,
+          y,
+          width,
+          height
+        }) => {
+          return /*#__PURE__*/_jsx(BarElement, _extends({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height,
+            rx: borderRadius,
+            ry: borderRadius
+          }, other, {
+            slots: slots,
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'rangeBar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+        })
+      }, seriesId);
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? RangeBarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { RangeBarPlot };

package/esm/BarChartPremium/RangeBar/seriesConfig/extrema.d.ts

@@ -0,0 +1,3 @@
+import { type CartesianExtremumGetter } from '@mui/x-charts/internals';
+export declare const getExtremumX: CartesianExtremumGetter<'rangeBar'>;
+export declare const getExtremumY: CartesianExtremumGetter<'rangeBar'>;

package/esm/BarChartPremium/RangeBar/seriesConfig/extrema.js

@@ -0,0 +1,77 @@
+import { findMinMax } from '@mui/x-charts/internals';
+const createResult = (data, direction) => {
+  if (direction === 'x') {
+    return {
+      x: data,
+      y: null
+    };
+  }
+  return {
+    x: null,
+    y: data
+  };
+};
+const getBaseExtremum = params => {
+  const {
+    axis,
+    getFilters,
+    isDefaultAxis
+  } = params;
+  const filter = getFilters?.({
+    currentAxisId: axis.id,
+    isDefaultAxis
+  });
+  const data = filter ? axis.data?.filter((_, i) => filter({
+    x: null,
+    y: null
+  }, i)) : axis.data;
+  return findMinMax(data ?? []);
+};
+const getValueExtremum = direction => params => {
+  const {
+    series,
+    axis,
+    getFilters,
+    isDefaultAxis
+  } = params;
+  return Object.keys(series).filter(seriesId => {
+    const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
+    return axisId === axis.id || isDefaultAxis && axisId === undefined;
+  }).reduce((acc, seriesId) => {
+    const {
+      data
+    } = series[seriesId];
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
+    });
+    const [seriesMin, seriesMax] = data?.reduce((seriesAcc, values, index) => {
+      if (values == null) {
+        return seriesAcc;
+      }
+      if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
+        return seriesAcc;
+      }
+      return [Math.min(values[0], values[1], seriesAcc[0]), Math.max(values[0], values[1], seriesAcc[1])];
+    }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [Infinity, -Infinity]);
+};
+export const getExtremumX = params => {
+  // Notice that bar should be all horizontal or all vertical.
+  // 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('x')(params);
+  }
+  return getBaseExtremum(params);
+};
+export const getExtremumY = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum('y')(params);
+};

package/esm/BarChartPremium/RangeBar/seriesConfig/getColor.d.ts

@@ -0,0 +1,3 @@
+import { type ColorProcessor } from '@mui/x-charts/internals';
+declare const getColor: ColorProcessor<'rangeBar'>;
+export default getColor;

package/esm/BarChartPremium/RangeBar/seriesConfig/getColor.js

@@ -0,0 +1,37 @@
+import { getSeriesColorFn } from '@mui/x-charts/internals';
+const getColor = (series, xAxis, yAxis) => {
+  const verticalLayout = series.layout === 'vertical';
+  const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
+  const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
+  const getSeriesColor = getSeriesColorFn(series);
+  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
+    });
+  };
+};
+export default getColor;

package/esm/BarChartPremium/RangeBar/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -0,0 +1,19 @@
+import { type AllSeriesType } from '@mui/x-charts/models';
+export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'rangeBar'>, seriesIndex: number, colors: readonly string[]): {
+  id: import("@mui/x-charts").SeriesId;
+  color: string;
+  type: "rangeBar";
+  data?: ReadonlyArray<import("../../../index.js").RangeBarValueType | null>;
+  datasetKeys?: {
+    start: string;
+    end: string;
+  };
+  label?: string | ((location: "tooltip" | "legend") => string);
+  layout?: "horizontal" | "vertical";
+  valueFormatter?: import("@mui/x-charts/internals").SeriesValueFormatter<import("../../../index.js").RangeBarValueType | null> | undefined;
+  highlightScope?: import("@mui/x-charts").HighlightScope;
+  labelMarkType?: import("@mui/x-charts/internals").ChartsLabelMarkType;
+  colorGetter?: ((data: import("@mui/x-charts/internals").ColorCallbackValue<import("../../../index.js").RangeBarValueType | null>) => string) | undefined;
+  xAxisId?: import("@mui/x-charts/internals").AxisId;
+  yAxisId?: import("@mui/x-charts/internals").AxisId;
+};

package/esm/BarChartPremium/RangeBar/seriesConfig/getSeriesWithDefaultValues.js

@@ -0,0 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export function getSeriesWithDefaultValues(seriesData, seriesIndex, colors) {
+  return _extends({}, seriesData, {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
+}

package/esm/BarChartPremium/RangeBar/seriesConfig/index.d.ts

@@ -0,0 +1,2 @@
+import { type ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+export declare const rangeBarSeriesConfig: ChartSeriesTypeConfig<'rangeBar'>;

package/esm/BarChartPremium/RangeBar/seriesConfig/index.js

@@ -0,0 +1,21 @@
+import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { getExtremumX, getExtremumY } from "./extrema.js";
+import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
+import seriesProcessor from "./seriesProcessor.js";
+import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
+import tooltipItemPositionGetter from "./tooltipPosition.js";
+import { getSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.js";
+export const rangeBarSeriesConfig = {
+  seriesProcessor,
+  colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
+  tooltipItemPositionGetter,
+  axisTooltipGetter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
+};
+cartesianSeriesTypes.addType('rangeBar');

package/esm/BarChartPremium/RangeBar/seriesConfig/legend.d.ts

@@ -0,0 +1,3 @@
+import { type LegendGetter } from '@mui/x-charts/internals';
+declare const legendGetter: LegendGetter<'rangeBar'>;
+export default legendGetter;

package/esm/BarChartPremium/RangeBar/seriesConfig/legend.js

@@ -0,0 +1,23 @@
+import { getLabel } from '@mui/x-charts/internals';
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = getLabel(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      type: 'rangeBar',
+      markType: series[seriesId].labelMarkType,
+      id: seriesId,
+      seriesId,
+      color: series[seriesId].color,
+      label: formattedLabel
+    });
+    return acc;
+  }, []);
+};
+export default legendGetter;

package/esm/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.d.ts

@@ -0,0 +1,3 @@
+import { type SeriesProcessor } from '@mui/x-charts/internals';
+declare const seriesProcessor: SeriesProcessor<'rangeBar'>;
+export default seriesProcessor;

package/esm/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { warnOnce } from '@mui/x-internals/warning';
+const rangeBarValueFormatter = v => v == null ? '' : `[${v[0]}, ${v[1]}]`;
+const seriesProcessor = (params, dataset) => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const completedSeries = {};
+  for (const id of seriesOrder) {
+    const seriesData = series[id];
+    const datasetKeys = seriesData?.datasetKeys;
+    if (seriesData.data === undefined && dataset === undefined && process.env.NODE_ENV !== 'production') {
+      throw new Error([`MUI X Charts: range bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
+    const missingKeys = ['start', 'end'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    if (datasetKeys && missingKeys.length > 0) {
+      throw new Error([`MUI X Charts: range bar series with id='${id}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
+    }
+    completedSeries[id] = _extends({
+      layout: 'vertical'
+    }, series[id], {
+      valueFormatter: series[id].valueFormatter ?? rangeBarValueFormatter,
+      data: datasetKeys ? dataset.map(data => {
+        const start = data[datasetKeys.start];
+        const end = data[datasetKeys.end];
+        if (typeof start !== 'number' || typeof end !== 'number') {
+          if (process.env.NODE_ENV !== 'production') {
+            if (start !== null) {
+              warnOnce([`MUI X Charts: Your dataset key "start" is used for plotting an range bar, but contains nonnumerical elements.`, 'Range bars only support numbers.']);
+            }
+            if (end !== null) {
+              warnOnce([`MUI X Charts: Your dataset key "end" is used for plotting an range bar, but contains nonnumerical elements.`, 'Range bars only support numbers.']);
+            }
+          }
+          return null;
+        }
+        return [start, end];
+      }) : series[id].data
+    });
+  }
+  return {
+    seriesOrder,
+    series: completedSeries
+  };
+};
+export default seriesProcessor;

package/esm/BarChartPremium/RangeBar/seriesConfig/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { type AxisTooltipGetter, type TooltipGetter } from '@mui/x-charts/internals';
+declare const tooltipGetter: TooltipGetter<'rangeBar'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'rangeBar', 'x' | 'y'>;
+export default tooltipGetter;