@automattic/charts 1.8.1 → 1.9.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.
- package/CHANGELOG.md +16 -0
- package/dist/index.cjs +530 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +122 -34
- package/dist/index.d.cts +97 -7
- package/dist/index.d.ts +97 -7
- package/dist/index.js +527 -54
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/charts/area-chart/area-chart.module.scss +3 -1
- package/src/charts/area-chart/area-chart.tsx +5 -2
- package/src/charts/bar-chart/bar-chart.module.scss +6 -2
- package/src/charts/bar-chart/private/comparison-bars.tsx +6 -0
- package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +15 -12
- package/src/charts/geo-chart/geo-chart.tsx +6 -1
- package/src/charts/geo-chart/test/geo-chart.test.tsx +11 -1
- package/src/charts/heatmap-chart/heatmap-chart.module.scss +103 -0
- package/src/charts/heatmap-chart/heatmap-chart.tsx +422 -0
- package/src/charts/heatmap-chart/index.ts +4 -0
- package/src/charts/heatmap-chart/private/build-calendar-data.ts +81 -0
- package/src/charts/heatmap-chart/private/heatmap-legend.tsx +53 -0
- package/src/charts/heatmap-chart/private/index.ts +5 -0
- package/src/charts/heatmap-chart/private/use-heatmap-colors.ts +45 -0
- package/src/charts/heatmap-chart/test/build-calendar-data.test.ts +88 -0
- package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx +301 -0
- package/src/charts/heatmap-chart/test/use-heatmap-colors.test.ts +34 -0
- package/src/charts/heatmap-chart/types.ts +42 -0
- package/src/charts/index.ts +1 -0
- package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +18 -6
- package/src/charts/line-chart/line-chart.module.scss +6 -4
- package/src/charts/line-chart/line-chart.tsx +6 -2
- package/src/charts/line-chart/private/line-chart-annotation.tsx +16 -3
- package/src/charts/private/grid-control/grid-control.module.scss +1 -4
- package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
- package/src/charts/private/with-responsive/test/with-responsive.test.tsx +14 -0
- package/src/charts/private/with-responsive/with-responsive.tsx +12 -0
- package/src/charts/private/x-zoom.module.scss +6 -3
- package/src/components/legend/private/base-legend.module.scss +3 -1
- package/src/components/tooltip/base-tooltip.module.scss +4 -1
- package/src/components/trend-indicator/trend-indicator.module.scss +5 -3
- package/src/hooks/use-xychart-theme.ts +24 -0
- package/src/index.ts +12 -0
- package/src/providers/chart-context/themes.ts +29 -16
- package/src/types.ts +19 -2
- package/src/utils/color-utils.ts +36 -0
- package/src/utils/test/color-utils.test.ts +33 -0
package/dist/index.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
.a8ccharts-04TogW-legend-item--interactive {
|
|
10
10
|
cursor: pointer;
|
|
11
11
|
user-select: none;
|
|
12
|
-
transition: opacity .2s;
|
|
12
|
+
transition: opacity var(--wpds-motion-duration-md, .2s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.a8ccharts-04TogW-legend-item--interactive:hover {
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
color: #fff;
|
|
58
58
|
border-radius: var(--wpds-border-radius-md, 4px);
|
|
59
59
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
60
|
+
box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
|
|
60
61
|
pointer-events: none;
|
|
61
62
|
background-color: #000000d9;
|
|
62
63
|
position: absolute;
|
|
63
64
|
transform: translate(-50%, -100%);
|
|
64
|
-
box-shadow: 0 1px 2px #0000001a;
|
|
65
65
|
}
|
|
66
66
|
.a8ccharts-fpNVAq-chart-layout__content {
|
|
67
67
|
flex: 1;
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
.a8ccharts-udGPVq-svg-empty-state {
|
|
80
80
|
text-align: center;
|
|
81
81
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
82
|
-
color: var(--wpds-color-fg-content-neutral-weak, #
|
|
82
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
83
83
|
}
|
|
84
84
|
.a8ccharts-sP1gHa-container {
|
|
85
85
|
min-width: 0;
|
|
@@ -99,16 +99,16 @@
|
|
|
99
99
|
background: var(--charts-zoom-reset-bg, #ffffffeb);
|
|
100
100
|
width: 28px;
|
|
101
101
|
height: 28px;
|
|
102
|
-
color: var(--charts-zoom-reset-fg, #1e1e1e);
|
|
102
|
+
color: var(--charts-zoom-reset-fg, var(--wpds-color-fg-content-neutral, #1e1e1e));
|
|
103
103
|
border: var(--wpds-border-width-xs, 1px) solid var(--charts-zoom-reset-border, #00000029);
|
|
104
104
|
border-radius: var(--wpds-border-radius-md, 4px);
|
|
105
105
|
cursor: pointer;
|
|
106
|
+
box-shadow: var(--wpds-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
|
|
106
107
|
justify-content: center;
|
|
107
108
|
align-items: center;
|
|
108
109
|
padding: 0;
|
|
109
110
|
display: inline-flex;
|
|
110
111
|
position: absolute;
|
|
111
|
-
box-shadow: 0 1px 2px #00000014;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.a8ccharts-y6bXNq-x-zoom__reset:hover {
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
.a8ccharts-y6bXNq-x-zoom__reset:focus-visible {
|
|
119
|
-
outline: 2px solid var(--charts-zoom-reset-focus, #3858e9);
|
|
119
|
+
outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus-brand, #3858e9));
|
|
120
120
|
outline-offset: 1px;
|
|
121
121
|
}
|
|
122
122
|
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
|
|
132
132
|
.a8ccharts-inuQka-line-chart--animated path {
|
|
133
133
|
transform-origin: 0 95%;
|
|
134
|
-
animation:
|
|
134
|
+
animation: a8ccharts-inuQka-rise var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
|
|
135
135
|
transform: scaleY(0);
|
|
136
136
|
}
|
|
137
137
|
|
|
@@ -140,8 +140,9 @@
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
.a8ccharts-inuQka-line-chart__tooltip, .a8ccharts-inuQka-line-chart__annotation-label-popover {
|
|
143
|
+
background: var(--wpds-color-bg-surface-neutral-strong, #fff);
|
|
144
|
+
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
143
145
|
padding: var(--wpds-dimension-padding-sm, 8px);
|
|
144
|
-
background: #fff;
|
|
145
146
|
}
|
|
146
147
|
|
|
147
148
|
.a8ccharts-inuQka-line-chart__tooltip-date {
|
|
@@ -185,12 +186,11 @@
|
|
|
185
186
|
border-radius: var(--wpds-border-radius-md, 4px);
|
|
186
187
|
min-width: 125px;
|
|
187
188
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
189
|
+
box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
|
|
188
190
|
margin: var(--wpds-dimension-gap-sm, 8px);
|
|
189
191
|
visibility: hidden;
|
|
190
|
-
background: #fff;
|
|
191
192
|
border: none;
|
|
192
193
|
position: fixed;
|
|
193
|
-
box-shadow: 0 1px 2px #0000001a;
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
.a8ccharts-inuQka-line-chart__annotation-label-popover--visible {
|
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
|
|
235
235
|
.a8ccharts-jlynaq-area-chart--animated path {
|
|
236
236
|
transform-origin: 0 95%;
|
|
237
|
-
animation:
|
|
237
|
+
animation: a8ccharts-jlynaq-rise var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
|
|
238
238
|
transform: scaleY(0);
|
|
239
239
|
}
|
|
240
240
|
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
.a8ccharts-97yN9W-bar-chart--animated rect {
|
|
255
255
|
transform-origin: bottom;
|
|
256
256
|
transform-box: fill-box;
|
|
257
|
-
animation:
|
|
257
|
+
animation: a8ccharts-97yN9W-rise var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
|
|
258
258
|
transform: scaleY(0);
|
|
259
259
|
}
|
|
260
260
|
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
.a8ccharts-97yN9W-bar-chart--animated-horizontal rect {
|
|
268
268
|
transform-origin: 0;
|
|
269
269
|
transform-box: fill-box;
|
|
270
|
-
animation:
|
|
270
|
+
animation: a8ccharts-97yN9W-stretch var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
|
|
271
271
|
transform: scaleX(0);
|
|
272
272
|
}
|
|
273
273
|
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
}
|
|
287
287
|
|
|
288
288
|
.a8ccharts-mGEVca-main-rate {
|
|
289
|
-
color: #1e1e1e;
|
|
289
|
+
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
290
290
|
text-overflow: ellipsis;
|
|
291
291
|
font-size: var(--wpds-typography-font-size-xl, 18px);
|
|
292
292
|
font-style: normal;
|
|
@@ -309,7 +309,7 @@
|
|
|
309
309
|
.a8ccharts-mGEVca-funnel-container {
|
|
310
310
|
flex: 1;
|
|
311
311
|
width: 100%;
|
|
312
|
-
min-height:
|
|
312
|
+
min-height: 0;
|
|
313
313
|
}
|
|
314
314
|
|
|
315
315
|
.a8ccharts-mGEVca-funnel-step {
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
}
|
|
320
320
|
|
|
321
321
|
.a8ccharts-mGEVca-funnel-step--animated {
|
|
322
|
-
transition: opacity .3s;
|
|
322
|
+
transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
|
|
323
323
|
}
|
|
324
324
|
|
|
325
325
|
.a8ccharts-mGEVca-funnel-step--blurred {
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
}
|
|
328
328
|
|
|
329
329
|
.a8ccharts-mGEVca-step-label {
|
|
330
|
-
color: #
|
|
330
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
331
331
|
font-size: var(--wpds-typography-font-size-sm, 12px);
|
|
332
332
|
font-weight: var(--wpds-typography-font-weight-regular, 400);
|
|
333
333
|
line-height: var(--wpds-typography-line-height-xs, 16px);
|
|
@@ -337,7 +337,7 @@
|
|
|
337
337
|
}
|
|
338
338
|
|
|
339
339
|
.a8ccharts-mGEVca-step-rate {
|
|
340
|
-
color: #1e1e1e;
|
|
340
|
+
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
341
341
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
342
342
|
font-weight: var(--wpds-typography-font-weight-medium, 499);
|
|
343
343
|
line-height: var(--wpds-typography-line-height-xs, 16px);
|
|
@@ -359,7 +359,7 @@
|
|
|
359
359
|
.a8ccharts-mGEVca-funnel-bar--animated {
|
|
360
360
|
transform-origin: bottom;
|
|
361
361
|
transform-box: fill-box;
|
|
362
|
-
animation:
|
|
362
|
+
animation: a8ccharts-mGEVca-stretch var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
|
|
363
363
|
transform: scaleY(0);
|
|
364
364
|
}
|
|
365
365
|
|
|
@@ -370,15 +370,14 @@
|
|
|
370
370
|
}
|
|
371
371
|
|
|
372
372
|
.a8ccharts-mGEVca-tooltip-wrapper {
|
|
373
|
-
|
|
374
|
-
background: var(--black-white-white, #fff);
|
|
373
|
+
background: var(--wpds-color-bg-surface-neutral-strong, #fff);
|
|
375
374
|
border-radius: var(--wpds-border-radius-md, 4px) !important;
|
|
376
375
|
padding: var(--wpds-dimension-padding-md, 12px) !important;
|
|
377
|
-
box-shadow: 0 1px
|
|
376
|
+
box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
|
|
378
377
|
}
|
|
379
378
|
|
|
380
379
|
.a8ccharts-mGEVca-tooltip-title {
|
|
381
|
-
color: #1e1e1e;
|
|
380
|
+
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
382
381
|
font-size: var(--wpds-typography-font-size-sm, 12px);
|
|
383
382
|
font-style: normal;
|
|
384
383
|
font-weight: var(--wpds-typography-font-weight-regular, 400);
|
|
@@ -386,7 +385,7 @@
|
|
|
386
385
|
}
|
|
387
386
|
|
|
388
387
|
.a8ccharts-mGEVca-tooltip-content {
|
|
389
|
-
color: #1e1e1e;
|
|
388
|
+
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
390
389
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
391
390
|
font-style: normal;
|
|
392
391
|
font-weight: var(--wpds-typography-font-weight-medium, 499);
|
|
@@ -395,14 +394,103 @@
|
|
|
395
394
|
|
|
396
395
|
.a8ccharts-mGEVca-empty-state {
|
|
397
396
|
text-align: center;
|
|
398
|
-
color: #
|
|
397
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
399
398
|
font-size: var(--wpds-typography-font-size-lg, 16px);
|
|
400
399
|
}
|
|
401
400
|
.a8ccharts-8hS2IW-container {
|
|
402
401
|
position: relative;
|
|
403
402
|
}
|
|
403
|
+
.a8ccharts-O3YMOW-heatmap-chart {
|
|
404
|
+
width: 100%;
|
|
405
|
+
height: 100%;
|
|
406
|
+
min-height: 0;
|
|
407
|
+
font-size: var(--wpds-typography-font-size-sm, 12px);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.a8ccharts-O3YMOW-heatmap-chart__empty {
|
|
411
|
+
padding: var(--wpds-dimension-padding-lg, 16px);
|
|
412
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.a8ccharts-O3YMOW-heatmap-chart__grid {
|
|
416
|
+
gap: var(--heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
|
|
417
|
+
flex: 1 1 0;
|
|
418
|
+
width: 100%;
|
|
419
|
+
min-height: 200px;
|
|
420
|
+
display: grid;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.a8ccharts-O3YMOW-heatmap-chart__grid:focus-visible {
|
|
424
|
+
outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
|
|
425
|
+
outline-offset: 2px;
|
|
426
|
+
border-radius: var(--wpds-border-radius-sm, 2px);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.a8ccharts-O3YMOW-heatmap-chart__grid--compact {
|
|
430
|
+
flex: none;
|
|
431
|
+
width: max-content;
|
|
432
|
+
height: max-content;
|
|
433
|
+
min-height: 0;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.a8ccharts-O3YMOW-heatmap-chart__row {
|
|
437
|
+
display: contents;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.a8ccharts-O3YMOW-heatmap-chart__col-label, .a8ccharts-O3YMOW-heatmap-chart__row-label {
|
|
441
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
442
|
+
font-size: var(--wpds-typography-font-size-xs, 11px);
|
|
443
|
+
white-space: nowrap;
|
|
444
|
+
overflow: visible;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.a8ccharts-O3YMOW-heatmap-chart__col-label {
|
|
448
|
+
text-align: left;
|
|
449
|
+
align-self: end;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.a8ccharts-O3YMOW-heatmap-chart__row-label {
|
|
453
|
+
text-align: right;
|
|
454
|
+
place-self: center end;
|
|
455
|
+
padding-inline-end: var(--wpds-dimension-padding-xs, 4px);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.a8ccharts-O3YMOW-heatmap-chart__cell {
|
|
459
|
+
border-radius: var(--wpds-border-radius-sm, 2px);
|
|
460
|
+
background: var(--wpds-color-bg-track-neutral-weak, #f0f0f0);
|
|
461
|
+
justify-content: center;
|
|
462
|
+
align-items: center;
|
|
463
|
+
min-width: 0;
|
|
464
|
+
min-height: 0;
|
|
465
|
+
display: flex;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.a8ccharts-O3YMOW-heatmap-chart__cell--filled {
|
|
469
|
+
background: color-mix(in sRGB, var(--heatmap-primary) calc((.15 + .85 * var(--intensity)) * 100%), transparent);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.a8ccharts-O3YMOW-heatmap-chart__cell--selected {
|
|
473
|
+
outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
|
|
474
|
+
outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.a8ccharts-O3YMOW-heatmap-chart__cell-value {
|
|
478
|
+
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
479
|
+
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.a8ccharts-O3YMOW-heatmap-chart__cell--strong .a8ccharts-O3YMOW-heatmap-chart__cell-value {
|
|
483
|
+
color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.a8ccharts-O3YMOW-heatmap-chart__legend-swatch {
|
|
487
|
+
width: var(--wpds-dimension-size-3xs, 12px);
|
|
488
|
+
height: var(--wpds-dimension-size-3xs, 12px);
|
|
489
|
+
border-radius: var(--wpds-border-radius-sm, 2px);
|
|
490
|
+
background: color-mix(in sRGB, var(--heatmap-primary) calc((.15 + .85 * var(--intensity)) * 100%), transparent);
|
|
491
|
+
}
|
|
404
492
|
.a8ccharts-GovfoW-leaderboardChart {
|
|
405
|
-
transition: opacity .3s
|
|
493
|
+
transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
|
|
406
494
|
}
|
|
407
495
|
|
|
408
496
|
.a8ccharts-GovfoW-leaderboardChart--responsive {
|
|
@@ -452,7 +540,7 @@
|
|
|
452
540
|
.a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--animated {
|
|
453
541
|
transform-origin: 0;
|
|
454
542
|
transform-box: fill-box;
|
|
455
|
-
animation:
|
|
543
|
+
animation: a8ccharts-GovfoW-stretch var(--wpds-motion-duration-xl, .4s) var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1)) forwards;
|
|
456
544
|
transform: scaleX(0);
|
|
457
545
|
}
|
|
458
546
|
|
|
@@ -473,7 +561,7 @@
|
|
|
473
561
|
.a8ccharts-GovfoW-emptyState {
|
|
474
562
|
padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
|
|
475
563
|
text-align: center;
|
|
476
|
-
color: #
|
|
564
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
477
565
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
478
566
|
font-style: italic;
|
|
479
567
|
}
|
|
@@ -499,11 +587,11 @@
|
|
|
499
587
|
}
|
|
500
588
|
|
|
501
589
|
.a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-bar {
|
|
502
|
-
transition: opacity .
|
|
590
|
+
transition: opacity var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1)), width var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
|
|
503
591
|
}
|
|
504
592
|
|
|
505
593
|
.a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-valueContainer {
|
|
506
|
-
transition: transform .
|
|
594
|
+
transition: transform var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
|
|
507
595
|
}
|
|
508
596
|
|
|
509
597
|
.a8ccharts-GovfoW-interactiveRow:hover, .a8ccharts-GovfoW-interactiveRow:focus-visible {
|
|
@@ -536,9 +624,9 @@
|
|
|
536
624
|
inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
|
|
537
625
|
opacity: 0;
|
|
538
626
|
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
627
|
+
transition: opacity var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
|
|
539
628
|
pointer-events: none;
|
|
540
629
|
margin-block: auto;
|
|
541
|
-
transition: opacity .15s;
|
|
542
630
|
position: absolute;
|
|
543
631
|
top: 0;
|
|
544
632
|
bottom: 0;
|
|
@@ -602,15 +690,15 @@
|
|
|
602
690
|
}
|
|
603
691
|
|
|
604
692
|
.a8ccharts-zR7F7G-trend-indicator--up {
|
|
605
|
-
color: var(--charts-trend-up-color, #
|
|
693
|
+
color: var(--charts-trend-up-color, var(--wpds-color-fg-content-success-weak, #008030));
|
|
606
694
|
}
|
|
607
695
|
|
|
608
696
|
.a8ccharts-zR7F7G-trend-indicator--down {
|
|
609
|
-
color: var(--charts-trend-down-color, #
|
|
697
|
+
color: var(--charts-trend-down-color, var(--wpds-color-fg-content-error-weak, #cc1818));
|
|
610
698
|
}
|
|
611
699
|
|
|
612
700
|
.a8ccharts-zR7F7G-trend-indicator--neutral {
|
|
613
|
-
color: var(--charts-trend-neutral-color, #
|
|
701
|
+
color: var(--charts-trend-neutral-color, var(--wpds-color-fg-content-neutral-weak, #707070));
|
|
614
702
|
}
|
|
615
703
|
|
|
616
704
|
.a8ccharts-zR7F7G-trend-indicator__icon {
|
package/dist/index.d.cts
CHANGED
|
@@ -188,8 +188,8 @@ type GradientStop = {
|
|
|
188
188
|
};
|
|
189
189
|
type SeriesDataOptions = {
|
|
190
190
|
gradient?: {
|
|
191
|
-
from
|
|
192
|
-
to
|
|
191
|
+
from?: string;
|
|
192
|
+
to?: string;
|
|
193
193
|
fromOpacity?: number;
|
|
194
194
|
toOpacity?: number;
|
|
195
195
|
stops?: GradientStop[];
|
|
@@ -311,6 +311,19 @@ type ChartTheme = {
|
|
|
311
311
|
}; /** Stroke width for the sparkline line */
|
|
312
312
|
strokeWidth?: number;
|
|
313
313
|
};
|
|
314
|
+
/**
|
|
315
|
+
* HeatmapChart settings. Cell gap, radius, value size and the selection ring come from
|
|
316
|
+
* WPDS tokens in CSS, so only the scale color and the compact sizing live here.
|
|
317
|
+
*/
|
|
318
|
+
heatmapChart?: {
|
|
319
|
+
/**
|
|
320
|
+
* Color the cell scale interpolates toward at the highest value (prop > this >
|
|
321
|
+
* palette `colors[0]`), fed to CSS `color-mix`. Omit to use the palette color.
|
|
322
|
+
*/
|
|
323
|
+
primaryColor?: string; /** Gap in px between cells in compact mode */
|
|
324
|
+
compactCellGap?: number; /** Fixed square cell size in px for compact mode */
|
|
325
|
+
compactCellSize?: number;
|
|
326
|
+
};
|
|
314
327
|
};
|
|
315
328
|
/**
|
|
316
329
|
* Theme configuration with all properties guaranteed to be defined.
|
|
@@ -329,6 +342,7 @@ type CompleteChartTheme = Required<ChartTheme> & {
|
|
|
329
342
|
sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
|
|
330
343
|
margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
|
|
331
344
|
};
|
|
345
|
+
heatmapChart: Omit<Required<NonNullable<ChartTheme['heatmapChart']>>, 'primaryColor'> & Pick<NonNullable<ChartTheme['heatmapChart']>, 'primaryColor'>;
|
|
332
346
|
};
|
|
333
347
|
type AxisOptions = {
|
|
334
348
|
orientation?: OrientationType;
|
|
@@ -925,7 +939,7 @@ declare const BarListChartResponsive: ({
|
|
|
925
939
|
width,
|
|
926
940
|
height,
|
|
927
941
|
...chartProps
|
|
928
|
-
}: Omit<BarListChartProps, "
|
|
942
|
+
}: Omit<BarListChartProps, "size" | "width" | "height"> & {
|
|
929
943
|
width?: number;
|
|
930
944
|
height?: number;
|
|
931
945
|
size?: number;
|
|
@@ -1069,12 +1083,72 @@ declare const GeoChartResponsive: ({
|
|
|
1069
1083
|
width,
|
|
1070
1084
|
height,
|
|
1071
1085
|
...chartProps
|
|
1072
|
-
}: Omit<GeoChartProps, "
|
|
1086
|
+
}: Omit<GeoChartProps, "size" | "width" | "height"> & {
|
|
1073
1087
|
width?: number;
|
|
1074
1088
|
height?: number;
|
|
1075
1089
|
size?: number;
|
|
1076
1090
|
} & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
|
|
1077
1091
|
//#endregion
|
|
1092
|
+
//#region src/charts/heatmap-chart/types.d.ts
|
|
1093
|
+
/** A single heatmap cell. `value: null` marks an empty cell. */
|
|
1094
|
+
type HeatmapCell = {
|
|
1095
|
+
/** Per-cell label used in the tooltip / accessible name. */label?: string;
|
|
1096
|
+
value: number | null;
|
|
1097
|
+
};
|
|
1098
|
+
/** A heatmap column (rendered left→right); its cells render top→bottom. */
|
|
1099
|
+
type HeatmapColumn = {
|
|
1100
|
+
/** x-axis label for this column. Empty/omitted renders blank. */label?: string;
|
|
1101
|
+
data: HeatmapCell[];
|
|
1102
|
+
};
|
|
1103
|
+
type HeatmapTooltipData = {
|
|
1104
|
+
value: number | null;
|
|
1105
|
+
rowLabel?: string;
|
|
1106
|
+
columnLabel?: string;
|
|
1107
|
+
cellLabel?: string;
|
|
1108
|
+
row: number;
|
|
1109
|
+
column: number;
|
|
1110
|
+
};
|
|
1111
|
+
interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showLegend' | 'legend' | 'gridVisibility'> {
|
|
1112
|
+
/** y-axis labels by row index. Empty entries render blank. */
|
|
1113
|
+
rowLabels?: string[];
|
|
1114
|
+
/** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
|
|
1115
|
+
compact?: boolean;
|
|
1116
|
+
/** Render the numeric value inside each cell. Default `! compact`. */
|
|
1117
|
+
showValues?: boolean;
|
|
1118
|
+
/**
|
|
1119
|
+
* Color the cell scale interpolates toward at the highest value
|
|
1120
|
+
* (this prop > theme `heatmapChart.primaryColor` > palette `colors[0]`).
|
|
1121
|
+
*/
|
|
1122
|
+
primaryColor?: string;
|
|
1123
|
+
renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
|
|
1124
|
+
children?: ReactNode;
|
|
1125
|
+
}
|
|
1126
|
+
//#endregion
|
|
1127
|
+
//#region src/charts/heatmap-chart/private/build-calendar-data.d.ts
|
|
1128
|
+
type CalendarHeatmapResult = {
|
|
1129
|
+
data: HeatmapColumn[];
|
|
1130
|
+
rowLabels: string[];
|
|
1131
|
+
};
|
|
1132
|
+
declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: {
|
|
1133
|
+
weekStartsOn?: 0 | 1;
|
|
1134
|
+
}) => CalendarHeatmapResult;
|
|
1135
|
+
//#endregion
|
|
1136
|
+
//#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
|
|
1137
|
+
interface HeatmapLegendProps {
|
|
1138
|
+
/** Number of swatches in the scale. Default 5. */
|
|
1139
|
+
steps?: number;
|
|
1140
|
+
lessLabel?: string;
|
|
1141
|
+
moreLabel?: string;
|
|
1142
|
+
}
|
|
1143
|
+
declare const HeatmapLegend: FC<HeatmapLegendProps>;
|
|
1144
|
+
//#endregion
|
|
1145
|
+
//#region src/charts/heatmap-chart/heatmap-chart.d.ts
|
|
1146
|
+
interface HeatmapChartSubComponents {
|
|
1147
|
+
Legend: typeof HeatmapLegend;
|
|
1148
|
+
}
|
|
1149
|
+
declare const HeatmapChart: FC<HeatmapChartProps> & HeatmapChartSubComponents;
|
|
1150
|
+
declare const HeatmapChartResponsive: FC<HeatmapChartProps & ResponsiveConfig> & HeatmapChartSubComponents;
|
|
1151
|
+
//#endregion
|
|
1078
1152
|
//#region src/charts/leaderboard-chart/types.d.ts
|
|
1079
1153
|
interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
|
|
1080
1154
|
/**
|
|
@@ -1145,7 +1219,7 @@ declare const LeaderboardChartResponsive: (({
|
|
|
1145
1219
|
width,
|
|
1146
1220
|
height,
|
|
1147
1221
|
...chartProps
|
|
1148
|
-
}: Omit<LeaderboardChartProps, "
|
|
1222
|
+
}: Omit<LeaderboardChartProps, "size" | "width" | "height"> & {
|
|
1149
1223
|
width?: number;
|
|
1150
1224
|
height?: number;
|
|
1151
1225
|
size?: number;
|
|
@@ -1331,6 +1405,22 @@ declare const normalizeColorToHex: (color: string, element?: HTMLElement | null,
|
|
|
1331
1405
|
* @throws {Error} if hex string is malformed
|
|
1332
1406
|
*/
|
|
1333
1407
|
declare const lightenHexColor: (hex: string, blend: number) => string;
|
|
1408
|
+
/**
|
|
1409
|
+
* WCAG relative luminance of a hex color (0 = black, 1 = white).
|
|
1410
|
+
*
|
|
1411
|
+
* @param hex - Hex color string (e.g., '#98C8DF')
|
|
1412
|
+
* @return Relative luminance in the range [0, 1]
|
|
1413
|
+
* @throws {Error} if hex string is malformed
|
|
1414
|
+
*/
|
|
1415
|
+
declare const relativeLuminance: (hex: string) => number;
|
|
1416
|
+
/**
|
|
1417
|
+
* Whether light text reads better than dark text on the given background, using the W3C
|
|
1418
|
+
* luminance threshold (0.179) that maximizes contrast against black vs white.
|
|
1419
|
+
*
|
|
1420
|
+
* @param backgroundHex - Hex background color
|
|
1421
|
+
* @return true if light text should be used; false (dark text) for malformed colors
|
|
1422
|
+
*/
|
|
1423
|
+
declare const prefersLightText: (backgroundHex: string) => boolean;
|
|
1334
1424
|
//#endregion
|
|
1335
1425
|
//#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.d.ts
|
|
1336
1426
|
/**
|
|
@@ -1652,7 +1742,7 @@ declare const Sparkline: ({
|
|
|
1652
1742
|
width,
|
|
1653
1743
|
height,
|
|
1654
1744
|
...chartProps
|
|
1655
|
-
}: Omit<SparklineProps, "
|
|
1745
|
+
}: Omit<SparklineProps, "size" | "width" | "height"> & {
|
|
1656
1746
|
width?: number;
|
|
1657
1747
|
height?: number;
|
|
1658
1748
|
size?: number;
|
|
@@ -1845,5 +1935,5 @@ declare const useGlobalChartsTheme: () => CompleteChartTheme;
|
|
|
1845
1935
|
*/
|
|
1846
1936
|
declare const defaultTheme: CompleteChartTheme;
|
|
1847
1937
|
//#endregion
|
|
1848
|
-
export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
|
|
1938
|
+
export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
|
|
1849
1939
|
//# sourceMappingURL=index.d.cts.map
|