@automattic/charts 3.0.0 → 3.1.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 (62) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/TOKENS.md +3 -3
  3. package/dist/index.cjs +235 -123
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +23 -14
  6. package/dist/index.d.cts +51 -14
  7. package/dist/index.d.ts +51 -14
  8. package/dist/index.js +236 -125
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/charts/area-chart/area-chart.tsx +24 -24
  12. package/src/charts/area-chart/private/overlays.tsx +3 -3
  13. package/src/charts/area-chart/test/area-chart.test.tsx +301 -11
  14. package/src/charts/area-chart/types.ts +4 -3
  15. package/src/charts/bar-chart/bar-chart.tsx +21 -15
  16. package/src/charts/bar-chart/test/bar-chart.test.tsx +255 -2
  17. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +6 -6
  18. package/src/charts/geo-chart/geo-chart.module.scss +8 -0
  19. package/src/charts/heatmap-chart/heatmap-chart.module.scss +9 -0
  20. package/src/charts/heatmap-chart/heatmap-chart.tsx +31 -8
  21. package/src/charts/heatmap-chart/private/build-calendar-data.ts +65 -5
  22. package/src/charts/heatmap-chart/test/build-calendar-data.test.ts +125 -0
  23. package/src/charts/heatmap-chart/types.ts +8 -0
  24. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +17 -22
  25. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +107 -1
  26. package/src/charts/line-chart/line-chart.module.scss +2 -2
  27. package/src/charts/line-chart/line-chart.tsx +31 -27
  28. package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +2 -2
  29. package/src/charts/line-chart/test/line-chart.test.tsx +262 -5
  30. package/src/charts/line-chart/types.ts +4 -3
  31. package/src/charts/pie-chart/pie-chart.tsx +8 -13
  32. package/src/charts/pie-chart/test/pie-chart.test.tsx +73 -1
  33. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -2
  34. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +8 -13
  35. package/src/charts/private/{single-chart-context/single-chart-context.tsx → chart-instance-context/chart-instance-context.ts} +1 -5
  36. package/src/charts/private/chart-instance-context/index.ts +3 -0
  37. package/src/charts/private/{single-chart-context/use-single-chart-context.ts → chart-instance-context/use-chart-instance-context.ts} +1 -3
  38. package/src/charts/private/svg-empty-state/get-all-hidden-message.ts +41 -0
  39. package/src/charts/private/svg-empty-state/index.ts +1 -0
  40. package/src/charts/private/svg-empty-state/test/get-all-hidden-message.test.ts +15 -0
  41. package/src/charts/private/x-zoom/test/x-zoom.test.tsx +2 -2
  42. package/src/charts/private/x-zoom/x-zoom.tsx +2 -2
  43. package/src/components/legend/legend.tsx +4 -4
  44. package/src/components/legend/private/base-legend.module.scss +1 -1
  45. package/src/components/legend/private/base-legend.tsx +67 -18
  46. package/src/components/legend/test/legend.test.tsx +100 -4
  47. package/src/components/tooltip/accessible-tooltip.tsx +13 -2
  48. package/src/components/trend-indicator/trend-indicator.module.scss +1 -1
  49. package/src/hooks/index.ts +1 -1
  50. package/src/hooks/{use-interactive-legend-data.ts → use-legend-visibility-data.ts} +29 -30
  51. package/src/index.ts +3 -1
  52. package/src/providers/chart-context/global-charts-provider.tsx +92 -18
  53. package/src/providers/chart-context/hooks/use-default-hidden-series.ts +47 -0
  54. package/src/providers/chart-context/test/chart-context.test.tsx +142 -0
  55. package/src/providers/chart-context/test/use-default-hidden-series-paint.test.tsx +56 -0
  56. package/src/providers/chart-context/test/use-default-hidden-series.ssr.test.tsx +39 -0
  57. package/src/providers/chart-context/test/use-default-hidden-series.test.tsx +222 -0
  58. package/src/providers/chart-context/types.ts +7 -1
  59. package/src/styles/chart-scope.scss +2 -2
  60. package/src/styles/test/wpds-fallbacks.test.ts +131 -0
  61. package/src/types.ts +12 -0
  62. package/src/charts/private/single-chart-context/index.ts +0 -8
package/dist/index.css CHANGED
@@ -16,8 +16,8 @@
16
16
  --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
17
17
  --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
18
18
  --a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
