@coinbase/cds-web-visualization 3.4.0-beta.10 → 3.4.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/chart/axis/Axis.d.ts +17 -18
  3. package/dts/chart/axis/Axis.d.ts.map +1 -1
  4. package/dts/chart/axis/XAxis.d.ts.map +1 -1
  5. package/dts/chart/axis/YAxis.d.ts +1 -1
  6. package/dts/chart/axis/YAxis.d.ts.map +1 -1
  7. package/dts/chart/line/Line.d.ts +27 -10
  8. package/dts/chart/line/Line.d.ts.map +1 -1
  9. package/dts/chart/text/ChartText.d.ts.map +1 -1
  10. package/dts/chart/utils/axis.d.ts +25 -1
  11. package/dts/chart/utils/axis.d.ts.map +1 -1
  12. package/dts/chart/utils/point.d.ts +11 -7
  13. package/dts/chart/utils/point.d.ts.map +1 -1
  14. package/dts/chart/utils/scale.d.ts +11 -0
  15. package/dts/chart/utils/scale.d.ts.map +1 -1
  16. package/esm/chart/axis/Axis.js +3 -17
  17. package/esm/chart/axis/XAxis.js +137 -40
  18. package/esm/chart/axis/YAxis.js +135 -33
  19. package/esm/chart/text/ChartText.js +2 -1
  20. package/esm/chart/utils/axis.js +45 -29
  21. package/esm/chart/utils/point.js +30 -12
  22. package/esm/chart/utils/scale.js +13 -2
  23. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ 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.11 (1/7/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Allow customization of axis tick mark and grid line alignment in band scale. [[#291](https://github.com/coinbase/cds/pull/291)]
16
+
11
17
  ## 3.4.0-beta.10 (1/6/2026 PST)
12
18
 
13
19
  #### 🐞 Fixes
package/dts/chart/axis/Axis.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import type React from 'react';
2
2
  import type { SharedProps } from '@coinbase/cds-common/types';
3
+ import type { Transition } from 'framer-motion';
3
4
  import { type LineComponent } from '../line';
4
5
  import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
6
+ import { type AxisBandPlacement } from '../utils';
5
7
  export declare const axisLineStyles =
6
8
  '\n stroke: var(--color-fg);\n stroke-linecap: square;\n stroke-width: 1px;\n';
7
9
  export declare const axisTickMarkStyles =
@@ -9,24 +11,7 @@ export declare const axisTickMarkStyles =
9
11
  /**
10
12
  * Animation variants for axis elements - updates (used for both grid lines and tick labels)
11
13
  */
12
- export declare const axisUpdateAnimationVariants: {
13
- initial: {
14
- opacity: number;
15
- };
16
- animate: {
17
- opacity: number;
18
- transition: {
19
- duration: number;
20
- delay: number;
21
- };
22
- };
23
- exit: {
24
- opacity: number;
25
- transition: {
26
- duration: number;
27
- };
28
- };
29
- };
14
+ export declare const axisUpdateAnimationTransition: Transition;
30
15
  export type AxisTickLabelComponentProps = Pick<
31
16
  ChartTextProps,
32
17
  | 'x'
@@ -55,6 +40,20 @@ export type AxisTickLabelComponentProps = Pick<
55
40
  >;
56
41
  export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
57
42
  export type AxisBaseProps = SharedProps & {
43
+ /**
44
+ * Placement of grid lines relative to each band.
45
+ * Options: 'start', 'middle', 'end', 'edges'
46
+ * @note This property only applies to band scales.
47
+ * @default 'edges'
48
+ */
49
+ bandGridLinePlacement?: AxisBandPlacement;
50
+ /**
51
+ * Placement of tick marks relative to each band.
52
+ * Options: 'start', 'middle', 'end', 'edges'
53
+ * @note This property only applies to band scales.
54
+ * @default 'middle'
55
+ */
56
+ bandTickMarkPlacement?: AxisBandPlacement;
58
57
  /**
59
58
  * Label text to display for the axis.
60
59
  */
package/dts/chart/axis/Axis.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"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"}
package/dts/chart/axis/XAxis.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;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,kDAgQjB,CAAC"}
1
+ {"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAmBA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;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,kDAmVjB,CAAC"}
package/dts/chart/axis/YAxis.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { AxisBaseProps, AxisProps } from './Axis';
1
+ import { type AxisBaseProps, type AxisProps } from './Axis';
2
2
  export type YAxisBaseProps = AxisBaseProps & {
3
3
  /**
4
4
  * The ID of the axis to render.
package/dts/chart/axis/YAxis.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAcvD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;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,kDA0PjB,CAAC"}
1
+ {"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAmBA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;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,kDAgVjB,CAAC"}
package/dts/chart/line/Line.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { SVGProps } from 'react';
3
3
  import type { SharedProps } from '@coinbase/cds-common/types';
4
4
  import { type Transition } from 'framer-motion';
5
5
  import { type AreaComponent } from '../area/Area';
6
+ import type { PathProps } from '../Path';
6
7
  import { type PointBaseProps, type PointProps } from '../point';
7
8
  import { type ChartPathCurveType, type GradientDefinition } from '../utils';
8
9
  export type LineBaseProps = SharedProps & {
@@ -102,21 +103,37 @@ export type LineProps = LineBaseProps & {
102
103
  * Passed through to Point components rendered via points.
103
104
  */
104
105
  onPointClick?: PointProps['onClick'];
105
- };
106
- export type LineComponentProps = Pick<
107
- LineProps,
108
- 'stroke' | 'strokeOpacity' | 'strokeWidth' | 'gradient' | 'animate' | 'transition'
109
- > & {
110
106
  /**
111
- * Path of the line
107
+ * Custom style for the line.
112
108
  */
113
- d: SVGProps<SVGPathElement>['d'];
109
+ style?: React.CSSProperties;
114
110
  /**
115
- * ID of the y-axis to use.
116
- * If not provided, defaults to the default y-axis.
111
+ * Custom className for the line.
117
112
  */
118
- yAxisId?: string;
113
+ className?: string;
119
114
  };
115
+ export type LineComponentProps = Pick<
116
+ LineProps,
117
+ | 'stroke'
118
+ | 'strokeOpacity'
119
+ | 'strokeWidth'
120
+ | 'gradient'
121
+ | 'animate'
122
+ | 'transition'
123
+ | 'style'
124
+ | 'className'
125
+ > &
126
+ Pick<PathProps, 'clipRect' | 'strokeLinecap'> & {
127
+ /**
128
+ * Path of the line.
129
+ */
130
+ d: SVGProps<SVGPathElement>['d'];
131
+ /**
132
+ * ID of the y-axis to use.
133
+ * If not provided, defaults to the default y-axis.
134
+ */
135
+ yAxisId?: string;
136
+ };
120
137
  export type LineComponent = React.FC<LineComponentProps>;
121
138
  export declare const Line: React.NamedExoticComponent<LineProps>;
122
139
  //# sourceMappingURL=Line.d.ts.map
package/dts/chart/line/Line.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/chart/line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAGL,KAAK,kBAAkB,EAKvB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAKlB,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EACH,OAAO,GACP,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,QAAQ,GAAG,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CACnF,GAAG;IACF;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCA8MhB,CAAC"}
1
+ {"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/chart/line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAGL,KAAK,kBAAkB,EAKvB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAKlB,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EACH,OAAO,GACP,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACP,QAAQ,GACR,eAAe,GACf,aAAa,GACb,UAAU,GACV,SAAS,GACT,YAAY,GACZ,OAAO,GACP,WAAW,CACd,GACC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC9C;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCA8MhB,CAAC"}
package/dts/chart/text/ChartText.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../src/chart/text/ChartText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,UAAU,CAAC;AAE1D,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GAAG;IACnF;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACtC,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH,CAAC;AAkCJ,eAAO,MAAM,SAAS,4CA0MrB,CAAC"}
1
+ {"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../src/chart/text/ChartText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,UAAU,CAAC;AAG1D,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GAAG;IACnF;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACtC,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH,CAAC;AAkCJ,eAAO,MAAM,SAAS,4CA4MrB,CAAC"}
package/dts/chart/utils/axis.d.ts CHANGED
@@ -1,9 +1,27 @@
1
1
  import type React from 'react';
2
2
  import type { Rect } from '@coinbase/cds-common/types';
3
3
  import { type AxisBounds, type Series } from './chart';
4
- import { type ChartAxisScaleType, type ChartScaleFunction } from './scale';
4
+ import { type ChartAxisScaleType, type ChartScaleFunction, type PointAnchor } from './scale';
5
5
  export declare const defaultAxisId = 'DEFAULT_AXIS_ID';
6
6
  export declare const defaultAxisScaleType = 'linear';
7
+ /**
8
+ * Position options for band scale axis elements.
9
+ *
10
+ * - `'start'` - At the start of each step (before bar padding)
11
+ * - `'middle'` - At the center of each band
12
+ * - `'end'` - At the end of each step (after bar padding)
13
+ * - `'edges'` - At start of each tick, plus end for the last tick (encloses the chart)
14
+ *
15
+ * @note These properties only apply when using a band scale (`scaleType: 'band'`).
16
+ */
17
+ export type AxisBandPlacement = 'start' | 'middle' | 'end' | 'edges';
18
+ /**
19
+ * Converts an AxisBandPlacement to the corresponding PointAnchor for use with getPointOnScale.
20
+ *
21
+ * @param placement - The axis placement value
22
+ * @returns The corresponding PointAnchor for scale calculations
23
+ */
24
+ export declare const toPointAnchor: (placement: AxisBandPlacement) => PointAnchor;
7
25
  /**
8
26
  * Axis configuration with computed bounds
9
27
  */
@@ -154,6 +172,12 @@ type TickGenerationOptions = {
154
172
  * @default 4
155
173
  */
156
174
  minTickCount?: number;
175
+ /**
176
+ * Anchor position for band/categorical scales.
177
+ * Controls where tick labels are positioned within each band.
178
+ * @default 'middle'
179
+ */
180
+ anchor?: PointAnchor;
157
181
  };
158
182
  export type GetAxisTicksDataProps = {
159
183
  /**
package/dts/chart/utils/axis.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/axis.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,EACL,KAAK,UAAU,EAIf,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EAMxB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAC/C,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,+BAA+B;IAC/B,SAAS,EAAE,kBAAkB,CAAC;IAC9B;;OAEG;IACH,MAAM,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,WAAW,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IACnE;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;IACpE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;CACpE,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GAAI,sCAK1B;IACD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChB,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;CACxB,KAAG,kBAyCH,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,GAAG,GAAG,GAAG,EACf,MAAM,OAAO,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,EAAE,GAAG,SAAS,EACvE,YAAW,MAAsB,EACjC,mBAAkB,kBAAyC,KAC1D,eAAe,EA0BjB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,GACxB,WAAW,eAAe,EAC1B,QAAQ,MAAM,EAAE,EAChB,UAAU,GAAG,GAAG,GAAG,KAClB,UAsDF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,WAAW,eAAe,EAC1B,WAAW,IAAI,EACf,UAAU,GAAG,GAAG,GAAG,KAClB,UAyBF,CAAC;AAEF;;GAEG;AACH,KAAK,qBAAqB,GAAG;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;OAGG;IACH,aAAa,EAAE,kBAAkB,CAAC;IAClC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,GAAG,EACV,gBAAgB,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,KAC9C,KAAK,CAAC,SAKR,CAAC;AAoIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,eAAO,MAAM,gBAAgB,GAAI,sGAQ9B,qBAAqB,KAAG,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAiGlE,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;uBAIvB,MAAM,YAAY,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,QAAQ,MAAM;yBAclC,MAAM;CAwB/C,CAAC"}
1
+ {"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/axis.ts"],"names":[],"mappings":"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"}
package/dts/chart/utils/point.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { TextHorizontalAlignment, TextVerticalAlignment } from '../text';
2
- import { type ChartScaleFunction } from './scale';
2
+ import { type ChartScaleFunction, type PointAnchor } from './scale';
3
3
  /**
4
4
  * Position a label should be placed relative to the point
5
5
  *
@@ -10,13 +10,17 @@ import { type ChartScaleFunction } from './scale';
10
10
  export type PointLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
11
11
  /**
12
12
  * Get a point from a data value and a scale.
13
- * @note for categorical scales, the point will be centered within the band.
14
- * @note for log scales, zero and negative values are clamped to a small positive value.
15
- * @param data - the data value.
16
- * @param scale - the scale function.
17
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
13
+ *
14
+ * @param dataValue - The data value to convert to a pixel position.
15
+ * @param scale - The scale function.
16
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
17
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
18
18
  */
19
- export declare const getPointOnScale: (dataValue: number, scale: ChartScaleFunction) => number;
19
+ export declare const getPointOnScale: (
20
+ dataValue: number,
21
+ scale: ChartScaleFunction,
22
+ anchor?: PointAnchor,
23
+ ) => number;
20
24
  /**
21
25
  * Projects a data point to pixel coordinates using the chart scale.
22
26
  * Automatically handles log scale transformations for zero/negative values.
package/dts/chart/utils/point.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAAE,KAAK,kBAAkB,EAAkD,MAAM,SAAS,CAAC;AAElG;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,kBAAkB,KAAG,MAc9E,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}
1
+ {"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAEL,KAAK,kBAAkB,EAIvB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,MAAM,EACjB,OAAO,kBAAkB,EACzB,SAAQ,WAAsB,KAC7B,MAiCF,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}
package/dts/chart/utils/scale.d.ts CHANGED
@@ -40,4 +40,15 @@ export declare const getCategoricalScale: ({
40
40
  range: AxisBounds;
41
41
  padding?: number;
42
42
  }) => CategoricalScale;
43
+ /**
44
+ * Anchor position for points on a scale. Currently used only for band scales.
45
+ *
46
+ * For band scales, this determines where within the band to position a point:
47
+ * - `'stepStart'` - At the start of the step
48
+ * - `'bandStart'` - At the start of the band
49
+ * - `'middle'` - At the center of the band
50
+ * - `'bandEnd'` - At the end of the band
51
+ * - `'stepEnd'` - At the end of the step
52
+ */
53
+ export type PointAnchor = 'stepStart' | 'bandStart' | 'middle' | 'bandEnd' | 'stepEnd';
43
54
  //# sourceMappingURL=scale.d.ts.map
package/dts/chart/utils/scale.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,eAAO,MAAM,kBAAkB,GAAI,OAAO,kBAAkB,KAAG,KAAK,IAAI,gBAEvE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,KAAG,KAAK,IAAI,YAEnE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,kBAAkB,KACxB,KAAK,IAAI,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAEjD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,+BAI7B;IACD,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;CACnB,KAAG,YAGH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,6BAIjC;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,gBAOH,CAAC"}
1
+ {"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,eAAO,MAAM,kBAAkB,GAAI,OAAO,kBAAkB,KAAG,KAAK,IAAI,gBAEvE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,KAAG,KAAK,IAAI,YAEnE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,kBAAkB,KACxB,KAAK,IAAI,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAEjD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,+BAI7B;IACD,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;CACnB,KAAG,YAGH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,6BAIjC;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,gBAQH,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC"}
package/esm/chart/axis/Axis.js CHANGED
@@ -5,21 +5,7 @@ export const axisTickMarkStyles = "\n stroke: var(--color-fg);\n stroke-lineca
5
5
  /**
6
6
  * Animation variants for axis elements - updates (used for both grid lines and tick labels)
7
7
  */
8
- export const axisUpdateAnimationVariants = {
9
- initial: {
10
- opacity: 0
11
- },
12
- animate: {
13
- opacity: 1,
14
- transition: {
15
- duration: accessoryFadeTransitionDuration,
16
- delay: accessoryFadeTransitionDuration
17
- }
18
- },
19
- exit: {
20
- opacity: 0,
21
- transition: {
22
- duration: accessoryFadeTransitionDuration
23
- }
24
- }
8
+ export const axisUpdateAnimationTransition = {
9
+ duration: accessoryFadeTransitionDuration,
10
+ ease: 'easeOut'
25
11
  };
package/esm/chart/axis/XAxis.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["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"];
1
+ const _excluded = ["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"];
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; }
@@ -8,15 +8,14 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
8
8
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
9
  import { memo, useCallback, useEffect, useId, useMemo } from 'react';
10
10
  import { cx } from '@coinbase/cds-web';
11
- import { AnimatePresence, m as motion } from 'framer-motion';
11
+ import { m as motion } from 'framer-motion';
12
12
  import { useCartesianChartContext } from '../ChartProvider';
13
13
  import { DottedLine } from '../line/DottedLine';
14
- import { ReferenceLine } from '../line/ReferenceLine';
15
14
  import { SolidLine } from '../line/SolidLine';
16
15
  import { ChartText } from '../text/ChartText';
17
16
  import { ChartTextGroup } from '../text/ChartTextGroup';
18
- import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
19
- import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
17
+ import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
18
+ import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
20
19
  import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
21
20
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
21
  const AXIS_HEIGHT = 32;
@@ -49,7 +48,9 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
49
48
  label,
50
49
  labelGap = 4,
51
50
  height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
52
- testID = 'x-axis'
51
+ testID = 'x-axis',
52
+ bandGridLinePlacement = 'edges',
53
+ bandTickMarkPlacement = 'middle'
53
54
  } = _ref,
54
55
  props = _objectWithoutProperties(_ref, _excluded);
55
56
  const registrationId = useId();
@@ -59,7 +60,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
59
60
  getXAxis,
60
61
  registerAxis,
61
62
  unregisterAxis,
62
- getAxisBounds
63
+ getAxisBounds,
64
+ drawingArea
63
65
  } = useCartesianChartContext();
64
66
  const xScale = getXScale();
65
67
  const xAxis = getXAxis();
@@ -100,12 +102,6 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
100
102
  const domain = xScale.domain();
101
103
  categories = domain.map(String);
102
104
  }
103
- let possibleTickValues;
104
-
105
- // If we have discrete data, we can use the indices as possible tick values
106
- if (axisData && Array.isArray(axisData) && (typeof axisData[0] === 'string' || typeof axisData[0] === 'number' && isCategoricalScale(xScale))) possibleTickValues = Array.from({
107
- length: axisData.length
108
- }, (_, i) => i);
109
105
  return getAxisTicksData({
110
106
  scaleFunction: xScale,
111
107
  ticks,
@@ -121,14 +117,79 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
121
117
  }
122
118
  });
