react-native-wagmi-charts 2.1.0 → 2.3.0

package/example/.expo/web/cache/development/babel-loader/fef7a9f8cae2e08dcc89bd0403704cb9.json

@@ -1 +0,0 @@
-{"ast":null,"code":"import { useEffect } from \"react\";\nimport { useSharedValue, useDerivedValue, withTiming, withSpring } from \"react-native-reanimated\";\nimport { bin } from \"./Math\";\nexport var useSpring = function useSpring(state, config) {\n  var value = useSharedValue(0);\n  useEffect(function () {\n    value.value = typeof state === \"boolean\" ? bin(state) : state;\n  }, [state, value]);\n  var transition = useDerivedValue(function () {\n    const _f = function () {\n      return withSpring(value.value, config);\n    };\n\n    _f._closure = {\n      withSpring,\n      value,\n      config\n    };\n    _f.asString = \"function _f(){const{withSpring,value,config}=jsThis._closure;{return withSpring(value.value,config);}}\";\n    _f.__workletHash = 16039037436798;\n    _f.__location = \"/Users/jake/git/react-native-candlestick-chart/node_modules/react-native-redash/lib/module/Transitions.js (1:348)\";\n\n    global.__reanimatedWorkletInit(_f);\n\n    return _f;\n  }());\n  return transition;\n};\nexport var useTiming = function useTiming(state, config) {\n  var value = useSharedValue(0);\n  useEffect(function () {\n    value.value = typeof state === \"boolean\" ? bin(state) : state;\n  }, [state, value]);\n  var transition = useDerivedValue(function () {\n    const _f = function () {\n      return withTiming(value.value, config);\n    };\n\n    _f._closure = {\n      withTiming,\n      value,\n      config\n    };\n    _f.asString = \"function _f(){const{withTiming,value,config}=jsThis._closure;{return withTiming(value.value,config);}}\";\n    _f.__workletHash = 2589344352542;\n    _f.__location = \"/Users/jake/git/react-native-candlestick-chart/node_modules/react-native-redash/lib/module/Transitions.js (1:625)\";\n\n    global.__reanimatedWorkletInit(_f);\n\n    return _f;\n  }());\n  return transition;\n};","map":{"version":3,"sources":["Transitions.ts"],"names":["useSpring","value","useSharedValue","useEffect","bin","transition","useDerivedValue","withSpring","useTiming","withTiming"],"mappings":"AAAA,SAAA,SAAA,QAAA,OAAA;AACA,SAAA,cAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,QAAA,yBAAA;AAOA,SAAA,GAAA;AAEA,OAAO,IAAMA,SAAS,GAATA,SAAAA,SAAAA,CAAY,KAAZA,EAAY,MAAZA,EAGR;AACH,MAAMC,KAAK,GAAGC,cAAc,CAA5B,CAA4B,CAA5B;AACAC,EAAAA,SAAS,CAAC,YAAM;AACdF,IAAAA,KAAK,CAALA,KAAAA,GAAc,OAAA,KAAA,KAAA,SAAA,GAA6BG,GAAG,CAAhC,KAAgC,CAAhC,GAAdH,KAAAA;AADO,GAAA,EAEN,CAAA,KAAA,EAFHE,KAEG,CAFM,CAATA;AAGA,MAAME,UAAU,GAAGC,eAAe;AAAA,2BAAO;AACvC,aAAOC,UAAU,CAACN,KAAK,CAAN,KAAA,EAAjB,MAAiB,CAAjB;AADF,KAAkC;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA,MAAlC;AAGA,SAAA,UAAA;AAXK,CAAA;AAcP,OAAO,IAAMO,SAAS,GAATA,SAAAA,SAAAA,CAAY,KAAZA,EAAY,MAAZA,EAGR;AACH,MAAMP,KAAK,GAAGC,cAAc,CAA5B,CAA4B,CAA5B;AACAC,EAAAA,SAAS,CAAC,YAAM;AACdF,IAAAA,KAAK,CAALA,KAAAA,GAAc,OAAA,KAAA,KAAA,SAAA,GAA6BG,GAAG,CAAhC,KAAgC,CAAhC,GAAdH,KAAAA;AADO,GAAA,EAEN,CAAA,KAAA,EAFHE,KAEG,CAFM,CAATA;AAGA,MAAME,UAAU,GAAGC,eAAe;AAAA,2BAAO;AACvC,aAAOG,UAAU,CAACR,KAAK,CAAN,KAAA,EAAjB,MAAiB,CAAjB;AADF,KAAkC;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA,MAAlC;AAGA,SAAA,UAAA;AAXK,CAAA","sourcesContent":["import { useEffect } from \"react\";\nimport Animated, {\n  useSharedValue,\n  useDerivedValue,\n  withTiming,\n  withSpring,\n} from \"react-native-reanimated\";\n\nimport { bin } from \"./Math\";\n\nexport const useSpring = (\n  state: boolean | number,\n  config?: Animated.WithSpringConfig\n) => {\n  const value = useSharedValue(0);\n  useEffect(() => {\n    value.value = typeof state === \"boolean\" ? bin(state) : state;\n  }, [state, value]);\n  const transition = useDerivedValue(() => {\n    return withSpring(value.value, config);\n  });\n  return transition;\n};\n\nexport const useTiming = (\n  state: boolean | number,\n  config?: Animated.WithTimingConfig\n) => {\n  const value = useSharedValue(0);\n  useEffect(() => {\n    value.value = typeof state === \"boolean\" ? bin(state) : state;\n  }, [state, value]);\n  const transition = useDerivedValue(() => {\n    return withTiming(value.value, config);\n  });\n  return transition;\n};\n"]},"metadata":{},"sourceType":"module"}

