@automattic/charts 3.2.0 → 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 (109) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/TOKENS.md +53 -58
  3. package/dist/index.cjs +1012 -542
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +72 -29
  6. package/dist/index.d.cts +151 -179
  7. package/dist/index.d.ts +151 -179
  8. package/dist/index.js +1013 -544
  9. package/dist/index.js.map +1 -1
  10. package/package.json +6 -6
  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 +2 -1
  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-list-chart/bar-list-chart.tsx +5 -0
  21. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +33 -23
  22. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx +138 -182
  23. package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx +46 -0
  24. package/src/charts/geo-chart/geo-chart.module.scss +1 -0
  25. package/src/charts/geo-chart/geo-chart.tsx +5 -10
  26. package/src/charts/geo-chart/test/geo-chart.test.tsx +2 -2
  27. package/src/charts/heatmap-chart/heatmap-chart.module.scss +21 -16
  28. package/src/charts/heatmap-chart/heatmap-chart.tsx +45 -28
  29. package/src/charts/heatmap-chart/private/build-calendar-data.ts +3 -0
  30. package/src/charts/heatmap-chart/private/heatmap-legend.tsx +11 -4
  31. package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx +51 -12
  32. package/src/charts/heatmap-chart/types.ts +2 -2
  33. package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts +2 -2
  34. package/src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts +3 -5
  35. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +31 -19
  36. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +27 -17
  37. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +14 -0
  38. package/src/charts/leaderboard-chart/test/use-leaderboard-legend-items.test.tsx +2 -9
  39. package/src/charts/line-chart/line-chart.module.scss +10 -18
  40. package/src/charts/line-chart/line-chart.tsx +93 -24
  41. package/src/charts/line-chart/private/line-chart-annotation.tsx +18 -19
  42. package/src/charts/line-chart/test/default-tooltip-formatting.test.tsx +74 -0
  43. package/src/charts/line-chart/test/line-chart.test.tsx +27 -3
  44. package/src/charts/line-chart/test/tick-placement.test.tsx +84 -0
  45. package/src/charts/line-chart/test/tooltip-resolution.test.tsx +140 -0
  46. package/src/charts/line-chart/types.ts +4 -1
  47. package/src/charts/pie-chart/pie-chart.module.scss +13 -1
  48. package/src/charts/pie-chart/pie-chart.tsx +30 -40
  49. package/src/charts/pie-chart/test/pie-chart.test.tsx +56 -0
  50. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +8 -3
  51. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +23 -37
  52. package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +50 -0
  53. package/src/charts/private/chart-layout/chart-layout.module.scss +3 -2
  54. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
  55. package/src/charts/private/test/axis-formatting.test.tsx +85 -0
  56. package/src/charts/private/test/time-axis-formatting.test.ts +109 -0
  57. package/src/charts/private/test/time-axis-options.test.ts +267 -0
  58. package/src/charts/private/test/time-axis-tick-invariants.test.ts +153 -0
  59. package/src/charts/private/test/time-axis-tick-values.test.ts +280 -0
  60. package/src/charts/private/test/time-axis.test.ts +9 -69
  61. package/src/charts/private/time-axis-options.ts +106 -0
  62. package/src/charts/private/time-axis.ts +318 -136
  63. package/src/charts/private/x-zoom/x-zoom.module.scss +3 -3
  64. package/src/charts/private/xy-plot/xy-plot.module.scss +8 -0
  65. package/src/charts/sparkline/test/sparkline.test.tsx +29 -56
  66. package/src/charts/sparkline/types.ts +1 -1
  67. package/src/components/legend/private/base-legend.module.scss +9 -5
  68. package/src/components/tooltip/accessible-tooltip.tsx +13 -15
  69. package/src/components/tooltip/base-tooltip.module.scss +3 -3
  70. package/src/components/tooltip/private/bounded-tooltip.tsx +172 -0
  71. package/src/components/tooltip/test/accessible-tooltip.test.tsx +2 -3
  72. package/src/components/tooltip/test/bounded-tooltip.test.tsx +129 -0
  73. package/src/components/tooltip/test/xy-chart-tooltip.test.tsx +279 -0
  74. package/src/components/tooltip/xy-chart-tooltip.tsx +288 -0
  75. package/src/components/trend-indicator/trend-indicator.module.scss +2 -2
  76. package/src/hooks/test/use-xychart-theme.test.tsx +16 -3
  77. package/src/hooks/use-xychart-theme.ts +25 -9
  78. package/src/index.ts +4 -0
  79. package/src/providers/chart-context/global-charts-provider.tsx +37 -38
  80. package/src/providers/chart-context/hooks/use-chart-formatting.ts +22 -0
  81. package/src/providers/chart-context/index.ts +1 -0
  82. package/src/providers/chart-context/private/catalog-pointers.ts +42 -0
  83. package/src/providers/chart-context/private/series-palette.ts +3 -13
  84. package/src/providers/chart-context/test/{sparse-theme.test.ts → catalog-pointers.test.ts} +22 -10
  85. package/src/providers/chart-context/test/chart-context.test.tsx +177 -792
  86. package/src/providers/chart-context/test/use-global-charts-theme.test.tsx +7 -25
  87. package/src/providers/chart-context/themes.ts +7 -52
  88. package/src/providers/chart-context/types.ts +3 -0
  89. package/src/styles/chart-scope.scss +39 -62
  90. package/src/styles/test/chart-scope.test.ts +19 -47
  91. package/src/test-utils/series-fixtures.ts +31 -0
  92. package/src/types.ts +79 -166
  93. package/src/utils/bucket-info.ts +87 -0
  94. package/src/utils/color-utils.ts +0 -27
  95. package/src/utils/date-formatting.ts +174 -0
  96. package/src/utils/index.ts +3 -0
  97. package/src/utils/test/bucket-info.test.ts +185 -0
  98. package/src/utils/test/color-utils.test.ts +1 -48
  99. package/src/utils/test/date-formatting.test.ts +89 -0
  100. package/src/utils/test/get-styles.test.ts +10 -7
  101. package/src/utils/test/merge-themes.test.ts +18 -46
  102. package/src/visx/types.ts +29 -2
  103. package/src/hooks/test/use-xychart-theme-provider-override.test.tsx +0 -28
  104. package/src/providers/chart-context/private/theme-override-vars.ts +0 -131
  105. package/src/providers/chart-context/private/with-catalog-pointers.ts +0 -93
  106. package/src/providers/chart-context/test/theme-override-vars-guard.test.tsx +0 -29
  107. package/src/providers/chart-context/test/theme-override-vars.test.ts +0 -183
  108. package/src/providers/chart-context/test/with-catalog-pointers.test.ts +0 -104
  109. package/src/styles/test/wpds-fallbacks.test.ts +0 -131
