@coinbase/cds-web-visualization 3.4.0-beta.2 → 3.4.0-beta.20

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 (198) hide show
  1. package/CHANGELOG.md +115 -0
  2. package/dts/chart/CartesianChart.d.ts +56 -3
  3. package/dts/chart/CartesianChart.d.ts.map +1 -1
  4. package/dts/chart/ChartProvider.d.ts +3 -0
  5. package/dts/chart/ChartProvider.d.ts.map +1 -1
  6. package/dts/chart/Path.d.ts +64 -7
  7. package/dts/chart/Path.d.ts.map +1 -1
  8. package/dts/chart/PeriodSelector.d.ts +5 -15
  9. package/dts/chart/PeriodSelector.d.ts.map +1 -1
  10. package/dts/chart/area/Area.d.ts +50 -25
  11. package/dts/chart/area/Area.d.ts.map +1 -1
  12. package/dts/chart/area/AreaChart.d.ts +46 -6
  13. package/dts/chart/area/AreaChart.d.ts.map +1 -1
  14. package/dts/chart/area/DottedArea.d.ts +21 -44
  15. package/dts/chart/area/DottedArea.d.ts.map +1 -1
  16. package/dts/chart/area/GradientArea.d.ts +21 -12
  17. package/dts/chart/area/GradientArea.d.ts.map +1 -1
  18. package/dts/chart/area/SolidArea.d.ts +16 -1
  19. package/dts/chart/area/SolidArea.d.ts.map +1 -1
  20. package/dts/chart/axis/Axis.d.ts +109 -63
  21. package/dts/chart/axis/Axis.d.ts.map +1 -1
  22. package/dts/chart/axis/DefaultAxisTickLabel.d.ts +8 -0
  23. package/dts/chart/axis/DefaultAxisTickLabel.d.ts.map +1 -0
  24. package/dts/chart/axis/XAxis.d.ts +1 -1
  25. package/dts/chart/axis/XAxis.d.ts.map +1 -1
  26. package/dts/chart/axis/YAxis.d.ts +2 -2
  27. package/dts/chart/axis/YAxis.d.ts.map +1 -1
  28. package/dts/chart/axis/index.d.ts +1 -0
  29. package/dts/chart/axis/index.d.ts.map +1 -1
  30. package/dts/chart/bar/Bar.d.ts +50 -12
  31. package/dts/chart/bar/Bar.d.ts.map +1 -1
  32. package/dts/chart/bar/BarChart.d.ts +20 -8
  33. package/dts/chart/bar/BarChart.d.ts.map +1 -1
  34. package/dts/chart/bar/BarPlot.d.ts +3 -1
  35. package/dts/chart/bar/BarPlot.d.ts.map +1 -1
  36. package/dts/chart/bar/BarStack.d.ts +41 -46
  37. package/dts/chart/bar/BarStack.d.ts.map +1 -1
  38. package/dts/chart/bar/BarStackGroup.d.ts +2 -0
  39. package/dts/chart/bar/BarStackGroup.d.ts.map +1 -1
  40. package/dts/chart/bar/DefaultBar.d.ts.map +1 -1
  41. package/dts/chart/bar/DefaultBarStack.d.ts.map +1 -1
  42. package/dts/chart/gradient/Gradient.d.ts +35 -0
  43. package/dts/chart/gradient/Gradient.d.ts.map +1 -0
  44. package/dts/chart/gradient/index.d.ts +2 -0
  45. package/dts/chart/gradient/index.d.ts.map +1 -0
  46. package/dts/chart/index.d.ts +3 -1
  47. package/dts/chart/index.d.ts.map +1 -1
  48. package/dts/chart/legend/DefaultLegendEntry.d.ts +21 -0
  49. package/dts/chart/legend/DefaultLegendEntry.d.ts.map +1 -0
  50. package/dts/chart/legend/DefaultLegendShape.d.ts +7 -0
  51. package/dts/chart/legend/DefaultLegendShape.d.ts.map +1 -0
  52. package/dts/chart/legend/Legend.d.ts +169 -0
  53. package/dts/chart/legend/Legend.d.ts.map +1 -0
  54. package/dts/chart/legend/index.d.ts +4 -0
  55. package/dts/chart/legend/index.d.ts.map +1 -0
  56. package/dts/chart/line/DefaultReferenceLineLabel.d.ts +9 -0
  57. package/dts/chart/line/DefaultReferenceLineLabel.d.ts.map +1 -0
  58. package/dts/chart/line/DottedLine.d.ts +15 -3
  59. package/dts/chart/line/DottedLine.d.ts.map +1 -1
  60. package/dts/chart/line/Line.d.ts +84 -28
  61. package/dts/chart/line/Line.d.ts.map +1 -1
  62. package/dts/chart/line/LineChart.d.ts +28 -8
  63. package/dts/chart/line/LineChart.d.ts.map +1 -1
  64. package/dts/chart/line/ReferenceLine.d.ts +91 -44
  65. package/dts/chart/line/ReferenceLine.d.ts.map +1 -1
  66. package/dts/chart/line/SolidLine.d.ts +14 -3
  67. package/dts/chart/line/SolidLine.d.ts.map +1 -1
  68. package/dts/chart/line/index.d.ts +1 -1
  69. package/dts/chart/line/index.d.ts.map +1 -1
  70. package/dts/chart/point/DefaultPointLabel.d.ts +10 -0
  71. package/dts/chart/point/DefaultPointLabel.d.ts.map +1 -0
  72. package/dts/chart/point/Point.d.ts +217 -0
  73. package/dts/chart/point/Point.d.ts.map +1 -0
  74. package/dts/chart/point/index.d.ts +3 -0
  75. package/dts/chart/point/index.d.ts.map +1 -0
  76. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts +41 -0
  77. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -0
  78. package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts +12 -0
  79. package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts.map +1 -0
  80. package/dts/chart/scrubber/DefaultScrubberLabel.d.ts +10 -0
  81. package/dts/chart/scrubber/DefaultScrubberLabel.d.ts.map +1 -0
  82. package/dts/chart/scrubber/Scrubber.d.ts +287 -70
  83. package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
  84. package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +80 -0
  85. package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -0
  86. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +47 -0
  87. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -0
  88. package/dts/chart/scrubber/index.d.ts +3 -0
  89. package/dts/chart/scrubber/index.d.ts.map +1 -1
  90. package/dts/chart/text/ChartText.d.ts +46 -43
  91. package/dts/chart/text/ChartText.d.ts.map +1 -1
  92. package/dts/chart/text/{SmartChartTextGroup.d.ts → ChartTextGroup.d.ts} +9 -3
  93. package/dts/chart/text/ChartTextGroup.d.ts.map +1 -0
  94. package/dts/chart/text/index.d.ts +1 -1
  95. package/dts/chart/text/index.d.ts.map +1 -1
  96. package/dts/chart/utils/axis.d.ts +25 -1
  97. package/dts/chart/utils/axis.d.ts.map +1 -1
  98. package/dts/chart/utils/bar.d.ts +34 -0
  99. package/dts/chart/utils/bar.d.ts.map +1 -1
  100. package/dts/chart/utils/chart.d.ts +45 -7
  101. package/dts/chart/utils/chart.d.ts.map +1 -1
  102. package/dts/chart/utils/context.d.ts +6 -0
  103. package/dts/chart/utils/context.d.ts.map +1 -1
  104. package/dts/chart/utils/gradient.d.ts +104 -0
  105. package/dts/chart/utils/gradient.d.ts.map +1 -0
  106. package/dts/chart/utils/index.d.ts +4 -0
  107. package/dts/chart/utils/index.d.ts.map +1 -1
  108. package/dts/chart/utils/interpolate.d.ts +112 -0
  109. package/dts/chart/utils/interpolate.d.ts.map +1 -0
  110. package/dts/chart/utils/path.d.ts +30 -1
  111. package/dts/chart/utils/path.d.ts.map +1 -1
  112. package/dts/chart/utils/point.d.ts +40 -7
  113. package/dts/chart/utils/point.d.ts.map +1 -1
  114. package/dts/chart/utils/scale.d.ts +11 -0
  115. package/dts/chart/utils/scale.d.ts.map +1 -1
  116. package/dts/chart/utils/scrubber.d.ts +40 -0
  117. package/dts/chart/utils/scrubber.d.ts.map +1 -0
  118. package/dts/chart/utils/transition.d.ts +101 -0
  119. package/dts/chart/utils/transition.d.ts.map +1 -0
  120. package/dts/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.d.ts.map +1 -1
  121. package/esm/chart/CartesianChart.js +170 -83
  122. package/esm/chart/ChartProvider.js +2 -2
  123. package/esm/chart/Path.js +59 -54
  124. package/esm/chart/PeriodSelector.js +36 -32
  125. package/esm/chart/area/Area.js +26 -34
  126. package/esm/chart/area/AreaChart.js +29 -15
  127. package/esm/chart/area/DottedArea.js +39 -89
  128. package/esm/chart/area/GradientArea.js +37 -80
  129. package/esm/chart/area/SolidArea.js +32 -11
  130. package/esm/chart/axis/Axis.js +4 -39
  131. package/esm/chart/axis/DefaultAxisTickLabel.js +15 -0
  132. package/esm/chart/axis/XAxis.js +184 -63
  133. package/esm/chart/axis/YAxis.js +190 -57
  134. package/esm/chart/axis/index.js +1 -0
  135. package/esm/chart/bar/Bar.js +7 -1
  136. package/esm/chart/bar/BarChart.js +17 -32
  137. package/esm/chart/bar/BarPlot.js +5 -2
  138. package/esm/chart/bar/BarStack.js +74 -22
  139. package/esm/chart/bar/BarStackGroup.js +8 -18
  140. package/esm/chart/bar/DefaultBar.js +23 -28
  141. package/esm/chart/bar/DefaultBarStack.js +24 -20
  142. package/esm/chart/gradient/Gradient.js +104 -0
  143. package/esm/chart/gradient/index.js +1 -0
  144. package/esm/chart/index.js +3 -1
  145. package/esm/chart/legend/DefaultLegendEntry.css +1 -0
  146. package/esm/chart/legend/DefaultLegendEntry.js +50 -0
  147. package/esm/chart/legend/DefaultLegendShape.css +5 -0
  148. package/esm/chart/legend/DefaultLegendShape.js +47 -0
  149. package/esm/chart/legend/Legend.js +76 -0
  150. package/esm/chart/legend/index.js +3 -0
  151. package/esm/chart/line/DefaultReferenceLineLabel.js +81 -0
  152. package/esm/chart/line/DottedLine.js +41 -17
  153. package/esm/chart/line/Line.js +87 -75
  154. package/esm/chart/line/LineChart.js +24 -8
  155. package/esm/chart/line/ReferenceLine.js +41 -43
  156. package/esm/chart/line/SolidLine.js +39 -15
  157. package/esm/chart/line/index.js +1 -1
  158. package/esm/chart/{line/GradientLine.js → point/DefaultPointLabel.js} +31 -45
  159. package/esm/chart/point/Point.css +2 -0
  160. package/esm/chart/{Point.js → point/Point.js} +87 -62
  161. package/esm/chart/point/index.js +2 -0
  162. package/esm/chart/scrubber/DefaultScrubberBeacon.js +154 -0
  163. package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js +57 -0
  164. package/esm/chart/scrubber/{ScrubberBeaconLabel.js → DefaultScrubberLabel.js} +15 -18
  165. package/esm/chart/scrubber/Scrubber.js +97 -392
  166. package/esm/chart/scrubber/ScrubberBeaconGroup.js +174 -0
  167. package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +201 -0
  168. package/esm/chart/scrubber/index.js +3 -1
  169. package/esm/chart/text/ChartText.js +15 -20
  170. package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js} +4 -3
  171. package/esm/chart/text/index.js +1 -1
  172. package/esm/chart/utils/axis.js +47 -31
  173. package/esm/chart/utils/bar.js +48 -0
  174. package/esm/chart/utils/chart.js +42 -3
  175. package/esm/chart/utils/gradient.js +257 -0
  176. package/esm/chart/utils/index.js +4 -0
  177. package/esm/chart/utils/interpolate.js +644 -0
  178. package/esm/chart/utils/path.js +41 -9
  179. package/esm/chart/utils/point.js +99 -12
  180. package/esm/chart/utils/scale.js +13 -2
  181. package/esm/chart/utils/scrubber.js +137 -0
  182. package/esm/chart/utils/transition.js +133 -0
  183. package/esm/sparkline/__figma__/Sparkline.figma.js +1 -1
  184. package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js +8 -4
  185. package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js +1 -1
  186. package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js +1 -1
  187. package/package.json +12 -11
  188. package/dts/chart/Point.d.ts +0 -153
  189. package/dts/chart/Point.d.ts.map +0 -1
  190. package/dts/chart/line/GradientLine.d.ts +0 -42
  191. package/dts/chart/line/GradientLine.d.ts.map +0 -1
  192. package/dts/chart/scrubber/ScrubberBeacon.d.ts +0 -93
  193. package/dts/chart/scrubber/ScrubberBeacon.d.ts.map +0 -1
  194. package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts +0 -7
  195. package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts.map +0 -1
  196. package/dts/chart/text/SmartChartTextGroup.d.ts.map +0 -1
  197. package/esm/chart/Point.css +0 -2
  198. package/esm/chart/scrubber/ScrubberBeacon.js +0 -195
