@automattic/charts 3.1.1 → 4.0.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 (116) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/TOKENS.md +80 -46
  3. package/dist/index.cjs +1224 -662
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +72 -23
  6. package/dist/index.d.cts +230 -162
  7. package/dist/index.d.ts +230 -162
  8. package/dist/index.js +1224 -663
  9. package/dist/index.js.map +1 -1
  10. package/package.json +10 -10
  11. package/src/charts/area-chart/area-chart.tsx +39 -25
  12. package/src/charts/area-chart/test/area-chart.test.tsx +4 -33
  13. package/src/charts/area-chart/test/tick-placement.test.tsx +55 -0
  14. package/src/charts/area-chart/test/tooltip-resolution-branches.test.tsx +86 -0
  15. package/src/charts/area-chart/test/tooltip-resolution.test.tsx +69 -0
  16. package/src/charts/area-chart/types.ts +4 -7
  17. package/src/charts/bar-chart/bar-chart.tsx +38 -11
  18. package/src/charts/bar-chart/private/test/use-bar-chart-options-formatting.test.tsx +69 -0
  19. package/src/charts/bar-chart/private/use-bar-chart-options.ts +27 -15
  20. package/src/charts/bar-chart/test/bar-chart-pointer-events.test.tsx +67 -0
  21. package/src/charts/bar-chart/test/bar-chart.test.tsx +79 -0
  22. package/src/charts/bar-list-chart/bar-list-chart.tsx +45 -2
  23. package/src/charts/bar-list-chart/test/bar-list-chart.test.tsx +38 -0
  24. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +33 -23
  25. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx +138 -182
  26. package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx +46 -0
  27. package/src/charts/geo-chart/geo-chart.module.scss +1 -0
  28. package/src/charts/geo-chart/geo-chart.tsx +5 -10
  29. package/src/charts/geo-chart/test/geo-chart.test.tsx +2 -2
  30. package/src/charts/heatmap-chart/heatmap-chart.module.scss +21 -16
  31. package/src/charts/heatmap-chart/heatmap-chart.tsx +45 -28
  32. package/src/charts/heatmap-chart/private/build-calendar-data.ts +3 -0
  33. package/src/charts/heatmap-chart/private/heatmap-legend.tsx +11 -4
  34. package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx +51 -12
  35. package/src/charts/heatmap-chart/types.ts +2 -2
  36. package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts +2 -2
  37. package/src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts +3 -5
  38. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +31 -19
  39. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +27 -17
  40. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +14 -0
  41. package/src/charts/leaderboard-chart/test/use-leaderboard-legend-items.test.tsx +2 -9
  42. package/src/charts/line-chart/line-chart.module.scss +10 -18
  43. package/src/charts/line-chart/line-chart.tsx +109 -25
  44. package/src/charts/line-chart/private/line-chart-annotation.tsx +18 -19
  45. package/src/charts/line-chart/test/default-tooltip-formatting.test.tsx +74 -0
  46. package/src/charts/line-chart/test/line-chart.test.tsx +74 -3
  47. package/src/charts/line-chart/test/tick-placement.test.tsx +84 -0
  48. package/src/charts/line-chart/test/tooltip-resolution.test.tsx +140 -0
  49. package/src/charts/line-chart/types.ts +4 -1
  50. package/src/charts/pie-chart/pie-chart.module.scss +13 -1
  51. package/src/charts/pie-chart/pie-chart.tsx +30 -40
  52. package/src/charts/pie-chart/test/pie-chart.test.tsx +56 -0
  53. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +8 -3
  54. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +23 -37
  55. package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +50 -0
  56. package/src/charts/private/chart-layout/chart-layout.module.scss +3 -2
  57. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
  58. package/src/charts/private/test/axis-formatting.test.tsx +85 -0
  59. package/src/charts/private/test/time-axis-formatting.test.ts +109 -0
  60. package/src/charts/private/test/time-axis-options.test.ts +267 -0
  61. package/src/charts/private/test/time-axis-tick-invariants.test.ts +153 -0
  62. package/src/charts/private/test/time-axis-tick-values.test.ts +280 -0
  63. package/src/charts/private/test/time-axis.test.ts +9 -69
  64. package/src/charts/private/time-axis-options.ts +106 -0
  65. package/src/charts/private/time-axis.ts +318 -136
  66. package/src/charts/private/x-zoom/x-zoom.module.scss +3 -3
  67. package/src/charts/private/xy-plot/xy-plot.module.scss +8 -0
  68. package/src/charts/sparkline/sparkline.tsx +9 -3
  69. package/src/charts/sparkline/test/sparkline.test.tsx +29 -56
  70. package/src/charts/sparkline/types.ts +2 -2
  71. package/src/components/legend/private/base-legend.module.scss +9 -5
  72. package/src/components/tooltip/accessible-tooltip.tsx +38 -10
  73. package/src/components/tooltip/base-tooltip.module.scss +3 -3
  74. package/src/components/tooltip/private/bounded-tooltip.tsx +172 -0
  75. package/src/components/tooltip/test/accessible-tooltip.test.tsx +67 -0
  76. package/src/components/tooltip/test/bounded-tooltip.test.tsx +129 -0
  77. package/src/components/tooltip/test/xy-chart-tooltip.test.tsx +279 -0
  78. package/src/components/tooltip/xy-chart-tooltip.tsx +288 -0
  79. package/src/components/trend-indicator/trend-indicator.module.scss +2 -2
  80. package/src/hooks/test/use-xychart-theme-style-reads.test.tsx +17 -10
  81. package/src/hooks/test/use-xychart-theme.test.tsx +63 -5
  82. package/src/hooks/use-xychart-theme.ts +33 -23
  83. package/src/index.ts +4 -0
  84. package/src/providers/chart-context/global-charts-provider.tsx +64 -54
  85. package/src/providers/chart-context/hooks/use-chart-formatting.ts +22 -0
  86. package/src/providers/chart-context/index.ts +1 -0
  87. package/src/providers/chart-context/private/catalog-pointers.ts +42 -0
  88. package/src/providers/chart-context/private/series-palette.ts +35 -0
  89. package/src/providers/chart-context/test/catalog-pointers.test.ts +61 -0
  90. package/src/providers/chart-context/test/chart-context.test.tsx +177 -792
  91. package/src/providers/chart-context/test/use-global-charts-theme.test.tsx +7 -18
  92. package/src/providers/chart-context/themes.ts +7 -47
  93. package/src/providers/chart-context/types.ts +3 -0
  94. package/src/styles/chart-scope.scss +63 -58
  95. package/src/styles/test/chart-scope.test.ts +25 -40
  96. package/src/test-utils/series-fixtures.ts +31 -0
  97. package/src/types.ts +103 -73
  98. package/src/utils/bucket-info.ts +87 -0
  99. package/src/utils/color-utils.ts +0 -27
  100. package/src/utils/date-formatting.ts +174 -0
  101. package/src/utils/get-styles.ts +7 -1
  102. package/src/utils/index.ts +3 -0
  103. package/src/utils/test/bucket-info.test.ts +185 -0
  104. package/src/utils/test/color-utils.test.ts +1 -48
  105. package/src/utils/test/date-formatting.test.ts +89 -0
  106. package/src/utils/test/get-styles.test.ts +10 -7
  107. package/src/utils/test/merge-themes.test.ts +18 -46
  108. package/src/visx/types.ts +29 -2
  109. package/src/hooks/test/use-xychart-theme-provider-override.test.tsx +0 -28
  110. package/src/providers/chart-context/private/theme-override-vars.ts +0 -87
  111. package/src/providers/chart-context/private/with-catalog-pointers.ts +0 -50
  112. package/src/providers/chart-context/test/sparse-theme.test.ts +0 -35
  113. package/src/providers/chart-context/test/theme-override-vars-guard.test.tsx +0 -29
  114. package/src/providers/chart-context/test/theme-override-vars.test.ts +0 -118
  115. package/src/providers/chart-context/test/with-catalog-pointers.test.ts +0 -47
  116. package/src/styles/test/wpds-fallbacks.test.ts +0 -131
