@coinbase/cds-web-visualization 3.4.0-beta.11 → 3.4.0-beta.13
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 +15 -0
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts +25 -1
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -1
- package/dts/chart/scrubber/Scrubber.d.ts +23 -0
- package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +10 -0
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -1
- package/esm/chart/scrubber/DefaultScrubberBeacon.js +74 -66
- package/esm/chart/scrubber/Scrubber.js +2 -0
- package/esm/chart/scrubber/ScrubberBeaconGroup.js +11 -3
- package/esm/sparkline/__figma__/Sparkline.figma.js +1 -1
- package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js +1 -1
- package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js +1 -1
- package/package.json +5 -6
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,21 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 3.4.0-beta.13 (1/20/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Feat: support styling default scrubber beacon. [[#315](https://github.com/coinbase/cds/pull/315)]
|
|
16
|
+
|
|
17
|
+
#### 📘 Misc
|
|
18
|
+
|
|
19
|
+
- Internal: code connect file lint fixes. [[#311](https://github.com/coinbase/cds/pull/311)]
|
|
20
|
+
- Internal: update figma code connect config and some mapping files. [[#304](https://github.com/coinbase/cds/pull/304)]
|
|
21
|
+
|
|
22
|
+
## 3.4.0-beta.12 (1/8/2026 PST)
|
|
23
|
+
|
|
24
|
+
This is an artificial version bump with no new change.
|
|
25
|
+
|
|
11
26
|
## 3.4.0-beta.11 (1/7/2026 PST)
|
|
12
27
|
|
|
13
28
|
#### 🐞 Fixes
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
import { type Transition } from 'framer-motion';
|
|
2
2
|
import type { ScrubberBeaconProps, ScrubberBeaconRef } from './Scrubber';
|
|
3
|
-
export type DefaultScrubberBeaconProps = ScrubberBeaconProps
|
|
3
|
+
export type DefaultScrubberBeaconProps = ScrubberBeaconProps & {
|
|
4
|
+
/**
|
|
5
|
+
* Radius of the beacon circle.
|
|
6
|
+
* @default 5
|
|
7
|
+
*/
|
|
8
|
+
radius?: number;
|
|
9
|
+
/**
|
|
10
|
+
* Stroke width of the beacon circle.
|
|
11
|
+
* @default 2
|
|
12
|
+
*/
|
|
13
|
+
strokeWidth?: number;
|
|
14
|
+
};
|
|
4
15
|
export declare const DefaultScrubberBeacon: import('react').MemoExoticComponent<
|
|
5
16
|
import('react').ForwardRefExoticComponent<
|
|
6
17
|
import('@coinbase/cds-common').SharedProps & {
|
|
@@ -10,14 +21,27 @@ export declare const DefaultScrubberBeacon: import('react').MemoExoticComponent<
|
|
|
10
21
|
dataY: number;
|
|
11
22
|
isIdle?: boolean;
|
|
12
23
|
idlePulse?: boolean;
|
|
24
|
+
animate?: boolean;
|
|
13
25
|
transitions?: {
|
|
14
26
|
update?: Transition;
|
|
15
27
|
pulse?: Transition;
|
|
16
28
|
pulseRepeatDelay?: number;
|
|
17
29
|
};
|
|
18
30
|
opacity?: number;
|
|
31
|
+
stroke?: string;
|
|
19
32
|
className?: string;
|
|
20
33
|
style?: React.CSSProperties;
|
|
34
|
+
} & {
|
|
35
|
+
/**
|
|
36
|
+
* Radius of the beacon circle.
|
|
37
|
+
* @default 5
|
|
38
|
+
*/
|
|
39
|
+
radius?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Stroke width of the beacon circle.
|
|
42
|
+
* @default 2
|
|
43
|
+
*/
|
|
44
|
+
strokeWidth?: number;
|
|
21
45
|
} & import('react').RefAttributes<ScrubberBeaconRef>
|
|
22
46
|
>
|
|
23
47
|
>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AAKvB,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AAKvB,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;cA4C5B,CAAL;aAIK,CAAF;wBAIE,CAAN;;;;;;;IAhEE;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAqLrB,CAAC"}
|
|
@@ -43,8 +43,16 @@ export type ScrubberBeaconProps = SharedProps & {
|
|
|
43
43
|
isIdle?: boolean;
|
|
44
44
|
/**
|
|
45
45
|
* Pulse the beacon while it is at rest.
|
|
46
|
+
*
|
|
47
|
+
* @note Only has an effect when `isIdle` is `true`. Pulse animations work
|
|
48
|
+
* regardless of the chart's `animate` prop.
|
|
46
49
|
*/
|
|
47
50
|
idlePulse?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Whether position animations are enabled.
|
|
53
|
+
* @default to ChartContext's animate value
|
|
54
|
+
*/
|
|
55
|
+
animate?: boolean;
|
|
48
56
|
/**
|
|
49
57
|
* Transition configuration for beacon animations.
|
|
50
58
|
*/
|
|
@@ -71,6 +79,11 @@ export type ScrubberBeaconProps = SharedProps & {
|
|
|
71
79
|
* @default 1
|
|
72
80
|
*/
|
|
73
81
|
opacity?: number;
|
|
82
|
+
/**
|
|
83
|
+
* Stroke color of the beacon circle.
|
|
84
|
+
* @default 'var(--color-bg)'
|
|
85
|
+
*/
|
|
86
|
+
stroke?: string;
|
|
74
87
|
/**
|
|
75
88
|
* Custom className for styling.
|
|
76
89
|
*/
|
|
@@ -165,6 +178,11 @@ export type ScrubberBaseProps = SharedProps &
|
|
|
165
178
|
* Transition configuration for the scrubber beacon.
|
|
166
179
|
*/
|
|
167
180
|
beaconTransitions?: ScrubberBeaconProps['transitions'];
|
|
181
|
+
/**
|
|
182
|
+
* Stroke color of the scrubber beacon circle.
|
|
183
|
+
* @default 'var(--color-bg)'
|
|
184
|
+
*/
|
|
185
|
+
beaconStroke?: string;
|
|
168
186
|
};
|
|
169
187
|
export type ScrubberProps = ScrubberBaseProps & {
|
|
170
188
|
/**
|
|
@@ -260,6 +278,11 @@ export declare const Scrubber: React.MemoExoticComponent<
|
|
|
260
278
|
* Transition configuration for the scrubber beacon.
|
|
261
279
|
*/
|
|
262
280
|
beaconTransitions?: ScrubberBeaconProps['transitions'];
|
|
281
|
+
/**
|
|
282
|
+
* Stroke color of the scrubber beacon circle.
|
|
283
|
+
* @default 'var(--color-bg)'
|
|
284
|
+
*/
|
|
285
|
+
beaconStroke?: string;
|
|
263
286
|
} & {
|
|
264
287
|
/**
|
|
265
288
|
* Accessibility label for the scrubber. Can be a static string or a function that receives the current dataIndex.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,gCAAgC,EACtC,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,MAAM,EAEZ,MAAM,UAAU,CAAC;AAIlB,OAAO,EAEL,KAAK,4BAA4B,EACjC,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,iCAAiC,EACtC,KAAK,6BAA6B,EACnC,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB
|
|
1
|
+
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,6 +34,11 @@ export type ScrubberBeaconGroupProps = ScrubberBeaconGroupBaseProps & {
|
|
|
34
34
|
* Custom inline styles for beacons.
|
|
35
35
|
*/
|
|
36
36
|
style?: React.CSSProperties;
|
|
37
|
+
/**
|
|
38
|
+
* Stroke color of the beacon circle.
|
|
39
|
+
* @default 'var(--color-bg)'
|
|
40
|
+
*/
|
|
41
|
+
stroke?: string;
|
|
37
42
|
};
|
|
38
43
|
export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
|
|
39
44
|
import('react').ForwardRefExoticComponent<
|
|
@@ -64,6 +69,11 @@ export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
|
|
|
64
69
|
* Custom inline styles for beacons.
|
|
65
70
|
*/
|
|
66
71
|
style?: React.CSSProperties;
|
|
72
|
+
/**
|
|
73
|
+
* Stroke color of the beacon circle.
|
|
74
|
+
* @default 'var(--color-bg)'
|
|
75
|
+
*/
|
|
76
|
+
stroke?: string;
|
|
67
77
|
} & import('react').RefAttributes<ScrubberBeaconGroupRef>
|
|
68
78
|
>
|
|
69
79
|
>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AAyGlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG;IACvD;;OAEG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB;IAnC9B;;OAEG;eACQ,MAAM,EAAE;IACnB;;OAEG;gBACS,OAAO;;IAInB;;OAEG;kBACW,mBAAmB,CAAC,aAAa,CAAC;IAChD;;;OAGG;sBACe,uBAAuB;IACzC;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;;OAGG;aACM,MAAM;2DAyFhB,CAAC"}
|
|
@@ -8,12 +8,13 @@ import { m as motion, useAnimate } from 'framer-motion';
|
|
|
8
8
|
import { useCartesianChartContext } from '../ChartProvider';
|
|
9
9
|
import { defaultTransition, projectPoint } from '../utils';
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
const
|
|
12
|
-
const
|
|
11
|
+
const defaultRadius = 5;
|
|
12
|
+
const defaultStrokeWidth = 2;
|
|
13
|
+
const defaultStroke = 'var(--color-bg)';
|
|
13
14
|
const pulseOpacityStart = 0.5;
|
|
14
15
|
const pulseOpacityEnd = 0;
|
|
15
|
-
const
|
|
16
|
-
const
|
|
16
|
+
const pulseRadiusStartMultiplier = 2;
|
|
17
|
+
const pulseRadiusEndMultiplier = 3;
|
|
17
18
|
const defaultPulseTransition = {
|
|
18
19
|
duration: 1.6,
|
|
19
20
|
ease: [0.0, 0.0, 0.0, 1.0]
|
|
@@ -27,19 +28,25 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
|
|
|
27
28
|
dataY,
|
|
28
29
|
isIdle,
|
|
29
30
|
idlePulse,
|
|
31
|
+
animate: animateProp,
|
|
30
32
|
transitions,
|
|
31
33
|
opacity = 1,
|
|
34
|
+
radius = defaultRadius,
|
|
35
|
+
stroke = defaultStroke,
|
|
36
|
+
strokeWidth = defaultStrokeWidth,
|
|
32
37
|
className,
|
|
33
38
|
style,
|
|
34
|
-
testID
|
|
39
|
+
testID = "".concat(seriesId, "-beacon")
|
|
35
40
|
} = _ref;
|
|
36
|
-
const [scope,
|
|
41
|
+
const [scope, animateFn] = useAnimate();
|
|
37
42
|
const {
|
|
43
|
+
animate: animateContext,
|
|
38
44
|
getSeries,
|
|
39
45
|
getXScale,
|
|
40
46
|
getYScale,
|
|
41
47
|
drawingArea
|
|
42
48
|
} = useCartesianChartContext();
|
|
49
|
+
const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animateContext;
|
|
43
50
|
const targetSeries = getSeries(seriesId);
|
|
44
51
|
const xScale = getXScale();
|
|
45
52
|
const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
|
|
@@ -68,17 +75,19 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
|
|
|
68
75
|
yScale
|
|
69
76
|
});
|
|
70
77
|
}, [dataX, dataY, xScale, yScale]);
|
|
78
|
+
const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
|
|
79
|
+
const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
|
|
71
80
|
useImperativeHandle(ref, () => ({
|
|
72
81
|
pulse: () => {
|
|
73
82
|
// Only pulse when idle and idlePulse is not enabled
|
|
74
83
|
if (isIdle && !idlePulse && scope.current) {
|
|
75
|
-
|
|
84
|
+
animateFn(scope.current, {
|
|
76
85
|
opacity: [pulseOpacityStart, pulseOpacityEnd],
|
|
77
86
|
r: [pulseRadiusStart, pulseRadiusEnd]
|
|
78
87
|
}, pulseTransition);
|
|
79
88
|
}
|
|
80
89
|
}
|
|
81
|
-
}), [isIdle, idlePulse, scope,
|
|
90
|
+
}), [isIdle, idlePulse, scope, animateFn, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
|
|
82
91
|
|
|
83
92
|
// Create continuous pulse transition by repeating the base pulse transition with delay
|
|
84
93
|
const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
|
|
@@ -91,65 +100,64 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
|
|
|
91
100
|
return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
|
|
92
101
|
}, [pixelCoordinate, drawingArea]);
|
|
93
102
|
if (!pixelCoordinate) return;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
opacity:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
return /*#__PURE__*/_jsx("g", {
|
|
103
|
+
const pulseCircle = /*#__PURE__*/_jsx(motion.circle, {
|
|
104
|
+
ref: scope,
|
|
105
|
+
animate: shouldPulse ? {
|
|
106
|
+
opacity: [pulseOpacityStart, pulseOpacityEnd],
|
|
107
|
+
r: [pulseRadiusStart, pulseRadiusEnd],
|
|
108
|
+
transition: continuousPulseTransition
|
|
109
|
+
} : {
|
|
110
|
+
opacity: pulseOpacityEnd,
|
|
111
|
+
r: pulseRadiusStart
|
|
112
|
+
},
|
|
113
|
+
cx: 0,
|
|
114
|
+
cy: 0,
|
|
115
|
+
"data-testid": "".concat(testID, "-pulse"),
|
|
116
|
+
fill: color,
|
|
117
|
+
initial: {
|
|
118
|
+
opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
|
|
119
|
+
r: pulseRadiusStart
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
const beaconCircle = isIdle && animate ? /*#__PURE__*/_jsx(motion.circle, {
|
|
123
|
+
animate: {
|
|
124
|
+
cx: pixelCoordinate.x,
|
|
125
|
+
cy: pixelCoordinate.y
|
|
126
|
+
},
|
|
127
|
+
className: className,
|
|
128
|
+
cx: pixelCoordinate.x,
|
|
129
|
+
cy: pixelCoordinate.y,
|
|
130
|
+
fill: color,
|
|
131
|
+
initial: false,
|
|
132
|
+
r: radius,
|
|
133
|
+
stroke: stroke,
|
|
134
|
+
strokeWidth: strokeWidth,
|
|
135
|
+
style: style,
|
|
136
|
+
transition: updateTransition
|
|
137
|
+
}) : /*#__PURE__*/_jsx("circle", {
|
|
138
|
+
className: className,
|
|
139
|
+
cx: pixelCoordinate.x,
|
|
140
|
+
cy: pixelCoordinate.y,
|
|
141
|
+
fill: color,
|
|
142
|
+
r: radius,
|
|
143
|
+
stroke: stroke,
|
|
144
|
+
strokeWidth: strokeWidth,
|
|
145
|
+
style: style
|
|
146
|
+
});
|
|
147
|
+
return /*#__PURE__*/_jsxs("g", {
|
|
142
148
|
"data-testid": testID,
|
|
143
149
|
opacity: isWithinDrawingArea ? opacity : 0,
|
|
144
|
-
children: /*#__PURE__*/_jsx(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
children: [isIdle && (animate ? /*#__PURE__*/_jsx(motion.g, {
|
|
151
|
+
animate: {
|
|
152
|
+
x: pixelCoordinate.x,
|
|
153
|
+
y: pixelCoordinate.y
|
|
154
|
+
},
|
|
155
|
+
initial: false,
|
|
156
|
+
transition: updateTransition,
|
|
157
|
+
children: pulseCircle
|
|
158
|
+
}) : /*#__PURE__*/_jsx("g", {
|
|
159
|
+
transform: "translate(".concat(pixelCoordinate.x, ", ").concat(pixelCoordinate.y, ")"),
|
|
160
|
+
children: pulseCircle
|
|
161
|
+
})), beaconCircle]
|
|
154
162
|
});
|
|
155
163
|
}));
|
|
@@ -38,6 +38,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
|
|
|
38
38
|
testID,
|
|
39
39
|
idlePulse,
|
|
40
40
|
beaconTransitions,
|
|
41
|
+
beaconStroke,
|
|
41
42
|
styles,
|
|
42
43
|
classNames
|
|
43
44
|
} = _ref;
|
|
@@ -175,6 +176,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
|
|
|
175
176
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
|
|
176
177
|
idlePulse: idlePulse,
|
|
177
178
|
seriesIds: filteredSeriesIds,
|
|
179
|
+
stroke: beaconStroke,
|
|
178
180
|
style: styles === null || styles === void 0 ? void 0 : styles.beacon,
|
|
179
181
|
testID: testID,
|
|
180
182
|
transitions: beaconTransitions
|
|
@@ -13,11 +13,13 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
|
|
|
13
13
|
isIdle,
|
|
14
14
|
BeaconComponent,
|
|
15
15
|
idlePulse,
|
|
16
|
+
animate,
|
|
16
17
|
transitions,
|
|
17
18
|
className,
|
|
18
19
|
style,
|
|
19
20
|
testID,
|
|
20
|
-
beaconRef
|
|
21
|
+
beaconRef,
|
|
22
|
+
stroke
|
|
21
23
|
} = _ref;
|
|
22
24
|
const {
|
|
23
25
|
getSeries,
|
|
@@ -71,6 +73,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
|
|
|
71
73
|
if (dataY === undefined) return null;
|
|
72
74
|
return /*#__PURE__*/_jsx(BeaconComponent, {
|
|
73
75
|
ref: beaconRef,
|
|
76
|
+
animate: animate,
|
|
74
77
|
className: className,
|
|
75
78
|
color: color,
|
|
76
79
|
dataX: dataX,
|
|
@@ -78,6 +81,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
|
|
|
78
81
|
idlePulse: idlePulse,
|
|
79
82
|
isIdle: isIdle,
|
|
80
83
|
seriesId: seriesId,
|
|
84
|
+
stroke: stroke,
|
|
81
85
|
style: style,
|
|
82
86
|
testID: testID,
|
|
83
87
|
transitions: transitions
|
|
@@ -91,7 +95,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
|
|
|
91
95
|
BeaconComponent = DefaultScrubberBeacon,
|
|
92
96
|
className,
|
|
93
97
|
style,
|
|
94
|
-
testID
|
|
98
|
+
testID,
|
|
99
|
+
stroke
|
|
95
100
|
} = _ref2;
|
|
96
101
|
const ScrubberBeaconRefs = useRefMap();
|
|
97
102
|
const {
|
|
@@ -101,7 +106,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
|
|
|
101
106
|
getXScale,
|
|
102
107
|
getXAxis,
|
|
103
108
|
dataLength,
|
|
104
|
-
series
|
|
109
|
+
series,
|
|
110
|
+
animate
|
|
105
111
|
} = useCartesianChartContext();
|
|
106
112
|
|
|
107
113
|
// Expose imperative handle with pulse method
|
|
@@ -152,6 +158,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
|
|
|
152
158
|
if (dataX === undefined || dataIndex === undefined) return null;
|
|
153
159
|
return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
|
|
154
160
|
BeaconComponent: BeaconComponent,
|
|
161
|
+
animate: animate,
|
|
155
162
|
beaconRef: createBeaconRef(s.id),
|
|
156
163
|
className: className,
|
|
157
164
|
dataIndex: dataIndex,
|
|
@@ -159,6 +166,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
|
|
|
159
166
|
idlePulse: idlePulse,
|
|
160
167
|
isIdle: isIdle,
|
|
161
168
|
seriesId: s.id,
|
|
169
|
+
stroke: stroke,
|
|
162
170
|
style: style,
|
|
163
171
|
testID: testID ? "".concat(testID !== null && testID !== void 0 ? testID : 'beacon', "-").concat(s.id) : undefined,
|
|
164
172
|
transitions: transitions
|
|
@@ -5,7 +5,7 @@ import { figma } from '@figma/code-connect';
|
|
|
5
5
|
import { Sparkline } from '../Sparkline';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev', {
|
|
8
|
-
imports: ["import { Sparkline } from '@coinbase/cds-web-visualization'
|
|
8
|
+
imports: ["import { Sparkline } from '@coinbase/cds-web-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
|
|
9
9
|
example: () => {
|
|
10
10
|
const data = [20, 30, 5, 45, 0];
|
|
11
11
|
// @ts-expect-error: useSparklinePath is not typed correctly
|
|
@@ -8,7 +8,7 @@ import { figma } from '@figma/code-connect';
|
|
|
8
8
|
import { SparklineInteractive } from '../SparklineInteractive';
|
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
10
|
figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14858&m=dev', {
|
|
11
|
-
imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization'
|
|
11
|
+
imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
|
|
12
12
|
props: {
|
|
13
13
|
compact: figma.boolean('compact'),
|
|
14
14
|
disableScrubbing: figma.boolean('scrubbing', {
|
package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js
CHANGED
|
@@ -9,7 +9,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
|
|
|
9
9
|
import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
11
|
figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
|
|
12
|
-
imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'
|
|
12
|
+
imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'", "import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
|
|
13
13
|
props: {
|
|
14
14
|
compact: figma.boolean('compact'),
|
|
15
15
|
disableScrubbing: figma.boolean('scrubbing', {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web-visualization",
|
|
3
|
-
"version": "3.4.0-beta.
|
|
3
|
+
"version": "3.4.0-beta.13",
|
|
4
4
|
"description": "Coinbase Design System - Web Sparkline",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
"CHANGELOG"
|
|
39
39
|
],
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@coinbase/cds-common": "^8.
|
|
41
|
+
"@coinbase/cds-common": "^8.38.1",
|
|
42
42
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
43
43
|
"@coinbase/cds-utils": "^2.3.5",
|
|
44
|
-
"@coinbase/cds-web": "^8.
|
|
44
|
+
"@coinbase/cds-web": "^8.38.1",
|
|
45
45
|
"react": "^18.3.1",
|
|
46
46
|
"react-dom": "^18.3.1"
|
|
47
47
|
},
|
|
@@ -58,11 +58,10 @@
|
|
|
58
58
|
"@babel/preset-env": "^7.28.0",
|
|
59
59
|
"@babel/preset-react": "^7.27.1",
|
|
60
60
|
"@babel/preset-typescript": "^7.27.1",
|
|
61
|
-
"@coinbase/cds-common": "^8.
|
|
61
|
+
"@coinbase/cds-common": "^8.38.1",
|
|
62
62
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
63
63
|
"@coinbase/cds-utils": "^2.3.5",
|
|
64
|
-
"@coinbase/cds-web": "^8.
|
|
65
|
-
"@figma/code-connect": "^1.3.4",
|
|
64
|
+
"@coinbase/cds-web": "^8.38.1",
|
|
66
65
|
"@linaria/core": "^3.0.0-beta.22",
|
|
67
66
|
"@types/react": "^18.3.12",
|
|
68
67
|
"@types/react-dom": "^18.3.1"
|