package/example/.expo/web/cache/development/babel-loader/ff9a6e20e331b715609602c9bca399e9.json

@@ -1 +0,0 @@
-{"ast":null,"code":"import _classCallCheck from \"@babel/runtime/helpers/classCallCheck\";\nimport _inherits from \"@babel/runtime/helpers/inherits\";\nimport _possibleConstructorReturn from \"@babel/runtime/helpers/possibleConstructorReturn\";\nimport _getPrototypeOf from \"@babel/runtime/helpers/getPrototypeOf\";\nimport _wrapNativeSuper from \"@babel/runtime/helpers/wrapNativeSuper\";\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nexport var CodedError = function (_Error) {\n  _inherits(CodedError, _Error);\n\n  var _super = _createSuper(CodedError);\n\n  function CodedError(code, message) {\n    var _this;\n\n    _classCallCheck(this, CodedError);\n\n    _this = _super.call(this, message);\n    _this.code = code;\n    return _this;\n  }\n\n  return CodedError;\n}(_wrapNativeSuper(Error));","map":{"version":3,"sources":["../../src/errors/CodedError.ts"],"names":[],"mappings":";;;;;;;;;;AAKA,WAAa,UAAb;AAAA;;AAAA;;AAIE,sBAAY,IAAZ,EAA0B,OAA1B,EAAyC;AAAA;;AAAA;;AACvC,8BAAM,OAAN;AACA,UAAK,IAAL,GAAY,IAAZ;AAFuC;AAGxC;;AAPH;AAAA,mBAAgC,KAAhC","sourcesContent":["/**\n * A general error class that should be used for all errors in Expo modules.\n * Guarantees a `code` field that can be used to differentiate between different\n * types of errors without further subclassing Error.\n */\nexport class CodedError extends Error {\n  code: string;\n  info?: any;\n\n  constructor(code: string, message: string) {\n    super(message);\n    this.code = code;\n  }\n}\n"],"sourceRoot":""},"metadata":{},"sourceType":"module"}

package/example/README.md

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

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

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

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

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

@@ -1,37 +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": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "start": "expo start",
-    "test": "jest",
-    "postinstall": "patch-package"
-  },
-  "dependencies": {
-    "bumbag": "^2.2.1",
-    "bumbag-native": "^2.3.0",
-    "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.12.9",
-    "@babel/runtime": "^7.14.6",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "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

@@ -1,60 +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" 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,217 +0,0 @@
-import * as React from 'react';
-import { Box, Button, Flex, Heading, Stack, Text } from 'bumbag-native';
-import {
-  LineChart,
-  TLineChartDataProp,
-  TLineChartPoint,
-} from 'react-native-wagmi-charts';
-import * as haptics from 'expo-haptics';
-import { Platform } from 'react-native';
-
-import mockData from './data/line-data.json';
-import mockData2 from './data/line-data2.json';
-
-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 [yRange, setYRange] = React.useState<undefined | 'low' | 'high'>(
-    undefined
-  );
-
-  const toggleYRange = () => {
-    setYRange((domain) => {
-      if (!domain) {
-        return 'low';
-      }
-      if (domain === 'low') {
-        return 'high';
-      }
-      return undefined;
-    });
-  };
-
-  let dataProp: TLineChartDataProp = data;
-
-  let chart = (
-    <LineChart>
-      <LineChart.Path color="black" />
-      {/* <LineChart.Path color="black">
-        <LineChart.Gradient color="black" />
-        <LineChart.HorizontalLine at={{ index: 0 }} />
-        <LineChart.Highlight color="red" from={10} to={15} />
-        <LineChart.Dot color="red" at={10} />
-        <LineChart.Dot color="red" at={15} />
-        {partialDay && (
-          <LineChart.Dot at={data.length - 1} color="red" hasPulse />
-        )}
-      </LineChart.Path>
-        */}
-      <LineChart.CursorCrosshair
-        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
-            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
-            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
-        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([...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>
-          </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>
-    </>
-  );
-}