react-native-wagmi-charts 2.0.1 → 2.2.0

package/README.md

@@ -35,6 +35,7 @@ A sweet & simple chart library for React Native that will make us feel like **W*
   - [Interactive cursors](#interactive-cursors)
   - [Interactive labels](#interactive-labels)
   - [Interactive tooltips](#interactive-tooltips)
+  - [Tooltips / labels](#tooltips--labels)
   - [Haptic feedback](#haptic-feedback)
   - [Colors](#colors)
   - [Gradients](#gradients)
@@ -63,6 +64,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)
@@ -281,6 +283,23 @@ You can even add another tooltip to show something like date/time:
 
 <img src="https://user-images.githubusercontent.com/7336481/133036011-8a9b4865-10dd-4e88-9fd1-1e109435a73c.gif" width="200px" />
 
+### Tooltips / Labels
+
+You can also use the `Tooltip` component to render a "static" tooltip at a given index, by specifying the `at` prop (similar to [Dots](#dots)).
+Note that the tooltip will disappear when there is interaction with a cursor on the chart.
+
+```jsx
+<LineChart.Provider data={data}>
+  <LineChart>
+    <LineChart.Path>
+      <LineChart.Tooltip at={3} />
+    </LineChart.Path>
+  </LineChart>
+</LineChart.Provider>
+```
+
+<img src="https://user-images.githubusercontent.com/16821682/157064279-c0923a60-edf8-4942-a029-0145dd225d3f.gif" width="200px" />
+
 ### Haptic feedback
 
 By making use of the chart event handlers, you are able to integrate haptic feedback into your charts.
@@ -374,6 +393,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.
@@ -383,7 +421,7 @@ By using the `LineChart.Gradient` component, you can apply a gradient to the are
   <LineChart>
     <LineChart.Path color="red">
       <LineChart.Gradient />
-    <LineChart.Path>
+    </LineChart.Path>
   </LineChart>
 </LineChart.Provider>
 ```
@@ -397,7 +435,7 @@ The gradient will inherit your path's color by default, however, you can provide
   <LineChart>
     <LineChart.Path color="red">
       <LineChart.Gradient color="black" />
-    <LineChart.Path>
+    </LineChart.Path>
   </LineChart>
 </LineChart.Provider>
 ```
@@ -562,7 +600,7 @@ You can customize the style of the tooltip by providing the `textStyle` prop:
 
 ```jsx
 <LineChart.Tooltip
-  style={{
+  textStyle={{
     backgroundColor: 'black',
     borderRadius: 4,
     color: 'white',
@@ -844,7 +882,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                                                                                                |
@@ -868,6 +905,8 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | `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
 
@@ -888,6 +927,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                                                             |
@@ -1015,9 +1064,10 @@ 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   |
 
 **Returns**
 

package/lib/commonjs/charts/candle/HoverTrap/index.web.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineChartHoverTrap = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeRedash = require("react-native-redash");
+
+var _Chart = require("../../line/Chart");
+
+var _useLineChart = require("../../line/useLineChart");
+
+var _ExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// @ts-expect-error missing types
+let isEnabled = false; // the following logic comes from the creator of react-native-web
+// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+// it's also used by MotiPressable's hover interactions
+// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+
+if (_ExecutionEnvironment.canUseDOM) {
+  /**
+   * Web browsers emulate mouse events (and hover states) after touch events.
+   * This code infers when the currently-in-use modality supports hover
+   * (including for multi-modality devices) and considers "hover" to be enabled
+   * if a mouse movement occurs more than 1 second after the last touch event.
+   * This threshold is long enough to account for longer delays between the
+   * browser firing touch and mouse events on low-powered devices.
+   */
+  const HOVER_THRESHOLD_MS = 1000;
+  let lastTouchTimestamp = 0;
+
+  function enableHover() {
+    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
+      return;
+    }
+
+    isEnabled = true;
+  }
+
+  function disableHover() {
+    lastTouchTimestamp = Date.now();
+
+    if (isEnabled) {
+      isEnabled = false;
+    }
+  }
+
+  document.addEventListener('touchstart', disableHover, true);
+  document.addEventListener('touchmove', disableHover, true);
+  document.addEventListener('mousemove', enableHover, true);
+}
+
+function isHoverEnabled() {
+  return isEnabled;
+}
+
+const LineChartHoverTrap = () => {
+  const {
+    width,
+    path
+  } = React.useContext(_Chart.LineChartDimensionsContext);
+  const {
+    currentX,
+    currentIndex,
+    isActive,
+    data
+  } = (0, _useLineChart.useLineChart)();
+  const parsedPath = React.useMemo(() => path ? (0, _reactNativeRedash.parse)(path) : undefined, [path]);
+  const onMouseMove = React.useCallback(({
+    x
+  }) => {
+    if (isHoverEnabled()) {
+      if (parsedPath) {
+        const boundedX = Math.min(x, width);
+        isActive.value = true;
+        currentX.value = boundedX; // on Web, we could drag the cursor to be negative, breaking it
+        // so we clamp the index at 0 to fix it
+        // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+
+        const minIndex = 0;
+        const boundedIndex = Math.max(minIndex, Math.round(boundedX / width / (1 / (data.length - 1))));
+        currentIndex.value = boundedIndex;
+      }
+    } else {
+      isActive.value = false;
+      currentIndex.value = -1;
+    }
+  }, [currentIndex, currentX, data.length, isActive, parsedPath, width]);
+  const onMouseLeave = React.useCallback(() => {
+    isActive.value = false;
+    currentIndex.value = -1;
+  }, [currentIndex, isActive]);
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: _reactNative.StyleSheet.absoluteFill // @ts-expect-error mouse move event
+    ,
+    onMouseMove: React.useCallback( // eslint-disable-next-line no-undef
+    e => {
+      let rect = e.currentTarget.getBoundingClientRect();
+      let x = e.clientX - rect.left; // x position within the element.
+
+      onMouseMove({
+        x
+      });
+    }, [onMouseMove]),
+    onMouseLeave: onMouseLeave
+  });
+};
+
+exports.LineChartHoverTrap = LineChartHoverTrap;
+//# sourceMappingURL=index.web.js.map

package/lib/commonjs/charts/candle/HoverTrap/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.web.tsx"],"names":["isEnabled","canUseDOM","HOVER_THRESHOLD_MS","lastTouchTimestamp","enableHover","Date","now","disableHover","document","addEventListener","isHoverEnabled","LineChartHoverTrap","width","path","React","useContext","LineChartDimensionsContext","currentX","currentIndex","isActive","data","parsedPath","useMemo","undefined","onMouseMove","useCallback","x","boundedX","Math","min","value","minIndex","boundedIndex","max","round","length","onMouseLeave","StyleSheet","absoluteFill","e","rect","currentTarget","getBoundingClientRect","clientX","left"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from '../../line/Chart';\nimport { useLineChart } from '../../line/useLineChart';\n\n// @ts-expect-error missing types\nimport { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';\n\nlet isEnabled = false;\n\n// the following logic comes from the creator of react-native-web\n// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a\n// it's also used by MotiPressable's hover interactions\n// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx\nif (canUseDOM) {\n  /**\n   * Web browsers emulate mouse events (and hover states) after touch events.\n   * This code infers when the currently-in-use modality supports hover\n   * (including for multi-modality devices) and considers \"hover\" to be enabled\n   * if a mouse movement occurs more than 1 second after the last touch event.\n   * This threshold is long enough to account for longer delays between the\n   * browser firing touch and mouse events on low-powered devices.\n   */\n  const HOVER_THRESHOLD_MS = 1000;\n  let lastTouchTimestamp = 0;\n\n  function enableHover() {\n    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {\n      return;\n    }\n    isEnabled = true;\n  }\n\n  function disableHover() {\n    lastTouchTimestamp = Date.now();\n    if (isEnabled) {\n      isEnabled = false;\n    }\n  }\n\n  document.addEventListener('touchstart', disableHover, true);\n  document.addEventListener('touchmove', disableHover, true);\n  document.addEventListener('mousemove', enableHover, true);\n}\n\nfunction isHoverEnabled(): boolean {\n  return isEnabled;\n}\n\nexport const LineChartHoverTrap = () => {\n  const { width, path } = React.useContext(LineChartDimensionsContext);\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n\n  const onMouseMove = React.useCallback(\n    ({ x }: { x: number }) => {\n      if (isHoverEnabled()) {\n        if (parsedPath) {\n          const boundedX = Math.min(x, width);\n          isActive.value = true;\n          currentX.value = boundedX;\n\n          // on Web, we could drag the cursor to be negative, breaking it\n          // so we clamp the index at 0 to fix it\n          // https://github.com/coinjar/react-native-wagmi-charts/issues/24\n          const minIndex = 0;\n          const boundedIndex = Math.max(\n            minIndex,\n            Math.round(boundedX / width / (1 / (data.length - 1)))\n          );\n\n          currentIndex.value = boundedIndex;\n        }\n      } else {\n        isActive.value = false;\n        currentIndex.value = -1;\n      }\n    },\n    [currentIndex, currentX, data.length, isActive, parsedPath, width]\n  );\n\n  const onMouseLeave = React.useCallback(() => {\n    isActive.value = false;\n    currentIndex.value = -1;\n  }, [currentIndex, isActive]);\n\n  return (\n    <View\n      style={StyleSheet.absoluteFill}\n      // @ts-expect-error mouse move event\n      onMouseMove={React.useCallback(\n        // eslint-disable-next-line no-undef\n        (e: React.MouseEvent<HTMLElement>) => {\n          let rect = e.currentTarget.getBoundingClientRect();\n          let x = e.clientX - rect.left; // x position within the element.\n\n          onMouseMove({ x });\n        },\n        [onMouseMove]\n      )}\n      onMouseLeave={onMouseLeave}\n    />\n  );\n};\n"]}

package/lib/commonjs/charts/line/Chart.js

@@ -18,6 +18,8 @@ var _Data = require("./Data");
 
 var _utils = require("./utils");
 
+var _reactNativeRedash = require("react-native-redash");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,6 +29,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const LineChartDimensionsContext = /*#__PURE__*/React.createContext({
   width: 0,
   height: 0,
+  pointWidth: 0,
+  parsedPath: {},
   path: '',
   area: '',
   shape: d3Shape.curveBumpX,
@@ -97,15 +101,20 @@ function LineChart({
 
     return '';
   }, [data, pathWidth, height, yGutter, shape, yDomain]);
+  const dataLength = data.length;
+  const parsedPath = React.useMemo(() => (0, _reactNativeRedash.parse)(path), [path]);
+  const pointWidth = React.useMemo(() => width / (dataLength - 1), [dataLength, width]);
   const contextValue = React.useMemo(() => ({
     gutter: yGutter,
+    parsedPath,
+    pointWidth,
     area,
     path,
     width,
     height,
     pathWidth,
     shape
-  }), [yGutter, area, path, width, height, pathWidth, shape]);
+  }), [yGutter, parsedPath, pointWidth, area, path, width, height, pathWidth, shape]);
   return /*#__PURE__*/React.createElement(_Data.LineChartIdProvider, {
     id: id
   }, /*#__PURE__*/React.createElement(LineChartDimensionsContext.Provider, {

package/lib/commonjs/charts/line/Chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chart.tsx"],"names":["LineChartDimensionsContext","React","createContext","width","height","path","area","shape","d3Shape","curveBumpX","gutter","pathWidth","screenWidth","Dimensions","get","LineChart","displayName","children","yGutter","id","absolute","props","yDomain","xLength","useContext","LineChartContext","data","useMemo","allowedWidth","length","contextValue","styles","style","StyleSheet","create","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\n// @ts-ignore\nimport * as d3Shape from 'd3-shape';\nimport { Dimensions, StyleSheet, View, ViewProps } from 'react-native';\nimport { LineChartContext } from './Context';\nimport { LineChartIdProvider, useLineChartData } from './Data';\n\nimport { getArea, getPath } from './utils';\n\nexport const LineChartDimensionsContext = React.createContext({\n  width: 0,\n  height: 0,\n  path: '',\n  area: '',\n  shape: d3Shape.curveBumpX,\n  gutter: 0,\n  pathWidth: 0,\n});\n\ntype LineChartProps = ViewProps & {\n  children: React.ReactNode;\n  yGutter?: number;\n  width?: number;\n  height?: number;\n  shape?: unknown;\n  /**\n   * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.\n   */\n  id?: string;\n  absolute?: boolean;\n};\n\nconst { width: screenWidth } = Dimensions.get('window');\n\nLineChart.displayName = 'LineChart';\n\nexport function LineChart({\n  children,\n  yGutter = 16,\n  width = screenWidth,\n  height = screenWidth,\n  shape = d3Shape.curveBumpX,\n  id,\n  absolute,\n  ...props\n}: LineChartProps) {\n  const { yDomain, xLength } = React.useContext(LineChartContext);\n  const { data } = useLineChartData({\n    id,\n  });\n\n  const pathWidth = React.useMemo(() => {\n    let allowedWidth = width;\n    if (xLength > data.length) {\n      allowedWidth = (width * data.length) / xLength;\n    }\n    return allowedWidth;\n  }, [data.length, width, xLength]);\n\n  const path = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getPath({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const area = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getArea({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      gutter: yGutter,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    }),\n    [yGutter, area, path, width, height, pathWidth, shape]\n  );\n\n  return (\n    <LineChartIdProvider id={id}>\n      <LineChartDimensionsContext.Provider value={contextValue}>\n        <View {...props} style={[absolute && styles.absolute, props.style]}>\n          {children}\n        </View>\n      </LineChartDimensionsContext.Provider>\n    </LineChartIdProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  absolute: {\n    position: 'absolute',\n  },\n});\n"]}
+{"version":3,"sources":["Chart.tsx"],"names":["LineChartDimensionsContext","React","createContext","width","height","pointWidth","parsedPath","path","area","shape","d3Shape","curveBumpX","gutter","pathWidth","screenWidth","Dimensions","get","LineChart","displayName","children","yGutter","id","absolute","props","yDomain","xLength","useContext","LineChartContext","data","useMemo","allowedWidth","length","dataLength","contextValue","styles","style","StyleSheet","create","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\n// @ts-ignore\nimport * as d3Shape from 'd3-shape';\nimport { Dimensions, StyleSheet, View, ViewProps } from 'react-native';\nimport { LineChartContext } from './Context';\nimport { LineChartIdProvider, useLineChartData } from './Data';\n\nimport { getArea, getPath } from './utils';\nimport { parse, Path } from 'react-native-redash';\n\nexport const LineChartDimensionsContext = React.createContext({\n  width: 0,\n  height: 0,\n  pointWidth: 0,\n  parsedPath: {} as Path,\n  path: '',\n  area: '',\n  shape: d3Shape.curveBumpX,\n  gutter: 0,\n  pathWidth: 0,\n});\n\ntype LineChartProps = ViewProps & {\n  children: React.ReactNode;\n  yGutter?: number;\n  width?: number;\n  height?: number;\n  shape?: unknown;\n  /**\n   * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.\n   */\n  id?: string;\n  absolute?: boolean;\n};\n\nconst { width: screenWidth } = Dimensions.get('window');\n\nLineChart.displayName = 'LineChart';\n\nexport function LineChart({\n  children,\n  yGutter = 16,\n  width = screenWidth,\n  height = screenWidth,\n  shape = d3Shape.curveBumpX,\n  id,\n  absolute,\n  ...props\n}: LineChartProps) {\n  const { yDomain, xLength } = React.useContext(LineChartContext);\n  const { data } = useLineChartData({\n    id,\n  });\n\n  const pathWidth = React.useMemo(() => {\n    let allowedWidth = width;\n    if (xLength > data.length) {\n      allowedWidth = (width * data.length) / xLength;\n    }\n    return allowedWidth;\n  }, [data.length, width, xLength]);\n\n  const path = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getPath({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const area = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getArea({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const dataLength = data.length;\n  const parsedPath = React.useMemo(() => parse(path), [path]);\n  const pointWidth = React.useMemo(\n    () => width / (dataLength - 1),\n    [dataLength, width]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      gutter: yGutter,\n      parsedPath,\n      pointWidth,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    }),\n    [\n      yGutter,\n      parsedPath,\n      pointWidth,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    ]\n  );\n\n  return (\n    <LineChartIdProvider id={id}>\n      <LineChartDimensionsContext.Provider value={contextValue}>\n        <View {...props} style={[absolute && styles.absolute, props.style]}>\n          {children}\n        </View>\n      </LineChartDimensionsContext.Provider>\n    </LineChartIdProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  absolute: {\n    position: 'absolute',\n  },\n});\n"]}

package/lib/commonjs/charts/line/ChartPath.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LineChartPathWrapper = LineChartPathWrapper;
-exports.LineChartPathContext = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -18,6 +17,8 @@ var _reactKeyedFlattenChildren = _interopRequireDefault(require("react-keyed-fla
 
 var _Chart = require("./Chart");
 
+var _LineChartPathContext = require("./LineChartPathContext");
+
 var _Path = require("./Path");
 
 var _useLineChart = require("./useLineChart");
@@ -30,17 +31,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot'];
+const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot', 'LineChartTooltip'];
 const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
 
 const AnimatedSVG = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Svg);
 
-const LineChartPathContext = /*#__PURE__*/React.createContext({
-  color: '',
-  isInactive: false,
-  isTransitionEnabled: true
-});
-exports.LineChartPathContext = LineChartPathContext;
 LineChartPathWrapper.displayName = 'LineChartPathWrapper';
 
 function LineChartPathWrapper({
@@ -77,12 +72,17 @@ function LineChartPathWrapper({
   const svgProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
     const shouldAnimateOnMount = animateOnMount === 'foreground';
     const inactiveWidth = !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
-    const duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
+    let duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
     const props = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationProps : animationProps;
+
+    if (isActive.value) {
+      duration = 0;
+    }
+
     return {
-      width: isActive.value ? // on Web, <svg /> elements don't support negative widths
+      width: (0, _reactNativeReanimated.withTiming)(isActive.value ? // on Web, <svg /> elements don't support negative widths
       // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
-      Math.max(currentX.value, 0) : (0, _reactNativeReanimated.withTiming)(inactiveWidth + widthOffset, Object.assign({
+      Math.max(currentX.value, 0) : inactiveWidth + widthOffset, Object.assign({
         duration
       }, props), () => {
         hasMountedAnimation.value = true;
@@ -116,7 +116,7 @@ function LineChartPathWrapper({
   } ////////////////////////////////////////////////
 
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_LineChartPathContext.LineChartPathContext.Provider, {
     value: {
       color,
       isInactive: showInactivePath,
@@ -131,7 +131,7 @@ function LineChartPathWrapper({
     color: color,
     inactiveColor: inactiveColor,
     width: strokeWidth
-  }, pathProps)), backgroundChildren))), /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
+  }, pathProps)), backgroundChildren))), /*#__PURE__*/React.createElement(_LineChartPathContext.LineChartPathContext.Provider, {
     value: {
       color,
       isInactive: false,

package/lib/commonjs/charts/line/ChartPath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChartPath.tsx"],"names":["BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","Animated","createAnimatedComponent","Svg","LineChartPathContext","React","createContext","color","isInactive","isTransitionEnabled","LineChartPathWrapper","displayName","animationDuration","animationProps","children","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","useContext","LineChartDimensionsContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","StyleSheet","absoluteFill"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,qBAAqB,GAAG,CAC5B,oBAD4B,EAE5B,yBAF4B,EAG5B,mBAH4B,EAI5B,cAJ4B,CAA9B;AAMA,MAAMC,qBAAqB,GAAG,CAAC,oBAAD,EAAuB,cAAvB,CAA9B;;AAEA,MAAMC,WAAW,GAAGC,+BAASC,uBAAT,CAAiCC,mBAAjC,CAApB;;AAEO,MAAMC,oBAAoB,gBAAGC,KAAK,CAACC,aAAN,CAAoB;AACtDC,EAAAA,KAAK,EAAE,EAD+C;AAEtDC,EAAAA,UAAU,EAAE,KAF0C;AAGtDC,EAAAA,mBAAmB,EAAE;AAHiC,CAApB,CAA7B;;AAqBPC,oBAAoB,CAACC,WAArB,GAAmC,sBAAnC;;AAEO,SAASD,oBAAT,CAA8B;AACnCE,EAAAA,iBAAiB,GAAG,GADe;AAEnCC,EAAAA,cAAc,GAAG,EAFkB;AAGnCC,EAAAA,QAHmC;AAInCP,EAAAA,KAAK,GAAG,OAJ2B;AAKnCQ,EAAAA,aALmC;AAMnCC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CANc;AAOnCC,EAAAA,WAAW,GAAG,EAPqB;AAQnCC,EAAAA,SAAS,GAAG,EARuB;AASnCC,EAAAA,gBAAgB,GAAG,IATgB;AAUnCC,EAAAA,cAVmC;AAWnCC,EAAAA,sBAAsB,GAAGV,iBAXU;AAYnCW,EAAAA,mBAAmB,GAAGV;AAZa,CAA9B,EAauB;AAAA;;AAC5B,QAAM;AAAEW,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBT,IAAAA;AAArB,MAA+BX,KAAK,CAACqB,UAAN,CACnCC,iCADmC,CAArC;AAGA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyB,iCAA/B;AACA,QAAMC,SAAS,GAAG,2CAAe,KAAf,CAAlB;AACA,QAAMC,mBAAmB,GAAG,2CAAe,KAAf,CAA5B;AAEA1B,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,MAAM;AACpBF,IAAAA,SAAS,CAACG,KAAV,GAAkB,IAAlB,CADoB,CAEpB;AACD,GAHD,EAGG,EAHH,EAR4B,CAa5B;;AAEA,QAAMC,QAAQ,GAAG,6CAAiB,MAAM;AACtC,UAAMC,oBAAoB,GAAGd,cAAc,KAAK,YAAhD;AACA,UAAMe,aAAa,GACjB,CAACN,SAAS,CAACG,KAAX,IAAoBE,oBAApB,GAA2C,CAA3C,GAA+CV,SADjD;AAGA,UAAMY,QAAQ,GACZF,oBAAoB,IAAI,CAACJ,mBAAmB,CAACE,KAA7C,GACIX,sBADJ,GAEIV,iBAHN;AAIA,UAAM0B,KAAK,GACTH,oBAAoB,IAAI,CAACJ,mBAAmB,CAACE,KAA7C,GACIV,mBADJ,GAEIV,cAHN;AAKA,WAAO;AACLG,MAAAA,KAAK,EAAEa,QAAQ,CAACI,KAAT,GACH;AACA;AACAM,MAAAA,IAAI,CAACC,GAAL,CAASZ,QAAQ,CAACK,KAAlB,EAAyB,CAAzB,CAHG,GAIH,uCACEG,aAAa,GAAGlB,WADlB,EAEEuB,MAAM,CAACC,MAAP,CAAc;AAAEL,QAAAA;AAAF,OAAd,EAA4BC,KAA5B,CAFF,EAGE,MAAM;AACJP,QAAAA,mBAAmB,CAACE,KAApB,GAA4B,IAA5B;AACD,OALH;AALC,KAAP;AAaD,GA3BgB,CAAjB;AA6BA,QAAMU,QAAQ,GAAGtC,KAAK,CAACuC,OAAN,CAAc,OAAO;AAAE5B,IAAAA,KAAF;AAASQ,IAAAA;AAAT,GAAP,CAAd,EAAyC,CAACR,KAAD,EAAQQ,MAAR,CAAzC,CAAjB,CA5C4B,CA8C5B;;AAEA,MAAIqB,kBAAJ;AACA,MAAIC,kBAAJ;;AACA,MAAIhC,QAAJ,EAAc;AACZ,UAAMiC,gBAAgB,GAAG,wCAAgBjC,QAAhB,CAAzB;AACA+B,IAAAA,kBAAkB,GAAGE,gBAAgB,CAACC,MAAjB,CAAyBC,KAAD;AAAA;;AAAA,aAC3C;AACAnD,QAAAA,qBAAqB,CAACoD,QAAtB,CAA+BD,KAA/B,aAA+BA,KAA/B,sCAA+BA,KAAK,CAAEE,IAAtC,gDAA+B,YAAaxC,WAA5C;AAF2C;AAAA,KAAxB,CAArB;AAIAmC,IAAAA,kBAAkB,GAAGC,gBAAgB,CAACC,MAAjB,CAAyBC,KAAD;AAAA;;AAAA,aAC3C;AACAlD,QAAAA,qBAAqB,CAACmD,QAAtB,CAA+BD,KAA/B,aAA+BA,KAA/B,uCAA+BA,KAAK,CAAEE,IAAtC,iDAA+B,aAAaxC,WAA5C;AAF2C;AAAA,KAAxB,CAArB;AAID,GA5D2B,CA8D5B;;;AAEA,sBACE,uDACE,oBAAC,oBAAD,CAAsB,QAAtB;AACE,IAAA,KAAK,EAAE;AACLJ,MAAAA,KADK;AAELC,MAAAA,UAAU,EAAEY,gBAFP;AAGLX,MAAAA,mBAAmB,2BAAEU,SAAS,CAACV,mBAAZ,yEAAmC;AAHjD;AADT,kBAOE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEkC;AAAb,kBACE,oBAAC,mBAAD;AAAK,IAAA,KAAK,EAAE3B,KAAZ;AAAmB,IAAA,MAAM,EAAEQ;AAA3B,kBACE,oBAAC,mBAAD;AACE,IAAA,KAAK,EAAEjB,KADT;AAEE,IAAA,aAAa,EAAEQ,aAFjB;AAGE,IAAA,KAAK,EAAEE;AAHT,KAIME,SAJN,EADF,EAOG0B,kBAPH,CADF,CAPF,CADF,eAoBE,oBAAC,oBAAD,CAAsB,QAAtB;AACE,IAAA,KAAK,EAAE;AACLtC,MAAAA,KADK;AAELC,MAAAA,UAAU,EAAE,KAFP;AAGLC,MAAAA,mBAAmB,4BAAEU,SAAS,CAACV,mBAAZ,2EAAmC;AAHjD;AADT,kBAOE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE2C,wBAAWC;AAAxB,kBACE,oBAAC,WAAD;AAAa,IAAA,aAAa,EAAEnB,QAA5B;AAAsC,IAAA,MAAM,EAAEV;AAA9C,kBACE,oBAAC,mBAAD;AAAe,IAAA,KAAK,EAAEjB,KAAtB;AAA6B,IAAA,KAAK,EAAEU;AAApC,KAAqDE,SAArD,EADF,EAEG2B,kBAFH,CADF,CAPF,CApBF,CADF;AAqCD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isInactive: false,\n  isTransitionEnabled: true,\n});\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Partial<Animated.WithTimingConfig>;\n  children?: React.ReactNode;\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  widthOffset?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n  animateOnMount?: 'foreground';\n  mountAnimationDuration?: number;\n  mountAnimationProps?: Partial<Animated.WithTimingConfig>;\n};\n\nLineChartPathWrapper.displayName = 'LineChartPathWrapper';\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  widthOffset = 20,\n  pathProps = {},\n  showInactivePath = true,\n  animateOnMount,\n  mountAnimationDuration = animationDuration,\n  mountAnimationProps = animationProps,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, isActive } = useLineChart();\n  const isMounted = useSharedValue(false);\n  const hasMountedAnimation = useSharedValue(false);\n\n  React.useEffect(() => {\n    isMounted.value = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => {\n    const shouldAnimateOnMount = animateOnMount === 'foreground';\n    const inactiveWidth =\n      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;\n\n    const duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    return {\n      width: isActive.value\n        ? // on Web, <svg /> elements don't support negative widths\n          // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n          Math.max(currentX.value, 0)\n        : withTiming(\n            inactiveWidth + widthOffset,\n            Object.assign({ duration }, props),\n            () => {\n              hasMountedAnimation.value = true;\n            }\n          ),\n    };\n  });\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["ChartPath.tsx"],"names":["BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","Animated","createAnimatedComponent","Svg","LineChartPathWrapper","displayName","animationDuration","animationProps","children","color","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","React","useContext","LineChartDimensionsContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","isInactive","isTransitionEnabled","StyleSheet","absoluteFill"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  useSharedValue,\n  withTiming,\n  WithTimingConfig,\n} from 'react-native-reanimated';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './LineChartPathContext';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n  'LineChartTooltip',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;\n  children?: React.ReactNode;\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  widthOffset?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n  animateOnMount?: 'foreground';\n  mountAnimationDuration?: number;\n  mountAnimationProps?: Partial<WithTimingConfig>;\n};\n\nLineChartPathWrapper.displayName = 'LineChartPathWrapper';\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  widthOffset = 20,\n  pathProps = {},\n  showInactivePath = true,\n  animateOnMount,\n  mountAnimationDuration = animationDuration,\n  mountAnimationProps = animationProps,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, isActive } = useLineChart();\n  const isMounted = useSharedValue(false);\n  const hasMountedAnimation = useSharedValue(false);\n\n  React.useEffect(() => {\n    isMounted.value = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => {\n    const shouldAnimateOnMount = animateOnMount === 'foreground';\n    const inactiveWidth =\n      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;\n\n    let duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    if (isActive.value) {\n      duration = 0;\n    }\n\n    return {\n      width: withTiming(\n        isActive.value\n          ? // on Web, <svg /> elements don't support negative widths\n            // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n            Math.max(currentX.value, 0)\n          : inactiveWidth + widthOffset,\n        Object.assign({ duration }, props),\n        () => {\n          hasMountedAnimation.value = true;\n        }\n      ),\n    };\n  });\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}

package/lib/commonjs/charts/line/Cursor.js

@@ -14,8 +14,6 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _reactNativeRedash = require("react-native-redash");
-
 var _Chart = require("./Chart");
 
 var _useLineChart = require("./useLineChart");
@@ -39,7 +37,7 @@ function LineChartCursor({
 }) {
   const {
     pathWidth: width,
-    path
+    parsedPath
   } = React.useContext(_Chart.LineChartDimensionsContext);
   const {
     currentX,
@@ -47,13 +45,12 @@ function LineChartCursor({
     isActive,
     data
   } = (0, _useLineChart.useLineChart)();
-  const parsedPath = React.useMemo(() => path ? (0, _reactNativeRedash.parse)(path) : undefined, [path]);
   const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
     onActive: ({
       x
     }) => {
       if (parsedPath) {
-        const boundedX = x <= width ? x : width;
+        const boundedX = Math.max(0, x <= width ? x : width);
         isActive.value = true;
         currentX.value = boundedX; // on Web, we could drag the cursor to be negative, breaking it
         // so we clamp the index at 0 to fix it

package/lib/commonjs/charts/line/Cursor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Cursor.tsx"],"names":["CursorContext","React","createContext","type","LineChartCursor","displayName","children","props","pathWidth","width","path","useContext","LineChartDimensionsContext","currentX","currentIndex","isActive","data","parsedPath","useMemo","undefined","onGestureEvent","onActive","x","boundedX","value","minIndex","boundedIndex","Math","max","round","length","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AAEA;;AACA;;;;;;;;AAOO,MAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAN,CAAoB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAApB,CAAtB;;AAEPC,eAAe,CAACC,WAAhB,GAA8B,iBAA9B;;AAEO,SAASD,eAAT,CAAyB;AAC9BE,EAAAA,QAD8B;AAE9BH,EAAAA,IAF8B;AAG9B,KAAGI;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,SAAS,EAAEC,KAAb;AAAoBC,IAAAA;AAApB,MAA6BT,KAAK,CAACU,UAAN,CACjCC,iCADiC,CAAnC;AAGA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,MAA6C,iCAAnD;AAEA,QAAMC,UAAU,GAAGhB,KAAK,CAACiB,OAAN,CACjB,MAAOR,IAAI,GAAG,8BAAMA,IAAN,CAAH,GAAiBS,SADX,EAEjB,CAACT,IAAD,CAFiB,CAAnB;AAKA,QAAMU,cAAc,GAAG,sDAErB;AACAC,IAAAA,QAAQ,EAAE,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAW;AACnB,UAAIL,UAAJ,EAAgB;AACd,cAAMM,QAAQ,GAAGD,CAAC,IAAIb,KAAL,GAAaa,CAAb,GAAiBb,KAAlC;AACAM,QAAAA,QAAQ,CAACS,KAAT,GAAiB,IAAjB;AACAX,QAAAA,QAAQ,CAACW,KAAT,GAAiBD,QAAjB,CAHc,CAKd;AACA;AACA;;AACA,cAAME,QAAQ,GAAG,CAAjB;AACA,cAAMC,YAAY,GAAGC,IAAI,CAACC,GAAL,CACnBH,QADmB,EAEnBE,IAAI,CAACE,KAAL,CAAWN,QAAQ,GAAGd,KAAX,IAAoB,KAAKO,IAAI,CAACc,MAAL,GAAc,CAAnB,CAApB,CAAX,CAFmB,CAArB;AAKAhB,QAAAA,YAAY,CAACU,KAAb,GAAqBE,YAArB;AACD;AACF,KAlBD;AAmBAK,IAAAA,KAAK,EAAE,MAAM;AACXhB,MAAAA,QAAQ,CAACS,KAAT,GAAiB,KAAjB;AACAV,MAAAA,YAAY,CAACU,KAAb,GAAqB,CAAC,CAAtB;AACD;AAtBD,GAFqB,CAAvB;AA2BA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAE;AAAErB,MAAAA;AAAF;AAA/B,kBACE,oBAAC,kDAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,EAAEiB;AAHlB,KAIMb,KAJN,gBAME,oBAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEyB,wBAAWC;AAAjC,KACG3B,QADH,CANF,CADF,CADF;AAcD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport {\n  GestureEvent,\n  LongPressGestureHandler,\n  LongPressGestureHandlerEventPayload,\n  LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';\nimport { parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\n\nexport type LineChartCursorProps = LongPressGestureHandlerProps & {\n  children: React.ReactNode;\n  type: 'line' | 'crosshair';\n};\n\nexport const CursorContext = React.createContext({ type: '' });\n\nLineChartCursor.displayName = 'LineChartCursor';\n\nexport function LineChartCursor({\n  children,\n  type,\n  ...props\n}: LineChartCursorProps) {\n  const { pathWidth: width, path } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x }) => {\n      if (parsedPath) {\n        const boundedX = x <= width ? x : width;\n        isActive.value = true;\n        currentX.value = boundedX;\n\n        // on Web, we could drag the cursor to be negative, breaking it\n        // so we clamp the index at 0 to fix it\n        // https://github.com/coinjar/react-native-wagmi-charts/issues/24\n        const minIndex = 0;\n        const boundedIndex = Math.max(\n          minIndex,\n          Math.round(boundedX / width / (1 / (data.length - 1)))\n        );\n\n        currentIndex.value = boundedIndex;\n      }\n    },\n    onEnd: () => {\n      isActive.value = false;\n      currentIndex.value = -1;\n    },\n  });\n\n  return (\n    <CursorContext.Provider value={{ type }}>\n      <LongPressGestureHandler\n        minDurationMs={0}\n        maxDist={999999}\n        onGestureEvent={onGestureEvent}\n        {...props}\n      >\n        <Animated.View style={StyleSheet.absoluteFill}>\n          {children}\n        </Animated.View>\n      </LongPressGestureHandler>\n    </CursorContext.Provider>\n  );\n}\n"]}
+{"version":3,"sources":["Cursor.tsx"],"names":["CursorContext","React","createContext","type","LineChartCursor","displayName","children","props","pathWidth","width","parsedPath","useContext","LineChartDimensionsContext","currentX","currentIndex","isActive","data","onGestureEvent","onActive","x","boundedX","Math","max","value","minIndex","boundedIndex","round","length","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AAMA;;AAEA;;AACA;;;;;;;;AAOO,MAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAN,CAAoB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAApB,CAAtB;;AAEPC,eAAe,CAACC,WAAhB,GAA8B,iBAA9B;;AAEO,SAASD,eAAT,CAAyB;AAC9BE,EAAAA,QAD8B;AAE9BH,EAAAA,IAF8B;AAG9B,KAAGI;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,SAAS,EAAEC,KAAb;AAAoBC,IAAAA;AAApB,MAAmCT,KAAK,CAACU,UAAN,CACvCC,iCADuC,CAAzC;AAGA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,MAA6C,iCAAnD;AAEA,QAAMC,cAAc,GAAG,sDAErB;AACAC,IAAAA,QAAQ,EAAE,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAW;AACnB,UAAIT,UAAJ,EAAgB;AACd,cAAMU,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYH,CAAC,IAAIV,KAAL,GAAaU,CAAb,GAAiBV,KAA7B,CAAjB;AACAM,QAAAA,QAAQ,CAACQ,KAAT,GAAiB,IAAjB;AACAV,QAAAA,QAAQ,CAACU,KAAT,GAAiBH,QAAjB,CAHc,CAKd;AACA;AACA;;AACA,cAAMI,QAAQ,GAAG,CAAjB;AACA,cAAMC,YAAY,GAAGJ,IAAI,CAACC,GAAL,CACnBE,QADmB,EAEnBH,IAAI,CAACK,KAAL,CAAWN,QAAQ,GAAGX,KAAX,IAAoB,KAAKO,IAAI,CAACW,MAAL,GAAc,CAAnB,CAApB,CAAX,CAFmB,CAArB;AAKAb,QAAAA,YAAY,CAACS,KAAb,GAAqBE,YAArB;AACD;AACF,KAlBD;AAmBAG,IAAAA,KAAK,EAAE,MAAM;AACXb,MAAAA,QAAQ,CAACQ,KAAT,GAAiB,KAAjB;AACAT,MAAAA,YAAY,CAACS,KAAb,GAAqB,CAAC,CAAtB;AACD;AAtBD,GAFqB,CAAvB;AA2BA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAE;AAAEpB,MAAAA;AAAF;AAA/B,kBACE,oBAAC,kDAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,EAAEc;AAHlB,KAIMV,KAJN,gBAME,oBAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEsB,wBAAWC;AAAjC,KACGxB,QADH,CANF,CADF,CADF;AAcD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport {\n  GestureEvent,\n  LongPressGestureHandler,\n  LongPressGestureHandlerEventPayload,\n  LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\n\nexport type LineChartCursorProps = LongPressGestureHandlerProps & {\n  children: React.ReactNode;\n  type: 'line' | 'crosshair';\n};\n\nexport const CursorContext = React.createContext({ type: '' });\n\nLineChartCursor.displayName = 'LineChartCursor';\n\nexport function LineChartCursor({\n  children,\n  type,\n  ...props\n}: LineChartCursorProps) {\n  const { pathWidth: width, parsedPath } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x }) => {\n      if (parsedPath) {\n        const boundedX = Math.max(0, x <= width ? x : width);\n        isActive.value = true;\n        currentX.value = boundedX;\n\n        // on Web, we could drag the cursor to be negative, breaking it\n        // so we clamp the index at 0 to fix it\n        // https://github.com/coinjar/react-native-wagmi-charts/issues/24\n        const minIndex = 0;\n        const boundedIndex = Math.max(\n          minIndex,\n          Math.round(boundedX / width / (1 / (data.length - 1)))\n        );\n\n        currentIndex.value = boundedIndex;\n      }\n    },\n    onEnd: () => {\n      isActive.value = false;\n      currentIndex.value = -1;\n    },\n  });\n\n  return (\n    <CursorContext.Provider value={{ type }}>\n      <LongPressGestureHandler\n        minDurationMs={0}\n        maxDist={999999}\n        onGestureEvent={onGestureEvent}\n        {...props}\n      >\n        <Animated.View style={StyleSheet.absoluteFill}>\n          {children}\n        </Animated.View>\n      </LongPressGestureHandler>\n    </CursorContext.Provider>\n  );\n}\n"]}

package/lib/commonjs/charts/line/Dot.js

@@ -15,7 +15,7 @@ var _reactNativeRedash = require("react-native-redash");
 
 var _Chart = require("./Chart");
 
-var _ChartPath = require("./ChartPath");
+var _LineChartPathContext = require("./LineChartPathContext");
 
 var _useLineChart = require("./useLineChart");
 
@@ -44,26 +44,21 @@ function LineChartDot({
   outerSize = size * 4
 }) {
   const {
-    data,
     isActive
   } = (0, _useLineChart.useLineChart)();
   const {
-    path,
-    pathWidth: width
+    parsedPath,
+    pointWidth
   } = React.useContext(_Chart.LineChartDimensionsContext); ////////////////////////////////////////////////////////////
 
   const {
     isInactive: _isInactive
-  } = React.useContext(_ChartPath.LineChartPathContext);
+  } = React.useContext(_LineChartPathContext.LineChartPathContext);
   const isInactive = showInactiveColor && _isInactive;
   const color = isInactive ? inactiveColor || defaultColor : defaultColor;
   const opacity = isInactive && !inactiveColor ? 0.5 : 1;
   const hasOuterDot = defaultHasOuterDot || hasPulse; ////////////////////////////////////////////////////////////
 
-  const parsedPath = React.useMemo(() => (0, _reactNativeRedash.parse)(path), [path]); ////////////////////////////////////////////////////////////
-
-  const pointWidth = React.useMemo(() => width / (data.length - 1), [data.length, width]); ////////////////////////////////////////////////////////////
-
   const x = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withTiming)(pointWidth * at));
   const y = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withTiming)((0, _reactNativeRedash.getYForX)(parsedPath, x.value) || 0)); ////////////////////////////////////////////////////////////