@coinbase/cds-mobile-visualization 0.0.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/README.md +3 -0
  2. package/dts/index.d.ts +2 -0
  3. package/dts/index.d.ts.map +1 -0
  4. package/dts/sparkline/Counter.d.ts +3 -0
  5. package/dts/sparkline/Counter.d.ts.map +1 -0
  6. package/dts/sparkline/Sparkline.d.ts +22 -0
  7. package/dts/sparkline/Sparkline.d.ts.map +1 -0
  8. package/dts/sparkline/SparklineArea.d.ts +8 -0
  9. package/dts/sparkline/SparklineArea.d.ts.map +1 -0
  10. package/dts/sparkline/SparklineAreaPattern.d.ts +6 -0
  11. package/dts/sparkline/SparklineAreaPattern.d.ts.map +1 -0
  12. package/dts/sparkline/SparklineGradient.d.ts +12 -0
  13. package/dts/sparkline/SparklineGradient.d.ts.map +1 -0
  14. package/dts/sparkline/__figma__/Sparkline.figma.d.ts +2 -0
  15. package/dts/sparkline/__figma__/Sparkline.figma.d.ts.map +1 -0
  16. package/dts/sparkline/__stories__/Sparkline.stories.d.ts +3 -0
  17. package/dts/sparkline/__stories__/Sparkline.stories.d.ts.map +1 -0
  18. package/dts/sparkline/__stories__/SparklineGradient.stories.d.ts +3 -0
  19. package/dts/sparkline/__stories__/SparklineGradient.stories.d.ts.map +1 -0
  20. package/dts/sparkline/generateSparklineWithId.d.ts +5 -0
  21. package/dts/sparkline/generateSparklineWithId.d.ts.map +1 -0
  22. package/dts/sparkline/index.d.ts +6 -0
  23. package/dts/sparkline/index.d.ts.map +1 -0
  24. package/dts/sparkline/sparkline-interactive/SparklineAccessibleView.d.ts +18 -0
  25. package/dts/sparkline/sparkline-interactive/SparklineAccessibleView.d.ts.map +1 -0
  26. package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts +162 -0
  27. package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts.map +1 -0
  28. package/dts/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.d.ts +12 -0
  29. package/dts/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.d.ts.map +1 -0
  30. package/dts/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.d.ts +17 -0
  31. package/dts/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.d.ts.map +1 -0
  32. package/dts/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.d.ts +8 -0
  33. package/dts/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.d.ts.map +1 -0
  34. package/dts/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.d.ts +12 -0
  35. package/dts/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.d.ts.map +1 -0
  36. package/dts/sparkline/sparkline-interactive/SparklineInteractiveMinMax.d.ts +9 -0
  37. package/dts/sparkline/sparkline-interactive/SparklineInteractiveMinMax.d.ts.map +1 -0
  38. package/dts/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.d.ts +14 -0
  39. package/dts/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.d.ts.map +1 -0
  40. package/dts/sparkline/sparkline-interactive/SparklineInteractivePaths.d.ts +11 -0
  41. package/dts/sparkline/sparkline-interactive/SparklineInteractivePaths.d.ts.map +1 -0
  42. package/dts/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.d.ts +20 -0
  43. package/dts/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.d.ts.map +1 -0
  44. package/dts/sparkline/sparkline-interactive/SparklineInteractiveProvider.d.ts +33 -0
  45. package/dts/sparkline/sparkline-interactive/SparklineInteractiveProvider.d.ts.map +1 -0
  46. package/dts/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.d.ts +23 -0
  47. package/dts/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.d.ts.map +1 -0
  48. package/dts/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts +2 -0
  49. package/dts/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts.map +1 -0
  50. package/dts/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.d.ts +3 -0
  51. package/dts/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.d.ts.map +1 -0
  52. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.d.ts +2 -0
  53. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.d.ts.map +1 -0
  54. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.d.ts +2 -0
  55. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.d.ts.map +1 -0
  56. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.d.ts +2 -0
  57. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.d.ts.map +1 -0
  58. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.d.ts +2 -0
  59. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.d.ts.map +1 -0
  60. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.d.ts +2 -0
  61. package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.d.ts.map +1 -0
  62. package/dts/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.d.ts +2 -0
  63. package/dts/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.d.ts.map +1 -0
  64. package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.d.ts +9 -0
  65. package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.d.ts.map +1 -0
  66. package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.d.ts +2 -0
  67. package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.d.ts.map +1 -0
  68. package/dts/sparkline/sparkline-interactive/useMinMaxTransform.d.ts +11 -0
  69. package/dts/sparkline/sparkline-interactive/useMinMaxTransform.d.ts.map +1 -0
  70. package/dts/sparkline/sparkline-interactive/useOpacityAnimation.d.ts +3 -0
  71. package/dts/sparkline/sparkline-interactive/useOpacityAnimation.d.ts.map +1 -0
  72. package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts +22 -0
  73. package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts.map +1 -0
  74. package/dts/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.d.ts +31 -0
  75. package/dts/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.d.ts.map +1 -0
  76. package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts +110 -0
  77. package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts.map +1 -0
  78. package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts +2 -0
  79. package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map +1 -0
  80. package/dts/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.d.ts +4 -0
  81. package/dts/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.d.ts.map +1 -0
  82. package/dts/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.d.ts +2 -0
  83. package/dts/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.d.ts.map +1 -0
  84. package/dts/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.d.ts +2 -0
  85. package/dts/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.d.ts.map +1 -0
  86. package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts +26 -0
  87. package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts.map +1 -0
  88. package/esm/index.js +1 -0
  89. package/esm/sparkline/Counter.js +45 -0
  90. package/esm/sparkline/Sparkline.js +51 -0
  91. package/esm/sparkline/SparklineArea.js +14 -0
  92. package/esm/sparkline/SparklineAreaPattern.js +36 -0
  93. package/esm/sparkline/SparklineGradient.js +72 -0
  94. package/esm/sparkline/__figma__/Sparkline.figma.js +22 -0
  95. package/esm/sparkline/__stories__/Sparkline.stories.js +120 -0
  96. package/esm/sparkline/__stories__/SparklineGradient.stories.js +123 -0
  97. package/esm/sparkline/generateSparklineWithId.js +6 -0
  98. package/esm/sparkline/index.js +5 -0
  99. package/esm/sparkline/sparkline-interactive/SparklineAccessibleView.js +75 -0
  100. package/esm/sparkline/sparkline-interactive/SparklineInteractive.js +303 -0
  101. package/esm/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.js +113 -0
  102. package/esm/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.js +131 -0
  103. package/esm/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.js +99 -0
  104. package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js +82 -0
  105. package/esm/sparkline/sparkline-interactive/SparklineInteractiveMinMax.js +103 -0
  106. package/esm/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.js +104 -0
  107. package/esm/sparkline/sparkline-interactive/SparklineInteractivePaths.js +53 -0
  108. package/esm/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.js +124 -0
  109. package/esm/sparkline/sparkline-interactive/SparklineInteractiveProvider.js +80 -0
  110. package/esm/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.js +109 -0
  111. package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js +85 -0
  112. package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js +474 -0
  113. package/esm/sparkline/sparkline-interactive/useInterruptiblePathAnimation.js +58 -0
  114. package/esm/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.js +37 -0
  115. package/esm/sparkline/sparkline-interactive/useMinMaxTransform.js +56 -0
  116. package/esm/sparkline/sparkline-interactive/useOpacityAnimation.js +23 -0
  117. package/esm/sparkline/sparkline-interactive/useSparklineInteractiveConstants.js +47 -0
  118. package/esm/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.js +34 -0
  119. package/esm/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.js +233 -0
  120. package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js +104 -0
  121. package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js +555 -0
  122. package/esm/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.js +117 -0
  123. package/package.json +64 -5
  124. package/index.js +0 -1
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # @coinbase/cds-mobile-visualization
2
+
3
+ @coinbase/cds-mobile-visualization is a domain set of components that we have identified as mobile visualization components. They were moved from cds-web in an effort to decompose our core package and make it more reliable. The decomposition of our core packages (cds-web and cds-mobile) is an ongoing effort that should be continued over time, see [Design System Package Decomposition](../../docs/package-decomposition.md) for more information.
package/dts/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './sparkline';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
@@ -0,0 +1,3 @@
1
+ import type { CounterBaseProps } from '@coinbase/cds-mobile/visualizations/Counter';
2
+ export declare const Counter: ({ startNum, endNum, renderNum, durationInMillis }: CounterBaseProps) => import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=Counter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../src/sparkline/Counter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAcpF,eAAO,MAAM,OAAO,GAAI,mDAAmD,gBAAgB,4CAc1F,CAAC"}
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import type { ElementChildren, SharedProps } from '@coinbase/cds-common/types';
3
+ import type { SparklineAreaBaseProps } from './SparklineArea';
4
+ export type SparklineBaseProps = SharedProps & {
5
+ /** @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
+ background?: string;
7
+ /** 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. */
8
+ color: string;
9
+ /** Height of the Sparkline */
10
+ height: number;
11
+ /** 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. */
12
+ path?: string;
13
+ /** Width of the Sparkline */
14
+ width: number;
15
+ /** an optional SparklineArea that can be used to fill in the Sparkline */
16
+ children?: ElementChildren<SparklineAreaBaseProps>;
17
+ /** 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
+ yAxisScalingFactor?: number;
19
+ };
20
+ export type SparklineProps = SparklineBaseProps;
21
+ export declare const Sparkline: React.MemoExoticComponent<({ background, color, height, path, width, yAxisScalingFactor, children }: SparklineProps) => import("react/jsx-runtime").JSX.Element>;
22
+ //# sourceMappingURL=Sparkline.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG9D,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,uGACuD,cAAc,6CAmC1F,CAAC"}
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { Path } from 'react-native-svg';
3
+ export type SparklineAreaBaseProps = {
4
+ area?: string;
5
+ patternId?: string;
6
+ };
7
+ export declare const SparklineArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<SparklineAreaBaseProps & React.RefAttributes<Path | null>>>;
8
+ //# sourceMappingURL=SparklineArea.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,uHAMzB,CAAC"}
@@ -0,0 +1,6 @@
1
+ export type SparklineAreaPatternBaseProps = {
2
+ color: string;
3
+ id: string;
4
+ };
5
+ export declare const SparklineAreaPattern: ({ color, id }: SparklineAreaPatternBaseProps) => import("react/jsx-runtime").JSX.Element;
6
+ //# sourceMappingURL=SparklineAreaPattern.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAKA,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"}
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { Path } from 'react-native-svg';
3
+ export declare const SparklineGradient: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("@coinbase/cds-common").SharedProps & {
4
+ background?: string;
5
+ color: string;
6
+ height: number;
7
+ path?: string;
8
+ width: number;
9
+ children?: import("@coinbase/cds-common").ElementChildren<import("./SparklineArea").SparklineAreaBaseProps>;
10
+ yAxisScalingFactor?: number;
11
+ } & React.RefAttributes<Path | null>>>;
12
+ //# sourceMappingURL=SparklineGradient.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAA2B,IAAI,EAAa,MAAM,kBAAkB,CAAC;AAY5E,eAAO,MAAM,iBAAiB;;;;;;;;sCAqD7B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Sparkline.figma.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sparkline.figma.d.ts","sourceRoot":"","sources":["../../../src/sparkline/__figma__/Sparkline.figma.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,3 @@
1
+ declare const PressableOpacityScreen: () => import("react/jsx-runtime").JSX.Element;
2
+ export default PressableOpacityScreen;
3
+ //# sourceMappingURL=Sparkline.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sparkline.stories.d.ts","sourceRoot":"","sources":["../../../src/sparkline/__stories__/Sparkline.stories.tsx"],"names":[],"mappings":"AAgGA,QAAA,MAAM,sBAAsB,+CAwB3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
@@ -0,0 +1,3 @@
1
+ declare const PressableOpacityScreen: () => import("react/jsx-runtime").JSX.Element;
2
+ export default PressableOpacityScreen;
3
+ //# sourceMappingURL=SparklineGradient.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineGradient.stories.d.ts","sourceRoot":"","sources":["../../../src/sparkline/__stories__/SparklineGradient.stories.tsx"],"names":[],"mappings":"AA6FA,QAAA,MAAM,sBAAsB,+CA+B3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
@@ -0,0 +1,5 @@
1
+ import type React from 'react';
2
+ import type { ElementChildren } from '@coinbase/cds-common/types';
3
+ import type { SparklineAreaBaseProps } from './SparklineArea';
4
+ export declare function generateSparklineAreaWithId(id: string, children: ElementChildren<SparklineAreaBaseProps>): React.ReactElement<SparklineAreaBaseProps, string | React.JSXElementConstructor<any>> | undefined;
5
+ //# sourceMappingURL=generateSparklineWithId.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,6 @@
1
+ export * from './Sparkline';
2
+ export * from './sparkline-interactive/SparklineInteractive';
3
+ export * from './sparkline-interactive-header/SparklineInteractiveHeader';
4
+ export * from './SparklineArea';
5
+ export * from './SparklineGradient';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sparkline/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,8CAA8C,CAAC;AAC7D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
3
+ type SparklineAccessibleViewProps<Period extends string> = {
4
+ selectedPeriod: Period;
5
+ } & Pick<SparklineInteractiveBaseProps<Period>, 'data'>;
6
+ /**
7
+ * SparklineAccessibleView renders an accessible view for Sparkline Chart.
8
+ *
9
+ * It chunks the sparkline data into 10 (or fewer) pieces, rendering each as a View with
10
+ * flex width proportional to the chunk size. The first data point in each chunk is used
11
+ * to generate an accessibilityLabel with the date and value.
12
+ *
13
+ * @param data - The sparkline data mapped by time period
14
+ * @param selectedPeriod - The currently selected time period
15
+ */
16
+ export declare const SparklineAccessibleView: React.MemoExoticComponent<(<Period extends string>({ data, selectedPeriod }: SparklineAccessibleViewProps<Period>) => import("react/jsx-runtime").JSX.Element)>;
17
+ export {};
18
+ //# sourceMappingURL=SparklineAccessibleView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineAccessibleView.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineAccessibleView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAE5E,KAAK,4BAA4B,CAAC,MAAM,SAAS,MAAM,IAAI;IACzD,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,6BAA6B,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAcxD;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,8BAClC,MAAM,SAAS,MAAM,4BACK,4BAA4B,CAAC,MAAM,CAAC,8CA4D9D,CAAC"}
@@ -0,0 +1,162 @@
1
+ import React from 'react';
2
+ import { type StyleProp, type ViewStyle } from 'react-native';
3
+ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
4
+ import type { Placement } from '@coinbase/cds-common/types';
5
+ import type { ChartData, ChartFormatAmount, ChartFormatDate, ChartScrubParams, ChartTimeseries } from '@coinbase/cds-common/types/Chart';
6
+ export * from '@coinbase/cds-common/types/Chart';
7
+ export type SparklineInteractiveBaseProps<Period extends string> = {
8
+ /**
9
+ * Chart data bucketed by Period. Period is a string key
10
+ */
11
+ data?: Record<Period, ChartData>;
12
+ /**
13
+ * A list of periods that the chart will use. label is what is shown in the bottom of the chart and the value is the key.
14
+ */
15
+ periods: {
16
+ label: string;
17
+ value: Period;
18
+ }[];
19
+ /**
20
+ * default period value that the chart will use
21
+ */
22
+ defaultPeriod: Period;
23
+ /**
24
+ * Callback when the user selects a new period.
25
+ */
26
+ onPeriodChanged?: (period: Period) => void;
27
+ /**
28
+ * Callback when the user starts scrubbing
29
+ */
30
+ onScrubStart?: () => void;
31
+ /**
32
+ * Callback when a user finishes scrubbing
33
+ */
34
+ onScrubEnd?: () => void;
35
+ /**
36
+ * Callback used when the user is scrubbing. This will be called for every data point change.
37
+ */
38
+ onScrub?: (params: ChartScrubParams<Period>) => void;
39
+ /**
40
+ * Disables the scrub user interaction from the chart
41
+ *
42
+ * @default false
43
+ */
44
+ disableScrubbing?: boolean;
45
+ /**
46
+ * function used to format the date that is shown in the bottom of the chart as the user scrubs
47
+ */
48
+ formatDate: ChartFormatDate<Period>;
49
+ /**
50
+ * Color of the line*
51
+ */
52
+ strokeColor: string;
53
+ /**
54
+ * Fallback shown in the chart when data is not available. This is usually a loading state.
55
+ */
56
+ fallback?: React.ReactNode;
57
+ /**
58
+ * If you use the default fallback then this specifies if the fallback line is decreasing or increasing
59
+ */
60
+ fallbackType?: 'positive' | 'negative';
61
+ /**
62
+ * Show the chart in compact height
63
+ *
64
+ * @default false
65
+ */
66
+ compact?: boolean;
67
+ /**
68
+ * Hides the period selector at the bottom of the chart
69
+ *
70
+ * @default false
71
+ */
72
+ hidePeriodSelector?: boolean;
73
+ /**
74
+ * Adds an area fill to the Sparkline
75
+ *
76
+ * @default true
77
+ */
78
+ fill?: boolean;
79
+ /**
80
+ Formats the date above the chart as you scrub. Omit this if you don't want to show the date as the user scrubs
81
+ */
82
+ formatHoverDate?: (date: Date, period: Period) => string;
83
+ /**
84
+ Formats the price above the chart as you scrub. Omit this if you don't want to show the price as the user scrubs
85
+ */
86
+ formatHoverPrice?: (price: number) => string;
87
+ /**
88
+ * Adds a header node above the chart. It will be placed next to the period selector on web.
89
+ */
90
+ headerNode?: React.ReactNode;
91
+ /**
92
+ * Optional data to show on hover/scrub instead of the original sparkline. This allows multiple timeseries lines.
93
+ *
94
+ * Period => timeseries list
95
+ */
96
+ hoverData?: Record<Period, ChartTimeseries[]>;
97
+ /**
98
+ * Optional gutter to add to the Period selector. This is useful if you choose to use the full screen width for the chart
99
+ */
100
+ timePeriodGutter?: ThemeVars.Space;
101
+ /**
102
+ * Optional placement prop that position the period selector component above or below the chart
103
+ */
104
+ periodSelectorPlacement?: Extract<Placement, 'above' | 'below'>;
105
+ /** 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. */
106
+ yAxisScalingFactor?: number;
107
+ };
108
+ export type SparklineInteractiveDefaultFallback = Pick<SparklineInteractiveBaseProps<string>, 'fallbackType' | 'compact'>;
109
+ export type SparklineInteractiveHoverDateRefProps<Period extends string> = {
110
+ update: (params: ChartScrubParams<Period>) => void;
111
+ };
112
+ export type SparklineInteractiveProps<Period extends string> = SparklineInteractiveBaseProps<Period> & {
113
+ /**
114
+ * Hides the min and max label
115
+ *
116
+ * @default false
117
+ */
118
+ hideMinMaxLabel?: boolean;
119
+ /**
120
+ * function used to format the amount of money used in the minMaxLabel
121
+ */
122
+ formatMinMaxLabel?: ChartFormatAmount;
123
+ /**
124
+ * The amount of padding to apply to the left and right of the chart. The chart width is calculated by (screen width - 2* gutter).
125
+ *
126
+ * @default 3
127
+ */
128
+ gutter?: ThemeVars.Space;
129
+ /**
130
+ * The chart applies horizontal padding by default which is specified by the gutter.
131
+ * If the chart is placed in a container with padding then you can disable horizontal padding and set the gutter
132
+ * to match the container padding.
133
+ *
134
+ */
135
+ disableHorizontalPadding?: boolean;
136
+ /**
137
+ * Allows continuous gestures on the Sparkline chart to continue outside the bounds of the chart element.
138
+ */
139
+ allowOverflowGestures?: boolean;
140
+ /**
141
+ * Custom style for the root element.
142
+ */
143
+ style?: StyleProp<ViewStyle>;
144
+ /**
145
+ * Custom styles for the component.
146
+ */
147
+ styles?: {
148
+ /**
149
+ * Custom style for the header node.
150
+ */
151
+ header?: StyleProp<ViewStyle>;
152
+ /**
153
+ * Custom style for the root element.
154
+ */
155
+ root?: StyleProp<ViewStyle>;
156
+ };
157
+ /** Test ID for the header */
158
+ headerTestID?: string;
159
+ };
160
+ declare function SparklineInteractiveWithGeneric<Period extends string>({ compact, gutter, ...props }: SparklineInteractiveProps<Period>): import("react/jsx-runtime").JSX.Element;
161
+ export declare const SparklineInteractive: typeof SparklineInteractiveWithGeneric;
162
+ //# sourceMappingURL=SparklineInteractive.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAY,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EACV,SAAS,EAET,iBAAiB,EACjB,eAAe,EAEf,gBAAgB,EAChB,eAAe,EAChB,MAAM,kCAAkC,CAAC;AA2B1C,cAAc,kCAAkC,CAAC;AAEjD,MAAM,MAAM,6BAA6B,CAAC,MAAM,SAAS,MAAM,IAAI;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;IAC9C;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAChE,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,6BAA6B,CAAC,MAAM,CAAC,EACrC,cAAc,GAAG,SAAS,CAC3B,CAAC;AAiEF,MAAM,MAAM,qCAAqC,CAAC,MAAM,SAAS,MAAM,IAAI;IACzE,MAAM,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AAyOF,MAAM,MAAM,yBAAyB,CAAC,MAAM,SAAS,MAAM,IACzD,6BAA6B,CAAC,MAAM,CAAC,GAAG;IACtC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAEzB;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;IACF,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,iBAAS,+BAA+B,CAAC,MAAM,SAAS,MAAM,EAAE,EAC9D,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,yBAAyB,CAAC,MAAM,CAAC,2CAMnC;AAGD,eAAO,MAAM,oBAAoB,EAE5B,OAAO,+BAA+B,CAAC"}
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ export type SparklineInteractiveAnimatedPathProps = {
3
+ d: string;
4
+ color: string;
5
+ area?: string;
6
+ selectedPeriod: string;
7
+ yAxisScalingFactor?: number;
8
+ initialPath?: string;
9
+ initialArea?: string;
10
+ };
11
+ export declare const SparklineInteractiveAnimatedPath: React.MemoExoticComponent<({ d, color, selectedPeriod, area, yAxisScalingFactor, initialPath, initialArea, }: SparklineInteractiveAnimatedPathProps) => import("react/jsx-runtime").JSX.Element>;
12
+ //# sourceMappingURL=SparklineInteractiveAnimatedPath.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveAnimatedPath.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAY7E,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,6CAgHzC,CAAC"}
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { Animated } from 'react-native';
3
+ import type { ChartScrubParams } from '@coinbase/cds-common/types/Chart';
4
+ import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
5
+ type Props<Period extends string> = Pick<SparklineInteractiveBaseProps<Period>, 'formatHoverDate'> & {
6
+ shouldTakeUpHeight: boolean;
7
+ };
8
+ export declare function setTransform(x: number, elWidth: number, containerWidth: number, transform: Animated.ValueXY, gutter: number): void;
9
+ export type SparklineInteractiveHoverDateRefProps<Period extends string> = {
10
+ update: (params: ChartScrubParams<Period>) => void;
11
+ };
12
+ type ForwardRefWithPeriod<Period extends string> = React.ForwardRefExoticComponent<Props<Period> & {
13
+ ref?: React.Ref<SparklineInteractiveHoverDateRefProps<Period>>;
14
+ }>;
15
+ export declare const SparklineInteractiveHoverDate: ForwardRefWithPeriod<any>;
16
+ export {};
17
+ //# sourceMappingURL=SparklineInteractiveHoverDate.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveHoverDate.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAyB,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGzE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAI5E,KAAK,KAAK,CAAC,MAAM,SAAS,MAAM,IAAI,IAAI,CACtC,6BAA6B,CAAC,MAAM,CAAC,EACrC,iBAAiB,CAClB,GAAG;IACF,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,YAAY,CAC1B,CAAC,EAAE,MAAM,EACT,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,QAAQ,CAAC,OAAO,EAC3B,MAAM,EAAE,MAAM,QAOf;AAiBD,MAAM,MAAM,qCAAqC,CAAC,MAAM,SAAS,MAAM,IAAI;IACzE,MAAM,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AA8GF,KAAK,oBAAoB,CAAC,MAAM,SAAS,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAChF,KAAK,CAAC,MAAM,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qCAAqC,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CACnF,CAAC;AAEF,eAAO,MAAM,6BAA6B,EACI,oBAAoB,CAAC,GAAG,CAAC,CAAC"}
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ type SparklineInteractiveLineVerticalMobileProps = {
3
+ color: string;
4
+ showHoverDate: boolean;
5
+ };
6
+ export declare const SparklineInteractiveLineVertical: React.MemoExoticComponent<({ color, showHoverDate }: SparklineInteractiveLineVerticalMobileProps) => import("react/jsx-runtime").JSX.Element>;
7
+ export {};
8
+ //# sourceMappingURL=SparklineInteractiveLineVertical.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveLineVertical.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAW7C,KAAK,2CAA2C,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAuFF,eAAO,MAAM,gCAAgC,uDAChB,2CAA2C,6CAgBvE,CAAC"}
@@ -0,0 +1,12 @@
1
+ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
2
+ import type { ChartFormatDate, ChartGetMarker } from './SparklineInteractive';
3
+ export type SparklineInteractiveMarkerDatesProps<Period extends string> = {
4
+ getMarker: ChartGetMarker;
5
+ formatDate: ChartFormatDate<Period>;
6
+ selectedPeriod: Period;
7
+ timePeriodGutter?: ThemeVars.Space;
8
+ };
9
+ declare function SparklineInteractiveMarkerDatesWithGeneric<Period extends string>({ formatDate, selectedPeriod, getMarker, timePeriodGutter, }: SparklineInteractiveMarkerDatesProps<Period>): import("react/jsx-runtime").JSX.Element;
10
+ export declare const SparklineInteractiveMarkerDates: typeof SparklineInteractiveMarkerDatesWithGeneric;
11
+ export {};
12
+ //# sourceMappingURL=SparklineInteractiveMarkerDates.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveMarkerDates.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA2C9E,MAAM,MAAM,oCAAoC,CAAC,MAAM,SAAS,MAAM,IAAI;IACxE,SAAS,EAAE,cAAc,CAAC;IAC1B,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACpC,CAAC;AAEF,iBAAS,0CAA0C,CAAC,MAAM,SAAS,MAAM,EAAE,EACzE,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,GACjB,EAAE,oCAAoC,CAAC,MAAM,CAAC,2CAkC9C;AAED,eAAO,MAAM,+BAA+B,EAEvC,OAAO,0CAA0C,CAAC"}
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { ChartDataPoint, ChartFormatAmount, ChartXFunction } from '@coinbase/cds-common/types';
3
+ export type SparklineInteractiveMinMaxProps = {
4
+ dataPoint: ChartDataPoint | undefined;
5
+ formatMinMaxLabel: ChartFormatAmount;
6
+ xFunction: ChartXFunction;
7
+ };
8
+ export declare const SparklineInteractiveMinMax: React.FunctionComponent<React.PropsWithChildren<SparklineInteractiveMinMaxProps>>;
9
+ //# sourceMappingURL=SparklineInteractiveMinMax.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveMinMax.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AA0EpG,MAAM,MAAM,+BAA+B,GAAG;IAC5C,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;IACtC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,SAAS,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,iBAAiB,CAC9D,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAwBxD,CAAC"}
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import type { ChartGetMarker, ChartScrubParams } from '@coinbase/cds-common/types/Chart';
3
+ import { type SparklineInteractiveProps } from './SparklineInteractive';
4
+ export type SparklineInteractivePanGestureHandlerProps<Period extends string> = Pick<SparklineInteractiveProps<Period>, 'allowOverflowGestures'> & {
5
+ onScrub?: (params: ChartScrubParams<Period>) => void;
6
+ getMarker: ChartGetMarker;
7
+ selectedPeriod: Period;
8
+ onScrubEnd?: () => void;
9
+ onScrubStart?: () => void;
10
+ disabled?: boolean;
11
+ children: React.ReactNode;
12
+ };
13
+ export declare const SparklineInteractivePanGestureHandler: <Period extends string>({ onScrubEnd, onScrubStart, onScrub, getMarker, selectedPeriod, children, disabled, allowOverflowGestures, }: SparklineInteractivePanGestureHandlerProps<Period>) => import("react/jsx-runtime").JSX.Element;
14
+ //# sourceMappingURL=SparklineInteractivePanGestureHandler.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractivePanGestureHandler.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIzF,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAMxE,MAAM,MAAM,0CAA0C,CAAC,MAAM,SAAS,MAAM,IAAI,IAAI,CAClF,yBAAyB,CAAC,MAAM,CAAC,EACjC,uBAAuB,CACxB,GAAG;IACF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,EAAE,cAAc,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,qCAAqC,GAChD,MAAM,SAAS,MAAM,EACrB,8GASC,0CAA0C,CAAC,MAAM,CAAC,4CA0FpD,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
2
+ export type SparklineInteractivePathsProps<Period extends string> = Pick<SparklineInteractiveBaseProps<Period>, 'fill' | 'yAxisScalingFactor' | 'strokeColor' | 'hoverData' | 'compact'> & {
3
+ showHoverData: boolean;
4
+ path: string;
5
+ area: string;
6
+ selectedPeriod: Period;
7
+ };
8
+ declare function SparklineInteractivePathsWithGeneric<Period extends string>({ showHoverData, fill, path, area, selectedPeriod, yAxisScalingFactor, strokeColor, hoverData, compact, }: SparklineInteractivePathsProps<Period>): import("react/jsx-runtime").JSX.Element;
9
+ export declare const SparklineInteractivePaths: typeof SparklineInteractivePathsWithGeneric;
10
+ export {};
11
+ //# sourceMappingURL=SparklineInteractivePaths.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractivePaths.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx"],"names":[],"mappings":"AAGA,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,2CAuCxC;AAED,eAAO,MAAM,yBAAyB,EAEjC,OAAO,oCAAoC,CAAC"}
@@ -0,0 +1,20 @@
1
+ export type SparklineInteractivePeriodSelectorProps<Period extends string> = {
2
+ selectedPeriod: Period;
3
+ setSelectedPeriod: (period: Period) => void;
4
+ periods: {
5
+ label: string;
6
+ value: Period;
7
+ }[];
8
+ color: string;
9
+ };
10
+ export type SparklineInteractivePeriodProps<Period extends string> = {
11
+ period: {
12
+ label: string;
13
+ value: Period;
14
+ };
15
+ selectedPeriod: Period;
16
+ setSelectedPeriod: SparklineInteractivePeriodSelectorProps<Period>['setSelectedPeriod'];
17
+ color: string;
18
+ };
19
+ export declare const SparklineInteractivePeriodSelector: <Period extends string>({ selectedPeriod, setSelectedPeriod, periods, color, }: SparklineInteractivePeriodSelectorProps<Period>) => import("react/jsx-runtime").JSX.Element;
20
+ //# sourceMappingURL=SparklineInteractivePeriodSelector.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractivePeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,uCAAuC,CAAC,MAAM,SAAS,MAAM,IAAI;IAC3E,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,+BAA+B,CAAC,MAAM,SAAS,MAAM,IAAI;IACnE,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,uCAAuC,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAC;IACxF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA+EF,eAAO,MAAM,kCAAkC,GAAI,MAAM,SAAS,MAAM,EAAE,wDAKvE,uCAAuC,CAAC,MAAM,CAAC,4CAyDjD,CAAC"}
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import { Animated } from 'react-native';
3
+ import type { SharedValue } from 'react-native-reanimated';
4
+ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
5
+ type SparklineInteractiveProviderProps = {
6
+ children: React.ReactNode;
7
+ compact?: boolean;
8
+ gutter?: ThemeVars.Space;
9
+ };
10
+ type SparklineInteractiveContextInterface = {
11
+ isFallbackVisible: boolean;
12
+ markerXPosition: SharedValue<number>;
13
+ markerGestureState: SharedValue<0 | 1>;
14
+ showFallback: () => void;
15
+ hideFallback: () => void;
16
+ chartOpacity: Animated.Value;
17
+ animateChartIn: Animated.CompositeAnimation;
18
+ markerOpacity: Animated.Value;
19
+ animateMarkerIn: Animated.CompositeAnimation;
20
+ animateMarkerOut: Animated.CompositeAnimation;
21
+ minMaxOpacity: Animated.Value;
22
+ animateMinMaxIn: Animated.CompositeAnimation;
23
+ animateMinxMaxOut: Animated.CompositeAnimation;
24
+ hoverDateOpacity: Animated.Value;
25
+ animateHoverDateIn: Animated.CompositeAnimation;
26
+ animateHoverDateOut: Animated.CompositeAnimation;
27
+ compact: boolean;
28
+ gutter: ThemeVars.Space;
29
+ };
30
+ export declare const SparklineInteractiveProvider: React.MemoExoticComponent<({ children, compact, gutter: propGutter }: SparklineInteractiveProviderProps) => import("react/jsx-runtime").JSX.Element>;
31
+ export declare function useSparklineInteractiveContext(): SparklineInteractiveContextInterface;
32
+ export {};
33
+ //# sourceMappingURL=SparklineInteractiveProvider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveProvider.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,KAAK,iCAAiC,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC1B,CAAC;AAEF,KAAK,oCAAoC,GAAG;IAC1C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,kBAAkB,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC7B,cAAc,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC5C,aAAa,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC9B,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,gBAAgB,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC9C,aAAa,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC9B,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,iBAAiB,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC/C,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,kBAAkB,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAChD,mBAAmB,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAuBF,eAAO,MAAM,4BAA4B,wEACa,iCAAiC,6CAoEtF,CAAC;AAEF,wBAAgB,8BAA8B,yCAE7C"}
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types';
3
+ import type { Area, Line } from 'd3-shape';
4
+ export type TimeseriesPathOnRenderParams = {
5
+ path: string;
6
+ area: string;
7
+ };
8
+ export type TimeseriesPathProps = {
9
+ lineFn: Line<ChartDataPoint>;
10
+ areaFn: Area<ChartDataPoint>;
11
+ timeseries: ChartTimeseries;
12
+ initialPath: string;
13
+ onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
14
+ };
15
+ export type SparklineInteractiveTimeseriesPathsProps = {
16
+ initialPath: string;
17
+ data: ChartTimeseries[];
18
+ width: number;
19
+ height: number;
20
+ onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
21
+ };
22
+ export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<({ data, width, height, initialPath, onRender }: SparklineInteractiveTimeseriesPathsProps) => import("react/jsx-runtime").JSX.Element>;
23
+ //# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveTimeseriesPaths.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAMlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC7B,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC7B,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,4BAA4B,KAAK,IAAI,CAAC;CACnE,CAAC;AA8EF,MAAM,MAAM,wCAAwC,GAAG;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,eAAO,MAAM,mCAAmC,6EACG,wCAAwC,6CA2B1F,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=SparklineInteractive.figma.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractive.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,3 @@
1
+ declare const SparklineInteractiveScreen: () => import("react/jsx-runtime").JSX.Element;
2
+ export default SparklineInteractiveScreen;
3
+ //# sourceMappingURL=SparklineInteractive.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractive.stories.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx"],"names":[],"mappings":"AAsPA,QAAA,MAAM,0BAA0B,+CAqQ/B,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=SparklineInteractive.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractive.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=SparklineInteractiveHoverDate.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractiveHoverDate.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=SparklineInteractivePanGestureHandler.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractivePanGestureHandler.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=SparklineInteractivePeriodSelector.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SparklineInteractivePeriodSelector.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx"],"names":[],"mappings":""}