@automattic/charts 4.12.0 → 4.14.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 (47) hide show
  1. package/CHANGELOG.md +35 -29
  2. package/TOKENS.md +3 -0
  3. package/dist/index.cjs +733 -2203
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +42 -13
  6. package/dist/index.d.cts +41 -125
  7. package/dist/index.d.ts +41 -125
  8. package/dist/index.js +756 -1881
  9. package/dist/index.js.map +1 -1
  10. package/package.json +9 -9
  11. package/src/charts/area-chart/area-chart.tsx +16 -6
  12. package/src/charts/area-chart/test/area-chart.test.tsx +42 -9
  13. package/src/charts/bar-chart/bar-chart.tsx +17 -12
  14. package/src/charts/bar-chart/private/index.ts +1 -1
  15. package/src/charts/bar-chart/private/slot-tooltip-members.tsx +4 -5
  16. package/src/charts/bar-chart/private/use-bar-stops.ts +1 -3
  17. package/src/charts/bar-chart/private/use-overlap-slots.ts +35 -16
  18. package/src/charts/bar-chart/test/bar-chart.test.tsx +115 -0
  19. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +24 -11
  20. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx +235 -182
  21. package/src/charts/conversion-funnel-chart/index.ts +2 -0
  22. package/src/charts/conversion-funnel-chart/private/index.ts +1 -0
  23. package/src/charts/conversion-funnel-chart/private/use-funnel-selection.ts +9 -47
  24. package/src/charts/conversion-funnel-chart/private/use-roving-step-focus.ts +83 -0
  25. package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx +312 -92
  26. package/src/charts/conversion-funnel-chart/test/use-funnel-selection.test.ts +23 -188
  27. package/src/charts/conversion-funnel-chart/types.ts +22 -0
  28. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +42 -2
  29. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +124 -36
  30. package/src/charts/leaderboard-chart/private/resolve-leaderboard-entries.ts +53 -0
  31. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +88 -0
  32. package/src/charts/leaderboard-chart/test/resolve-leaderboard-entries.test.ts +146 -0
  33. package/src/charts/leaderboard-chart/types.ts +6 -0
  34. package/src/charts/line-chart/line-chart.tsx +10 -8
  35. package/src/charts/line-chart/test/line-chart.test.tsx +75 -0
  36. package/src/components/legend/private/base-legend.tsx +13 -8
  37. package/src/components/legend/test/legend.test.tsx +125 -0
  38. package/src/components/legend/types.ts +9 -1
  39. package/src/components/tooltip/private/at-nearest-date.ts +49 -0
  40. package/src/components/tooltip/private/keyboard-stops.ts +67 -0
  41. package/src/components/tooltip/private/xy-chart-tooltip-overlay.tsx +10 -2
  42. package/src/components/tooltip/test/keyboard-stops.test.ts +36 -0
  43. package/src/components/tooltip/test/xy-chart-tooltip.test.tsx +135 -1
  44. package/src/components/tooltip/xy-chart-tooltip.tsx +8 -12
  45. package/src/index.ts +2 -0
  46. package/src/styles/chart-scope.scss +1 -0
  47. package/src/types.ts +5 -6
package/dist/index.d.ts CHANGED
@@ -7,7 +7,6 @@ import { LegendOrdinal } from "@visx/legend";
7
7
  import { CircleSubjectProps, ConnectorProps, LabelProps, LineSubjectProps } from "@visx/annotation";
8
8
  import { PieProvidedProps } from "@visx/shape";
9
9
  import { AxisRendererProps, AxisScale, Orientation, TickFormatter } from "@visx/axis";
10
- //#region src/types.d.ts
11
10
  type ValueOf<T> = T[keyof T];
12
11
  type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
13
12
  /**
@@ -164,17 +163,16 @@ type LeaderboardEntryFields = {
164
163
  */
165
164
  previousValue?: number;
166
165
  /**
167
- * Width of current bar, as % of the current value
166
+ * Width of current bar, as %. Derived from the values when omitted; a passed value wins.
167
+ * A negative share extends the bar from a shared zero point toward the inline start, for every row.
168
168
  */
169
- currentShare: number;
169
+ currentShare?: number;
170
170
  /**
171
- * Width of previous bar, as % of the current value. Omit when this row has
172
- * no matching comparison-period value.
171
+ * Width of previous bar, as %. Derived from `previousValue` when omitted; a passed value wins.
173
172
  */
174
173
  previousShare?: number;
