@automattic/charts 2.0.1 → 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 (102) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/TOKENS.md +109 -50
  3. package/dist/index.cjs +529 -233
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +118 -55
  6. package/dist/index.d.cts +90 -48
  7. package/dist/index.d.ts +90 -48
  8. package/dist/index.js +527 -235
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/charts/area-chart/area-chart.module.scss +8 -3
  12. package/src/charts/area-chart/area-chart.tsx +25 -25
  13. package/src/charts/area-chart/private/overlays.tsx +3 -3
  14. package/src/charts/area-chart/test/area-chart.test.tsx +301 -11
  15. package/src/charts/area-chart/types.ts +4 -3
  16. package/src/charts/bar-chart/bar-chart.module.scss +14 -6
  17. package/src/charts/bar-chart/bar-chart.tsx +21 -15
  18. package/src/charts/bar-chart/test/bar-chart.test.tsx +255 -2
  19. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +23 -18
  20. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx +107 -86
  21. package/src/charts/conversion-funnel-chart/test/chart-scope.test.tsx +36 -0
  22. package/src/charts/geo-chart/geo-chart.module.scss +8 -0
  23. package/src/charts/geo-chart/geo-chart.tsx +12 -4
  24. package/src/charts/heatmap-chart/heatmap-chart.module.scss +22 -9
  25. package/src/charts/heatmap-chart/heatmap-chart.tsx +43 -13
  26. package/src/charts/heatmap-chart/private/build-calendar-data.ts +65 -5
  27. package/src/charts/heatmap-chart/test/build-calendar-data.test.ts +125 -0
  28. package/src/charts/heatmap-chart/types.ts +8 -0
  29. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +13 -7
  30. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +17 -22
  31. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +107 -1
  32. package/src/charts/leaderboard-chart/types.ts +0 -2
  33. package/src/charts/line-chart/line-chart.module.scss +12 -7
  34. package/src/charts/line-chart/line-chart.tsx +32 -28
  35. package/src/charts/line-chart/private/line-chart-annotation.tsx +4 -4
  36. package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +2 -2
  37. package/src/charts/line-chart/test/line-chart.test.tsx +262 -5
  38. package/src/charts/line-chart/types.ts +4 -3
  39. package/src/charts/pie-chart/pie-chart.tsx +12 -14
  40. package/src/charts/pie-chart/test/pie-chart.test.tsx +73 -1
  41. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -2
  42. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +12 -14
  43. package/src/charts/private/{single-chart-context/single-chart-context.tsx → chart-instance-context/chart-instance-context.ts} +1 -5
  44. package/src/charts/private/chart-instance-context/index.ts +3 -0
  45. package/src/charts/private/{single-chart-context/use-single-chart-context.ts → chart-instance-context/use-chart-instance-context.ts} +1 -3
  46. package/src/charts/private/svg-empty-state/get-all-hidden-message.ts +41 -0
  47. package/src/charts/private/svg-empty-state/index.ts +1 -0
  48. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
  49. package/src/charts/private/svg-empty-state/test/get-all-hidden-message.test.ts +15 -0
  50. package/src/charts/private/with-responsive/test/with-responsive.test.tsx +16 -0
  51. package/src/charts/private/with-responsive/with-responsive.tsx +18 -11
  52. package/src/charts/private/x-zoom/test/x-zoom.test.tsx +2 -2
  53. package/src/charts/private/x-zoom/x-zoom.module.scss +3 -3
  54. package/src/charts/private/x-zoom/x-zoom.tsx +2 -2
  55. package/src/components/legend/legend.tsx +4 -4
  56. package/src/components/legend/private/base-legend.module.scss +1 -1
  57. package/src/components/legend/private/base-legend.tsx +70 -19
  58. package/src/components/legend/test/legend.test.tsx +100 -4
  59. package/src/components/tooltip/accessible-tooltip.tsx +17 -4
  60. package/src/components/tooltip/base-tooltip.tsx +8 -1
  61. package/src/components/trend-indicator/test/trend-indicator.test.tsx +20 -0
  62. package/src/components/trend-indicator/trend-indicator.module.scss +4 -7
  63. package/src/components/trend-indicator/trend-indicator.tsx +3 -0
  64. package/src/hooks/index.ts +1 -1
  65. package/src/hooks/test/use-xychart-theme-provider-override.test.tsx +28 -0
  66. package/src/hooks/test/use-xychart-theme-style-reads.test.tsx +19 -13
  67. package/src/hooks/test/use-xychart-theme.test.tsx +25 -0
  68. package/src/hooks/{use-interactive-legend-data.ts → use-legend-visibility-data.ts} +29 -30
  69. package/src/hooks/use-xychart-theme.ts +6 -4
  70. package/src/index.ts +12 -3
  71. package/src/providers/chart-context/global-charts-provider.tsx +127 -30
  72. package/src/providers/chart-context/hooks/use-default-hidden-series.ts +47 -0
  73. package/src/providers/chart-context/private/theme-override-vars.ts +87 -0
  74. package/src/providers/chart-context/private/with-catalog-pointers.ts +50 -0
  75. package/src/providers/chart-context/test/chart-context.test.tsx +142 -40
  76. package/src/providers/chart-context/test/chart-scope-class.test.tsx +19 -0
  77. package/src/providers/chart-context/test/sparse-theme.test.ts +35 -0
  78. package/src/providers/chart-context/test/theme-override-vars-guard.test.tsx +29 -0
  79. package/src/providers/chart-context/test/theme-override-vars.test.ts +118 -0
  80. package/src/providers/chart-context/test/use-default-hidden-series-paint.test.tsx +56 -0
  81. package/src/providers/chart-context/test/use-default-hidden-series.ssr.test.tsx +39 -0
  82. package/src/providers/chart-context/test/use-default-hidden-series.test.tsx +222 -0
  83. package/src/providers/chart-context/test/with-catalog-pointers.test.ts +47 -0
  84. package/src/providers/chart-context/themes.ts +18 -27
  85. package/src/providers/chart-context/types.ts +7 -4
  86. package/src/providers/chart-scope/chart-scope-context.ts +8 -0
  87. package/src/providers/chart-scope/index.ts +3 -0
  88. package/src/providers/chart-scope/test/chart-scope.test.tsx +24 -0
  89. package/src/providers/chart-scope/test/use-standalone-scope-class.test.tsx +20 -0
  90. package/src/providers/chart-scope/use-chart-scope-element.ts +9 -0
  91. package/src/providers/chart-scope/use-standalone-scope-class.ts +13 -0
  92. package/src/providers/index.ts +1 -0
  93. package/src/styles/chart-scope-class.ts +6 -0
  94. package/src/styles/chart-scope.scss +83 -0
  95. package/src/styles/test/chart-scope.test.ts +165 -0
  96. package/src/styles/test/wpds-fallbacks.test.ts +131 -0
  97. package/src/types.ts +12 -34
  98. package/src/charts/private/grid-control/grid-control.module.scss +0 -8
  99. package/src/charts/private/grid-control/grid-control.tsx +0 -26
  100. package/src/charts/private/grid-control/index.ts +0 -1
  101. package/src/charts/private/grid-control/test/grid-control.test.tsx +0 -56
  102. package/src/charts/private/single-chart-context/index.ts +0 -8
