@mui/x-charts 9.7.0 → 9.9.0

package/hooks/index.d.ts

@@ -24,4 +24,5 @@ export * from "./useFocusedItem.js";
 export { useXAxisCoordinates, useYAxisCoordinates, type AxisCoordinates } from "./useAxisCoordinates.js";
 export * from "./useAxisTicks.js";
 export { type TickItem } from "./useTicks.js";
-export * from "./getValueToPositionMapper.js";
+export * from "./getValueToPositionMapper.js";
+export { usePolarGeometry } from "./usePolarGeometry.js";

package/hooks/index.js

@@ -9,7 +9,8 @@ var _exportNames = {
   useChartGradientId: true,
   useChartGradientIdObjectBound: true,
   useXAxisCoordinates: true,
-  useYAxisCoordinates: true
+  useYAxisCoordinates: true,
+  usePolarGeometry: true
 };
 Object.defineProperty(exports, "useChartGradientId", {
   enumerable: true,
@@ -35,6 +36,12 @@ Object.defineProperty(exports, "usePieSeriesContext", {
     return _usePieSeries.usePieSeriesContext;
   }
 });
+Object.defineProperty(exports, "usePolarGeometry", {
+  enumerable: true,
+  get: function () {
+    return _usePolarGeometry.usePolarGeometry;
+  }
+});
 Object.defineProperty(exports, "useXAxisCoordinates", {
   enumerable: true,
   get: function () {
@@ -325,4 +332,5 @@ Object.keys(_getValueToPositionMapper).forEach(function (key) {
       return _getValueToPositionMapper[key];
     }
   });
-});
+});
+var _usePolarGeometry = require("./usePolarGeometry");

package/hooks/index.mjs

@@ -23,4 +23,5 @@ export * from "./useBrush.mjs";
 export * from "./useFocusedItem.mjs";
 export { useXAxisCoordinates, useYAxisCoordinates } from "./useAxisCoordinates.mjs";
 export * from "./useAxisTicks.mjs";
-export * from "./getValueToPositionMapper.mjs";
+export * from "./getValueToPositionMapper.mjs";
+export { usePolarGeometry } from "./usePolarGeometry.mjs";

package/hooks/usePolarGeometry.d.mts

@@ -0,0 +1,51 @@
+import type { AxisScaleConfig, ScaleName } from "../models/axis.mjs";
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+export declare function usePolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName>(): PolarGeometry<AngleScale, RadiusScale> | null;
+export interface PolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName> {
+  /**
+   * The X coordinate of the chart center within the SVG.
+   */
+  cx: number;
+  /**
+   * The Y coordinate of the chart center within the SVG.
+   */
+  cy: number;
+  /**
+   * The scale that maps rotation axis values to angles in radians.
+   */
+  angleScale: AxisScaleConfig[AngleScale]['scale'];
+  /**
+   * The scale that maps data values to radii (distance from the chart center).
+   */
+  radiusScale: AxisScaleConfig[RadiusScale]['scale'];
+  /**
+   * Converts polar coordinates to Cartesian offsets relative to the chart center.
+   * @param {number} radius - Distance from the center.
+   * @param {number} angle - Angle in radians, measured clockwise from the top (12 o'clock).
+   * @returns {[number, number]} `[x, y]` offset from `[cx, cy]`.
+   */
+  point: (radius: number, angle: number) => [number, number];
+  /**
+   * Converts Cartesian offsets (relative to the chart center) back to polar coordinates.
+   * The inverse of `point`.
+   * @param {number} x - Horizontal offset from `cx`.
+   * @param {number} y - Vertical offset from `cy`.
+   * @returns {[number, number]} `[radius, angle]` where angle is in radians within `[-π, π]`.
+   */
+  pointInverse: (x: number, y: number) => [number, number];
+}

package/hooks/usePolarGeometry.d.ts

