react-native-wagmi-charts 2.4.1 → 2.5.2

package/example/package.json

@@ -1,42 +0,0 @@
-{
-  "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

@@ -1,64 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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>
-    </>
-  );
-}

package/example/src/LineChart.tsx

@@ -1,268 +0,0 @@
-import * as React from 'react';
-import * as haptics from 'expo-haptics';
-
-import { Box, Button, Flex, Heading, Stack, Text } from 'bumbag-native';
-import {
-  LineChart,
-  TLineChartDataProp,
-  TLineChartPoint,
-} from 'react-native-wagmi-charts';
-
-import { Platform } from 'react-native';
-import mockData from './data/line-data.json';
-import mockData2 from './data/line-data2.json';
-import mockDataNonLinear from './data/line-data-non-linear-domain.json';
-import { useMemo } from 'react';
-
-function invokeHaptic() {
-  if (['ios', 'android'].includes(Platform.OS)) {
-    haptics.impactAsync(haptics.ImpactFeedbackStyle.Light);
-  }
-}
-
-export default function App() {
-  const [data, setData] = React.useState<TLineChartPoint[]>(mockData);
-  const [multiData, toggleMultiData] = React.useReducer(
-    (state) => !state,
-    false
-  );
-  const [partialDay, togglePartialDay] = React.useReducer(
-    (state) => !state,
-    false
-  );
-
-  const [scaleRelativeToTime, setScaleRelativeToTime] = React.useState(false);
-
-  const [yRange, setYRange] = React.useState<undefined | 'low' | 'high'>(
-    undefined
-  );
-
-  const toggleYRange = () => {
-    setYRange((domain) => {
-      if (!domain) {
-        return 'low';
-      }
-      if (domain === 'low') {
-        return 'high';
-      }
-      return undefined;
-    });
-  };
-
-  const [toggleMinMaxLabels, setToggleMinMaxLabels] = React.useState(false);
-  const [toggleSnapToPoint, setToggleSnapToPoint] = React.useState(false);
-  const [toggleHighlight, setToggleHighlight] = React.useState(false);
-
-  let dataProp: TLineChartDataProp = data;
-  const [min, max] = useMemo(() => {
-    if (Array.isArray(dataProp)) {
-      const values = dataProp.map((d) => d.value);
-      const _min = Math.min(...values);
-      const _max = Math.max(...values);
-      return [
-        values.findIndex((v) => v === _min),
-        values.findIndex((v) => v === _max),
-      ];
-    }
-    return [0, 0];
-  }, [dataProp]);
-
-  let chart = (
-    <LineChart>
-      <LineChart.Path color="black">
-        {toggleMinMaxLabels && (
-          <>
-            <LineChart.Gradient color="black" />
-            <LineChart.Tooltip position="top" at={max} />
-            <LineChart.Tooltip position="bottom" at={min} yGutter={-10} />
-          </>
-        )}
-        {toggleHighlight && (
-          <LineChart.Highlight
-            color="red"
-            from={Math.floor(data.length / 3)}
-            to={Math.floor(data.length * (2/3))}
-          />
-        )}
-      </LineChart.Path>
-      <LineChart.CursorCrosshair
-        snapToPoint={toggleSnapToPoint}
-        onActivated={invokeHaptic}
-        onEnded={invokeHaptic}
-      >
-        <LineChart.Tooltip position="top" />
-        <LineChart.HoverTrap />
-      </LineChart.CursorCrosshair>
-    </LineChart>
-  );
-
-  if (multiData) {
-    dataProp = {
-      one: mockData,
-      two: mockData2,
-    };
-    chart = (
-      <LineChart.Group>
-        <LineChart id="one">
-          <LineChart.Path animateOnMount="foreground" color="blue" />
-          <LineChart.CursorCrosshair
-            snapToPoint={toggleSnapToPoint}
-            onActivated={invokeHaptic}
-            onEnded={invokeHaptic}
-          >
-            <LineChart.Tooltip />
-          </LineChart.CursorCrosshair>
-        </LineChart>
-        <LineChart id="two">
-          <LineChart.Path color="red">
-            <LineChart.Gradient color="black" />
-            <LineChart.HorizontalLine at={{ index: 4 }} />
-          </LineChart.Path>
-          <LineChart.CursorCrosshair
-            snapToPoint={toggleSnapToPoint}
-            color="hotpink"
-            onActivated={invokeHaptic}
-            onEnded={invokeHaptic}
-          >
-            <LineChart.Tooltip />
-          </LineChart.CursorCrosshair>
-        </LineChart>
-      </LineChart.Group>
-    );
-  }
-
-  return (
-    <>
-      <Heading.H5 paddingX="major-2" marginBottom="major-2">
-        Line Chart 📈
-      </Heading.H5>
-      <LineChart.Provider
-        xDomain={
-          scaleRelativeToTime
-            ? [data[0].timestamp, data[data.length - 1].timestamp]
-            : undefined
-        }
-        xLength={partialDay ? data.length * 2 : undefined}
-        yRange={{
-          min:
-            yRange === 'low'
-              ? Math.min(...data.map((d) => d.value)) / 1.1
-              : undefined,
-          max:
-            yRange === 'high'
-              ? Math.max(...data.map((d) => d.value)) * 1.1
-              : undefined,
-        }}
-        data={dataProp}
-      >
-        {chart}
-        <Box marginX="major-2" marginTop="major-2">
-          <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>
-            <Button onPress={() => setData([...mockData, ...mockData2])}>
-              Data 1 + Data 2
-            </Button>
-            <Button onPress={() => setData([...mockData2, ...mockData])}>
-              Data 2 + Data 1
-            </Button>
-            <Button
-              onPress={() => setData([...mockData2, ...mockData, ...mockData2])}
-            >
-              Data 2 + Data 1 + Data 2
-            </Button>
-            <Button
-              onPress={() =>
-                setData([
-                  ...mockData2,
-                  ...mockData,
-                  ...mockData2,
-                  ...mockData,
-                  ...mockData,
-                  ...mockData2,
-                  ...mockData2,
-                  ...mockData,
-                  ...mockData2,
-                  ...mockData,
-                  ...mockData,
-                  ...mockData2,
-                ])
-              }
-            >
-              V large data
-            </Button>
-            <Button onPress={toggleYRange}>
-              {`${yRange || 'Set'} Y Domain`}
-            </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={() => {
-                // Use with data 3 for best demonstration
-                setScaleRelativeToTime((val) => !val);
-              }}
-            >
-              {`Toggle ${scaleRelativeToTime ? 'off' : 'on'} XDomain`}
-            </Button>
-            <Button
-              onPress={() => setToggleSnapToPoint((val) => !val)}
-            >{`Toggle Snap ${toggleSnapToPoint ? 'Off' : 'On'}`}</Button>
-          </Flex>
-        </Box>
-        {!multiData && (
-          <Stack padding="major-2" spacing="major-1">
-            <Heading.H6>PriceText</Heading.H6>
-            <Flex>
-              <Text fontWeight="500">Formatted: </Text>
-              <LineChart.PriceText />
-            </Flex>
-            <Flex>
-              <Text fontWeight="500">Value: </Text>
-              <LineChart.PriceText variant="value" />
-            </Flex>
-            <Flex>
-              <Text fontWeight="500">Custom format: </Text>
-              <LineChart.PriceText
-                format={(d) => {
-                  'worklet';
-                  return d.formatted ? `$${d.formatted} AUD` : '';
-                }}
-              />
-            </Flex>
-            <Heading.H6>DatetimeText</Heading.H6>
-            <Flex>
-              <Text fontWeight="500">Formatted: </Text>
-              <LineChart.DatetimeText />
-            </Flex>
-            <Flex>
-              <Text fontWeight="500">Value: </Text>
-              <LineChart.DatetimeText variant="value" />
-            </Flex>
-            <Flex>
-              <Text fontWeight="500">Custom format: </Text>
-              <LineChart.DatetimeText
-                locale="en-AU"
-                options={{
-                  year: 'numeric',
-                  month: 'numeric',
-                  day: 'numeric',
-                  hour: 'numeric',
-                  minute: 'numeric',
-                  second: 'numeric',
-                }}
-              />
-            </Flex>
-          </Stack>
-        )}
-      </LineChart.Provider>
-    </>
-  );
-}