123
119
  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data]);
120
+ const isBandScale = useMemo(() => {
121
+ if (!xScale) return false;
122
+ return isCategoricalScale(xScale);
123
+ }, [xScale]);
124
+
125
+ // Compute grid line positions (including bounds closing line for band scales)
126
+ const gridLinePositions = useMemo(() => {
127
+ if (!xScale) return [];
128
+ return ticksData.flatMap((tick, index) => {
129
+ if (!isBandScale) {
130
+ return [{
131
+ x: tick.position,
132
+ key: "grid-".concat(tick.tick, "-").concat(index)
133
+ }];
134
+ }
135
+ const bandScale = xScale;
136
+ const isLastTick = index === ticksData.length - 1;
137
+ const isEdges = bandGridLinePlacement === 'edges';
138
+ const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
139
+ const positions = [{
140
+ x: startX,
141
+ key: "grid-".concat(tick.tick, "-").concat(index)
142
+ }];
143
+
144
+ // For edges on last tick, add the closing line at stepEnd
145
+ if (isLastTick && isEdges) {
146
+ const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
147
+ positions.push({
148
+ x: endX,
149
+ key: "grid-".concat(tick.tick, "-").concat(index, "-end")
150
+ });
151
+ }
152
+ return positions;
153
+ });
154
+ }, [ticksData, xScale, isBandScale, bandGridLinePlacement]);
155
+
156
+ // Compute tick mark positions (including bounds closing tick mark for band scales)
157
+ const tickMarkPositions = useMemo(() => {
158
+ if (!xScale) return [];
159
+ return ticksData.flatMap((tick, index) => {
160
+ if (!isBandScale) {
161
+ return [{
162
+ x: tick.position,
163
+ key: "tick-mark-".concat(tick.tick, "-").concat(index)
164
+ }];
165
+ }
166
+ const bandScale = xScale;
167
+ const isLastTick = index === ticksData.length - 1;
168
+ const isEdges = bandTickMarkPlacement === 'edges';
169
+ const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
170
+ const positions = [{
171
+ x: startX,
172
+ key: "tick-mark-".concat(tick.tick, "-").concat(index)
173
+ }];
174
+
175
+ // For edges on last tick, add the closing tick mark at stepEnd
176
+ if (isLastTick && isEdges) {
177
+ const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
178
+ positions.push({
179
+ x: endX,
180
+ key: "tick-mark-".concat(tick.tick, "-").concat(index, "-end")
181
+ });
182
+ }
183
+ return positions;
184
+ });
185
+ }, [ticksData, xScale, isBandScale, bandTickMarkPlacement]);
124
186
  const chartTextData = useMemo(() => {
125
187
  if (!axisBounds) return null;
126
188
  return ticksData.map(tick => {
127
189
  const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
128
190
  const availableSpace = AXIS_HEIGHT - tickOffset;
129
191
  const labelOffset = availableSpace / 2;
130
- const baseY = position === 'top' && label ? axisBounds.y + LABEL_SIZE : axisBounds.y;
131
- const labelY = position === 'top' ? baseY + labelOffset - tickOffset : baseY + labelOffset + tickOffset;
192
+ const labelY = position === 'top' ? axisBounds.y + axisBounds.height - tickOffset - labelOffset : axisBounds.y + labelOffset + tickOffset;
132
193
  return {
133
194
  x: tick.position,
134
195
  y: labelY,
@@ -142,10 +203,14 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
142
203
  }
143
204
  };
144
205
  });
145
- }, [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, label]);
146
- if (!xScale || !axisBounds) return;
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]);
207
+ if (!xScale || !axisBounds || !drawingArea) return;
147
208
  const labelX = axisBounds.x + axisBounds.width / 2;