package/dist/index.css CHANGED
@@ -1,38 +1,41 @@
1
1
  :where(.a8c-charts-scope) {
2
- --a8c-charts-color-grid: var(--a8c-charts-color-grid-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
3
- --a8c-charts-color-axis: var(--a8c-charts-color-axis-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
4
- --a8c-charts-color-tick: var(--a8c-charts-color-tick-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
2
+ --a8c-charts-color-series-1: var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)));
3
+ --a8c-charts-color-grid: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4
+ --a8c-charts-color-axis-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5
+ --a8c-charts-color-tick-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
6
+ --a8c-charts-color-axis-y: none;
7
+ --a8c-charts-color-tick-y: none;
5
8
  --a8c-charts-color-label: var(--wpds-color-foreground-content-neutral, #1e1e1e);
6
9
  --a8c-charts-color-label-secondary: var(--wpds-color-foreground-content-neutral-weak, #707070);
7
10
  --a8c-charts-color-label-inverse: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
8
- --a8c-charts-color-label-on-fill: #fff;
9
- --a8c-charts-color-label-axis: var(--a8c-charts-color-label-axis-theme, var(--a8c-charts-color-label));
11
+ --a8c-charts-color-label-background: transparent;
12
+ --a8c-charts-color-label-axis: var(--a8c-charts-color-label);
10
13
  --a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral, #1e1e1e);
11
14
  --a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak, #008030);
12
15
  --a8c-charts-color-trend-down: var(--wpds-color-foreground-content-error-weak, #cc1818);
13
16
  --a8c-charts-color-trend-neutral: var(--wpds-color-foreground-content-neutral-weak, #707070);
14
- --a8c-charts-color-background: var(--a8c-charts-color-background-theme, var(--wpds-color-background-surface-neutral-strong, #fff));
17
+ --a8c-charts-color-background: var(--wpds-color-background-surface-neutral-strong, #fff);
15
18
  --a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
16
19
  --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
17
20
  --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
18
- --a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
21
+ --a8c-charts-color-tooltip-surface: #000000d9;
19
22
  --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
20
23
  --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
21
- --a8c-charts-elevation-xs:
22
- 0 1px 1px 0 #00000008,
24
+ --a8c-charts-elevation-xs: 0 1px 1px 0 #00000008,
23
25
  0 1px 2px 0 #00000005,
24
26
  0 3px 3px 0 #00000005,
25
27
  0 4px 4px 0 #00000003;
26
- --a8c-charts-elevation-sm:
27
- 0 1px 2px 0 #0000000d,
28
+ --a8c-charts-elevation-sm: 0 1px 2px 0 #0000000d,
28
29
  0 2px 3px 0 #0000000a,
29
30
  0 6px 6px 0 #00000008,
30
31
  0 8px 8px 0 #00000005;
31
- --a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, 400ms);
32
- --a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
32
+ --a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, .4s);
33
+ --a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1));
33
34
  --a8c-charts-border-radius-bar: var(--wpds-border-radius-md, 4px);
34
35
  --a8c-charts-border-radius-cell: var(--wpds-border-radius-sm, 2px);
35
36
  --a8c-charts-border-radius-leaderboard-bar: 9999px;
37
+ --a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md, 12px);
38
+ --a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs, 4px);
36
39
  }
37
40
  .a8ccharts-04TogW-legend {
38
41
  align-self: stretch;
@@ -70,6 +73,10 @@
70
73
  text-decoration: line-through;
71
74
  }
72
75
 
76
+ .a8ccharts-04TogW-legend-item-label {
77
+ color: var(--a8c-charts-color-label);
78
+ }
79
+
73
80
  .a8ccharts-04TogW-legend-item-text--wrap {
74
81
  overflow-wrap: break-word;
75
82
  white-space: normal;
@@ -105,7 +112,7 @@
105
112
  min-height: 0;
106
113
  }
107
114
 
108
- .a8ccharts-fpNVAq-chart-layout__content svg {
115
+ .a8ccharts-fpNVAq-chart-layout__content svg:not(.visx-tooltip svg) {
109
116
  display: block;
110
117
  }
111
118
  .a8ccharts-w3qxlG-center {
@@ -155,6 +162,10 @@
155
162
  .a8ccharts-ur9dWW-x-zoom__reset:not(:hover, :active, :focus) {
156
163
  background-color: var(--a8c-charts-color-surface);
157
164
  }
165
+ .a8ccharts-bIyhgG-xy-plot {
166
+ isolation: isolate;
167
+ position: relative;
168
+ }
158
169
  .a8ccharts-inuQka-line-chart {
159
170
  position: relative;
160
171
  }
@@ -247,11 +258,6 @@
247
258
  display: flex;
248
259
  }
249
260
 
250
- .visx-tooltip-glyph svg {
251
- width: 10px;
252
- height: 10px;
253
- }
254
-
255
261
  @keyframes a8ccharts-inuQka-rise {
256
262
  from {
257
263
  transform: scaleY(0);
@@ -318,6 +324,10 @@
318
324
  transform: scaleX(1);
319
325
  }
320
326
  }
327
+ .a8ccharts-mGEVca-conversion-funnel-chart {
328
+ position: relative;
329
+ }
330
+
321
331
  .a8ccharts-mGEVca-conversion-funnel-chart--loading {
322
332
  opacity: .6;
323
333
  pointer-events: none;
@@ -348,6 +358,14 @@
348
358
  overflow: hidden;
349
359
  }
350
360
 
361
+ .a8ccharts-mGEVca-change-indicator--positive {
362
+ color: var(--a8c-charts-color-trend-up);
363
+ }
364
+
365
+ .a8ccharts-mGEVca-change-indicator--negative {
366
+ color: var(--a8c-charts-color-trend-down);
367
+ }
368
+
351
369
  .a8ccharts-mGEVca-funnel-container {
352
370
  flex: 1;
353
371
  width: 100%;
@@ -387,6 +405,7 @@
387
405
 
388
406
  .a8ccharts-mGEVca-bar-container {
389
407
  border-radius: var(--a8c-charts-border-radius-bar);
408
+ background-color: var(--a8c-charts-color-surface-secondary);
390
409
  cursor: pointer;
391
410
  flex: 1;
392
411
  position: relative;
@@ -443,6 +462,7 @@
443
462
  font-size: var(--wpds-typography-font-size-lg, 15px);
444
463
  }
445
464
  .a8ccharts-8hS2IW-container {
465
+ background-color: var(--a8c-charts-color-background, #fff);
446
466
  position: relative;
447
467
  }
448
468
 
@@ -454,6 +474,7 @@
454
474
  height: 100%;
455
475
  min-height: 0;
456
476
  font-size: var(--wpds-typography-font-size-sm, 12px);
477
+ position: relative;
457
478
  }
458
479
 
459
480
  .a8ccharts-O3YMOW-heatmap-chart--height-capped {
@@ -535,7 +556,7 @@
535
556
  }
536
557
 
537
558
  .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
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));
559
+ 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-background, #fff));
539
560
  }
