@automattic/charts 4.12.0 → 4.14.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 (47) hide show
  1. package/CHANGELOG.md +35 -29
  2. package/TOKENS.md +3 -0
  3. package/dist/index.cjs +733 -2203
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +42 -13
  6. package/dist/index.d.cts +41 -125
  7. package/dist/index.d.ts +41 -125
  8. package/dist/index.js +756 -1881
  9. package/dist/index.js.map +1 -1
  10. package/package.json +9 -9
  11. package/src/charts/area-chart/area-chart.tsx +16 -6
  12. package/src/charts/area-chart/test/area-chart.test.tsx +42 -9
  13. package/src/charts/bar-chart/bar-chart.tsx +17 -12
  14. package/src/charts/bar-chart/private/index.ts +1 -1
  15. package/src/charts/bar-chart/private/slot-tooltip-members.tsx +4 -5
  16. package/src/charts/bar-chart/private/use-bar-stops.ts +1 -3
  17. package/src/charts/bar-chart/private/use-overlap-slots.ts +35 -16
  18. package/src/charts/bar-chart/test/bar-chart.test.tsx +115 -0
  19. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +24 -11
  20. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx +235 -182
  21. package/src/charts/conversion-funnel-chart/index.ts +2 -0
  22. package/src/charts/conversion-funnel-chart/private/index.ts +1 -0
  23. package/src/charts/conversion-funnel-chart/private/use-funnel-selection.ts +9 -47
  24. package/src/charts/conversion-funnel-chart/private/use-roving-step-focus.ts +83 -0
  25. package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx +312 -92
  26. package/src/charts/conversion-funnel-chart/test/use-funnel-selection.test.ts +23 -188
  27. package/src/charts/conversion-funnel-chart/types.ts +22 -0
  28. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +42 -2
  29. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +124 -36
  30. package/src/charts/leaderboard-chart/private/resolve-leaderboard-entries.ts +53 -0
  31. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +88 -0
  32. package/src/charts/leaderboard-chart/test/resolve-leaderboard-entries.test.ts +146 -0
  33. package/src/charts/leaderboard-chart/types.ts +6 -0
  34. package/src/charts/line-chart/line-chart.tsx +10 -8
  35. package/src/charts/line-chart/test/line-chart.test.tsx +75 -0
  36. package/src/components/legend/private/base-legend.tsx +13 -8
  37. package/src/components/legend/test/legend.test.tsx +125 -0
  38. package/src/components/legend/types.ts +9 -1
  39. package/src/components/tooltip/private/at-nearest-date.ts +49 -0
  40. package/src/components/tooltip/private/keyboard-stops.ts +67 -0
  41. package/src/components/tooltip/private/xy-chart-tooltip-overlay.tsx +10 -2
  42. package/src/components/tooltip/test/keyboard-stops.test.ts +36 -0
  43. package/src/components/tooltip/test/xy-chart-tooltip.test.tsx +135 -1
  44. package/src/components/tooltip/xy-chart-tooltip.tsx +8 -12
  45. package/src/index.ts +2 -0
  46. package/src/styles/chart-scope.scss +1 -0
  47. package/src/types.ts +5 -6
package/dist/index.css CHANGED
@@ -37,6 +37,7 @@
37
37
  --a8c-charts-border-radius-leaderboard-bar: 9999px;
38
38
  --a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md, 12px);
39
39
  --a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs, 4px);
40
+ --a8c-charts-dimension-leaderboard-label-inset: var(--wpds-dimension-padding-sm, 8px);
40
41
  --a8c-charts-dimension-legend-column-gap: var(--wpds-dimension-gap-lg, 16px);
41
42
  --a8c-charts-dimension-legend-row-gap: var(--wpds-dimension-gap-sm, 8px);
42
43
  }
@@ -421,14 +422,18 @@
421
422
  height: 100%;
422
423
  }
423
424
 
424
- .a8ccharts-mGEVca-funnel-step--animated {
425
- transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
425
+ .a8ccharts-mGEVca-funnel-step--animated .a8ccharts-mGEVca-step-text, .a8ccharts-mGEVca-funnel-step--animated .a8ccharts-mGEVca-funnel-bar, .a8ccharts-mGEVca-funnel-step--animated .a8ccharts-mGEVca-bar-container {
426
+ transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1)), background-color var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
426
427
  }
