react-native-wagmi-charts 2.0.1 → 2.1.0

package/README.md

@@ -63,6 +63,7 @@ A sweet & simple chart library for React Native that will make us feel like **W*
   - [LineChart.Tooltip](#linecharttooltip)
   - [LineChart.PriceText](#linechartpricetext)
   - [LineChart.DatetimeText](#linechartdatetimetext)
+  - [LineChart.HoverTrap](#linecharthovertrap)
   - [CandlestickChart.Provider](#candlestickchartprovider)
   - [CandlestickChart](#candlestickchart)
   - [CandlestickChart.Candles](#candlestickchartcandles)
@@ -374,6 +375,25 @@ To customise the color of the line chart cursor, supply a `color` prop to `LineC
 
 <img width="200px" alt="Screen Shot 2021-09-13 at 4 53 46 pm" src="https://user-images.githubusercontent.com/7336481/133037333-6b1345e5-a98b-459c-b3b1-6e5b08143f33.png">
 
+#### Hovering the chart
+
+By default, the cursor is triggered whenever you press the chart.
+
+If your app runs on Web, you may want to trigger the cursor when a user hovers, too.
+
+To achieve this, simply add `<LineChart.HoverTrap />` as the child of your cursor.
+
+```jsx
+<LineChart.Provider data={data}>
+  <LineChart>
+    <LineChart.Path color="hotpink" />
+    <LineChart.CursorCrosshair color="hotpink>
+      <LineChart.HoverTrap />
+    </LineChart.CursorCrosshair>
+  </LineChart>
+</LineChart.Provider>
+```
+
 ### Gradients
 
 By using the `LineChart.Gradient` component, you can apply a gradient to the area underneath your path.
@@ -844,7 +864,6 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | `showInactiveColor` | `boolean` | `true`    | Whether or not to show the inactive highlight when the chart is inactive. |
 | `width`             | `number`  | `3`       | Width of the highlight stroke.                                            |
 
-
 ### LineChart.HorizontalLine
 
 | Prop        | Type                                                   | Default  | Description                                                                                                |
@@ -888,6 +907,16 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | `style`   | `{}`                               |               | Style of the price text                                                                                                                                                   |
 | `variant` | `"formatted"` or `"value"`         | `"formatted"` | Default representation of the timestamp value.                                                                                                                            |
 
+### LineChart.HoverTrap
+
+This component doesn't take any props.
+
+Place it as the child of your cursor component to trap hover events on Web. If you're using mutliple cursors, place this as the child of your lowest-rendered cursor.
+
+```tsx
+<LineChart.HoverTrap />
+```
+
 ### CandlestickChart.Provider
 
 | Prop   | Type                                                                                   | Default | Description                                                             |

package/example/package.json

@@ -15,23 +15,21 @@
   "dependencies": {
     "bumbag": "^2.2.1",
     "bumbag-native": "^2.3.0",
-    "expo": "42.0.1",
-    "expo-haptics": "^10.1.0",
-    "expo-splash-screen": "~0.11.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-reanimated": "2.2.2",
-    "react-native-unimodules": "~0.14.5",
-    "react-native-web": "~0.13.12"
+    "expo": "^44.0.0-beta.2",
+    "expo-haptics": "~11.1.0",
+    "expo-splash-screen": "~0.14.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-web": "0.17.1"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
+    "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.14.6",
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.8.1",
+    "babel-preset-expo": "9.0.1",
     "jsonfile": "^6.1.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0"

package/example/src/App.tsx

@@ -11,45 +11,50 @@ import {
 
 import CandlestickChart from './CandlestickChart';
 import LineChart from './LineChart';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function App() {
   const [selected, setSelected] = React.useState('');
   return (
-    <BumbagNativeProvider>
-      <Box.Safe flex="1">
-        <Level
-          verticalBelow=""
-          paddingX="major-2"
-          paddingY="major-2"
-          alignY="center"
-        >
-          <Heading.H5 key={'heading'}>React Native WAGMI Charts 💸</Heading.H5>
-          {selected ? (
-            <Button size="small" onPress={() => setSelected('')}>
-              Back
-            </Button>
-          ) : null}
-        </Level>
-        <Box.Scroll>
-          {!selected && (
-            <Box paddingX="major-2" marginTop="major-6">
-              <Heading.H6 marginBottom="major-2">
-                Click a chart below to get started
-              </Heading.H6>
-              <Button onPress={() => setSelected('candlestick')}>
-                <Text>Candlestick</Text>
-              </Button>
-              <Button onPress={() => setSelected('line')}>
-                <Text>Line</Text>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <BumbagNativeProvider>
+        <Box.Safe flex="1">
+          <Level
+            verticalBelow=""
+            paddingX="major-2"
+            paddingY="major-2"
+            alignY="center"
+          >
+            <Heading.H5 key={'heading'}>
+              React Native WAGMI Charts 💸
+            </Heading.H5>
+            {selected ? (
+              <Button size="small" onPress={() => setSelected('')}>
+                Back
               </Button>
+            ) : null}
+          </Level>
+          <Box.Scroll>
+            {!selected && (
+              <Box paddingX="major-2" marginTop="major-6">
+                <Heading.H6 marginBottom="major-2">
+                  Click a chart below to get started
+                </Heading.H6>
+                <Button onPress={() => setSelected('candlestick')}>
+                  <Text>Candlestick</Text>
+                </Button>
+                <Button onPress={() => setSelected('line')}>
+                  <Text>Line</Text>
+                </Button>
+              </Box>
+            )}
+            <Box marginTop="major-2">
+              {selected === 'candlestick' && <CandlestickChart />}
+              {selected === 'line' && <LineChart />}
             </Box>
-          )}
-          <Box marginTop="major-2">
-            {selected === 'candlestick' && <CandlestickChart />}
-            {selected === 'line' && <LineChart />}
-          </Box>
-        </Box.Scroll>
-      </Box.Safe>
-    </BumbagNativeProvider>
+          </Box.Scroll>
+        </Box.Safe>
+      </BumbagNativeProvider>
+    </GestureHandlerRootView>
   );
 }

package/example/src/LineChart.tsx

@@ -64,7 +64,8 @@ export default function App() {
         onActivated={invokeHaptic}
         onEnded={invokeHaptic}
       >
-        <LineChart.Tooltip />
+        <LineChart.Tooltip position="top" />
+        <LineChart.HoverTrap />
       </LineChart.CursorCrosshair>
     </LineChart>
   );