@@ -0,0 +1,51 @@
+import type { AxisScaleConfig, ScaleName } from "../models/axis.js";
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+export declare function usePolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName>(): PolarGeometry<AngleScale, RadiusScale> | null;
+export interface PolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName> {
+  /**
+   * The X coordinate of the chart center within the SVG.
+   */
+  cx: number;
+  /**
+   * The Y coordinate of the chart center within the SVG.
+   */
+  cy: number;
+  /**
+   * The scale that maps rotation axis values to angles in radians.
+   */
+  angleScale: AxisScaleConfig[AngleScale]['scale'];
+  /**
+   * The scale that maps data values to radii (distance from the chart center).
+   */
+  radiusScale: AxisScaleConfig[RadiusScale]['scale'];
+  /**
+   * Converts polar coordinates to Cartesian offsets relative to the chart center.
+   * @param {number} radius - Distance from the center.
+   * @param {number} angle - Angle in radians, measured clockwise from the top (12 o'clock).
+   * @returns {[number, number]} `[x, y]` offset from `[cx, cy]`.
+   */
+  point: (radius: number, angle: number) => [number, number];
+  /**
+   * Converts Cartesian offsets (relative to the chart center) back to polar coordinates.
+   * The inverse of `point`.
+   * @param {number} x - Horizontal offset from `cx`.
+   * @param {number} y - Vertical offset from `cy`.
+   * @returns {[number, number]} `[radius, angle]` where angle is in radians within `[-π, π]`.
+   */
+  pointInverse: (x: number, y: number) => [number, number];
+}

package/hooks/usePolarGeometry.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePolarGeometry = usePolarGeometry;
+var _useDrawingArea = require("./useDrawingArea");
+var _useAxis = require("./useAxis");
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+function usePolarGeometry() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = (0, _useDrawingArea.useDrawingArea)();
+  const rotationAxis = (0, _useAxis.useRotationAxis)();
+  const radiusAxis = (0, _useAxis.useRadiusAxis)();
+  if (!rotationAxis || !radiusAxis) {
+    return null;
+  }
+  const angleScale = rotationAxis.scale;
+  const radiusScale = radiusAxis.scale;
+  return {
+    cx: left + width / 2,
+    cy: top + height / 2,
+    angleScale,
+    radiusScale,
+    point: (radius, angle) => [radius * Math.sin(angle), -radius * Math.cos(angle)],
+    pointInverse: (x, y) => [Math.sqrt(x * x + y * y), Math.atan2(x, -y)]
+  };
+}

package/hooks/usePolarGeometry.mjs

@@ -0,0 +1,41 @@
+import { useDrawingArea } from "./useDrawingArea.mjs";
+import { useRotationAxis, useRadiusAxis } from "./useAxis.mjs";
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+export function usePolarGeometry() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = useDrawingArea();
+  const rotationAxis = useRotationAxis();
+  const radiusAxis = useRadiusAxis();
+  if (!rotationAxis || !radiusAxis) {
+    return null;
+  }
+  const angleScale = rotationAxis.scale;
+  const radiusScale = radiusAxis.scale;
+  return {
+    cx: left + width / 2,
+    cy: top + height / 2,
+    angleScale,
+    radiusScale,
+    point: (radius, angle) => [radius * Math.sin(angle), -radius * Math.cos(angle)],
+    pointInverse: (x, y) => [Math.sqrt(x * x + y * y), Math.atan2(x, -y)]
+  };
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.7.0
+ * @mui/x-charts v9.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.7.0
+ * @mui/x-charts v9.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/animation/animation.d.mts

@@ -1,3 +1,3 @@
 export declare const ANIMATION_DURATION_MS = 300;
 export declare const ANIMATION_TIMING_FUNCTION = "cubic-bezier(0.66, 0, 0.34, 1)";
-export declare const ANIMATION_TIMING_FUNCTION_JS: import("bezier-easing").EasingFunction;
+export declare const ANIMATION_TIMING_FUNCTION_JS: (x: number) => number;

package/internals/animation/animation.d.ts