427
428
 
428
- .a8ccharts-mGEVca-funnel-step--blurred {
429
+ .a8ccharts-mGEVca-funnel-step--blurred .a8ccharts-mGEVca-step-text, .a8ccharts-mGEVca-funnel-step--blurred .a8ccharts-mGEVca-funnel-bar {
429
430
  opacity: .3;
430
431
  }
431
432
 
433
+ .a8ccharts-mGEVca-funnel-step--blurred .a8ccharts-mGEVca-bar-container {
434
+ background-color: color-mix(in sRGB, var(--a8c-charts-color-surface-secondary) 30%, transparent);
435
+ }
436
+
432
437
  .a8ccharts-mGEVca-step-label {
433
438
  color: var(--a8c-charts-color-label-secondary);
434
439
  font-size: var(--wpds-typography-font-size-sm, 12px);
@@ -481,20 +486,16 @@
481
486
  }
482
487
  }
483
488
 
484
- .a8ccharts-mGEVca-tooltip-title {
489
+ .a8ccharts-mGEVca-tooltip-title, .a8ccharts-mGEVca-tooltip-label, .a8ccharts-mGEVca-tooltip-value {
485
490
  color: var(--a8c-charts-color-label);
486
491
  font-size: var(--wpds-typography-font-size-sm, 12px);
487
492
  font-style: normal;
488
493
  font-weight: var(--wpds-typography-font-weight-default, 400);
489
- line-height: var(--wpds-typography-line-height-xs, 16px);
494
+ line-height: var(--wpds-typography-line-height-sm, 20px);
490
495
  }
491
496
 
492
- .a8ccharts-mGEVca-tooltip-content {
493
- color: var(--a8c-charts-color-label);
494
- font-size: var(--wpds-typography-font-size-md, 13px);
495
- font-style: normal;
497
+ .a8ccharts-mGEVca-tooltip-value {
496
498
  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
497
- line-height: var(--wpds-typography-line-height-sm, 20px);
498
499
  }
499
500
 
500
501
  .a8ccharts-mGEVca-empty-state {
@@ -762,7 +763,11 @@
762
763
  }
763
764
 
764
765
  .a8ccharts-GovfoW-barWithLabelContainer.a8ccharts-GovfoW-is-overlay .a8ccharts-GovfoW-label {
765
- padding-left: var(--wpds-dimension-padding-sm, 8px);
766
+ padding-inline-start: var(--a8c-charts-dimension-leaderboard-label-inset);
767
+ }
768
+
769
+ .a8ccharts-GovfoW-barWithLabelContainer.a8ccharts-GovfoW-is-overlay .a8ccharts-GovfoW-barTrack {
770
+ align-self: stretch;
766
771
  }
767
772
 
768
773
  .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar {
@@ -779,6 +784,14 @@
779
784
  animation: a8ccharts-GovfoW-stretch var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
780
785
  }
781
786
 
787
+ .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--negative, [dir="rtl"] .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--animated {
788
+ transform-origin: 100%;
789
+ }
790
+
791
+ [dir="rtl"] .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--negative {
792
+ transform-origin: 0;
793
+ }
794
+
782
795
  @keyframes a8ccharts-GovfoW-stretch {
783
796
  from {
784
797
  transform: scaleX(0);
@@ -789,9 +802,25 @@
789
802
  }
790
803
  }
791
804
 
805
+ .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-barTrack {
806
+ display: grid;
807
+ }
808
+
809
+ .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-barTrack .a8ccharts-GovfoW-bar {
810
+ grid-column: 2;
811
+ justify-self: start;
812
+ }
813
+
814
+ .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-barTrack .a8ccharts-GovfoW-bar--negative {
815
+ grid-column: 1;
816
+ justify-self: end;
817
+ }
818
+
792
819
  .a8ccharts-GovfoW-valueContainer {
793
- justify-content: flex-end;
794
- align-items: center;
820
+ grid-column: 2 / -1;
821
+ grid-template-columns: subgrid;
822
+ place-items: center end;
823
+ display: grid;
795
824
  }
796
825
 
797
826
  .a8ccharts-GovfoW-deltaValue {