@automattic/charts 1.10.3 → 1.11.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 (30) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/TOKENS.md +72 -0
  3. package/dist/index.cjs +143 -42
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +54 -41
  6. package/dist/index.d.cts +17 -7
  7. package/dist/index.d.ts +17 -7
  8. package/dist/index.js +143 -42
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +7 -7
  12. package/src/charts/heatmap-chart/heatmap-chart.module.scss +18 -13
  13. package/src/charts/heatmap-chart/heatmap-chart.tsx +11 -7
  14. package/src/charts/heatmap-chart/private/heatmap-legend.tsx +3 -3
  15. package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx +13 -7
  16. package/src/charts/leaderboard-chart/hooks/index.ts +1 -0
  17. package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts +115 -0
  18. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +39 -12
  19. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +67 -14
  20. package/src/charts/leaderboard-chart/test/leaderboard-chart-fit-rows.test.tsx +365 -0
  21. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +73 -2
  22. package/src/charts/leaderboard-chart/types.ts +12 -0
  23. package/src/charts/line-chart/line-chart.module.scss +2 -2
  24. package/src/charts/private/grid-control/grid-control.module.scss +1 -1
  25. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
  26. package/src/charts/private/x-zoom.module.scss +12 -10
  27. package/src/components/tooltip/base-tooltip.module.scss +3 -2
  28. package/src/components/trend-indicator/trend-indicator.module.scss +6 -5
  29. package/src/providers/chart-context/themes.ts +33 -19
  30. package/src/types.ts +2 -2
package/src/charts/private/x-zoom.module.scss CHANGED
@@ -1,11 +1,13 @@
1
1
  .x-zoom {
2
2
 
3
- // The translucent rgba overlay colors (selection fill/stroke, reset
4
- // background/border) have no WPDS equivalent and stay as-is; only the
5
- // opaque foreground and focus colors are tokenized.
3
+ // The zoom control's bespoke colours are inlined, not exposed as
4
+ // --a8c-charts-color-zoom-* override vars. The control is slated for rework
5
+ // (reset button -> @wordpress/ui Button), so it is deliberately not a public
6
+ // theming surface. Focus tracks the shared --a8c-charts-color-focus role; the
7
+ // button text uses the WPDS content-foreground token.
6
8
  &__selection {
7
- fill: var(--charts-zoom-selection-fill, rgba(56, 88, 233, 0.16));
8
- stroke: var(--charts-zoom-selection-stroke, rgba(56, 88, 233, 0.65));
9
+ fill: rgba(56, 88, 233, 0.16);
10
+ stroke: rgba(56, 88, 233, 0.65);
9
11
  stroke-width: var(--wpds-border-width-xs, 1px);
10
12
  pointer-events: none;
11
13
  }
@@ -21,21 +23,21 @@
21
23
  width: 28px;
22
24
  height: 28px;
23
25
  padding: 0;
24
- background: var(--charts-zoom-reset-bg, rgba(255, 255, 255, 0.92));
25
- color: var(--charts-zoom-reset-fg, var(--wpds-color-foreground-content-neutral, #1e1e1e));
26
+ background: rgba(255, 255, 255, 0.92);
27
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
26
28
  border:
27
29
  var(--wpds-border-width-xs, 1px) solid
28
- var(--charts-zoom-reset-border, rgba(0, 0, 0, 0.16));
30
+ rgba(0, 0, 0, 0.16);
29
31
  border-radius: var(--wpds-border-radius-md, 4px);
30
32
  cursor: pointer;
31
33
  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);
32
34
 
33
35
  &:hover {
34
- background: var(--charts-zoom-reset-bg-hover, rgba(255, 255, 255, 1));
36
+ background: rgba(255, 255, 255, 1);
35
37
  }
36
38
 
37
39
  &:focus-visible {
38
- outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus, #3858e9));
40
+ outline: 2px solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, #3858e9));
39
41
  outline-offset: 1px;
40
42
  }
41
43
  }
package/src/components/tooltip/base-tooltip.module.scss CHANGED
@@ -2,8 +2,9 @@
2
2
  padding: var(--wpds-dimension-padding-sm, 8px);
3
3
  // No WPDS token fits a translucent dark tooltip surface:
4
4
  // bg-interactive-neutral-strong is opaque, and there is no
5
- // white-on-dark content foreground token.
6
- background-color: rgba(0, 0, 0, 0.85);
5
+ // white-on-dark content foreground token. The role carries the
6
+ // hardcoded translucent value as its fallback.
7
+ background-color: var(--a8c-charts-color-tooltip-surface, rgba(0, 0, 0, 0.85));
7
8
  color: #fff;
8
9
  border-radius: var(--wpds-border-radius-md, 4px);
9
10
  font-size: var(--wpds-typography-font-size-md, 13px);
package/src/components/trend-indicator/trend-indicator.module.scss CHANGED
@@ -6,18 +6,19 @@
6
6
  font-weight: var(--wpds-typography-font-weight-medium, 499);
7
7
  line-height: 1;
8
8
 
9
- // Trend colors use the documented --charts-trend-* override API, falling
10
- // back to the accessible WPDS semantic tokens.
9
+ // Trend colours use the --a8c-charts-color-trend-* catalog roles, falling back
10
+ // to the deprecated --charts-trend-*-color override API and then to the
11
+ // accessible WPDS semantic tokens.
11
12
  &--up {
12
- color: var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030));
13
+ color: var(--a8c-charts-color-trend-up, var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030)));
13
14
  }