@@ -1,3 +1,3 @@
 export declare const ANIMATION_DURATION_MS = 300;
 export declare const ANIMATION_TIMING_FUNCTION = "cubic-bezier(0.66, 0, 0.34, 1)";
-export declare const ANIMATION_TIMING_FUNCTION_JS: import("bezier-easing").EasingFunction;
+export declare const ANIMATION_TIMING_FUNCTION_JS: (x: number) => number;

package/internals/commonNextFocusItem.d.mts

@@ -1,12 +1,22 @@
 import type { UseChartKeyboardNavigationSignature } from "./plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
 import type { ChartState } from "./plugins/models/chart.mjs";
 import type { ChartSeriesType } from "../models/seriesType/config.mjs";
-import type { SeriesId, FocusedItemIdentifier } from "../models/seriesType/index.mjs";
+import type { SeriesId } from "../models/seriesType/index.mjs";
 type ReturnedItem<OutSeriesType extends ChartSeriesType> = {
   type: OutSeriesType;
   seriesId: SeriesId;
   dataIndex: number;
 } | null;
+/**
+ * The item the navigators work on. Decoupled from the public `FocusedItemIdentifier` because
+ * navigation is position-based: series keyed differently (e.g. `mapShape`, keyed by `name`)
+ * reuse these helpers by translating to a `dataIndex` at their boundary.
+ */
+type WorkingItem = {
+  type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
+  seriesId: SeriesId;
+  dataIndex?: number;
+};
 type StateParameters<SeriesType extends ChartSeriesType> = Pick<ChartState<[UseChartKeyboardNavigationSignature], [], SeriesType>, 'series'>;
 export declare function createGetNextIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
@@ -20,7 +30,7 @@ allowCycles?: boolean,
 /**
  * If true, series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength?: boolean): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
  * The set of series types compatible with this navigation action.
@@ -33,15 +43,15 @@ allowCycles?: boolean,
 /**
  * If true, series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength?: boolean): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
  * The set of series types compatible with this navigation action.
  */
-compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
  * The set of series types compatible with this navigation action.
  */
-compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export {};

package/internals/commonNextFocusItem.d.ts

@@ -1,12 +1,22 @@
 import type { UseChartKeyboardNavigationSignature } from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import type { ChartState } from "./plugins/models/chart.js";
 import type { ChartSeriesType } from "../models/seriesType/config.js";
-import type { SeriesId, FocusedItemIdentifier } from "../models/seriesType/index.js";
+import type { SeriesId } from "../models/seriesType/index.js";
 type ReturnedItem<OutSeriesType extends ChartSeriesType> = {
   type: OutSeriesType;
   seriesId: SeriesId;
   dataIndex: number;
 } | null;
+/**
+ * The item the navigators work on. Decoupled from the public `FocusedItemIdentifier` because
+ * navigation is position-based: series keyed differently (e.g. `mapShape`, keyed by `name`)
+ * reuse these helpers by translating to a `dataIndex` at their boundary.
+ */
+type WorkingItem = {
+  type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
+  seriesId: SeriesId;
+  dataIndex?: number;
+};
 type StateParameters<SeriesType extends ChartSeriesType> = Pick<ChartState<[UseChartKeyboardNavigationSignature], [], SeriesType>, 'series'>;
 export declare function createGetNextIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
@@ -20,7 +30,7 @@ allowCycles?: boolean,
 /**
  * If true, series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength?: boolean): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
  * The set of series types compatible with this navigation action.
@@ -33,15 +43,15 @@ allowCycles?: boolean,
 /**
  * If true, series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength?: boolean): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
  * The set of series types compatible with this navigation action.
  */
-compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
 /**
  * The set of series types compatible with this navigation action.
  */
-compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export {};

package/internals/commonNextFocusItem.js

@@ -13,6 +13,12 @@ var _getNextNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardN
 var _findVisibleDataIndex = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex");
 var _seriesHasData = require("./seriesHasData");
 var _useChartSeries = require("./plugins/corePlugins/useChartSeries/useChartSeries.selectors");
