@mui/x-charts-premium 8.26.0 → 9.0.0-alpha.0

package/BarChartPremium/BarChartPremium.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
-import { type BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
+import { type BarChartProProps, type BarChartProSlotProps, type BarChartProSlots } from '@mui/x-charts-pro/BarChartPro';
 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'> {
+export interface BarChartPremiumSlots extends BarChartProSlots {}
+export interface BarChartPremiumSlotProps extends BarChartProSlotProps {}
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartPremiumSlotProps;
   /**
    * Callback fired when a bar or range bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/BarChartPremium/BarChartPremium.js

@@ -30,6 +30,7 @@ var _useBarChartPremiumProps = require("./useBarChartPremiumProps");
 var _BarChartPremium2 = require("./BarChartPremium.plugins");
 var _ChartDataProviderPremium = require("../ChartDataProviderPremium");
 var _RangeBarPlot = require("./RangeBar/RangeBarPlot");
+var _FocusedRangeBar = require("./RangeBar/FocusedRangeBar");
 var _RangeBarPreviewPlot = require("../ChartZoomSlider/internals/previews/RangeBarPreviewPlot");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
@@ -88,7 +89,7 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.FocusedBar, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedRangeBar.FocusedRangeBar, {})]
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
@@ -108,6 +109,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: _propTypes.default.number,
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -191,7 +197,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    seriesId: _propTypes.default.string,
     type: _propTypes.default.oneOf(['bar']).isRequired
   })),
   /**
@@ -212,7 +218,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -242,7 +248,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    seriesId: _propTypes.default.string,
     type: _propTypes.default.oneOf(['bar']).isRequired
   })),
   /**
@@ -367,7 +373,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar']).isRequired
   }),
   /**

package/BarChartPremium/RangeBar/AnimatedRangeBarElement.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _useAnimateRangeBar = require("../../hooks/animation/useAnimateRangeBar");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin", "hidden"];
+const _excluded = ["ownerState", "skipAnimation", "seriesId", "dataIndex", "xOrigin", "yOrigin", "hidden"];
 function AnimatedRangeBarElement(props) {
   const {
       ownerState

package/BarChartPremium/RangeBar/FocusedRangeBar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedRangeBar(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/BarChartPremium/RangeBar/FocusedRangeBar.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedRangeBar = FocusedRangeBar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _hooks = require("@mui/x-charts/hooks");
+var _createGetRangeBarDimensions = require("./createGetRangeBarDimensions");
+var _useRangeBarSeries = require("../../hooks/useRangeBarSeries");
+var _jsxRuntime = require("react/jsx-runtime");
+function FocusedRangeBar(props) {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _hooks.useFocusedItem)();
+  const rangeBarSeries = (0, _useRangeBarSeries.useRangeBarSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  if (focusedItem === null || focusedItem.type !== 'rangeBar' || !rangeBarSeries) {
+    return null;
+  }
+  const series = rangeBarSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
+    return null;
+  }
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
+  const verticalLayout = rangeBarSeries.series[focusedItem.seriesId].layout === 'vertical';
+  const groupIndex = rangeBarSeries.seriesOrder.findIndex(seriesId => seriesId === focusedItem.seriesId);
+  const barDimensions = (0, _createGetRangeBarDimensions.createGetRangeBarDimensions)({
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups: rangeBarSeries.seriesOrder.length
+  })(focusedItem.dataIndex, groupIndex);
+  if (barDimensions === null) {
+    return null;
+  }
+  const {
+    x,
+    y,
+    height,
+    width
+  } = barDimensions;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: x - 3,
+    y: y - 3,
+    width: width + 6,
+    height: height + 6,
+    rx: 3,
+    ry: 3
+  }, props));
+}

package/BarChartPremium/RangeBar/RangeBarPlot.js

@@ -81,7 +81,7 @@ function RangeBarPlot(props) {
           hidden
         }) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarElement, (0, _extends2.default)({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: dataIndex,
             color: color,
             skipAnimation: skipAnimation ?? false,

package/BarChartPremium/RangeBar/createGetRangeBarDimensions.d.ts

@@ -0,0 +1,13 @@
+import { type ChartSeriesDefaultized, type ChartsXAxisProps, type ChartsYAxisProps, type ComputedAxis, type ScaleName } from '@mui/x-charts/internals';
+export declare function createGetRangeBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'rangeBar'>;
+  numberOfGroups: number;
+}): (dataIndex: number, groupIndex: number) => {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+} | null;

package/BarChartPremium/RangeBar/createGetRangeBarDimensions.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetRangeBarDimensions = createGetRangeBarDimensions;
+var _internals = require("@mui/x-charts/internals");
+function createGetRangeBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const xScale = xAxisConfig.scale;
+  const yScale = yAxisConfig.scale;
+  const bandWidth = baseScaleConfig.scale.bandwidth();
+  const {
+    barWidth,
+    offset
+  } = (0, _internals.getBandSize)(bandWidth, numberOfGroups, baseScaleConfig.barGapRatio);
+  return function getBarDimensions(dataIndex, groupIndex) {
+    const barOffset = groupIndex * (barWidth + offset);
+    const baseValue = baseScaleConfig.data[dataIndex];
+    const seriesValue = series.data[dataIndex];
+    if (seriesValue == null) {
+      return null;
+    }
+    const valueCoordinates = seriesValue.map(v => verticalLayout ? yScale(v) : xScale(v));
+    const minValueCoord = Math.round(Math.min(...valueCoordinates));
+    const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+    const barSize = maxValueCoord - minValueCoord;
+    return {
+      x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+      height: verticalLayout ? barSize : barWidth,
+      width: verticalLayout ? barWidth : barSize
+    };
+  };
+}

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

@@ -1,6 +1,6 @@
 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;
+  id: string;
   color: string;
   type: "rangeBar";
   data?: ReadonlyArray<import("../../../index.js").RangeBarValueType | null>;
@@ -11,7 +11,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ra
   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;
+  highlightScope?: import("@mui/x-charts/internals").CommonHighlightScope | undefined;
   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;

package/BarChartPremium/RangeBar/seriesConfig/index.js

@@ -12,6 +12,7 @@ var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _getSeriesWithDefaultValues = require("./getSeriesWithDefaultValues");
 const rangeBarSeriesConfig = exports.rangeBarSeriesConfig = {
@@ -24,6 +25,8 @@ const rangeBarSeriesConfig = exports.rangeBarSeriesConfig = {
   xExtremumGetter: _extrema.getExtremumX,
   yExtremumGetter: _extrema.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
-  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex
 };
 _internals.cartesianSeriesTypes.addType('rangeBar');

package/BarChartPremium/RangeBar/seriesConfig/keyboardFocusHandler.d.ts

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

package/BarChartPremium/RangeBar/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return (0, _internals.createGetNextIndexFocusedItem)(_internals.composableCartesianSeriesTypes);
+    case 'ArrowLeft':
+      return (0, _internals.createGetPreviousIndexFocusedItem)(_internals.composableCartesianSeriesTypes);
+    case 'ArrowDown':
+      return (0, _internals.createGetPreviousSeriesFocusedItem)(_internals.composableCartesianSeriesTypes);
+    case 'ArrowUp':
+      return (0, _internals.createGetNextSeriesFocusedItem)(_internals.composableCartesianSeriesTypes);
+    default:
+      return null;
+  }
+};
+var _default = exports.default = keyboardFocusHandler;

package/BarChartPremium/RangeBar/seriesConfig/legend.js

@@ -18,7 +18,6 @@ const legendGetter = params => {
     acc.push({
       type: 'rangeBar',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _useRangeBarPlotData = require("../useRangeBarPlotData");
+var _createGetRangeBarDimensions = require("../createGetRangeBarDimensions");
 const tooltipItemPositionGetter = params => {
   const {
     series,
@@ -22,7 +22,13 @@ const tooltipItemPositionGetter = params => {
   if (axesConfig.x === undefined || axesConfig.y === undefined) {
     return null;
   }
-  const dimensions = (0, _useRangeBarPlotData.getRangeBarDimensions)(itemSeries.layout, axesConfig.x, axesConfig.y, itemSeries.data, identifier.dataIndex, series.rangeBar.seriesOrder.length, series.rangeBar.seriesOrder.findIndex(id => id === itemSeries.id));
+  const dimensions = (0, _createGetRangeBarDimensions.createGetRangeBarDimensions)({
+    verticalLayout: itemSeries.layout === 'vertical',
+    xAxisConfig: axesConfig.x,
+    yAxisConfig: axesConfig.y,
+    series: itemSeries,
+    numberOfGroups: series.rangeBar.seriesOrder.length
+  })(identifier.dataIndex, series.rangeBar.seriesOrder.findIndex(id => id === itemSeries.id));
   if (dimensions == null) {
     return null;
   }

package/BarChartPremium/RangeBar/useRangeBarPlotData.d.ts

@@ -1,12 +1,5 @@
 import { type ChartDrawingArea } from '@mui/x-charts/hooks';
-import { type ComputedAxis, type ComputedAxisConfig, type ScaleName } from '@mui/x-charts/internals';
+import { type ComputedAxisConfig } from '@mui/x-charts/internals';
 import { type ChartsXAxisProps, type ChartsYAxisProps } from '@mui/x-charts/models';
-import { type DefaultizedRangeBarSeriesType } from "../../models/seriesType/rangeBar.js";
 import { type ProcessedRangeBarSeriesData } from "./types.js";
-export declare function useRangeBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): ProcessedRangeBarSeriesData[];
-export declare function getRangeBarDimensions(layout: 'vertical' | 'horizontal', xAxis: ComputedAxis<ScaleName, any, ChartsXAxisProps>, yAxis: ComputedAxis<ScaleName, any, ChartsYAxisProps>, seriesData: DefaultizedRangeBarSeriesType['data'], dataIndex: number, seriesCount: number, seriesIndex: number): {
-  x: number;
-  y: number;
-  height: number;
-  width: number;
-} | null;
+export declare function useRangeBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): ProcessedRangeBarSeriesData[];

package/BarChartPremium/RangeBar/useRangeBarPlotData.js

@@ -1,13 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRangeBarDimensions = getRangeBarDimensions;
 exports.useRangeBarPlotData = useRangeBarPlotData;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
 var _useRangeBarSeries = require("../../hooks/useRangeBarSeries");
+var _createGetRangeBarDimensions = require("./createGetRangeBarDimensions");
 function useRangeBarPlotData(drawingArea, xAxes, yAxes) {
   const store = (0, _internals.useStore)();
   const seriesData = (0, _useRangeBarSeries.useRangeBarSeriesContext)() ?? {
@@ -16,7 +18,7 @@ function useRangeBarPlotData(drawingArea, xAxes, yAxes) {
   };
   const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
   const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
-  const getColor = store.use(_internals.selectorChartSeriesConfig).rangeBar.colorProcessor;
+  const getColor = store.state.seriesConfig.config.rangeBar.colorProcessor;
   const {
     series,
     seriesOrder
@@ -26,11 +28,18 @@ function useRangeBarPlotData(drawingArea, xAxes, yAxes) {
   const yMin = drawingArea.top;
   const yMax = drawingArea.top + drawingArea.height;
   const data = seriesOrder.map((seriesId, seriesIndex) => {
+    const verticalLayout = series[seriesId].layout === 'vertical';
+    const getRangeBarDimensions = (0, _createGetRangeBarDimensions.createGetRangeBarDimensions)({
+      verticalLayout,
+      xAxisConfig: xAxes[series[seriesId].xAxisId ?? defaultXAxisId],
+      yAxisConfig: yAxes[series[seriesId].yAxisId ?? defaultYAxisId],
+      series: series[seriesId],
+      numberOfGroups: seriesOrder.length
+    });
     const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
     const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
     const xAxisConfig = xAxes[xAxisId];
     const yAxisConfig = yAxes[yAxisId];
-    const verticalLayout = series[seriesId].layout === 'vertical';
     (0, _internals.checkBarChartScaleErrors)(verticalLayout, seriesId, series[seriesId].data.length, xAxisId, xAxes, yAxisId, yAxes);
     const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
     const xScale = xAxisConfig.scale;
@@ -38,41 +47,23 @@ function useRangeBarPlotData(drawingArea, xAxes, yAxes) {
     const xOrigin = Math.round(xScale(0) ?? 0);
     const yOrigin = Math.round(yScale(0) ?? 0);
     const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
-    const bandWidth = baseScaleConfig.scale.bandwidth();
-    const {
-      barWidth,
-      offset
-    } = (0, _internals.getBandSize)(bandWidth, seriesOrder.length, baseScaleConfig.barGapRatio);
-    const barOffset = seriesIndex * (barWidth + offset);
     const {
       data: currentSeriesData,
       layout
     } = series[seriesId];
     const seriesDataPoints = [];
     for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-      const baseValue = baseScaleConfig.data[dataIndex];
-      const seriesValue = currentSeriesData[dataIndex];
-      if (seriesValue == null) {
+      const dimensions = getRangeBarDimensions(dataIndex, seriesIndex);
+      if (dimensions === null || dimensions.x > xMax || dimensions.x + dimensions.width < xMin || dimensions.y > yMax || dimensions.y + dimensions.height < yMin) {
         continue;
       }
-      const valueCoordinates = seriesValue.map(v => verticalLayout ? yScale(v) : xScale(v));
-      const minValueCoord = Math.round(Math.min(...valueCoordinates));
-      const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-      const barSize = maxValueCoord - minValueCoord;
-      const result = {
+      const result = (0, _extends2.default)({
         seriesId,
         dataIndex,
-        x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-        y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-        height: verticalLayout ? barSize : barWidth,
-        width: verticalLayout ? barWidth : barSize,
         color: colorGetter(dataIndex),
         value: currentSeriesData[dataIndex],
         hidden: series[seriesId].hidden
-      };
-      if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-        continue;
-      }
+      }, dimensions);
       seriesDataPoints.push(result);
     }
     return {
@@ -84,30 +75,4 @@ function useRangeBarPlotData(drawingArea, xAxes, yAxes) {
     };
   });
   return data;
-}
-function getRangeBarDimensions(layout, xAxis, yAxis, seriesData, dataIndex, seriesCount, seriesIndex) {
-  const xScale = xAxis.scale;
-  const yScale = yAxis.scale;
-  const verticalLayout = layout === 'vertical';
-  const baseScaleConfig = verticalLayout ? xAxis : yAxis;
-  const baseValue = baseScaleConfig.data[dataIndex];
-  const seriesValue = seriesData[dataIndex];
-  const {
-    barWidth,
-    offset
-  } = (0, _internals.getBandSize)(baseScaleConfig.scale.bandwidth(), seriesCount, baseScaleConfig.barGapRatio);
-  const barOffset = seriesIndex * (barWidth + offset);
-  if (seriesValue == null) {
-    return null;
-  }
-  const valueCoordinates = seriesValue.map(v => verticalLayout ? yScale(v) : xScale(v));
-  const minValueCoord = Math.round(Math.min(...valueCoordinates));
-  const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-  const barSize = maxValueCoord - minValueCoord;
-  return {
-    x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-    y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-    height: verticalLayout ? barSize : barWidth,
-    width: verticalLayout ? barWidth : barSize
-  };
 }

package/BarChartPremium/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./BarChartPremium.js";
 export * from "./BarChartPremium.plugins.js";
 export * from "./RangeBar/RangeBarPlot.js";
+export * from "./RangeBar/FocusedRangeBar.js";
 export { rangeBarClasses, type RangeBarClasses, type RangeBarClassKey } from "./RangeBar/useUtilityClasses.js";

package/BarChartPremium/index.js

@@ -48,4 +48,16 @@ Object.keys(_RangeBarPlot).forEach(function (key) {
     }
   });
 });
+var _FocusedRangeBar = require("./RangeBar/FocusedRangeBar");
+Object.keys(_FocusedRangeBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FocusedRangeBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusedRangeBar[key];
+    }
+  });
+});
 var _useUtilityClasses = require("./RangeBar/useUtilityClasses");