package/example/src/data/candlestick-data.json

@@ -1,142 +0,0 @@
-[
-  {
-    "timestamp": 1625945400000,
-    "open": 33575.25,
-    "high": 33600.52,
-    "low": 33475.12,
-    "close": 33520.11
-  },
-  {
-    "timestamp": 1625946300000,
-    "open": 33545.25,
-    "high": 33560.52,
-    "low": 33510.12,
-    "close": 33520.11
-  },
-  {
-    "timestamp": 1625947200000,
-    "open": 33510.25,
-    "high": 33515.52,
-    "low": 33250.12,
-    "close": 33250.11
-  },
-  {
-    "timestamp": 1625948100000,
-    "open": 33215.25,
-    "high": 33430.52,
-    "low": 33215.12,
-    "close": 33420.11
-  },
-  {
-    "timestamp": 1625949000000,
-    "open": 33445.25,
-    "high": 33520.52,
-    "low": 33415.12,
-    "close": 33440.11
-  },
-  {
-    "timestamp": 1625949900000,
-    "open": 33435.25,
-    "high": 33465.52,
-    "low": 33435.12,
-    "close": 33455.11
-  },
-  {
-    "timestamp": 1625950800000,
-    "open": 33480.25,
-    "high": 33480.52,
-    "low": 33430.12,
-    "close": 33445.11
-  },
-  {
-    "timestamp": 1625951700000,
-    "open": 33440.25,
-    "high": 33545.52,
-    "low": 33440.12,
-    "close": 33510.11
-  },
-  {
-    "timestamp": 1625952600000,
-    "open": 33485.25,
-    "high": 33520.52,
-    "low": 33460.12,
-    "close": 33515.11
-  },
-  {
-    "timestamp": 1625953500000,
-    "open": 33515.25,
-    "high": 33550.52,
-    "low": 33515.12,
-    "close": 33540.11
-  },
-  {
-    "timestamp": 1625954400000,
-    "open": 33570.25,
-    "high": 33645.52,
-    "low": 33545.12,
-    "close": 33645.11
-  },
-  {
-    "timestamp": 1625955300000,
-    "open": 33640.25,
-    "high": 33665.52,
-    "low": 33600.12,
-    "close": 33630.11
-  },
-  {
-    "timestamp": 1625956200000,
-    "open": 33645.25,
-    "high": 33670.52,
-    "low": 33645.12,
-    "close": 33660.11
-  },
-  {
-    "timestamp": 1625957100000,
-    "open": 33670.25,
-    "high": 33785.52,
-    "low": 33660.12,
-    "close": 33745.11
-  },
-  {
-    "timestamp": 1625958000000,
-    "open": 33740.25,
-    "high": 33780.52,
-    "low": 33710.12,
-    "close": 33780.11
-  },
-  {
-    "timestamp": 1625958900000,
-    "open": 33770.25,
-    "high": 33770.52,
-    "low": 33710.12,
-    "close": 33710.11
-  },
-  {
-    "timestamp": 1625959800000,
-    "open": 33705.25,
-    "high": 33760.52,
-    "low": 33705.12,
-    "close": 33750.11
-  },
-  {
-    "timestamp": 1625960700000,
-    "open": 33760.25,
-    "high": 33785.52,
-    "low": 33645.12,
-    "close": 33650.11
-  },
-  {
-    "timestamp": 1625961600000,
-    "open": 33670.25,
-    "high": 33835.52,
-    "low": 33635.12,
-    "close": 33825.11
-  },
-  {
-    "timestamp": 1625962500000,
-    "open": 33870.25,
-    "high": 33930.52,
-    "low": 33715.12,
-    "close": 33770.11
-  }
-]