coinjar · honeybadger26 · May 22, 2024 · May 13, 2024 · May 13, 2024 · May 21, 2024
diff --git a/example/README.md b/example/README.md
@@ -28,7 +28,6 @@ For Web:
 yarn run web
 ```
 
-
 ## Example Charts
 
 The following charts are included:

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -25,9 +25,7 @@ export default function App() {
             paddingY="major-2"
             alignY="center"
           >
-            <Heading.H5 key={'heading'}>
-              React Native WAGMI Charts 💸
-            </Heading.H5>
+            <Heading.H5 key="heading">React Native WAGMI Charts 💸</Heading.H5>
             {selected ? (
               <Button
                 size="small"

diff --git a/example/src/CandlestickChart.tsx b/example/src/CandlestickChart.tsx
@@ -30,11 +30,9 @@ export default function App() {
         </CandlestickChart>
         <Heading.H6>Load Data</Heading.H6>
         <Box marginTop="major-2">
-          <Flex flexWrap={'wrap'}>
-            <Button onPress={() => setData(mockData)}>candlestick-data</Button>
-            <Button onPress={() => setData(mockData2)}>
-              candlestick-data2
-            </Button>
+          <Flex flexWrap="wrap">
+            <Button onPress={() => setData(mockData)}>Data 1</Button>
+            <Button onPress={() => setData(mockData2)}>Data 2</Button>
           </Flex>
         </Box>
         <Stack padding="major-2" spacing="major-1">

diff --git a/example/src/LineChart.tsx b/example/src/LineChart.tsx
@@ -81,7 +81,7 @@ export default function App() {
           <LineChart.Highlight
             color="red"
             from={Math.floor(data.length / 3)}
-            to={Math.floor(data.length * (2/3))}
+            to={Math.floor(data.length * (2 / 3))}
           />
         )}
       </LineChart.Path>
@@ -139,7 +139,7 @@ export default function App() {
       <LineChart.Provider
         xDomain={
           scaleRelativeToTime
-            ? [data[0].timestamp, data[data.length - 1].timestamp]
+            ? [data[0]!.timestamp, data[data.length - 1]!.timestamp]
             : undefined
         }
         xLength={partialDay ? data.length * 2 : undefined}
@@ -157,8 +157,8 @@ export default function App() {
       >
         {chart}
         <Box marginX="major-2" marginTop="major-2">
-          <Heading.H6 marginBottom={'major-2'}>Load Data</Heading.H6>
-          <Flex flexWrap={'wrap'}>
+          <Heading.H6 marginBottom="major-2">Load Data</Heading.H6>
+          <Flex flexWrap="wrap">
             <Button onPress={() => setData(mockData)}>Data 1</Button>
             <Button onPress={() => setData(mockData2)}>Data 2</Button>
             <Button onPress={() => setData(mockDataNonLinear)}>Data 3</Button>
@@ -196,25 +196,25 @@ export default function App() {
             <Button onPress={toggleYRange}>
               {`${yRange || 'Set'} Y Domain`}
             </Button>
-            <Button onPress={toggleMultiData}>{`Multi Data`}</Button>
-            <Button onPress={togglePartialDay}>{`Partial Day`}</Button>
+            <Button onPress={toggleMultiData}>Multi Data</Button>
+            <Button onPress={togglePartialDay}>Partial Day</Button>
             <Button onPress={() => setToggleHighlight((val) => !val)}>
               Toggle highlight
             </Button>
-            <Button
-              onPress={() => setToggleMinMaxLabels((p) => !p)}
-            >{`Toggle min/max labels`}</Button>
+            <Button onPress={() => setToggleMinMaxLabels((p) => !p)}>
+              Toggle min/max labels
+            </Button>
             <Button
               onPress={() => {
                 // Use with data 3 for best demonstration
                 setScaleRelativeToTime((val) => !val);
               }}
             >
-              {`Toggle ${scaleRelativeToTime ? 'off' : 'on'} XDomain`}
+              Toggle {scaleRelativeToTime ? 'off' : 'on'} XDomain
+            </Button>
+            <Button onPress={() => setToggleSnapToPoint((val) => !val)}>
+              Toggle Snap {toggleSnapToPoint ? 'Off' : 'On'}
             </Button>
-            <Button
-              onPress={() => setToggleSnapToPoint((val) => !val)}
-            >{`Toggle Snap ${toggleSnapToPoint ? 'Off' : 'On'}`}</Button>
           </Flex>
         </Box>
         {!multiData && (

diff --git a/example/src/data/candlestick-data2.json b/example/src/data/candlestick-data2.json
@@ -1,142 +1,142 @@
 [
   {
-      "timestamp": 1625962500000,
-      "open": 33870.25,
-      "high": 33930.52,
-      "low": 33715.12,
-      "close": 33770.11
+    "timestamp": 1625962500000,
+    "open": 33870.25,
+    "high": 33930.52,
+    "low": 33715.12,
+    "close": 33770.11
   },
   {
-      "timestamp": 1625961600000,
-      "open": 33670.25,
-      "high": 33835.52,
-      "low": 33635.12,
-      "close": 33825.11
+    "timestamp": 1625961600000,
+    "open": 33670.25,
+    "high": 33835.52,
+    "low": 33635.12,
+    "close": 33825.11
   },
   {
-      "timestamp": 1625960700000,
-      "open": 33760.25,
-      "high": 33785.52,
-      "low": 33645.12,
-      "close": 33650.11
+    "timestamp": 1625960700000,
+    "open": 33760.25,
+    "high": 33785.52,
+    "low": 33645.12,
+    "close": 33650.11
   },
   {
-      "timestamp": 1625959800000,
-      "open": 33705.25,
-      "high": 33760.52,
-      "low": 33705.12,
-      "close": 33750.11
+    "timestamp": 1625959800000,
+    "open": 33705.25,
+    "high": 33760.52,
+    "low": 33705.12,
+    "close": 33750.11
   },
   {
-      "timestamp": 1625958900000,
-      "open": 33770.25,
-      "high": 33770.52,
-      "low": 33710.12,
-      "close": 33710.11
+    "timestamp": 1625958900000,
+    "open": 33770.25,
+    "high": 33770.52,
+    "low": 33710.12,
+    "close": 33710.11
   },
   {
-      "timestamp": 1625958000000,
-      "open": 33740.25,
-      "high": 33780.52,
-      "low": 33710.12,
-      "close": 33780.11
+    "timestamp": 1625958000000,
+    "open": 33740.25,
+    "high": 33780.52,
+    "low": 33710.12,
+    "close": 33780.11
   },
   {
-      "timestamp": 1625957100000,
-      "open": 33670.25,
-      "high": 33785.52,
-      "low": 33660.12,
-      "close": 33745.11
+    "timestamp": 1625957100000,
+    "open": 33670.25,
+    "high": 33785.52,
+    "low": 33660.12,
+    "close": 33745.11
   },
   {
-      "timestamp": 1625956200000,
-      "open": 33645.25,
-      "high": 33670.52,
-      "low": 33645.12,
-      "close": 33660.11
+    "timestamp": 1625956200000,
+    "open": 33645.25,
+    "high": 33670.52,
+    "low": 33645.12,
+    "close": 33660.11
   },
   {
-      "timestamp": 1625955300000,
-      "open": 33640.25,
-      "high": 33665.52,
-      "low": 33600.12,
-      "close": 33630.11
+    "timestamp": 1625955300000,
+    "open": 33640.25,
+    "high": 33665.52,
+    "low": 33600.12,
+    "close": 33630.11
   },
   {
-      "timestamp": 1625954400000,
-      "open": 33570.25,
-      "high": 33645.52,
-      "low": 33545.12,
-      "close": 33645.11
+    "timestamp": 1625954400000,
+    "open": 33570.25,
+    "high": 33645.52,
+    "low": 33545.12,
+    "close": 33645.11
   },
   {
-      "timestamp": 1625953500000,
-      "open": 33515.25,
-      "high": 33550.52,
-      "low": 33515.12,
-      "close": 33540.11
+    "timestamp": 1625953500000,
+    "open": 33515.25,
+    "high": 33550.52,
+    "low": 33515.12,
+    "close": 33540.11
   },
   {
-      "timestamp": 1625952600000,
-      "open": 33485.25,
-      "high": 33520.52,
-      "low": 33460.12,
-      "close": 33515.11
+    "timestamp": 1625952600000,
+    "open": 33485.25,
+    "high": 33520.52,
+    "low": 33460.12,
+    "close": 33515.11
   },
   {
-      "timestamp": 1625951700000,
-      "open": 33440.25,
-      "high": 33545.52,
-      "low": 33440.12,
-      "close": 33510.11
+    "timestamp": 1625951700000,
+    "open": 33440.25,
+    "high": 33545.52,
+    "low": 33440.12,
+    "close": 33510.11
   },
   {
-      "timestamp": 1625950800000,
-      "open": 33480.25,
-      "high": 33480.52,
-      "low": 33430.12,
-      "close": 33445.11
+    "timestamp": 1625950800000,
+    "open": 33480.25,
+    "high": 33480.52,
+    "low": 33430.12,
+    "close": 33445.11
   },
   {
-      "timestamp": 1625949900000,
-      "open": 33435.25,
-      "high": 33465.52,
-      "low": 33435.12,
-      "close": 33455.11
+    "timestamp": 1625949900000,
+    "open": 33435.25,
+    "high": 33465.52,
+    "low": 33435.12,
+    "close": 33455.11
   },
   {
-      "timestamp": 1625949000000,
-      "open": 33445.25,
-      "high": 33520.52,
-      "low": 33415.12,
-      "close": 33440.11
+    "timestamp": 1625949000000,
+    "open": 33445.25,
+    "high": 33520.52,
+    "low": 33415.12,
+    "close": 33440.11
   },
   {
-      "timestamp": 1625948100000,
-      "open": 33215.25,
-      "high": 33430.52,
-      "low": 33215.12,
-      "close": 33420.11
+    "timestamp": 1625948100000,
+    "open": 33215.25,
+    "high": 33430.52,
+    "low": 33215.12,
+    "close": 33420.11
   },
   {
-      "timestamp": 1625947200000,
-      "open": 33510.25,
-      "high": 33515.52,
-      "low": 33250.12,
-      "close": 33250.11
+    "timestamp": 1625947200000,
+    "open": 33510.25,
+    "high": 33515.52,
+    "low": 33250.12,
+    "close": 33250.11
   },
   {
-      "timestamp": 1625946300000,
-      "open": 33545.25,
-      "high": 33560.52,
-      "low": 33510.12,
-      "close": 33520.11
+    "timestamp": 1625946300000,
+    "open": 33545.25,
+    "high": 33560.52,
+    "low": 33510.12,
+    "close": 33520.11
   },
   {
-      "timestamp": 1625945400000,
-      "open": 33575.25,
-      "high": 33600.52,
-      "low": 33475.12,
-      "close": 33520.11
+    "timestamp": 1625945400000,
+    "open": 33575.25,
+    "high": 33600.52,
+    "low": 33475.12,
+    "close": 33520.11
   }
-]
+]
diff --git a/example/src/line-data-gh.json b/example/src/line-data-gh.json
diff --git a/src/charts/candle/Candle.tsx b/src/charts/candle/Candle.tsx
@@ -1,19 +1,13 @@
 import React from 'react';
+import { ColorValue } from 'react-native';
 import Animated, {
   withTiming,
   useAnimatedProps,
 } from 'react-native-reanimated';
-import {
-  Line,
-  LineProps,
-  NumberProp,
-  Rect,
-  RectProps,
-} from 'react-native-svg';
+import { Line, LineProps, NumberProp, Rect, RectProps } from 'react-native-svg';
 
 import type { TCandle, TDomain } from './types';
 import { getY, getHeight } from './utils';
-import { ColorValue } from 'react-native';
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 const AnimatedLine = Animated.createAnimatedComponent(Line);

diff --git a/src/charts/candle/DatetimeText.tsx b/src/charts/candle/DatetimeText.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';