540
561
 
541
562
  .a8ccharts-O3YMOW-heatmap-chart__cell--selected {
@@ -552,11 +573,15 @@
552
573
  color: var(--a8c-charts-color-label-inverse);
553
574
  }
554
575
 
576
+ .a8ccharts-O3YMOW-heatmap-chart__legend-label {
577
+ color: var(--a8c-charts-color-label);
578
+ }
579
+
555
580
  .a8ccharts-O3YMOW-heatmap-chart__legend-swatch {
556
581
  width: var(--wpds-dimension-size-3xs, 12px);
557
582
  height: var(--wpds-dimension-size-3xs, 12px);
558
583
  border-radius: var(--a8c-charts-border-radius-cell);
559
- 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));
584
+ 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-background, #fff));
560
585
  }
561
586
  .a8ccharts-GovfoW-leaderboardChart {
562
587
  transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
@@ -639,6 +664,18 @@
639
664
  display: inline-block;
640
665
  }
641
666
 
667
+ .a8ccharts-GovfoW-deltaValue--down {
668
+ color: var(--a8c-charts-color-trend-down);
669
+ }
670
+
671
+ .a8ccharts-GovfoW-deltaValue--neutral {
672
+ color: var(--a8c-charts-color-trend-neutral);
673
+ }
674
+
675
+ .a8ccharts-GovfoW-deltaValue--up {
676
+ color: var(--a8c-charts-color-trend-up);
677
+ }
678
+
642
679
  .a8ccharts-GovfoW-deltaPlaceholder {
643
680
  text-align: center;
644
681
  }
@@ -738,14 +775,26 @@
738
775
  transition: none;
739
776
  }
740
777
  }
741
- .a8ccharts-gnszbG-pie-chart {
742
- overflow: hidden;
778
+ .a8ccharts-gnszbG-pie-chart__plot {
779
+ position: relative;
743
780
  }
744
781
 
745
782
  .a8ccharts-gnszbG-pie-chart--responsive {
746
783
  width: 100%;
747
784
  height: 100%;
748
785
  }
786
+
787
+ .a8ccharts-gnszbG-pie-chart__label-plate {
788
+ fill: var(--a8c-charts-color-label-background, transparent);
789
+ }
790
+
791
+ .a8ccharts-gnszbG-pie-chart__label-text {
792
+ fill: var(--a8c-charts-color-label-inverse, #f0f0f0);
793
+ }
794
+ .a8ccharts-YtTOxW-pie-semi-circle-chart__plot {
795
+ position: relative;
796
+ }
797
+
749
798
  .a8ccharts-YtTOxW-pie-semi-circle-chart--responsive {
750
799
  width: 100%;
751
800
  height: 100%;