@coinbase/cds-web-visualization 3.4.0-beta.15 → 3.4.0-beta.17
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 +12 -0
- package/dts/chart/ChartProvider.d.ts +3 -0
- package/dts/chart/ChartProvider.d.ts.map +1 -1
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -1
- package/dts/chart/scrubber/Scrubber.d.ts +14 -2
- package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +7 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -1
- package/dts/chart/utils/scrubber.d.ts +2 -1
- package/dts/chart/utils/scrubber.d.ts.map +1 -1
- package/esm/chart/ChartProvider.js +1 -1
- package/esm/chart/scrubber/Scrubber.js +2 -0
- package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +4 -3
- package/esm/chart/utils/scrubber.js +9 -4
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,18 @@ 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.17 (2/4/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Add support preferred side for scrubber beacon label group. [[#366](https://github.com/coinbase/cds/pull/366)]
|
|
16
|
+
|
|
17
|
+
## 3.4.0-beta.16 (1/29/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🚀 Updates
|
|
20
|
+
|
|
21
|
+
- Export `CartesianChartContext`. [[#340](https://github.com/coinbase/cds/pull/340)]
|
|
22
|
+
|
|
11
23
|
## 3.4.0-beta.15 (1/27/2026 PST)
|
|
12
24
|
|
|
13
25
|
#### 🐞 Fixes
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { CartesianChartContextValue } from './utils/context';
|
|
2
|
+
export declare const CartesianChartContext: import('react').Context<
|
|
3
|
+
CartesianChartContextValue | undefined
|
|
4
|
+
>;
|
|
2
5
|
export declare const useCartesianChartContext: () => CartesianChartContextValue;
|
|
3
6
|
export declare const CartesianChartProvider: import('react').Provider<
|
|
4
7
|
CartesianChartContextValue | undefined
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAElE,eAAO,MAAM,qBAAqB,iEAEjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}
|
|
@@ -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;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;;;;;;;;;
|
|
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;;;;;;;;;cA6CxB,CAAC;aAIE,CAAC;wBAKN,CAAC;;;;;;;IAlEP;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAqLrB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { SharedProps } from '@coinbase/cds-common/types';
|
|
3
3
|
import { type Transition } from 'framer-motion';
|
|
4
4
|
import { type ReferenceLineBaseProps, type ReferenceLineLabelComponentProps } from '../line';
|
|
5
|
-
import type { ChartTextProps } from '../text';
|
|
5
|
+
import type { ChartTextChildren, ChartTextProps } from '../text';
|
|
6
6
|
import { type ChartInset, type Series } from '../utils';
|
|
7
7
|
import {
|
|
8
8
|
type ScrubberBeaconGroupBaseProps,
|
|
@@ -106,7 +106,7 @@ export type ScrubberBeaconLabelProps = Pick<Series, 'color'> &
|
|
|
106
106
|
/**
|
|
107
107
|
* Label for the series.
|
|
108
108
|
*/
|
|
109
|
-
label:
|
|
109
|
+
label: ChartTextChildren;
|
|
110
110
|
/**
|
|
111
111
|
* Id of the series.
|
|
112
112
|
*/
|
|
@@ -154,6 +154,12 @@ export type ScrubberBaseProps = SharedProps &
|
|
|
154
154
|
* Measured in pixels.
|
|
155
155
|
*/
|
|
156
156
|
beaconLabelHorizontalOffset?: ScrubberBeaconLabelGroupBaseProps['labelHorizontalOffset'];
|
|
157
|
+
/**
|
|
158
|
+
* Preferred side for beacon labels.
|
|
159
|
+
* @note labels will switch to the opposite side if there's not enough space on the preferred side.
|
|
160
|
+
* @default 'right'
|
|
161
|
+
*/
|
|
162
|
+
beaconLabelPreferredSide?: ScrubberBeaconLabelGroupBaseProps['labelPreferredSide'];
|
|
157
163
|
/**
|
|
158
164
|
* Label text displayed above the scrubber line.
|
|
159
165
|
* Can be a static string or a function that receives the current dataIndex.
|
|
@@ -258,6 +264,12 @@ export declare const Scrubber: React.MemoExoticComponent<
|
|
|
258
264
|
* Measured in pixels.
|
|
259
265
|
*/
|
|
260
266
|
beaconLabelHorizontalOffset?: ScrubberBeaconLabelGroupBaseProps['labelHorizontalOffset'];
|
|
267
|
+
/**
|
|
268
|
+
* Preferred side for beacon labels.
|
|
269
|
+
* @note labels will switch to the opposite side if there's not enough space on the preferred side.
|
|
270
|
+
* @default 'right'
|
|
271
|
+
*/
|
|
272
|
+
beaconLabelPreferredSide?: ScrubberBeaconLabelGroupBaseProps['labelPreferredSide'];
|
|
261
273
|
/**
|
|
262
274
|
* Label text displayed above the scrubber line.
|
|
263
275
|
* 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;
|
|
1
|
+
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { SharedProps } from '@coinbase/cds-common/types';
|
|
2
2
|
import type { ChartTextProps } from '../text';
|
|
3
|
+
import { type ScrubberLabelPosition } from '../utils/scrubber';
|
|
3
4
|
import type { ScrubberBeaconLabelComponent, ScrubberBeaconLabelProps } from './Scrubber';
|
|
4
5
|
export type ScrubberBeaconLabelGroupBaseProps = SharedProps & {
|
|
5
6
|
/**
|
|
@@ -20,6 +21,12 @@ export type ScrubberBeaconLabelGroupBaseProps = SharedProps & {
|
|
|
20
21
|
* Font style for the beacon labels.
|
|
21
22
|
*/
|
|
22
23
|
labelFont?: ChartTextProps['font'];
|
|
24
|
+
/**
|
|
25
|
+
* Preferred side for labels.
|
|
26
|
+
* @note labels will switch to the opposite side if there's not enough space on the preferred side.
|
|
27
|
+
* @default 'right'
|
|
28
|
+
*/
|
|
29
|
+
labelPreferredSide?: ScrubberLabelPosition;
|
|
23
30
|
};
|
|
24
31
|
export type ScrubberBeaconLabelGroupProps = ScrubberBeaconLabelGroupBaseProps & {
|
|
25
32
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAsDzF,MAAM,MAAM,iCAAiC,GAAG,WAAW,GAAG;IAC5D;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAiLpC,CAAC"}
|
|
@@ -11,13 +11,14 @@ export type LabelDimensions = {
|
|
|
11
11
|
};
|
|
12
12
|
/**
|
|
13
13
|
* Determines which side (left/right) to place scrubber labels based on available space.
|
|
14
|
-
*
|
|
14
|
+
* Honors the preferred side when there's enough space, otherwise switches to the opposite side.
|
|
15
15
|
*/
|
|
16
16
|
export declare const getLabelPosition: (
|
|
17
17
|
beaconX: number,
|
|
18
18
|
maxLabelWidth: number,
|
|
19
19
|
drawingArea: Rect,
|
|
20
20
|
xOffset?: number,
|
|
21
|
+
preferredSide?: ScrubberLabelPosition,
|
|
21
22
|
) => ScrubberLabelPosition;
|
|
22
23
|
type LabelDimension = {
|
|
23
24
|
seriesId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scrubber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,MAAM,EACf,eAAe,MAAM,EACrB,aAAa,IAAI,EACjB,UAAS,MAAW,
|
|
1
|
+
{"version":3,"file":"scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scrubber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,MAAM,EACf,eAAe,MAAM,EACrB,aAAa,IAAI,EACjB,UAAS,MAAW,EACpB,gBAAe,qBAA+B,KAC7C,qBAcF,CAAC;AAQF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,cAAc,EAAE,EAC5B,aAAa,IAAI,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,KACb,GAAG,CAAC,MAAM,EAAE,MAAM,CAoIpB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
|
-
const CartesianChartContext = /*#__PURE__*/createContext(undefined);
|
|
2
|
+
export const CartesianChartContext = /*#__PURE__*/createContext(undefined);
|
|
3
3
|
export const useCartesianChartContext = () => {
|
|
4
4
|
const context = useContext(CartesianChartContext);
|
|
5
5
|
if (!context) {
|
|
@@ -33,6 +33,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
|
|
|
33
33
|
overlayOffset = 2,
|
|
34
34
|
beaconLabelMinGap,
|
|
35
35
|
beaconLabelHorizontalOffset,
|
|
36
|
+
beaconLabelPreferredSide,
|
|
36
37
|
labelFont,
|
|
37
38
|
labelBoundsInset,
|
|
38
39
|
beaconLabelFont,
|
|
@@ -186,6 +187,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
|
|
|
186
187
|
labelFont: beaconLabelFont,
|
|
187
188
|
labelHorizontalOffset: beaconLabelHorizontalOffset,
|
|
188
189
|
labelMinGap: beaconLabelMinGap,
|
|
190
|
+
labelPreferredSide: beaconLabelPreferredSide,
|
|
189
191
|
labels: beaconLabels
|
|
190
192
|
})]
|
|
191
193
|
}));
|
|
@@ -50,6 +50,7 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
|
|
|
50
50
|
labelMinGap = 4,
|
|
51
51
|
labelHorizontalOffset = 16,
|
|
52
52
|
labelFont,
|
|
53
|
+
labelPreferredSide = 'right',
|
|
53
54
|
BeaconLabelComponent = DefaultScrubberBeaconLabel
|
|
54
55
|
} = _ref2;
|
|
55
56
|
const {
|
|
@@ -162,11 +163,11 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
|
|
|
162
163
|
});
|
|
163
164
|
}, [seriesInfo, dataIndex, dataX, xScale, labelDimensions, drawingArea, labelMinGap]);
|
|
164
165
|
const currentPosition = useMemo(() => {
|
|
165
|
-
if (!xScale || dataX === undefined) return
|
|
166
|
+
if (!xScale || dataX === undefined) return labelPreferredSide;
|
|
166
167
|
const pixelX = getPointOnScale(dataX, xScale);
|
|
167
168
|
const maxWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
|
|
168
|
-
return getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset);
|
|
169
|
-
}, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset]);
|
|
169
|
+
return getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset, labelPreferredSide);
|
|
170
|
+
}, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset, labelPreferredSide]);
|
|
170
171
|
return seriesInfo.map((info, index) => {
|
|
171
172
|
const labelInfo = labels.find(label => label.seriesId === info.seriesId);
|
|
172
173
|
if (!labelInfo) return;
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Determines which side (left/right) to place scrubber labels based on available space.
|
|
3
|
-
*
|
|
3
|
+
* Honors the preferred side when there's enough space, otherwise switches to the opposite side.
|
|
4
4
|
*/
|
|
5
5
|
export const getLabelPosition = function (beaconX, maxLabelWidth, drawingArea) {
|
|
6
6
|
let xOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 16;
|
|
7
|
+
let preferredSide = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'right';
|
|
7
8
|
if (drawingArea.width <= 0 || drawingArea.height <= 0) {
|
|
8
|
-
return
|
|
9
|
+
return preferredSide;
|
|
9
10
|
}
|
|
10
|
-
const availableRightSpace = drawingArea.x + drawingArea.width - beaconX;
|
|
11
11
|
const requiredSpace = maxLabelWidth + xOffset;
|
|
12
|
-
|
|
12
|
+
if (preferredSide === 'right') {
|
|
13
|
+
const availableSpace = drawingArea.x + drawingArea.width - beaconX;
|
|
14
|
+
return requiredSpace <= availableSpace ? 'right' : 'left';
|
|
15
|
+
}
|
|
16
|
+
const availableSpace = beaconX - drawingArea.x;
|
|
17
|
+
return requiredSpace <= availableSpace ? 'left' : 'right';
|
|
13
18
|
};
|
|
14
19
|
/**
|
|
15
20
|
* Calculates Y positions for all labels avoiding overlaps while maintaining order.
|
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.17",
|
|
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.41.0",
|
|
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.41.0",
|
|
45
45
|
"react": "^18.3.1",
|
|
46
46
|
"react-dom": "^18.3.1"
|
|
47
47
|
},
|
|
@@ -58,10 +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.41.0",
|
|
62
62
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
63
63
|
"@coinbase/cds-utils": "^2.3.5",
|
|
64
|
-
"@coinbase/cds-web": "^8.
|
|
64
|
+
"@coinbase/cds-web": "^8.41.0",
|
|
65
65
|
"@linaria/core": "^3.0.0-beta.22",
|
|
66
66
|
"@types/react": "^18.3.12",
|
|
67
67
|
"@types/react-dom": "^18.3.1"
|