package/dist/index.css CHANGED
@@ -1,3 +1,39 @@
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));
5
+ --a8c-charts-color-label: var(--wpds-color-foreground-content-neutral, #1e1e1e);
6
+ --a8c-charts-color-label-secondary: var(--wpds-color-foreground-content-neutral-weak, #707070);
7
+ --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));
10
+ --a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral, #1e1e1e);
11
+ --a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak, #008030);
12
+ --a8c-charts-color-trend-down: var(--wpds-color-foreground-content-error-weak, #cc1818);
13
+ --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));
15
+ --a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
16
+ --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
17
+ --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
18
+ --a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
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
+ --a8c-charts-elevation-xs:
22
+ 0 1px 1px 0 #00000008,
23
+ 0 1px 2px 0 #00000005,
24
+ 0 3px 3px 0 #00000005,
25
+ 0 4px 4px 0 #00000003;
26
+ --a8c-charts-elevation-sm:
27
+ 0 1px 2px 0 #0000000d,
28
+ 0 2px 3px 0 #0000000a,
29
+ 0 6px 6px 0 #00000008,
30
+ 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));
33
+ --a8c-charts-border-radius-bar: var(--wpds-border-radius-md, 4px);
34
+ --a8c-charts-border-radius-cell: var(--wpds-border-radius-sm, 2px);
35
+ --a8c-charts-border-radius-leaderboard-bar: 9999px;
36
+ }
1
37
  .a8ccharts-04TogW-legend {
2
38
  align-self: stretch;
3
39
  }