148
209
  const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
210
+ const tickYTop = axisBounds.y;
211
+ const tickYBottom = axisBounds.y + axisBounds.height;
212
+ const tickYStart = position === 'bottom' ? tickYTop : tickYBottom;
213
+ const tickYEnd = position === 'bottom' ? tickYTop + tickMarkSize : tickYBottom - tickMarkSize;
149
214
  return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
150
215
  className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
151
216
  "data-axis": "x",
@@ -154,23 +219,35 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
154
219
  }, props), {}, {
155
220
  children: [showGrid && /*#__PURE__*/_jsx("g", {
156
221
  "data-testid": "".concat(testID, "-grid"),
157
- children: /*#__PURE__*/_jsx(AnimatePresence, {
158
- initial: false,
159
- children: ticksData.map((tick, index) => {
160
- const verticalLine = /*#__PURE__*/_jsx(ReferenceLine, {
161
- LineComponent: GridLineComponent,
162
- dataX: tick.tick
163
- });
164
- return animate ? /*#__PURE__*/_jsx(motion.g, {
165
- animate: "animate",
166
- exit: "exit",
167
- initial: "initial",
168
- variants: axisUpdateAnimationVariants,
169
- children: verticalLine
170
- }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
171
- children: verticalLine
172
- }, "grid-".concat(tick.tick, "-").concat(index));
173
- })
222
+ children: gridLinePositions.map(_ref2 => {
223
+ let {
224
+ x,
225
+ key
226
+ } = _ref2;
227
+ return animate ? /*#__PURE__*/_jsx(motion.g, {
228
+ animate: {
229
+ opacity: 1
230
+ },
231
+ initial: {
232
+ opacity: 0
233
+ },
234
+ transition: axisUpdateAnimationTransition,
235
+ children: /*#__PURE__*/_jsx(GridLineComponent, {
236
+ animate: false,
237
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
238
+ clipRect: null,
239
+ d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
240
+ stroke: "var(--color-bgLine)",
241
+ style: styles === null || styles === void 0 ? void 0 : styles.gridLine
242
+ })
243
+ }, key) : /*#__PURE__*/_jsx(GridLineComponent, {
244
+ animate: false,
245
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
246
+ clipRect: null,
247
+ d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
248
+ stroke: "var(--color-bgLine)",
249
+ style: styles === null || styles === void 0 ? void 0 : styles.gridLine
250
+ }, key);
174
251
  })
175
252
  }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
176
253
  prioritizeEndLabels: true,
@@ -179,19 +256,39 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
179
256
  minGap: minTickLabelGap
180
257
  }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
181
258
  "data-testid": "".concat(testID, "-tick-marks"),
182
- children: ticksData.map((tick, index) => {
183
- const tickY = position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height;
184
- const tickY2 = position === 'bottom' ? tickY + tickMarkSize : tickY - tickMarkSize;
185
- return /*#__PURE__*/_jsx(TickMarkLineComponent, {
259
+ children: tickMarkPositions.map(_ref3 => {
260
+ let {
261
+ x,
262
+ key
263
+ } = _ref3;
264
+ return animate ? /*#__PURE__*/_jsx(motion.g, {
265
+ animate: {
266
+ opacity: 1
267
+ },
268
+ initial: {
269
+ opacity: 0
270
+ },
271
+ transition: axisUpdateAnimationTransition,
272
+ children: /*#__PURE__*/_jsx(TickMarkLineComponent, {
273
+ animate: false,
274
+ className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
275
+ clipRect: null,
276
+ d: lineToPath(x, tickYEnd, x, tickYStart),
277
+ stroke: "var(--color-fg)",
278
+ strokeLinecap: "square",
279
+ strokeWidth: 1,
280
+ style: styles === null || styles === void 0 ? void 0 : styles.tickMark
281
+ })
282
+ }, key) : /*#__PURE__*/_jsx(TickMarkLineComponent, {
186
283
  animate: false,
187
284
  className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
188
285
  clipRect: null,
189
- d: lineToPath(tick.position, tickY2, tick.position, tickY),
286
+ d: lineToPath(x, tickYEnd, x, tickYStart),
190
287
  stroke: "var(--color-fg)",
191
288
  strokeLinecap: "square",
192
289
  strokeWidth: 1,
193
290
  style: styles === null || styles === void 0 ? void 0 : styles.tickMark
194
- }, "tick-mark-".concat(tick.tick, "-").concat(index));
291
+ }, key);
195
292
  })
196
293
  }), showLine && /*#__PURE__*/_jsx(LineComponent, {
197
294
  animate: false,
package/esm/chart/axis/YAxis.js CHANGED
@@ -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"];
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"];
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; }
@@ -8,15 +8,14 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
8
8
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
9
  import { memo, useCallback, useEffect, useId, useMemo } from 'react';
10
10
  import { cx } from '@coinbase/cds-web';
11
- import { AnimatePresence, m as motion } from 'framer-motion';
11
+ import { m as motion } from 'framer-motion';
12
12
  import { useCartesianChartContext } from '../ChartProvider';
13
13
  import { DottedLine } from '../line/DottedLine';
14
- import { ReferenceLine } from '../line/ReferenceLine';
15
14
  import { SolidLine } from '../line/SolidLine';
16
15
  import { ChartText } from '../text/ChartText';
17
16
  import { ChartTextGroup } from '../text/ChartTextGroup';
18
- import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
19
- import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
17
+ import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
18
+ import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
20
19
  import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
21
20
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
21
  const AXIS_WIDTH = 44;
@@ -48,7 +47,9 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
48
47
  label,
49
48
  labelGap = 4,
50
49
  width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
51
- testID = 'y-axis'
50
+ testID = 'y-axis',
51
+ bandGridLinePlacement = 'edges',
52
+ bandTickMarkPlacement = 'middle'
52
53
  } = _ref,
53
54
  props = _objectWithoutProperties(_ref, _excluded);
54
55
  const registrationId = useId();
@@ -58,7 +59,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
58
59
  getYAxis,
59
60
  registerAxis,
60
61
  unregisterAxis,
61
- getAxisBounds
62
+ getAxisBounds,
63
+ drawingArea
62
64
  } = useCartesianChartContext();
63
65
  const yScale = getYScale(axisId);
64
66
  const yAxis = getYAxis(axisId);
@@ -110,6 +112,72 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
110
112
  tickInterval: tickInterval
111
113
  });