package/CHANGELOG.md CHANGED
@@ -8,6 +8,121 @@ 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.20 (2/27/2026 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Add classnames and styles props to PeriodSelector. [[#438](https://github.com/coinbase/cds/pull/438/)]
16
+
17
+ #### 📘 Misc
18
+
19
+ - Clarify framer-motion is a peerDependency. [[#437](https://github.com/coinbase/cds/pull/437)]
20
+ - Update oudated doc links. [[#440](https://github.com/coinbase/cds/pull/440)]
21
+
22
+ ## 3.4.0-beta.19 (2/20/2026 PST)
23
+
24
+ #### 🚀 Updates
25
+
26
+ - Support custom enter transitions [[#400](https://github.com/coinbase/cds/pull/400/)]
27
+
28
+ #### 📘 Misc
29
+
30
+ - Update jsdocs for styles props. [[#384](https://github.com/coinbase/cds/pull/384)]
31
+
32
+ ## 3.4.0-beta.18 (2/8/2026 PST)
33
+
34
+ This is an artificial version bump with no new change.
35
+
36
+ ## 3.4.0-beta.17 (2/4/2026 PST)
37
+
38
+ #### 🚀 Updates
39
+
40
+ - Add support preferred side for scrubber beacon label group. [[#366](https://github.com/coinbase/cds/pull/366)]
41
+
42
+ ## 3.4.0-beta.16 (1/29/2026 PST)
43
+
44
+ #### 🚀 Updates
45
+
46
+ - Export `CartesianChartContext`. [[#340](https://github.com/coinbase/cds/pull/340)]
47
+
48
+ ## 3.4.0-beta.15 (1/27/2026 PST)
49
+
50
+ #### 🐞 Fixes
51
+
52
+ - Fix padding on PeriodSelector. [[#330](https://github.com/coinbase/cds/pull/330)]
53
+
54
+ ## 3.4.0-beta.14 (1/22/2026 PST)
55
+
56
+ #### 🚀 Updates
57
+
58
+ - Add chart Legend component. [[#302](https://github.com/coinbase/cds/pull/302)]
59
+ - Add support for hideBeaconLabels in Scrubber. [[#302](https://github.com/coinbase/cds/pull/302)]
60
+ - Add support for custom bar components. [[#302](https://github.com/coinbase/cds/pull/302)]
61
+
62
+ ## 3.4.0-beta.13 (1/20/2026 PST)
63
+
64
+ #### 🚀 Updates
65
+
66
+ - Feat: support styling default scrubber beacon. [[#315](https://github.com/coinbase/cds/pull/315)]
67
+
68
+ #### 📘 Misc
69
+
70
+ - Internal: code connect file lint fixes. [[#311](https://github.com/coinbase/cds/pull/311)]
71
+ - Internal: update figma code connect config and some mapping files. [[#304](https://github.com/coinbase/cds/pull/304)]
72
+
73
+ ## 3.4.0-beta.12 (1/8/2026 PST)
74
+
75
+ This is an artificial version bump with no new change.
76
+
77
+ ## 3.4.0-beta.11 (1/7/2026 PST)
78
+
79
+ #### 🐞 Fixes
80
+
81
+ - Allow customization of axis tick mark and grid line alignment in band scale. [[#291](https://github.com/coinbase/cds/pull/291)]
82
+
83
+ ## 3.4.0-beta.10 (1/6/2026 PST)
84
+
85
+ #### 🐞 Fixes
86
+
87
+ - Fix axis clip line issues when multiple axes are present on one side. [[#285](https://github.com/coinbase/cds/pull/285)]
88
+
89
+ ## 3.4.0-beta.9 (12/18/2025 PST)
90
+
91
+ This is an artificial version bump with no new change.
92
+
93
+ ## 3.4.0-beta.8 (12/2/2025 PST)
94
+
95
+ This is an artificial version bump with no new change.
96
+
97
+ ## 3.4.0-beta.7 (12/2/2025 PST)
98
+
99
+ #### 🐞 Fixes
100
+
101
+ - Improve opacity customization for ReferenceLine. [[#201](https://github.com/coinbase/cds/pull/201)]
102
+
103
+ ## 3.4.0-beta.6 (10/16/2025 PST)
104
+
105
+ #### 🚀 Updates
106
+
107
+ - Support connecting null values in Area and Line
108
+ - Added label to XAxis and YAxis
109
+ - Added gradient support
110
+ - Improved charts accessibility support
111
+
112
+ ## 3.4.0-beta.5 (11/4/2025 PST)
113
+
114
+ This is an artificial version bump with no new change.
115
+
116
+ ## 3.4.0-beta.4 (10/27/2025 PST)
117
+
118
+ This is an artificial version bump with no new change.
119
+
120
+ ## 3.4.0-beta.3 (10/6/2025 PST)
121
+
122
+ #### 🐞 Fixes
123
+
124
+ - Factor sparkline container offset in axis label calculations. [[#88](https://github.com/coinbase/cds/pull/88)]
125
+
11
126
  ## 3.4.0-beta.2 (10/6/2025 PST)
12
127
 
13
128
  This is an artificial version bump with no new change.
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { type BoxBaseProps, type BoxProps } from '@coinbase/cds-web/layout';
3
3
  import { type ScrubberProviderProps } from './scrubber/ScrubberProvider';
4
- import { type AxisConfigProps, type ChartInset, type Series } from './utils';
4
+ import { type AxisConfigProps, type ChartInset, type LegendPosition, type Series } from './utils';
5
5
  export type CartesianChartBaseProps = BoxBaseProps &
6
6
  Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
7
7
  /**
@@ -19,15 +19,68 @@ export type CartesianChartBaseProps = BoxBaseProps &
19
19
  */
20
20
  xAxis?: Partial<Omit<AxisConfigProps, 'id'>>;
21
21
  /**
22
- * Configuration for y-axis(es). First defined axis becomes default.
22
+ * Configuration for y-axis(es). Can be a single config or array of configs.
23
23
  */
24
24
  yAxis?: Partial<Omit<AxisConfigProps, 'data'>> | Partial<Omit<AxisConfigProps, 'data'>>[];
25
25
  /**
26
26
  * Inset around the entire chart (outside the axes).
27
27
  */
28
28
  inset?: number | Partial<ChartInset>;
29
+ /**
30
+ * Whether to show the legend or a custom legend element.
31
+ * - `true` renders the default Legend component
32
+ * - A React element renders that element as the legend
33
+ * - `false` or omitted hides the legend
34
+ */
35
+ legend?: boolean | React.ReactNode;
36
+ /**
37
+ * Position of the legend relative to the chart.
38
+ * @default 'bottom'
39
+ */
40
+ legendPosition?: LegendPosition;
41
+ /**
42
+ * Accessibility label for the legend group.
43
+ * @default 'Legend'
44
+ */
45
+ legendAccessibilityLabel?: string;
46
+ };
47
+ export type CartesianChartProps = Omit<BoxProps<'div'>, 'title'> &
48
+ CartesianChartBaseProps & {
49
+ /**
50
+ * Custom class name for the root element.
51
+ */
52
+ className?: string;
53
+ /**
54
+ * Custom class names for the component.
55
+ */
56
+ classNames?: {
57
+ /**
58
+ * Custom class name for the root element.
59
+ */
60
+ root?: string;
61
+ /**
62
+ * Custom class name for the chart SVG element.
63
+ */
64
+ chart?: string;
65
+ };
66
+ /**
67
+ * Custom styles for the root element.
68
+ */
69
+ style?: React.CSSProperties;
70
+ /**
71
+ * Custom styles for the component.
72
+ */
73
+ styles?: {
74
+ /**
75
+ * Custom styles for the root element.
76
+ */
77
+ root?: React.CSSProperties;
78
+ /**
79
+ * Custom styles for the chart SVG element.
80
+ */
81
+ chart?: React.CSSProperties;
82
+ };
29
83
  };
30
- export type CartesianChartProps = BoxProps<'svg'> & CartesianChartBaseProps;
31
84
  export declare const CartesianChart: React.MemoExoticComponent<
32
85
  React.ForwardRefExoticComponent<
33
86
  Omit<CartesianChartProps, 'ref'> & React.RefAttributes<SVGSVGElement>
@@ -1 +1 @@
1
- {"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGjF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAYjB,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAChD,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;IAC1F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,uBAAuB,CAAC;AAE5E,eAAO,MAAM,cAAc,mIAqS1B,CAAC"}
1
+ {"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGjF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAG3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAYjB,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAChD,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;IAC1F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAC9D,uBAAuB,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,cAAc,mIA2X1B,CAAC"}
@@ -1,4 +1,7 @@
1
1
  import type { CartesianChartContextValue } from './utils/context';
2
+ export declare const CartesianChartContext: import('react').Context<
3
+ CartesianChartContextValue | undefined
4
+ >;
2
5
  export declare const useCartesianChartContext: () => CartesianChartContextValue;
3
6
  export declare const CartesianChartProvider: import('react').Provider<
4
7
  CartesianChartContextValue | undefined
@@ -1 +1 @@
1
- {"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAIlE,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}
1
+ {"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAElE,eAAO,MAAM,qBAAqB,iEAEjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}
@@ -1,7 +1,32 @@
1
- import 'd3-transition';
2
1
  import type { SVGProps } from 'react';
3
2
  import type { Rect, SharedProps } from '@coinbase/cds-common/types';
4
- export type PathProps = SharedProps &
3
+ import { type Transition } from 'framer-motion';
4
+ /**
5
+ * Duration in seconds for path enter transition.
6
+ * @deprecated Use `transitions.enter` on the Path component instead.
7
+ */
8
+ export declare const pathEnterTransitionDuration = 0.5;
9
+ export type PathBaseProps = SharedProps & {
10
+ /**
11
+ * Whether to animate this path. Overrides the animate prop on the Chart component.
12
+ */
13
+ animate?: boolean;
14
+ /**
15
+ * Initial path for enter animation.
16
+ * When provided, the first animation will go from initialPath to d.
17
+ * If not provided, defaults to d (no path enter animation).
18
+ */
19
+ initialPath?: string;
20
+ /**
21
+ * Fill color for the path.
22
+ */
23
+ fill?: string;
24
+ /**
25
+ * Opacity for the path fill.
26
+ */
27
+ fillOpacity?: number;
28
+ };
29
+ export type PathProps = PathBaseProps &
5
30
  Omit<
6
31
  SVGProps<SVGPathElement>,
7
32
  | 'onAnimationStart'
@@ -18,17 +43,49 @@ export type PathProps = SharedProps &
18
43
  | 'onDragStartCapture'
19
44
  > & {
20
45
  /**
21
- * Whether to animate this path. Overrides the animate prop on the Chart component.
46
+ * Transition configuration for enter and update animations.
47
+ * @note Disable an animation by passing in null.
48
+ *
49
+ * @default transitions = {{
50
+ * enter: { type: 'tween', duration: 0.5 },
51
+ * update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 }
52
+ * }}
53
+ *
54
+ * @example
55
+ * // Custom enter and update transitions
56
+ * transitions={{ enter: { type: 'tween', duration: 0.3 }, update: { type: 'spring', damping: 20 } }}
57
+ *
58
+ * @example
59
+ * // Disable enter animation
60
+ * transitions={{ enter: null }}
22
61
  */
23
- animate?: boolean;
62
+ transitions?: {
63
+ /**
64
+ * Transition for the initial enter/reveal animation.
65
+ * Set to `null` to disable.
66
+ */
67
+ enter?: Transition | null;
68
+ /**
69
+ * Transition for subsequent data update animations.
70
+ * Set to `null` to disable.
71
+ */
72
+ update?: Transition | null;
73
+ };
24
74
  /**
25
- * Custom clip path rect. If provided, this overrides the default chart rect for clipping.
75
+ * Transition for updates.
76
+ * @deprecated Use `transitions.update` instead.
26
77
  */
27
- clipRect?: Rect;
78
+ transition?: Transition;
28
79
  /**
29
- * The offset to add to the clip rect boundaries.
80
+ * Offset added to the clip rect boundaries.
30
81
  */
31
82
  clipOffset?: number;
83
+ /**
84
+ * Custom clip path rect. If provided, this overrides the default chart rect for clipping.
85
+ * Pass null to disable clipping.
86
+ * @default drawingArea of chart + clipOffset
87
+ */
88
+ clipRect?: Rect | null;
32
89
  };
33
90
  export declare const Path: import('react').NamedExoticComponent<PathProps>;
34
91
  //# sourceMappingURL=Path.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAOpE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,IAAI,CACF,QAAQ,CAAC,cAAc,CAAC,EACtB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,uBAAuB,GACvB,6BAA6B,GAC7B,QAAQ,GACR,WAAW,GACX,aAAa,GACb,eAAe,GACf,kBAAkB,GAClB,oBAAoB,CACvB,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,eAAO,MAAM,IAAI,iDAuEhB,CAAC"}
1
+ {"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAM7D;;;GAGG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,QAAQ,CAAC,cAAc,CAAC,EACtB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,uBAAuB,GACvB,6BAA6B,GAC7B,QAAQ,GACR,WAAW,GACX,aAAa,GACb,eAAe,GACf,kBAAkB,GAClB,oBAAoB,CACvB,GAAG;IACF;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB,CAAC;AAgBJ,eAAO,MAAM,IAAI,iDA2EhB,CAAC"}
@@ -9,6 +9,7 @@ export declare const PeriodSelectorActiveIndicator: React.MemoExoticComponent<
9
9
  position,
10
10
  borderRadius,
11
11
  style,
12
+ ...props
12
13
  }: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null
13
14
  >;
14
15
  export declare const liveTabLabelDefaultElement = 'span';
@@ -23,10 +24,6 @@ export type LiveTabLabelBaseProps = TextBaseProps & {
23
24
  * Whether to hide the dot.
24
25
  */
25
26
  hideDot?: boolean;
26
- /**
27
- * Whether to disable the pulse animation.
28
- */
29
- disablePulse?: boolean;
30
27
  };
31
28
  export type LiveTabLabelProps<AsComponent extends React.ElementType> = Polymorphic.Props<
32
29
  AsComponent,
@@ -37,23 +34,16 @@ type LiveTabLabelComponent = (<AsComponent extends React.ElementType = LiveTabLa
37
34
  ) => Polymorphic.ReactReturn) &
38
35
  Polymorphic.ReactNamed;
39
36
  export declare const LiveTabLabel: LiveTabLabelComponent;
40
- export type PeriodSelectorProps = SegmentedTabsProps;
37
+ export type PeriodSelectorProps = Omit<SegmentedTabsProps, 'styles' | 'classNames'> &
38
+ Pick<SegmentedTabsProps, 'styles' | 'classNames'>;
41
39
  /**
42
40
  * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
43
41
  * It provides transparent background, primary wash active state, and full-width layout by default.
44
42
  */
45
43
  export declare const PeriodSelector: React.MemoExoticComponent<
46
44
  React.ForwardRefExoticComponent<
47
- Partial<
48
- Pick<
49
- import('@coinbase/cds-web/tabs').TabsProps<string>,
50
- 'TabComponent' | 'TabsActiveIndicatorComponent'
51
- >
52
- > &
53
- Omit<
54
- import('@coinbase/cds-web/tabs').TabsProps<string>,
55
- 'TabComponent' | 'TabsActiveIndicatorComponent'
56
- > &
45
+ Omit<SegmentedTabsProps, 'styles' | 'classNames'> &
46
+ Pick<SegmentedTabsProps, 'styles' | 'classNames'> &
57
47
  React.RefAttributes<HTMLElement>
58
48
  >
59
49
  >;
@@ -1 +1 @@
1
- {"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAaxE,eAAO,MAAM,6BAA6B,4FAOrC,wBAAwB,oDAwB5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBA+C1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,+TA0B1B,CAAC"}
1
+ {"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOxE,eAAO,MAAM,6BAA6B,qGAQrC,wBAAwB,oDA0B5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBAiC1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,YAAY,CAAC,GACjF,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,YAAY,CAAC,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,cAAc,sMAwC1B,CAAC"}
@@ -1,36 +1,15 @@
1
1
  import React from 'react';
2
2
  import type { SVGProps } from 'react';
3
- import { type ChartPathCurveType } from '../utils';
4
- export type AreaComponentProps = {
5
- d: SVGProps<SVGPathElement>['d'];
6
- /**
7
- * The color of the area.
8
- * @default color of the series or 'var(--color-fgPrimary)'
9
- */
10
- fill?: string;
11
- fillOpacity?: number;
12
- stroke?: string;
13
- strokeWidth?: number;
14
- yAxisId?: string;
15
- animate?: boolean;
16
- /**
17
- * Baseline value for the gradient.
18
- * When set, overrides the default baseline.
19
- */
20
- baseline?: number;
21
- };
22
- export type AreaComponent = React.FC<AreaComponentProps>;
23
- export type AreaProps = Pick<
24
- AreaComponentProps,
25
- 'fill' | 'fillOpacity' | 'stroke' | 'strokeWidth' | 'baseline'
26
- > & {
3
+ import type { PathBaseProps, PathProps } from '../Path';
4
+ import { type ChartPathCurveType, type GradientDefinition } from '../utils';
5
+ export type AreaBaseProps = {
27
6
  /**
28
7
  * The ID of the series to render. Will be used to find the data from the chart context.
29
8
  */
30
9
  seriesId: string;
31
10
  /**
32
11
  * The curve interpolation method to use for the line.
33
- * @default 'linear'
12
+ * @default 'bump'
34
13
  */
35
14
  curve?: ChartPathCurveType;
36
15
  /**
@@ -43,6 +22,52 @@ export type AreaProps = Pick<
43
22
  * Takes precedence over the type prop if provided.
44
23
  */
45
24
  AreaComponent?: AreaComponent;
25
+ /**
26
+ * When true, the area is connected across null values.
27
+ */
28
+ connectNulls?: boolean;
29
+ /**
30
+ * The color of the area.
31
+ * @default color of the series or 'var(--color-fgPrimary)'
32
+ */
33
+ fill?: PathBaseProps['fill'];
34
+ /**
35
+ * Opacity of the area
36
+ * @note when combined with gradient, both will be applied
37
+ * @default 1
38
+ */
39
+ fillOpacity?: PathBaseProps['fillOpacity'];
40
+ /**
41
+ * Baseline value for the gradient.
42
+ * When set, overrides the default baseline.
43
+ */
44
+ baseline?: number;
45
+ /**
46
+ * Gradient configuration.
47
+ * When provided, creates gradient or threshold-based coloring.
48
+ */
49
+ gradient?: GradientDefinition;
50
+ /**
51
+ * Whether to animate the area.
52
+ * Overrides the animate value from the chart context.
53
+ */
54
+ animate?: PathBaseProps['animate'];
55
+ };
56
+ export type AreaProps = AreaBaseProps & Pick<PathProps, 'transitions' | 'transition'>;
57
+ export type AreaComponentProps = Pick<
58
+ AreaProps,
59
+ 'fill' | 'fillOpacity' | 'baseline' | 'gradient' | 'animate' | 'transitions' | 'transition'
60
+ > & {
61
+ /**
62
+ * Path of the area
63
+ */
64
+ d: SVGProps<SVGPathElement>['d'];
65
+ /**
66
+ * ID of the y-axis to use.
67
+ * If not provided, defaults to the default y-axis.
68
+ */
69
+ yAxisId?: string;
46
70
  };
71
+ export type AreaComponent = React.FC<AreaComponentProps>;
47
72
  export declare const Area: React.NamedExoticComponent<AreaProps>;
48
73
  //# sourceMappingURL=Area.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,kBAAkB,EAAe,MAAM,UAAU,CAAC;AAMhE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,kBAAkB,EAClB,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,CAC/D,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,IAAI,uCAmFhB,CAAC"}
1
+ {"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,KAAK,kBAAkB,EAAe,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMzF,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAC5F,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,uCAiFhB,CAAC"}
@@ -1,13 +1,41 @@
1
1
  import { type XAxisProps, type YAxisProps } from '../axis';
2
- import { type CartesianChartProps } from '../CartesianChart';
2
+ import { type CartesianChartBaseProps, type CartesianChartProps } from '../CartesianChart';
3
3
  import { type LineProps } from '../line/Line';
4
4
  import { type AxisConfigProps, type Series } from '../utils';
5
5
  import { type AreaProps } from './Area';
6
6
  export type AreaSeries = Series &
7
- Partial<Pick<AreaProps, 'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'fill'>> &
8
- Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>>;
9
- export type AreaChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'> &
10
- Pick<AreaProps, 'AreaComponent' | 'curve' | 'fillOpacity' | 'type'> &
7
+ Partial<
8
+ Pick<
9
+ AreaProps,
10
+ | 'AreaComponent'
11
+ | 'curve'
12
+ | 'fillOpacity'
13
+ | 'type'
14
+ | 'fill'
15
+ | 'connectNulls'
16
+ | 'transitions'
17
+ | 'transition'
18
+ >
19
+ > &
20
+ Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>> & {
21
+ /**
22
+ * The type of line to render for this series.
23
+ * Overrides the chart-level lineType if provided.
24
+ * @default 'solid'
25
+ */
26
+ lineType?: 'solid' | 'dotted';
27
+ };
28
+ export type AreaChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
29
+ Pick<
30
+ AreaProps,
31
+ | 'AreaComponent'
32
+ | 'curve'
33
+ | 'fillOpacity'
34
+ | 'type'
35
+ | 'connectNulls'
36
+ | 'transitions'
37
+ | 'transition'
38
+ > &
11
39
  Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
12
40
  /**
13
41
  * Configuration objects that define how to visualize the data.
@@ -40,10 +68,22 @@ export type AreaChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'seri
40
68
  * The type of line to render.
41
69
  * @default 'solid'
42
70
  */
43
- lineType?: 'solid' | 'dotted' | 'gradient';
71
+ lineType?: 'solid' | 'dotted';
72
+ /**
73
+ * Configuration for x-axis.
74
+ * Accepts axis config and axis props.
75
+ * To show the axis, set `showXAxis` to true.
76
+ */
44
77
  xAxis?: Partial<AxisConfigProps> & XAxisProps;
78
+ /**
79
+ * Configuration for y-axis.
80
+ * Accepts axis config and axis props.
81
+ * To show the axis, set `showYAxis` to true.
82
+ */
45
83
  yAxis?: Partial<AxisConfigProps> & YAxisProps;
46
84
  };
85
+ export type AreaChartProps = AreaChartBaseProps &
86
+ Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'>;
47
87
  export declare const AreaChart: import('react').MemoExoticComponent<
48
88
  import('react').ForwardRefExoticComponent<
49
89
  Omit<AreaChartProps, 'ref'> & import('react').RefAttributes<SVGSVGElement>
@@ -1 +1 @@
1
- {"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,GACrF,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC;AAEnF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAClF,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,CAAC,GACnE,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC,GAAG;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE3C,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,eAAO,MAAM,SAAS,4JAuKrB,CAAC"}
1
+ {"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,eAAe,GACf,OAAO,GACP,aAAa,GACb,MAAM,GACN,MAAM,GACN,cAAc,GACd,aAAa,GACb,YAAY,CACf,CACF,GACD,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,GAAG;IACjF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,eAAe,GACf,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,aAAa,GACb,YAAY,CACf,GACD,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC,GAAG;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS,4JAmLrB,CAAC"}
@@ -1,7 +1,18 @@
1
1
  import { type PathProps } from '../Path';
2
2
  import type { AreaComponentProps } from './Area';
3
- export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity' | 'clipRect'> &
4
- Omit<AreaComponentProps, 'clipRect'> & {
3
+ export type DottedAreaProps = Pick<
4
+ PathProps,
5
+ | 'stroke'
6
+ | 'strokeWidth'
7
+ | 'strokeOpacity'
8
+ | 'strokeLinecap'
9
+ | 'strokeLinejoin'
10
+ | 'strokeDasharray'
11
+ | 'strokeDashoffset'
12
+ | 'clipOffset'
13
+ | 'children'
14
+ > &
15
+ AreaComponentProps & {
5
16
  /**
6
17
  * Size of the pattern unit (width and height).
7
18
  * @default 4
@@ -14,55 +25,21 @@ export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity' | 'cl
14
25
  dotSize?: number;
15
26
  /**
16
27
  * Opacity at the peak values (top/bottom of gradient).
17
- * @default 0.3
28
+ * @note only used when no gradient is provided
29
+ * @default 1
18
30
  */
19
31
  peakOpacity?: number;
20
32
  /**
21
33
  * Opacity at the baseline (0 or edge closest to 0).
34
+ * @note only used when no gradient is provided
22
35
  * @default 0
23
36
  */
24
37
  baselineOpacity?: number;
25
- /**
26
- * ID of the y-axis to use for gradient range.
27
- * If not provided, defaults to the default y-axis.
28
- */
29
- yAxisId?: string;
30
- className?: string;
31
- style?: React.CSSProperties;
32
- /**
33
- * Custom class names for the component.
34
- */
35
- classNames?: {
36
- /**
37
- * Custom class name for the root element.
38
- */
39
- root?: string;
40
- /**
41
- * Custom class name for the pattern element.
42
- */
43
- pattern?: string;
44
- /**
45
- * Custom class name for the area path element.
46
- */
47
- path?: string;
48
- };
49
- /**
50
- * Custom styles for the component.
51
- */
52
- styles?: {
53
- /**
54
- * Custom styles for the root element.
55
- */
56
- root?: React.CSSProperties;
57
- /**
58
- * Custom styles for the pattern element.
59
- */
60
- pattern?: React.CSSProperties;
61
- /**
62
- * Custom styles for the area path element.
63
- */
64
- path?: React.CSSProperties;
65
- };
66
38
  };
39
+ /**
40
+ * A customizable dotted area gradient component.
41
+ * When no gradient is provided, renders a default gradient based
42
+ * on the fill color and peak/baseline opacities.
43
+ */
67
44
  export declare const DottedArea: import('react').NamedExoticComponent<DottedAreaProps>;
68
45
  //# sourceMappingURL=DottedArea.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC,GACtF,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,UAAU,uDA+HtB,CAAC"}
1
+ {"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,GAAG;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,UAAU,uDA4EtB,CAAC"}