@automattic/charts 1.5.3 → 1.6.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 (41) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.cjs +8969 -9570
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +315 -202
  5. package/dist/index.d.cts +1246 -1183
  6. package/dist/index.d.ts +1247 -1184
  7. package/dist/index.js +8548 -9570
  8. package/dist/index.js.map +1 -1
  9. package/dist/visx/group/index.cjs +8 -8
  10. package/dist/visx/group/index.d.cts +2 -3
  11. package/dist/visx/group/index.d.ts +2 -3
  12. package/dist/visx/group/index.js +1 -7
  13. package/dist/visx/legend/index.cjs +20 -10
  14. package/dist/visx/legend/index.d.cts +2 -1
  15. package/dist/visx/legend/index.d.ts +2 -1
  16. package/dist/visx/legend/index.js +2 -10
  17. package/dist/visx/text/index.cjs +20 -12
  18. package/dist/visx/text/index.d.cts +2 -1
  19. package/dist/visx/text/index.d.ts +2 -1
  20. package/dist/visx/text/index.js +2 -12
  21. package/package.json +11 -18
  22. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +99 -0
  23. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +33 -5
  24. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +35 -1
  25. package/src/types.ts +15 -1
  26. package/dist/chunk-5WRI5ZAA.js +0 -31
  27. package/dist/chunk-5WRI5ZAA.js.map +0 -1
  28. package/dist/chunk-7OZEQ5HE.cjs +0 -9
  29. package/dist/chunk-7OZEQ5HE.cjs.map +0 -1
  30. package/dist/chunk-DZUJEN5N.cjs +0 -31
  31. package/dist/chunk-DZUJEN5N.cjs.map +0 -1
  32. package/dist/chunk-NFRB2POF.js +0 -9
  33. package/dist/chunk-NFRB2POF.js.map +0 -1
  34. package/dist/index.css.map +0 -1
  35. package/dist/visx/group/index.cjs.map +0 -1
  36. package/dist/visx/group/index.js.map +0 -1
  37. package/dist/visx/legend/index.cjs.map +0 -1
  38. package/dist/visx/legend/index.js.map +0 -1
  39. package/dist/visx/text/index.cjs.map +0 -1
  40. package/dist/visx/text/index.js.map +0 -1
  41. package/tsup.config.ts +0 -46