112
114
  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data]);
115
+ const isBandScale = useMemo(() => {
116
+ if (!yScale) return false;
117
+ return isCategoricalScale(yScale);
118
+ }, [yScale]);
119
+
120
+ // Compute grid line positions (including bounds closing line for band scales)
121
+ const gridLinePositions = useMemo(() => {
122
+ if (!yScale) return [];
123
+ return ticksData.flatMap((tick, index) => {
124
+ if (!isBandScale) {
125
+ return [{
126
+ y: tick.position,
127
+ key: "grid-".concat(tick.tick, "-").concat(index)
128
+ }];
129
+ }
130
+ const bandScale = yScale;
131
+ const isLastTick = index === ticksData.length - 1;
132
+ const isEdges = bandGridLinePlacement === 'edges';
133
+ const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
134
+ const positions = [{
135
+ y: startY,
136
+ key: "grid-".concat(tick.tick, "-").concat(index)
137
+ }];
138
+
139
+ // For edges on last tick, add the closing line at stepEnd
140
+ if (isLastTick && isEdges) {
141
+ const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
142
+ positions.push({
143
+ y: endY,
144
+ key: "grid-".concat(tick.tick, "-").concat(index, "-end")
145
+ });
146
+ }
147
+ return positions;
148
+ });
149
+ }, [ticksData, yScale, isBandScale, bandGridLinePlacement]);
150
+
151
+ // Compute tick mark positions (including bounds closing tick mark for band scales)
152
+ const tickMarkPositions = useMemo(() => {
153
+ if (!yScale) return [];
154
+ return ticksData.flatMap((tick, index) => {
155
+ if (!isBandScale) {
156
+ return [{
157
+ y: tick.position,
158
+ key: "tick-mark-".concat(tick.tick, "-").concat(index)
159
+ }];
160
+ }
161
+ const bandScale = yScale;
162
+ const isLastTick = index === ticksData.length - 1;
163
+ const isEdges = bandTickMarkPlacement === 'edges';
164
+ const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
165
+ const positions = [{
166
+ y: startY,
167
+ key: "tick-mark-".concat(tick.tick, "-").concat(index)
168
+ }];
169
+
170
+ // For edges on last tick, add the closing tick mark at stepEnd
171
+ if (isLastTick && isEdges) {
172
+ const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
173
+ positions.push({
174
+ y: endY,
175
+ key: "tick-mark-".concat(tick.tick, "-").concat(index, "-end")
176
+ });
177
+ }
178
+ return positions;
179
+ });
180
+ }, [ticksData, yScale, isBandScale, bandTickMarkPlacement]);
113
181
  const chartTextData = useMemo(() => {
114
182
  if (!axisBounds) return null;
115
183
  return ticksData.map(tick => {
@@ -129,9 +197,13 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
129
197
  };
130
198
  });
131
199
  }, [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]);