19
- --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, #3858e9);
20
- --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, #3858e9);
19
+ --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
20
+ --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
21
21
  --a8c-charts-elevation-xs:
22
22
  0 1px 1px 0 #00000008,
23
23
  0 1px 2px 0 #00000005,
@@ -85,7 +85,7 @@
85
85
  }
86
86
 
87
87
  .a8ccharts-04TogW-legend-item-value {
88
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
88
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
89
89
  flex-shrink: 0;
90
90
  }
91
91
  .a8ccharts--zY0xG-tooltip {
@@ -175,7 +175,7 @@
175
175
  }
176
176
 
177
177
  .a8ccharts-inuQka-line-chart__tooltip-date {
178
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
178
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
179
179
  padding-bottom: var(--wpds-dimension-padding-md, 12px);
180
180
  }
181
181
 
@@ -184,7 +184,7 @@
184
184
  }
185
185
 
186
186
  .a8ccharts-inuQka-line-chart__tooltip-label {
187
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
187
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
188
188
  padding-right: var(--wpds-dimension-padding-lg, 16px);
189
189
  }
190
190
 
@@ -330,9 +330,9 @@
330
330
  .a8ccharts-mGEVca-main-rate {
331
331
  color: var(--a8c-charts-color-label);
332
332
  text-overflow: ellipsis;
333
- font-size: var(--wpds-typography-font-size-xl, 18px);
333
+ font-size: var(--wpds-typography-font-size-xl, 20px);
334
334
  font-style: normal;
335
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
335
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
336
336
  line-height: var(--wpds-typography-line-height-sm, 20px);
337
337
  margin: 0;
338
338
  overflow: hidden;
@@ -342,7 +342,7 @@
342
342
  text-overflow: ellipsis;
343
343
  font-size: var(--wpds-typography-font-size-md, 13px);
344
344
  font-style: normal;
345
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
345
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
346
346
  line-height: var(--wpds-typography-line-height-sm, 20px);
347
347
  margin: 0;
348
348
  overflow: hidden;
@@ -381,7 +381,7 @@
381
381
  .a8ccharts-mGEVca-step-rate {
382
382
  color: var(--a8c-charts-color-label);
383
383
  font-size: var(--wpds-typography-font-size-md, 13px);
384
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
384
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
385
385
  line-height: var(--wpds-typography-line-height-xs, 16px);
386
386
  }
387
387
 
@@ -433,18 +433,22 @@
433
433
  color: var(--a8c-charts-color-label);
434
434
  font-size: var(--wpds-typography-font-size-md, 13px);
435
435
  font-style: normal;
436
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
436
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
437
437
  line-height: var(--wpds-typography-line-height-sm, 20px);
438
438
  }
439
439
 
440
440
  .a8ccharts-mGEVca-empty-state {
441
441
  text-align: center;
442
442
  color: var(--a8c-charts-color-label-secondary);
443
- font-size: var(--wpds-typography-font-size-lg, 16px);
443
+ font-size: var(--wpds-typography-font-size-lg, 15px);
444
444
  }
445
445
  .a8ccharts-8hS2IW-container {
446
446
  position: relative;
447
447
  }
448
+
449
+ .a8ccharts-8hS2IW-container .google-visualization-tooltip {
450
+ white-space: nowrap;
451
+ }
448
452
  .a8ccharts-O3YMOW-heatmap-chart {
449
453
  width: 100%;
450
454
  height: 100%;
@@ -525,6 +529,11 @@
525
529
  pointer-events: none;
526
530
  }
527
531
 
532
+ .a8ccharts-O3YMOW-heatmap-chart__cell--placeholder {
533
+ pointer-events: none;
534
+ background: color-mix(in sRGB, var(--a8c-charts-color-track) 45%, transparent);
535
+ }
536
+
528
537
  .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
529
538
  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
530
539
  }
@@ -743,8 +752,8 @@
743
752
  }
744
753
 
745
754
  .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-label {
746
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
747
- font-size: var(--wpds-typography-font-size-lg, 16px);
755
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
756
+ font-size: var(--wpds-typography-font-size-lg, 15px);
748
757
  }
749
758
 
750
759
  .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-note {
@@ -770,7 +779,7 @@
770
779
  }
771
780
  .a8ccharts-zR7F7G-trend-indicator {
772
781
  font-size: var(--wpds-typography-font-size-md, 13px);
773
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
782
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
774
783
  align-items: center;
775
784
  gap: .125em;
776
785
  line-height: 1;
package/dist/index.d.cts CHANGED
@@ -510,6 +510,17 @@ type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
510
510
  */
511
511
  collapseGroups?: boolean;
512
512
  };
