@automattic/charts 1.1.1 → 1.2.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 (18) hide show
  1. package/AGENTS.md +2 -2
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.cjs +219 -161
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +50 -56
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.js +221 -163
  8. package/dist/index.js.map +1 -1
  9. package/package.json +9 -9
  10. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +25 -31
  11. package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx +4 -2
  12. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +7 -3
  13. package/src/charts/line-chart/line-chart.module.scss +13 -10
  14. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +3 -3
  15. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
  16. package/src/components/legend/private/base-legend.module.scss +3 -3
  17. package/src/components/tooltip/base-tooltip.module.scss +3 -3
  18. package/src/components/trend-indicator/trend-indicator.module.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/charts",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "description": "Display charts within Automattic products.",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
6
6
  "bugs": {
@@ -84,8 +84,8 @@
84
84
  "@visx/xychart": "^3.12.0",
85
85
  "@wordpress/i18n": "^6.0.0",
86
86
  "@wordpress/icons": "^12.0.0",
87
- "@wordpress/theme": "0.10.0",
88
- "@wordpress/ui": "0.10.0",
87
+ "@wordpress/theme": "0.11.0",
88
+ "@wordpress/ui": "0.11.0",
89
89
  "clsx": "2.1.1",
90
90
  "date-fns": "^4.1.0",
91
91
  "deepmerge": "4.3.1",
@@ -99,8 +99,8 @@
99
99
  "@babel/core": "7.29.0",
100
100
  "@babel/preset-react": "7.28.5",
101
101
  "@babel/preset-typescript": "7.28.5",
102
- "@storybook/addon-docs": "10.3.3",
103
- "@storybook/react": "10.3.3",
102
+ "@storybook/addon-docs": "10.3.5",
103
+ "@storybook/react": "10.3.5",
104
104
  "@testing-library/dom": "^10.0.0",
105
105
  "@testing-library/jest-dom": "^6.0.0",
106
106
  "@testing-library/react": "^16.0.0",
@@ -110,9 +110,9 @@
110
110
  "@types/react-dom": "18.3.7",
111
111
  "@typescript/native-preview": "7.0.0-dev.20260225.1",
112
112
  "@visx/glyph": "3.12.0",
113
- "@wordpress/components": "32.5.0",
114
- "@wordpress/element": "6.43.0",
115
- "@wordpress/private-apis": "1.43.0",
113
+ "@wordpress/components": "32.6.0",
114
+ "@wordpress/element": "6.44.0",
115
+ "@wordpress/private-apis": "1.44.0",
116
116
  "babel-jest": "30.3.0",
117
117
  "babel-plugin-react-remove-properties": "^0.3.1",
118
118
  "esbuild": "0.27.4",
@@ -126,7 +126,7 @@
126
126
  "react": "18.3.1",
127
127
  "react-dom": "18.3.1",
128
128
  "sass-embedded": "1.97.3",
129
- "storybook": "10.3.3",
129
+ "storybook": "10.3.5",
130
130
  "tsup": "8.5.1",
131
131
  "typescript": "5.9.3"
132
132
  },
package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss CHANGED
@@ -14,20 +14,20 @@
14
14
  overflow: hidden;
15
15
  color: #1e1e1e;
16
16
  text-overflow: ellipsis;
17
- font-size: var(--wpds-font-size-xl, 18px);
17
+ font-size: var(--wpds-typography-font-size-xl, 18px);
18
18
  font-style: normal;
19
- font-weight: var(--wpds-font-weight-medium, 499);
20
- line-height: var(--wpds-font-line-height-sm, 20px);
19
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
20
+ line-height: var(--wpds-typography-line-height-sm, 20px);
21
21
  margin: 0;
22
22
  }
23
23
 
24
24
  .change-indicator {
25
25
  overflow: hidden;
26
26
  text-overflow: ellipsis;
27
- font-size: var(--wpds-font-size-md, 13px);
27
+ font-size: var(--wpds-typography-font-size-md, 13px);
28
28
  font-style: normal;
29
- font-weight: var(--wpds-font-weight-medium, 499);
30
- line-height: var(--wpds-font-line-height-sm, 20px);
29
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
30
+ line-height: var(--wpds-typography-line-height-sm, 20px);
31
31
  margin: 0;
32
32
  }
33
33
 
@@ -53,29 +53,24 @@
53
53
 
54
54
  .step-label {
55
55
  color: #757575;
56
- font-size: var(--wpds-font-size-sm, 12px);
57
- font-style: normal;
58
- font-weight: var(--wpds-font-weight-regular, 400);
59
- line-height: var(--wpds-font-line-height-xs, 16px);
60
- margin: 0 0 2px 0;
61
- display: block;
56
+ font-size: var(--wpds-typography-font-size-sm, 12px);
57
+ font-weight: var(--wpds-typography-font-weight-regular, 400);
58
+ line-height: var(--wpds-typography-line-height-xs, 16px);
59
+ white-space: nowrap;
62
60
  overflow: hidden;
63
61
  text-overflow: ellipsis;
64
62
  }
65
63
 