175
174
  /**
176
- * Delta of the entry. Omit when the percentage change is unavailable, such
177
- * as when the row has no comparison value or its previous value is zero.
175
+ * Percentage change. Derived from the values when omitted; a passed value wins.
178
176
  */
179
177
  delta?: number;
180
178
  /**
@@ -734,8 +732,6 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
734
732
  };
735
733
  };
736
734
  };
737
- //#endregion
738
- //#region src/components/legend/types.d.ts
739
735
  type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
740
736
  type BaseLegendProps = VisxLegendProps & {
741
737
  items: BaseLegendItem[];
@@ -787,15 +783,19 @@ type BaseLegendItem = {
787
783
  interactive?: boolean;
788
784
  /** Label of the series this static item describes; the item is left out while it is hidden. */
789
785
  describesSeries?: string;
790
- };
791
- //#endregion
792
- //#region src/components/legend/legend.d.ts
786
+ } & ({
787
+ /** Pressed state of the toggle. */
788
+ pressed: boolean;
789
+ /** Makes an interactive legend item a toggle the consumer controls, instead of a series toggle. */
790
+ onToggle: () => void;
791
+ } | {
792
+ pressed?: never;
793
+ onToggle?: never;
794
+ });
793
795
  export declare const Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
794
796
  items?: BaseLegendItem[];
795
797
  chartId?: string;
796
798
  } & import("react").RefAttributes<HTMLDivElement>>;
797
- //#endregion
798
- //#region src/components/legend/hooks/use-chart-legend-items.d.ts
799
799
  type LegendValueDisplay = 'percentage' | 'value' | 'valueDisplay' | 'none';
