@automattic/charts 4.11.1 → 4.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.cjs +856 -236
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +19 -13
  5. package/dist/index.d.cts +43 -4
  6. package/dist/index.d.ts +43 -4
  7. package/dist/index.js +855 -237
  8. package/dist/index.js.map +1 -1
  9. package/package.json +9 -9
  10. package/src/charts/bar-chart/bar-chart.tsx +134 -138
  11. package/src/charts/bar-chart/index.ts +3 -0
  12. package/src/charts/bar-chart/private/band-tooltip.tsx +41 -15
  13. package/src/charts/bar-chart/private/bar-layer.tsx +132 -0
  14. package/src/charts/bar-chart/private/comparison-bars-geometry.ts +22 -34
  15. package/src/charts/bar-chart/private/comparison-bars.tsx +9 -18
  16. package/src/charts/bar-chart/private/comparison-constants.ts +4 -10
  17. package/src/charts/bar-chart/private/grouped-bars.ts +68 -0
  18. package/src/charts/bar-chart/private/index.ts +7 -1
  19. package/src/charts/bar-chart/private/overlap-bars.ts +183 -0
  20. package/src/charts/bar-chart/private/selected-bar-ring.tsx +84 -0
  21. package/src/charts/bar-chart/private/slot-tooltip-members.tsx +29 -0
  22. package/src/charts/bar-chart/private/slotted-bar-series.tsx +84 -0
  23. package/src/charts/bar-chart/private/test/comparison-bars-geometry.test.ts +4 -11
  24. package/src/charts/bar-chart/private/test/comparison-bars.test.tsx +2 -3
  25. package/src/charts/bar-chart/private/test/grouped-bars.test.ts +87 -0
  26. package/src/charts/bar-chart/private/test/overlap-bars.test.ts +159 -0
  27. package/src/charts/bar-chart/private/use-bar-stops.ts +89 -0
  28. package/src/charts/bar-chart/private/use-overlap-slots.ts +194 -0
  29. package/src/charts/bar-chart/private/value-domain.ts +0 -10
  30. package/src/charts/bar-chart/test/bar-chart-overlap.test.tsx +347 -0
  31. package/src/charts/bar-chart/test/bar-chart.test.tsx +66 -19
  32. package/src/charts/bar-chart/test/use-bar-legend-items.test.tsx +81 -0
  33. package/src/charts/bar-chart/types.ts +3 -0
  34. package/src/charts/bar-chart/use-bar-colors.ts +46 -0
  35. package/src/charts/bar-chart/use-bar-legend-items.ts +87 -0
  36. package/src/charts/line-chart/line-chart.tsx +22 -17
  37. package/src/charts/line-chart/test/line-chart.test.tsx +165 -1
  38. package/src/charts/pie-chart/pie-chart.tsx +7 -2
  39. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +7 -2
  40. package/src/charts/private/pie-keyboard-navigation/index.ts +0 -1
  41. package/src/charts/private/{pie-keyboard-navigation/pie-keyboard-navigation.module.scss → selected-ring/selected-ring.module.scss} +11 -6
  42. package/src/charts/private/selected-ring/selected-ring.tsx +73 -0
  43. package/src/charts/private/{pie-keyboard-navigation/test/selected-segment-ring.test.ts → selected-ring/test/selected-ring.test.ts} +1 -1
  44. package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx +20 -0
  45. package/src/components/legend/hooks/use-chart-legend-items.ts +27 -3
  46. package/src/components/tooltip/xy-chart-tooltip.tsx +3 -2
  47. package/src/index.ts +8 -2
  48. package/src/providers/chart-context/global-charts-provider.tsx +2 -0
  49. package/src/providers/chart-context/test/chart-context.test.tsx +0 -13
  50. package/src/providers/chart-context/themes.ts +0 -1
  51. package/src/providers/chart-context/types.ts +2 -0
  52. package/src/test-utils/selected-bar-ring.ts +14 -0
  53. package/src/types.ts +10 -2
  54. package/src/charts/private/pie-keyboard-navigation/selected-segment-ring.tsx +0 -47
package/dist/index.css CHANGED
@@ -348,6 +348,25 @@
348
348
  transform: scaleX(1);
349
349
  }
350
350
  }