14
15
 
15
16
  &--down {
16
- color: var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818));
17
+ color: var(--a8c-charts-color-trend-down, var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818)));
17
18
  }
18
19
 
19
20
  &--neutral {
20
- color: var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070));
21
+ color: var(--a8c-charts-color-trend-neutral, var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070)));
21
22
  }
22
23
 
23
24
  &__icon {
package/src/providers/chart-context/themes.ts CHANGED
@@ -4,24 +4,31 @@ import type { CompleteChartTheme } from '../../types';
4
4
  * Default theme configuration
5
5
  */
6
6
  const defaultTheme: CompleteChartTheme = {
7
- backgroundColor: 'var(--wpds-color-background-surface-neutral-strong, #fff)',
7
+ backgroundColor:
8
+ 'var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))',
8
9
  labelBackgroundColor: 'transparent', // label background color (transparent by default)
9
10
  // White label text sits on top of arbitrary series colors, so it has no WPDS
10
- // content-foreground equivalent and stays hardcoded (tokenization outlier).
11
- labelTextColor: '#FFFFFF',
11
+ // content-foreground equivalent; the role carries the hardcoded value as its fallback.
12
+ labelTextColor: 'var(--a8c-charts-color-label-on-fill, #FFFFFF)',
12
13
  colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],
13
14
  gridStyles: {
14
- stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)',
15
+ stroke: 'var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb))',
15
16
  strokeWidth: 1,
16
17
  },
17
18
  tickLength: 4,
18
19
  gridColor: '',
19
20
  gridColorDark: '',
20
- xTickLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)', strokeWidth: 1 },
21
- xAxisLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)', strokeWidth: 1 },
21
+ xTickLineStyles: {
22
+ stroke: 'var(--a8c-charts-color-tick, var(--wpds-color-stroke-surface-neutral, #dbdbdb))',
23
+ strokeWidth: 1,
24
+ },
25
+ xAxisLineStyles: {
26
+ stroke: 'var(--a8c-charts-color-axis, var(--wpds-color-stroke-surface-neutral, #dbdbdb))',
27
+ strokeWidth: 1,
28
+ },
22
29
  legend: {
23
30
  labelStyles: {
24
- color: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
31
+ color: 'var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))',
25
32
  },
26
33
  containerStyles: {},
27
34
  shapeStyles: [],
@@ -34,26 +41,30 @@ const defaultTheme: CompleteChartTheme = {
34
41
  // elements for axis labels and ticks. Setting `inherit` lets SVG text
35
42
  // pick up the host application's font-family via normal CSS inheritance.
36
43
  svgLabelSmall: {
37
- fill: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
44
+ fill: 'var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))',
38
45
  fontFamily: 'inherit',
39
46
  },
40
47
  svgLabelBig: { fontFamily: 'inherit' },
41
48
  annotationStyles: {
42
49
  label: {
43
- anchorLineStroke: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
44
- backgroundFill: 'var(--wpds-color-background-surface-neutral-strong, #fff)',
50
+ anchorLineStroke:
51
+ 'var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))',
52
+ backgroundFill:
53
+ 'var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))',
45
54
  },
46
55
  connector: {
47
- stroke: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
56
+ stroke:
57
+ 'var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))',
48
58
  },
49
59
  circleSubject: {
50
60
  stroke: 'transparent',
51
- fill: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
61
+ fill: 'var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))',
52
62
  radius: 5,
53
63
  },
54
64
  },
55
65
  geoChart: {
56
- featureFillColor: 'var(--wpds-color-background-surface-neutral-weak, #f4f4f4)',
66
+ featureFillColor:
67
+ 'var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))',
57
68
  },
58
69
  leaderboardChart: {
59
70
  rowGap: 12,
@@ -61,15 +72,18 @@ const defaultTheme: CompleteChartTheme = {
61
72
  labelSpacing: 'xs',
62
73
  // [negative, neutral, positive]
63
74
  deltaColors: [
64
- 'var(--wpds-color-foreground-content-error-weak, #cc1818)',
65
- 'var(--wpds-color-foreground-content-neutral-weak, #707070)',
66
- 'var(--wpds-color-foreground-content-success-weak, #008030)',
75
+ 'var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))',
76
+ 'var(--a8c-charts-color-trend-neutral, var(--wpds-color-foreground-content-neutral-weak, #707070))',
77
+ 'var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))',
67
78
  ],
68
79
  },
69
80
  conversionFunnelChart: {
70
- backgroundColor: 'var(--wpds-color-background-surface-neutral-weak, #f4f4f4)',
71
- positiveChangeColor: 'var(--wpds-color-foreground-content-success-weak, #008030)',
72
- negativeChangeColor: 'var(--wpds-color-foreground-content-error-weak, #cc1818)',
81
+ backgroundColor:
82
+ 'var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))',
83
+ positiveChangeColor:
84
+ 'var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))',
85
+ negativeChangeColor:
86
+ 'var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))',
73
87
  },
74
88
  lineChart: {
75
89
  lineStyles: {
package/src/types.ts CHANGED
@@ -208,8 +208,8 @@ export type LeaderboardEntry = {
208
208
  previousShare?: number;
209
209
 
210
210
  /**
211
- * Delta of the entry. Omit when this row has no matching comparison-period
212
- * value.
211
+ * Delta of the entry. Omit when the percentage change is unavailable, such
212
+ * as when the row has no comparison value or its previous value is zero.
213
213
  */
214
214
  delta?: number;
215
215