@coinbase/cds-web 9.12.3 → 9.14.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 +10 -0
- package/dts/visualizations/chart/axis/Axis.d.ts +11 -0
- package/dts/visualizations/chart/axis/Axis.d.ts.map +1 -1
- package/dts/visualizations/chart/axis/AxisTickLabelOverflowMask.d.ts +15 -0
- package/dts/visualizations/chart/axis/AxisTickLabelOverflowMask.d.ts.map +1 -0
- package/dts/visualizations/chart/axis/XAxis.d.ts.map +1 -1
- package/dts/visualizations/chart/axis/YAxis.d.ts.map +1 -1
- package/dts/visualizations/chart/axis/index.d.ts +1 -0
- package/dts/visualizations/chart/axis/index.d.ts.map +1 -1
- package/dts/visualizations/chart/line/ReferenceLine.d.ts +1 -0
- package/dts/visualizations/chart/line/ReferenceLine.d.ts.map +1 -1
- package/dts/visualizations/chart/text/ChartText.d.ts +19 -4
- package/dts/visualizations/chart/text/ChartText.d.ts.map +1 -1
- package/esm/visualizations/chart/axis/AxisTickLabelOverflowMask.js +99 -0
- package/esm/visualizations/chart/axis/XAxis.js +20 -7
- package/esm/visualizations/chart/axis/YAxis.js +20 -7
- package/esm/visualizations/chart/axis/index.js +1 -0
- package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js +1 -1
- package/esm/visualizations/chart/text/ChartText.js +26 -21
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.14.0 (8/11/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Feat: support different tick label overflow- #835. [[#835](https://github.com/coinbase/cds/pull/835)]
|
|
16
|
+
|
|
17
|
+
## 9.13.0 ((8/11/2026, 09:52 AM PST))
|
|
18
|
+
|
|
19
|
+
This is an artificial version bump with no new change.
|
|
20
|
+
|
|
11
21
|
## 9.12.3 ((8/10/2026, 09:17 AM PST))
|
|
12
22
|
|
|
13
23
|
This is an artificial version bump with no new change.
|
|
@@ -29,6 +29,7 @@ export type AxisTickLabelComponentProps = Pick<
|
|
|
29
29
|
| 'inset'
|
|
30
30
|
| 'background'
|
|
31
31
|
| 'borderRadius'
|
|
32
|
+
| 'repositionAxes'
|
|
32
33
|
| 'disableRepositioning'
|
|
33
34
|
| 'bounds'
|
|
34
35
|
| 'styles'
|
|
@@ -39,6 +40,7 @@ export type AxisTickLabelComponentProps = Pick<
|
|
|
39
40
|
| 'style'
|
|
40
41
|
>;
|
|
41
42
|
export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
|
|
43
|
+
export type AxisTickLabelOverflow = 'reposition' | 'fade' | 'visible';
|
|
42
44
|
export type AxisBaseProps = SharedProps & {
|
|
43
45
|
/**
|
|
44
46
|
* Placement of grid lines relative to each band.
|
|
@@ -138,6 +140,15 @@ export type AxisBaseProps = SharedProps & {
|
|
|
138
140
|
* Prevents the step from being larger than this value.
|
|
139
141
|
*/
|
|
140
142
|
tickMaxStep?: number;
|
|
143
|
+
/**
|
|
144
|
+
* How tick labels behave at the chart edges.
|
|
145
|
+
* - `reposition` — nudge labels to stay in bounds on both axes.
|
|
146
|
+
* - `fade` — add a fade effect to the labels at the edges (vertical for y-axis, horizontal for x-axis),
|
|
147
|
+
* reposition on opposite axis (horizontal for y-axis, vertical for x-axis).
|
|
148
|
+
* - `visible` — leave labels at their natural positions with no fading.
|
|
149
|
+
* @default 'reposition'
|
|
150
|
+
*/
|
|
151
|
+
tickLabelOverflow?: AxisTickLabelOverflow;
|
|
141
152
|
};
|
|
142
153
|
export type AxisProps = AxisBaseProps & {
|
|
143
154
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,cAAc,oFAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAI9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,EAAE,UAG3C,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,QAAQ,GACR,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,OAAO,GACP,UAAU,GACV,OAAO,GACP,YAAY,GACZ,cAAc,GACd,sBAAsB,GACtB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,WAAW,GACX,OAAO,CACV,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/Axis.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type PropsWithChildren } from 'react';
|
|
2
|
+
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
|
|
3
|
+
export type AxisTickLabelOverflowMaskProps = SharedProps &
|
|
4
|
+
PropsWithChildren<{
|
|
5
|
+
/**
|
|
6
|
+
* Fade along the chart edges for this axis (`x`: left/right, `y`: top/bottom).
|
|
7
|
+
*/
|
|
8
|
+
axis: 'x' | 'y';
|
|
9
|
+
}>;
|
|
10
|
+
/**
|
|
11
|
+
* Masks tick-label children so they fade at the chart/SVG outer edges
|
|
12
|
+
* without painting over other axes.
|
|
13
|
+
*/
|
|
14
|
+
export declare const AxisTickLabelOverflowMask: import('react').NamedExoticComponent<AxisTickLabelOverflowMaskProps>;
|
|
15
|
+
//# sourceMappingURL=AxisTickLabelOverflowMask.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AxisTickLabelOverflowMask.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/AxisTickLabelOverflowMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,MAAM,MAAM,8BAA8B,GAAG,WAAW,GACtD,iBAAiB,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;CACjB,CAAC,CAAC;AAEL;;;GAGG;AACH,eAAO,MAAM,yBAAyB,sEAoErC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAchB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDA2WjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAchB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAmWjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/line/ReferenceLine.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/line/ReferenceLine.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,6 +24,10 @@ export type TextHorizontalAlignment = 'left' | 'center' | 'right';
|
|
|
24
24
|
* Vertical alignment options for chart text.
|
|
25
25
|
*/
|
|
26
26
|
export type TextVerticalAlignment = 'top' | 'middle' | 'bottom';
|
|
27
|
+
/**
|
|
28
|
+
* Which axes ChartText may nudge labels along to stay in bounds.
|
|
29
|
+
*/
|
|
30
|
+
export type ChartTextRepositionAxes = 'x' | 'y' | 'both' | 'none';
|
|
27
31
|
export type ChartTextBaseProps = SharedProps & {
|
|
28
32
|
/**
|
|
29
33
|
* The text color.
|
|
@@ -37,11 +41,22 @@ export type ChartTextBaseProps = SharedProps & {
|
|
|
37
41
|
background?: string;
|
|
38
42
|
/**
|
|
39
43
|
* Whether the text should have an elevated appearance with a shadow.
|
|
40
|
-
* @default false
|
|
41
44
|
*/
|
|
42
45
|
elevated?: boolean;
|
|
43
46
|
/**
|
|
44
|
-
*
|
|
47
|
+
* Which axes to reposition labels on when they would overflow bounds.
|
|
48
|
+
* @default 'both'
|
|
49
|
+
*/
|
|
50
|
+
repositionAxes?: ChartTextRepositionAxes;
|
|
51
|
+
/**
|
|
52
|
+
* Disables automatic repositioning to fit within bounds.
|
|
53
|
+
*
|
|
54
|
+
* @note `true` is equivalent to `repositionAxes='none'`, `false`/omit equals `repositionAxes='both'`.
|
|
55
|
+
*
|
|
56
|
+
* @deprecated Use `repositionAxes` instead
|
|
57
|
+
*
|
|
58
|
+
* This will be removed in a future major release.
|
|
59
|
+
* @deprecationExpectedRemoval v11
|
|
45
60
|
*/
|
|
46
61
|
disableRepositioning?: boolean;
|
|
47
62
|
/**
|
|
@@ -82,12 +97,12 @@ export type ChartTextProps = ChartTextBaseProps &
|
|
|
82
97
|
children: ChartTextChildren;
|
|
83
98
|
/**
|
|
84
99
|
* The desired x position in SVG pixels.
|
|
85
|
-
* @note Text will be automatically positioned to fit within bounds
|
|
100
|
+
* @note Text will be automatically positioned to fit within bounds based on `repositionAxes`.
|
|
86
101
|
*/
|
|
87
102
|
x: number;
|
|
88
103
|
/**
|
|
89
104
|
* The desired y position in SVG pixels.
|
|
90
|
-
* @note Text will be automatically positioned to fit within bounds
|
|
105
|
+
* @note Text will be automatically positioned to fit within bounds based on `repositionAxes`.
|
|
91
106
|
*/
|
|
92
107
|
y: number;
|
|
93
108
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,gBAAgB,CAAC;AAGhE,KAAK,2BAA2B,GAC5B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAC5D,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,MAAM,GACN,IAAI,GACJ,SAAS,GACT,2BAA2B,GAC3B,2BAA2B,EAAE,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB
|
|
1
|
+
{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { memo, useId } from 'react';
|
|
2
|
+
import { useCartesianChartContext } from '../ChartProvider';
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
const axisTickLabelOverflowFadeWidth = 30;
|
|
5
|
+
/**
|
|
6
|
+
* Masks tick-label children so they fade at the chart/SVG outer edges
|
|
7
|
+
* without painting over other axes.
|
|
8
|
+
*/
|
|
9
|
+
export const AxisTickLabelOverflowMask = /*#__PURE__*/memo(_ref => {
|
|
10
|
+
let {
|
|
11
|
+
axis,
|
|
12
|
+
children,
|
|
13
|
+
testID
|
|
14
|
+
} = _ref;
|
|
15
|
+
const {
|
|
16
|
+
width: chartWidth,
|
|
17
|
+
height: chartHeight
|
|
18
|
+
} = useCartesianChartContext();
|
|
19
|
+
const reactId = useId();
|
|
20
|
+
const maskId = "".concat(reactId, "-mask");
|
|
21
|
+
const fadeWidth = axisTickLabelOverflowFadeWidth;
|
|
22
|
+
const isXAxis = axis === 'x';
|
|
23
|
+
if (chartWidth <= 0 || chartHeight <= 0) {
|
|
24
|
+
return children;
|
|
25
|
+
}
|
|
26
|
+
const fadeX = Math.min(fadeWidth, chartWidth / 2) / chartWidth;
|
|
27
|
+
const fadeY = Math.min(fadeWidth, chartHeight / 2) / chartHeight;
|
|
28
|
+
return /*#__PURE__*/_jsxs("g", {
|
|
29
|
+
"data-testid": testID,
|
|
30
|
+
children: [/*#__PURE__*/_jsxs("defs", {
|
|
31
|
+
children: [isXAxis ? /*#__PURE__*/_jsxs("linearGradient", {
|
|
32
|
+
gradientUnits: "userSpaceOnUse",
|
|
33
|
+
id: "".concat(reactId, "-fade"),
|
|
34
|
+
x1: 0,
|
|
35
|
+
x2: chartWidth,
|
|
36
|
+
y1: 0,
|
|
37
|
+
y2: 0,
|
|
38
|
+
children: [/*#__PURE__*/_jsx("stop", {
|
|
39
|
+
offset: 0,
|
|
40
|
+
stopColor: "#fff",
|
|
41
|
+
stopOpacity: 0
|
|
42
|
+
}), /*#__PURE__*/_jsx("stop", {
|
|
43
|
+
offset: fadeX,
|
|
44
|
+
stopColor: "#fff",
|
|
45
|
+
stopOpacity: 1
|
|
46
|
+
}), /*#__PURE__*/_jsx("stop", {
|
|
47
|
+
offset: 1 - fadeX,
|
|
48
|
+
stopColor: "#fff",
|
|
49
|
+
stopOpacity: 1
|
|
50
|
+
}), /*#__PURE__*/_jsx("stop", {
|
|
51
|
+
offset: 1,
|
|
52
|
+
stopColor: "#fff",
|
|
53
|
+
stopOpacity: 0
|
|
54
|
+
})]
|
|
55
|
+
}) : /*#__PURE__*/_jsxs("linearGradient", {
|
|
56
|
+
gradientUnits: "userSpaceOnUse",
|
|
57
|
+
id: "".concat(reactId, "-fade"),
|
|
58
|
+
x1: 0,
|
|
59
|
+
x2: 0,
|
|
60
|
+
y1: 0,
|
|
61
|
+
y2: chartHeight,
|
|
62
|
+
children: [/*#__PURE__*/_jsx("stop", {
|
|
63
|
+
offset: 0,
|
|
64
|
+
stopColor: "#fff",
|
|
65
|
+
stopOpacity: 0
|
|
66
|
+
}), /*#__PURE__*/_jsx("stop", {
|
|
67
|
+
offset: fadeY,
|
|
68
|
+
stopColor: "#fff",
|
|
69
|
+
stopOpacity: 1
|
|
70
|
+
}), /*#__PURE__*/_jsx("stop", {
|
|
71
|
+
offset: 1 - fadeY,
|
|
72
|
+
stopColor: "#fff",
|
|
73
|
+
stopOpacity: 1
|
|
74
|
+
}), /*#__PURE__*/_jsx("stop", {
|
|
75
|
+
offset: 1,
|
|
76
|
+
stopColor: "#fff",
|
|
77
|
+
stopOpacity: 0
|
|
78
|
+
})]
|
|
79
|
+
}), /*#__PURE__*/_jsx("mask", {
|
|
80
|
+
height: chartHeight,
|
|
81
|
+
id: maskId,
|
|
82
|
+
maskUnits: "userSpaceOnUse",
|
|
83
|
+
width: chartWidth,
|
|
84
|
+
x: 0,
|
|
85
|
+
y: 0,
|
|
86
|
+
children: /*#__PURE__*/_jsx("rect", {
|
|
87
|
+
fill: "url(#".concat(reactId, "-fade)"),
|
|
88
|
+
height: chartHeight,
|
|
89
|
+
width: chartWidth,
|
|
90
|
+
x: 0,
|
|
91
|
+
y: 0
|
|
92
|
+
})
|
|
93
|
+
})]
|
|
94
|
+
}), /*#__PURE__*/_jsx("g", {
|
|
95
|
+
mask: "url(#".concat(maskId, ")"),
|
|
96
|
+
children: children
|
|
97
|
+
})]
|
|
98
|
+
});
|
|
99
|
+
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
|
|
1
|
+
const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -19,6 +19,7 @@ import { lineToPath } from '../utils/path';
|
|
|
19
19
|
import { getPointOnScale } from '../utils/point';
|
|
20
20
|
import { isCategoricalScale } from '../utils/scale';
|
|
21
21
|
import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
|
|
22
|
+
import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
|
|
22
23
|
import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
|
|
23
24
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
25
|
const AXIS_HEIGHT = 32;
|
|
@@ -54,7 +55,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
|
|
|
54
55
|
height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
|
|
55
56
|
testID = 'x-axis',
|
|
56
57
|
bandGridLinePlacement = 'edges',
|
|
57
|
-
bandTickMarkPlacement = 'middle'
|
|
58
|
+
bandTickMarkPlacement = 'middle',
|
|
59
|
+
tickLabelOverflow = 'reposition'
|
|
58
60
|
} = _ref,
|
|
59
61
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
60
62
|
const registrationId = useId();
|
|
@@ -68,6 +70,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
|
|
|
68
70
|
getAxisBounds,
|
|
69
71
|
drawingArea
|
|
70
72
|
} = useCartesianChartContext();
|
|
73
|
+
const fadeTickLabels = tickLabelOverflow === 'fade';
|
|
71
74
|
const xScale = getXScale(axisId);
|
|
72
75
|
const xAxis = getXAxis(axisId);
|
|
73
76
|
const axisBounds = getAxisBounds(registrationId);
|
|
@@ -201,11 +204,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
|
|
|
201
204
|
color: 'var(--color-fgMuted)',
|
|
202
205
|
verticalAlignment: 'middle',
|
|
203
206
|
style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
|
|
204
|
-
horizontalAlignment: 'center'
|
|
207
|
+
horizontalAlignment: 'center',
|
|
208
|
+
repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'y' : 'both'
|
|
205
209
|
}
|
|
206
210
|
};
|
|
207
211
|
});
|
|
208
|
-
}, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
|
|
212
|
+
}, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel, fadeTickLabels, tickLabelOverflow]);
|
|
209
213
|
if (!xScale || !axisBounds || !drawingArea) return;
|
|
210
214
|
const labelX = axisBounds.x + axisBounds.width / 2;
|
|
211
215
|
const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
|
|
@@ -251,12 +255,21 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
|
|
|
251
255
|
style: styles === null || styles === void 0 ? void 0 : styles.gridLine
|
|
252
256
|
}, key);
|
|
253
257
|
})
|
|
254
|
-
}), chartTextData && /*#__PURE__*/_jsx(
|
|
258
|
+
}), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
|
|
259
|
+
axis: "x",
|
|
260
|
+
testID: "".concat(testID, "-tick-label-overflow"),
|
|
261
|
+
children: /*#__PURE__*/_jsx(ChartTextGroup, {
|
|
262
|
+
prioritizeEndLabels: true,
|
|
263
|
+
LabelComponent: TickLabelComponent,
|
|
264
|
+
labels: chartTextData,
|
|
265
|
+
minGap: minTickLabelGap
|
|
266
|
+
})
|
|
267
|
+
}) : /*#__PURE__*/_jsx(ChartTextGroup, {
|
|
255
268
|
prioritizeEndLabels: true,
|
|
256
269
|
LabelComponent: TickLabelComponent,
|
|
257
270
|
labels: chartTextData,
|
|
258
271
|
minGap: minTickLabelGap
|
|
259
|
-
}), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
|
|
272
|
+
})), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
|
|
260
273
|
"data-testid": "".concat(testID, "-tick-marks"),
|
|
261
274
|
children: tickMarkPositions.map(_ref3 => {
|
|
262
275
|
let {
|
|
@@ -303,9 +316,9 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
|
|
|
303
316
|
strokeWidth: 1,
|
|
304
317
|
style: styles === null || styles === void 0 ? void 0 : styles.line
|
|
305
318
|
}), label && /*#__PURE__*/_jsx(ChartText, {
|
|
306
|
-
disableRepositioning: true,
|
|
307
319
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
|
|
308
320
|
horizontalAlignment: "center",
|
|
321
|
+
repositionAxes: "none",
|
|
309
322
|
style: styles === null || styles === void 0 ? void 0 : styles.label,
|
|
310
323
|
testID: "".concat(testID, "-label"),
|
|
311
324
|
verticalAlignment: "middle",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
|
|
1
|
+
const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "testID", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -19,6 +19,7 @@ import { lineToPath } from '../utils/path';
|
|
|
19
19
|
import { getPointOnScale } from '../utils/point';
|
|
20
20
|
import { isCategoricalScale } from '../utils/scale';
|
|
21
21
|
import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
|
|
22
|
+
import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
|
|
22
23
|
import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
|
|
23
24
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
25
|
const AXIS_WIDTH = 44;
|
|
@@ -52,7 +53,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
|
|
|
52
53
|
width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
|
|
53
54
|
testID = 'y-axis',
|
|
54
55
|
bandGridLinePlacement = 'edges',
|
|
55
|
-
bandTickMarkPlacement = 'middle'
|
|
56
|
+
bandTickMarkPlacement = 'middle',
|
|
57
|
+
tickLabelOverflow = 'reposition'
|
|
56
58
|
} = _ref,
|
|
57
59
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
58
60
|
const registrationId = useId();
|
|
@@ -66,6 +68,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
|
|
|
66
68
|
getAxisBounds,
|
|
67
69
|
drawingArea
|
|
68
70
|
} = useCartesianChartContext();
|
|
71
|
+
const fadeTickLabels = tickLabelOverflow === 'fade';
|
|
69
72
|
const yScale = getYScale(axisId);
|
|
70
73
|
const yAxis = getYAxis(axisId);
|
|
71
74
|
const axisBounds = getAxisBounds(registrationId);
|
|
@@ -195,11 +198,12 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
|
|
|
195
198
|
color: 'var(--color-fgMuted)',
|
|
196
199
|
verticalAlignment: 'middle',
|
|
197
200
|
style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
|
|
198
|
-
horizontalAlignment: position === 'left' ? 'right' : 'left'
|
|
201
|
+
horizontalAlignment: position === 'left' ? 'right' : 'left',
|
|
202
|
+
repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'x' : 'both'
|
|
199
203
|
}
|
|
200
204
|
};
|
|
201
205
|
});
|
|
202
|
-
}, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
|
|
206
|
+
}, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel, fadeTickLabels, tickLabelOverflow]);
|
|
203
207
|
if (!yScale || !axisBounds || !drawingArea) return;
|
|
204
208
|
const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
|
|
205
209
|
const labelY = axisBounds.y + axisBounds.height / 2;
|
|
@@ -245,12 +249,21 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
|
|
|
245
249
|
style: styles === null || styles === void 0 ? void 0 : styles.gridLine
|
|
246
250
|
}, key);
|
|
247
251
|
})
|
|
248
|
-
}), chartTextData && /*#__PURE__*/_jsx(
|
|
252
|
+
}), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
|
|
253
|
+
axis: "y",
|
|
254
|
+
testID: "".concat(testID, "-tick-label-overflow"),
|
|
255
|
+
children: /*#__PURE__*/_jsx(ChartTextGroup, {
|
|
256
|
+
prioritizeEndLabels: true,
|
|
257
|
+
LabelComponent: TickLabelComponent,
|
|
258
|
+
labels: chartTextData,
|
|
259
|
+
minGap: minTickLabelGap
|
|
260
|
+
})
|
|
261
|
+
}) : /*#__PURE__*/_jsx(ChartTextGroup, {
|
|
249
262
|
prioritizeEndLabels: true,
|
|
250
263
|
LabelComponent: TickLabelComponent,
|
|
251
264
|
labels: chartTextData,
|
|
252
265
|
minGap: minTickLabelGap
|
|
253
|
-
}), showTickMarks && /*#__PURE__*/_jsx("g", {
|
|
266
|
+
})), showTickMarks && /*#__PURE__*/_jsx("g", {
|
|
254
267
|
"data-testid": "".concat(testID, "-tick-marks"),
|
|
255
268
|
children: tickMarkPositions.map(_ref3 => {
|
|
256
269
|
let {
|
|
@@ -303,9 +316,9 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
|
|
|
303
316
|
transform: "rotate(".concat(position === 'left' ? -90 : 90, "deg)")
|
|
304
317
|
},
|
|
305
318
|
children: /*#__PURE__*/_jsx(ChartText, {
|
|
306
|
-
disableRepositioning: true,
|
|
307
319
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
|
|
308
320
|
horizontalAlignment: "center",
|
|
321
|
+
repositionAxes: "none",
|
|
309
322
|
style: styles === null || styles === void 0 ? void 0 : styles.label,
|
|
310
323
|
testID: "".concat(testID, "-label-text"),
|
|
311
324
|
verticalAlignment: "middle",
|
|
@@ -41,13 +41,13 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
|
|
|
41
41
|
initial: false,
|
|
42
42
|
transition: transition,
|
|
43
43
|
children: /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
|
|
44
|
-
disableRepositioning: true,
|
|
45
44
|
background: background,
|
|
46
45
|
borderRadius: borderRadius,
|
|
47
46
|
color: color,
|
|
48
47
|
elevated: elevated,
|
|
49
48
|
font: font,
|
|
50
49
|
inset: inset,
|
|
50
|
+
repositionAxes: "none",
|
|
51
51
|
verticalAlignment: verticalAlignment,
|
|
52
52
|
y: transition ? 0 : y
|
|
53
53
|
}, chartTextProps), {}, {
|
|
@@ -23,6 +23,10 @@ import { accessoryFadeTransitionDuration } from '../utils/transition';
|
|
|
23
23
|
/**
|
|
24
24
|
* Vertical alignment options for chart text.
|
|
25
25
|
*/
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Which axes ChartText may nudge labels along to stay in bounds.
|
|
29
|
+
*/
|
|
26
30
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
31
|
/**
|
|
28
32
|
* Get text anchor based on horizontal alignment.
|
|
@@ -60,7 +64,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
|
|
|
60
64
|
verticalAlignment = 'middle',
|
|
61
65
|
dx,
|
|
62
66
|
dy,
|
|
63
|
-
disableRepositioning,
|
|
67
|
+
disableRepositioning = false,
|
|
68
|
+
repositionAxes = disableRepositioning ? 'none' : 'both',
|
|
64
69
|
bounds,
|
|
65
70
|
opacity,
|
|
66
71
|
testID,
|
|
@@ -92,7 +97,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
|
|
|
92
97
|
}), [chartWidth, chartHeight]);
|
|
93
98
|
const textRef = useRef(null);
|
|
94
99
|
const [textBBox, setTextBBox] = useState(null);
|
|
95
|
-
const isDimensionsReady =
|
|
100
|
+
const isDimensionsReady = repositionAxes === 'none' || textRef.current !== null;
|
|
96
101
|
const backgroundRectDimensions = useMemo(() => {
|
|
97
102
|
if (!textBBox) {
|
|
98
103
|
return null;
|
|
@@ -106,12 +111,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
|
|
|
106
111
|
};
|
|
107
112
|
}, [textBBox, insetInput]);
|
|
108
113
|
const overflowAmount = useMemo(() => {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
x: 0,
|
|
112
|
-
y: 0
|
|
113
|
-
};
|
|
114
|
-
}
|
|
114
|
+
const repositionX = repositionAxes === 'both' || repositionAxes === 'x';
|
|
115
|
+
const repositionY = repositionAxes === 'both' || repositionAxes === 'y';
|
|
115
116
|
const parentBounds = bounds !== null && bounds !== void 0 ? bounds : fullChartBounds;
|
|
116
117
|
if (!backgroundRectDimensions || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
|
|
117
118
|
return {
|
|
@@ -119,23 +120,27 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
|
|
|
119
120
|
y: 0
|
|
120
121
|
};
|
|
121
122
|
}
|
|
122
|
-
let
|
|
123
|
-
let
|
|
124
|
-
if (
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
123
|
+
let nextX = 0;
|
|
124
|
+
let nextY = 0;
|
|
125
|
+
if (repositionX) {
|
|
126
|
+
if (backgroundRectDimensions.x < parentBounds.x) {
|
|
127
|
+
nextX = parentBounds.x - backgroundRectDimensions.x;
|
|
128
|
+
} else if (backgroundRectDimensions.x + backgroundRectDimensions.width > parentBounds.x + parentBounds.width) {
|
|
129
|
+
nextX = parentBounds.x + parentBounds.width - (backgroundRectDimensions.x + backgroundRectDimensions.width);
|
|
130
|
+
}
|
|
128
131
|
}
|
|
129
|
-
if (
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
132
|
+
if (repositionY) {
|
|
133
|
+
if (backgroundRectDimensions.y < parentBounds.y) {
|
|
134
|
+
nextY = parentBounds.y - backgroundRectDimensions.y;
|
|
135
|
+
} else if (backgroundRectDimensions.y + backgroundRectDimensions.height > parentBounds.y + parentBounds.height) {
|
|
136
|
+
nextY = parentBounds.y + parentBounds.height - (backgroundRectDimensions.y + backgroundRectDimensions.height);
|
|
137
|
+
}
|
|
133
138
|
}
|
|
134
139
|
return {
|
|
135
|
-
x,
|
|
136
|
-
y
|
|
140
|
+
x: nextX,
|
|
141
|
+
y: nextY
|
|
137
142
|
};
|
|
138
|
-
}, [backgroundRectDimensions, fullChartBounds, bounds,
|
|
143
|
+
}, [backgroundRectDimensions, fullChartBounds, bounds, repositionAxes]);
|
|
139
144
|
|
|
140
145
|
// Compose the final reported rect including any overflow translation applied
|
|
141
146
|
const reportedRect = useMemo(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.14.0",
|
|
4
4
|
"description": "Coinbase Design System - Web",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
"react-dom": "^18.0.0 || ~19.1.2"
|
|
228
228
|
},
|
|
229
229
|
"dependencies": {
|
|
230
|
-
"@coinbase/cds-common": "^9.
|
|
230
|
+
"@coinbase/cds-common": "^9.14.0",
|
|
231
231
|
"@coinbase/cds-icons": "^5.21.0",
|
|
232
232
|
"@coinbase/cds-illustrations": "^4.47.0",
|
|
233
233
|
"@coinbase/cds-lottie-files": "^3.3.4",
|