From 74ff75921e566eebd14be143bb31578096db731c Mon Sep 17 00:00:00 2001 From: Gabriel Moncea Date: Thu, 1 Feb 2024 23:38:34 +0100 Subject: [PATCH 1/4] fix: update to c++17 and cocoapods 1.14.3 --- example/ios/GraphExample.xcodeproj/project.pbxproj | 4 ++-- example/ios/Podfile.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/example/ios/GraphExample.xcodeproj/project.pbxproj b/example/ios/GraphExample.xcodeproj/project.pbxproj index 6b4fec8..8b2fa92 100644 --- a/example/ios/GraphExample.xcodeproj/project.pbxproj +++ b/example/ios/GraphExample.xcodeproj/project.pbxproj @@ -794,7 +794,7 @@ buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; - CLANG_CXX_LANGUAGE_STANDARD = "c++14"; + CLANG_CXX_LANGUAGE_STANDARD = "c++17"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; @@ -856,7 +856,7 @@ buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; - CLANG_CXX_LANGUAGE_STANDARD = "c++14"; + CLANG_CXX_LANGUAGE_STANDARD = "c++17"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 973513c..ce52c8f 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -450,8 +450,8 @@ PODS: - React-RCTText - ReactCommon/turbomodule/core - Yoga - - RNStaticSafeAreaInsets (2.1.1): - - React + - RNStaticSafeAreaInsets (2.2.0): + - React-Core - SocketRocket (0.6.0) - Yoga (1.14.0) - YogaKit (1.18.1): @@ -676,11 +676,11 @@ SPEC CHECKSUMS: RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 RNReactNativeHapticFeedback: 4085973f5a38b40d3c6793a3ee5724773eae045e RNReanimated: b1220a0e5168745283ff5d53bfc7d2144b2cee1b - RNStaticSafeAreaInsets: 6103cf09647fa427186d30f67b0f5163c1ae8252 + RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 Yoga: d56980c8914db0b51692f55533409e844b66133c YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 69e7f1fd189d8c9d5c72fa8e8c8692596d21099b -COCOAPODS: 1.12.1 +COCOAPODS: 1.14.3 From 3b47302ba309007311538adc51d0300e443778e6 Mon Sep 17 00:00:00 2001 From: Gabriel Moncea Date: Thu, 1 Feb 2024 23:38:54 +0100 Subject: [PATCH 2/4] feat: add selectionDotPositionX prop --- example/src/screens/GraphPage.tsx | 11 +++++++++++ src/AnimatedLineGraph.tsx | 23 +++++++++++++---------- src/LineGraphProps.ts | 5 +++++ 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/example/src/screens/GraphPage.tsx b/example/src/screens/GraphPage.tsx index 8dbfd9b..1be581f 100644 --- a/example/src/screens/GraphPage.tsx +++ b/example/src/screens/GraphPage.tsx @@ -29,6 +29,7 @@ export function GraphPage() { const [enableGradient, setEnableGradient] = useState(false) const [enableRange, setEnableRange] = useState(false) const [enableIndicator, setEnableIndicator] = useState(false) + const [enableFixedDotPosition, setEnableFixedDotPosition] = useState(false) const [indicatorPulsating, setIndicatorPulsating] = useState(false) const [points, setPoints] = useState(POINTS) @@ -97,6 +98,9 @@ export function GraphPage() { onGestureStart={() => hapticFeedback('impactLight')} SelectionDot={enableCustomSelectionDot ? SelectionDot : undefined} range={range} + selectionDotPositionX={ + enableFixedDotPosition ? points.length / 2 : undefined + } enableIndicator={enableIndicator} horizontalPadding={enableIndicator ? 15 : 0} indicatorPulsating={indicatorPulsating} @@ -138,6 +142,13 @@ export function GraphPage() { isEnabled={enableRange} setIsEnabled={setEnableRange} /> + {isAnimated ? ( + + ) : null} [ - 0, - Math.min(0.15, pathEnd.value), - pathEnd.value, - pathEnd.value, - 1, - ]) - const onLayout = useCallback( ({ nativeEvent: { layout } }: LayoutChangeEvent) => { setWidth(Math.round(layout.width)) @@ -161,12 +154,13 @@ export function AnimatedLineGraph({ ) const lineWidth = useMemo(() => { - const lastPoint = pointsInRange[pointsInRange.length - 1] + const index = selectionDotPositionX ?? pointsInRange.length - 1 + const lastPoint = pointsInRange[index] if (lastPoint == null) return drawingWidth return Math.max(getXInRange(drawingWidth, lastPoint.date, pathRange.x), 0) - }, [drawingWidth, pathRange.x, pointsInRange]) + }, [selectionDotPositionX, drawingWidth, pathRange.x, pointsInRange]) const indicatorX = useDerivedValue( () => Math.floor(lineWidth) + horizontalPadding @@ -175,6 +169,15 @@ export function AnimatedLineGraph({ () => getYForX(commands.value, indicatorX.value) || 0 ) + const positions = useDerivedValue(() => { + if (selectionDotPositionX && !isActive.value) { + const pEnd = indicatorX.value / width + return [0, Math.min(0.15, pEnd), pEnd, pEnd, 1] + } + + return [0, Math.min(0.15, pathEnd.value), pathEnd.value, pathEnd.value, 1] + }) + const indicatorPulseColor = useMemo(() => hexToRgba(color, 0.4), [color]) const shouldFillGradient = gradientFillColors != null diff --git a/src/LineGraphProps.ts b/src/LineGraphProps.ts index 21e147f..7611a05 100644 --- a/src/LineGraphProps.ts +++ b/src/LineGraphProps.ts @@ -57,6 +57,11 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & { * Whether to enable Graph scrubbing/pan gesture. */ enablePanGesture?: boolean + /** + * The position value of the selection dot on the x-axis. + * The value must be within the range of the points' length. + */ + selectionDotPositionX?: number /** * The color of the selection dot when the user is panning the graph. */ From d4c0b8af9991f0b33c15b058866224d51d91cdb7 Mon Sep 17 00:00:00 2001 From: Gabriel Moncea Date: Fri, 2 Feb 2024 13:59:44 +0100 Subject: [PATCH 3/4] feat: add fadoutValueX, rename selectionDotPositionX to selectionDotValueX, update readme w/ examples and gifs --- README.md | 45 ++++++++++++++++++++++++++++++ example/src/screens/GraphPage.tsx | 26 +++++++++-------- img/fadeout.gif | Bin 0 -> 160555 bytes img/fixed-selection-dot.gif | Bin 0 -> 179071 bytes src/AnimatedLineGraph.tsx | 37 +++++++++++++++++++----- src/LineGraphProps.ts | 9 ++++-- 6 files changed, 97 insertions(+), 20 deletions(-) create mode 100644 img/fadeout.gif create mode 100644 img/fixed-selection-dot.gif diff --git a/README.md b/README.md index 7b51aa6..15da48c 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,49 @@ Example: --- +### `selectionDotValueX` + + + +Fixed starting point for the graph. The value is a number within the range of the data points' length. + +> Requires `animated` to be `true`. + +Example: + +```jsx + +``` + +--- + +### `fadeoutValueX` + + + +Fixed starting point for the graph's fade out. The value is a number within the range of the data points' length. + +> Requires `animated` to be `true`. + +Example: + +```jsx + +``` + +--- + ### `TopAxisLabel` / `BottomAxisLabel` @@ -124,6 +167,8 @@ Example: /> ``` +--- + ### `Range` diff --git a/example/src/screens/GraphPage.tsx b/example/src/screens/GraphPage.tsx index 1be581f..512c4bd 100644 --- a/example/src/screens/GraphPage.tsx +++ b/example/src/screens/GraphPage.tsx @@ -29,7 +29,8 @@ export function GraphPage() { const [enableGradient, setEnableGradient] = useState(false) const [enableRange, setEnableRange] = useState(false) const [enableIndicator, setEnableIndicator] = useState(false) - const [enableFixedDotPosition, setEnableFixedDotPosition] = useState(false) + const [enableDotValueX, setEnableDotValueX] = useState(true) + const [enableFadeoutValueX, setEnableFadeoutValueX] = useState(false) const [indicatorPulsating, setIndicatorPulsating] = useState(false) const [points, setPoints] = useState(POINTS) @@ -98,12 +99,12 @@ export function GraphPage() { onGestureStart={() => hapticFeedback('impactLight')} SelectionDot={enableCustomSelectionDot ? SelectionDot : undefined} range={range} - selectionDotPositionX={ - enableFixedDotPosition ? points.length / 2 : undefined - } + selectionDotValueX={enableDotValueX ? points.length / 2 : undefined} + fadeoutValueX={enableFadeoutValueX ? points.length / 2 : undefined} enableIndicator={enableIndicator} horizontalPadding={enableIndicator ? 15 : 0} indicatorPulsating={indicatorPulsating} + panGestureDelay={0} />