513
+ /**
514
+ * Initial visibility options for charts built from labelled series.
515
+ */
516
+ interface SeriesVisibilityProps {
517
+ /**
518
+ * Series labels to hide from the first defined value. User changes persist until
519
+ * the chart remounts or its ID changes; later values for the same ID are ignored.
520
+ * Omit to retain the provider's existing visibility for the chart ID.
521
+ */
522
+ defaultHiddenSeries?: readonly string[];
523
+ }
513
524
  /**
514
525
  * Base properties shared across all chart components
515
526
  */
@@ -680,7 +691,7 @@ interface ChartLegendOptions {
680
691
  */
681
692
  declare function useChartLegendItems<T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[]>(data: T, options?: ChartLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
682
693
  //#endregion
683
- //#region src/charts/private/single-chart-context/single-chart-context.d.ts
694
+ //#region src/charts/private/chart-instance-context/chart-instance-context.d.ts
684
695
  interface ChartInstanceRef {
685
696
  getScales: () => {
686
697
  xScale: unknown;
@@ -697,7 +708,6 @@ interface ChartInstanceRef {
697
708
  };
698
709
  };
699
710
  }
700
- type SingleChartRef = ChartInstanceRef;
701
711
  //#endregion
702
712
  //#region src/visx/types.d.ts
703
713
  type RenderTooltipParams<Datum extends object> = TooltipContextType<Datum> & {
@@ -744,7 +754,7 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
744
754
  glyphStyle?: SVGProps<SVGCircleElement>;
745
755
  position?: 'start' | 'end';
746
756
  };
747
- interface LineChartProps extends BaseChartProps<SeriesData[]> {
757
+ interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
748
758
  /**
749
759
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
750
760
  */
@@ -769,8 +779,8 @@ interface LineChartProps extends BaseChartProps<SeriesData[]> {
769
779
  */
770
780
  zoomable?: boolean;
771
781
  /**
772
- * Whether the Y axis rescales to fit only the visible series when series are
773
- * hidden or shown through the interactive legend.
782
+ * Whether the Y axis rescales to fit only the visible series when the set of
783
+ * visible series changes — via the interactive legend or otherwise.
774
784
  * Defaults to `true` (the pre-existing behaviour). Set to `false` to pin the Y
775
785
  * axis to the full data extent so hiding series does not move the chart's
776
786
  * baseline — useful for comparison charts. Matches `AreaChart`.
@@ -785,7 +795,7 @@ type TooltipDatum = {
785
795
  };
786
796
  //#endregion
787
797
  //#region src/charts/area-chart/types.d.ts
788
- interface AreaChartProps extends BaseChartProps<SeriesData[]> {
798
+ interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
789
799
  /**
790
800
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
791
801
  */
@@ -840,8 +850,8 @@ interface AreaChartProps extends BaseChartProps<SeriesData[]> {
840
850
  */
841
851
  zoomable?: boolean;
842
852
  /**
843
- * Whether the Y axis rescales to fit only the visible series when series are
844
- * hidden or shown through the interactive legend.
853
+ * Whether the Y axis rescales to fit only the visible series when the set of
854
+ * visible series changes — via the interactive legend or otherwise.
845
855
  * Defaults to `true`, matching LineChart. Set to `false` to pin the Y axis to
846
856
  * the full data extent so hiding series does not move the chart's baseline.
847
857
  * @default true
@@ -883,13 +893,13 @@ type AreaChartSubComponents = {
883
893
  Legend: typeof Legend;
884
894
  };
885
895
  type AreaChartBaseProps = Optional<AreaChartProps, 'width' | 'height' | 'size'>;
886
- type AreaChartComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & React.RefAttributes<SingleChartRef>> & AreaChartSubComponents;
887
- type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<SingleChartRef>> & AreaChartSubComponents;
896
+ type AreaChartComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & React.RefAttributes<ChartInstanceRef>> & AreaChartSubComponents;
897
+ type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<ChartInstanceRef>> & AreaChartSubComponents;
888
898
  declare const AreaChart: AreaChartComponent;
889
899
  declare const AreaChartResponsive: AreaChartResponsiveComponent;
890
900
  //#endregion
891
901
  //#region src/charts/bar-chart/bar-chart.d.ts
892
- interface BarChartProps extends BaseChartProps<SeriesData[]> {
902
+ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
893
903
  /**
894
904
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
895
905
  */
@@ -1153,6 +1163,14 @@ type HeatmapCell = {
1153
1163
  * days completing the first/last week fall outside the covered range.
1154
1164
  */
1155
1165
  hidden?: boolean;
1166
+ /**
1167
+ * Paint the cell as a faded empty slot that carries no claim about the day:
1168
+ * it is set apart from a measured day that scored zero, and skipped by
1169
+ * hover, tooltips, keyboard navigation and the accessibility tree. For grid
1170
+ * filler — slots drawn only so a short range still fills its container,
1171
+ * which were never measured.
1172
+ */
1173
+ placeholder?: boolean;
1156
1174
  };
1157
1175
  /** A heatmap column (rendered left→right); its cells render top→bottom. */
1158
1176
  type HeatmapColumn = {
@@ -1218,6 +1236,19 @@ declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: {
1218
1236
  * blank cells even when the series has no entry for them.
1219
1237
  */
1220
1238
  hideOutOfRangeDays?: boolean;
1239
+ /**
1240
+ * Draw the grid over this span (`yyyy-MM-dd` bounds) instead of the
1241
+ * series' own. Days inside the grid but outside the series become
1242
+ * placeholder cells: painted as empty slots so a short series still
1243
+ * fills its container, but reporting nothing, since they were never
1244
+ * measured. A start bound is drawn from the beginning of its week, so
1245
+ * the grid always opens on a whole column. Bounds narrower than the
1246
+ * series are ignored — the grid never drops a day that carries data.
1247
+ */
1248
+ gridSpan?: {
1249
+ start?: string;
1250
+ end?: string;
1251
+ };
1221
1252
  }) => CalendarHeatmapResult;
1222
1253
  //#endregion
1223
1254
  //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
@@ -1592,8 +1623,8 @@ type LineChartAnnotationComponents = {
1592
1623
  Legend: typeof Legend;
1593
1624
  };
1594
1625
  type LineChartBaseProps = Optional<LineChartProps, 'width' | 'height' | 'size'>;
1595
- type LineChartComponent = React.ForwardRefExoticComponent<LineChartBaseProps & React.RefAttributes<SingleChartRef>> & LineChartAnnotationComponents;
1596
- type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<SingleChartRef>> & LineChartAnnotationComponents;
1626
+ type LineChartComponent = React.ForwardRefExoticComponent<LineChartBaseProps & React.RefAttributes<ChartInstanceRef>> & LineChartAnnotationComponents;
1627
+ type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<ChartInstanceRef>> & LineChartAnnotationComponents;
1597
1628
  declare const LineChart: LineChartComponent;
1598
1629
  declare const LineChartResponsive: LineChartResponsiveComponent;
1599
1630
  //#endregion
@@ -2026,6 +2057,12 @@ interface GlobalChartsContextValue {
2026
2057
  theme: CompleteChartTheme;
2027
2058
  getElementStyles: (params: GetElementStylesParams) => ElementStyles;
2028
2059
  toggleSeriesVisibility: (chartId: string, seriesLabel: string) => void;
2060
+ setSeriesVisibility: (chartId: string, seriesLabel: string, visible: boolean) => void;
2061
+ setChartHiddenSeries: (chartId: string, seriesLabels: readonly string[]) => void;
2062
+ /** Applies a chart's defaults once. A no-op for a chart that has already been seeded. */
2063
+ seedChartHiddenSeries: (chartId: string, seriesLabels: readonly string[]) => void;
2064
+ /** Whether this chart's defaults have already been seeded, in this or an earlier mount. */
2065
+ hasSeededChart: (chartId: string) => boolean;
2029
2066
  isSeriesVisible: (chartId: string, seriesLabel: string) => boolean;
2030
2067
  getHiddenSeries: (chartId: string) => Set<string>;
2031
2068
  isColorPaletteResolved: boolean;
@@ -2079,5 +2116,5 @@ declare const defaultTheme: CompleteChartTheme;
2079
2116
  */
2080
2117
  declare const useChartScopeElement: () => HTMLElement | null;
2081
2118
  //#endregion
2082
- export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, 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 GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, 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 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, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
2119
+ export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, 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 GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, 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 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 TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
2083
2120
  //# sourceMappingURL=index.d.cts.map
package/dist/index.d.ts CHANGED
@@ -510,6 +510,17 @@ type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
510
510
  */
511
511
  collapseGroups?: boolean;
512
512
  };
513
+ /**
514
+ * Initial visibility options for charts built from labelled series.
515
+ */
516
+ interface SeriesVisibilityProps {
517
+ /**
518
+ * Series labels to hide from the first defined value. User changes persist until
519
+ * the chart remounts or its ID changes; later values for the same ID are ignored.
520
+ * Omit to retain the provider's existing visibility for the chart ID.
521
+ */
522
+ defaultHiddenSeries?: readonly string[];
523
+ }
513
524
  /**
514
525
  * Base properties shared across all chart components
515
526
  */
@@ -680,7 +691,7 @@ interface ChartLegendOptions {
680
691
  */
681
692
  declare function useChartLegendItems<T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[]>(data: T, options?: ChartLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
682
693
  //#endregion
683
- //#region src/charts/private/single-chart-context/single-chart-context.d.ts
694
+ //#region src/charts/private/chart-instance-context/chart-instance-context.d.ts
684
695
  interface ChartInstanceRef {
685
696
  getScales: () => {
686
697
  xScale: unknown;
@@ -697,7 +708,6 @@ interface ChartInstanceRef {
697
708
  };
698
709
  };
699
710
  }
700
- type SingleChartRef = ChartInstanceRef;
701
711
  //#endregion
702
712
  //#region src/visx/types.d.ts
703
713
  type RenderTooltipParams<Datum extends object> = TooltipContextType<Datum> & {
@@ -744,7 +754,7 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
744
754
  glyphStyle?: SVGProps<SVGCircleElement>;
745
755
  position?: 'start' | 'end';
746
756
  };
747
- interface LineChartProps extends BaseChartProps<SeriesData[]> {
757
+ interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
748
758
  /**
749
759
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
750
760
  */
@@ -769,8 +779,8 @@ interface LineChartProps extends BaseChartProps<SeriesData[]> {
769
779
  */
770
780
  zoomable?: boolean;
771
781
  /**
772
- * Whether the Y axis rescales to fit only the visible series when series are
773
- * hidden or shown through the interactive legend.
782
+ * Whether the Y axis rescales to fit only the visible series when the set of
783
+ * visible series changes — via the interactive legend or otherwise.
774
784
  * Defaults to `true` (the pre-existing behaviour). Set to `false` to pin the Y
775
785
  * axis to the full data extent so hiding series does not move the chart's
776
786
  * baseline — useful for comparison charts. Matches `AreaChart`.
@@ -785,7 +795,7 @@ type TooltipDatum = {
785
795
  };
786
796
  //#endregion
787
797
  //#region src/charts/area-chart/types.d.ts
788
- interface AreaChartProps extends BaseChartProps<SeriesData[]> {
798
+ interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
789
799
  /**
790
800
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
791
801
  */
@@ -840,8 +850,8 @@ interface AreaChartProps extends BaseChartProps<SeriesData[]> {
840
850
  */
841
851
  zoomable?: boolean;
842
852
  /**
843
- * Whether the Y axis rescales to fit only the visible series when series are
844
- * hidden or shown through the interactive legend.
853
+ * Whether the Y axis rescales to fit only the visible series when the set of
854
+ * visible series changes — via the interactive legend or otherwise.
845
855
  * Defaults to `true`, matching LineChart. Set to `false` to pin the Y axis to
846
856
  * the full data extent so hiding series does not move the chart's baseline.
847
857
  * @default true
@@ -883,13 +893,13 @@ type AreaChartSubComponents = {
883
893
  Legend: typeof Legend;
884
894
  };
885
895
  type AreaChartBaseProps = Optional<AreaChartProps, 'width' | 'height' | 'size'>;
886
- type AreaChartComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & React.RefAttributes<SingleChartRef>> & AreaChartSubComponents;
887
- type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<SingleChartRef>> & AreaChartSubComponents;
896
+ type AreaChartComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & React.RefAttributes<ChartInstanceRef>> & AreaChartSubComponents;
897
+ type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<ChartInstanceRef>> & AreaChartSubComponents;
888
898
  declare const AreaChart: AreaChartComponent;
889
899
  declare const AreaChartResponsive: AreaChartResponsiveComponent;
890
900
  //#endregion
891
901
  //#region src/charts/bar-chart/bar-chart.d.ts
892
- interface BarChartProps extends BaseChartProps<SeriesData[]> {
902
+ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
893
903
  /**
894
904
  * Legend configuration. Supports `collapseGroups` on top of the shared options.
895
905
  */
@@ -1153,6 +1163,14 @@ type HeatmapCell = {
1153
1163
  * days completing the first/last week fall outside the covered range.
1154
1164
  */
1155
1165
  hidden?: boolean;
1166
+ /**
1167
+ * Paint the cell as a faded empty slot that carries no claim about the day:
1168
+ * it is set apart from a measured day that scored zero, and skipped by
1169
+ * hover, tooltips, keyboard navigation and the accessibility tree. For grid
1170
+ * filler — slots drawn only so a short range still fills its container,
1171
+ * which were never measured.
1172
+ */
1173
+ placeholder?: boolean;
1156
1174
  };
1157
1175
  /** A heatmap column (rendered left→right); its cells render top→bottom. */
1158
1176
  type HeatmapColumn = {
@@ -1218,6 +1236,19 @@ declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: {
1218
1236
  * blank cells even when the series has no entry for them.
1219
1237
  */
1220
1238
  hideOutOfRangeDays?: boolean;
1239
+ /**
1240
+ * Draw the grid over this span (`yyyy-MM-dd` bounds) instead of the
1241
+ * series' own. Days inside the grid but outside the series become
1242
+ * placeholder cells: painted as empty slots so a short series still
1243
+ * fills its container, but reporting nothing, since they were never
1244
+ * measured. A start bound is drawn from the beginning of its week, so
1245
+ * the grid always opens on a whole column. Bounds narrower than the
1246
+ * series are ignored — the grid never drops a day that carries data.
1247
+ */
1248
+ gridSpan?: {
1249
+ start?: string;
1250
+ end?: string;
1251
+ };
1221
1252
  }) => CalendarHeatmapResult;
1222
1253
  //#endregion
1223
1254
  //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
@@ -1592,8 +1623,8 @@ type LineChartAnnotationComponents = {
1592
1623
  Legend: typeof Legend;
1593
1624
  };
1594
1625
  type LineChartBaseProps = Optional<LineChartProps, 'width' | 'height' | 'size'>;
1595
- type LineChartComponent = React.ForwardRefExoticComponent<LineChartBaseProps & React.RefAttributes<SingleChartRef>> & LineChartAnnotationComponents;
1596
- type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<SingleChartRef>> & LineChartAnnotationComponents;
1626
+ type LineChartComponent = React.ForwardRefExoticComponent<LineChartBaseProps & React.RefAttributes<ChartInstanceRef>> & LineChartAnnotationComponents;
1627
+ type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<ChartInstanceRef>> & LineChartAnnotationComponents;
1597
1628
  declare const LineChart: LineChartComponent;
1598
1629
  declare const LineChartResponsive: LineChartResponsiveComponent;
1599
1630
  //#endregion
@@ -2026,6 +2057,12 @@ interface GlobalChartsContextValue {
2026
2057
  theme: CompleteChartTheme;
2027
2058
  getElementStyles: (params: GetElementStylesParams) => ElementStyles;
2028
2059
  toggleSeriesVisibility: (chartId: string, seriesLabel: string) => void;
2060
+ setSeriesVisibility: (chartId: string, seriesLabel: string, visible: boolean) => void;
2061
+ setChartHiddenSeries: (chartId: string, seriesLabels: readonly string[]) => void;
2062
+ /** Applies a chart's defaults once. A no-op for a chart that has already been seeded. */
2063
+ seedChartHiddenSeries: (chartId: string, seriesLabels: readonly string[]) => void;
2064
+ /** Whether this chart's defaults have already been seeded, in this or an earlier mount. */
2065
+ hasSeededChart: (chartId: string) => boolean;
2029
2066
  isSeriesVisible: (chartId: string, seriesLabel: string) => boolean;
2030
2067
  getHiddenSeries: (chartId: string) => Set<string>;
2031
2068
  isColorPaletteResolved: boolean;
@@ -2079,5 +2116,5 @@ declare const defaultTheme: CompleteChartTheme;
2079
2116
  */
2080
2117
  declare const useChartScopeElement: () => HTMLElement | null;
2081
2118
  //#endregion
2082
- export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, 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 GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, 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 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, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
2119
+ export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, 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 GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, 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 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 TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
2083
2120
  //# sourceMappingURL=index.d.ts.map