@automattic/charts 4.13.0 → 4.15.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 (56) hide show
  1. package/CHANGELOG.md +34 -29
  2. package/TOKENS.md +4 -1
  3. package/dist/index.cjs +1069 -1620
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +33 -1
  6. package/dist/index.d.cts +60 -15
  7. package/dist/index.d.ts +60 -15
  8. package/dist/index.js +1072 -1575
  9. package/dist/index.js.map +1 -1
  10. package/package.json +11 -10
  11. package/src/charts/area-chart/area-chart.tsx +29 -20
  12. package/src/charts/area-chart/types.ts +3 -1
  13. package/src/charts/bar-chart/bar-chart.module.scss +38 -0
  14. package/src/charts/bar-chart/bar-chart.tsx +159 -56
  15. package/src/charts/bar-chart/private/band-tooltip.tsx +40 -5
  16. package/src/charts/bar-chart/private/bar-layer.tsx +66 -13
  17. package/src/charts/bar-chart/private/category.ts +25 -0
  18. package/src/charts/bar-chart/private/comparison-bars-geometry.ts +13 -1
  19. package/src/charts/bar-chart/private/index.ts +3 -1
  20. package/src/charts/bar-chart/private/selected-bar-ring.tsx +17 -6
  21. package/src/charts/bar-chart/private/stack-layout.ts +99 -0
  22. package/src/charts/bar-chart/private/stacked-bar-series.tsx +145 -0
  23. package/src/charts/bar-chart/private/test/stack-layout.test.ts +81 -0
  24. package/src/charts/bar-chart/private/test/value-domain.test.ts +10 -0
  25. package/src/charts/bar-chart/private/use-bar-chart-options.ts +35 -11
  26. package/src/charts/bar-chart/private/{use-overlap-slots.ts → use-bar-slots.ts} +36 -38
  27. package/src/charts/bar-chart/private/use-bar-stops.ts +19 -19
  28. package/src/charts/bar-chart/private/value-domain.ts +10 -8
  29. package/src/charts/bar-chart/test/bar-chart-stacked.test.tsx +546 -0
  30. package/src/charts/bar-chart/test/bar-chart.test.tsx +75 -0
  31. package/src/charts/bar-chart/test/use-bar-legend-items.test.tsx +18 -0
  32. package/src/charts/bar-chart/types.ts +3 -1
  33. package/src/charts/bar-chart/use-bar-colors.ts +12 -0
  34. package/src/charts/bar-chart/use-bar-legend-items.ts +4 -2
  35. package/src/charts/bar-list-chart/bar-list-chart.tsx +2 -0
  36. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +1 -1
  37. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +26 -9
  38. package/src/charts/leaderboard-chart/private/resolve-leaderboard-entries.ts +53 -0
  39. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +41 -0
  40. package/src/charts/leaderboard-chart/test/resolve-leaderboard-entries.test.ts +146 -0
  41. package/src/charts/leaderboard-chart/types.ts +6 -0
  42. package/src/charts/line-chart/line-chart.tsx +55 -26
  43. package/src/charts/line-chart/test/line-chart.test.tsx +86 -0
  44. package/src/charts/line-chart/types.ts +3 -1
  45. package/src/charts/private/test/compact-when-short.test.tsx +170 -0
  46. package/src/charts/private/test/tick-decimals.test.tsx +95 -0
  47. package/src/charts/private/tick-decimals.tsx +132 -0
  48. package/src/charts/private/use-compact-when-short.ts +18 -0
  49. package/src/components/legend/private/base-legend.tsx +13 -8
  50. package/src/components/legend/test/legend.test.tsx +125 -0
  51. package/src/components/legend/types.ts +9 -1
  52. package/src/providers/chart-context/themes.ts +4 -0
  53. package/src/styles/chart-scope.scss +1 -0
  54. package/src/types.ts +40 -9
  55. package/src/charts/private/test/whole-number-ticks.test.tsx +0 -57
  56. package/src/charts/private/whole-number-ticks.tsx +0 -79
