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
|
@@ -7,8 +7,8 @@ import { bisectCenter } from 'd3-array';
|
|
|
7
7
|
import { scaleLinear } from 'd3-scale';
|
|
8
8
|
import { useLineChart } from './useLineChart';
|
|
9
9
|
import { useEffect } from 'react';
|
|
10
|
-
export const CursorContext = /*#__PURE__*/
|
|
11
|
-
type: ''
|
|
10
|
+
export const CursorContext = /*#__PURE__*/React.createContext({
|
|
11
|
+
type: ''
|
|
12
12
|
});
|
|
13
13
|
LineChartCursor.displayName = 'LineChartCursor';
|
|
14
14
|
export function LineChartCursor({
|
|
@@ -17,25 +17,34 @@ export function LineChartCursor({
|
|
|
17
17
|
type,
|
|
18
18
|
at,
|
|
19
19
|
shouldCancelWhenOutside = false,
|
|
20
|
+
persistOnEnd = false,
|
|
20
21
|
minDurationMs = 0,
|
|
21
22
|
onActivated,
|
|
22
|
-
onEnded
|
|
23
|
+
onEnded
|
|
23
24
|
}) {
|
|
24
|
-
const {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
const {
|
|
26
|
+
pathWidth: width,
|
|
27
|
+
parsedPath
|
|
28
|
+
} = React.useContext(LineChartDimensionsContext);
|
|
29
|
+
const {
|
|
30
|
+
currentX,
|
|
31
|
+
currentIndex,
|
|
32
|
+
isActive,
|
|
33
|
+
data,
|
|
34
|
+
xDomain
|
|
35
|
+
} = useLineChart();
|
|
36
|
+
const xValues = React.useMemo(() => (data ?? []).map(({
|
|
37
|
+
timestamp
|
|
38
|
+
}, i) => xDomain ? timestamp : i), [data, xDomain]);
|
|
32
39
|
|
|
33
40
|
// Same scale as in /src/charts/line/utils/getPath.ts
|
|
34
41
|
const scaleX = React.useMemo(() => {
|
|
35
42
|
const domainArray = xDomain ?? [0, xValues.length];
|
|
36
43
|
return scaleLinear().domain(domainArray).range([0, width]);
|
|
37
44
|
}, [width, xDomain, xValues.length]);
|
|
38
|
-
const linearScalePositionAndIndex = ({
|
|
45
|
+
const linearScalePositionAndIndex = ({
|
|
46
|
+
xPosition
|
|
47
|
+
}) => {
|
|
39
48
|
if (!parsedPath) {
|
|
40
49
|
return;
|
|
41
50
|
}
|
|
@@ -44,14 +53,8 @@ export function LineChartCursor({
|
|
|
44
53
|
const xRelative = scaleX.invert(xPosition);
|
|
45
54
|
const closestIndex = bisectCenter(xValues, xRelative);
|
|
46
55
|
const pathDataDelta = Math.abs(parsedPath.curves.length - xValues.length); // sometimes there is a difference between data length and number of path curves.
|
|
47
|
-
const closestPathCurve = Math.max(
|
|
48
|
-
|
|
49
|
-
0
|
|
50
|
-
);
|
|
51
|
-
const curveSegment =
|
|
52
|
-
closestIndex > 0 && parsedPath.curves[closestPathCurve]
|
|
53
|
-
? parsedPath.curves[closestPathCurve]
|
|
54
|
-
: null;
|
|
56
|
+
const closestPathCurve = Math.max(Math.min(closestIndex, parsedPath.curves.length + 1) - pathDataDelta, 0);
|
|
57
|
+
const curveSegment = closestIndex > 0 && parsedPath.curves[closestPathCurve] ? parsedPath.curves[closestPathCurve] : null;
|
|
55
58
|
const newXPosition = (curveSegment ? curveSegment.to : parsedPath.move).x;
|
|
56
59
|
// Update values
|
|
57
60
|
currentIndex.value = closestIndex;
|
|
@@ -61,12 +64,12 @@ export function LineChartCursor({
|
|
|
61
64
|
if (at !== undefined) {
|
|
62
65
|
const xPosition = scaleX(at);
|
|
63
66
|
runOnJS(linearScalePositionAndIndex)({
|
|
64
|
-
xPosition
|
|
67
|
+
xPosition
|
|
65
68
|
});
|
|
66
69
|
isActive.value = true;
|
|
67
70
|
}
|
|
68
71
|
}, [at, scaleX]);
|
|
69
|
-
const updatePosition =
|
|
72
|
+
const updatePosition = xPosition => {
|
|
70
73
|
'worklet';
|
|
71
74
|
|
|
72
75
|
if (parsedPath) {
|
|
@@ -74,14 +77,11 @@ export function LineChartCursor({
|
|
|
74
77
|
// so we clamp the index at 0 to fix it
|
|
75
78
|
// https://github.com/coinjar/react-native-wagmi-charts/issues/24
|
|
76
79
|
const minIndex = 0;
|
|
77
|
-
const boundedIndex = Math.max(
|
|
78
|
-
minIndex,
|
|
79
|
-
Math.round(xPosition / width / (1 / (data ? data.length - 1 : 1)))
|
|
80
|
-
);
|
|
80
|
+
const boundedIndex = Math.max(minIndex, Math.round(xPosition / width / (1 / (data ? data.length - 1 : 1))));
|
|
81
81
|
if (snapToPoint) {
|
|
82
82
|
// We have to run this on the JS thread unfortunately as the scaleLinear functions won't work on UI thread
|
|
83
83
|
runOnJS(linearScalePositionAndIndex)({
|
|
84
|
-
xPosition
|
|
84
|
+
xPosition
|
|
85
85
|
});
|
|
86
86
|
} else if (!snapToPoint) {
|
|
87
87
|
currentX.value = xPosition;
|
|
@@ -89,65 +89,44 @@ export function LineChartCursor({
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
};
|
|
92
|
-
const longPressGesture = Gesture.LongPress()
|
|
93
|
-
|
|
94
|
-
.maxDistance(999999)
|
|
95
|
-
.shouldCancelWhenOutside(shouldCancelWhenOutside)
|
|
96
|
-
.onStart((event) => {
|
|
97
|
-
'worklet';
|
|
92
|
+
const longPressGesture = Gesture.LongPress().minDuration(minDurationMs ?? 0).maxDistance(999999).shouldCancelWhenOutside(shouldCancelWhenOutside).onStart(event => {
|
|
93
|
+
'worklet';
|
|
98
94
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
95
|
+
if (parsedPath) {
|
|
96
|
+
const xPosition = Math.max(0, event.x <= width ? event.x : width);
|
|
97
|
+
isActive.value = true;
|
|
98
|
+
updatePosition(xPosition);
|
|
99
|
+
if (onActivated) {
|
|
100
|
+
runOnJS(onActivated)();
|
|
106
101
|
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
102
|
+
}
|
|
103
|
+
}).onTouchesMove(event => {
|
|
104
|
+
'worklet';
|
|
110
105
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
const xPosition = Math.max(0, touchX <= width ? touchX : width);
|
|
119
|
-
updatePosition(xPosition);
|
|
120
|
-
}
|
|
121
|
-
})
|
|
122
|
-
.onEnd(() => {
|
|
123
|
-
'worklet';
|
|
106
|
+
if (parsedPath && isActive.value && event.allTouches.length > 0 && event.allTouches[0]) {
|
|
107
|
+
const touchX = event.allTouches[0].x;
|
|
108
|
+
const xPosition = Math.max(0, touchX <= width ? touchX : width);
|
|
109
|
+
updatePosition(xPosition);
|
|
110
|
+
}
|
|
111
|
+
}).onEnd(() => {
|
|
112
|
+
'worklet';
|
|
124
113
|
|
|
114
|
+
if (!persistOnEnd) {
|
|
125
115
|
isActive.value = false;
|
|
126
116
|
currentIndex.value = -1;
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
gesture: longPressGesture,
|
|
142
|
-
},
|
|
143
|
-
/*#__PURE__*/ React.createElement(
|
|
144
|
-
Animated.View,
|
|
145
|
-
{
|
|
146
|
-
style: StyleSheet.absoluteFill,
|
|
147
|
-
},
|
|
148
|
-
children
|
|
149
|
-
)
|
|
150
|
-
)
|
|
151
|
-
);
|
|
117
|
+
}
|
|
118
|
+
if (onEnded) {
|
|
119
|
+
runOnJS(onEnded)();
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
return /*#__PURE__*/React.createElement(CursorContext.Provider, {
|
|
123
|
+
value: {
|
|
124
|
+
type
|
|
125
|
+
}
|
|
126
|
+
}, /*#__PURE__*/React.createElement(GestureDetector, {
|
|
127
|
+
gesture: longPressGesture
|
|
128
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
129
|
+
style: StyleSheet.absoluteFill
|
|
130
|
+
}, children)));
|
|
152
131
|
}
|
|
153
|
-
//# sourceMappingURL=Cursor.js.map
|
|
132
|
+
//# sourceMappingURL=Cursor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Animated","runOnJS","Gesture","GestureDetector","LineChartDimensionsContext","StyleSheet","bisectCenter","scaleLinear","useLineChart","useEffect","CursorContext","createContext","type","LineChartCursor","displayName","children","snapToPoint","at","shouldCancelWhenOutside","minDurationMs","onActivated","onEnded","pathWidth","width","parsedPath","useContext","currentX","currentIndex","isActive","data","xDomain","xValues","useMemo","map","timestamp","i","scaleX","domainArray","length","domain","range","linearScalePositionAndIndex","xPosition","xRelative","invert","closestIndex","pathDataDelta","Math","abs","curves","closestPathCurve","max","min","curveSegment","newXPosition","to","move","x","value","undefined","updatePosition","minIndex","boundedIndex","round","longPressGesture","LongPress","minDuration","maxDistance","onStart","event","onTouchesMove","allTouches","touchX","onEnd","createElement","Provider","gesture","View","style","absoluteFill"],"sourceRoot":"../../../../src","sources":["charts/line/Cursor.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,IAAIC,OAAO,QAAQ,yBAAyB;AAC3D,SACEC,OAAO,EACPC,eAAe,QAGV,8BAA8B;AAErC,SAASC,0BAA0B,QAAQ,SAAS;AACpD,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,YAAY,QAAQ,UAAU;AACvC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,SAAS,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["React","Animated","runOnJS","Gesture","GestureDetector","LineChartDimensionsContext","StyleSheet","bisectCenter","scaleLinear","useLineChart","useEffect","CursorContext","createContext","type","LineChartCursor","displayName","children","snapToPoint","at","shouldCancelWhenOutside","persistOnEnd","minDurationMs","onActivated","onEnded","pathWidth","width","parsedPath","useContext","currentX","currentIndex","isActive","data","xDomain","xValues","useMemo","map","timestamp","i","scaleX","domainArray","length","domain","range","linearScalePositionAndIndex","xPosition","xRelative","invert","closestIndex","pathDataDelta","Math","abs","curves","closestPathCurve","max","min","curveSegment","newXPosition","to","move","x","value","undefined","updatePosition","minIndex","boundedIndex","round","longPressGesture","LongPress","minDuration","maxDistance","onStart","event","onTouchesMove","allTouches","touchX","onEnd","createElement","Provider","gesture","View","style","absoluteFill"],"sourceRoot":"../../../../src","sources":["charts/line/Cursor.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,23 +1,7 @@
|
|
|
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 { Platform, View, StyleSheet } from 'react-native';
|
|
17
|
-
import Animated, {
|
|
18
|
-
useAnimatedStyle,
|
|
19
|
-
withSpring,
|
|
20
|
-
} from 'react-native-reanimated';
|
|
4
|
+
import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
|
21
5
|
import { LineChartCursor } from './Cursor';
|
|
22
6
|
import { useLineChart } from './useLineChart';
|
|
23
7
|
|
|
@@ -38,100 +22,64 @@ export function LineChartCursorCrosshair({
|
|
|
38
22
|
crosshairOuterProps = {},
|
|
39
23
|
...props
|
|
40
24
|
}) {
|
|
41
|
-
const {
|
|
25
|
+
const {
|
|
26
|
+
currentX,
|
|
27
|
+
currentY,
|
|
28
|
+
isActive
|
|
29
|
+
} = useLineChart();
|
|
42
30
|
|
|
43
31
|
// It seems that enabling spring animation on initial render on Android causes a crash.
|
|
44
|
-
const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(
|
|
45
|
-
Platform.OS === 'ios'
|
|
46
|
-
);
|
|
32
|
+
const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(Platform.OS === 'ios');
|
|
47
33
|
React.useEffect(() => {
|
|
48
34
|
const timer = setTimeout(() => {
|
|
49
35
|
setEnableSpringAnimation(true);
|
|
50
36
|
}, ANDROID_SPRING_ANIMATION_DELAY_MS);
|
|
51
37
|
return () => clearTimeout(timer);
|
|
52
38
|
}, []);
|
|
53
|
-
const animatedCursorStyle = useAnimatedStyle(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
-
height: outerSize,
|
|
89
|
-
},
|
|
90
|
-
animatedCursorStyle,
|
|
91
|
-
crosshairWrapperProps.style,
|
|
92
|
-
],
|
|
93
|
-
}),
|
|
94
|
-
/*#__PURE__*/ React.createElement(
|
|
95
|
-
View,
|
|
96
|
-
_extends({}, crosshairOuterProps, {
|
|
97
|
-
style: [
|
|
98
|
-
styles.crosshairOuter,
|
|
99
|
-
{
|
|
100
|
-
backgroundColor: color,
|
|
101
|
-
width: outerSize,
|
|
102
|
-
height: outerSize,
|
|
103
|
-
borderRadius: outerSize,
|
|
104
|
-
},
|
|
105
|
-
crosshairOuterProps.style,
|
|
106
|
-
],
|
|
107
|
-
})
|
|
108
|
-
),
|
|
109
|
-
/*#__PURE__*/ React.createElement(
|
|
110
|
-
View,
|
|
111
|
-
_extends({}, crosshairProps, {
|
|
112
|
-
style: [
|
|
113
|
-
{
|
|
114
|
-
backgroundColor: color,
|
|
115
|
-
width: size,
|
|
116
|
-
height: size,
|
|
117
|
-
borderRadius: size,
|
|
118
|
-
},
|
|
119
|
-
crosshairProps.style,
|
|
120
|
-
],
|
|
121
|
-
})
|
|
122
|
-
)
|
|
123
|
-
),
|
|
124
|
-
children
|
|
125
|
-
);
|
|
39
|
+
const animatedCursorStyle = useAnimatedStyle(() => ({
|
|
40
|
+
transform: [{
|
|
41
|
+
translateX: currentX.value - outerSize / 2
|
|
42
|
+
}, {
|
|
43
|
+
translateY: currentY.value - outerSize / 2
|
|
44
|
+
}, {
|
|
45
|
+
scale: enableSpringAnimation ? withSpring(isActive.value ? 1 : 0, {
|
|
46
|
+
damping: 10,
|
|
47
|
+
stiffness: 100,
|
|
48
|
+
mass: 0.3
|
|
49
|
+
}) : 0
|
|
50
|
+
}]
|
|
51
|
+
}), [currentX, currentY, enableSpringAnimation, isActive, outerSize]);
|
|
52
|
+
return /*#__PURE__*/React.createElement(LineChartCursor, _extends({
|
|
53
|
+
type: "crosshair"
|
|
54
|
+
}, props), /*#__PURE__*/React.createElement(Animated.View, _extends({}, crosshairWrapperProps, {
|
|
55
|
+
style: [styles.crosshairWrapper, {
|
|
56
|
+
width: outerSize,
|
|
57
|
+
height: outerSize
|
|
58
|
+
}, animatedCursorStyle, crosshairWrapperProps.style]
|
|
59
|
+
}), /*#__PURE__*/React.createElement(View, _extends({}, crosshairOuterProps, {
|
|
60
|
+
style: [styles.crosshairOuter, {
|
|
61
|
+
backgroundColor: color,
|
|
62
|
+
width: outerSize,
|
|
63
|
+
height: outerSize,
|
|
64
|
+
borderRadius: outerSize
|
|
65
|
+
}, crosshairOuterProps.style]
|
|
66
|
+
})), /*#__PURE__*/React.createElement(View, _extends({}, crosshairProps, {
|
|
67
|
+
style: [{
|
|
68
|
+
backgroundColor: color,
|
|
69
|
+
width: size,
|
|
70
|
+
height: size,
|
|
71
|
+
borderRadius: size
|
|
72
|
+
}, crosshairProps.style]
|
|
73
|
+
}))), children);
|
|
126
74
|
}
|
|
127
75
|
const styles = StyleSheet.create({
|
|
128
76
|
crosshairWrapper: {
|
|
129
77
|
alignItems: 'center',
|
|
130
|
-
justifyContent: 'center'
|
|
78
|
+
justifyContent: 'center'
|
|
131
79
|
},
|
|
132
80
|
crosshairOuter: {
|
|
133
81
|
opacity: 0.1,
|
|
134
|
-
position: 'absolute'
|
|
135
|
-
}
|
|
82
|
+
position: 'absolute'
|
|
83
|
+
}
|
|
136
84
|
});
|
|
137
|
-
//# sourceMappingURL=CursorCrosshair.js.map
|
|
85
|
+
//# sourceMappingURL=CursorCrosshair.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","View","StyleSheet","Animated","useAnimatedStyle","withSpring","LineChartCursor","useLineChart","ANDROID_SPRING_ANIMATION_DELAY_MS","LineChartCursorCrosshair","displayName","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","props","currentX","currentY","isActive","enableSpringAnimation","setEnableSpringAnimation","useState","OS","useEffect","timer","setTimeout","clearTimeout","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","createElement","_extends","type","style","styles","crosshairWrapper","width","height","crosshairOuter","backgroundColor","borderRadius","create","alignItems","justifyContent","opacity","position"],"sourceRoot":"../../../../src","sources":["charts/line/CursorCrosshair.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,IAAI,EAAaC,UAAU,QAAQ,cAAc;AACpE,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,UAAU,QAEL,yBAAyB;AAEhC,SAASC,eAAe,QAA8B,UAAU;AAChE,SAASC,YAAY,QAAQ,gBAAgB;;AAE7C;AACA;AACA;AACA;AACA;AACA,MAAMC,iCAAiC,GAAG,GAAG;AAe7CC,wBAAwB,CAACC,WAAW,GAAG,0BAA0B;AAEjE,OAAO,SAASD,wBAAwBA,CAAC;EACvCE,QAAQ;EACRC,KAAK,GAAG,OAAO;EACfC,IAAI,GAAG,CAAC;EACRC,SAAS,GAAG,EAAE;EACdC,qBAAqB,GAAG,CAAC,CAAC;EAC1BC,cAAc,GAAG,CAAC,CAAC;EACnBC,mBAAmB,GAAG,CAAC,CAAC;EACxB,GAAGC;AAC0B,CAAC,EAAE;EAChC,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAGd,YAAY,CAAC,CAAC;;EAEvD;EACA,MAAM,CAACe,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGxB,KAAK,CAACyB,QAAQ,CACtExB,QAAQ,CAACyB,EAAE,KAAK,KAClB,CAAC;EACD1B,KAAK,CAAC2B,SAAS,CAAC,MAAM;IACpB,MAAMC,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7BL,wBAAwB,CAAC,IAAI,CAAC;IAChC,CAAC,EAAEf,iCAAiC,CAAC;IACrC,OAAO,MAAMqB,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,mBAAmB,GAAG1B,gBAAgB,CAC1C,OAAO;IACL2B,SAAS,EAAE,CACT;MAAEC,UAAU,EAAEb,QAAQ,CAACc,KAAK,GAAGnB,SAAS,GAAG;IAAE,CAAC,EAC9C;MAAEoB,UAAU,EAAEd,QAAQ,CAACa,KAAK,GAAGnB,SAAS,GAAG;IAAE,CAAC,EAC9C;MACEqB,KAAK,EAAEb,qBAAqB,GACxBjB,UAAU,CAACgB,QAAQ,CAACY,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE;QACjCG,OAAO,EAAE;
|
|
1
|
+
{"version":3,"names":["React","Platform","View","StyleSheet","Animated","useAnimatedStyle","withSpring","LineChartCursor","useLineChart","ANDROID_SPRING_ANIMATION_DELAY_MS","LineChartCursorCrosshair","displayName","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","props","currentX","currentY","isActive","enableSpringAnimation","setEnableSpringAnimation","useState","OS","useEffect","timer","setTimeout","clearTimeout","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","stiffness","mass","createElement","_extends","type","style","styles","crosshairWrapper","width","height","crosshairOuter","backgroundColor","borderRadius","create","alignItems","justifyContent","opacity","position"],"sourceRoot":"../../../../src","sources":["charts/line/CursorCrosshair.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,24 +1,7 @@
|
|
|
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
|
-
useAnimatedProps,
|
|
21
|
-
} from 'react-native-reanimated';
|
|
4
|
+
import Animated, { useAnimatedStyle, useDerivedValue, useAnimatedProps } from 'react-native-reanimated';
|
|
22
5
|
import Svg, { Line as SVGLine } from 'react-native-svg';
|
|
23
6
|
import { AnimatedText } from '../../components/AnimatedText';
|
|
24
7
|
import { LineChartDimensionsContext } from './Chart';
|
|
@@ -33,14 +16,14 @@ const TEXT_CONSTANTS = {
|
|
|
33
16
|
CHAR_WIDTH_RATIO: 0.6,
|
|
34
17
|
MIN_WIDTH: 25,
|
|
35
18
|
MAX_WIDTH: 150,
|
|
36
|
-
INPUT_PADDING: 4
|
|
19
|
+
INPUT_PADDING: 4
|
|
37
20
|
};
|
|
38
21
|
const SPACING = {
|
|
39
22
|
VERTICAL_TEXT_OFFSET: 40,
|
|
40
23
|
HORIZONTAL_TEXT_MARGIN: 8,
|
|
41
24
|
HORIZONTAL_RIGHT_MARGIN: 16,
|
|
42
25
|
BASE_LINE_GAP: 8,
|
|
43
|
-
X_AXIS_LABEL_RESERVED_HEIGHT: 40
|
|
26
|
+
X_AXIS_LABEL_RESERVED_HEIGHT: 40 // Reserved space at bottom for x-axis labels
|
|
44
27
|
};
|
|
45
28
|
const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
|
|
46
29
|
export function LineChartCursorLine({
|
|
@@ -52,14 +35,21 @@ export function LineChartCursorLine({
|
|
|
52
35
|
...cursorProps
|
|
53
36
|
}) {
|
|
54
37
|
const isHorizontal = cursorProps?.orientation === 'horizontal';
|
|
55
|
-
const {
|
|
56
|
-
|
|
38
|
+
const {
|
|
39
|
+
height,
|
|
40
|
+
width
|
|
41
|
+
} = React.useContext(LineChartDimensionsContext);
|
|
42
|
+
const {
|
|
43
|
+
currentX,
|
|
44
|
+
currentY,
|
|
45
|
+
isActive
|
|
46
|
+
} = useLineChart();
|
|
57
47
|
const price = useLineChartPrice({
|
|
58
48
|
format: isHorizontal ? format : undefined,
|
|
59
|
-
precision: 2
|
|
49
|
+
precision: 2
|
|
60
50
|
});
|
|
61
51
|
const datetime = useLineChartDatetime({
|
|
62
|
-
format: !isHorizontal ? format : undefined
|
|
52
|
+
format: !isHorizontal ? format : undefined
|
|
63
53
|
});
|
|
64
54
|
const displayText = isHorizontal ? price.formatted : datetime.formatted;
|
|
65
55
|
const calculateTextWidth = (text, fontSize) => {
|
|
@@ -67,10 +57,7 @@ export function LineChartCursorLine({
|
|
|
67
57
|
|
|
68
58
|
const charWidth = fontSize * TEXT_CONSTANTS.CHAR_WIDTH_RATIO;
|
|
69
59
|
const calculatedWidth = text.length * charWidth;
|
|
70
|
-
return Math.max(
|
|
71
|
-
TEXT_CONSTANTS.MIN_WIDTH,
|
|
72
|
-
Math.min(TEXT_CONSTANTS.MAX_WIDTH, calculatedWidth)
|
|
73
|
-
);
|
|
60
|
+
return Math.max(TEXT_CONSTANTS.MIN_WIDTH, Math.min(TEXT_CONSTANTS.MAX_WIDTH, calculatedWidth));
|
|
74
61
|
};
|
|
75
62
|
const textWidth = useDerivedValue(() => {
|
|
76
63
|
const text = displayText.value;
|
|
@@ -82,13 +69,7 @@ export function LineChartCursorLine({
|
|
|
82
69
|
if (!isHorizontal) return 0;
|
|
83
70
|
const fontSize = textStyle?.fontSize || TEXT_CONSTANTS.DEFAULT_FONT_SIZE;
|
|
84
71
|
const gap = Math.max(SPACING.BASE_LINE_GAP, fontSize * 0.5);
|
|
85
|
-
return
|
|
86
|
-
width -
|
|
87
|
-
textWidth.value -
|
|
88
|
-
gap -
|
|
89
|
-
TEXT_CONSTANTS.INPUT_PADDING -
|
|
90
|
-
SPACING.HORIZONTAL_RIGHT_MARGIN
|
|
91
|
-
);
|
|
72
|
+
return width - textWidth.value - gap - TEXT_CONSTANTS.INPUT_PADDING - SPACING.HORIZONTAL_RIGHT_MARGIN;
|
|
92
73
|
});
|
|
93
74
|
const lineEndY = useDerivedValue(() => {
|
|
94
75
|
if (isHorizontal) return 0;
|
|
@@ -99,19 +80,13 @@ export function LineChartCursorLine({
|
|
|
99
80
|
const containerStyle = useAnimatedStyle(() => ({
|
|
100
81
|
opacity: isActive.value ? 1 : 0,
|
|
101
82
|
height: '100%',
|
|
102
|
-
transform: isHorizontal
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
]
|
|
108
|
-
: [
|
|
109
|
-
{
|
|
110
|
-
translateX: currentX.value,
|
|
111
|
-
},
|
|
112
|
-
],
|
|
83
|
+
transform: isHorizontal ? [{
|
|
84
|
+
translateY: currentY.value
|
|
85
|
+
}] : [{
|
|
86
|
+
translateX: currentX.value
|
|
87
|
+
}]
|
|
113
88
|
}));
|
|
114
|
-
const calculateFontSizeAdjustment =
|
|
89
|
+
const calculateFontSizeAdjustment = fontSize => {
|
|
115
90
|
'worklet';
|
|
116
91
|
|
|
117
92
|
return Math.max(0.6, Math.min(0.8, 0.7 + (fontSize - 12) * 0.01));
|
|
@@ -125,22 +100,18 @@ export function LineChartCursorLine({
|
|
|
125
100
|
fontSize,
|
|
126
101
|
lineHeight,
|
|
127
102
|
color: textStyle?.color || TEXT_CONSTANTS.DEFAULT_COLOR,
|
|
128
|
-
...textStyle
|
|
103
|
+
...textStyle
|
|
129
104
|
};
|
|
130
105
|
if (isHorizontal) {
|
|
131
106
|
const fontSizeAdjustment = calculateFontSizeAdjustment(fontSize);
|
|
132
107
|
const textCenterOffset = -(lineHeight * fontSizeAdjustment);
|
|
133
108
|
return {
|
|
134
109
|
...baseStyle,
|
|
135
|
-
left:
|
|
136
|
-
width -
|
|
137
|
-
textWidth.value -
|
|
138
|
-
SPACING.HORIZONTAL_RIGHT_MARGIN +
|
|
139
|
-
TEXT_CONSTANTS.INPUT_PADDING,
|
|
110
|
+
left: width - textWidth.value - SPACING.HORIZONTAL_RIGHT_MARGIN + TEXT_CONSTANTS.INPUT_PADDING,
|
|
140
111
|
top: textCenterOffset,
|
|
141
112
|
textAlign: 'right',
|
|
142
113
|
paddingLeft: 0,
|
|
143
|
-
paddingRight: 0
|
|
114
|
+
paddingRight: 0
|
|
144
115
|
};
|
|
145
116
|
}
|
|
146
117
|
|
|
@@ -165,66 +136,40 @@ export function LineChartCursorLine({
|
|
|
165
136
|
}
|
|
166
137
|
|
|
167
138
|
// Position label in the reserved space at the bottom
|
|
168
|
-
const labelTop =
|
|
169
|
-
height -
|
|
170
|
-
SPACING.X_AXIS_LABEL_RESERVED_HEIGHT +
|
|
171
|
-
SPACING.HORIZONTAL_TEXT_MARGIN;
|
|
139
|
+
const labelTop = height - SPACING.X_AXIS_LABEL_RESERVED_HEIGHT + SPACING.HORIZONTAL_TEXT_MARGIN;
|
|
172
140
|
return {
|
|
173
141
|
...baseStyle,
|
|
174
142
|
left: labelLeft,
|
|
175
143
|
top: labelTop,
|
|
176
|
-
textAlign: 'center'
|
|
144
|
+
textAlign: 'center'
|
|
177
145
|
};
|
|
178
146
|
});
|
|
179
|
-
const lineAnimatedProps = useAnimatedProps(
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
)
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
{
|
|
201
|
-
style: styles.svg,
|
|
202
|
-
},
|
|
203
|
-
/*#__PURE__*/ React.createElement(
|
|
204
|
-
AnimatedLine,
|
|
205
|
-
_extends(
|
|
206
|
-
{
|
|
207
|
-
animatedProps: lineAnimatedProps,
|
|
208
|
-
strokeWidth: 2,
|
|
209
|
-
stroke: color,
|
|
210
|
-
strokeDasharray: '3 3',
|
|
211
|
-
},
|
|
212
|
-
lineProps
|
|
213
|
-
)
|
|
214
|
-
)
|
|
215
|
-
),
|
|
216
|
-
/*#__PURE__*/ React.createElement(AnimatedText, {
|
|
217
|
-
text: displayText,
|
|
218
|
-
style: textPositionStyle,
|
|
219
|
-
})
|
|
220
|
-
),
|
|
221
|
-
children
|
|
222
|
-
);
|
|
147
|
+
const lineAnimatedProps = useAnimatedProps(() => ({
|
|
148
|
+
x1: 0,
|
|
149
|
+
y1: 0,
|
|
150
|
+
x2: lineEndX.value,
|
|
151
|
+
y2: lineEndY.value
|
|
152
|
+
}), [lineEndX, lineEndY]);
|
|
153
|
+
return /*#__PURE__*/React.createElement(LineChartCursor, _extends({}, cursorProps, {
|
|
154
|
+
type: "line"
|
|
155
|
+
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
156
|
+
style: containerStyle
|
|
157
|
+
}, /*#__PURE__*/React.createElement(Svg, {
|
|
158
|
+
style: styles.svg
|
|
159
|
+
}, /*#__PURE__*/React.createElement(AnimatedLine, _extends({
|
|
160
|
+
animatedProps: lineAnimatedProps,
|
|
161
|
+
strokeWidth: 2,
|
|
162
|
+
stroke: color,
|
|
163
|
+
strokeDasharray: "3 3"
|
|
164
|
+
}, lineProps))), /*#__PURE__*/React.createElement(AnimatedText, {
|
|
165
|
+
text: displayText,
|
|
166
|
+
style: textPositionStyle
|
|
167
|
+
})), children);
|
|
223
168
|
}
|
|
224
169
|
const styles = StyleSheet.create({
|
|
225
170
|
svg: {
|
|
226
171
|
...StyleSheet.absoluteFillObject,
|
|
227
|
-
height: '100%'
|
|
228
|
-
}
|
|
172
|
+
height: '100%'
|
|
173
|
+
}
|
|
229
174
|
});
|
|
230
|
-
//# sourceMappingURL=CursorLine.js.map
|
|
175
|
+
//# sourceMappingURL=CursorLine.js.map
|