react-native-wagmi-charts 2.9.0 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -66
- package/lib/commonjs/charts/candle/Candle.js +92 -177
- package/lib/commonjs/charts/candle/Candles.js +39 -66
- package/lib/commonjs/charts/candle/Chart.js +26 -37
- package/lib/commonjs/charts/candle/Context.js +49 -69
- package/lib/commonjs/charts/candle/Crosshair.js +82 -183
- package/lib/commonjs/charts/candle/Crosshair.js.map +1 -1
- package/lib/commonjs/charts/candle/CrosshairTooltip.js +61 -140
- package/lib/commonjs/charts/candle/DatetimeText.js +14 -19
- package/lib/commonjs/charts/candle/Line.js +27 -73
- package/lib/commonjs/charts/candle/PriceText.js +14 -19
- package/lib/commonjs/charts/candle/index.js +64 -67
- package/lib/commonjs/charts/candle/types.js +4 -4
- package/lib/commonjs/charts/candle/useCandleData.js +12 -9
- package/lib/commonjs/charts/candle/useCandlestickChart.js +7 -9
- package/lib/commonjs/charts/candle/useDatetime.js +18 -16
- package/lib/commonjs/charts/candle/usePrice.js +22 -21
- package/lib/commonjs/charts/candle/utils/getDomain.js +9 -5
- package/lib/commonjs/charts/candle/utils/getDomain.js.map +1 -1
- package/lib/commonjs/charts/candle/utils/getHeight.js +11 -12
- package/lib/commonjs/charts/candle/utils/getHeight.js.map +1 -1
- package/lib/commonjs/charts/candle/utils/getPrice.js +11 -12
- package/lib/commonjs/charts/candle/utils/getPrice.js.map +1 -1
- package/lib/commonjs/charts/candle/utils/getY.js +11 -12
- package/lib/commonjs/charts/candle/utils/getY.js.map +1 -1
- package/lib/commonjs/charts/candle/utils/index.js +16 -16
- package/lib/commonjs/charts/line/Axis.js +148 -268
- package/lib/commonjs/charts/line/Chart.js +62 -129
- package/lib/commonjs/charts/line/Chart.js.map +1 -1
- package/lib/commonjs/charts/line/ChartPath.js +105 -285
- package/lib/commonjs/charts/line/Context.js +37 -95
- package/lib/commonjs/charts/line/Cursor.js +74 -125
- package/lib/commonjs/charts/line/Cursor.js.map +1 -1
- package/lib/commonjs/charts/line/CursorCrosshair.js +56 -134
- package/lib/commonjs/charts/line/CursorCrosshair.js.map +1 -1
- package/lib/commonjs/charts/line/CursorLine.js +67 -152
- package/lib/commonjs/charts/line/CursorLine.js.map +1 -1
- package/lib/commonjs/charts/line/Data.js +34 -73
- package/lib/commonjs/charts/line/DatetimeText.js +15 -20
- package/lib/commonjs/charts/line/Dot.js +56 -149
- package/lib/commonjs/charts/line/Gradient.js +53 -124
- package/lib/commonjs/charts/line/Group.js +23 -54
- package/lib/commonjs/charts/line/Group.js.map +1 -1
- package/lib/commonjs/charts/line/Highlight.js +47 -115
- package/lib/commonjs/charts/line/HorizontalLine.js +39 -92
- package/lib/commonjs/charts/line/HoverTrap/index.js +7 -10
- package/lib/commonjs/charts/line/HoverTrap/index.web.js +43 -48
- package/lib/commonjs/charts/line/LineChartPathContext.js +11 -14
- package/lib/commonjs/charts/line/Path.js +32 -78
- package/lib/commonjs/charts/line/PriceText.js +36 -78
- package/lib/commonjs/charts/line/Tooltip.js +102 -188
- package/lib/commonjs/charts/line/Tooltip.js.map +1 -1
- package/lib/commonjs/charts/line/index.js +65 -65
- package/lib/commonjs/charts/line/types.js +4 -4
- package/lib/commonjs/charts/line/useAnimatedPath.js +22 -27
- package/lib/commonjs/charts/line/useCurrentY.js +17 -17
- package/lib/commonjs/charts/line/useDatetime.js +28 -32
- package/lib/commonjs/charts/line/useLineChart.js +15 -20
- package/lib/commonjs/charts/line/usePrice.js +26 -28
- package/lib/commonjs/charts/line/utils/getArea.js +14 -47
- package/lib/commonjs/charts/line/utils/getDomain.js +8 -5
- package/lib/commonjs/charts/line/utils/getDomain.js.map +1 -1
- package/lib/commonjs/charts/line/utils/getPath.js +14 -53
- package/lib/commonjs/charts/line/utils/getXPositionForCurve.js +5 -8
- package/lib/commonjs/charts/line/utils/index.js +19 -19
- package/lib/commonjs/charts/line/utils/interpolatePath.js +60 -100
- package/lib/commonjs/charts/line/utils/lineChartDataPropToArray.js +5 -5
- package/lib/commonjs/components/AnimatedText.js +29 -67
- package/lib/commonjs/index.js +19 -19
- package/lib/commonjs/types.js +2 -2
- package/lib/commonjs/utils/formatDatetime.js +9 -5
- package/lib/commonjs/utils/formatPrice.js +6 -10
- package/lib/commonjs/utils/index.js +13 -13
- package/lib/commonjs/utils/usePrevious.js +6 -8
- package/lib/module/charts/candle/Candle.js +76 -126
- package/lib/module/charts/candle/Candles.js +30 -52
- package/lib/module/charts/candle/Chart.js +19 -22
- package/lib/module/charts/candle/Context.js +29 -47
- package/lib/module/charts/candle/Crosshair.js +69 -142
- package/lib/module/charts/candle/Crosshair.js.map +1 -1
- package/lib/module/charts/candle/CrosshairTooltip.js +51 -101
- package/lib/module/charts/candle/DatetimeText.js +5 -5
- package/lib/module/charts/candle/Line.js +19 -37
- package/lib/module/charts/candle/PriceText.js +5 -5
- package/lib/module/charts/candle/index.js +2 -2
- package/lib/module/charts/candle/types.js +1 -1
- package/lib/module/charts/candle/useCandleData.js +7 -3
- package/lib/module/charts/candle/useCandlestickChart.js +1 -1
- package/lib/module/charts/candle/useDatetime.js +12 -10
- package/lib/module/charts/candle/usePrice.js +14 -12
- package/lib/module/charts/candle/utils/getDomain.js +6 -2
- package/lib/module/charts/candle/utils/getDomain.js.map +1 -1
- package/lib/module/charts/candle/utils/getHeight.js +8 -9
- package/lib/module/charts/candle/utils/getHeight.js.map +1 -1
- package/lib/module/charts/candle/utils/getPrice.js +8 -4
- package/lib/module/charts/candle/utils/getPrice.js.map +1 -1
- package/lib/module/charts/candle/utils/getY.js +8 -4
- package/lib/module/charts/candle/utils/getY.js.map +1 -1
- package/lib/module/charts/candle/utils/index.js +1 -1
- package/lib/module/charts/line/Axis.js +113 -189
- package/lib/module/charts/line/Chart.js +40 -73
- package/lib/module/charts/line/Chart.js.map +1 -1
- package/lib/module/charts/line/ChartPath.js +90 -238
- package/lib/module/charts/line/Context.js +29 -61
- package/lib/module/charts/line/Cursor.js +61 -82
- package/lib/module/charts/line/Cursor.js.map +1 -1
- package/lib/module/charts/line/CursorCrosshair.js +47 -99
- package/lib/module/charts/line/CursorCrosshair.js.map +1 -1
- package/lib/module/charts/line/CursorLine.js +52 -107
- package/lib/module/charts/line/CursorLine.js.map +1 -1
- package/lib/module/charts/line/Data.js +28 -41
- package/lib/module/charts/line/DatetimeText.js +5 -5
- package/lib/module/charts/line/Dot.js +39 -93
- package/lib/module/charts/line/Gradient.js +41 -79
- package/lib/module/charts/line/Group.js +14 -15
- package/lib/module/charts/line/Group.js.map +1 -1
- package/lib/module/charts/line/Highlight.js +32 -61
- package/lib/module/charts/line/HorizontalLine.js +27 -49
- package/lib/module/charts/line/HoverTrap/index.js +2 -3
- package/lib/module/charts/line/HoverTrap/index.web.js +34 -34
- package/lib/module/charts/line/LineChartPathContext.js +3 -3
- package/lib/module/charts/line/Path.js +20 -33
- package/lib/module/charts/line/PriceText.js +25 -42
- package/lib/module/charts/line/Tooltip.js +89 -151
- package/lib/module/charts/line/Tooltip.js.map +1 -1
- package/lib/module/charts/line/index.js +2 -2
- package/lib/module/charts/line/types.js +1 -1
- package/lib/module/charts/line/useAnimatedPath.js +16 -22
- package/lib/module/charts/line/useCurrentY.js +9 -4
- package/lib/module/charts/line/useDatetime.js +22 -26
- package/lib/module/charts/line/useLineChart.js +7 -10
- package/lib/module/charts/line/usePrice.js +20 -22
- package/lib/module/charts/line/utils/getArea.js +8 -15
- package/lib/module/charts/line/utils/getDomain.js +5 -2
- package/lib/module/charts/line/utils/getDomain.js.map +1 -1
- package/lib/module/charts/line/utils/getPath.js +8 -21
- package/lib/module/charts/line/utils/getXPositionForCurve.js +2 -5
- package/lib/module/charts/line/utils/index.js +1 -1
- package/lib/module/charts/line/utils/interpolatePath.js +57 -97
- package/lib/module/charts/line/utils/lineChartDataPropToArray.js +2 -2
- package/lib/module/components/AnimatedText.js +21 -25
- package/lib/module/index.js +1 -1
- package/lib/module/types.js +2 -1
- package/lib/module/utils/formatDatetime.js +6 -2
- package/lib/module/utils/formatPrice.js +3 -7
- package/lib/module/utils/index.js +1 -1
- package/lib/module/utils/usePrevious.js +1 -1
- package/lib/typescript/src/charts/candle/Candle.d.ts +31 -45
- package/lib/typescript/src/charts/candle/Candles.d.ts +13 -24
- package/lib/typescript/src/charts/candle/Chart.d.ts +7 -12
- package/lib/typescript/src/charts/candle/Context.d.ts +7 -12
- package/lib/typescript/src/charts/candle/Crosshair.d.ts +9 -17
- package/lib/typescript/src/charts/candle/CrosshairTooltip.d.ts +8 -15
- package/lib/typescript/src/charts/candle/DatetimeText.d.ts +9 -15
- package/lib/typescript/src/charts/candle/Line.d.ts +5 -10
- package/lib/typescript/src/charts/candle/PriceText.d.ts +7 -13
- package/lib/typescript/src/charts/candle/index.d.ts +13 -32
- package/lib/typescript/src/charts/candle/types.d.ts +16 -16
- package/lib/typescript/src/charts/candle/useCandleData.d.ts +1 -1
- package/lib/typescript/src/charts/candle/useCandlestickChart.d.ts +1 -1
- package/lib/typescript/src/charts/candle/useDatetime.d.ts +9 -13
- package/lib/typescript/src/charts/candle/usePrice.d.ts +7 -11
- package/lib/typescript/src/charts/candle/utils/getDomain.d.ts +1 -1
- package/lib/typescript/src/charts/candle/utils/getDomain.d.ts.map +1 -1
- package/lib/typescript/src/charts/candle/utils/getHeight.d.ts +5 -9
- package/lib/typescript/src/charts/candle/utils/getPrice.d.ts +5 -9
- package/lib/typescript/src/charts/candle/utils/getY.d.ts +5 -9
- package/lib/typescript/src/charts/candle/utils/index.d.ts +1 -1
- package/lib/typescript/src/charts/line/Axis.d.ts +14 -27
- package/lib/typescript/src/charts/line/Chart.d.ts +23 -33
- package/lib/typescript/src/charts/line/Chart.d.ts.map +1 -1
- package/lib/typescript/src/charts/line/ChartPath.d.ts +15 -28
- package/lib/typescript/src/charts/line/Context.d.ts +9 -16
- package/lib/typescript/src/charts/line/Cursor.d.ts +14 -22
- package/lib/typescript/src/charts/line/Cursor.d.ts.map +1 -1
- package/lib/typescript/src/charts/line/CursorCrosshair.d.ts +11 -23
- package/lib/typescript/src/charts/line/CursorCrosshair.d.ts.map +1 -1
- package/lib/typescript/src/charts/line/CursorLine.d.ts +9 -15
- package/lib/typescript/src/charts/line/CursorLine.d.ts.map +1 -1
- package/lib/typescript/src/charts/line/Data.d.ts +13 -17
- package/lib/typescript/src/charts/line/DatetimeText.d.ts +8 -14
- package/lib/typescript/src/charts/line/Dot.d.ts +25 -38
- package/lib/typescript/src/charts/line/Gradient.d.ts +5 -9
- package/lib/typescript/src/charts/line/Group.d.ts +3 -6
- package/lib/typescript/src/charts/line/Group.d.ts.map +1 -1
- package/lib/typescript/src/charts/line/Highlight.d.ts +9 -17
- package/lib/typescript/src/charts/line/HorizontalLine.d.ts +22 -30
- package/lib/typescript/src/charts/line/HoverTrap/index.d.ts +1 -1
- package/lib/typescript/src/charts/line/HoverTrap/index.web.d.ts +1 -1
- package/lib/typescript/src/charts/line/LineChartPathContext.d.ts +4 -4
- package/lib/typescript/src/charts/line/Path.d.ts +23 -28
- package/lib/typescript/src/charts/line/PriceText.d.ts +20 -28
- package/lib/typescript/src/charts/line/Tooltip.d.ts +20 -32
- package/lib/typescript/src/charts/line/index.d.ts +20 -33
- package/lib/typescript/src/charts/line/types.d.ts +17 -19
- package/lib/typescript/src/charts/line/useAnimatedPath.d.ts +7 -10
- package/lib/typescript/src/charts/line/useCurrentY.d.ts +2 -2
- package/lib/typescript/src/charts/line/useDatetime.d.ts +7 -11
- package/lib/typescript/src/charts/line/useLineChart.d.ts +10 -10
- package/lib/typescript/src/charts/line/usePrice.d.ts +7 -11
- package/lib/typescript/src/charts/line/utils/getArea.d.ts +9 -17
- package/lib/typescript/src/charts/line/utils/getDomain.d.ts +1 -1
- package/lib/typescript/src/charts/line/utils/getDomain.d.ts.map +1 -1
- package/lib/typescript/src/charts/line/utils/getPath.d.ts +11 -21
- package/lib/typescript/src/charts/line/utils/getXPositionForCurve.d.ts +1 -1
- package/lib/typescript/src/charts/line/utils/index.d.ts +1 -1
- package/lib/typescript/src/charts/line/utils/interpolatePath.d.ts +5 -17
- package/lib/typescript/src/charts/line/utils/lineChartDataPropToArray.d.ts +2 -4
- package/lib/typescript/src/components/AnimatedText.d.ts +4 -7
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/types.d.ts +4 -7
- package/lib/typescript/src/utils/formatDatetime.d.ts +5 -9
- package/lib/typescript/src/utils/formatPrice.d.ts +5 -9
- package/lib/typescript/src/utils/index.d.ts +1 -1
- package/lib/typescript/src/utils/usePrevious.d.ts +1 -1
- package/package.json +1 -1
- package/src/charts/line/CursorLine.tsx +6 -2
- package/src/charts/line/HorizontalLine.tsx +5 -1
|
@@ -1,36 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Dimensions, View } from 'react-native';
|
|
3
3
|
import { useCandlestickChart } from './useCandlestickChart';
|
|
4
|
-
export const CandlestickChartDimensionsContext =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
export const CandlestickChartDimensionsContext = /*#__PURE__*/React.createContext({
|
|
5
|
+
width: 0,
|
|
6
|
+
height: 0
|
|
7
|
+
});
|
|
8
|
+
const {
|
|
9
|
+
width: screenWidth
|
|
10
|
+
} = Dimensions.get('window');
|
|
10
11
|
export function CandlestickChart({
|
|
11
12
|
children,
|
|
12
13
|
width = screenWidth,
|
|
13
14
|
height = screenWidth,
|
|
14
15
|
...props
|
|
15
16
|
}) {
|
|
16
|
-
const {
|
|
17
|
+
const {
|
|
18
|
+
setWidth,
|
|
19
|
+
setHeight
|
|
20
|
+
} = useCandlestickChart();
|
|
17
21
|
React.useEffect(() => {
|
|
18
22
|
setWidth(width);
|
|
19
23
|
setHeight(height);
|
|
20
24
|
}, [height, setHeight, setWidth, width]);
|
|
21
|
-
const contextValue = React.useMemo(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
);
|
|
28
|
-
return /*#__PURE__*/ React.createElement(
|
|
29
|
-
CandlestickChartDimensionsContext.Provider,
|
|
30
|
-
{
|
|
31
|
-
value: contextValue,
|
|
32
|
-
},
|
|
33
|
-
/*#__PURE__*/ React.createElement(View, props, children)
|
|
34
|
-
);
|
|
25
|
+
const contextValue = React.useMemo(() => ({
|
|
26
|
+
width,
|
|
27
|
+
height
|
|
28
|
+
}), [height, width]);
|
|
29
|
+
return /*#__PURE__*/React.createElement(CandlestickChartDimensionsContext.Provider, {
|
|
30
|
+
value: contextValue
|
|
31
|
+
}, /*#__PURE__*/React.createElement(View, props, children));
|
|
35
32
|
}
|
|
36
|
-
//# sourceMappingURL=Chart.js.map
|
|
33
|
+
//# sourceMappingURL=Chart.js.map
|
|
@@ -1,19 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
runOnJS,
|
|
4
|
-
useAnimatedReaction,
|
|
5
|
-
useSharedValue,
|
|
6
|
-
} from 'react-native-reanimated';
|
|
2
|
+
import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
|
|
7
3
|
import { getDomain } from './utils';
|
|
8
|
-
export const CandlestickChartContext = /*#__PURE__*/
|
|
4
|
+
export const CandlestickChartContext = /*#__PURE__*/React.createContext({
|
|
9
5
|
currentX: {
|
|
10
|
-
value: -1
|
|
6
|
+
value: -1
|
|
11
7
|
},
|
|
12
8
|
currentY: {
|
|
13
|
-
value: -1
|
|
9
|
+
value: -1
|
|
14
10
|
},
|
|
15
11
|
currentIndex: {
|
|
16
|
-
value: -1
|
|
12
|
+
value: -1
|
|
17
13
|
},
|
|
18
14
|
data: [],
|
|
19
15
|
height: 0,
|
|
@@ -21,55 +17,41 @@ export const CandlestickChartContext = /*#__PURE__*/ React.createContext({
|
|
|
21
17
|
domain: [0, 0],
|
|
22
18
|
step: 0,
|
|
23
19
|
setWidth: () => undefined,
|
|
24
|
-
setHeight: () => undefined
|
|
20
|
+
setHeight: () => undefined
|
|
25
21
|
});
|
|
26
22
|
export function CandlestickChartProvider({
|
|
27
23
|
children,
|
|
28
24
|
data = [],
|
|
29
25
|
valueRangeY,
|
|
30
|
-
onCurrentIndexChange
|
|
26
|
+
onCurrentIndexChange
|
|
31
27
|
}) {
|
|
32
28
|
const [width, setWidth] = React.useState(0);
|
|
33
29
|
const [height, setHeight] = React.useState(0);
|
|
34
30
|
const currentX = useSharedValue(-1);
|
|
35
31
|
const currentY = useSharedValue(-1);
|
|
36
32
|
const currentIndex = useSharedValue(-1);
|
|
37
|
-
const domain = React.useMemo(
|
|
38
|
-
() => valueRangeY ?? getDomain(data),
|
|
39
|
-
[data, valueRangeY]
|
|
40
|
-
);
|
|
33
|
+
const domain = React.useMemo(() => valueRangeY ?? getDomain(data), [data, valueRangeY]);
|
|
41
34
|
const step = React.useMemo(() => width / data.length, [data.length, width]);
|
|
42
|
-
const contextValue = React.useMemo(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
[currentIndex]
|
|
65
|
-
);
|
|
66
|
-
return /*#__PURE__*/ React.createElement(
|
|
67
|
-
CandlestickChartContext.Provider,
|
|
68
|
-
{
|
|
69
|
-
value: contextValue,
|
|
70
|
-
},
|
|
71
|
-
children
|
|
72
|
-
);
|
|
35
|
+
const contextValue = React.useMemo(() => ({
|
|
36
|
+
currentX,
|
|
37
|
+
currentY,
|
|
38
|
+
currentIndex,
|
|
39
|
+
data,
|
|
40
|
+
width,
|
|
41
|
+
height,
|
|
42
|
+
domain,
|
|
43
|
+
step,
|
|
44
|
+
setWidth,
|
|
45
|
+
setHeight
|
|
46
|
+
}), [currentIndex, currentX, currentY, data, domain, height, step, width]);
|
|
47
|
+
useAnimatedReaction(() => currentIndex.value, (x, prevX) => {
|
|
48
|
+
if (x !== prevX && onCurrentIndexChange) {
|
|
49
|
+
runOnJS(onCurrentIndexChange)(x);
|
|
50
|
+
}
|
|
51
|
+
}, [currentIndex]);
|
|
52
|
+
return /*#__PURE__*/React.createElement(CandlestickChartContext.Provider, {
|
|
53
|
+
value: contextValue
|
|
54
|
+
}, children);
|
|
73
55
|
}
|
|
74
56
|
CandlestickChartProvider.displayName = 'CandlestickChartProvider';
|
|
75
|
-
//# sourceMappingURL=Context.js.map
|
|
57
|
+
//# sourceMappingURL=Context.js.map
|
|
@@ -1,26 +1,8 @@
|
|
|
1
|
-
function _extends() {
|
|
2
|
-
return (
|
|
3
|
-
(_extends = Object.assign
|
|
4
|
-
? Object.assign.bind()
|
|
5
|
-
: function (n) {
|
|
6
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
7
|
-
var t = arguments[e];
|
|
8
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
9
|
-
}
|
|
10
|
-
return n;
|
|
11
|
-
}),
|
|
12
|
-
_extends.apply(null, arguments)
|
|
13
|
-
);
|
|
14
|
-
}
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
15
2
|
import React from 'react';
|
|
16
3
|
import { StyleSheet } from 'react-native';
|
|
17
4
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
18
|
-
import Animated, {
|
|
19
|
-
useSharedValue,
|
|
20
|
-
useAnimatedStyle,
|
|
21
|
-
useAnimatedReaction,
|
|
22
|
-
runOnJS,
|
|
23
|
-
} from 'react-native-reanimated';
|
|
5
|
+
import Animated, { useSharedValue, useAnimatedStyle, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
|
|
24
6
|
import { clamp } from 'react-native-redash';
|
|
25
7
|
import { CandlestickChartDimensionsContext } from './Chart';
|
|
26
8
|
import { CandlestickChartLine } from './Line';
|
|
@@ -39,10 +21,18 @@ export function CandlestickChartCrosshair({
|
|
|
39
21
|
horizontalCrosshairProps = {},
|
|
40
22
|
verticalCrosshairProps = {},
|
|
41
23
|
lineProps = {},
|
|
42
|
-
minDurationMs = 0
|
|
24
|
+
minDurationMs = 0
|
|
43
25
|
}) {
|
|
44
|
-
const {
|
|
45
|
-
|
|
26
|
+
const {
|
|
27
|
+
width,
|
|
28
|
+
height
|
|
29
|
+
} = React.useContext(CandlestickChartDimensionsContext);
|
|
30
|
+
const {
|
|
31
|
+
currentX,
|
|
32
|
+
currentY,
|
|
33
|
+
currentIndex,
|
|
34
|
+
step
|
|
35
|
+
} = useCandlestickChart();
|
|
46
36
|
const tooltipPosition = useSharedValue('left');
|
|
47
37
|
const opacity = useSharedValue(0);
|
|
48
38
|
const updatePosition = (x, y) => {
|
|
@@ -55,128 +45,65 @@ export function CandlestickChartCrosshair({
|
|
|
55
45
|
tooltipPosition.value = 'left';
|
|
56
46
|
}
|
|
57
47
|
currentY.value = clamp(y, 0, height);
|
|
58
|
-
currentX.value = boundedX -
|
|
48
|
+
currentX.value = boundedX - boundedX % step + step / 2;
|
|
59
49
|
currentIndex.value = Math.floor(boundedX / step);
|
|
60
50
|
};
|
|
61
|
-
const longPressGesture = Gesture.LongPress()
|
|
62
|
-
|
|
63
|
-
.maxDistance(999999)
|
|
64
|
-
.onStart((event) => {
|
|
65
|
-
'worklet';
|
|
51
|
+
const longPressGesture = Gesture.LongPress().minDuration(minDurationMs).maxDistance(999999).onStart(event => {
|
|
52
|
+
'worklet';
|
|
66
53
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
'worklet';
|
|
54
|
+
opacity.value = 1;
|
|
55
|
+
updatePosition(event.x, event.y);
|
|
56
|
+
}).onTouchesMove(event => {
|
|
57
|
+
'worklet';
|
|
72
58
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
updatePosition(event.allTouches[0].x, event.allTouches[0].y);
|
|
79
|
-
}
|
|
80
|
-
})
|
|
81
|
-
.onEnd(() => {
|
|
82
|
-
'worklet';
|
|
59
|
+
if (opacity.value === 1 && event.allTouches.length > 0 && event.allTouches[0]) {
|
|
60
|
+
updatePosition(event.allTouches[0].x, event.allTouches[0].y);
|
|
61
|
+
}
|
|
62
|
+
}).onEnd(() => {
|
|
63
|
+
'worklet';
|
|
83
64
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
const horizontal = useAnimatedStyle(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
{
|
|
128
|
-
style: StyleSheet.absoluteFill,
|
|
129
|
-
},
|
|
130
|
-
/*#__PURE__*/ React.createElement(
|
|
131
|
-
Animated.View,
|
|
132
|
-
_extends(
|
|
133
|
-
{
|
|
134
|
-
style: [StyleSheet.absoluteFill, horizontal],
|
|
135
|
-
},
|
|
136
|
-
horizontalCrosshairProps
|
|
137
|
-
),
|
|
138
|
-
/*#__PURE__*/ React.createElement(
|
|
139
|
-
CandlestickChartLine,
|
|
140
|
-
_extends(
|
|
141
|
-
{
|
|
142
|
-
color: color,
|
|
143
|
-
x: width,
|
|
144
|
-
y: 0,
|
|
145
|
-
},
|
|
146
|
-
lineProps
|
|
147
|
-
)
|
|
148
|
-
),
|
|
149
|
-
/*#__PURE__*/ React.createElement(
|
|
150
|
-
CandlestickChartCrosshairTooltipContext.Provider,
|
|
151
|
-
{
|
|
152
|
-
value: {
|
|
153
|
-
position: tooltipPosition,
|
|
154
|
-
},
|
|
155
|
-
},
|
|
156
|
-
children
|
|
157
|
-
)
|
|
158
|
-
),
|
|
159
|
-
/*#__PURE__*/ React.createElement(
|
|
160
|
-
Animated.View,
|
|
161
|
-
_extends(
|
|
162
|
-
{
|
|
163
|
-
style: [StyleSheet.absoluteFill, vertical],
|
|
164
|
-
},
|
|
165
|
-
verticalCrosshairProps
|
|
166
|
-
),
|
|
167
|
-
/*#__PURE__*/ React.createElement(
|
|
168
|
-
CandlestickChartLine,
|
|
169
|
-
_extends(
|
|
170
|
-
{
|
|
171
|
-
color: color,
|
|
172
|
-
x: 0,
|
|
173
|
-
y: height,
|
|
174
|
-
},
|
|
175
|
-
lineProps
|
|
176
|
-
)
|
|
177
|
-
)
|
|
178
|
-
)
|
|
179
|
-
)
|
|
180
|
-
);
|
|
65
|
+
opacity.value = 0;
|
|
66
|
+
currentY.value = -1;
|
|
67
|
+
currentX.value = -1;
|
|
68
|
+
currentIndex.value = -1;
|
|
69
|
+
});
|
|
70
|
+
const horizontal = useAnimatedStyle(() => ({
|
|
71
|
+
opacity: opacity.value,
|
|
72
|
+
transform: [{
|
|
73
|
+
translateY: currentY.value
|
|
74
|
+
}]
|
|
75
|
+
}), [opacity, currentY]);
|
|
76
|
+
const vertical = useAnimatedStyle(() => ({
|
|
77
|
+
opacity: opacity.value,
|
|
78
|
+
transform: [{
|
|
79
|
+
translateX: currentX.value
|
|
80
|
+
}]
|
|
81
|
+
}), [opacity, currentX]);
|
|
82
|
+
useAnimatedReaction(() => currentX.value, (data, prevData) => {
|
|
83
|
+
if (data !== -1 && data !== prevData && onCurrentXChange) {
|
|
84
|
+
runOnJS(onCurrentXChange)(data);
|
|
85
|
+
}
|
|
86
|
+
}, [currentX]);
|
|
87
|
+
return /*#__PURE__*/React.createElement(GestureDetector, {
|
|
88
|
+
gesture: longPressGesture
|
|
89
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
90
|
+
style: StyleSheet.absoluteFill
|
|
91
|
+
}, /*#__PURE__*/React.createElement(Animated.View, _extends({
|
|
92
|
+
style: [StyleSheet.absoluteFill, vertical]
|
|
93
|
+
}, verticalCrosshairProps), /*#__PURE__*/React.createElement(CandlestickChartLine, _extends({
|
|
94
|
+
color: color,
|
|
95
|
+
x: 0,
|
|
96
|
+
y: height
|
|
97
|
+
}, lineProps))), /*#__PURE__*/React.createElement(Animated.View, _extends({
|
|
98
|
+
style: [StyleSheet.absoluteFill, horizontal]
|
|
99
|
+
}, horizontalCrosshairProps), /*#__PURE__*/React.createElement(CandlestickChartLine, _extends({
|
|
100
|
+
color: color,
|
|
101
|
+
x: width,
|
|
102
|
+
y: 0
|
|
103
|
+
}, lineProps)), /*#__PURE__*/React.createElement(CandlestickChartCrosshairTooltipContext.Provider, {
|
|
104
|
+
value: {
|
|
105
|
+
position: tooltipPosition
|
|
106
|
+
}
|
|
107
|
+
}, children))));
|
|
181
108
|
}
|
|
182
|
-
//# sourceMappingURL=Crosshair.js.map
|
|
109
|
+
//# sourceMappingURL=Crosshair.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","Gesture","GestureDetector","Animated","useSharedValue","useAnimatedStyle","useAnimatedReaction","runOnJS","clamp","CandlestickChartDimensionsContext","CandlestickChartLine","useCandlestickChart","CandlestickChartCrosshairTooltipContext","TOOLTIP_POSITION_THRESHOLD","CandlestickChartCrosshair","color","onCurrentXChange","children","horizontalCrosshairProps","verticalCrosshairProps","lineProps","minDurationMs","width","height","useContext","currentX","currentY","currentIndex","step","tooltipPosition","opacity","updatePosition","x","y","boundedX","value","Math","floor","longPressGesture","LongPress","minDuration","maxDistance","onStart","event","onTouchesMove","allTouches","length","onEnd","horizontal","transform","translateY","vertical","translateX","data","prevData","createElement","gesture","View","style","absoluteFill","_extends","Provider","position"],"sourceRoot":"../../../../src","sources":["charts/candle/Crosshair.tsx"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","Gesture","GestureDetector","Animated","useSharedValue","useAnimatedStyle","useAnimatedReaction","runOnJS","clamp","CandlestickChartDimensionsContext","CandlestickChartLine","useCandlestickChart","CandlestickChartCrosshairTooltipContext","TOOLTIP_POSITION_THRESHOLD","CandlestickChartCrosshair","color","onCurrentXChange","children","horizontalCrosshairProps","verticalCrosshairProps","lineProps","minDurationMs","width","height","useContext","currentX","currentY","currentIndex","step","tooltipPosition","opacity","updatePosition","x","y","boundedX","value","Math","floor","longPressGesture","LongPress","minDuration","maxDistance","onStart","event","onTouchesMove","allTouches","length","onEnd","horizontal","transform","translateY","vertical","translateX","data","prevData","createElement","gesture","View","style","absoluteFill","_extends","Provider","position"],"sourceRoot":"../../../../src","sources":["charts/candle/Crosshair.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,33 +1,15 @@
|
|
|
1
|
-
function _extends() {
|
|
2
|
-
return (
|
|
3
|
-
(_extends = Object.assign
|
|
4
|
-
? Object.assign.bind()
|
|
5
|
-
: function (n) {
|
|
6
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
7
|
-
var t = arguments[e];
|
|
8
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
9
|
-
}
|
|
10
|
-
return n;
|
|
11
|
-
}),
|
|
12
|
-
_extends.apply(null, arguments)
|
|
13
|
-
);
|
|
14
|
-
}
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
15
2
|
import React from 'react';
|
|
16
3
|
import { StyleSheet } from 'react-native';
|
|
17
|
-
import Animated, {
|
|
18
|
-
useAnimatedStyle,
|
|
19
|
-
useDerivedValue,
|
|
20
|
-
useSharedValue,
|
|
21
|
-
} from 'react-native-reanimated';
|
|
4
|
+
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
|
|
22
5
|
import { CandlestickChartDimensionsContext } from './Chart';
|
|
23
6
|
import { useCandlestickChart } from './useCandlestickChart';
|
|
24
7
|
import { CandlestickChartPriceText } from './PriceText';
|
|
25
|
-
export const CandlestickChartCrosshairTooltipContext =
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
});
|
|
8
|
+
export const CandlestickChartCrosshairTooltipContext = /*#__PURE__*/React.createContext({
|
|
9
|
+
position: {
|
|
10
|
+
value: 'left'
|
|
11
|
+
}
|
|
12
|
+
});
|
|
31
13
|
export function CandlestickChartCrosshairTooltip({
|
|
32
14
|
children,
|
|
33
15
|
xGutter = 8,
|
|
@@ -36,20 +18,22 @@ export function CandlestickChartCrosshairTooltip({
|
|
|
36
18
|
textStyle,
|
|
37
19
|
...props
|
|
38
20
|
}) {
|
|
39
|
-
const {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
21
|
+
const {
|
|
22
|
+
width,
|
|
23
|
+
height
|
|
24
|
+
} = React.useContext(CandlestickChartDimensionsContext);
|
|
25
|
+
const {
|
|
26
|
+
currentY
|
|
27
|
+
} = useCandlestickChart();
|
|
28
|
+
const {
|
|
29
|
+
position
|
|
30
|
+
} = React.useContext(CandlestickChartCrosshairTooltipContext);
|
|
44
31
|
const elementHeight = useSharedValue(0);
|
|
45
32
|
const elementWidth = useSharedValue(0);
|
|
46
|
-
const handleLayout = React.useCallback(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
[elementHeight, elementWidth]
|
|
52
|
-
);
|
|
33
|
+
const handleLayout = React.useCallback(event => {
|
|
34
|
+
elementHeight.value = event.nativeEvent.layout.height;
|
|
35
|
+
elementWidth.value = event.nativeEvent.layout.width;
|
|
36
|
+
}, [elementHeight, elementWidth]);
|
|
53
37
|
const topOffset = useDerivedValue(() => {
|
|
54
38
|
let offset = 0;
|
|
55
39
|
if (currentY.value < elementHeight.value / 2 + yGutter) {
|
|
@@ -59,71 +43,37 @@ export function CandlestickChartCrosshairTooltip({
|
|
|
59
43
|
}
|
|
60
44
|
return offset;
|
|
61
45
|
}, [currentY, elementHeight, height, yGutter]);
|
|
62
|
-
const tooltip = useAnimatedStyle(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
[
|
|
86
|
-
)
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
null,
|
|
90
|
-
/*#__PURE__*/ React.createElement(
|
|
91
|
-
Animated.View,
|
|
92
|
-
_extends(
|
|
93
|
-
{
|
|
94
|
-
onLayout: handleLayout,
|
|
95
|
-
},
|
|
96
|
-
props,
|
|
97
|
-
{
|
|
98
|
-
style: [tooltip, leftTooltip, props.style],
|
|
99
|
-
}
|
|
100
|
-
),
|
|
101
|
-
children ||
|
|
102
|
-
/*#__PURE__*/ React.createElement(
|
|
103
|
-
CandlestickChartPriceText,
|
|
104
|
-
_extends({}, tooltipTextProps, {
|
|
105
|
-
style: [styles.text, tooltipTextProps?.style, textStyle],
|
|
106
|
-
})
|
|
107
|
-
)
|
|
108
|
-
),
|
|
109
|
-
/*#__PURE__*/ React.createElement(
|
|
110
|
-
Animated.View,
|
|
111
|
-
_extends({}, props, {
|
|
112
|
-
style: [tooltip, rightTooltip, props.style],
|
|
113
|
-
}),
|
|
114
|
-
children ||
|
|
115
|
-
/*#__PURE__*/ React.createElement(
|
|
116
|
-
CandlestickChartPriceText,
|
|
117
|
-
_extends({}, tooltipTextProps, {
|
|
118
|
-
style: [styles.text, tooltipTextProps?.style, textStyle],
|
|
119
|
-
})
|
|
120
|
-
)
|
|
121
|
-
)
|
|
122
|
-
);
|
|
46
|
+
const tooltip = useAnimatedStyle(() => ({
|
|
47
|
+
backgroundColor: 'white',
|
|
48
|
+
position: 'absolute',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
padding: 4
|
|
51
|
+
}), []);
|
|
52
|
+
const leftTooltip = useAnimatedStyle(() => ({
|
|
53
|
+
left: xGutter,
|
|
54
|
+
top: -(elementHeight.value / 2) - topOffset.value,
|
|
55
|
+
opacity: position.value === 'left' ? 1 : 0
|
|
56
|
+
}), [elementHeight, position, topOffset, xGutter]);
|
|
57
|
+
const rightTooltip = useAnimatedStyle(() => ({
|
|
58
|
+
left: width - elementWidth.value - xGutter,
|
|
59
|
+
top: -(elementHeight.value / 2) - topOffset.value,
|
|
60
|
+
opacity: position.value === 'right' ? 1 : 0
|
|
61
|
+
}), [elementHeight, elementWidth, position, topOffset, width, xGutter]);
|
|
62
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, _extends({
|
|
63
|
+
onLayout: handleLayout
|
|
64
|
+
}, props, {
|
|
65
|
+
style: [tooltip, leftTooltip, props.style]
|
|
66
|
+
}), children || /*#__PURE__*/React.createElement(CandlestickChartPriceText, _extends({}, tooltipTextProps, {
|
|
67
|
+
style: [styles.text, tooltipTextProps?.style, textStyle]
|
|
68
|
+
}))), /*#__PURE__*/React.createElement(Animated.View, _extends({}, props, {
|
|
69
|
+
style: [tooltip, rightTooltip, props.style]
|
|
70
|
+
}), children || /*#__PURE__*/React.createElement(CandlestickChartPriceText, _extends({}, tooltipTextProps, {
|
|
71
|
+
style: [styles.text, tooltipTextProps?.style, textStyle]
|
|
72
|
+
}))));
|
|
123
73
|
}
|
|
124
74
|
const styles = StyleSheet.create({
|
|
125
75
|
text: {
|
|
126
|
-
fontSize: 14
|
|
127
|
-
}
|
|
76
|
+
fontSize: 14
|
|
77
|
+
}
|
|
128
78
|
});
|
|
129
|
-
//# sourceMappingURL=CrosshairTooltip.js.map
|
|
79
|
+
//# sourceMappingURL=CrosshairTooltip.js.map
|
|
@@ -6,16 +6,16 @@ export function CandlestickChartDatetimeText({
|
|
|
6
6
|
options,
|
|
7
7
|
format,
|
|
8
8
|
variant = 'formatted',
|
|
9
|
-
style
|
|
9
|
+
style
|
|
10
10
|
}) {
|
|
11
11
|
const datetime = useCandlestickChartDatetime({
|
|
12
12
|
format,
|
|
13
13
|
locale,
|
|
14
|
-
options
|
|
14
|
+
options
|
|
15
15
|
});
|
|
16
|
-
return /*#__PURE__*/
|
|
16
|
+
return /*#__PURE__*/React.createElement(AnimatedText, {
|
|
17
17
|
text: datetime[variant],
|
|
18
|
-
style: style
|
|
18
|
+
style: style
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
|
-
//# sourceMappingURL=DatetimeText.js.map
|
|
21
|
+
//# sourceMappingURL=DatetimeText.js.map
|