package/dist/index.css CHANGED
@@ -1,44 +1,41 @@
1
1
  :where(.a8c-charts-scope) {
2
- --a8c-charts-color-series-1: var(--a8c-charts-color-series-1-theme, var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9))));
3
- --a8c-charts-color-series-2: var(--a8c-charts-color-series-2-theme);
4
- --a8c-charts-color-series-3: var(--a8c-charts-color-series-3-theme);
5
- --a8c-charts-color-series-4: var(--a8c-charts-color-series-4-theme);
6
- --a8c-charts-color-series-5: var(--a8c-charts-color-series-5-theme);
7
- --a8c-charts-color-grid: var(--a8c-charts-color-grid-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
8
- --a8c-charts-color-axis: var(--a8c-charts-color-axis-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
9
- --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;
10
8
  --a8c-charts-color-label: var(--wpds-color-foreground-content-neutral, #1e1e1e);
11
9
  --a8c-charts-color-label-secondary: var(--wpds-color-foreground-content-neutral-weak, #707070);
12
10
  --a8c-charts-color-label-inverse: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
13
- --a8c-charts-color-label-on-fill: var(--a8c-charts-color-label-on-fill-theme, #fff);
14
- --a8c-charts-color-label-background: var(--a8c-charts-color-label-background-theme, transparent);
15
- --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);
16
13
  --a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral, #1e1e1e);
17
14
  --a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak, #008030);
18
15
  --a8c-charts-color-trend-down: var(--wpds-color-foreground-content-error-weak, #cc1818);
19
16
  --a8c-charts-color-trend-neutral: var(--wpds-color-foreground-content-neutral-weak, #707070);
20
- --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);
21
18
  --a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
22
19
  --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
23
20
  --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
24
- --a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
21
+ --a8c-charts-color-tooltip-surface: #000000d9;
25
22
  --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
26
23
  --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
27
- --a8c-charts-elevation-xs:
28
- 0 1px 1px 0 #00000008,
24
+ --a8c-charts-elevation-xs: 0 1px 1px 0 #00000008,
29
25
  0 1px 2px 0 #00000005,
30
26
  0 3px 3px 0 #00000005,
31
27
  0 4px 4px 0 #00000003;
32
- --a8c-charts-elevation-sm:
33
- 0 1px 2px 0 #0000000d,
28
+ --a8c-charts-elevation-sm: 0 1px 2px 0 #0000000d,
34
29
  0 2px 3px 0 #0000000a,
35
30
  0 6px 6px 0 #00000008,
36
31
  0 8px 8px 0 #00000005;
37
- --a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, 400ms);
38
- --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));
39
34
  --a8c-charts-border-radius-bar: var(--wpds-border-radius-md, 4px);
40
35
  --a8c-charts-border-radius-cell: var(--wpds-border-radius-sm, 2px);
41
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);
42
39
  }
43
40
  .a8ccharts-04TogW-legend {
44
41
  align-self: stretch;
@@ -76,6 +73,10 @@
76
73
  text-decoration: line-through;
77
74
  }
78
75
 
