react-native-wagmi-charts 2.3.0 → 2.4.0

package/.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+indent_style = space
+indent_size = 2
+
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.gitattributes

@@ -0,0 +1,3 @@
+*.pbxproj -text
+# specific for windows script files
+*.bat text eol=crlf

package/.gitignore

@@ -0,0 +1,60 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+
+# VSCode
+.vscode/
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+android.iml
+
+# Cocoapods
+#
+example/ios/Pods
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Expo
+.expo/*
+
+# generated by bob
+lib/

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint --fix && git add -A && yarn typescript

package/.prettierrc.js

@@ -0,0 +1,5 @@
+const packageJson = require('./package.json');
+
+const config = packageJson.eslintConfig.rules['prettier/prettier'][1];
+
+module.exports = config;

package/.yarnrc

@@ -0,0 +1,3 @@
+# Override Yarn command so we can automatically setup the repo on running `yarn`
+
+yarn-path "scripts/bootstrap.js"

package/README.md

@@ -386,7 +386,7 @@ To customise the color of the line chart cursor, supply a `color` prop to `LineC
 <LineChart.Provider data={data}>
   <LineChart>
     <LineChart.Path color="hotpink" />
-    <LineChart.CursorCrosshair color="hotpink />
+    <LineChart.CursorCrosshair color="hotpink" />
   </LineChart>
 </LineChart.Provider>
 ```
@@ -405,7 +405,7 @@ To achieve this, simply add `<LineChart.HoverTrap />` as the child of your curso
 <LineChart.Provider data={data}>
   <LineChart>
     <LineChart.Path color="hotpink" />
-    <LineChart.CursorCrosshair color="hotpink>
+    <LineChart.CursorCrosshair color="hotpink" >
       <LineChart.HoverTrap />
     </LineChart.CursorCrosshair>
   </LineChart>
@@ -812,10 +812,11 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 
 ### LineChart.Provider
 
-| Prop     | Type                                          | Default | Description                                                                                                                                  |
-| -------- | --------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `data`   | `Array<{ timestamp: number, value: number }>` |         | The line chart data as an array of timestamps & values (prices).                                                                             |
-| `yRange` | `{ min?: number; max?: number }`              |         | Set a custom range for the y values of your chart. See [#20](https://github.com/coinjar/react-native-wagmi-charts/issues/20) for a use-case. |
+| Prop      | Type                                          | Default | Description                                                                                                                                                                                                                                                            |
+| --------- | --------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data`    | `Array<{ timestamp: number, value: number }>` |         | The line chart data as an array of timestamps & values (prices).                                                                                                                                                                                                       |
+| `yRange`  | `{ min?: number; max?: number }`              |         | Set a custom range for the y values of your chart. See [#20](https://github.com/coinjar/react-native-wagmi-charts/issues/20) for a use-case.                                                                                                                           |
+| `xDomain` | `[ min: number; max: number ]`                |         | Scale x values proportionate to their time scale. Distance between points will be relative to each other instead of same spacing between in point. See [#140](https://github.com/coinjar/react-native-wagmi-charts/issues/140#issuecomment-1614264020) for a use-case. |
 
 ### LineChart
 
@@ -837,16 +838,16 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 
 ### LineChart.CursorCrosshair
 
-| Prop                    | Type                           | Default   | Description                                     |
-| ----------------------- | ------------------------------ | --------- | ----------------------------------------------- |
-| `color`                 | `string`                       | `"black"` | Color of the crosshair dot                      |
-| `size`                  | `number`                       | `8`       | Size of the crosshair dot                       |
-| `outerSize`             | `number`                       | `32`      | Size of the outer crosshair dot (faded dot)     |
-| `crosshairWrapperProps` | `ViewProps`                    |           | Props of the wrapper component of the crosshair |
-| `crosshairProps`        | `ViewProps`                    |           | Props of the crosshair dot                      |
-| `crosshairOuterProps`   | `ViewProps`                    |           | Props of the crosshair outer dot                |
-| `snapToPoint`           | `boolean`                      | `false`   | Snap cursor to X position of nearest data point |
-| `...props`              | `LongPressGestureHandlerProps` |           |                                                 |
+| Prop                    | Type                           | Default   | Description                                                           |
+| ----------------------- | ------------------------------ | --------- | --------------------------------------------------------------------- |
+| `color`                 | `string`                       | `"black"` | Color of the crosshair dot                                            |
+| `size`                  | `number`                       | `8`       | Size of the crosshair dot                                             |
+| `outerSize`             | `number`                       | `32`      | Size of the outer crosshair dot (faded dot)                           |
+| `crosshairWrapperProps` | `ViewProps`                    |           | Props of the wrapper component of the crosshair                       |
+| `crosshairProps`        | `ViewProps`                    |           | Props of the crosshair dot                                            |
+| `crosshairOuterProps`   | `ViewProps`                    |           | Props of the crosshair outer dot                                      |
+| `snapToPoint`           | `boolean`                      | `false`   | **REACT NATIVE ONLY** Snap cursor to X position of nearest data point |
+| `...props`              | `LongPressGestureHandlerProps` |           |                                                                       |
 
 ### LineChart.CursorLine
 
@@ -900,13 +901,13 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 
 ### LineChart.Tooltip
 
-| Prop           | Type                  | Default | Description                                          |
-| -------------- | --------------------- | ------- | ---------------------------------------------------- |
-| `xGutter`      | `number`              | `8`     | X axis gutter in which the tooltip will not pass.    |
-| `yGutter`      | `number`              | `8`     | Y axis gutter in which the tooltip will not pass.    |
-| `cursorGutter` | `number`              | `48`    | Gutter (spacing) between the cursor and the tooltip. |
-| `position`     | `"top"` or `"bottom"` | `"top"` | Position of the tooltip relative to the cursor.      |
-| `textStyle`    | `{}`                  |         | Style of the tooltip text                            |
+| Prop           | Type                  | Default | Description                                                                                                                    |
+| -------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `xGutter`      | `number`              | `8`     | X axis gutter in which the tooltip will not pass.                                                                              |
+| `yGutter`      | `number`              | `8`     | Y axis gutter in which the tooltip will not pass.                                                                              |
+| `cursorGutter` | `number`              | `48`    | Gutter (spacing) between the cursor and the tooltip.                                                                           |
+| `position`     | `"top"` or `"bottom"` | `"top"` | Position of the tooltip relative to the cursor.                                                                                |
+| `textStyle`    | `{}`                  |         | Style of the tooltip text                                                                                                      |
 | `at`           | `number`              |         | Make the tooltip static at the given `data` index (which shows the tooltip always, unless there is interaction with the chart) |
 
 ### LineChart.PriceText
@@ -1065,7 +1066,7 @@ const { value, formatted } = LineChart.usePrice({
 **Arguments**
 
 | Variable    | Type                               | Default | Description                          |
-| ----------- |------------------------------------|---------|--------------------------------------|
+| ----------- | ---------------------------------- | ------- | ------------------------------------ |
 | `format`    | `({ value, formatted }) => string` |         | Custom format function of the price. |
 | `precision` | `number`                           | `2`     | Precision of the price value.        |
 | `index`     | `number`                           |         | Get the price for a specific index   |

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

package/example/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/example/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/example/README.md

@@ -0,0 +1,32 @@
+# react-native-wagmi-charts Example Project 🧑‍🏫
+
+## Getting Started
+
+First install project dependencies in this directory:
+
+`npm install`
+
+After dependencies are installed, you can go ahead and run the project on either a simulator, or a real device using the following commands
+
+For iOS:
+
+`npm run ios`
+
+For Android:
+
+`npm run android`
+
+For Web:
+
+`npm run web`
+
+
+## Example Charts
+
+The following charts are included:
+
+- Candlestick Chart
+- Line Chart
+
+### Sample Data
+The charts in this example use hardcoded data, which is stored in the `src/data` directory

package/example/app.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-native-wagmi-charts-example",
+  "displayName": "CandlestickChart Example",
+  "expo": {
+    "name": "react-native-wagmi-charts-example",
+    "slug": "react-native-wagmi-charts-example",
+    "description": "Example app for react-native-wagmi-charts",
+    "privacy": "public",
+    "version": "1.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ]
+  }
+}

package/example/babel.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+const pkg = require('../package.json');
+
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            [pkg.name]: path.join(__dirname, '..', pkg.source),
+          },
+        },
+      ],
+      'react-native-reanimated/plugin',
+    ],
+  };
+};

package/example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './src/App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in the Expo client or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/example/metro.config.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/exclusionList');
+const escape = require('escape-string-regexp');
+const pak = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: blacklist(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};

package/example/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-native-wagmi-charts-example",
+  "description": "Example app for react-native-wagmi-charts",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index",
+  "scripts": {
+    "android": "npx expo start --android",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web",
+    "start": "npx expo start",
+    "test": "jest",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "@types/react": "~18.2.14",
+    "bumbag": "^2.2.1",
+    "bumbag-native": "^2.3.0",
+    "expo": "^49.0.0",
+    "expo-haptics": "~12.4.0",
+    "expo-splash-screen": "~0.20.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-svg": "13.9.0",
+    "react-native-web": "~0.19.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@expo/webpack-config": "^18.0.1",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-expo": "^9.5.0",
+    "jsonfile": "^6.1.0",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
+    "typescript": "^5.1.3"
+  }
+}

package/example/src/App.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import 'react-native-gesture-handler';
+import {
+  Box,
+  Button,
+  Text,
+  Heading,
+  Level,
+  Provider as BumbagNativeProvider,
+} from 'bumbag-native';
+
+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 (
+    <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"
+                key="back-button"
+                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.Scroll>
+        </Box.Safe>
+      </BumbagNativeProvider>
+    </GestureHandlerRootView>
+  );
+}

package/example/src/CandlestickChart.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { Box, Button, Flex, Heading, Text, Stack } from 'bumbag-native';
+import { CandlestickChart, TCandle } from 'react-native-wagmi-charts';
+import * as haptics from 'expo-haptics';
+
+import mockData from './data/candlestick-data.json';
+import mockData2 from './data/candlestick-data2.json';
+
+function invokeHaptic() {
+  if (['ios', 'android'].includes(Platform.OS)) {
+    haptics.impactAsync(haptics.ImpactFeedbackStyle.Light);
+  }
+}
+
+export default function App() {
+  const [data, setData] = React.useState<TCandle[]>(mockData);
+
+  return (
+    <>
+      <Heading.H5 paddingX="major-2" marginBottom="major-2">
+        Candlestick Chart 🕯
+      </Heading.H5>
+      <CandlestickChart.Provider data={data}>
+        <CandlestickChart>
+          <CandlestickChart.Candles />
+          <CandlestickChart.Crosshair onCurrentXChange={invokeHaptic}>
+            <CandlestickChart.Tooltip />
+          </CandlestickChart.Crosshair>
+        </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>
+        </Box>
+        <Stack padding="major-2" spacing="major-1">
+          <Heading.H6>PriceText</Heading.H6>
+          <Box>
+            <Text fontWeight="500">Formatted: </Text>
+            <Flex>
+              <Box flex="1">
+                <Text fontSize="100">Current</Text>
+                <CandlestickChart.PriceText />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Open</Text>
+                <CandlestickChart.PriceText type="open" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">High</Text>
+                <CandlestickChart.PriceText type="high" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Low</Text>
+                <CandlestickChart.PriceText type="low" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Close</Text>
+                <CandlestickChart.PriceText type="close" />
+              </Box>
+            </Flex>
+          </Box>
+          <Box>
+            <Text fontWeight="500">Value: </Text>
+            <Flex>
+              <Box flex="1">
+                <Text fontSize="100">Current</Text>
+                <CandlestickChart.PriceText variant="value" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Open</Text>
+                <CandlestickChart.PriceText type="open" variant="value" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">High</Text>
+                <CandlestickChart.PriceText type="high" variant="value" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Low</Text>
+                <CandlestickChart.PriceText type="low" variant="value" />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Close</Text>
+                <CandlestickChart.PriceText type="close" variant="value" />
+              </Box>
+            </Flex>
+          </Box>
+          <Box>
+            <Text fontWeight="500">Custom format: </Text>
+            <Flex>
+              <Box flex="1">
+                <Text fontSize="100">Current</Text>
+                <CandlestickChart.PriceText
+                  format={(d) => {
+                    'worklet';
+                    return `$${d.formatted} AUD`;
+                  }}
+                />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Open</Text>
+                <CandlestickChart.PriceText
+                  type="open"
+                  format={(d) => {
+                    'worklet';
+                    return `$${d.formatted} AUD`;
+                  }}
+                />
+              </Box>
+              <Box flex="1">
+                <Text fontSize="100">Close</Text>
+                <CandlestickChart.PriceText
+                  type="close"
+                  format={(d) => {
+                    'worklet';
+                    return `$${d.formatted} AUD`;
+                  }}
+                />
+              </Box>
+            </Flex>
+          </Box>
+        </Stack>
+        <Stack padding="major-2" spacing="minor-1">
+          <Heading.H6>DatetimeText</Heading.H6>
+          <Flex>
+            <Text fontWeight="500">Formatted: </Text>
+            <CandlestickChart.DatetimeText />
+          </Flex>
+          <Flex>
+            <Text fontWeight="500">Float: </Text>
+            <CandlestickChart.DatetimeText variant="value" />
+          </Flex>
+          <Flex>
+            <Text fontWeight="500">Custom format: </Text>
+            <CandlestickChart.DatetimeText
+              locale="en-AU"
+              options={{
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric',
+              }}
+            />
+          </Flex>
+        </Stack>
+      </CandlestickChart.Provider>
+    </>
+  );
+}