+/**
+ * The item the navigators work on. Decoupled from the public `FocusedItemIdentifier` because
+ * navigation is position-based: series keyed differently (e.g. `mapShape`, keyed by `name`)
+ * reuse these helpers by translating to a `dataIndex` at their boundary.
+ */
+
 function isSeriesHidden(processedSeries, type, seriesId) {
   const seriesItem = processedSeries[type]?.series[seriesId];
   return Boolean(seriesItem && 'hidden' in seriesItem && seriesItem.hidden);

package/internals/commonNextFocusItem.mjs

@@ -4,6 +4,13 @@ import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboard
 import { findVisibleDataIndex } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.mjs";
 import { seriesHasData } from "./seriesHasData.mjs";
 import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.mjs";
+
+/**
+ * The item the navigators work on. Decoupled from the public `FocusedItemIdentifier` because
+ * navigation is position-based: series keyed differently (e.g. `mapShape`, keyed by `name`)
+ * reuse these helpers by translating to a `dataIndex` at their boundary.
+ */
+
 function isSeriesHidden(processedSeries, type, seriesId) {
   const seriesItem = processedSeries[type]?.series[seriesId];
   return Boolean(seriesItem && 'hidden' in seriesItem && seriesItem.hidden);

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.d.mts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 /**
  * This component provides an accessibility proxy for charts.
  * It uses two divs to let screen readers announce the focused content when it changes.
  */
-export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAccessibilityProxy(): React.JSX.Element;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 /**
  * This component provides an accessibility proxy for charts.
  * It uses two divs to let screen readers announce the focused content when it changes.
  */
-export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAccessibilityProxy(): React.JSX.Element;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.mts

@@ -1 +1,2 @@
-export declare function ChartsAxesGradients(): import("react/jsx-runtime").JSX.Element | null;
+import * as React from 'react';
+export declare function ChartsAxesGradients(): React.JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1 +1,2 @@
-export declare function ChartsAxesGradients(): import("react/jsx-runtime").JSX.Element | null;
+import * as React from 'react';
+export declare function ChartsAxesGradients(): React.JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.mts

@@ -14,5 +14,5 @@ type ChartsContinuousGradientProps = {
    */
   gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
-export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react").JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -14,5 +14,5 @@ type ChartsContinuousGradientProps = {
    */
   gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
-export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react").JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.mts

@@ -8,5 +8,5 @@ type ChartsContinuousGradientObjectBoundProps = {
 /**
  * Generates gradients to be used in tooltips and legends.
  */
-export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react").JSX.Element;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.ts

@@ -8,5 +8,5 @@ type ChartsContinuousGradientObjectBoundProps = {
 /**
  * Generates gradients to be used in tooltips and legends.
  */
-export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react").JSX.Element;
 export {};

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PiecewiseColorConfig } from "../../../models/colorMapping.mjs";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
@@ -7,5 +8,5 @@ type ChartsPiecewiseGradientProps = {
   scale: (value: any) => number | undefined;
   colorMap: PiecewiseColorConfig;
 };
-export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): React.JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PiecewiseColorConfig } from "../../../models/colorMapping.js";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
@@ -7,5 +8,5 @@ type ChartsPiecewiseGradientProps = {
   scale: (value: any) => number | undefined;
   colorMap: PiecewiseColorConfig;
 };
-export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): React.JSX.Element | null;
 export {};

package/internals/createCommonKeyboardFocusHandler.d.mts

@@ -2,7 +2,11 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 /**
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
-export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.mjs").FocusedItemIdentifier<TInputSeriesType> | null, state: {
+export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
+  type: Exclude<ChartSeriesType, "sankey" | "heatmap">;
+  seriesId: import("../index.mjs").SeriesId;
+  dataIndex?: number;
+} | null, state: {
   series: {
     defaultizedSeries: import("./plugins/corePlugins/useChartSeries/useChartSeries.types.mjs").DefaultizedSeriesGroups<TInputSeriesType>;
     idToType: import("./index.mjs").SeriesIdToType;

package/internals/createCommonKeyboardFocusHandler.d.ts

@@ -2,7 +2,11 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
 /**
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
-export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.js").FocusedItemIdentifier<TInputSeriesType> | null, state: {
+export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
+  type: Exclude<ChartSeriesType, "sankey" | "heatmap">;
+  seriesId: import("../index.js").SeriesId;
+  dataIndex?: number;
+} | null, state: {
   series: {
     defaultizedSeries: import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").DefaultizedSeriesGroups<TInputSeriesType>;
     idToType: import("./index.js").SeriesIdToType;

package/internals/createGetBarDimensions.d.mts

@@ -11,4 +11,17 @@ export declare function createGetBarDimensions(params: {
   y: number;
   height: number;
   width: number;
-} | null;
+} | null;
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+export declare function createGetBucketBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'bar'>;
+  numberOfGroups: number;
+}): (startIndex: number, endIndex: number, min: number, max: number, groupIndex: number) => {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+};

package/internals/createGetBarDimensions.d.ts

@@ -11,4 +11,17 @@ export declare function createGetBarDimensions(params: {
   y: number;
   height: number;
   width: number;
-} | null;
+} | null;
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+export declare function createGetBucketBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'bar'>;
+  numberOfGroups: number;
+}): (startIndex: number, endIndex: number, min: number, max: number, groupIndex: number) => {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+};

package/internals/createGetBarDimensions.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createGetBarDimensions = createGetBarDimensions;
+exports.createGetBucketBarDimensions = createGetBucketBarDimensions;
 var _findMinMax = require("./findMinMax");
 var _getBandSize = require("./getBandSize");
+/** Minimum on-screen gap (px) kept between merged (sampled) bars so they stay distinguishable. */
+const MIN_SAMPLED_BAR_GAP_PX = 2;
 function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
   const isVerticalAndPositive = verticalLayout && baseValue > 0;
   const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
@@ -58,4 +61,46 @@ function createGetBarDimensions(params) {
       width: verticalLayout ? barWidth : barSize
     };
   };