132
- if (!yScale || !axisBounds) return;
200
+ if (!yScale || !axisBounds || !drawingArea) return;
133
201
  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
134
202
  const labelY = axisBounds.y + axisBounds.height / 2;
203
+ const tickXLeft = axisBounds.x;
204
+ const tickXRight = axisBounds.x + axisBounds.width;
205
+ const tickXStart = position === 'left' ? tickXRight : tickXLeft;
206
+ const tickXEnd = position === 'left' ? tickXRight - tickMarkSize : tickXLeft + tickMarkSize;
135
207
  return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
136
208
  className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
137
209
  "data-axis": "y",
@@ -140,24 +212,35 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
140
212
  }, props), {}, {
141
213
  children: [showGrid && /*#__PURE__*/_jsx("g", {
142
214
  "data-testid": "".concat(testID, "-grid"),
143
- children: /*#__PURE__*/_jsx(AnimatePresence, {
144
- initial: false,
145
- children: ticksData.map((tick, index) => {
146
- const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
147
- LineComponent: GridLineComponent,
148
- dataY: tick.tick,
149
- yAxisId: axisId
150
- });
151
- return animate ? /*#__PURE__*/_jsx(motion.g, {
152
- animate: "animate",
153
- exit: "exit",
154
- initial: "initial",
155
- variants: axisUpdateAnimationVariants,
156
- children: horizontalLine
157
- }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
158
- children: horizontalLine
159
- }, "grid-".concat(tick.tick, "-").concat(index));
160
- })
215
+ children: gridLinePositions.map(_ref2 => {
216
+ let {
217
+ y,
218
+ key
219
+ } = _ref2;
220
+ return animate ? /*#__PURE__*/_jsx(motion.g, {
221
+ animate: {
222
+ opacity: 1
223
+ },
224
+ initial: {
225
+ opacity: 0
226
+ },
227
+ transition: axisUpdateAnimationTransition,
228
+ children: /*#__PURE__*/_jsx(GridLineComponent, {
229
+ animate: false,
230
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
231
+ clipRect: null,
232
+ d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
233
+ stroke: "var(--color-bgLine)",
234
+ style: styles === null || styles === void 0 ? void 0 : styles.gridLine
235
+ })
236
+ }, key) : /*#__PURE__*/_jsx(GridLineComponent, {
237
+ animate: false,
238
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
239
+ clipRect: null,
240
+ d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
241
+ stroke: "var(--color-bgLine)",
242
+ style: styles === null || styles === void 0 ? void 0 : styles.gridLine
243
+ }, key);
161
244
  })
162
245
  }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
163
246
  prioritizeEndLabels: true,
@@ -166,20 +249,39 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
166
249
  minGap: minTickLabelGap
167
250
  }), showTickMarks && /*#__PURE__*/_jsx("g", {
168
251
  "data-testid": "".concat(testID, "-tick-marks"),
169
- children: ticksData.map((tick, index) => {
170
- const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
171
- const tickMarkSizePixels = tickMarkSize;
172
- const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
173
- return /*#__PURE__*/_jsx(TickMarkLineComponent, {
252
+ children: tickMarkPositions.map(_ref3 => {
253
+ let {
254
+ y,
255
+ key
256
+ } = _ref3;
257
+ return animate ? /*#__PURE__*/_jsx(motion.g, {
258
+ animate: {
259
+ opacity: 1
260
+ },
261
+ initial: {
262
+ opacity: 0
263
+ },
264
+ transition: axisUpdateAnimationTransition,
265
+ children: /*#__PURE__*/_jsx(TickMarkLineComponent, {
266
+ animate: false,
267
+ className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
268
+ clipRect: null,
269
+ d: lineToPath(tickXStart, y, tickXEnd, y),
270
+ stroke: "var(--color-fg)",
271
+ strokeLinecap: "square",
272
+ strokeWidth: 1,
273
+ style: styles === null || styles === void 0 ? void 0 : styles.tickMark
274
+ })
275
+ }, key) : /*#__PURE__*/_jsx(TickMarkLineComponent, {
174
276
  animate: false,
175
277
  className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
176
278
  clipRect: null,
177
- d: lineToPath(tickX, tick.position, tickX2, tick.position),
279
+ d: lineToPath(tickXStart, y, tickXEnd, y),
178
280
  stroke: "var(--color-fg)",
179
281
  strokeLinecap: "square",
180
282
  strokeWidth: 1,
181
283
  style: styles === null || styles === void 0 ? void 0 : styles.tickMark
182
- }, "tick-mark-".concat(tick.tick, "-").concat(index));
284
+ }, key);
183
285
  })
184
286
  }), showLine && /*#__PURE__*/_jsx(LineComponent, {
185
287
  animate: false,
package/esm/chart/text/ChartText.js CHANGED
@@ -10,6 +10,7 @@ import { Text } from '@coinbase/cds-web/typography';
10
10
  import { m as motion } from 'framer-motion';
11
11
  import { useCartesianChartContext } from '../ChartProvider';
12
12
  import { getChartInset } from '../utils';
13
+ import { accessoryFadeTransitionDuration } from '../utils/transition';
13
14
 
14
15
  /**
15
16
  * The supported content types for ChartText.
@@ -190,7 +191,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
190
191
  opacity: isDimensionsReady ? 1 : 0
191
192
  },
192
193
  transition: animate ? {
193
- duration: 0.2,
194
+ duration: accessoryFadeTransitionDuration,
194
195
  ease: 'easeOut'
195
196
  } : undefined,
196
197
  children: [/*#__PURE__*/_jsx(Box, {
package/esm/chart/utils/axis.js CHANGED
@@ -8,10 +8,41 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
8
8
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
9
  import { useCallback, useMemo, useState } from 'react';
10
10
  import { getChartDomain, getChartRange, isValidBounds } from './chart';
11
+ import { getPointOnScale } from './point';
11
12
  import { getCategoricalScale, getNumericScale, isCategoricalScale, isNumericScale } from './scale';
12
13
  export const defaultAxisId = 'DEFAULT_AXIS_ID';
13
14
  export const defaultAxisScaleType = 'linear';
14
15
 
16
+ /**
17
+ * Position options for band scale axis elements.
18
+ *
19
+ * - `'start'` - At the start of each step (before bar padding)
20
+ * - `'middle'` - At the center of each band
21
+ * - `'end'` - At the end of each step (after bar padding)
22
+ * - `'edges'` - At start of each tick, plus end for the last tick (encloses the chart)
23
+ *
24
+ * @note These properties only apply when using a band scale (`scaleType: 'band'`).
25
+ */
26
+
27
+ /**
28
+ * Converts an AxisBandPlacement to the corresponding PointAnchor for use with getPointOnScale.
29
+ *
30
+ * @param placement - The axis placement value
31
+ * @returns The corresponding PointAnchor for scale calculations
32
+ */
33
+ export const toPointAnchor = placement => {
34
+ switch (placement) {
35
+ case 'edges': // edges uses stepStart for each tick, stepEnd handled separately
36
+ case 'start':
37
+ return 'stepStart';
38
+ case 'end':
39
+ return 'stepEnd';
40
+ case 'middle':
41
+ default:
42
+ return 'middle';
43
+ }
44
+ };
45
+
15
46
  /**
16
47
  * Axis configuration with computed bounds
17
48
  */
@@ -458,6 +489,7 @@ const generateEvenlyDistributedTicks = (scale, tickInterval, possibleTickValues,
458
489
  * // Returns tick positions centered in each selected band
459
490
  */
460
491
  export const getAxisTicksData = _ref4 => {
492
+ var _options$anchor;
461
493
  let {
462
494
  ticks,
463
495
  scaleFunction,
@@ -467,53 +499,37 @@ export const getAxisTicksData = _ref4 => {
467
499
  tickInterval,
468
500
  options
469
501
  } = _ref4;
502
+ const anchor = (_options$anchor = options === null || options === void 0 ? void 0 : options.anchor) !== null && _options$anchor !== void 0 ? _options$anchor : 'middle';
503
+
470
504
  // Handle band scales
471
505
  if (isCategoricalScale(scaleFunction)) {
506
+ const bandScale = scaleFunction;
507
+
472
508
  // If explicit ticks are provided as array, use them
473
509
  if (Array.isArray(ticks)) {
474
- return ticks.filter(index => index >= 0 && index < categories.length).map(index => {
475
- var _bandwidth, _bandwidth2, _ref5;
476
- // Band scales expect numeric indices, not category strings
477
- const position = scaleFunction(index);
478
- if (position === undefined) return null;
479
- return {
480
- tick: index,
481
- position: position + ((_bandwidth = (_bandwidth2 = (_ref5 = scaleFunction).bandwidth) === null || _bandwidth2 === void 0 ? void 0 : _bandwidth2.call(_ref5)) !== null && _bandwidth !== void 0 ? _bandwidth : 0) / 2
482
- };
483
- }).filter(Boolean);
510
+ return ticks.filter(index => index >= 0 && index < categories.length).map(index => ({
511
+ tick: index,
512
+ position: getPointOnScale(index, bandScale, anchor)
513
+ }));
484
514
  }
485
515
 
486
516
  // If a tick function is provided, use it to filter
487
517
  if (typeof ticks === 'function') {
488
518
  return categories.map((category, index) => {
489
- var _bandwidth3, _bandwidth4, _ref6;
490
519
  if (!ticks(index)) return null;
491
-
492
- // Band scales expect numeric indices, not category strings
493
- const position = scaleFunction(index);
494
- if (position === undefined) return null;
495
520
  return {
496
521
  tick: index,
497
- position: position + ((_bandwidth3 = (_bandwidth4 = (_ref6 = scaleFunction).bandwidth) === null || _bandwidth4 === void 0 ? void 0 : _bandwidth4.call(_ref6)) !== null && _bandwidth3 !== void 0 ? _bandwidth3 : 0) / 2
522
+ position: getPointOnScale(index, bandScale, anchor)
498
523
  };
499
524
  }).filter(Boolean);
500
525
  }
501
- if (typeof ticks === 'boolean' && !ticks) {
502
- return [];
503
- }
504
526
 
505
527
  // For band scales without explicit ticks, show all categories
506
528
  // requestedTickCount is ignored for categorical scales - use ticks parameter to control visibility
507
- return categories.map((category, index) => {
508
- var _bandwidth5, _bandwidth6, _ref7;
509
- // Band scales expect numeric indices, not category strings
510
- const position = scaleFunction(index);
511
- if (position === undefined) return null;
512
- return {
513
- tick: index,
514
- position: position + ((_bandwidth5 = (_bandwidth6 = (_ref7 = scaleFunction).bandwidth) === null || _bandwidth6 === void 0 ? void 0 : _bandwidth6.call(_ref7)) !== null && _bandwidth5 !== void 0 ? _bandwidth5 : 0) / 2
515
- };
516
- }).filter(Boolean);
529
+ return categories.map((_, index) => ({
530
+ tick: index,
531
+ position: getPointOnScale(index, bandScale, anchor)
532
+ }));
517
533
  }
518
534
 
519
535
  // Handle numeric scales
package/esm/chart/utils/point.js CHANGED
@@ -10,19 +10,37 @@ import { isCategoricalScale, isLogScale, isNumericScale } from './scale';
10
10
 
11
11
  /**
12
12
  * Get a point from a data value and a scale.
13
- * @note for categorical scales, the point will be centered within the band.
14
- * @note for log scales, zero and negative values are clamped to a small positive value.
15
- * @param data - the data value.
16
- * @param scale - the scale function.
17
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
13
+ *
14
+ * @param dataValue - The data value to convert to a pixel position.
15
+ * @param scale - The scale function.
16
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
17
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
18
18
  */
19
- export const getPointOnScale = (dataValue, scale) => {
20
- var _scale2;
19
+ export const getPointOnScale = function (dataValue, scale) {
20
+ var _scale;
21
+ let anchor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'middle';
21
22
  if (isCategoricalScale(scale)) {
22
- var _scale, _scale$bandwidth;
23
- const bandStart = (_scale = scale(dataValue)) !== null && _scale !== void 0 ? _scale : 0;
24
- const bandwidth = (_scale$bandwidth = scale.bandwidth()) !== null && _scale$bandwidth !== void 0 ? _scale$bandwidth : 0;
25
- return bandStart + bandwidth / 2;
23
+ var _bandScale$bandwidth, _bandScale$bandwidth2, _bandScale$step, _bandScale$step2;
24
+ const bandScale = scale;
25
+ const bandStart = bandScale(dataValue);
26
+ if (bandStart === undefined) return 0;
27
+ const bandwidth = (_bandScale$bandwidth = (_bandScale$bandwidth2 = bandScale.bandwidth) === null || _bandScale$bandwidth2 === void 0 ? void 0 : _bandScale$bandwidth2.call(bandScale)) !== null && _bandScale$bandwidth !== void 0 ? _bandScale$bandwidth : 0;
28
+ const step = (_bandScale$step = (_bandScale$step2 = bandScale.step) === null || _bandScale$step2 === void 0 ? void 0 : _bandScale$step2.call(bandScale)) !== null && _bandScale$step !== void 0 ? _bandScale$step : bandwidth;
29
+ const paddingOffset = (step - bandwidth) / 2;
30
+ const stepStart = bandStart - paddingOffset;
31
+ switch (anchor) {
32
+ case 'stepStart':
33
+ return stepStart;
34
+ case 'bandStart':
35
+ return bandStart;
36
+ case 'bandEnd':
37
+ return bandStart + bandwidth;
38
+ case 'stepEnd':
39
+ return stepStart + step;
40
+ case 'middle':
41
+ default:
42
+ return bandStart + bandwidth / 2;
43
+ }
26
44
  }
27
45
 
28
46
  // For log scales, ensure the value is positive
@@ -30,7 +48,7 @@ export const getPointOnScale = (dataValue, scale) => {
30
48
  if (isLogScale(scale) && dataValue <= 0) {
31
49
  adjustedValue = 0.001; // Use a small positive value for log scales
32
50
  }
33
- return (_scale2 = scale(adjustedValue)) !== null && _scale2 !== void 0 ? _scale2 : 0;
51
+ return (_scale = scale(adjustedValue)) !== null && _scale !== void 0 ? _scale : 0;
34
52
  };
35
53
 
36
54
  /**
package/esm/chart/utils/scale.js CHANGED
@@ -43,6 +43,17 @@ export const getCategoricalScale = _ref2 => {
43
43
  const domainArray = Array.from({
44
44
  length: domain.max - domain.min + 1
45
45
  }, (_, i) => i);
46
- const scale = scaleBand().domain(domainArray).range([range.min, range.max]).padding(padding);
46
+ const scale = scaleBand().domain(domainArray).range([range.min, range.max]).paddingInner(padding).paddingOuter(padding / 2);
47
47
  return scale;
48
- };
48
+ };
49
+
50
+ /**
51
+ * Anchor position for points on a scale. Currently used only for band scales.
52
+ *
53
+ * For band scales, this determines where within the band to position a point:
54
+ * - `'stepStart'` - At the start of the step
55
+ * - `'bandStart'` - At the start of the band
56
+ * - `'middle'` - At the center of the band
57
+ * - `'bandEnd'` - At the end of the band
58
+ * - `'stepEnd'` - At the end of the step
59
+ */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web-visualization",
3
- "version": "3.4.0-beta.10",
3
+ "version": "3.4.0-beta.11",
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.35.1",
41
+ "@coinbase/cds-common": "^8.36.2",
42
42
  "@coinbase/cds-lottie-files": "^3.3.4",
43
43
  "@coinbase/cds-utils": "^2.3.5",
44
- "@coinbase/cds-web": "^8.35.1",
44
+ "@coinbase/cds-web": "^8.36.2",
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.35.1",
61
+ "@coinbase/cds-common": "^8.36.2",
62
62
  "@coinbase/cds-lottie-files": "^3.3.4",
63
63
  "@coinbase/cds-utils": "^2.3.5",
64
- "@coinbase/cds-web": "^8.35.1",
64
+ "@coinbase/cds-web": "^8.36.2",
65
65
  "@figma/code-connect": "^1.3.4",
66
66
  "@linaria/core": "^3.0.0-beta.22",
67
67
  "@types/react": "^18.3.12",