@automattic/charts 1.8.0 → 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.
Files changed (49) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.cjs +541 -84
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +122 -34
  5. package/dist/index.d.cts +97 -7
  6. package/dist/index.d.ts +97 -7
  7. package/dist/index.js +539 -87
  8. package/dist/index.js.map +1 -1
  9. package/package.json +8 -8
  10. package/src/charts/area-chart/area-chart.module.scss +3 -1
  11. package/src/charts/area-chart/area-chart.tsx +5 -2
  12. package/src/charts/bar-chart/bar-chart.module.scss +6 -2
  13. package/src/charts/bar-chart/bar-chart.tsx +29 -22
  14. package/src/charts/bar-chart/private/comparison-bars.tsx +7 -0
  15. package/src/charts/bar-chart/private/use-bar-chart-options.ts +4 -1
  16. package/src/charts/bar-chart/test/bar-chart.test.tsx +141 -3
  17. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +15 -12
  18. package/src/charts/geo-chart/geo-chart.tsx +6 -1
  19. package/src/charts/geo-chart/test/geo-chart.test.tsx +11 -1
  20. package/src/charts/heatmap-chart/heatmap-chart.module.scss +103 -0
  21. package/src/charts/heatmap-chart/heatmap-chart.tsx +422 -0
  22. package/src/charts/heatmap-chart/index.ts +4 -0
  23. package/src/charts/heatmap-chart/private/build-calendar-data.ts +81 -0
  24. package/src/charts/heatmap-chart/private/heatmap-legend.tsx +53 -0
  25. package/src/charts/heatmap-chart/private/index.ts +5 -0
  26. package/src/charts/heatmap-chart/private/use-heatmap-colors.ts +45 -0
  27. package/src/charts/heatmap-chart/test/build-calendar-data.test.ts +88 -0
  28. package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx +301 -0
  29. package/src/charts/heatmap-chart/test/use-heatmap-colors.test.ts +34 -0
  30. package/src/charts/heatmap-chart/types.ts +42 -0
  31. package/src/charts/index.ts +1 -0
  32. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +18 -6
  33. package/src/charts/line-chart/line-chart.module.scss +6 -4
  34. package/src/charts/line-chart/line-chart.tsx +6 -2
  35. package/src/charts/line-chart/private/line-chart-annotation.tsx +16 -3
  36. package/src/charts/private/grid-control/grid-control.module.scss +1 -4
  37. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
  38. package/src/charts/private/with-responsive/test/with-responsive.test.tsx +14 -0
  39. package/src/charts/private/with-responsive/with-responsive.tsx +12 -0
  40. package/src/charts/private/x-zoom.module.scss +6 -3
  41. package/src/components/legend/private/base-legend.module.scss +3 -1
  42. package/src/components/tooltip/base-tooltip.module.scss +4 -1
  43. package/src/components/trend-indicator/trend-indicator.module.scss +5 -3
  44. package/src/hooks/use-xychart-theme.ts +24 -0
  45. package/src/index.ts +12 -0
  46. package/src/providers/chart-context/themes.ts +29 -16
  47. package/src/types.ts +19 -2
  48. package/src/utils/color-utils.ts +36 -0
  49. 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, #6d6d6d);
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: 1s ease-out forwards a8ccharts-inuQka-rise;
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: 1s ease-out forwards a8ccharts-jlynaq-rise;
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: 1s ease-out forwards a8ccharts-97yN9W-rise;
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: 1s ease-out forwards a8ccharts-97yN9W-stretch;
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: 200px;
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: #757575;
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: 1s ease-out forwards a8ccharts-mGEVca-stretch;
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
- border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
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 3px #00000026, 0 3px 9px #0000001f !important;
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: #6b7280;
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 ease-in-out;
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: 1s ease-out forwards a8ccharts-GovfoW-stretch;
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: #666;
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 .15s, width .15s;
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 .15s;
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, #1a8917);
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, #d63638);
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, #646970);
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: string;
192
- to: string;
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, "width" | "height" | "size"> & {
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, "width" | "height" | "size"> & {
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, "width" | "height" | "size"> & {
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, "width" | "height" | "size"> & {
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