351
+ .a8ccharts-gx1_AW-selected-ring__far, .a8ccharts-gx1_AW-selected-ring__edge {
352
+ fill: none;
353
+ }
354
+
355
+ .a8ccharts-gx1_AW-selected-ring__far {
356
+ stroke-width: calc(4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
357
+ }
358
+
359
+ .a8ccharts-gx1_AW-selected-ring__edge {
360
+ stroke-width: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
361
+ }
362
+
363
+ .a8ccharts-gx1_AW-selected-ring__contrast {
364
+ stroke: var(--a8c-charts-color-background, #fff);
365
+ }
366
+
367
+ .a8ccharts-gx1_AW-selected-ring__focus {
368
+ stroke: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
369
+ }
351
370
  .a8ccharts-mGEVca-conversion-funnel-chart {
352
371
  position: relative;
353
372
  }
@@ -932,19 +951,6 @@
932
951
  transition: none;
933
952
  }
934
953
  }
935
- .a8ccharts-V2HDKq-selected-ring__contrast, .a8ccharts-V2HDKq-selected-ring__focus {
936
- fill: none;
937
- }
938
-
939
- .a8ccharts-V2HDKq-selected-ring__contrast {
940
- stroke: var(--a8c-charts-color-background, #fff);
941
- stroke-width: calc(4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
942
- }
943
-
944
- .a8ccharts-V2HDKq-selected-ring__focus {
945
- stroke: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
946
- stroke-width: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
947
- }
948
954
  .a8ccharts-gnszbG-pie-chart {
949
955
  isolation: isolate;
950
956
  }
package/dist/index.d.cts CHANGED
@@ -244,13 +244,20 @@ type SeriesData = {
244
244
  };
245
245
  /**
246
246
  * Visual styling for a bar series of a given semantic type (e.g. 'comparison').
247
- * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%);
248
- * `opacity` sets the shadow translucency.
247
+ * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%).
249
248
  */
250
249
  type BarStyles = {
251
250
  widthFactor?: number;
251
+ /**
252
+ * Draws the comparison bar translucent, in its primary's color, instead of the opaque tones the chart picks.
253
+ * @deprecated Comparison bars are opaque. Leave this unset; set the comparison series' `options.stroke` for a color of its own.
254
+ */
252
255
  opacity?: number;
253
256
  };
257
+ /**
258
+ * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot.
259
+ */
260
+ type BarChartLayout = 'grouped' | 'overlap';
254
261
  type MultipleDataPointsDate = {
255
262
  label: string;
256
263
  data: DataPointDate[];
@@ -810,6 +817,8 @@ interface ChartLegendOptions {
810
817
  comparisonItem?: SeriesChartLegendConfig['comparisonItem'];
811
818
  /** One static item per comparison series instead; see `SeriesChartLegendConfig`. */
812
819
  comparisonSeriesItems?: SeriesChartLegendConfig['comparisonSeriesItems'];
820
+ /** Each series' swatch color, by index, in place of its series color. */
821
+ seriesColors?: string[];
813
822
  }
814
823
  /**
815
824
  * Hook to transform chart data into legend items
@@ -1107,6 +1116,8 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
1107
1116
  /** CSS class for each primary bar, in addition to visx-bar. */
1108
1117
  barClassName?: (datum: DataPointDate) => string | undefined;
1109
1118
  orientation?: 'horizontal' | 'vertical';
1119
+ /** Defaults to `grouped`. */
1120
+ layout?: BarChartLayout;
1110
1121
  withPatterns?: boolean;
1111
1122
  showZeroValues?: boolean;
1112
1123
  /** Highlight the active band across the plot when tooltips are enabled. */
@@ -1126,6 +1137,32 @@ type BarChartResponsiveComponent = FC<BarChartBaseProps & ResponsiveConfig> & Ba
1126
1137
  declare const BarChart: BarChartComponent;
1127
1138
  declare const BarChartResponsive: BarChartResponsiveComponent;
1128
1139
  //#endregion
1140
+ //#region src/charts/bar-chart/use-bar-colors.d.ts
1141
+ type GetBarColors = (series: SeriesData[], options?: {
1142
+ layout?: BarChartLayout;
1143
+ }) => string[];
1144
+ /**
1145
+ * Reads the colors `BarChart` fills series with, so a custom tooltip or legend can match the bars.
1146
+ *
1147
+ * @return A function from series and a layout to each series' bar color, by index.
1148
+ */
1149
+ export declare function useBarColors(): GetBarColors;
1150
+ //#endregion
1151
+ //#region src/charts/bar-chart/use-bar-legend-items.d.ts
1152
+ type BarLegendOptions = Omit<ChartLegendOptions, 'seriesColors'> & {
1153
+ /** The layout the bars are drawn in. Unset, the items are the chart legend's own. */
1154
+ layout?: BarChartLayout;
1155
+ };
1156
+ /**
1157
+ * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
1158
+ *
1159
+ * @param data - The series the chart draws.
1160
+ * @param options - The legend options, and the layout the bars are drawn in.
1161
+ * @param legendShape - The shape of the legend swatches.
1162
+ * @return The legend items.
1163
+ */
1164
+ export declare function useBarLegendItems(data: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
1165
+ //#endregion
1129
1166
  //#region src/charts/bar-list-chart/bar-list-chart.d.ts
1130
1167
  interface BarListChartProps extends Exclude<BarChartProps, 'orientation' | 'size' | 'gridVisibility'> {
1131
1168
  options?: {
@@ -2218,7 +2255,7 @@ type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip
2218
2255
  * @param props.renderContainer - Deprecated; render the content alone when false.
2219
2256
  * @return The tooltip.
2220
2257
  */
2221
- export declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
2258
+ export declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal>;
2222
2259
  //#endregion
2223
2260
  //#region src/components/tooltip/xy-chart-tooltip.d.ts
2224
2261
  type FlattenedTooltipData = {
@@ -2341,6 +2378,8 @@ interface GlobalChartsContextValue {
2341
2378
  /** Locale and time zone every date the charts print is rendered in. */
2342
2379
  formatting: ChartFormatting;
2343
2380
  getElementStyles: (params: GetElementStylesParams) => ElementStyles;
2381
+ /** The chart background as an opaque hex, for colors that must keep contrast against it. Optional so a hand-built context value still type-checks. */
2382
+ backgroundColor?: string;
2344
2383
  toggleSeriesVisibility: (chartId: string, seriesLabel: string) => void;
2345
2384
  setSeriesVisibility: (chartId: string, seriesLabel: string, visible: boolean) => void;
2346
2385
  setChartHiddenSeries: (chartId: string, seriesLabels: readonly string[]) => void;
@@ -2420,5 +2459,5 @@ declare const defaultTheme: CompleteChartTheme;
2420
2459
  */
2421
2460
  export declare const useChartScopeElement: () => HTMLElement | null;
2422
2461
  //#endregion
2423
- export { type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type ComparisonItemLabel, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, type TrendIndicatorProps, type XyChartTooltipProps, defaultTheme };
2462
+ export { type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartLayout, type BarChartProps, BarChart as BarChartUnresponsive, type BarLegendOptions, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type ComparisonItemLabel, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, type TrendIndicatorProps, type XyChartTooltipProps, defaultTheme };
2424
2463
  //# sourceMappingURL=index.d.cts.map
package/dist/index.d.ts CHANGED
@@ -244,13 +244,20 @@ type SeriesData = {
244
244
  };
245
245
  /**
246
246
  * Visual styling for a bar series of a given semantic type (e.g. 'comparison').
247
- * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%);
248
- * `opacity` sets the shadow translucency.
247
+ * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%).
249
248
  */
250
249
  type BarStyles = {
251
250
  widthFactor?: number;
251
+ /**
252
+ * Draws the comparison bar translucent, in its primary's color, instead of the opaque tones the chart picks.
253
+ * @deprecated Comparison bars are opaque. Leave this unset; set the comparison series' `options.stroke` for a color of its own.
254
+ */
252
255
  opacity?: number;
253
256
  };
257
+ /**
258
+ * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot.
259
+ */
260
+ type BarChartLayout = 'grouped' | 'overlap';
254
261
  type MultipleDataPointsDate = {
255
262
  label: string;
256
263
  data: DataPointDate[];
@@ -810,6 +817,8 @@ interface ChartLegendOptions {
810
817
  comparisonItem?: SeriesChartLegendConfig['comparisonItem'];
811
818
  /** One static item per comparison series instead; see `SeriesChartLegendConfig`. */
812
819
  comparisonSeriesItems?: SeriesChartLegendConfig['comparisonSeriesItems'];
820
+ /** Each series' swatch color, by index, in place of its series color. */
821
+ seriesColors?: string[];
813
822
  }
814
823
  /**
815
824
  * Hook to transform chart data into legend items
@@ -1107,6 +1116,8 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
1107
1116
  /** CSS class for each primary bar, in addition to visx-bar. */
1108
1117
  barClassName?: (datum: DataPointDate) => string | undefined;
1109
1118
  orientation?: 'horizontal' | 'vertical';
1119
+ /** Defaults to `grouped`. */
1120
+ layout?: BarChartLayout;
1110
1121
  withPatterns?: boolean;
1111
1122
  showZeroValues?: boolean;
1112
1123
  /** Highlight the active band across the plot when tooltips are enabled. */
@@ -1126,6 +1137,32 @@ type BarChartResponsiveComponent = FC<BarChartBaseProps & ResponsiveConfig> & Ba
1126
1137
  declare const BarChart: BarChartComponent;
1127
1138
  declare const BarChartResponsive: BarChartResponsiveComponent;
1128
1139
  //#endregion
1140
+ //#region src/charts/bar-chart/use-bar-colors.d.ts
1141
+ type GetBarColors = (series: SeriesData[], options?: {
1142
+ layout?: BarChartLayout;
1143
+ }) => string[];
1144
+ /**
1145
+ * Reads the colors `BarChart` fills series with, so a custom tooltip or legend can match the bars.
1146
+ *
1147
+ * @return A function from series and a layout to each series' bar color, by index.
1148
+ */
1149
+ export declare function useBarColors(): GetBarColors;
1150
+ //#endregion
1151
+ //#region src/charts/bar-chart/use-bar-legend-items.d.ts
1152
+ type BarLegendOptions = Omit<ChartLegendOptions, 'seriesColors'> & {
1153
+ /** The layout the bars are drawn in. Unset, the items are the chart legend's own. */
1154
+ layout?: BarChartLayout;
1155
+ };
1156
+ /**
1157
+ * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
1158
+ *
1159
+ * @param data - The series the chart draws.
1160
+ * @param options - The legend options, and the layout the bars are drawn in.
1161
+ * @param legendShape - The shape of the legend swatches.
1162
+ * @return The legend items.
1163
+ */
1164
+ export declare function useBarLegendItems(data: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
1165
+ //#endregion
1129
1166
  //#region src/charts/bar-list-chart/bar-list-chart.d.ts
1130
1167
  interface BarListChartProps extends Exclude<BarChartProps, 'orientation' | 'size' | 'gridVisibility'> {
1131
1168
  options?: {
@@ -2218,7 +2255,7 @@ type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip
2218
2255
  * @param props.renderContainer - Deprecated; render the content alone when false.
2219
2256
  * @return The tooltip.
2220
2257
  */
2221
- export declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
2258
+ export declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal>;
2222
2259
  //#endregion
2223
2260
  //#region src/components/tooltip/xy-chart-tooltip.d.ts
2224
2261
  type FlattenedTooltipData = {
@@ -2341,6 +2378,8 @@ interface GlobalChartsContextValue {
2341
2378
  /** Locale and time zone every date the charts print is rendered in. */
2342
2379
  formatting: ChartFormatting;
2343
2380
  getElementStyles: (params: GetElementStylesParams) => ElementStyles;
2381
+ /** The chart background as an opaque hex, for colors that must keep contrast against it. Optional so a hand-built context value still type-checks. */
2382
+ backgroundColor?: string;
2344
2383
  toggleSeriesVisibility: (chartId: string, seriesLabel: string) => void;
2345
2384
  setSeriesVisibility: (chartId: string, seriesLabel: string, visible: boolean) => void;
2346
2385
  setChartHiddenSeries: (chartId: string, seriesLabels: readonly string[]) => void;
@@ -2420,5 +2459,5 @@ declare const defaultTheme: CompleteChartTheme;
2420
2459
  */
2421
2460
  export declare const useChartScopeElement: () => HTMLElement | null;
2422
2461
  //#endregion
2423
- export { type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type ComparisonItemLabel, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, type TrendIndicatorProps, type XyChartTooltipProps, defaultTheme };
2462
+ export { type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartLayout, type BarChartProps, BarChart as BarChartUnresponsive, type BarLegendOptions, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type ComparisonItemLabel, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, type TrendIndicatorProps, type XyChartTooltipProps, defaultTheme };
2424
2463
  //# sourceMappingURL=index.d.ts.map