@automattic/charts 1.5.3 → 1.6.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 +8 -0
- package/dist/index.cjs +8969 -9570
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +315 -202
- package/dist/index.d.cts +1246 -1183
- package/dist/index.d.ts +1247 -1184
- package/dist/index.js +8548 -9570
- package/dist/index.js.map +1 -1
- package/dist/visx/group/index.cjs +8 -8
- package/dist/visx/group/index.d.cts +2 -3
- package/dist/visx/group/index.d.ts +2 -3
- package/dist/visx/group/index.js +1 -7
- package/dist/visx/legend/index.cjs +20 -10
- package/dist/visx/legend/index.d.cts +2 -1
- package/dist/visx/legend/index.d.ts +2 -1
- package/dist/visx/legend/index.js +2 -10
- package/dist/visx/text/index.cjs +20 -12
- package/dist/visx/text/index.d.cts +2 -1
- package/dist/visx/text/index.d.ts +2 -1
- package/dist/visx/text/index.js +2 -12
- package/package.json +11 -18
- package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +99 -0
- package/src/charts/leaderboard-chart/leaderboard-chart.tsx +33 -5
- package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +35 -1
- package/src/types.ts +15 -1
- package/dist/chunk-5WRI5ZAA.js +0 -31
- package/dist/chunk-5WRI5ZAA.js.map +0 -1
- package/dist/chunk-7OZEQ5HE.cjs +0 -9
- package/dist/chunk-7OZEQ5HE.cjs.map +0 -1
- package/dist/chunk-DZUJEN5N.cjs +0 -31
- package/dist/chunk-DZUJEN5N.cjs.map +0 -1
- package/dist/chunk-NFRB2POF.js +0 -9
- package/dist/chunk-NFRB2POF.js.map +0 -1
- package/dist/index.css.map +0 -1
- package/dist/visx/group/index.cjs.map +0 -1
- package/dist/visx/group/index.js.map +0 -1
- package/dist/visx/legend/index.cjs.map +0 -1
- package/dist/visx/legend/index.js.map +0 -1
- package/dist/visx/text/index.cjs.map +0 -1
- package/dist/visx/text/index.js.map +0 -1
- package/tsup.config.ts +0 -46
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let _visx_group = require("@visx/group");
|
|
3
|
+
Object.defineProperty(exports, "Group", {
|
|
4
|
+
enumerable: true,
|
|
5
|
+
get: function() {
|
|
6
|
+
return _visx_group.Group;
|
|
7
|
+
}
|
|
8
|
+
});
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import '@visx/text';
|
|
1
|
+
import { Group } from "@visx/group";
|
|
2
|
+
export { Group };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import '@visx/text';
|
|
1
|
+
import { Group } from "@visx/group";
|
|
2
|
+
export { Group };
|
package/dist/visx/group/index.js
CHANGED
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let _visx_legend = require("@visx/legend");
|
|
3
|
+
Object.defineProperty(exports, "CircleShape", {
|
|
4
|
+
enumerable: true,
|
|
5
|
+
get: function() {
|
|
6
|
+
return _visx_legend.CircleShape;
|
|
7
|
+
}
|
|
8
|
+
});
|
|
9
|
+
Object.defineProperty(exports, "LineShape", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function() {
|
|
12
|
+
return _visx_legend.LineShape;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "RectShape", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function() {
|
|
18
|
+
return _visx_legend.RectShape;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { CircleShape, LineShape, RectShape } from "@visx/legend";
|
|
2
|
+
export { CircleShape, LineShape, RectShape };
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { CircleShape, LineShape, RectShape } from "@visx/legend";
|
|
2
|
+
export { CircleShape, LineShape, RectShape };
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/visx/legend/index.ts
|
|
4
|
-
import { LineShape, CircleShape, RectShape } from "@visx/legend";
|
|
5
|
-
export {
|
|
6
|
-
CircleShape,
|
|
7
|
-
LineShape,
|
|
8
|
-
RectShape
|
|
9
|
-
};
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { CircleShape, LineShape, RectShape } from "@visx/legend";
|
|
2
|
+
export { CircleShape, LineShape, RectShape };
|
package/dist/visx/text/index.cjs
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let _visx_text = require("@visx/text");
|
|
3
|
+
Object.defineProperty(exports, "Text", {
|
|
4
|
+
enumerable: true,
|
|
5
|
+
get: function() {
|
|
6
|
+
return _visx_text.Text;
|
|
7
|
+
}
|
|
8
|
+
});
|
|
9
|
+
Object.defineProperty(exports, "getStringWidth", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function() {
|
|
12
|
+
return _visx_text.getStringWidth;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "useText", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function() {
|
|
18
|
+
return _visx_text.useText;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { Text, getStringWidth, useText } from "@visx/text";
|
|
2
|
+
export { Text, getStringWidth, useText };
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { Text, getStringWidth, useText } from "@visx/text";
|
|
2
|
+
export { Text, getStringWidth, useText };
|
package/dist/visx/text/index.js
CHANGED
|
@@ -1,12 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
getStringWidth,
|
|
4
|
-
useText
|
|
5
|
-
} from "../../chunk-NFRB2POF.js";
|
|
6
|
-
import "../../chunk-5WRI5ZAA.js";
|
|
7
|
-
export {
|
|
8
|
-
Text,
|
|
9
|
-
getStringWidth,
|
|
10
|
-
useText
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { Text, getStringWidth, useText } from "@visx/text";
|
|
2
|
+
export { Text, getStringWidth, useText };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/charts",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.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": {
|
|
@@ -56,15 +56,15 @@
|
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"build": "pnpm run build:prod",
|
|
59
|
-
"build:prod": "
|
|
59
|
+
"build:prod": "tsdown",
|
|
60
60
|
"storybook": "cd ../storybook && pnpm run storybook:dev",
|
|
61
61
|
"test": "TZ=UTC jest --config=tests/jest.config.cjs",
|
|
62
62
|
"test-coverage": "pnpm run test --coverage",
|
|
63
63
|
"typecheck": "tsgo --noEmit"
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@automattic/number-formatters": "^1.2.
|
|
67
|
-
"@babel/runtime": "7.29.
|
|
66
|
+
"@automattic/number-formatters": "^1.2.4",
|
|
67
|
+
"@babel/runtime": "7.29.7",
|
|
68
68
|
"@react-spring/web": "9.7.5",
|
|
69
69
|
"@visx/annotation": "^3.12.0",
|
|
70
70
|
"@visx/axis": "^3.12.0",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"@visx/xychart": "^3.12.0",
|
|
85
85
|
"@wordpress/i18n": "^6.0.0",
|
|
86
86
|
"@wordpress/icons": "^13.0.0",
|
|
87
|
-
"@wordpress/theme": "0.15.
|
|
87
|
+
"@wordpress/theme": "0.15.1",
|
|
88
88
|
"@wordpress/ui": "0.13.0",
|
|
89
89
|
"clsx": "2.1.1",
|
|
90
90
|
"date-fns": "^4.1.0",
|
|
@@ -96,38 +96,31 @@
|
|
|
96
96
|
},
|
|
97
97
|
"devDependencies": {
|
|
98
98
|
"@automattic/jetpack-webpack-config": "workspace:*",
|
|
99
|
-
"@babel/core": "7.29.0",
|
|
100
|
-
"@babel/preset-react": "7.28.5",
|
|
101
|
-
"@babel/preset-typescript": "7.28.5",
|
|
102
99
|
"@storybook/addon-docs": "10.3.6",
|
|
103
100
|
"@storybook/react": "10.3.6",
|
|
104
101
|
"@testing-library/dom": "^10.0.0",
|
|
105
102
|
"@testing-library/jest-dom": "^6.0.0",
|
|
106
103
|
"@testing-library/react": "^16.0.0",
|
|
107
104
|
"@testing-library/user-event": "^14.4.3",
|
|
105
|
+
"@tsdown/css": "0.22.2",
|
|
108
106
|
"@types/jest": "^30.0.0",
|
|
109
107
|
"@types/react": "18.3.28",
|
|
110
108
|
"@types/react-dom": "18.3.7",
|
|
111
109
|
"@typescript/native-preview": "7.0.0-dev.20260225.1",
|
|
112
110
|
"@visx/glyph": "3.12.0",
|
|
113
|
-
"@wordpress/components": "35.0.
|
|
114
|
-
"@wordpress/element": "8.0.
|
|
115
|
-
"@wordpress/private-apis": "1.48.
|
|
111
|
+
"@wordpress/components": "35.0.1",
|
|
112
|
+
"@wordpress/element": "8.0.1",
|
|
113
|
+
"@wordpress/private-apis": "1.48.1",
|
|
116
114
|
"babel-jest": "30.4.1",
|
|
117
|
-
"babel-plugin-react-remove-properties": "^0.3.1",
|
|
118
|
-
"esbuild": "0.27.4",
|
|
119
|
-
"esbuild-plugin-babel": "^0.2.3",
|
|
120
|
-
"esbuild-sass-plugin": "^3.1.0",
|
|
121
115
|
"identity-obj-proxy": "^3.0.0",
|
|
122
116
|
"jest": "30.4.2",
|
|
123
117
|
"jest-extended": "7.0.0",
|
|
124
|
-
"
|
|
125
|
-
"postcss-modules": "6.0.1",
|
|
118
|
+
"magic-string": "0.30.21",
|
|
126
119
|
"react": "18.3.1",
|
|
127
120
|
"react-dom": "18.3.1",
|
|
128
121
|
"sass-embedded": "1.97.3",
|
|
129
122
|
"storybook": "10.3.6",
|
|
130
|
-
"
|
|
123
|
+
"tsdown": "0.22.2",
|
|
131
124
|
"typescript": "5.9.3"
|
|
132
125
|
},
|
|
133
126
|
"peerDependencies": {
|
|
@@ -45,6 +45,9 @@
|
|
|
45
45
|
.bar {
|
|
46
46
|
height: 100%;
|
|
47
47
|
min-height: 6px;
|
|
48
|
+
// Keeps a sliver of bar visible for tiny shares, and stops the interactive
|
|
49
|
+
// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
|
|
50
|
+
min-width: var(--wpds-dimension-size-5xs, 4px);
|
|
48
51
|
|
|
49
52
|
border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
|
|
50
53
|
z-index: -1; /* places it behind the label */
|
|
@@ -80,3 +83,99 @@
|
|
|
80
83
|
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
81
84
|
font-style: italic;
|
|
82
85
|
}
|
|
86
|
+
|
|
87
|
+
.interactiveRow {
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-column: 1 / -1;
|
|
90
|
+
grid-template-columns: subgrid;
|
|
91
|
+
align-items: center;
|
|
92
|
+
position: relative;
|
|
93
|
+
|
|
94
|
+
// Native button reset.
|
|
95
|
+
appearance: none;
|
|
96
|
+
width: 100%;
|
|
97
|
+
margin: 0;
|
|
98
|
+
padding: 0;
|
|
99
|
+
border: 0;
|
|
100
|
+
background: none;
|
|
101
|
+
color: inherit;
|
|
102
|
+
font: inherit;
|
|
103
|
+
text-align: inherit;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
|
|
106
|
+
// On hover/focus the bar dims and its inline-end edge pulls back by a fixed
|
|
107
|
+
// amount while the value/delta slides toward the inline start by the same
|
|
108
|
+
// amount, clearing room for the chevron revealed at the inline-end edge.
|
|
109
|
+
// Because both move by the same fixed pixels (not a percentage scale), the
|
|
110
|
+
// bar↔value gap stays identical at rest and on hover for every row. The bar
|
|
111
|
+
// width (set in leaderboard-chart.tsx) is a grid item aligned to the inline
|
|
112
|
+
// start, so its inset mirrors automatically in RTL; the value slide is given
|
|
113
|
+
// an RTL override below. No row background — the bar carries the state.
|
|
114
|
+
.bar {
|
|
115
|
+
transition: opacity 0.15s ease, width 0.15s ease;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.valueContainer {
|
|
119
|
+
transition: transform 0.15s ease;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&:hover,
|
|
123
|
+
&:focus-visible {
|
|
124
|
+
|
|
125
|
+
// Fixed reserve for the chevron — shared by the bar width inset
|
|
126
|
+
// (see leaderboard-chart.tsx) and the value slide so their gap is constant.
|
|
127
|
+
--a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
|
|
128
|
+
|
|
129
|
+
.bar {
|
|
130
|
+
opacity: 0.5;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.valueContainer {
|
|
134
|
+
transform: translateX(calc(var(--a8c--charts--leaderboard--bar--hover-inset) * -1));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.chevron {
|
|
138
|
+
opacity: 1;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// In RTL the value slides toward the inline start the other way (rightward).
|
|
143
|
+
[dir="rtl"] &:hover .valueContainer,
|
|
144
|
+
[dir="rtl"] &:focus-visible .valueContainer {
|
|
145
|
+
transform: translateX(var(--a8c--charts--leaderboard--bar--hover-inset));
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&:focus-visible {
|
|
149
|
+
outline: 2px solid var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
|
|
150
|
+
outline-offset: -2px;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.chevron {
|
|
155
|
+
position: absolute;
|
|
156
|
+
inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
|
|
157
|
+
top: 0;
|
|
158
|
+
bottom: 0;
|
|
159
|
+
margin-block: auto;
|
|
160
|
+
opacity: 0;
|
|
161
|
+
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
162
|
+
transition: opacity 0.15s ease;
|
|
163
|
+
pointer-events: none;
|
|
164
|
+
|
|
165
|
+
// The glyph points toward the inline end, so flip it to point left in RTL.
|
|
166
|
+
[dir="rtl"] & {
|
|
167
|
+
transform: scaleX(-1);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@media ( prefers-reduced-motion: reduce ) {
|
|
172
|
+
|
|
173
|
+
.interactiveRow {
|
|
174
|
+
|
|
175
|
+
.bar,
|
|
176
|
+
.valueContainer,
|
|
177
|
+
.chevron {
|
|
178
|
+
transition: none;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { __experimentalGrid as Grid } from '@wordpress/components';
|
|
3
3
|
import { Fragment } from '@wordpress/element';
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
|
+
import { Icon, chevronRight } from '@wordpress/icons';
|
|
5
6
|
import { Stack, Text } from '@wordpress/ui';
|
|
6
7
|
import clsx from 'clsx';
|
|
7
8
|
import { useContext, useMemo, type FC } from 'react';
|
|
@@ -51,6 +52,17 @@ const defaultDeltaFormatter = ( value: number ): string => {
|
|
|
51
52
|
} );
|
|
52
53
|
};
|
|
53
54
|
|
|
55
|
+
/**
|
|
56
|
+
* Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
|
|
57
|
+
* so interactive rows can pull the bar's right edge back by a fixed pixel amount
|
|
58
|
+
* on hover — instead of a percentage scale — keeping the bar↔value gap constant.
|
|
59
|
+
*
|
|
60
|
+
* @param share - The bar's share of the row width, as a percentage.
|
|
61
|
+
* @return A CSS width value.
|
|
62
|
+
*/
|
|
63
|
+
const getBarWidth = ( share: number ): string =>
|
|
64
|
+
`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px))`;
|
|
65
|
+
|
|
54
66
|
const BarLabel = ( { label }: { label: string | JSX.Element } ) => (
|
|
55
67
|
<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
|
|
56
68
|
);
|
|
@@ -87,7 +99,7 @@ const BarWithLabel = ( {
|
|
|
87
99
|
[ styles[ 'bar--animated' ] ]: animation,
|
|
88
100
|
} ) }
|
|
89
101
|
style={ {
|
|
90
|
-
width: entry.currentShare
|
|
102
|
+
width: getBarWidth( entry.currentShare ),
|
|
91
103
|
backgroundColor: primaryColor,
|
|
92
104
|
} }
|
|
93
105
|
></div>
|
|
@@ -99,7 +111,7 @@ const BarWithLabel = ( {
|
|
|
99
111
|
[ styles[ 'bar--animated' ] ]: animation,
|
|
100
112
|
} ) }
|
|
101
113
|
style={ {
|
|
102
|
-
width: entry.previousShare
|
|
114
|
+
width: getBarWidth( entry.previousShare ),
|
|
103
115
|
backgroundColor: secondaryColor,
|
|
104
116
|
} }
|
|
105
117
|
></div>
|
|
@@ -324,8 +336,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
|
|
|
324
336
|
const colorIndex = Math.sign( entry.delta ) + 1;
|
|
325
337
|
const deltaColor = deltaColors[ colorIndex ];
|
|
326
338
|
|
|
327
|
-
|
|
328
|
-
|
|
339
|
+
const rowCells = (
|
|
340
|
+
<>
|
|
329
341
|
<Stack direction="column" gap={ labelSpacing }>
|
|
330
342
|
<BarWithLabel
|
|
331
343
|
entry={ entry }
|
|
@@ -354,8 +366,24 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
|
|
|
354
366
|
</Text>
|
|
355
367
|
) }
|
|
356
368
|
</Stack>
|
|
357
|
-
|
|
369
|
+
</>
|
|
358
370
|
);
|
|
371
|
+
|
|
372
|
+
if ( entry.onClick ) {
|
|
373
|
+
return (
|
|
374
|
+
<button
|
|
375
|
+
key={ entry.id }
|
|
376
|
+
type="button"
|
|
377
|
+
className={ styles.interactiveRow }
|
|
378
|
+
onClick={ entry.onClick }
|
|
379
|
+
>
|
|
380
|
+
{ rowCells }
|
|
381
|
+
<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
|
|
382
|
+
</button>
|
|
383
|
+
);
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
return <Fragment key={ entry.id }>{ rowCells }</Fragment>;
|
|
359
387
|
} ) }
|
|
360
388
|
</Grid>
|
|
361
389
|
) }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { render, screen } from '@testing-library/react';
|
|
1
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
2
2
|
import LeaderboardChart from '../leaderboard-chart';
|
|
3
3
|
import type { LeaderboardEntry } from '../../../types';
|
|
4
4
|
|
|
@@ -367,4 +367,38 @@ describe( 'LeaderboardChart', () => {
|
|
|
367
367
|
expect( chartContainer ).toHaveStyle( { width: '500px', height: '240px' } );
|
|
368
368
|
} );
|
|
369
369
|
} );
|
|
370
|
+
|
|
371
|
+
describe( 'Interactive items', () => {
|
|
372
|
+
it( 'renders a button for an entry with onClick', () => {
|
|
373
|
+
render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() } ] } /> );
|
|
374
|
+
expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
|
|
375
|
+
expect( screen.getByRole( 'button' ).tagName ).toBe( 'BUTTON' );
|
|
376
|
+
} );
|
|
377
|
+
|
|
378
|
+
it( 'calls onClick when the row is clicked', () => {
|
|
379
|
+
const onClick = jest.fn();
|
|
380
|
+
render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
|
|
381
|
+
// eslint-disable-next-line testing-library/prefer-user-event
|
|
382
|
+
fireEvent.click( screen.getByRole( 'button' ) );
|
|
383
|
+
expect( onClick ).toHaveBeenCalledTimes( 1 );
|
|
384
|
+
} );
|
|
385
|
+
|
|
386
|
+
it( 'gives the interactive row an accessible name from the label and value', () => {
|
|
387
|
+
render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() } ] } /> );
|
|
388
|
+
// mockData[0] label is 'Direct', currentValue 12500 → '12.5K'
|
|
389
|
+
expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /Direct.*12\.5K/ );
|
|
390
|
+
} );
|
|
391
|
+
|
|
392
|
+
it( 'does not render a button for entries without onClick', () => {
|
|
393
|
+
render( <LeaderboardChart data={ [ mockData[ 0 ] ] } /> );
|
|
394
|
+
expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
|
|
395
|
+
} );
|
|
396
|
+
|
|
397
|
+
it( 'renders a button only for interactive entries in mixed data', () => {
|
|
398
|
+
render(
|
|
399
|
+
<LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() }, mockData[ 1 ] ] } />
|
|
400
|
+
);
|
|
401
|
+
expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
|
|
402
|
+
} );
|
|
403
|
+
} );
|
|
370
404
|
} );
|
package/src/types.ts
CHANGED
|
@@ -8,7 +8,7 @@ import type { ScaleInput, ScaleType } from '@visx/scale';
|
|
|
8
8
|
import type { TextProps } from '@visx/text/lib/Text';
|
|
9
9
|
import type { EventHandlerParams, GlyphProps, GridStyles, LineStyles } from '@visx/xychart';
|
|
10
10
|
import type { GapSize } from '@wordpress/theme';
|
|
11
|
-
import type { CSSProperties, PointerEvent, ReactNode } from 'react';
|
|
11
|
+
import type { CSSProperties, MouseEvent, PointerEvent, ReactNode } from 'react';
|
|
12
12
|
import type { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
|
|
13
13
|
|
|
14
14
|
type ValueOf< T > = T[ keyof T ];
|
|
@@ -132,6 +132,20 @@ export type LeaderboardEntry = {
|
|
|
132
132
|
* Optional color for the entry's image/icon
|
|
133
133
|
*/
|
|
134
134
|
imageColor?: string;
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Optional click handler. When provided, the entire row becomes an
|
|
138
|
+
* interactive `<button>`: clickable and keyboard-focusable (Enter/Space),
|
|
139
|
+
* with a chevron affordance revealed on hover/focus. The consumer
|
|
140
|
+
* decides what the action does (e.g. drill-down). Rows without onClick are
|
|
141
|
+
* inert and render unchanged.
|
|
142
|
+
*
|
|
143
|
+
* For links or other interactive affordances (external-link icons, info
|
|
144
|
+
* tooltips), put them in the `label` render prop instead of using onClick —
|
|
145
|
+
* a row is either a button (onClick) or carries interactive label content,
|
|
146
|
+
* never both, since interactive elements cannot be nested in HTML.
|
|
147
|
+
*/
|
|
148
|
+
onClick?: ( event: MouseEvent< HTMLButtonElement > ) => void;
|
|
135
149
|
};
|
|
136
150
|
|
|
137
151
|
export type GradientStop = {
|
package/dist/chunk-5WRI5ZAA.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
-
mod
|
|
25
|
-
));
|
|
26
|
-
|
|
27
|
-
export {
|
|
28
|
-
__commonJS,
|
|
29
|
-
__toESM
|
|
30
|
-
};
|
|
31
|
-
//# sourceMappingURL=chunk-5WRI5ZAA.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/chunk-7OZEQ5HE.cjs
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/visx/text/index.ts
|
|
2
|
-
var _text = require('@visx/text');
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
exports.Text = _text.Text; exports.useText = _text.useText; exports.getStringWidth = _text.getStringWidth;
|
|
9
|
-
//# sourceMappingURL=chunk-7OZEQ5HE.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-7OZEQ5HE.cjs","../src/visx/text/index.ts"],"names":[],"mappings":"AAAA;ACCA,kCAA8C;ADC9C;AACA;AACE;AACA;AACA;AACF,0GAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-7OZEQ5HE.cjs","sourcesContent":[null,"// Re-export Text utilities from visx\nexport { Text, useText, getStringWidth } from '@visx/text';\n"]}
|
package/dist/chunk-DZUJEN5N.cjs
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
-
mod
|
|
25
|
-
));
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
exports.__commonJS = __commonJS; exports.__toESM = __toESM;
|
|
31
|
-
//# sourceMappingURL=chunk-DZUJEN5N.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-DZUJEN5N.cjs"],"names":[],"mappings":"AAAA,6EAAI,SAAS,EAAE,MAAM,CAAC,MAAM;AAC5B,IAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,iBAAiB,EAAE,MAAM,CAAC,wBAAwB;AACtD,IAAI,kBAAkB,EAAE,MAAM,CAAC,mBAAmB;AAClD,IAAI,aAAa,EAAE,MAAM,CAAC,cAAc;AACxC,IAAI,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,cAAc;AAClD,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,SAAS,SAAS,CAAC,EAAE;AACnD,EAAE,OAAO,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO;AACpG,CAAC;AACD,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG;AAC9C,EAAE,GAAG,CAAC,KAAK,GAAG,OAAO,KAAK,IAAI,SAAS,GAAG,OAAO,KAAK,IAAI,UAAU,EAAE;AACtE,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;AAC3C,MAAM,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,MAAM;AACvD,QAAQ,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;AAC1H,EAAE;AACF,EAAE,OAAO,EAAE;AACX,CAAC;AACD,IAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW;AAChH;AACA;AACA;AACA;AACA,EAAE,WAAW,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM;AACjH,EAAE;AACF,CAAC,CAAC;AACF;AACA;AACE;AACA;AACF,2DAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-DZUJEN5N.cjs"}
|
package/dist/chunk-NFRB2POF.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/visx/text/index.ts"],"sourcesContent":["// Re-export Text utilities from visx\nexport { Text, useText, getStringWidth } from '@visx/text';\n"],"mappings":";AACA,SAAS,MAAM,SAAS,sBAAsB;","names":[]}
|