+}
+
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+function createGetBucketBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const baseScale = baseScaleConfig.scale;
+  const bandwidth = baseScale.bandwidth();
+  const step = baseScale.step();
+  const valueScale = verticalLayout ? yAxisConfig.scale : xAxisConfig.scale;
+  return function getBucketBarDimensions(startIndex, endIndex, min, max, groupIndex) {
+    const spanStart = baseScale(baseScaleConfig.data[startIndex]);
+    const bucketCount = endIndex - startIndex + 1;
+    const bucketStride = bucketCount * step;
+
+    // Keep the gap between buckets proportional to the bucket (same ratio as an unsampled chart),
+    // but never thinner than MIN_SAMPLED_BAR_GAP_PX so it stays visible at every level and zoom.
+    const gap = Math.min(bucketStride / 2, Math.max(bucketCount * (step - bandwidth), MIN_SAMPLED_BAR_GAP_PX));
+    const {
+      barWidth,
+      offset
+    } = (0, _getBandSize.getBandSize)(bucketStride - gap, numberOfGroups, baseScaleConfig.barGapRatio);
+    const barOffset = groupIndex * (barWidth + offset);
+    const valueCoordinates = [valueScale(min), valueScale(max)];
+    const [minValueCoord, maxValueCoord] = (0, _findMinMax.findMinMax)(valueCoordinates).map(v => Math.round(v));
+    let barSize = maxValueCoord - minValueCoord;
+    if (!series.hidden && barSize > 0) {
+      barSize = Math.max(series.minBarSize, barSize);
+    }
+    return {
+      x: verticalLayout ? spanStart + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : spanStart + barOffset,
+      height: verticalLayout ? barSize : barWidth,
+      width: verticalLayout ? barWidth : barSize
+    };
+  };
 }