From 71c578dfdea3a6be30bf7058d81007f8013aaa0c Mon Sep 17 00:00:00 2001 From: Marcin Pawlicki <48184525+dynamichny@users.noreply.github.com> Date: Mon, 25 Oct 2021 19:07:46 +0200 Subject: [PATCH 1/2] feat: vertical and horizontal lines (#45) --- .prettierrc.js | 7 +++ README.md | 13 ++++++ gifs/lines.png | Bin 0 -> 19783 bytes src/charts/linear/ChartLines.js | 58 +++++++++++++++++++++++++ src/charts/linear/ChartPath.js | 2 + src/charts/linear/ChartPathProvider.js | 43 +++++++++++++++++- src/index.js | 4 ++ 7 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 .prettierrc.js create mode 100644 gifs/lines.png create mode 100644 src/charts/linear/ChartLines.js diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..eb03241 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + arrowParens: 'avoid', + bracketSpacing: true, + bracketSameLine: false, + singleQuote: true, + trailingComma: 'es5', +}; diff --git a/README.md b/README.md index 190c799..2c40ce8 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,19 @@ Labels are useful while moving finger through the chart to show the exact value | `format` | reanimated worklet | `a => a` | Worklet for formatting data from the chart. It can be useful when your data is a timestamp or currency. | | ...props | `object` | `{}` | Rest of the props applied to `TextInput` including `style` | +### `CurrentPositionVerticalLine` & `OpeningPositionHorizontalLine` +CurrentPositionVerticalLine is a vertical line moving with user's finger through chart. + +OpeningPositionHorizontalLine is a horizontal static line on height of the first point. + +| Prop name | type | default | description | +|--------------|----------------------|----------|-------------| +| `color` | `string` | `#000000`| Color of the line. | +| `thickness` | `number` | `2` | Thickness of the line. | +| `length` | `number` | `null` | Length of the line. | +| ...props | `object` | `{}` | Rest of the props applied to svg's `Line`. | + +![](gifs/lines.png) ### Candle Charts diff --git a/gifs/lines.png b/gifs/lines.png new file mode 100644 index 0000000000000000000000000000000000000000..e03d37273164ba1e3c9c137b965d738c54969ce3 GIT binary patch literal 19783 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 KMNUMnLSTYKc?D(w literal 0 HcmV?d00001 diff --git a/src/charts/linear/ChartLines.js b/src/charts/linear/ChartLines.js new file mode 100644 index 0000000..7e831ad --- /dev/null +++ b/src/charts/linear/ChartLines.js @@ -0,0 +1,58 @@ +import React, { useContext } from 'react'; +import Animated from 'react-native-reanimated'; +import { Svg, Line } from 'react-native-svg'; +import ChartContext from '../../helpers/ChartContext'; +import withReanimatedFallback from '../../helpers/withReanimatedFallback'; + +function ChartLineFactory(orientation) { + const isVertical = orientation == 'vertical'; + return function ChartLine({ + color = '#000000', + thickness = 2, + length, + ...props + }) { + const { + currentPositionVerticalLineStyle, + openingPositionHorizontalLineStyle, + } = useContext(ChartContext); + return ( + + + + + + ); + }; +} + +export const CurrentPositionVerticalLine = withReanimatedFallback( + ChartLineFactory('vertical') +); +export const OpeningPositionHorizontalLine = withReanimatedFallback( + ChartLineFactory('horizontal') +); diff --git a/src/charts/linear/ChartPath.js b/src/charts/linear/ChartPath.js index 4ad6746..e4908ac 100644 --- a/src/charts/linear/ChartPath.js +++ b/src/charts/linear/ChartPath.js @@ -188,6 +188,7 @@ export default function ChartPathProvider({ state, setContextValue = () => {}, providedData = rawData, + proceededData, } = useContext(ChartContext) || generateValues(); const prevData = useSharedValue(valuesStore.current.prevData, 'prevData'); @@ -218,6 +219,7 @@ export default function ChartPathProvider({ return; } const [parsedData] = parse(data.points, data.yRange); + proceededData.value = parsedData; const [parsedoriginalData, newExtremes] = parse( data.nativePoints || data.points ); diff --git a/src/charts/linear/ChartPathProvider.js b/src/charts/linear/ChartPathProvider.js index 058219e..5030ae6 100644 --- a/src/charts/linear/ChartPathProvider.js +++ b/src/charts/linear/ChartPathProvider.js @@ -1,10 +1,15 @@ import React, { useMemo, useState } from 'react'; -import { useAnimatedStyle } from 'react-native-reanimated'; +import { + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; import ChartContext, { useGenerateValues } from '../../helpers/ChartContext'; export default function ChartPathProvider({ data: providedData, children }) { const values = useGenerateValues(); + const proceededData = useSharedValue(null); const dotStyle = useAnimatedStyle( () => ({ opacity: values.dotScale.value, @@ -16,16 +21,50 @@ export default function ChartPathProvider({ data: providedData, children }) { }), [] ); + + const currentPositionVerticalLineStyle = useAnimatedStyle( + () => ({ + opacity: values.dotScale.value, + transform: [{ translateX: values.positionX.value }], + }), + [] + ); + + const openingPositionHorizontalLineStyle = useAnimatedStyle(() => { + return { + opacity: proceededData == null ? 0 : 1, + transform: [ + { + translateY: withTiming( + proceededData?.value?.[0].y * values?.layoutSize?.value?.height + + 10 || 0 + ), + }, + ], + }; + }, [proceededData]); + const [contextReanimatedValue, setContextValue] = useState({}); const contextValue = useMemo( () => ({ dotStyle, + currentPositionVerticalLineStyle, + openingPositionHorizontalLineStyle, ...values, ...contextReanimatedValue, providedData, + proceededData, setContextValue, }), - [dotStyle, values, contextReanimatedValue, providedData] + [ + dotStyle, + currentPositionVerticalLineStyle, + openingPositionHorizontalLineStyle, + values, + contextReanimatedValue, + providedData, + proceededData, + ] ); return ( diff --git a/src/index.js b/src/index.js index 30c3834..f2fe890 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,10 @@ Animated.addWhitelistedNativeProps({ text: true }); export { default as ChartPathProvider } from './charts/linear/ChartPathProvider'; export { default as ChartDot } from './charts/linear/ChartDot'; +export { + CurrentPositionVerticalLine, + OpeningPositionHorizontalLine, +} from './charts/linear/ChartLines'; export { ChartYLabel, ChartXLabel } from './charts/linear/ChartLabels'; export { default as ChartPath } from './charts/linear/ChartPath'; export { default as useChartData } from './helpers/useChartData'; From 1a623fbc5d6eca1a19c4ed37833c8d9677285ea8 Mon Sep 17 00:00:00 2001 From: Ajima Chukwuemeka <32770340+ajimae@users.noreply.github.com> Date: Mon, 25 Oct 2021 19:08:17 +0200 Subject: [PATCH 2/2] Fix Broken Link (#43) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2c40ce8..7e2b30f 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ It's a part of the [Rainbow.me project](https://rainbow.me/). ## Installation -1. Install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/next/installation) in the newest version. +1. Install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/next/fundamentals/installation) in the newest version. 2. ```bash yarn add @rainbow-me/animated-charts