800
800
  interface ChartLegendOptions {
801
801
  withGlyph?: boolean;
@@ -828,8 +828,6 @@ interface ChartLegendOptions {
828
828
  * @return Array of legend items ready for display
829
829
  */
830
830
  export declare function useChartLegendItems<T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[]>(data: T, options?: ChartLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
831
- //#endregion
832
- //#region src/charts/private/chart-instance-context/chart-instance-context.d.ts
833
831
  interface ChartInstanceRef {
834
832
  getScales: () => {
835
833
  xScale: unknown;
@@ -846,8 +844,6 @@ interface ChartInstanceRef {
846
844
  };
847
845
  };
848
846
  }
849
- //#endregion
850
- //#region src/visx/types.d.ts
851
847
  type RenderTooltipParams<Datum extends object> = TooltipContextType<Datum> & {
852
848
  colorScale?: PickD3Scale<'ordinal', string, string>;
853
849
  };
@@ -914,8 +910,6 @@ type XyChartTooltipProps<Datum extends object> = {
914
910
  */
915
911
  resizeObserverPolyfill?: UseTooltipPortalOptions['polyfill'];
916
912
  } & Omit<TooltipProps$1, 'left' | 'top' | 'children' | 'applyPositionStyle'>;
917
- //#endregion
918
- //#region src/charts/line-chart/types.d.ts
919
913
  type LineChartAnnotationProps = {
920
914
  datum: DataPointDate;
921
915
  title: string;
@@ -990,8 +984,6 @@ type TooltipDatum = {
990
984
  /** The series' reading, or null when the bucket has none. */
991
985
  value: number | null;
992
986
  };
993
- //#endregion
994
- //#region src/charts/area-chart/types.d.ts
995
987
  interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
996
988
  /**
997
989
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
@@ -1058,8 +1050,6 @@ interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityP
1058
1050
  rescaleYOnVisibilityChange?: boolean;
1059
1051
  children?: ReactNode;
1060
1052
  }
1061
- //#endregion
1062
- //#region src/charts/private/with-responsive/with-responsive.d.ts
1063
1053
  type ResponsiveConfig = {
1064
1054
  /**
1065
1055
  * The maximum width of the chart. Defaults to 1200.
@@ -1080,8 +1070,6 @@ type ResponsiveConfig = {
1080
1070
  */
1081
1071
  resizeDebounceTime?: number;
1082
1072
  };
1083
- //#endregion
1084
- //#region src/charts/area-chart/area-chart.d.ts
1085
1073
  type AreaChartSubComponents = {
1086
1074
  Legend: typeof Legend;
1087
1075
  };
@@ -1090,8 +1078,6 @@ type AreaChartComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & R
1090
1078
  type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<ChartInstanceRef>> & AreaChartSubComponents;
1091
1079
  declare const AreaChart: AreaChartComponent;
1092
1080
  declare const AreaChartResponsive: AreaChartResponsiveComponent;
1093
- //#endregion
1094
- //#region src/charts/bar-chart/types.d.ts
1095
1081
  type BandHighlightSelection = {
1096
1082
  datum: DataPointDate;
1097
1083
  key: string;
@@ -1126,8 +1112,6 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
1126
1112
  onBandHighlightChange?: (selection: BandHighlightSelection | null) => void;
1127
1113
  children?: ReactNode;
1128
1114
  }
1129
- //#endregion
1130
- //#region src/charts/bar-chart/bar-chart.d.ts
1131
1115
  type BarChartBaseProps = Optional<BarChartProps, 'width' | 'height' | 'size'>;
1132
1116
  interface BarChartSubComponents {
1133
1117
  Legend: ComponentType<React.ComponentProps<typeof Legend>>;
@@ -1136,8 +1120,6 @@ type BarChartComponent = FC<BarChartBaseProps> & BarChartSubComponents;
1136
1120
  type BarChartResponsiveComponent = FC<BarChartBaseProps & ResponsiveConfig> & BarChartSubComponents;
1137
1121
  declare const BarChart: BarChartComponent;
1138
1122
  declare const BarChartResponsive: BarChartResponsiveComponent;
1139
- //#endregion
1140
- //#region src/charts/bar-chart/use-bar-colors.d.ts
1141
1123
  type GetBarColors = (series: SeriesData[], options?: {
1142
1124
  layout?: BarChartLayout;
1143
1125
  }) => string[];
@@ -1147,8 +1129,6 @@ type GetBarColors = (series: SeriesData[], options?: {
1147
1129
  * @return A function from series and a layout to each series' bar color, by index.
1148
1130
  */
1149
1131
  export declare function useBarColors(): GetBarColors;
1150
- //#endregion
1151
- //#region src/charts/bar-chart/use-bar-legend-items.d.ts
1152
1132
  type BarLegendOptions = Omit<ChartLegendOptions, 'seriesColors'> & {
1153
1133
  /** The layout the bars are drawn in. Unset, the items are the chart legend's own. */
1154
1134
  layout?: BarChartLayout;
@@ -1162,8 +1142,6 @@ type BarLegendOptions = Omit<ChartLegendOptions, 'seriesColors'> & {
1162
1142
  * @return The legend items.
1163
1143
  */
1164
1144
  export declare function useBarLegendItems(data: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
1165
- //#endregion
1166
- //#region src/charts/bar-list-chart/bar-list-chart.d.ts
1167
1145
  interface BarListChartProps extends Exclude<BarChartProps, 'orientation' | 'size' | 'gridVisibility'> {
1168
1146
  options?: {
1169
1147
  /**
@@ -1232,8 +1210,6 @@ declare const BarListChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRat
1232
1210
  height?: number;
1233
1211
  size?: number;
1234
1212
  } & ResponsiveConfig) => import("react").JSX.Element;
1235
- //#endregion
1236
- //#region src/charts/conversion-funnel-chart/types.d.ts
1237
1213
  /**
1238
1214
  * Represents a single step in the conversion funnel
1239
1215
  */
@@ -1272,12 +1248,30 @@ interface MainMetricRenderProps {
1272
1248
  className?: string;
1273
1249
  changeColor?: string;
1274
1250
  }
1251
+ /**
1252
+ * A labeled line in a funnel step's tooltip
1253
+ */
1254
+ interface FunnelTooltipRow {
1255
+ label: string;
1256
+ value: string;
1257
+ }
1258
+ /**
1259
+ * What a funnel step's tooltip shows below or beside the step's name. Screen readers read the same content after the name.
1260
+ */
1261
+ interface FunnelTooltipContent {
1262
+ /** Shown on the name's line, e.g. the step's count */
1263
+ value?: string;
1264
+ /** Labeled lines below the name */
1265
+ rows?: FunnelTooltipRow[];
1266
+ }
1275
1267
  /**
1276
1268
  * Render prop for customizing tooltip content
1277
1269
  */
1278
1270
  interface TooltipRenderProps {
1279
1271
  step: FunnelStep;
1280
1272
  index: number;
1273
+ /** The step's tooltip content. Screen readers read the whole rendered tooltip as the step's description. */
1274
+ content: FunnelTooltipContent;
1281
1275
  top: number;
1282
1276
  left: number;
1283
1277
  /** @deprecated The tooltip box draws the package surface; this is no longer set. */
@@ -1307,11 +1301,11 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
1307
1301
  renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
1308
1302
  /** Custom render function for tooltip content */
1309
1303
  renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
1304
+ /** What each step's tooltip shows, which screen readers also read after the step's name. Defaults to the count and the conversion rate. */
1305
+ getTooltipContent?: (step: FunnelStep, index: number) => FunnelTooltipContent;
1310
1306
  /** Inline styles merged over the tooltip box defaults. */
1311
1307
  tooltipStyle?: React.CSSProperties;
1312
1308
  }
1313
- //#endregion
1314
- //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.d.ts
1315
1309
  /**
1316
1310
  * ConversionFunnelChart component with provider wrapper
1317
1311
  *
@@ -1319,8 +1313,6 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
1319
1313
  * @return JSX element representing the conversion funnel chart
1320
1314
  */
1321
1315
  declare const ConversionFunnelChartWithProvider: FC<ConversionFunnelChartProps>;
1322
- //#endregion
1323
- //#region src/charts/geo-chart/types.d.ts
1324
1316
  /**
1325
1317
  * Region to display on the map.
1326
1318
  * Use 'world' for global view or any ISO 3166-1 alpha-2 country code
@@ -1389,16 +1381,12 @@ interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | '
1389
1381
  */
1390
1382
  renderPlaceholder?: () => React.ReactNode;
1391
1383
  }
1392
- //#endregion
1393
- //#region src/charts/geo-chart/geo-chart.d.ts
1394
1384
  declare const GeoChartWithProvider: FC<GeoChartProps>;
1395
1385
  declare const GeoChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<GeoChartProps, "height" | "size" | "width"> & {
1396
1386
  width?: number;
1397
1387
  height?: number;
1398
1388
  size?: number;
1399
1389
  } & ResponsiveConfig) => import("react").JSX.Element;
1400
- //#endregion
1401
- //#region src/charts/heatmap-chart/types.d.ts
1402
1390
  /** A single heatmap cell. `value: null` marks an empty cell, as does a zero when no value is negative. */
1403
1391
  type HeatmapCell = {
1404
1392
  /** Per-cell label used in the tooltip / accessible name. */
@@ -1553,8 +1541,6 @@ type MonthCalendarHeatmapResult = {
1553
1541
  /** For `HeatmapChart`'s `columnGroups`: one per month, in order. */
1554
1542
  columnGroups: HeatmapColumnGroup[];
1555
1543
  };
1556
- //#endregion
1557
- //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
1558
1544
  interface HeatmapLegendProps {
1559
1545
  /** Number of color swatches in the scale, not counting the empty-cell swatch. Default 5. */
1560
1546
  steps?: number;
@@ -1567,15 +1553,11 @@ interface HeatmapLegendProps {
1567
1553
  moreLabel?: string;
1568
1554
  }
1569
1555
  declare const HeatmapLegend: FC<HeatmapLegendProps>;
1570
- //#endregion
1571
- //#region src/charts/heatmap-chart/heatmap-chart.d.ts
1572
1556
  interface HeatmapChartSubComponents {
1573
1557
  Legend: typeof HeatmapLegend;
1574
1558
  }
1575
1559
  declare const HeatmapChart: FC<HeatmapChartProps> & HeatmapChartSubComponents;
1576
1560
  declare const HeatmapChartResponsive: FC<HeatmapChartProps & ResponsiveConfig> & HeatmapChartSubComponents;
1577
- //#endregion
1578
- //#region src/charts/heatmap-chart/build-calendar-data.d.ts
1579
1561
  /**
1580
1562
  * Lay a day-bucketed series out as calendar columns.
1581
1563
  *
@@ -1584,8 +1566,6 @@ declare const HeatmapChartResponsive: FC<HeatmapChartProps & ResponsiveConfig> &
1584
1566
  * @return Columns and row labels for `HeatmapChart`.
1585
1567
  */
1586
1568
  export declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: CalendarHeatmapOptions) => CalendarHeatmapResult;
1587
- //#endregion
1588
- //#region src/charts/heatmap-chart/build-month-calendar-data.d.ts
1589
1569
  /**
1590
1570
  * Lay a day-keyed map out as one month calendar per month, weekdays across and
1591
1571
  * weeks down, for `HeatmapChart` with `columnGroups`.
@@ -1596,8 +1576,6 @@ export declare const buildCalendarHeatmapData: (series: DataPointDate[], options
1596
1576
  * @return Columns and one group per month; empty for an invalid or reversed range.
1597
1577
  */
1598
1578
  export declare const buildMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
1599
- //#endregion
1600
- //#region src/charts/heatmap-chart/use-calendar-heatmap-data.d.ts
1601
1579
  /**
1602
1580
  * `buildCalendarHeatmapData` with the locale and zone taken from
1603
1581
  * `GlobalChartsProvider` where the caller names neither.
@@ -1607,8 +1585,6 @@ export declare const buildMonthCalendarHeatmapData: (valueByDay: Record<string,
1607
1585
  * @return Columns and row labels for `HeatmapChart`.
1608
1586
  */
1609
1587
  export declare const useCalendarHeatmapData: (series: DataPointDate[], options?: CalendarHeatmapOptions) => CalendarHeatmapResult;
1610
- //#endregion
1611
- //#region src/charts/heatmap-chart/use-month-calendar-heatmap-data.d.ts
1612
1588
  /**
1613
1589
  * `buildMonthCalendarHeatmapData` with the locale taken from `GlobalChartsProvider`
1614
1590
  * where the caller names none.
@@ -1619,8 +1595,6 @@ export declare const useCalendarHeatmapData: (series: DataPointDate[], options?:
1619
1595
  * @return Columns and groups for `HeatmapChart`.
1620
1596
  */
1621
1597
  export declare const useMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
1622
- //#endregion
1623
- //#region src/charts/leaderboard-chart/types.d.ts
1624
1598
  interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation' | 'ariaLabel'> {
1625
1599
  /**
1626
1600
  * Entries to display. Declared here rather than picked, since the base type
@@ -1635,6 +1609,11 @@ interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, '
1635
1609
  * Whether to overlay the label on top of bar
1636
1610
  */
1637
1611
  withOverlayLabel?: boolean;
1612
+ /**
1613
+ * How a negative value draws: `diverge` puts every row on a shared zero point, `clamp` draws it as an empty bar.
1614
+ * @default 'diverge'
1615
+ */
1616
+ negativeBars?: 'diverge' | 'clamp';
1638
1617
  /**
1639
1618
  * Primary color for current period bars
1640
1619
  */
@@ -1688,8 +1667,6 @@ interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, '
1688
1667
  */
1689
1668
  children?: ReactNode;
1690
1669
  }
1691
- //#endregion
1692
- //#region src/charts/leaderboard-chart/leaderboard-chart.d.ts
1693
1670
  declare const LeaderboardChart: FC<LeaderboardChartProps> & {
1694
1671
  Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
1695
1672
  items?: BaseLegendItem[];
@@ -1706,8 +1683,6 @@ declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspe
1706
1683
  chartId?: string;
1707
1684
  } & import("react").RefAttributes<HTMLDivElement>>;
1708
1685
  };
1709
- //#endregion
1710
- //#region src/utils/bucket-info.d.ts
1711
1686
  /**
1712
1687
  * How this data was classified, for consumers that render their own labels.
1713
1688
  *
@@ -1716,8 +1691,6 @@ declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspe
1716
1691
  * @return The declared or inferred bucket, and the resolution formats key on.
1717
1692
  */
1718
1693
  export declare const getBucketInfo: (data: SeriesData[], tickResolution?: TickResolution) => BucketInfo;
1719
- //#endregion
1720
- //#region src/utils/date-parsing.d.ts
1721
1694
  /**
1722
1695
  * Parses any supported date string format into an instant, dated in `timeZone` or the runtime's own
1723
1696
  *
@@ -1735,8 +1708,6 @@ export declare const getBucketInfo: (data: SeriesData[], tickResolution?: TickRe
1735
1708
  * @return {Date} A Date object representing the parsed instant, or an invalid Date if parsing fails
1736
1709
  */
1737
1710
  export declare const parseAsLocalDate: (dateString: string, timeZone?: string) => Date;
1738
- //#endregion
1739
- //#region src/utils/format-metric-value.d.ts
1740
1711
  /**
1741
1712
  * Types for formatMetricValue
1742
1713
  */
@@ -1759,8 +1730,6 @@ type FormatMetricValueOptions = {
1759
1730
  * @return Formatted string
1760
1731
  */
1761
1732
  export declare const formatMetricValue: (value: string | number, type?: MetricValueType, { decimals, useMultipliers, signDisplay }?: FormatMetricValueOptions) => string;
1762
- //#endregion
1763
- //#region src/utils/format-percentage.d.ts
1764
1733
  /**
1765
1734
  * Format a percentage value with smart decimal handling.
1766
1735
  * Uses `@automattic/number-formatters` for consistent formatting.
@@ -1770,8 +1739,6 @@ export declare const formatMetricValue: (value: string | number, type?: MetricVa
1770
1739
  * @return Formatted percentage string (e.g., "30%", "30.1%", "30.25%")
1771
1740
  */
1772
1741
  export declare const formatPercentage: (value: number) => string;
1773
- //#endregion
1774
- //#region src/utils/merge-themes.d.ts
1775
1742
  /**
1776
1743
  * Merges chart themes with proper precedence.
1777
1744
  * The second theme (override) takes precedence over the first theme (base).
@@ -1782,8 +1749,6 @@ export declare const formatPercentage: (value: number) => string;
1782
1749
  */
1783
1750
  export declare function mergeThemes(baseTheme: CompleteChartTheme, overrideTheme: Partial<ChartTheme>): CompleteChartTheme;
1784
1751
  export declare function mergeThemes(baseTheme: ChartTheme, overrideTheme: Partial<ChartTheme>): ChartTheme;
1785
- //#endregion
1786
- //#region src/utils/color-utils.d.ts
1787
1752
  /**
1788
1753
  * Check if a value is a valid 6-digit hex color
1789
1754
  * @param hex - The value to check
@@ -1869,8 +1834,6 @@ export declare const relativeLuminance: (hex: string) => number;
1869
1834
  * @return true if light text should be used; false (dark text) for malformed colors
1870
1835
  */
1871
1836
  export declare const prefersLightText: (backgroundHex: string) => boolean;
1872
- //#endregion
1873
- //#region src/utils/resolve-css-var.d.ts
1874
1837
  /**
1875
1838
  * Resolves a CSS custom property (variable) to its computed value.
1876
1839
  * Handles multiple formats:
@@ -1884,8 +1847,6 @@ export declare const prefersLightText: (backgroundHex: string) => boolean;
1884
1847
  * @return The resolved value, fallback value, or null if unresolvable
1885
1848
  */
1886
1849
  export declare const resolveCssVariable: (value: string, element?: HTMLElement | null) => string | null;
1887
- //#endregion
1888
- //#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.d.ts
1889
1850
  /**
1890
1851
  * Hook to create legend items from leaderboard data
1891
1852
  * @param root0 - Configuration object
@@ -1910,17 +1871,11 @@ export declare function useLeaderboardLegendItems({ data, primaryColor, secondar
1910
1871
  comparison?: string;
1911
1872
  };
1912
1873
  }): BaseLegendItem[];
1913
- //#endregion
1914
- //#region src/charts/line-chart/private/line-chart-annotations-overlay.d.ts
1915
1874
  interface LineChartAnnotationsProps {
1916
1875
  children?: ReactNode;
1917
1876
  }
1918
1877
  declare const LineChartAnnotationsOverlay: FC<LineChartAnnotationsProps>;
1919
- //#endregion
1920
- //#region src/charts/line-chart/private/line-chart-annotation.d.ts
1921
1878
  declare const LineChartAnnotation: FC<LineChartAnnotationProps>;
1922
- //#endregion
1923
- //#region src/charts/line-chart/line-chart.d.ts
1924
1879
  type LineChartAnnotationComponents = {
1925
1880
  AnnotationsOverlay: typeof LineChartAnnotationsOverlay;
1926
1881
  Annotation: typeof LineChartAnnotation;
@@ -1931,8 +1886,6 @@ type LineChartComponent = React.ForwardRefExoticComponent<LineChartBaseProps & R
1931
1886
  type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<ChartInstanceRef>> & LineChartAnnotationComponents;
1932
1887
  declare const LineChart: LineChartComponent;
1933
1888
  declare const LineChartResponsive: LineChartResponsiveComponent;
1934
- //#endregion
1935
- //#region src/charts/private/chart-composition/types.d.ts
1936
1889
  /**
1937
1890
  * Base interface for chart subcomponents in the composition API
1938
1891
  */
@@ -1947,8 +1900,6 @@ interface BaseChartSubComponents {
1947
1900
  * @template TSubComponents - Additional subcomponents beyond the base ones
1948
1901
  */
1949
1902
  type ChartComponentWithComposition<TProps, TSubComponents extends BaseChartSubComponents = BaseChartSubComponents> = FC<TProps> & TSubComponents;
1950
- //#endregion
1951
- //#region src/charts/pie-chart/pie-chart.d.ts
1952
1903
  /**
1953
1904
  * Parameters passed to the renderTooltip function for pie charts.
1954
1905
  */
@@ -2018,8 +1969,6 @@ type PieChartComponent = ChartComponentWithComposition<PieChartBaseProps>;
2018
1969
  type PieChartResponsiveComponent = ChartComponentWithComposition<PieChartBaseProps & ResponsiveConfig>;
2019
1970
  declare const PieChart: PieChartComponent;
2020
1971
  declare const PieChartResponsive: PieChartResponsiveComponent;
2021
- //#endregion
2022
- //#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.d.ts
2023
1972
  /**
2024
1973
  * Parameters passed to the renderTooltip function for semi-circle charts.
2025
1974
  */
@@ -2085,8 +2034,6 @@ type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<PieSe
2085
2034
  type ArcData = PieProvidedProps<DataPointPercentageCalculated>['arcs'][number];
2086
2035
  declare const PieSemiCircleChart: PieSemiCircleChartComponent;
2087
2036
  declare const PieSemiCircleChartResponsive: PieSemiCircleChartResponsiveComponent;
2088
- //#endregion
2089
- //#region src/charts/sparkline/types.d.ts
2090
2037
  type SparklineDataPoint = number;
2091
2038
  type GradientConfig = {
2092
2039
  /**
@@ -2174,8 +2121,6 @@ interface SparklineProps {
2174
2121
  */
2175
2122
  animation?: boolean;
2176
2123
  }
2177
- //#endregion
2178
- //#region src/charts/sparkline/sparkline.d.ts
2179
2124
  /**
2180
2125
  * Sparkline - A minimal line chart for inline data visualization.
2181
2126
  *
@@ -2195,8 +2140,6 @@ declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, wid
2195
2140
  height?: number;
2196
2141
  size?: number;
2197
2142
  } & ResponsiveConfig) => import("react").JSX.Element;
2198
- //#endregion
2199
- //#region src/components/tooltip/types.d.ts
2200
2143
  type TooltipProps = {
2201
2144
  data: {
2202
2145
  label: string;
@@ -2208,8 +2151,6 @@ type TooltipData = {
2208
2151
  value: number;
2209
2152
  valueDisplay?: string;
2210
2153
  };
2211
- //#endregion
2212
- //#region src/components/tooltip/base-tooltip.d.ts
2213
2154
  type TooltipComponentProps = {
2214
2155
  data: TooltipData;
2215
2156
  className?: string;
@@ -2256,8 +2197,6 @@ type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip
2256
2197
  * @return The tooltip.
2257
2198
  */
2258
2199
  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>;
2259
- //#endregion
2260
- //#region src/components/tooltip/xy-chart-tooltip.d.ts
2261
2200
  type FlattenedTooltipData = {
2262
2201
  datum: DataPointDate;
2263
2202
  seriesLabel: string;
@@ -2276,7 +2215,7 @@ interface XYChartTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, '
2276
2215
  */
2277
2216
  tooltipData?: FlattenedTooltipData[];
2278
2217
  /**
2279
- * For line charts: series data to show all series at selected data point
2218
+ * For line charts: series data to show every series at the selected date
2280
2219
  * When provided, shows all series instead of individual tooltips
2281
2220
  */
2282
2221
  series?: SeriesData[];
@@ -2289,8 +2228,6 @@ interface XYChartTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, '
2289
2228
  export declare const XYChartTooltip: React.FC<XYChartTooltipProps>;
2290
2229
  /** @deprecated Use `XYChartTooltip`. */
2291
2230
  export declare const AccessibleTooltip: import("react").FC<XYChartTooltipProps>;
2292
- //#endregion
2293
- //#region src/components/tooltip/tooltip-box.d.ts
2294
2231
  type TooltipBoxProps = HTMLAttributes<HTMLDivElement> & {
2295
2232
  /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
2296
2233
  unstyled?: boolean;
@@ -2307,8 +2244,6 @@ export declare const TooltipBox: import("react").ForwardRefExoticComponent<HTMLA
2307
2244
  /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
2308
2245
  unstyled?: boolean;
2309
2246
  } & import("react").RefAttributes<HTMLDivElement>>;
2310
- //#endregion
2311
- //#region src/components/trend-indicator/types.d.ts
2312
2247
  /**
2313
2248
  * The direction of the trend
2314
2249
  */
@@ -2339,8 +2274,6 @@ type TrendIndicatorProps = {
2339
2274
  */
2340
2275
  showIcon?: boolean;
2341
2276
  };
2342
- //#endregion
2343
- //#region src/components/trend-indicator/trend-indicator.d.ts
2344
2277
  /**
2345
2278
  * TrendIndicator displays a directional trend with a value.
2346
2279
  * Used to show percentage changes or growth metrics.
@@ -2349,8 +2282,6 @@ type TrendIndicatorProps = {
2349
2282
  * @return {JSX.Element} The rendered trend indicator
2350
2283
  */
2351
2284
  export declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
2352
- //#endregion
2353
- //#region src/providers/chart-context/types.d.ts
2354
2285
  interface ChartRegistration {
2355
2286
  legendItems: BaseLegendItem[];
2356
2287
  chartType: ChartType;
@@ -2391,8 +2322,6 @@ interface GlobalChartsContextValue {
2391
2322
  getHiddenSeries: (chartId: string) => Set<string>;
2392
2323
  isColorPaletteResolved: boolean;
2393
2324
  }
2394
- //#endregion
2395
- //#region src/providers/chart-context/global-charts-provider.d.ts
2396
2325
  export declare const GlobalChartsContext: import("react").Context<GlobalChartsContextValue>;
2397
2326
  interface GlobalChartsProviderProps {
2398
2327
  children: ReactNode;
@@ -2409,11 +2338,7 @@ interface GlobalChartsProviderProps {
2409
2338
  timeZone?: string;
2410
2339
  }
2411
2340
  export declare const GlobalChartsProvider: FC<GlobalChartsProviderProps>;
2412
- //#endregion
2413
- //#region src/providers/chart-context/hooks/use-global-charts-context.d.ts
2414
2341
  export declare const useGlobalChartsContext: () => GlobalChartsContextValue;
2415
- //#endregion
2416
- //#region src/providers/chart-context/hooks/use-chart-registration.d.ts
2417
2342
  export declare const useChartRegistration: ({ chartId, legendItems, chartType, isDataValid, metadata }: {
2418
2343
  chartId: string;
2419
2344
  legendItems: BaseLegendItem[];
@@ -2421,16 +2346,12 @@ export declare const useChartRegistration: ({ chartId, legendItems, chartType, i
2421
2346
  isDataValid: boolean;
2422
2347
  metadata?: Record<string, unknown>;
2423
2348
  }) => void;
2424
- //#endregion
2425
- //#region src/providers/chart-context/hooks/use-global-charts-theme.d.ts
2426
2349
  /**
2427
2350
  * Hook to get the global chart theme from GlobalChartsProvider
2428
2351
  *
2429
2352
  * @return The global chart theme
2430
2353
  */
2431
2354
  export declare const useGlobalChartsTheme: () => CompleteChartTheme;
2432
- //#endregion
2433
- //#region src/providers/chart-context/hooks/use-chart-formatting.d.ts
2434
2355
  /**
2435
2356
  * The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
2436
2357
  *
@@ -2441,8 +2362,6 @@ export declare const useGlobalChartsTheme: () => CompleteChartTheme;
2441
2362
  * @return The host's formatting context.
2442
2363
  */
2443
2364
  export declare const useChartFormatting: () => ChartFormatting;
2444
- //#endregion
2445
- //#region src/providers/chart-context/themes.d.ts
2446
2365
  /**
2447
2366
  * Default theme configuration: the shape and spacing a consumer can override.
2448
2367
  *
@@ -2450,14 +2369,11 @@ export declare const useChartFormatting: () => ChartFormatting;
2450
2369
  * chains that deliver those live in `private/catalog-pointers.ts`.
2451
2370
  */
2452
2371
  declare const defaultTheme: CompleteChartTheme;
2453
- //#endregion
2454
- //#region src/providers/chart-scope/use-chart-scope-element.d.ts
2455
2372
  /**
2456
2373
  * Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
2457
2374
  *
2458
2375
  * @return {HTMLElement | null} The nearest chart scope element, or `null`.
2459
2376
  */
2460
2377
  export declare const useChartScopeElement: () => HTMLElement | null;
2461
- //#endregion
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 };
2378
+ 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, type FunnelTooltipContent, type FunnelTooltipRow, 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 };
2463
2379
  //# sourceMappingURL=index.d.ts.map