@@ -49,7 +85,7 @@
49
85
  }
50
86
 
51
87
  .a8ccharts-04TogW-legend-item-value {
52
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
88
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
53
89
  flex-shrink: 0;
54
90
  }
55
91
  .a8ccharts--zY0xG-tooltip {
@@ -79,7 +115,7 @@
79
115
  .a8ccharts-udGPVq-svg-empty-state {
80
116
  text-align: center;
81
117
  font-size: var(--wpds-typography-font-size-md, 13px);
82
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
118
+ color: var(--a8c-charts-color-label-secondary);
83
119
  }
84
120
  .a8ccharts-sP1gHa-container {
85
121
  width: 100%;
@@ -100,9 +136,9 @@
100
136
  min-height: 0;
101
137
  }
102
138
  .a8ccharts-ur9dWW-x-zoom__selection {
103
- fill: var(--a8c-charts-color-zoom-selection, var(--wpds-color-background-interactive-brand-strong, #3858e9));
139
+ fill: var(--a8c-charts-color-zoom-selection);
104
140
  fill-opacity: .16;
105
- stroke: var(--a8c-charts-color-zoom-selection-stroke, var(--wpds-color-stroke-interactive-brand, #3858e9));
141
+ stroke: var(--a8c-charts-color-zoom-selection-stroke);
106
142
  stroke-opacity: .65;
107
143
  stroke-width: var(--wpds-border-width-xs, 1px);
108
144
  pointer-events: none;
@@ -117,7 +153,7 @@
117
153
  }
118
154
 
119
155
  .a8ccharts-ur9dWW-x-zoom__reset:not(:hover, :active, :focus) {
120
- background-color: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
156
+ background-color: var(--a8c-charts-color-surface);
121
157
  }
122
158
  .a8ccharts-inuQka-line-chart {
123
159
  position: relative;
@@ -125,8 +161,7 @@
125
161
 
126
162
  .a8ccharts-inuQka-line-chart--animated path {
127
163
  transform-origin: 0 95%;
128
- animation: a8ccharts-inuQka-rise var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
129
- transform: scaleY(0);
164
+ animation: a8ccharts-inuQka-rise var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
130
165
  }
131
166
 
132
167
  .a8ccharts-inuQka-line-chart svg {
@@ -134,13 +169,13 @@
134
169
  }
135
170
 
136
171
  .a8ccharts-inuQka-line-chart__tooltip, .a8ccharts-inuQka-line-chart__annotation-label-popover {
137
- background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
138
- color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
172
+ background: var(--a8c-charts-color-surface);
173
+ color: var(--a8c-charts-color-label);
139
174
  padding: var(--wpds-dimension-padding-sm, 8px);
140
175
  }
141
176
 
142
177
  .a8ccharts-inuQka-line-chart__tooltip-date {
143
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
178
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
144
179
  padding-bottom: var(--wpds-dimension-padding-md, 12px);
145
180
  }
146
181
 
@@ -149,7 +184,7 @@
149
184
  }
150
185
 
151
186
  .a8ccharts-inuQka-line-chart__tooltip-label {
152
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
187
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
153
188
  padding-right: var(--wpds-dimension-padding-lg, 16px);
154
189
  }
155
190
 
@@ -218,6 +253,10 @@
218
253
  }
219
254
 
220
255
  @keyframes a8ccharts-inuQka-rise {
256
+ from {
257
+ transform: scaleY(0);
258
+ }
259
+
221
260
  to {
222
261
  transform: scaleY(1);
223
262
  }
@@ -228,8 +267,7 @@
228
267
 
229
268
  .a8ccharts-jlynaq-area-chart--animated path {
230
269
  transform-origin: 0 95%;
231
- animation: a8ccharts-jlynaq-rise var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
232
- transform: scaleY(0);
270
+ animation: a8ccharts-jlynaq-rise var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
233
271
  }
234
272
 
235
273
  .a8ccharts-jlynaq-area-chart svg {
@@ -237,6 +275,10 @@
237
275
  }
238
276
 
239
277
  @keyframes a8ccharts-jlynaq-rise {
278
+ from {
279
+ transform: scaleY(0);
280
+ }
281
+
240
282
  to {
241
283
  transform: scaleY(1);
242
284
  }
@@ -248,11 +290,14 @@
248
290
  .a8ccharts-97yN9W-bar-chart--animated rect {
249
291
  transform-origin: bottom;
250
292
  transform-box: fill-box;
251
- animation: a8ccharts-97yN9W-rise var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
252
- transform: scaleY(0);
293
+ animation: a8ccharts-97yN9W-rise var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
253
294
  }
254
295
 
255
296
  @keyframes a8ccharts-97yN9W-rise {
297
+ from {
298
+ transform: scaleY(0);
299
+ }
300
+
256
301
  to {
257
302
  transform: scaleY(1);
258
303
  }
@@ -261,11 +306,14 @@
261
306
  .a8ccharts-97yN9W-bar-chart--animated-horizontal rect {
262
307
  transform-origin: 0;
263
308
  transform-box: fill-box;
264
- animation: a8ccharts-97yN9W-stretch var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
265
- transform: scaleX(0);
309
+ animation: a8ccharts-97yN9W-stretch var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
266
310
  }
267
311
 
268
312
  @keyframes a8ccharts-97yN9W-stretch {
313
+ from {
314
+ transform: scaleX(0);
315
+ }
316
+
269
317
  to {
270
318
  transform: scaleX(1);
271
319
  }
@@ -280,11 +328,11 @@
280
328
  }
281
329
 
282
330
  .a8ccharts-mGEVca-main-rate {
283
- color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
331
+ color: var(--a8c-charts-color-label);
284
332
  text-overflow: ellipsis;
285
- font-size: var(--wpds-typography-font-size-xl, 18px);
333
+ font-size: var(--wpds-typography-font-size-xl, 20px);
286
334
  font-style: normal;
287
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
335
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
288
336
  line-height: var(--wpds-typography-line-height-sm, 20px);
289
337
  margin: 0;
290
338
  overflow: hidden;
@@ -294,7 +342,7 @@
294
342
  text-overflow: ellipsis;
295
343
  font-size: var(--wpds-typography-font-size-md, 13px);
296
344
  font-style: normal;
297
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
345
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
298
346
  line-height: var(--wpds-typography-line-height-sm, 20px);
299
347
  margin: 0;
300
348
  overflow: hidden;
@@ -321,7 +369,7 @@
321
369
  }
322
370
 
323
371
  .a8ccharts-mGEVca-step-label {
324
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
372
+ color: var(--a8c-charts-color-label-secondary);
325
373
  font-size: var(--wpds-typography-font-size-sm, 12px);
326
374
  font-weight: var(--wpds-typography-font-weight-default, 400);
327
375
  line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -331,21 +379,21 @@
331
379
  }
332
380
 
333
381
  .a8ccharts-mGEVca-step-rate {
334
- color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
382
+ color: var(--a8c-charts-color-label);
335
383
  font-size: var(--wpds-typography-font-size-md, 13px);
336
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
384
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
337
385
  line-height: var(--wpds-typography-line-height-xs, 16px);
338
386
  }
339
387
 
340
388
  .a8ccharts-mGEVca-bar-container {
341
- border-radius: var(--wpds-border-radius-md, 4px);
389
+ border-radius: var(--a8c-charts-border-radius-bar);
342
390
  cursor: pointer;
343
391
  flex: 1;
344
392
  position: relative;
345
393
  }
346
394
 
347
395
  .a8ccharts-mGEVca-funnel-bar {
348
- border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
396
+ border-radius: var(--a8c-charts-border-radius-bar) var(--a8c-charts-border-radius-bar) 0 0;
349
397
  width: 100%;
350
398
  min-height: 4px;
351
399
  }
@@ -353,25 +401,28 @@
353
401
  .a8ccharts-mGEVca-funnel-bar--animated {
354
402
  transform-origin: bottom;
355
403
  transform-box: fill-box;
356
- animation: a8ccharts-mGEVca-stretch var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
357
- transform: scaleY(0);
404
+ animation: a8ccharts-mGEVca-stretch var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
358
405
  }
359
406
 
360
407
  @keyframes a8ccharts-mGEVca-stretch {
408
+ from {
409
+ transform: scaleY(0);
410
+ }
411
+
361
412
  to {
362
413
  transform: scaleY(1);
363
414
  }
364
415
  }
365
416
 
366
417
  .a8ccharts-mGEVca-tooltip-wrapper {
367
- background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
418
+ background: var(--a8c-charts-color-surface);
368
419
  border-radius: var(--wpds-border-radius-md, 4px) !important;
369
420
  padding: var(--wpds-dimension-padding-md, 12px) !important;
370
421
  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
371
422
  }
372
423
 
373
424
  .a8ccharts-mGEVca-tooltip-title {
374
- color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
425
+ color: var(--a8c-charts-color-label);
375
426
  font-size: var(--wpds-typography-font-size-sm, 12px);
376
427
  font-style: normal;
377
428
  font-weight: var(--wpds-typography-font-weight-default, 400);
@@ -379,21 +430,25 @@
379
430
  }
380
431
 
381
432
  .a8ccharts-mGEVca-tooltip-content {
382
- color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
433
+ color: var(--a8c-charts-color-label);
383
434
  font-size: var(--wpds-typography-font-size-md, 13px);
384
435
  font-style: normal;
385
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
436
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
386
437
  line-height: var(--wpds-typography-line-height-sm, 20px);
387
438
  }
388
439
 
389
440
  .a8ccharts-mGEVca-empty-state {
390
441
  text-align: center;
391
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
392
- font-size: var(--wpds-typography-font-size-lg, 16px);
442
+ color: var(--a8c-charts-color-label-secondary);
443
+ font-size: var(--wpds-typography-font-size-lg, 15px);
393
444
  }
394
445
  .a8ccharts-8hS2IW-container {
395
446
  position: relative;
396
447
  }
448
+
449
+ .a8ccharts-8hS2IW-container .google-visualization-tooltip {
450
+ white-space: nowrap;
451
+ }
397
452
  .a8ccharts-O3YMOW-heatmap-chart {
398
453
  width: 100%;
399
454
  height: 100%;
@@ -407,7 +462,7 @@
407
462
 
408
463
  .a8ccharts-O3YMOW-heatmap-chart__empty {
409
464
  padding: var(--wpds-dimension-padding-lg, 16px);
410
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
465
+ color: var(--a8c-charts-color-label-secondary);
411
466
  }
412
467
 
413
468
  .a8ccharts-O3YMOW-heatmap-chart__grid {
@@ -419,7 +474,7 @@
419
474
  }
420
475
 
421
476
  .a8ccharts-O3YMOW-heatmap-chart__grid:focus-visible {
422
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
477
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
423
478
  outline-offset: 2px;
424
479
  border-radius: var(--wpds-border-radius-sm, 2px);
425
480
  }
@@ -442,7 +497,7 @@
442
497
  }
443
498
 
444
499
  .a8ccharts-O3YMOW-heatmap-chart__col-label, .a8ccharts-O3YMOW-heatmap-chart__row-label {
445
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
500
+ color: var(--a8c-charts-color-label-secondary);
446
501
  font-size: var(--wpds-typography-font-size-xs, 11px);
447
502
  white-space: nowrap;
448
503
  overflow: visible;
@@ -460,8 +515,8 @@
460
515
  }
461
516
 
462
517
  .a8ccharts-O3YMOW-heatmap-chart__cell {
463
- border-radius: var(--wpds-border-radius-sm, 2px);
464
- background: var(--a8c-charts-color-track, var(--wpds-color-background-track-neutral-weak, #f0f0f0));
518
+ border-radius: var(--a8c-charts-border-radius-cell);
519
+ background: var(--a8c-charts-color-track);
465
520
  justify-content: center;
466
521
  align-items: center;
467
522
  min-width: 0;
@@ -474,28 +529,33 @@
474
529
  pointer-events: none;
475
530
  }
476
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
+
477
537
  .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
478
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));
479
539
  }
480
540
 
481
541
  .a8ccharts-O3YMOW-heatmap-chart__cell--selected {
482
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
542
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
483
543
  outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
484
544
  }
485
545
 
486
546
  .a8ccharts-O3YMOW-heatmap-chart__cell-value {
487
- color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
547
+ color: var(--a8c-charts-color-label);
488
548
  font-size: var(--wpds-typography-font-size-md, 13px);
489
549
  }
490
550
 
491
551
  .a8ccharts-O3YMOW-heatmap-chart__cell--strong .a8ccharts-O3YMOW-heatmap-chart__cell-value {
492
- color: var(--a8c-charts-color-label-inverse, var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0));
552
+ color: var(--a8c-charts-color-label-inverse);
493
553
  }
494
554
 
495
555
  .a8ccharts-O3YMOW-heatmap-chart__legend-swatch {
496
556
  width: var(--wpds-dimension-size-3xs, 12px);
497
557
  height: var(--wpds-dimension-size-3xs, 12px);
498
- border-radius: var(--wpds-border-radius-sm, 2px);
558
+ border-radius: var(--a8c-charts-border-radius-cell);
499
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));
500
560
  }
501
561
  .a8ccharts-GovfoW-leaderboardChart {
@@ -547,18 +607,21 @@
547
607
  height: 100%;
548
608
  min-height: 6px;
549
609
  min-width: var(--wpds-dimension-size-5xs, 4px);
550
- border-radius: var(--a8c-charts-border-radius-leaderboard-bar, var(--a8c--charts--leaderboard--bar--border-radius, 9999px));
610
+ border-radius: var(--a8c-charts-border-radius-leaderboard-bar);
551
611
  z-index: -1;
552
612
  }
553
613
 
554
614
  .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--animated {
555
615
  transform-origin: 0;
556
616
  transform-box: fill-box;
557
- animation: a8ccharts-GovfoW-stretch var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
558
- transform: scaleX(0);
617
+ animation: a8ccharts-GovfoW-stretch var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
559
618
  }
560
619
 
561
620
  @keyframes a8ccharts-GovfoW-stretch {
621
+ from {
622
+ transform: scaleX(0);
623
+ }
624
+
562
625
  to {
563
626
  transform: scaleX(1);
564
627
  }
@@ -587,7 +650,7 @@
587
650
  .a8ccharts-GovfoW-emptyState {
588
651
  padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
589
652
  text-align: center;
590
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
653
+ color: var(--a8c-charts-color-label-secondary);
591
654
  font-size: var(--wpds-typography-font-size-md, 13px);
592
655
  font-style: italic;
593
656
  }
@@ -650,14 +713,14 @@
650
713
 
651
714
  .a8ccharts-GovfoW-interactiveRow:focus-visible {
652
715
  border-radius: var(--wpds-border-radius-sm, 2px);
653
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
716
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
654
717
  outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
655
718
  }
656
719
 
657
720
  .a8ccharts-GovfoW-chevron {
658
721
  inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
659
722
  opacity: 0;
660
- color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
723
+ color: var(--a8c-charts-color-label-secondary);
661
724
  transition: opacity var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
662
725
  pointer-events: none;
663
726
  margin-block: auto;
@@ -689,8 +752,8 @@
689
752
  }
690
753
 
691
754
  .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-label {
692
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
693
- 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);
694
757
  }
695
758
 
696
759
  .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-note {
@@ -716,7 +779,7 @@
716
779
  }
717
780
  .a8ccharts-zR7F7G-trend-indicator {
718
781
  font-size: var(--wpds-typography-font-size-md, 13px);
719
- font-weight: var(--wpds-typography-font-weight-emphasis, 499);
782
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
720
783
  align-items: center;
721
784
  gap: .125em;
722
785
  line-height: 1;
@@ -724,15 +787,15 @@
724
787
  }
725
788
 
726
789
  .a8ccharts-zR7F7G-trend-indicator--up {
727
- color: var(--a8c-charts-color-trend-up, var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030)));
790
+ color: var(--a8c-charts-color-trend-up);
728
791
  }
729
792
 
730
793
  .a8ccharts-zR7F7G-trend-indicator--down {
731
- color: var(--a8c-charts-color-trend-down, var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818)));
794
+ color: var(--a8c-charts-color-trend-down);
732
795
  }
733
796
 
734
797
  .a8ccharts-zR7F7G-trend-indicator--neutral {
735
- color: var(--a8c-charts-color-trend-neutral, var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070)));
798
+ color: var(--a8c-charts-color-trend-neutral);
736
799
  }
737
800
 
738
801
  .a8ccharts-zR7F7G-trend-indicator__icon {