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

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 (212) hide show
  1. package/CHANGELOG.md +50 -2
  2. package/dts/chart/CartesianChart.d.ts +72 -0
  3. package/dts/chart/CartesianChart.d.ts.map +1 -0
  4. package/dts/chart/ChartProvider.d.ts +6 -0
  5. package/dts/chart/ChartProvider.d.ts.map +1 -0
  6. package/dts/chart/Path.d.ts +54 -0
  7. package/dts/chart/Path.d.ts.map +1 -0
  8. package/dts/chart/PeriodSelector.d.ts +57 -0
  9. package/dts/chart/PeriodSelector.d.ts.map +1 -0
  10. package/dts/chart/area/Area.d.ts +78 -0
  11. package/dts/chart/area/Area.d.ts.map +1 -0
  12. package/dts/chart/area/AreaChart.d.ts +79 -0
  13. package/dts/chart/area/AreaChart.d.ts.map +1 -0
  14. package/dts/chart/area/DottedArea.d.ts +45 -0
  15. package/dts/chart/area/DottedArea.d.ts.map +1 -0
  16. package/dts/chart/area/GradientArea.d.ts +39 -0
  17. package/dts/chart/area/GradientArea.d.ts.map +1 -0
  18. package/dts/chart/area/SolidArea.d.ts +23 -0
  19. package/dts/chart/area/SolidArea.d.ts.map +1 -0
  20. package/dts/chart/area/index.d.ts +6 -0
  21. package/dts/chart/area/index.d.ts.map +1 -0
  22. package/dts/chart/axis/Axis.d.ts +255 -0
  23. package/dts/chart/axis/Axis.d.ts.map +1 -0
  24. package/dts/chart/axis/DefaultAxisTickLabel.d.ts +8 -0
  25. package/dts/chart/axis/DefaultAxisTickLabel.d.ts.map +1 -0
  26. package/dts/chart/axis/XAxis.d.ts +16 -0
  27. package/dts/chart/axis/XAxis.d.ts.map +1 -0
  28. package/dts/chart/axis/YAxis.d.ts +21 -0
  29. package/dts/chart/axis/YAxis.d.ts.map +1 -0
  30. package/dts/chart/axis/index.d.ts +5 -0
  31. package/dts/chart/axis/index.d.ts.map +1 -0
  32. package/dts/chart/bar/Bar.d.ts +94 -0
  33. package/dts/chart/bar/Bar.d.ts.map +1 -0
  34. package/dts/chart/bar/BarChart.d.ts +62 -0
  35. package/dts/chart/bar/BarChart.d.ts.map +1 -0
  36. package/dts/chart/bar/BarPlot.d.ts +30 -0
  37. package/dts/chart/bar/BarPlot.d.ts.map +1 -0
  38. package/dts/chart/bar/BarStack.d.ts +103 -0
  39. package/dts/chart/bar/BarStack.d.ts.map +1 -0
  40. package/dts/chart/bar/BarStackGroup.d.ts +36 -0
  41. package/dts/chart/bar/BarStackGroup.d.ts.map +1 -0
  42. package/dts/chart/bar/DefaultBar.d.ts +17 -0
  43. package/dts/chart/bar/DefaultBar.d.ts.map +1 -0
  44. package/dts/chart/bar/DefaultBarStack.d.ts +16 -0
  45. package/dts/chart/bar/DefaultBarStack.d.ts.map +1 -0
  46. package/dts/chart/bar/index.d.ts +8 -0
  47. package/dts/chart/bar/index.d.ts.map +1 -0
  48. package/dts/chart/gradient/Gradient.d.ts +35 -0
  49. package/dts/chart/gradient/Gradient.d.ts.map +1 -0
  50. package/dts/chart/gradient/index.d.ts +2 -0
  51. package/dts/chart/gradient/index.d.ts.map +1 -0
  52. package/dts/chart/index.d.ts +14 -0
  53. package/dts/chart/index.d.ts.map +1 -0
  54. package/dts/chart/line/DefaultReferenceLineLabel.d.ts +9 -0
  55. package/dts/chart/line/DefaultReferenceLineLabel.d.ts.map +1 -0
  56. package/dts/chart/line/DottedLine.d.ts +26 -0
  57. package/dts/chart/line/DottedLine.d.ts.map +1 -0
  58. package/dts/chart/line/Line.d.ts +122 -0
  59. package/dts/chart/line/Line.d.ts.map +1 -0
  60. package/dts/chart/line/LineChart.d.ts +77 -0
  61. package/dts/chart/line/LineChart.d.ts.map +1 -0
  62. package/dts/chart/line/ReferenceLine.d.ts +178 -0
  63. package/dts/chart/line/ReferenceLine.d.ts.map +1 -0
  64. package/dts/chart/line/SolidLine.d.ts +25 -0
  65. package/dts/chart/line/SolidLine.d.ts.map +1 -0
  66. package/dts/chart/line/index.d.ts +7 -0
  67. package/dts/chart/line/index.d.ts.map +1 -0
  68. package/dts/chart/point/DefaultPointLabel.d.ts +10 -0
  69. package/dts/chart/point/DefaultPointLabel.d.ts.map +1 -0
  70. package/dts/chart/point/Point.d.ts +201 -0
  71. package/dts/chart/point/Point.d.ts.map +1 -0
  72. package/dts/chart/point/index.d.ts +3 -0
  73. package/dts/chart/point/index.d.ts.map +1 -0
  74. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts +24 -0
  75. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -0
  76. package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts +12 -0
  77. package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts.map +1 -0
  78. package/dts/chart/scrubber/DefaultScrubberLabel.d.ts +10 -0
  79. package/dts/chart/scrubber/DefaultScrubberLabel.d.ts.map +1 -0
  80. package/dts/chart/scrubber/Scrubber.d.ts +290 -0
  81. package/dts/chart/scrubber/Scrubber.d.ts.map +1 -0
  82. package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +70 -0
  83. package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -0
  84. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +32 -0
  85. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -0
  86. package/dts/chart/scrubber/ScrubberProvider.d.ts +17 -0
  87. package/dts/chart/scrubber/ScrubberProvider.d.ts.map +1 -0
  88. package/dts/chart/scrubber/index.d.ts +5 -0
  89. package/dts/chart/scrubber/index.d.ts.map +1 -0
  90. package/dts/chart/text/ChartText.d.ts +117 -0
  91. package/dts/chart/text/ChartText.d.ts.map +1 -0
  92. package/dts/chart/text/ChartTextGroup.d.ts +61 -0
  93. package/dts/chart/text/ChartTextGroup.d.ts.map +1 -0
  94. package/dts/chart/text/index.d.ts +3 -0
  95. package/dts/chart/text/index.d.ts.map +1 -0
  96. package/dts/chart/utils/axis.d.ts +342 -0
  97. package/dts/chart/utils/axis.d.ts.map +1 -0
  98. package/dts/chart/utils/bar.d.ts +20 -0
  99. package/dts/chart/utils/bar.d.ts.map +1 -0
  100. package/dts/chart/utils/chart.d.ts +117 -0
  101. package/dts/chart/utils/chart.d.ts.map +1 -0
  102. package/dts/chart/utils/context.d.ts +101 -0
  103. package/dts/chart/utils/context.d.ts.map +1 -0
  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 +12 -0
  107. package/dts/chart/utils/index.d.ts.map +1 -0
  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 +130 -0
  111. package/dts/chart/utils/path.d.ts.map +1 -0
  112. package/dts/chart/utils/point.d.ts +104 -0
  113. package/dts/chart/utils/point.d.ts.map +1 -0
  114. package/dts/chart/utils/scale.d.ts +43 -0
  115. package/dts/chart/utils/scale.d.ts.map +1 -0
  116. package/dts/chart/utils/scrubber.d.ts +39 -0
  117. package/dts/chart/utils/scrubber.d.ts.map +1 -0
  118. package/dts/chart/utils/transition.d.ts +65 -0
  119. package/dts/chart/utils/transition.d.ts.map +1 -0
  120. package/dts/index.d.ts +1 -0
  121. package/dts/index.d.ts.map +1 -1
  122. package/dts/sparkline/Sparkline.d.ts +44 -9
  123. package/dts/sparkline/Sparkline.d.ts.map +1 -1
  124. package/dts/sparkline/SparklineArea.d.ts +4 -0
  125. package/dts/sparkline/SparklineArea.d.ts.map +1 -1
  126. package/dts/sparkline/SparklineAreaPattern.d.ts +5 -0
  127. package/dts/sparkline/SparklineAreaPattern.d.ts.map +1 -1
  128. package/dts/sparkline/SparklineGradient.d.ts +5 -0
  129. package/dts/sparkline/SparklineGradient.d.ts.map +1 -1
  130. package/dts/sparkline/generateSparklineWithId.d.ts +1 -0
  131. package/dts/sparkline/generateSparklineWithId.d.ts.map +1 -1
  132. package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts +9 -0
  133. package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts.map +1 -1
  134. package/dts/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.d.ts +3 -0
  135. package/dts/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.d.ts.map +1 -1
  136. package/dts/sparkline/sparkline-interactive/SparklineInteractivePaths.d.ts +2 -1
  137. package/dts/sparkline/sparkline-interactive/SparklineInteractivePaths.d.ts.map +1 -1
  138. package/esm/chart/CartesianChart.css +1 -0
  139. package/esm/chart/CartesianChart.js +313 -0
  140. package/esm/chart/ChartProvider.js +10 -0
  141. package/esm/chart/Path.js +95 -0
  142. package/esm/chart/PeriodSelector.css +1 -0
  143. package/esm/chart/PeriodSelector.js +112 -0
  144. package/esm/chart/area/Area.js +75 -0
  145. package/esm/chart/area/AreaChart.js +173 -0
  146. package/esm/chart/area/DottedArea.js +87 -0
  147. package/esm/chart/area/GradientArea.js +65 -0
  148. package/esm/chart/area/SolidArea.js +47 -0
  149. package/esm/chart/area/index.js +7 -0
  150. package/esm/chart/axis/Axis.js +25 -0
  151. package/esm/chart/axis/DefaultAxisTickLabel.js +15 -0
  152. package/esm/chart/axis/XAxis.css +2 -0
  153. package/esm/chart/axis/XAxis.js +219 -0
  154. package/esm/chart/axis/YAxis.css +2 -0
  155. package/esm/chart/axis/YAxis.js +214 -0
  156. package/esm/chart/axis/index.js +6 -0
  157. package/esm/chart/bar/Bar.js +61 -0
  158. package/esm/chart/bar/BarChart.js +130 -0
  159. package/esm/chart/bar/BarPlot.js +97 -0
  160. package/esm/chart/bar/BarStack.js +561 -0
  161. package/esm/chart/bar/BarStackGroup.js +86 -0
  162. package/esm/chart/bar/DefaultBar.js +61 -0
  163. package/esm/chart/bar/DefaultBarStack.js +58 -0
  164. package/esm/chart/bar/index.js +9 -0
  165. package/esm/chart/gradient/Gradient.js +104 -0
  166. package/esm/chart/gradient/index.js +1 -0
  167. package/esm/chart/index.js +15 -0
  168. package/esm/chart/line/DefaultReferenceLineLabel.js +81 -0
  169. package/esm/chart/line/DottedLine.js +59 -0
  170. package/esm/chart/line/Line.js +185 -0
  171. package/esm/chart/line/LineChart.js +132 -0
  172. package/esm/chart/line/ReferenceLine.js +140 -0
  173. package/esm/chart/line/SolidLine.js +55 -0
  174. package/esm/chart/line/index.js +8 -0
  175. package/esm/chart/point/DefaultPointLabel.js +44 -0
  176. package/esm/chart/point/Point.css +2 -0
  177. package/esm/chart/point/Point.js +180 -0
  178. package/esm/chart/point/index.js +2 -0
  179. package/esm/chart/scrubber/DefaultScrubberBeacon.js +155 -0
  180. package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js +46 -0
  181. package/esm/chart/scrubber/DefaultScrubberLabel.js +30 -0
  182. package/esm/chart/scrubber/Scrubber.js +189 -0
  183. package/esm/chart/scrubber/ScrubberBeaconGroup.js +166 -0
  184. package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +186 -0
  185. package/esm/chart/scrubber/ScrubberProvider.js +228 -0
  186. package/esm/chart/scrubber/index.js +4 -0
  187. package/esm/chart/text/ChartText.js +230 -0
  188. package/esm/chart/text/ChartTextGroup.js +227 -0
  189. package/esm/chart/text/index.js +4 -0
  190. package/esm/chart/utils/axis.js +593 -0
  191. package/esm/chart/utils/bar.js +24 -0
  192. package/esm/chart/utils/chart.js +255 -0
  193. package/esm/chart/utils/context.js +15 -0
  194. package/esm/chart/utils/gradient.js +257 -0
  195. package/esm/chart/utils/index.js +13 -0
  196. package/esm/chart/utils/interpolate.js +644 -0
  197. package/esm/chart/utils/path.js +227 -0
  198. package/esm/chart/utils/point.js +187 -0
  199. package/esm/chart/utils/scale.js +48 -0
  200. package/esm/chart/utils/scrubber.js +132 -0
  201. package/esm/chart/utils/transition.js +111 -0
  202. package/esm/index.js +4 -1
  203. package/esm/sparkline/Sparkline.js +129 -15
  204. package/esm/sparkline/SparklineArea.js +7 -2
  205. package/esm/sparkline/SparklineAreaPattern.js +4 -2
  206. package/esm/sparkline/SparklineGradient.js +16 -58
  207. package/esm/sparkline/generateSparklineWithId.js +3 -2
  208. package/esm/sparkline/sparkline-interactive/SparklineInteractive.js +5 -1
  209. package/esm/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.js +5 -2
  210. package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js +1 -1
  211. package/esm/sparkline/sparkline-interactive/SparklineInteractivePaths.js +4 -0
  212. package/package.json +13 -9