package/CHANGELOG.md CHANGED
@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [4.15.0] - 2026-11-04
9
+ ### Added
10
+ - Axis: Add a `tickDecimals` option that keeps value-axis ticks to a number of decimal places, so rounded labels never repeat. [#54399]
11
+ - Bar chart: Add a stacked layout. [#54447]
12
+ - Line, area and bar charts: Add `compactWhenShort`, which drops the axes, grid and legend while the chart is shorter than the new `theme.compactWhenShort.below` (140px by default). [#54338]
13
+
14
+ ### Changed
15
+ - Update package dependencies. [#54391] [#54512]
16
+
17
+ ## [4.14.0] - 2026-11-02
18
+ ### Added
19
+ - Leaderboard chart: Derive bar shares and percentage change from the values when an entry omits them, and add a `negativeBars` option to draw negative values as empty bars. [#54250]
20
+ - Legend: Let an interactive legend item own its pressed state and toggle handler. [#54328]
21
+
22
+ ### Changed
23
+ - Update package dependencies. [#53869]
24
+
25
+ ### Fixed
26
+ - Leaderboard chart: Inset overlay labels from the inline start, so they keep their padding in right-to-left languages, and expose the label inset as a CSS custom property. [#54192]
27
+
8
28
  ## [4.13.0] - 2026-10-28
9
29
  ### Added
10
30
  - Conversion funnel chart: Add `getTooltipContent` to set what each step's tooltip shows, which screen readers also read, and show the default tooltip's count and conversion rate as labeled lines. [#53637]
@@ -37,9 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
37
57
  - Heatmap chart: Lighten the color scale to 2.5:1 contrast at the lowest step and 6:1 at the highest, and keep the two ends apart when the empty-cell color sits far from the background. [#53450]
38
58
  - Heatmap chart: Offset the grid's focus ring by the design system focus width. [#53522]
39
59
  - Legend: Set wrapped rows of a horizontal legend closer together than items on one row, and expose both gaps as CSS variables. [#53704]
40
- - Update package dependencies. [#53004]
41
- - Update package dependencies. [#53678]
42
- - Update package dependencies. [#53806]
60
+ - Update package dependencies. [#53004] [#53678] [#53806]
43
61
 
44
62
  ### Fixed
45
63
  - Conversion funnel chart: Show a focus ring on the focused step bar. [#53522]
@@ -151,8 +169,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
151
169
  - Heatmap chart: Add `tooltipVariant="dark"`, which draws the tooltip on the package's dark tooltip surface, `tooltipStyle` for inline box overrides, and a `variant="bar"` legend that joins the scale steps into one continuous band. [#52368]
152
170
 
153
171
  ### Changed
154
- - Update package dependencies. [#52187]
155
- - Update package dependencies. [#52401]
172
+ - Update package dependencies. [#52187] [#52401]
156
173
 
157
174
  ### Fixed
158
175
  - Bar chart: Align grid lines with axis ticks (explicit or derived). [#52234]
@@ -391,12 +408,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
391
408
 
392
409
  ## [1.4.3] - 2026-05-25
393
410
  ### Changed
394
- - Update dependencies. [#43811]
411
+ - Update dependencies.
395
412
 
396
413
  ## [1.4.2] - 2026-05-21
397
414
  ### Changed
398
- - Update package dependencies. [#48405]
399
- - Update package dependencies. [#49012]
415
+ - Update package dependencies. [#48405] [#49012]
400
416
 
401
417
  ## [1.4.1] - 2026-05-19
402
418
  ### Changed
@@ -413,7 +429,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
413
429
 
414
430
  ## [1.3.1] - 2026-05-11
415
431
  ### Changed
416
- - Update dependencies. [#43811]
432
+ - Update dependencies.
417
433
 
418
434
  ## [1.3.0] - 2026-05-04
419
435
  ### Added
@@ -593,7 +609,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
593
609
 
594
610
  ## [0.54.1] - 2026-01-26
595
611
  ### Changed
596
- - Update dependencies. [#43811]
612
+ - Update dependencies.
597
613
 
598
614
  ## [0.54.0] - 2026-01-21
599
615
  ### Added
@@ -624,8 +640,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
624
640
 
625
641
  ### Changed
626
642
  - Change Geo Chart data format to handle all Google Charts data [#46330]
627
- - Update package dependencies. [#46362]
628
- - Update package dependencies. [#46363]
643
+ - Update package dependencies. [#46362] [#46363]
629
644
 
630
645
  ### Fixed
631
646
  - Charts: Add documentation and API references of animation feature. [#46326]
@@ -758,7 +773,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
758
773
 
759
774
  ## [0.38.2] - 2025-09-22
760
775
  ### Changed
761
- - Update dependencies. [#43811]
776
+ - Update dependencies.
762
777
 
763
778
  ## [0.38.1] - 2025-09-19
764
779
  ### Changed
@@ -1031,16 +1046,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1031
1046
  - Add dynamic chart margin calculation and improve Y-axis tick formatting [#43679]
1032
1047
  - Refactor BarChart to use @visx/xychart [#43677]
1033
1048
  - Update dependencies. [#43068]
1034
- - Update package dependencies. [#43326]
1035
- - Update package dependencies. [#43354]
1036
- - Update package dependencies. [#43398]
1037
- - Update package dependencies. [#43399]
1038
- - Update package dependencies. [#43400]
1039
- - Update package dependencies. [#43516]
1040
- - Update package dependencies. [#43578]
1041
- - Update package dependencies. [#43718]
1042
- - Update package dependencies. [#43734]
1043
- - Update package dependencies. [#43766]
1049
+ - Update package dependencies. [#43326] [#43354] [#43398] [#43399] [#43400] [#43516] [#43578] [#43718] [#43734] [#43766]
1044
1050
 
1045
1051
  ### Removed
1046
1052
  - Removed animation for line and bar charts [#43809]
@@ -1070,8 +1076,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1070
1076
 
1071
1077
  ### Changed
1072
1078
  - Code: First pass of style coding standards. [#42734]
1073
- - Update package dependencies. [#42762]
1074
- - Update package dependencies. [#42809]
1079
+ - Update package dependencies. [#42762] [#42809]
1075
1080
 
1076
1081
  ### Fixed
1077
1082
  - Code: Update stylesheets to use hex instead of named colors. [#42920]
@@ -1087,8 +1092,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1087
1092
  - Introduce Theme seriesLineStyles property [#42530]
1088
1093
 
1089
1094
  ### Changed
1090
- - Update package dependencies. [#42509]
1091
- - Update package dependencies. [#42511]
1095
+ - Update package dependencies. [#42509] [#42511]
1092
1096
 
1093
1097
  ### Fixed
1094
1098
  - Bar chart: fix tickFormat not working issue [#42524]
@@ -1096,8 +1100,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1096
1100
  ## [0.10.0] - 2025-03-17
1097
1101
  ### Changed
1098
1102
  - Bar chart: align options with line chart [#42448]
1099
- - Update package dependencies. [#42163]
1100
- - Update package dependencies. [#42384]
1103
+ - Update package dependencies. [#42163] [#42384]
1101
1104
 
1102
1105
  ## [0.9.0] - 2025-03-02
1103
1106
  ### Added
@@ -1226,6 +1229,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1226
1229
  - Fixed lints following ESLint rule changes for TS [#40584]
1227
1230
  - Fixing a bug in Chart storybook data. [#40640]
1228
1231
 
1232
+ [4.15.0]: https://github.com/Automattic/charts/compare/v4.14.0...v4.15.0
1233
+ [4.14.0]: https://github.com/Automattic/charts/compare/v4.13.0...v4.14.0
1229
1234
  [4.13.0]: https://github.com/Automattic/charts/compare/v4.12.0...v4.13.0
1230
1235
  [4.12.0]: https://github.com/Automattic/charts/compare/v4.11.1...v4.12.0
1231
1236
  [4.11.1]: https://github.com/Automattic/charts/compare/v4.11.0...v4.11.1
package/TOKENS.md CHANGED
@@ -152,6 +152,7 @@ The palette is resolved per provider, so one `ColorCache` and one group-to-color
152
152
  | `--a8c-charts-border-radius-leaderboard-bar` | _(none — pill shape, no WPDS radius fits)_ | `9999px` |
153
153
  | `--a8c-charts-dimension-leaderboard-row-gap` | `--wpds-dimension-gap-md` | `12px` |
154
154
  | `--a8c-charts-dimension-leaderboard-column-gap` | `--wpds-dimension-gap-xs` | `4px` |
155
+ | `--a8c-charts-dimension-leaderboard-label-inset` | `--wpds-dimension-padding-sm` | `8px` |
155
156
  | `--a8c-charts-dimension-legend-column-gap` | `--wpds-dimension-gap-lg` | `16px` |
156
157
  | `--a8c-charts-dimension-legend-row-gap` | `--wpds-dimension-gap-sm` | `8px` |
157
158
  | `--a8c-charts-elevation-xs` | _(none — `--wpds-elevation-*` removed in theme 1.0.0)_ | `0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003` |
@@ -159,7 +160,9 @@ The palette is resolved per provider, so one `ColorCache` and one group-to-color
159
160
 
160
161
  The motion pair carries the one-shot reveal a data mark plays on first paint, across all six charts that animate in. It deliberately does **not** cover interaction motion: hover and transition timings read `--wpds-motion-*` directly, as interface chrome rather than a chart role.
161
162
 
162
- `--a8c-charts-border-radius-bar` rounds the conversion funnel's bars. `--a8c-charts-border-radius-bar-chart` rounds the bars of the bar chart and bar list chart; set it to a radius such as `var(--wpds-border-radius-sm)` to opt in. Bar charts apply it as the CSS `rx` property, so it rounds all four corners of a bar. It resolves in CSS at the bar, so an override set anywhere inside the provider tree applies, the chart's own class included; see [Precedence](#precedence) for overrides above the provider.
163
+ `--a8c-charts-border-radius-bar` rounds the conversion funnel's bars. `--a8c-charts-border-radius-bar-chart` rounds the bars of the bar chart and bar list chart; set it to a radius such as `var(--wpds-border-radius-sm)` to opt in. Bar charts apply it as the CSS `rx` property, so it rounds all four corners of a bar; a stacked bar instead clips only the outer end of each stack to it. It resolves in CSS at the bar, so an override set anywhere inside the provider tree applies, the chart's own class included; see [Precedence](#precedence) for overrides above the provider.
164
+
165
+ `--a8c-charts-dimension-leaderboard-label-inset` pads an overlay label at its inline start, inside the `--wpds-border-width-focus` every row reserves for its focus ring. Read both to line up content outside the chart, such as a column header, with the row text.
163
166
 
164
167
  The legend pair spaces the items of a horizontal legend: the column gap between items on one line, and the smaller row gap between lines once the legend wraps.
165
168