@automattic/charts 3.0.0 → 3.1.1
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.
- package/CHANGELOG.md +18 -0
- package/TOKENS.md +3 -3
- package/dist/index.cjs +250 -136
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +23 -14
- package/dist/index.d.cts +51 -14
- package/dist/index.d.ts +51 -14
- package/dist/index.js +251 -138
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/charts/area-chart/area-chart.tsx +26 -26
- package/src/charts/area-chart/private/overlays.tsx +3 -3
- package/src/charts/area-chart/test/area-chart.test.tsx +346 -11
- package/src/charts/area-chart/types.ts +4 -3
- package/src/charts/bar-chart/bar-chart.tsx +21 -15
- package/src/charts/bar-chart/private/use-bar-chart-options.ts +19 -12
- package/src/charts/bar-chart/test/bar-chart.test.tsx +277 -2
- package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +6 -6
- package/src/charts/geo-chart/geo-chart.module.scss +8 -0
- package/src/charts/heatmap-chart/heatmap-chart.module.scss +9 -0
- package/src/charts/heatmap-chart/heatmap-chart.tsx +31 -8
- package/src/charts/heatmap-chart/private/build-calendar-data.ts +65 -5
- package/src/charts/heatmap-chart/test/build-calendar-data.test.ts +125 -0
- package/src/charts/heatmap-chart/types.ts +8 -0
- package/src/charts/leaderboard-chart/leaderboard-chart.tsx +17 -22
- package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +107 -1
- package/src/charts/line-chart/line-chart.module.scss +2 -2
- package/src/charts/line-chart/line-chart.tsx +33 -29
- package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +2 -2
- package/src/charts/line-chart/test/line-chart.test.tsx +313 -5
- package/src/charts/line-chart/types.ts +4 -3
- package/src/charts/pie-chart/pie-chart.tsx +8 -13
- package/src/charts/pie-chart/test/pie-chart.test.tsx +73 -1
- package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -2
- package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +8 -13
- package/src/charts/private/{single-chart-context/single-chart-context.tsx → chart-instance-context/chart-instance-context.ts} +1 -5
- package/src/charts/private/chart-instance-context/index.ts +3 -0
- package/src/charts/private/{single-chart-context/use-single-chart-context.ts → chart-instance-context/use-chart-instance-context.ts} +1 -3
- package/src/charts/private/svg-empty-state/get-all-hidden-message.ts +41 -0
- package/src/charts/private/svg-empty-state/index.ts +1 -0
- package/src/charts/private/svg-empty-state/test/get-all-hidden-message.test.ts +15 -0
- package/src/charts/private/x-zoom/test/x-zoom.test.tsx +2 -2
- package/src/charts/private/x-zoom/x-zoom.tsx +2 -2
- package/src/components/legend/legend.tsx +4 -4
- package/src/components/legend/private/base-legend.module.scss +1 -1
- package/src/components/legend/private/base-legend.tsx +67 -18
- package/src/components/legend/test/legend.test.tsx +100 -4
- package/src/components/tooltip/accessible-tooltip.tsx +13 -2
- package/src/components/trend-indicator/trend-indicator.module.scss +1 -1
- package/src/hooks/index.ts +1 -1
- package/src/hooks/{use-interactive-legend-data.ts → use-legend-visibility-data.ts} +29 -30
- package/src/index.ts +3 -1
- package/src/providers/chart-context/global-charts-provider.tsx +92 -18
- package/src/providers/chart-context/hooks/use-default-hidden-series.ts +47 -0
- package/src/providers/chart-context/test/chart-context.test.tsx +142 -0
- package/src/providers/chart-context/test/use-default-hidden-series-paint.test.tsx +56 -0
- package/src/providers/chart-context/test/use-default-hidden-series.ssr.test.tsx +39 -0
- package/src/providers/chart-context/test/use-default-hidden-series.test.tsx +222 -0
- package/src/providers/chart-context/types.ts +7 -1
- package/src/styles/chart-scope.scss +2 -2
- package/src/styles/test/wpds-fallbacks.test.ts +131 -0
- package/src/types.ts +12 -0
- 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,
|
|
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,
|
|
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,
|
|
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,
|
|
333
|
+
font-size: var(--wpds-typography-font-size-xl, 20px);
|
|
334
334
|
font-style: normal;
|
|
335
|
-
font-weight: var(--wpds-typography-font-weight-emphasis,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
747
|
-
font-size: var(--wpds-typography-font-size-lg,
|
|
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,
|
|
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/
|
|
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
|
|
773
|
-
*
|
|
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
|
|
844
|
-
*
|
|
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<
|
|
887
|
-
type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<
|
|
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<
|
|
1596
|
-
type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<
|
|
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,
|
|
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/
|
|
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
|
|
773
|
-
*
|
|
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
|
|
844
|
-
*
|
|
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<
|
|
887
|
-
type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<
|
|
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<
|
|
1596
|
-
type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<
|
|
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,
|
|
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
|