@@ -0,0 +1,104 @@
1
+ import type { TextHorizontalAlignment, TextVerticalAlignment } from '../text';
2
+ import { type ChartScaleFunction } from './scale';
3
+ /**
4
+ * Position a label should be placed relative to the point
5
+ *
6
+ * @example
7
+ * 'top' would have the label be located above the point itself,
8
+ * and thus the vertical alignment of that text would be bottom.
9
+ */
10
+ export type PointLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
11
+ /**
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).
18
+ */
19
+ export declare const getPointOnScale: (dataValue: number, scale: ChartScaleFunction) => number;
20
+ /**
21
+ * Projects a data point to pixel coordinates using the chart scale.
22
+ * Automatically handles log scale transformations for zero/negative values.
23
+ *
24
+ * @example
25
+ * ```typescript
26
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
27
+ * const pixelCoord = projectPoint({ x: 5, y: 10, chartScale });
28
+ * ```
29
+ * @example
30
+ * ```typescript
31
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
32
+ * const pixelCoord = projectPoint({ x: 2, y: 10, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
33
+ * ```
34
+ */
35
+ export declare const projectPoint: ({
36
+ x,
37
+ y,
38
+ xScale,
39
+ yScale,
40
+ }: {
41
+ x: number;
42
+ y: number;
43
+ xScale: ChartScaleFunction;
44
+ yScale: ChartScaleFunction;
45
+ }) => {
46
+ x: number;
47
+ y: number;
48
+ };
49
+ /**
50
+ * Projects multiple data points to pixel coordinates using chart scale functions.
51
+ * Handles both numeric and band scales automatically.
52
+ *
53
+ * @example
54
+ * ```typescript
55
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
56
+ * const pixelPoints = projectPoints({ data, chartScale });
57
+ * // For mixed scales
58
+ * const pixelPoints = projectPoints({ data, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
59
+ * ```
60
+ */
61
+ export declare const projectPoints: ({
62
+ data,
63
+ xScale,
64
+ yScale,
65
+ xData,
66
+ yData,
67
+ }: {
68
+ data: (
69
+ | number
70
+ | null
71
+ | {
72
+ x: number;
73
+ y: number;
74
+ }
75
+ )[];
76
+ xData?: number[];
77
+ yData?: number[];
78
+ xScale: ChartScaleFunction;
79
+ yScale: ChartScaleFunction;
80
+ }) => Array<{
81
+ x: number;
82
+ y: number;
83
+ } | null>;
84
+ /**
85
+ * Determines text alignment based on label position.
86
+ * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
87
+ */
88
+ export declare const getAlignmentFromPosition: (position: PointLabelPosition) => {
89
+ horizontalAlignment: TextHorizontalAlignment;
90
+ verticalAlignment: TextVerticalAlignment;
91
+ };
92
+ /**
93
+ * Calculates the final label coordinates by applying offset based on position.
94
+ */
95
+ export declare const getLabelCoordinates: (
96
+ x: number,
97
+ y: number,
98
+ position: PointLabelPosition,
99
+ offset: number,
100
+ ) => {
101
+ x: number;
102
+ y: number;
103
+ };
104
+ //# sourceMappingURL=point.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,43 @@
1
+ import type { ScaleBand, ScaleLinear, ScaleLogarithmic } from 'd3-scale';
2
+ import type { AxisBounds } from './chart';
3
+ export type ChartAxisScaleType = 'linear' | 'log' | 'band';
4
+ export type NumericScale =
5
+ | ScaleLinear<number, number, never>
6
+ | ScaleLogarithmic<number, number, never>;
7
+ export type CategoricalScale = ScaleBand<number>;
8
+ export type ChartScaleFunction = NumericScale | CategoricalScale;
9
+ export declare const isCategoricalScale: (scale: ChartScaleFunction) => scale is CategoricalScale;
10
+ export declare const isNumericScale: (scale: ChartScaleFunction) => scale is NumericScale;
11
+ /**
12
+ * Type guard to check if a scale is logarithmic.
13
+ */
14
+ export declare const isLogScale: (
15
+ scale: ChartScaleFunction,
16
+ ) => scale is ScaleLogarithmic<number, number, never>;
17
+ /**
18
+ * Create a numeric scale (linear or logarithmic)
19
+ * @returns A numeric scale function
20
+ */
21
+ export declare const getNumericScale: ({
22
+ scaleType,
23
+ domain,
24
+ range,
25
+ }: {
26
+ scaleType: 'linear' | 'log';
27
+ domain: AxisBounds;
28
+ range: AxisBounds;
29
+ }) => NumericScale;
30
+ /**
31
+ * Create a categorical scale (band)
32
+ * @returns A categorical scale function
33
+ */
34
+ export declare const getCategoricalScale: ({
35
+ domain,
36
+ range,
37
+ padding,
38
+ }: {
39
+ domain: AxisBounds;
40
+ range: AxisBounds;
41
+ padding?: number;
42
+ }) => CategoricalScale;
43
+ //# sourceMappingURL=scale.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,39 @@
1
+ import type { Rect } from '@coinbase/cds-common/types';
2
+ export type ScrubberLabelPosition = 'left' | 'right';
3
+ export type LabelPosition = {
4
+ seriesId: string;
5
+ x: number;
6
+ y: number;
7
+ };
8
+ export type LabelDimensions = {
9
+ width: number;
10
+ height: number;
11
+ };
12
+ /**
13
+ * Determines which side (left/right) to place scrubber labels based on available space.
14
+ * Prefers right side, switches to left when labels would overflow.
15
+ */
16
+ export declare const getLabelPosition: (
17
+ beaconX: number,
18
+ maxLabelWidth: number,
19
+ drawingArea: Rect,
20
+ xOffset?: number,
21
+ ) => ScrubberLabelPosition;
22
+ type LabelDimension = {
23
+ seriesId: string;
24
+ width: number;
25
+ height: number;
26
+ preferredX: number;
27
+ preferredY: number;
28
+ };
29
+ /**
30
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
31
+ */
32
+ export declare const calculateLabelYPositions: (
33
+ dimensions: LabelDimension[],
34
+ drawingArea: Rect,
35
+ labelHeight: number,
36
+ minGap: number,
37
+ ) => Map<string, number>;
38
+ export {};
39
+ //# sourceMappingURL=scrubber.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scrubber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,MAAM,EACf,eAAe,MAAM,EACrB,aAAa,IAAI,EACjB,UAAS,MAAW,KACnB,qBASF,CAAC;AAQF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,cAAc,EAAE,EAC5B,aAAa,IAAI,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,KACb,GAAG,CAAC,MAAM,EAAE,MAAM,CAoIpB,CAAC"}
@@ -0,0 +1,65 @@
1
+ import { type MotionValue, type Transition } from 'framer-motion';
2
+ /**
3
+ * Default transition configuration used across all chart components.
4
+ */
5
+ export declare const defaultTransition: Transition;
6
+ /**
7
+ * Duration in seconds for accessory elements to fade in.
8
+ */
9
+ export declare const accessoryFadeTransitionDuration = 0.15;
10
+ /**
11
+ * Delay in seconds before accessory elements fade in.
12
+ */
13
+ export declare const accessoryFadeTransitionDelay = 0.35;
14
+ /**
15
+ * Hook for path animation state and transitions.
16
+ *
17
+ * @param currentPath - Current target path to animate to
18
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
19
+ * @param transition - Transition configuration
20
+ * @returns MotionValue containing the current interpolated path string
21
+ *
22
+ * @example
23
+ * // Simple path transition
24
+ * const animatedPath = usePathTransition({
25
+ * currentPath: d ?? '',
26
+ * transition: {
27
+ * type: 'spring',
28
+ * stiffness: 300,
29
+ * damping: 20
30
+ * }
31
+ * });
32
+ *
33
+ * @example
34
+ * // Time based animation
35
+ * const animatedPath = usePathTransition({
36
+ * currentPath: targetPath,
37
+ * initialPath: baselinePath,
38
+ * transition: {
39
+ * type: 'tween',
40
+ * duration: 0.3,
41
+ * ease: 'easeInOut'
42
+ * }
43
+ * });
44
+ */
45
+ export declare const usePathTransition: ({
46
+ currentPath,
47
+ initialPath,
48
+ transition,
49
+ }: {
50
+ /**
51
+ * Current target path to animate to.
52
+ */
53
+ currentPath: string;
54
+ /**
55
+ * Initial path for enter animation.
56
+ * When provided, the first animation will go from initialPath to currentPath.
57
+ * If not provided, defaults to currentPath (no enter animation).
58
+ */
59
+ initialPath?: string;
60
+ /**
61
+ * Transition configuration
62
+ */
63
+ transition?: Transition;
64
+ }) => MotionValue<string>;
65
+ //# sourceMappingURL=transition.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EAIhB,MAAM,eAAe,CAAC;AAEvB;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,OAAO,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,iBAAiB,GAAI,2CAI/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAwDrB,CAAC"}
package/dts/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ export * from './chart';
1
2
  export * from './sparkline';
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}
@@ -1,6 +1,9 @@
1
1
  import React from 'react';