package/dist/index.css CHANGED
@@ -1,270 +1,289 @@
1
- /* esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss */
2
- .a8ccharts-89ApsU {
1
+ .a8ccharts-04TogW-legend {
3
2
  align-self: stretch;
4
3
  }
5
- .a8ccharts-Vflwq8 {
4
+
5
+ .a8ccharts-04TogW-legend-item {
6
6
  font-size: var(--wpds-typography-font-size-md, 13px);
7
7
  }
8
- .a8ccharts-qGsavM {
8
+
9
+ .a8ccharts-04TogW-legend-item--interactive {
9
10
  cursor: pointer;
10
11
  user-select: none;
11
- transition: opacity 0.2s ease;
12
+ transition: opacity .2s;
12
13
  }
13
- .a8ccharts-qGsavM:hover {
14
- opacity: 0.8;
14
+
15
+ .a8ccharts-04TogW-legend-item--interactive:hover {
16
+ opacity: .8;
15
17
  }
16
- .a8ccharts-qGsavM:focus {
17
- outline: 2px solid currentColor;
18
+
19
+ .a8ccharts-04TogW-legend-item--interactive:focus {
18
20
  outline-offset: 2px;
19
21
  border-radius: var(--wpds-border-radius-md, 4px);
22
+ outline: 2px solid;
20
23
  }
21
- .a8ccharts-qGsavM:focus:not(:focus-visible) {
24
+
25
+ .a8ccharts-04TogW-legend-item--interactive:focus:not(:focus-visible) {
22
26
  outline: none;
23
27
  }
24
- .a8ccharts-ZtDY-Q {
25
- opacity: 0.4;
28
+
29
+ .a8ccharts-04TogW-legend-item--inactive {
30
+ opacity: .4;
26
31
  }
27
- .a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {
32
+
33
+ .a8ccharts-04TogW-legend-item--inactive .a8ccharts-04TogW-legend-item-label {
28
34
  text-decoration: line-through;
29
35
  }
30
- .a8ccharts-faSDBI {
36
+
37
+ .a8ccharts-04TogW-legend-item-text--wrap {
31
38
  overflow-wrap: break-word;
32
39
  white-space: normal;
33
40
  hyphens: auto;
34
41
  }
35
- .a8ccharts-FISUIO {
42
+
43
+ .a8ccharts-04TogW-legend-item-text--ellipsis {
36
44
  white-space: nowrap;
37
- overflow: hidden;
38
45
  text-overflow: ellipsis;
39
46
  flex-shrink: 1;
40
47
  min-width: 0;
48
+ overflow: hidden;
41
49
  }
42
- .a8ccharts-DTZlT- {
50
+
51
+ .a8ccharts-04TogW-legend-item-value {
43
52
  font-weight: var(--wpds-typography-font-weight-medium, 499);
44
53
  flex-shrink: 0;
45
54
  }
46
-
47
- /* esbuild-sass-plugin:css-chunk:src/components/tooltip/base-tooltip.module.scss */
48
- .a8ccharts-OfX6nd {
55
+ .a8ccharts--zY0xG-tooltip {
49
56
  padding: var(--wpds-dimension-padding-sm, 8px);
50
- background-color: rgba(0, 0, 0, 0.85);
51
57
  color: #fff;
52
58
  border-radius: var(--wpds-border-radius-md, 4px);
53
59
  font-size: var(--wpds-typography-font-size-md, 13px);
54
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
55
- position: absolute;
56
60
  pointer-events: none;
61
+ background-color: #000000d9;
62
+ position: absolute;
57
63
  transform: translate(-50%, -100%);
64
+ box-shadow: 0 1px 2px #0000001a;
58
65
  }
59
-
60
- /* esbuild-sass-plugin:css-chunk:src/charts/private/chart-layout/chart-layout.module.scss */
61
- .a8ccharts-gXtQZk {
66
+ .a8ccharts-fpNVAq-chart-layout__content {
62
67
  flex: 1;
63
- min-height: 0;
64
68
  min-width: 0;
69
+ min-height: 0;
65
70
  }
66
- .a8ccharts-gXtQZk svg {
71
+
72
+ .a8ccharts-fpNVAq-chart-layout__content svg {
67
73
  display: block;
68
74
  }
69
-
70
- /* esbuild-sass-plugin:css-chunk:src/charts/private/svg-empty-state/svg-empty-state.module.scss */
71
- .a8ccharts-tGXBHV {
75
+ .a8ccharts-udGPVq-svg-empty-state {
72
76
  text-align: center;
73
77
  width: 100%;
74
78
  height: 100%;
75
79
  font-size: var(--wpds-typography-font-size-md, 13px);
76
80
  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
77
81
  }
78
-
79
- /* esbuild-sass-plugin:css-chunk:src/charts/private/with-responsive/with-responsive.module.scss */
80
- .a8ccharts-GSKfBD {
82
+ .a8ccharts-sP1gHa-container {
81
83
  min-width: 0;
82
84
  min-height: 0;
83
85
  }
84
-
85
- /* esbuild-sass-plugin:css-chunk:src/charts/private/x-zoom.module.scss */
86
- .a8ccharts-KeNSrO {
87
- fill: var(--charts-zoom-selection-fill, rgba(56, 88, 233, 0.16));
88
- stroke: var(--charts-zoom-selection-stroke, rgba(56, 88, 233, 0.65));
86
+ .a8ccharts-y6bXNq-x-zoom__selection {
87
+ fill: var(--charts-zoom-selection-fill, #3858e929);
88
+ stroke: var(--charts-zoom-selection-stroke, #3858e9a6);
89
89
  stroke-width: var(--wpds-border-width-xs, 1px);
90
90
  pointer-events: none;
91
91
  }
92
- .a8ccharts-gg6Kte {
93
- position: absolute;
92
+
93
+ .a8ccharts-y6bXNq-x-zoom__reset {
94
94
  top: var(--wpds-dimension-gap-sm, 8px);
95
95
  right: var(--wpds-dimension-gap-sm, 8px);
96
96
  z-index: 2;
97
- display: inline-flex;
98
- align-items: center;
99
- justify-content: center;
97
+ background: var(--charts-zoom-reset-bg, #ffffffeb);
100
98
  width: 28px;
101
99
  height: 28px;
102
- padding: 0;
103
- background: var(--charts-zoom-reset-bg, rgba(255, 255, 255, 0.92));
104
100
  color: var(--charts-zoom-reset-fg, #1e1e1e);
105
- border: var(--wpds-border-width-xs, 1px) solid var(--charts-zoom-reset-border, rgba(0, 0, 0, 0.16));
101
+ border: var(--wpds-border-width-xs, 1px) solid var(--charts-zoom-reset-border, #00000029);
106
102
  border-radius: var(--wpds-border-radius-md, 4px);
107
103
  cursor: pointer;
108
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
104
+ justify-content: center;
105
+ align-items: center;
106
+ padding: 0;
107
+ display: inline-flex;
108
+ position: absolute;
109
+ box-shadow: 0 1px 2px #00000014;
109
110
  }
110
- .a8ccharts-gg6Kte:hover {
111
- background: var(--charts-zoom-reset-bg-hover, rgb(255, 255, 255));
111
+
112
+ .a8ccharts-y6bXNq-x-zoom__reset:hover {
113
+ background: var(--charts-zoom-reset-bg-hover, #fff);
112
114
  }
113
- .a8ccharts-gg6Kte:focus-visible {
115
+
116
+ .a8ccharts-y6bXNq-x-zoom__reset:focus-visible {
114
117
  outline: 2px solid var(--charts-zoom-reset-focus, #3858e9);
115
118
  outline-offset: 1px;
116
119
  }
117
- .a8ccharts-bQEoeo {
120
+
121
+ .a8ccharts-y6bXNq-x-zoom__reset-icon {
122
+ flex-shrink: 0;
118
123
  width: 16px;
119
124
  height: 16px;
120
- flex-shrink: 0;
121
125
  }
122
-
123
- /* esbuild-sass-plugin:css-chunk:src/charts/line-chart/line-chart.module.scss */
124
- .a8ccharts-v-oO8E {
126
+ .a8ccharts-inuQka-line-chart {
125
127
  position: relative;
126
128
  }
127
- .a8ccharts-QrkuTW path {
129
+
130
+ .a8ccharts-inuQka-line-chart--animated path {
128
131
  transform-origin: 0 95%;
132
+ animation: 1s ease-out forwards a8ccharts-inuQka-rise;
129
133
  transform: scaleY(0);
130
- animation: a8ccharts--rxDU3 1s ease-out forwards;
131
134
  }
132
- .a8ccharts-v-oO8E svg {
135
+
136
+ .a8ccharts-inuQka-line-chart svg {
133
137
  overflow: visible;
134
138
  }
135
- .a8ccharts-Tu0rR-,
136
- .a8ccharts--RSWXi {
137
- background: #fff;
139
+
140
+ .a8ccharts-inuQka-line-chart__tooltip, .a8ccharts-inuQka-line-chart__annotation-label-popover {
138
141
  padding: var(--wpds-dimension-padding-sm, 8px);
142
+ background: #fff;
139
143
  }
140
- .a8ccharts-Q-b5A1 {
144
+
145
+ .a8ccharts-inuQka-line-chart__tooltip-date {
141
146
  font-weight: var(--wpds-typography-font-weight-medium, 499);
142
147
  padding-bottom: var(--wpds-dimension-padding-md, 12px);
143
148
  }
144
- .a8ccharts-19N7T9 {
149
+
150
+ .a8ccharts-inuQka-line-chart__tooltip-row {
145
151
  padding: var(--wpds-dimension-padding-xs, 4px) 0;
146
152
  }
147
- .a8ccharts-HOAXrD {
153
+
154
+ .a8ccharts-inuQka-line-chart__tooltip-label {
148
155
  font-weight: var(--wpds-typography-font-weight-medium, 499);
149
156
  padding-right: var(--wpds-dimension-padding-lg, 16px);
150
157
  }
151
- .a8ccharts-rQiY8O {
158
+
159
+ .a8ccharts-inuQka-line-chart__annotations-overlay {
160
+ pointer-events: none;
152
161
  position: absolute;
153
- left: 0;
154
162
  top: 0;
163
+ left: 0;
155
164
  overflow: visible;
156
- pointer-events: none;
157
165
  }
158
- .a8ccharts-8AKWOe {
166
+
167
+ .a8ccharts-inuQka-line-chart__annotation-label {
159
168
  pointer-events: auto;
160
169
  }
161
- .a8ccharts-7mh3Cl {
162
- display: flex;
163
- align-items: center;
164
- justify-content: center;
170
+
171
+ .a8ccharts-inuQka-line-chart__annotation-label-trigger-button {
165
172
  pointer-events: auto;
166
173
  cursor: pointer;
167
- border: none;
168
174
  background: none;
175
+ border: none;
176
+ justify-content: center;
177
+ align-items: center;
169
178
  padding: 0;
179
+ display: flex;
170
180
  }
171
- .a8ccharts--RSWXi {
172
- min-width: 125px;
173
- background: #fff;
174
- border: none;
181
+
182
+ .a8ccharts-inuQka-line-chart__annotation-label-popover {
175
183
  border-radius: var(--wpds-border-radius-md, 4px);
184
+ min-width: 125px;
176
185
  font-size: var(--wpds-typography-font-size-md, 13px);
177
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
178
- position: fixed;
179
186
  margin: var(--wpds-dimension-gap-sm, 8px);
180
187
  visibility: hidden;
188
+ background: #fff;
189
+ border: none;
190
+ position: fixed;
191
+ box-shadow: 0 1px 2px #0000001a;
181
192
  }
182
- .a8ccharts-VAeVuJ {
193
+
194
+ .a8ccharts-inuQka-line-chart__annotation-label-popover--visible {
183
195
  visibility: visible;
184
196
  }
185
- .a8ccharts-TEe-iV {
197
+
198
+ .a8ccharts-inuQka-line-chart__annotation-label-popover--safari {
186
199
  position: initial;
187
200
  margin: auto;
188
201
  }
189
- .a8ccharts-b76gEu {
202
+
203
+ .a8ccharts-inuQka-line-chart__annotation-label-popover-content {
190
204
  padding: var(--wpds-dimension-padding-sm, 8px);
191
205
  }
192
- .a8ccharts-LIpFoS {
206
+
207
+ .a8ccharts-inuQka-line-chart__annotation-label-popover-close-button {
208
+ cursor: pointer;
193
209
  background: none;
194
210
  border: none;
195
- cursor: pointer;
211
+ justify-content: center;
212
+ align-items: center;
196
213
  width: 44px;
197
214
  height: 44px;
198
- display: flex;
199
- align-items: center;
200
- justify-content: center;
201
215
  padding: 0;
216
+ display: flex;
202
217
  }
218
+
203
219
  .visx-tooltip-glyph svg {
204
220
  width: 10px;
205
221
  height: 10px;
206
222
  }
207
- @keyframes a8ccharts--rxDU3 {
223
+
224
+ @keyframes a8ccharts-inuQka-rise {
208
225
  to {
209
226
  transform: scaleY(1);
210
227
  }
211
228
  }
212
-
213
- /* esbuild-sass-plugin:css-chunk:src/charts/area-chart/area-chart.module.scss */
214
- .a8ccharts-cBqM5n {
229
+ .a8ccharts-jlynaq-area-chart {
215
230
  position: relative;
216
231
  }
217
- .a8ccharts-sciJcS path {
232
+
233
+ .a8ccharts-jlynaq-area-chart--animated path {
218
234
  transform-origin: 0 95%;
235
+ animation: 1s ease-out forwards a8ccharts-jlynaq-rise;
219
236
  transform: scaleY(0);
220
- animation: a8ccharts-UUsTq6 1s ease-out forwards;
221
237
  }
222
- .a8ccharts-cBqM5n svg {
238
+
239
+ .a8ccharts-jlynaq-area-chart svg {
223
240
  overflow: visible;
224
241
  }
225
- @keyframes a8ccharts-UUsTq6 {
242
+
243
+ @keyframes a8ccharts-jlynaq-rise {
226
244
  to {
227
245
  transform: scaleY(1);
228
246
  }
229
247
  }
230
-
231
- /* esbuild-sass-plugin:css-chunk:src/charts/bar-chart/bar-chart.module.scss */
232
- .a8ccharts-3gflnB svg {
248
+ .a8ccharts-97yN9W-bar-chart svg {
233
249
  overflow: visible;
234
250
  }
235
- .a8ccharts-98W-yu rect {
251
+
252
+ .a8ccharts-97yN9W-bar-chart--animated rect {
236
253
  transform-origin: bottom;
237
254
  transform-box: fill-box;
255
+ animation: 1s ease-out forwards a8ccharts-97yN9W-rise;
238
256
  transform: scaleY(0);
239
- animation: a8ccharts-z6AsiQ 1s ease-out forwards;
240
257
  }
241
- @keyframes a8ccharts-z6AsiQ {
258
+
259
+ @keyframes a8ccharts-97yN9W-rise {
242
260
  to {
243
261
  transform: scaleY(1);
244
262
  }
245
263
  }
246
- .a8ccharts-HFA3FF rect {
247
- transform-origin: left;
264
+
265
+ .a8ccharts-97yN9W-bar-chart--animated-horizontal rect {
266
+ transform-origin: 0;
248
267
  transform-box: fill-box;
268
+ animation: 1s ease-out forwards a8ccharts-97yN9W-stretch;
249
269
  transform: scaleX(0);
250
- animation: a8ccharts-DQp37O 1s ease-out forwards;
251
270
  }
252
- @keyframes a8ccharts-DQp37O {
271
+
272
+ @keyframes a8ccharts-97yN9W-stretch {
253
273
  to {
254
274
  transform: scaleX(1);
255
275
  }
256
276
  }
257
-
258
- /* esbuild-sass-plugin:css-chunk:src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss */
259
- .a8ccharts-Qicx1p {
260
- opacity: 0.6;
277
+ .a8ccharts-mGEVca-conversion-funnel-chart--loading {
278
+ opacity: .6;
261
279
  pointer-events: none;
262
280
  }
263
- .a8ccharts-61WPYr {
281
+
282
+ .a8ccharts-mGEVca-main-metric {
264
283
  height: 20px;
265
284
  }
266
- .a8ccharts-RRRI6x {
267
- overflow: hidden;
285
+
286
+ .a8ccharts-mGEVca-main-rate {
268
287
  color: #1e1e1e;
269
288
  text-overflow: ellipsis;
270
289
  font-size: var(--wpds-typography-font-size-xl, 18px);
@@ -272,157 +291,184 @@
272
291
  font-weight: var(--wpds-typography-font-weight-medium, 499);
273
292
  line-height: var(--wpds-typography-line-height-sm, 20px);
274
293
  margin: 0;
275
- }
276
- .a8ccharts-661iwx {
277
294
  overflow: hidden;
295
+ }
296
+
297
+ .a8ccharts-mGEVca-change-indicator {
278
298
  text-overflow: ellipsis;
279
299
  font-size: var(--wpds-typography-font-size-md, 13px);
280
300
  font-style: normal;
281
301
  font-weight: var(--wpds-typography-font-weight-medium, 499);
282
302
  line-height: var(--wpds-typography-line-height-sm, 20px);
283
303
  margin: 0;
304
+ overflow: hidden;
284
305
  }
285
- .a8ccharts-Z7EGnW {
306
+
307
+ .a8ccharts-mGEVca-funnel-container {
286
308
  flex: 1;
287
- min-height: 200px;
288
309
  width: 100%;
310
+ min-height: 200px;
289
311
  }
290
- .a8ccharts-VqFY0l {
312
+
313
+ .a8ccharts-mGEVca-funnel-step {
291
314
  flex: 1 1 0;
292
315
  min-width: 0;
293
316
  height: 100%;
294
317
  }
295
- .a8ccharts-fk-hCl {
296
- transition: opacity 0.3s ease;
318
+
319
+ .a8ccharts-mGEVca-funnel-step--animated {
320
+ transition: opacity .3s;
297
321
  }
298
- .a8ccharts-1zOc9c {
299
- opacity: 0.3;
322
+
323
+ .a8ccharts-mGEVca-funnel-step--blurred {
324
+ opacity: .3;
300
325
  }
301
- .a8ccharts-6OabC4 {
326
+
327
+ .a8ccharts-mGEVca-step-label {
302
328
  color: #757575;
303
329
  font-size: var(--wpds-typography-font-size-sm, 12px);
304
330
  font-weight: var(--wpds-typography-font-weight-regular, 400);
305
331
  line-height: var(--wpds-typography-line-height-xs, 16px);
306
332
  white-space: nowrap;
307
- overflow: hidden;
308
333
  text-overflow: ellipsis;
334
+ overflow: hidden;
309
335
  }
310
- .a8ccharts-9wSZ6n {
336
+
337
+ .a8ccharts-mGEVca-step-rate {
311
338
  color: #1e1e1e;
312
339
  font-size: var(--wpds-typography-font-size-md, 13px);
313
340
  font-weight: var(--wpds-typography-font-weight-medium, 499);
314
341
  line-height: var(--wpds-typography-line-height-xs, 16px);
315
342
  }
316
- .a8ccharts-sSmCTi {
317
- flex: 1;
343
+
344
+ .a8ccharts-mGEVca-bar-container {
318
345
  border-radius: var(--wpds-border-radius-md, 4px);
319
- position: relative;
320
346
  cursor: pointer;
347
+ flex: 1;
348
+ position: relative;
321
349
  }
322
- .a8ccharts-EzczI- {
350
+
351
+ .a8ccharts-mGEVca-funnel-bar {
352
+ border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
323
353
  width: 100%;
324
354
  min-height: 4px;
325
- border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
326
355
  }
327
- .a8ccharts-68HQJl {
356
+
357
+ .a8ccharts-mGEVca-funnel-bar--animated {
328
358
  transform-origin: bottom;
329
359
  transform-box: fill-box;
360
+ animation: 1s ease-out forwards a8ccharts-mGEVca-stretch;
330
361
  transform: scaleY(0);
331
- animation: a8ccharts-CmtieZ 1s ease-out forwards;
332
362
  }
333
- @keyframes a8ccharts-CmtieZ {
363
+
364
+ @keyframes a8ccharts-mGEVca-stretch {
334
365
  to {
335
366
  transform: scaleY(1);
336
367
  }
337
368
  }
338
- .a8ccharts-2TeoCn {
369
+
370
+ .a8ccharts-mGEVca-tooltip-wrapper {
339
371
  border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
340
372
  background: var(--black-white-white, #fff);
341
373
  border-radius: var(--wpds-border-radius-md, 4px) !important;
342
374
  padding: var(--wpds-dimension-padding-md, 12px) !important;
343
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
375
+ box-shadow: 0 1px 3px #00000026, 0 3px 9px #0000001f !important;
344
376
  }
345
- .a8ccharts-jkRitH {
377
+
378
+ .a8ccharts-mGEVca-tooltip-title {
346
379
  color: #1e1e1e;
347
380
  font-size: var(--wpds-typography-font-size-sm, 12px);
348
381
  font-style: normal;
349
382
  font-weight: var(--wpds-typography-font-weight-regular, 400);
350
383
  line-height: var(--wpds-typography-line-height-xs, 16px);
351
384
  }
352
- .a8ccharts-8jgT-3 {
385
+
386
+ .a8ccharts-mGEVca-tooltip-content {
353
387
  color: #1e1e1e;
354
388
  font-size: var(--wpds-typography-font-size-md, 13px);
355
389
  font-style: normal;
356
390
  font-weight: var(--wpds-typography-font-weight-medium, 499);
357
391
  line-height: var(--wpds-typography-line-height-sm, 20px);
358
392
  }
359
- .a8ccharts-Ml6MMr {
393
+
394
+ .a8ccharts-mGEVca-empty-state {
360
395
  text-align: center;
361
396
  color: #6b7280;
362
397
  font-size: var(--wpds-typography-font-size-lg, 16px);
363
398
  }
364
-
365
- /* esbuild-sass-plugin:css-chunk:src/charts/geo-chart/geo-chart.module.scss */
366
- .a8ccharts-JvcqOz {
399
+ .a8ccharts-8hS2IW-container {
367
400
  position: relative;
368
401
  }
369
-
370
- /* esbuild-sass-plugin:css-chunk:src/charts/leaderboard-chart/leaderboard-chart.module.scss */
371
- .a8ccharts-V3NYDq {
372
- transition: opacity 0.3s ease-in-out;
402
+ .a8ccharts-GovfoW-leaderboardChart {
403
+ transition: opacity .3s ease-in-out;
373
404
  }
374
- .a8ccharts-WHNERS {
375
- height: 100%;
405
+
406
+ .a8ccharts-GovfoW-leaderboardChart--responsive {
376
407
  width: 100%;
408
+ height: 100%;
377
409
  }
378
- .a8ccharts-JQbl6A {
379
- opacity: 0.5;
410
+
411
+ .a8ccharts-GovfoW-leaderboardChart--loading {
412
+ opacity: .5;
380
413
  }
381
- .a8ccharts-Ml1kKc {
414
+
415
+ .a8ccharts-GovfoW-leaderboardChart__content {
382
416
  flex: 1;
383
417
  min-height: 0;
384
418
  overflow: auto;
385
419
  }
386
- .a8ccharts-ETItHW {
387
- display: grid;
388
- align-items: center;
420
+
421
+ .a8ccharts-GovfoW-barWithLabelContainer {
422
+ isolation: isolate;
389
423
  grid-template-columns: 1fr;
424
+ align-items: center;
390
425
  row-gap: 6px;
391
- isolation: isolate;
426
+ display: grid;
392
427
  }
393
- .a8ccharts-ETItHW.a8ccharts-oA4hdH {
394
- grid-template: "overlap" 1fr/1fr;
428
+
429
+ .a8ccharts-GovfoW-barWithLabelContainer.a8ccharts-GovfoW-is-overlay {
430
+ grid-template: "a8ccharts-GovfoW-overlap" 1fr
431
+ / 1fr;
395
432
  }
396
- .a8ccharts-ETItHW.a8ccharts-oA4hdH > * {
397
- grid-area: overlap;
433
+
434
+ .a8ccharts-GovfoW-barWithLabelContainer.a8ccharts-GovfoW-is-overlay > * {
435
+ grid-area: a8ccharts-GovfoW-overlap;
398
436
  }
399
- .a8ccharts-ETItHW.a8ccharts-oA4hdH .a8ccharts-UciQnF {
437
+
438
+ .a8ccharts-GovfoW-barWithLabelContainer.a8ccharts-GovfoW-is-overlay .a8ccharts-GovfoW-label {
400
439
  padding-left: var(--wpds-dimension-padding-sm, 8px);
401
440
  }
402
- .a8ccharts-ETItHW .a8ccharts-np8f0T {
441
+
442
+ .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar {
403
443
  height: 100%;
404
444
  min-height: 6px;
445
+ min-width: var(--wpds-dimension-size-5xs, 4px);
405
446
  border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
406
447
  z-index: -1;
407
448
  }
408
- .a8ccharts-ETItHW .a8ccharts-zq3CmS {
409
- transform-origin: left;
449
+
450
+ .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--animated {
451
+ transform-origin: 0;
410
452
  transform-box: fill-box;
453
+ animation: 1s ease-out forwards a8ccharts-GovfoW-stretch;
411
454
  transform: scaleX(0);
412
- animation: a8ccharts-D0Q3w1 1s ease-out forwards;
413
455
  }
414
- @keyframes a8ccharts-D0Q3w1 {
456
+
457
+ @keyframes a8ccharts-GovfoW-stretch {
415
458
  to {
416
459
  transform: scaleX(1);
417
460
  }
418
461
  }
419
- .a8ccharts-B6VcRn {
462
+
463
+ .a8ccharts-GovfoW-valueContainer {
420
464
  justify-content: flex-end;
421
465
  }
422
- .a8ccharts-GB7tyM {
466
+
467
+ .a8ccharts-GovfoW-overlayLabel {
423
468
  align-items: center;
424
469
  }
425
- .a8ccharts-E0K4Hr {
470
+
471
+ .a8ccharts-GovfoW-emptyState {
426
472
  padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
427
473
  text-align: center;
428
474
  color: #666;
@@ -430,77 +476,144 @@
430
476
  font-style: italic;
431
477
  }
432
478
 
433
- /* esbuild-sass-plugin:css-chunk:src/charts/pie-chart/pie-chart.module.scss */
434
- .a8ccharts-C-n-Gu {
435
- overflow: hidden;
436
- }
437
- .a8ccharts-IQVR6j {
438
- height: 100%;
479
+ .a8ccharts-GovfoW-interactiveRow {
480
+ grid-column: 1 / -1;
481
+ grid-template-columns: subgrid;
482
+ appearance: none;
439
483
  width: 100%;
484
+ color: inherit;
485
+ font: inherit;
486
+ text-align: inherit;
487
+ cursor: pointer;
488
+ background: none;
489
+ border: 0;
490
+ align-items: center;
491
+ margin: 0;
492
+ padding: 0;
493
+ display: grid;
494
+ position: relative;
440
495
  }
441
- .a8ccharts-eGV3AE {
442
- width: 100%;
443
- height: 100%;
496
+
497
+ .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-bar {
498
+ transition: opacity .15s, width .15s;
444
499
  }
445
500
 
446
- /* esbuild-sass-plugin:css-chunk:src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss */
447
- .a8ccharts-V0wiEb {
448
- height: 100%;
501
+ .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-valueContainer {
502
+ transition: transform .15s;
503
+ }
504
+
505
+ .a8ccharts-GovfoW-interactiveRow:hover, .a8ccharts-GovfoW-interactiveRow:focus-visible {
506
+ --a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
507
+ }
508
+
509
+ .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-bar {
510
+ opacity: .5;
511
+ }
512
+
513
+ .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer {
514
+ transform: translateX(calc(var(--a8c--charts--leaderboard--bar--hover-inset) * -1));
515
+ }
516
+
517
+ .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-chevron, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-chevron {
518
+ opacity: 1;
519
+ }
520
+
521
+ [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-valueContainer, [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer {
522
+ transform: translateX(var(--a8c--charts--leaderboard--bar--hover-inset));
523
+ }
524
+
525
+ .a8ccharts-GovfoW-interactiveRow:focus-visible {
526
+ outline: 2px solid var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
527
+ outline-offset: -2px;
528
+ }
529
+
530
+ .a8ccharts-GovfoW-chevron {
531
+ inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
532
+ opacity: 0;
533
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
534
+ pointer-events: none;
535
+ margin-block: auto;
536
+ transition: opacity .15s;
537
+ position: absolute;
538
+ top: 0;
539
+ bottom: 0;
540
+ }
541
+
542
+ [dir="rtl"] .a8ccharts-GovfoW-chevron {
543
+ transform: scaleX(-1);
544
+ }
545
+
546
+ @media (prefers-reduced-motion: reduce) {
547
+ .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-chevron {
548
+ transition: none;
549
+ }
550
+ }
551
+ .a8ccharts-gnszbG-pie-chart {
552
+ overflow: hidden;
553
+ }
554
+
555
+ .a8ccharts-gnszbG-pie-chart--responsive, .a8ccharts-gnszbG-pie-chart__centering {
449
556
  width: 100%;
557
+ height: 100%;
450
558
  }
451
- .a8ccharts-1khYG1 {
559
+ .a8ccharts-YtTOxW-pie-semi-circle-chart--responsive, .a8ccharts-YtTOxW-pie-semi-circle-chart__centering {
452
560
  width: 100%;
453
561
  height: 100%;
454
562
  }
455
- .a8ccharts-8tyaQj .a8ccharts-EKZS3j {
563
+
564
+ .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-label {
456
565
  font-weight: var(--wpds-typography-font-weight-medium, 499);
457
566
  font-size: var(--wpds-typography-font-size-lg, 16px);
458
567
  }
459
- .a8ccharts-8tyaQj .a8ccharts-v85A8- {
568
+
569
+ .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-note {
460
570
  font-size: var(--wpds-typography-font-size-md, 13px);
461
571
  }
462
-
463
- /* esbuild-sass-plugin:css-chunk:src/charts/sparkline/sparkline.module.scss */
464
- .a8ccharts-o-3Z8B {
465
- display: inline-block;
572
+ .a8ccharts-GtgAVa-sparkline {
466
573
  vertical-align: middle;
467
574
  line-height: 1;
575
+ display: inline-block;
468
576
  }
469
- .a8ccharts-o-3Z8B svg {
577
+
578
+ .a8ccharts-GtgAVa-sparkline svg {
470
579
  display: block;
471
580
  overflow: visible;
472
581
  }
473
- .a8ccharts-o-3Z8B path {
582
+
583
+ .a8ccharts-GtgAVa-sparkline path {
474
584
  vector-effect: non-scaling-stroke;
475
585
  }
476
- .a8ccharts-CbLbcd {
586
+
587
+ .a8ccharts-GtgAVa-sparkline--empty {
477
588
  display: inline-block;
478
589
  }
479
-
480
- /* esbuild-sass-plugin:css-chunk:src/components/trend-indicator/trend-indicator.module.scss */
481
- .a8ccharts-tGw1PY {
482
- display: inline-flex;
483
- align-items: center;
484
- gap: 0.125em;
590
+ .a8ccharts-zR7F7G-trend-indicator {
485
591
  font-size: var(--wpds-typography-font-size-md, 13px);
486
592
  font-weight: var(--wpds-typography-font-weight-medium, 499);
593
+ align-items: center;
594
+ gap: .125em;
487
595
  line-height: 1;
596
+ display: inline-flex;
488
597
  }
489
- .a8ccharts-Fn-D1W {
598
+
599
+ .a8ccharts-zR7F7G-trend-indicator--up {
490
600
  color: var(--charts-trend-up-color, #1a8917);
491
601
  }
492
- .a8ccharts-HqtGQO {
602
+
603
+ .a8ccharts-zR7F7G-trend-indicator--down {
493
604
  color: var(--charts-trend-down-color, #d63638);
494
605
  }
495
- .a8ccharts-S10nvO {
606
+
607
+ .a8ccharts-zR7F7G-trend-indicator--neutral {
496
608
  color: var(--charts-trend-neutral-color, #646970);
497
609
  }
498
- .a8ccharts-5HjpOT {
610
+
611
+ .a8ccharts-zR7F7G-trend-indicator__icon {
612
+ flex-shrink: 0;
499
613
  width: 1em;
500
614
  height: 1em;
501
- flex-shrink: 0;
502
615
  }
503
- .a8ccharts-muLL2Q {
616
+
617
+ .a8ccharts-zR7F7G-trend-indicator__value {
504
618
  white-space: nowrap;
505
619
  }
506
- /*# sourceMappingURL=index.css.map */