66
64
  .step-rate {
67
65
  color: #1e1e1e;
68
- font-size: var(--wpds-font-size-md, 13px);
69
- font-style: normal;
70
- font-weight: var(--wpds-font-weight-medium, 499);
71
- line-height: var(--wpds-font-line-height-sm, 20px);
72
- margin: 0;
73
- display: block;
66
+ font-size: var(--wpds-typography-font-size-md, 13px);
67
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
68
+ line-height: var(--wpds-typography-line-height-xs, 16px);
74
69
  }
75
70
 
76
71
  .bar-container {
77
72
  flex: 1;
78
- border-radius: 4px;
73
+ border-radius: var(--wpds-border-radius-md, 4px);
79
74
  position: relative;
80
75
  cursor: pointer;
81
76
  }
@@ -83,7 +78,7 @@
83
78
  .funnel-bar {
84
79
  width: 100%;
85
80
  min-height: 4px;
86
- border-radius: 4px 4px 0 0;
81
+ border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
87
82
 
88
83
  &--animated {
89
84
  transform-origin: bottom;
@@ -101,35 +96,34 @@
101
96
  }
102
97
 
103
98
  .tooltip-wrapper {
104
- border-bottom: 1px solid var(--Gray-Gray-5, #dcdcde);
99
+ border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
105
100
  background: var(--black-white-white, #fff);
106
101
 
107
102
  // Override .visx-tooltip inline styles.
108
- border-radius: 4px !important;
109
- padding: 12px !important;
103
+ border-radius: var(--wpds-border-radius-md, 4px) !important;
104
+ padding: var(--wpds-dimension-padding-md, 12px) !important;
110
105
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
111
106
 
112
107
  }
113
108
 
114
109
  .tooltip-title {
115
110
  color: #1e1e1e;
116
- font-size: var(--wpds-font-size-sm, 12px);
111
+ font-size: var(--wpds-typography-font-size-sm, 12px);
117
112
  font-style: normal;
118
- font-weight: var(--wpds-font-weight-regular, 400);
119
- line-height: var(--wpds-font-line-height-xs, 16px);
113
+ font-weight: var(--wpds-typography-font-weight-regular, 400);
114
+ line-height: var(--wpds-typography-line-height-xs, 16px);
120
115
  }
121
116
 
122
117
  .tooltip-content {
123
118
  color: #1e1e1e;
124
- font-size: var(--wpds-font-size-md, 13px);
119
+ font-size: var(--wpds-typography-font-size-md, 13px);
125
120
  font-style: normal;
126
- font-weight: var(--wpds-font-weight-medium, 499);
127
- line-height: var(--wpds-font-line-height-sm, 20px);
121
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
122
+ line-height: var(--wpds-typography-line-height-sm, 20px);
128
123
  }
129
124
 
130
125
  .empty-state {
131
126
  text-align: center;
132
- padding: 48px 24px;
133
127
  color: #6b7280;
134
- font-size: var(--wpds-font-size-lg, 16px);
128
+ font-size: var(--wpds-typography-font-size-lg, 16px);
135
129
  }
package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx CHANGED
@@ -300,6 +300,8 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
300
300
  return (
301
301
  <Stack
302
302
  direction="column"
303
+ align="center"
304
+ justify="center"
303
305
  data-testid="conversion-funnel-chart"
304
306
  className={ clsx(
305
307
  styles[ 'conversion-funnel-chart' ],
@@ -369,7 +371,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
369
371
  gap="xl"
370
372
  >
371
373
  { /* Step Label and Rate */ }
372
- <div>
374
+ <Stack direction="column" gap="xs">
373
375
  { renderStepLabel ? (
374
376
  renderStepLabel( {
375
377
  step,
@@ -390,7 +392,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
390
392
  { formatPercentage( step.rate ) }
391
393
  </span>
392
394
  ) }
393
- </div>
395
+ </Stack>
394
396
 
395
397
  { /* Funnel Bar */ }
396
398
  <Stack
package/src/charts/leaderboard-chart/leaderboard-chart.module.scss CHANGED
@@ -21,6 +21,10 @@
21
21
  display: grid;
22
22
  align-items: center;
23
23
  grid-template-columns: 1fr;
24
+ // Outlier: not tokenized. The leaderboard's compact bar + gap + bar
25
+ // rhythm (6px bar, 6px row-gap, 6px bar) is intentional and does not
26
+ // map to any WPDS dimension token — gap-sm (8px) breaks the visual
27
+ // balance between the rows and the bars.
24
28
  row-gap: 6px;
25
29
  isolation: isolate;
26
30
 
@@ -34,7 +38,7 @@
34
38
  }
35
39
 
36
40
  .label {
37
- padding-left: 8px;
41
+ padding-left: var(--wpds-dimension-padding-sm, 8px);
38
42
  }
39
43
  }
40
44
 
@@ -70,9 +74,9 @@
70
74
  }
71
75
 
72
76
  .emptyState {
73
- padding: 32px 16px;
77
+ padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
74
78
  text-align: center;
75
79
  color: #666;
76
- font-size: var(--wpds-font-size-md, 13px);
80
+ font-size: var(--wpds-typography-font-size-md, 13px);
77
81
  font-style: italic;
78
82
  }
package/src/charts/line-chart/line-chart.module.scss CHANGED
@@ -17,21 +17,21 @@
17
17
  &__tooltip,
18
18
  &__annotation-label-popover {
19
19
  background: #fff;
20
- padding: 0.5rem;
20
+ padding: var(--wpds-dimension-padding-sm, 8px);
21
21
  }
22
22
 
23
23
  &__tooltip-date {
24
- font-weight: var(--wpds-font-weight-medium, 499);
25
- padding-bottom: 10px;
24
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
25
+ padding-bottom: var(--wpds-dimension-padding-md, 12px);
26
26
  }
27
27
 
28
28
  &__tooltip-row {
29
- padding: 4px 0;
29
+ padding: var(--wpds-dimension-padding-xs, 4px) 0;
30
30
  }
31
31
 
32
32
  &__tooltip-label {
33
- font-weight: var(--wpds-font-weight-medium, 499);
34
- padding-right: 1rem;
33
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
34
+ padding-right: var(--wpds-dimension-padding-lg, 16px);
35
35
  }
36
36
 
37
37
  &__annotations-overlay {
@@ -61,11 +61,14 @@
61
61
  min-width: 125px;
62
62
  background: #fff;
63
63
  border: none;
64
- border-radius: 4px;
65
- font-size: var(--wpds-font-size-md, 13px);
64
+ border-radius: var(--wpds-border-radius-md, 4px);
65
+ font-size: var(--wpds-typography-font-size-md, 13px);
66
66
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
67
67
  position: fixed;
68
- margin: 0.5rem;
68
+ // Without margin set, the popover has margin:auto which upsets the
69
+ // positioning relative to the trigger button. A gap token is appropriate
70
+ // because it creates a gap to the trigger button.
71
+ margin: var(--wpds-dimension-gap-sm, 8px);
69
72
  visibility: hidden;
70
73
 
71
74
  &--visible {
@@ -79,7 +82,7 @@
79
82
  }
80
83
 
81
84
  &__annotation-label-popover-content {
82
- padding: 0.5rem;
85
+ padding: var(--wpds-dimension-padding-sm, 8px);
83
86
  }
84
87
 
85
88
  &__annotation-label-popover-close-button {
package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss CHANGED
@@ -11,11 +11,11 @@
11
11
  }
12
12
 
13
13
  .label {
14
- font-weight: var(--wpds-font-weight-medium, 499);
15
- font-size: var(--wpds-font-size-lg, 16px);
14
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
15
+ font-size: var(--wpds-typography-font-size-lg, 16px);
16
16
  }
17
17
 
18
18
  .note {
19
- font-size: var(--wpds-font-size-md, 13px);
19
+ font-size: var(--wpds-typography-font-size-md, 13px);
20
20
  }
21
21
  }
package/src/charts/private/svg-empty-state/svg-empty-state.module.scss CHANGED
@@ -2,6 +2,6 @@
2
2
  text-align: center;
3
3
  width: 100%;
4
4
  height: 100%;
5
- font-size: var(--wpds-font-size-md, 13px);
5
+ font-size: var(--wpds-typography-font-size-md, 13px);
6
6
  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
7
7
  }
package/src/components/legend/private/base-legend.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .legend-item {
6
- font-size: var(--wpds-font-size-md, 13px);
6
+ font-size: var(--wpds-typography-font-size-md, 13px);
7
7
 
8
8
  &--interactive {
9
9
  cursor: pointer;
@@ -17,7 +17,7 @@
17
17
  &:focus {
18
18
  outline: 2px solid currentColor;
19
19
  outline-offset: 2px;
20
- border-radius: 4px;
20
+ border-radius: var(--wpds-border-radius-md, 4px);
21
21
  }
22
22
 
23
23
  &:focus:not(:focus-visible) {
@@ -52,6 +52,6 @@
52
52
  }
53
53
 
54
54
  .legend-item-value {
55
- font-weight: var(--wpds-font-weight-medium, 499);
55
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
56
56
  flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
57
57
  }
package/src/components/tooltip/base-tooltip.module.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  .tooltip {
2
- padding: 0.5rem;
2
+ padding: var(--wpds-dimension-padding-sm, 8px);
3
3
  background-color: rgba(0, 0, 0, 0.85);
4
4
  color: #fff;
5
- border-radius: 4px;
6
- font-size: var(--wpds-font-size-md, 13px);
5
+ border-radius: var(--wpds-border-radius-md, 4px);
6
+ font-size: var(--wpds-typography-font-size-md, 13px);
7
7
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
8
8
  position: absolute;
9
9
  pointer-events: none;
package/src/components/trend-indicator/trend-indicator.module.scss CHANGED
@@ -2,8 +2,8 @@
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  gap: 0.125em;
5
- font-size: var(--wpds-font-size-md, 13px);
6
- font-weight: var(--wpds-font-weight-medium, 499);
5
+ font-size: var(--wpds-typography-font-size-md, 13px);
6
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
7
7
  line-height: 1;
8
8
 
9
9
  &--up {