76
+ .a8ccharts-04TogW-legend-item-label {
77
+ color: var(--a8c-charts-color-label);
78
+ }
79
+
79
80
  .a8ccharts-04TogW-legend-item-text--wrap {
80
81
  overflow-wrap: break-word;
81
82
  white-space: normal;
@@ -111,7 +112,7 @@
111
112
  min-height: 0;
112
113
  }
113
114
 
114
- .a8ccharts-fpNVAq-chart-layout__content svg {
115
+ .a8ccharts-fpNVAq-chart-layout__content svg:not(.visx-tooltip svg) {
115
116
  display: block;
116
117
  }
117
118
  .a8ccharts-w3qxlG-center {
@@ -161,6 +162,10 @@
161
162
  .a8ccharts-ur9dWW-x-zoom__reset:not(:hover, :active, :focus) {
162
163
  background-color: var(--a8c-charts-color-surface);
163
164
  }
165
+ .a8ccharts-bIyhgG-xy-plot {
166
+ isolation: isolate;
167
+ position: relative;
168
+ }
164
169
  .a8ccharts-inuQka-line-chart {
165
170
  position: relative;
166
171
  }
@@ -253,11 +258,6 @@
253
258
  display: flex;
254
259
  }
255
260
 
256
- .visx-tooltip-glyph svg {
257
- width: 10px;
258
- height: 10px;
259
- }
260
-
261
261
  @keyframes a8ccharts-inuQka-rise {
262
262
  from {
263
263
  transform: scaleY(0);
@@ -324,6 +324,10 @@
324
324
  transform: scaleX(1);
325
325
  }
326
326
  }
327
+ .a8ccharts-mGEVca-conversion-funnel-chart {
328
+ position: relative;
329
+ }
330
+
327
331
  .a8ccharts-mGEVca-conversion-funnel-chart--loading {
328
332
  opacity: .6;
329
333
  pointer-events: none;
@@ -354,6 +358,14 @@
354
358
  overflow: hidden;
355
359
  }
356
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
+
357
369
  .a8ccharts-mGEVca-funnel-container {
358
370
  flex: 1;
359
371
  width: 100%;
@@ -393,6 +405,7 @@
393
405
 
394
406
  .a8ccharts-mGEVca-bar-container {
395
407
  border-radius: var(--a8c-charts-border-radius-bar);
408
+ background-color: var(--a8c-charts-color-surface-secondary);
396
409
  cursor: pointer;
397
410
  flex: 1;
398
411
  position: relative;
@@ -449,6 +462,7 @@
449
462
  font-size: var(--wpds-typography-font-size-lg, 15px);
450
463
  }
451
464
  .a8ccharts-8hS2IW-container {
465
+ background-color: var(--a8c-charts-color-background, #fff);
452
466
  position: relative;
453
467
  }
454
468
 
@@ -460,6 +474,7 @@
460
474
  height: 100%;
461
475
  min-height: 0;
462
476
  font-size: var(--wpds-typography-font-size-sm, 12px);
477
+ position: relative;
463
478
  }
464
479
 
465
480
  .a8ccharts-O3YMOW-heatmap-chart--height-capped {
@@ -541,7 +556,7 @@
541
556
  }
542
557
 
543
558
  .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
544
- 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));
545
560
  }
546
561
 
547
562
  .a8ccharts-O3YMOW-heatmap-chart__cell--selected {
@@ -558,11 +573,15 @@
558
573
  color: var(--a8c-charts-color-label-inverse);
559
574
  }
560
575
 
576
+ .a8ccharts-O3YMOW-heatmap-chart__legend-label {
577
+ color: var(--a8c-charts-color-label);
578
+ }
579
+
561
580
  .a8ccharts-O3YMOW-heatmap-chart__legend-swatch {
562
581
  width: var(--wpds-dimension-size-3xs, 12px);
563
582
  height: var(--wpds-dimension-size-3xs, 12px);
564
583
  border-radius: var(--a8c-charts-border-radius-cell);
565
- 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));
566
585
  }
567
586
  .a8ccharts-GovfoW-leaderboardChart {
568
587
  transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
@@ -645,6 +664,18 @@
645
664
  display: inline-block;
646
665
  }
647
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
+
648
679
  .a8ccharts-GovfoW-deltaPlaceholder {
649
680
  text-align: center;
650
681
  }
@@ -744,14 +775,26 @@
744
775
  transition: none;
745
776
  }
746
777
  }
747
- .a8ccharts-gnszbG-pie-chart {
748
- overflow: hidden;
778
+ .a8ccharts-gnszbG-pie-chart__plot {
779
+ position: relative;
749
780
  }
750
781
 
751
782
  .a8ccharts-gnszbG-pie-chart--responsive {
752
783
  width: 100%;
753
784
  height: 100%;
754
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
+
755
798
  .a8ccharts-YtTOxW-pie-semi-circle-chart--responsive {
756
799
  width: 100%;
757
800
  height: 100%;