2
2
  import type { ElementChildren, SharedProps } from '@coinbase/cds-common/types';
3
3
  import type { SparklineAreaBaseProps } from './SparklineArea';
4
+ import type { SparklinePathRef } from './SparklinePath';
5
+ export type SparklineStrokeType = 'gradient' | 'solid';
6
+ export type SparklineFillType = 'dotted' | 'gradient' | 'gradientDotted';
4
7
  export type SparklineBaseProps = SharedProps & {
5
8
  /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
6
9
  background?: string;
@@ -16,17 +19,49 @@ export type SparklineBaseProps = SharedProps & {
16
19
  children?: ElementChildren<SparklineAreaBaseProps>;
17
20
  /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
18
21
  yAxisScalingFactor?: number;
22
+ /**
23
+ * Type of stroke to use for the line
24
+ * @default 'solid'
25
+ */
26
+ strokeType?: SparklineStrokeType;
27
+ /**
28
+ * Type of fill to use for the area
29
+ * @default 'dotted'
30
+ */
31
+ fillType?: SparklineFillType;
19
32
  };
20
33
  export type SparklineProps = SparklineBaseProps;
34
+ /**
35
+ * @deprecated Use LineChart instead.
36
+ */
21
37
  export declare const Sparkline: React.MemoExoticComponent<
22
- ({
23
- background,
24
- color,
25
- height,
26
- path,
27
- width,
28
- yAxisScalingFactor,
29
- children,
30
- }: SparklineBaseProps) => import('react/jsx-runtime').JSX.Element
38
+ React.ForwardRefExoticComponent<
39
+ SharedProps & {
40
+ /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
41
+ background?: string;
42
+ /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables. */
43
+ color: string;
44
+ /** Height of the Sparkline */
45
+ height: number;
46
+ /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
47
+ path?: string;
48
+ /** Width of the Sparkline */
49
+ width: number;
50
+ /** an optional SparklineArea that can be used to fill in the Sparkline */
51
+ children?: ElementChildren<SparklineAreaBaseProps>;
52
+ /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
53
+ yAxisScalingFactor?: number;
54
+ /**
55
+ * Type of stroke to use for the line
56
+ * @default 'solid'
57
+ */
58
+ strokeType?: SparklineStrokeType;
59
+ /**
60
+ * Type of fill to use for the area
61
+ * @default 'dotted'
62
+ */
63
+ fillType?: SparklineFillType;
64
+ } & React.RefAttributes<SparklinePathRef>
65
+ >
31
66
  >;
32
67
  //# sourceMappingURL=Sparkline.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD,eAAO,MAAM,SAAS,wGASjB,kBAAkB,6CA6BtB,CAAC"}
1
+ {"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,SAAS;IA/BpB,iPAAiP;iBACpO,MAAM;IACnB,oQAAoQ;WAC7P,MAAM;IACb,8BAA8B;YACtB,MAAM;IACd,kWAAkW;WAC3V,MAAM;IACb,6BAA6B;WACtB,MAAM;IACb,0EAA0E;eAC/D,eAAe,CAAC,sBAAsB,CAAC;IAClD,oOAAoO;yBAC/M,MAAM;IAC3B;;;OAGG;iBACU,mBAAmB;IAChC;;;OAGG;eACQ,iBAAiB;2CA4J7B,CAAC"}
@@ -2,7 +2,11 @@ import React from 'react';
2
2
  export type SparklineAreaBaseProps = {
3
3
  area?: string;
4
4
  patternId?: string;
5
+ maskId?: string;
5
6
  };
7
+ /**
8
+ * @deprecated Use AreaChart instead.
9
+ */
6
10
  export declare const SparklineArea: React.MemoExoticComponent<
7
11
  React.ForwardRefExoticComponent<
8
12
  SparklineAreaBaseProps & React.RefAttributes<SVGPathElement | null>
@@ -1 +1 @@
1
- {"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,iIAMzB,CAAC"}
1
+ {"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,iIAazB,CAAC"}
@@ -1,9 +1,14 @@
1
1
  export type SparklineAreaPatternBaseProps = {
2
2
  color: string;
3
3
  id: string;
4
+ /**
5
+ * Opacity for the pattern. If not provided, uses theme-based opacity from useSparklineAreaOpacity.
6
+ */
7
+ opacity?: number;
4
8
  };
5
9
  export declare const SparklineAreaPattern: ({
6
10
  color,
7
11
  id,
12
+ opacity,
8
13
  }: SparklineAreaPatternBaseProps) => import('react/jsx-runtime').JSX.Element;
9
14
  //# sourceMappingURL=SparklineAreaPattern.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,eAAe,6BAA6B,4CAWhF,CAAC"}
1
+ {"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,wBAAwB,6BAA6B,4CAazF,CAAC"}
@@ -1,5 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { SparklinePathRef } from './SparklinePath';
3
+ /**
4
+ * @deprecated Use LineChart instead.
5
+ */
3
6
  export declare const SparklineGradient: React.MemoExoticComponent<
4
7
  React.ForwardRefExoticComponent<
5
8
  import('@coinbase/cds-common').SharedProps & {
@@ -12,6 +15,8 @@ export declare const SparklineGradient: React.MemoExoticComponent<
12
15
  import('./SparklineArea').SparklineAreaBaseProps
13
16
  >;
14
17
  yAxisScalingFactor?: number;
18
+ strokeType?: import('./Sparkline').SparklineStrokeType;
19
+ fillType?: import('./Sparkline').SparklineFillType;
15
20
  } & React.RefAttributes<SparklinePathRef>
16
21
  >
17
22
  >;
@@ -1 +1 @@
1
- {"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,eAAO,MAAM,iBAAiB;;;;;;;;2CA+C7B,CAAC"}
1
+ {"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;2CAoB7B,CAAC"}
@@ -4,6 +4,7 @@ import type { SparklineAreaBaseProps } from './SparklineArea';
4
4
  export declare function generateSparklineAreaWithId(
5
5
  id: string,
6
6
  children: ElementChildren<SparklineAreaBaseProps>,
7
+ maskId?: string,
7
8
  ):
8
9
  | React.ReactElement<SparklineAreaBaseProps, string | React.JSXElementConstructor<any>>
9
10
  | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"generateSparklineWithId.d.ts","sourceRoot":"","sources":["../../src/sparkline/generateSparklineWithId.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,wBAAgB,2BAA2B,CACzC,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,eAAe,CAAC,sBAAsB,CAAC,qGAOlD"}
1
+ {"version":3,"file":"generateSparklineWithId.d.ts","sourceRoot":"","sources":["../../src/sparkline/generateSparklineWithId.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,wBAAgB,2BAA2B,CACzC,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,eAAe,CAAC,sBAAsB,CAAC,EACjD,MAAM,CAAC,EAAE,MAAM,qGAQhB"}
@@ -84,6 +84,11 @@ export type SparklineInteractiveBaseProps<Period extends string> = {
84
84
  * @default true
85
85
  */
86
86
  fill?: boolean;
87
+ /**
88
+ * Type of fill to use for the area
89
+ * @default 'gradient'
90
+ */
91
+ fillType?: 'dotted' | 'gradient';
87
92
  /**
88
93
  Formats the date above the chart as you scrub. Omit this if you don't want to show the date as the user scrubs
89
94
  */
@@ -166,6 +171,7 @@ declare function SparklineInteractiveContentWithGeneric<Period extends string>({
166
171
  hidePeriodSelector,
167
172
  disableScrubbing,
168
173
  fill,
174
+ fillType,
169
175
  yAxisScalingFactor,
170
176
  compact,
171
177
  formatHoverDate,
@@ -186,5 +192,8 @@ declare function SparklineInteractiveWithGeneric<Period extends string>({
186
192
  compact,
187
193
  ...props
188
194
  }: SparklineInteractiveProps<Period>): import('react/jsx-runtime').JSX.Element;
195
+ /**
196
+ * @deprecated Use LineChart instead.
197
+ */
189
198
  export declare const SparklineInteractive: typeof SparklineInteractiveWithGeneric;
190
199
  //# sourceMappingURL=SparklineInteractive.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"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"}
@@ -1,10 +1,12 @@
1
1
  import 'd3-transition';
2
2
  import React from 'react';
3
+ import { type SparklineFillType } from '../Sparkline';
3
4
  export type SparklineInteractiveAnimatedPathProps = {
4
5
  d: string;
5
6
  color: string;
6
7
  area?: string;
7
8
  selectedPeriod: string;
9
+ fillType?: SparklineFillType;
8
10
  yAxisScalingFactor?: number;
9
11
  initialPath?: string;
10
12
  initialArea?: string;
@@ -15,6 +17,7 @@ export declare const SparklineInteractiveAnimatedPath: React.MemoExoticComponent
15
17
  color,
16
18
  selectedPeriod,
17
19
  area,
20
+ fillType,
18
21
  yAxisScalingFactor,
19
22
  initialPath,
20
23
  initialArea,
@@ -1 +1 @@
1
- {"version":3,"file":"SparklineInteractiveAnimatedPath.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAc7E,MAAM,MAAM,qCAAqC,GAAG;IAClD,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gCAAgC,gHASxC,qCAAqC,6CA+GzC,CAAC"}
1
+ {"version":3,"file":"SparklineInteractiveAnimatedPath.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAM7E,OAAO,EAAa,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAQjE,MAAM,MAAM,qCAAqC,GAAG;IAClD,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gCAAgC,0HAUxC,qCAAqC,6CAiHzC,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
2
2
  export type SparklineInteractivePathsProps<Period extends string> = Pick<
3
3
  SparklineInteractiveBaseProps<Period>,
4
- 'fill' | 'yAxisScalingFactor' | 'strokeColor' | 'hoverData' | 'compact'
4
+ 'fill' | 'fillType' | 'yAxisScalingFactor' | 'strokeColor' | 'hoverData' | 'compact'
5
5
  > & {
6
6
  showHoverData: boolean;
7
7
  path: string;
@@ -11,6 +11,7 @@ export type SparklineInteractivePathsProps<Period extends string> = Pick<
11
11
  declare function SparklineInteractivePathsWithGeneric<Period extends string>({
12
12
  showHoverData,
13
13
  fill,
14
+ fillType,
14
15
  path,
15
16
  area,
16
17
  selectedPeriod,
@@ -1 +1 @@
1
- {"version":3,"file":"SparklineInteractivePaths.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAQ5E,MAAM,MAAM,8BAA8B,CAAC,MAAM,SAAS,MAAM,IAAI,IAAI,CACtE,6BAA6B,CAAC,MAAM,CAAC,EACrC,MAAM,GAAG,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,CACxE,GAAG;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iBAAS,oCAAoC,CAAC,MAAM,SAAS,MAAM,EAAE,EACnE,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,OAAO,GACR,EAAE,8BAA8B,CAAC,MAAM,CAAC,2CAwCxC;AAED,eAAO,MAAM,yBAAyB,EAEjC,OAAO,oCAAoC,CAAC"}
1
+ {"version":3,"file":"SparklineInteractivePaths.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAQ5E,MAAM,MAAM,8BAA8B,CAAC,MAAM,SAAS,MAAM,IAAI,IAAI,CACtE,6BAA6B,CAAC,MAAM,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,CACrF,GAAG;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iBAAS,oCAAoC,CAAC,MAAM,SAAS,MAAM,EAAE,EACnE,aAAa,EACb,IAAI,EACJ,QAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,OAAO,GACR,EAAE,8BAA8B,CAAC,MAAM,CAAC,2CA2CxC;AAED,eAAO,MAAM,yBAAyB,EAEjC,OAAO,oCAAoC,CAAC"}
@@ -0,0 +1 @@
1
+ .cds-focusStylesCss-f4oy7ru:focus{outline:none;}.cds-focusStylesCss-f4oy7ru:focus-visible{outline:2px solid var(--color-bgPrimary);outline-offset:2px;}