npm - react-native-wagmi-charts - Versions diffs - 2.1.0 → 2.3.0 - Mend

react-native-wagmi-charts 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (890) hide show

package/README.md CHANGED Viewed

@@ -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)
@@ -282,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.
@@ -403,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>
 ```
@@ -417,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>
 ```
@@ -582,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',
@@ -827,6 +845,7 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | `crosshairWrapperProps` | `ViewProps`                    |           | Props of the wrapper component of the crosshair |
 | `crosshairProps`        | `ViewProps`                    |           | Props of the crosshair dot                      |
 | `crosshairOuterProps`   | `ViewProps`                    |           | Props of the crosshair outer dot                |
+| `snapToPoint`           | `boolean`                      | `false`   | Snap cursor to X position of nearest data point |
 | `...props`              | `LongPressGestureHandlerProps` |           |                                                 |
 ### LineChart.CursorLine
@@ -887,6 +906,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
@@ -1044,9 +1065,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/Crosshair.js CHANGED Viewed

@@ -77,18 +77,18 @@ function CandlestickChartCrosshair({
     transform: [{
       translateY: currentY.value
     }]
-  }));
+  }), [opacity, currentY]);
   const vertical = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: opacity.value,
     transform: [{
       translateX: currentX.value
     }]
-  }));
+  }), [opacity, currentX]);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => currentX.value, (data, prevData) => {
     if (data !== -1 && data !== prevData && onCurrentXChange) {
       (0, _reactNativeReanimated.runOnJS)(onCurrentXChange)(data);
     }
-  });
+  }, [currentX]);
   return /*#__PURE__*/React.createElement(_reactNativeGestureHandler.LongPressGestureHandler, _extends({
     minDurationMs: 0,
     maxDist: 999999,

package/lib/commonjs/charts/candle/Crosshair.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Crosshair.tsx"],"names":["CandlestickChartCrosshair","color","onCurrentXChange","children","horizontalCrosshairProps","verticalCrosshairProps","lineProps","props","width","height","React","useContext","CandlestickChartDimensionsContext","currentX","currentY","step","tooltipPosition","opacity","onGestureEvent","onActive","x","y","boundedX","value","onEnd","horizontal","transform","translateY","vertical","translateX","data","prevData","StyleSheet","absoluteFill","position"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AAOA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAWO,SAASA,yBAAT,CAAmC;AACxCC,EAAAA,KADwC;AAExCC,EAAAA,gBAFwC;AAGxCC,EAAAA,QAHwC;AAIxCC,EAAAA,wBAAwB,GAAG,EAJa;AAKxCC,EAAAA,sBAAsB,GAAG,EALe;AAMxCC,EAAAA,SAAS,GAAG,EAN4B;AAOxC,KAAGC;AAPqC,CAAnC,EAQ4B;AACjC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBC,KAAK,CAACC,UAAN,CAAiBC,wCAAjB,CAA1B;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA;AAAtB,MAA+B,+CAArC;AAEA,QAAMC,eAAe,GAAG,2CAAiC,MAAjC,CAAxB;AAEA,QAAMC,OAAO,GAAG,2CAAe,CAAf,CAAhB;AACA,QAAMC,cAAc,GAAG,sDAErB;AACAC,IAAAA,QAAQ,EAAE,CAAC;AAAEC,MAAAA,CAAF;AAAKC,MAAAA;AAAL,KAAD,KAAc;AACtB,YAAMC,QAAQ,GAAGF,CAAC,IAAIZ,KAAK,GAAG,CAAb,GAAiBY,CAAjB,GAAqBZ,KAAK,GAAG,CAA9C;;AACA,UAAIc,QAAQ,GAAG,GAAf,EAAoB;AAClBN,QAAAA,eAAe,CAACO,KAAhB,GAAwB,OAAxB;AACD,OAFD,MAEO;AACLP,QAAAA,eAAe,CAACO,KAAhB,GAAwB,MAAxB;AACD;;AACDN,MAAAA,OAAO,CAACM,KAAR,GAAgB,CAAhB;AACAT,MAAAA,QAAQ,CAACS,KAAT,GAAiB,8BAAMF,CAAN,EAAS,CAAT,EAAYZ,MAAZ,CAAjB;AACAI,MAAAA,QAAQ,CAACU,KAAT,GAAiBD,QAAQ,GAAIA,QAAQ,GAAGP,IAAvB,GAA+BA,IAAI,GAAG,CAAvD;AACD,KAXD;AAYAS,IAAAA,KAAK,EAAE,MAAM;AACXP,MAAAA,OAAO,CAACM,KAAR,GAAgB,CAAhB;AACAT,MAAAA,QAAQ,CAACS,KAAT,GAAiB,CAAC,CAAlB;AACAV,MAAAA,QAAQ,CAACU,KAAT,GAAiB,CAAC,CAAlB;AACD;AAhBD,GAFqB,CAAvB;AAoBA,QAAME,UAAU,GAAG,~~6CAAiB~~,OAAO;~~AACzCR~~,IAAAA,OAAO,EAAEA,OAAO,CAACM,~~KADwB~~;~~AAEzCG~~,IAAAA,SAAS,EAAE,CAAC;AAAEC,MAAAA,UAAU,EAAEb,QAAQ,CAACS;AAAvB,KAAD;~~AAF8B~~,GAAP,~~CAAjB~~,CAAnB;~~AAIA~~,~~QAAMK~~,QAAQ,GAAG,~~6CAAiB~~,OAAO;~~AACvCX~~,IAAAA,OAAO,EAAEA,OAAO,CAACM,~~KADsB~~;~~AAEvCG~~,IAAAA,SAAS,EAAE,CAAC;AAAEG,MAAAA,UAAU,EAAEhB,QAAQ,CAACU;AAAvB,KAAD;~~AAF4B~~,GAAP,~~CAAjB~~,CAAjB;~~AAKA~~,kDACE,~~MAAMV~~,QAAQ,CAACU,KADjB,EAEE,CAACO,IAAD,EAAOC,QAAP,KAAoB;AAClB,QAAID,IAAI,KAAK,CAAC,CAAV,IAAeA,IAAI,KAAKC,QAAxB,IAAoC7B,gBAAxC,EAA0D;AACxD,0CAAQA,gBAAR,EAA0B4B,IAA1B;AACD;AACF,GANH;~~AASA~~,sBACE,oBAAC,kDAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,~~EAAEZ~~;AAHlB,KAIMX,KAJN,gBAME,oBAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEyB,wBAAWC;AAAjC,kBACE,oBAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACD,wBAAWC,YAAZ,EAA0BR,UAA1B;AADT,KAEMrB,wBAFN,gBAIE,oBAAC,0BAAD;AAAsB,IAAA,KAAK,EAAEH,KAA7B;AAAoC,IAAA,CAAC,EAAEO,KAAvC;AAA8C,IAAA,CAAC,EAAE;AAAjD,KAAwDF,SAAxD,EAJF,eAKE,oBAAC,yDAAD,CAAyC,QAAzC;AACE,IAAA,KAAK,EAAE;AAAE4B,MAAAA,QAAQ,EAAElB;AAAZ;AADT,KAGGb,QAHH,CALF,CADF,eAYE,oBAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAAC6B,wBAAWC,YAAZ,EAA0BL,QAA1B;AADT,KAEMvB,sBAFN,gBAIE,oBAAC,0BAAD;AAAsB,IAAA,KAAK,EAAEJ,KAA7B;AAAoC,IAAA,CAAC,EAAE,CAAvC;AAA0C,IAAA,CAAC,EAAEQ;AAA7C,KAAyDH,SAAzD,EAJF,CAZF,CANF,CADF;AA4BD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport {\n GestureEvent,\n LongPressGestureHandler,\n LongPressGestureHandlerEventPayload,\n LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, {\n useAnimatedGestureHandler,\n useSharedValue,\n useAnimatedStyle,\n useAnimatedReaction,\n runOnJS,\n} from 'react-native-reanimated';\nimport { clamp } from 'react-native-redash';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { CandlestickChartLine, CandlestickChartLineProps } from './Line';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { CandlestickChartCrosshairTooltipContext } from './CrosshairTooltip';\n\ntype CandlestickChartCrosshairProps = LongPressGestureHandlerProps & {\n color?: string;\n children?: React.ReactNode;\n onCurrentXChange?: (value: number) => unknown;\n horizontalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n verticalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n lineProps?: Partial<CandlestickChartLineProps>;\n};\n\nexport function CandlestickChartCrosshair({\n color,\n onCurrentXChange,\n children,\n horizontalCrosshairProps = {},\n verticalCrosshairProps = {},\n lineProps = {},\n ...props\n}: CandlestickChartCrosshairProps) {\n const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n const { currentX, currentY, step } = useCandlestickChart();\n\n const tooltipPosition = useSharedValue<'left' \| 'right'>('left');\n\n const opacity = useSharedValue(0);\n const onGestureEvent = useAnimatedGestureHandler<\n GestureEvent<LongPressGestureHandlerEventPayload>\n >({\n onActive: ({ x, y }) => {\n const boundedX = x <= width - 1 ? x : width - 1;\n if (boundedX < 100) {\n tooltipPosition.value = 'right';\n } else {\n tooltipPosition.value = 'left';\n }\n opacity.value = 1;\n currentY.value = clamp(y, 0, height);\n currentX.value = boundedX - (boundedX % step) + step / 2;\n },\n onEnd: () => {\n opacity.value = 0;\n currentY.value = -1;\n currentX.value = -1;\n },\n });\n const horizontal = useAnimatedStyle(() => ({\n opacity: opacity.value,\n transform: [{ translateY: currentY.value }],\n }));\n const vertical = useAnimatedStyle(() => ({\n opacity: opacity.value,\n transform: [{ translateX: currentX.value }],\n }));\n\n useAnimatedReaction(\n () => currentX.value,\n (data, prevData) => {\n if (data !== -1 && data !== prevData && onCurrentXChange) {\n runOnJS(onCurrentXChange)(data);\n }\n }\n );\n\n return (\n <LongPressGestureHandler\n minDurationMs={0}\n maxDist={999999}\n onGestureEvent={onGestureEvent}\n {...props}\n >\n <Animated.View style={StyleSheet.absoluteFill}>\n <Animated.View\n style={[StyleSheet.absoluteFill, horizontal]}\n {...horizontalCrosshairProps}\n >\n <CandlestickChartLine color={color} x={width} y={0} {...lineProps} />\n <CandlestickChartCrosshairTooltipContext.Provider\n value={{ position: tooltipPosition }}\n >\n {children}\n </CandlestickChartCrosshairTooltipContext.Provider>\n </Animated.View>\n <Animated.View\n style={[StyleSheet.absoluteFill, vertical]}\n {...verticalCrosshairProps}\n >\n <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />\n </Animated.View>\n </Animated.View>\n </LongPressGestureHandler>\n );\n}\n"]}
1	+ {"version":3,"sources":["Crosshair.tsx"],"names":["CandlestickChartCrosshair","color","onCurrentXChange","children","horizontalCrosshairProps","verticalCrosshairProps","lineProps","props","width","height","React","useContext","CandlestickChartDimensionsContext","currentX","currentY","step","tooltipPosition","opacity","onGestureEvent","onActive","x","y","boundedX","value","onEnd","horizontal","transform","translateY","vertical","translateX","data","prevData","StyleSheet","absoluteFill","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport {\n GestureEvent,\n LongPressGestureHandler,\n LongPressGestureHandlerEventPayload,\n LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, {\n useAnimatedGestureHandler,\n useSharedValue,\n useAnimatedStyle,\n useAnimatedReaction,\n runOnJS,\n} from 'react-native-reanimated';\nimport { clamp } from 'react-native-redash';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { CandlestickChartLine, CandlestickChartLineProps } from './Line';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { CandlestickChartCrosshairTooltipContext } from './CrosshairTooltip';\n\ntype CandlestickChartCrosshairProps = LongPressGestureHandlerProps & {\n color?: string;\n children?: React.ReactNode;\n onCurrentXChange?: (value: number) => unknown;\n horizontalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n verticalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n lineProps?: Partial<CandlestickChartLineProps>;\n};\n\nexport function CandlestickChartCrosshair({\n color,\n onCurrentXChange,\n children,\n horizontalCrosshairProps = {},\n verticalCrosshairProps = {},\n lineProps = {},\n ...props\n}: CandlestickChartCrosshairProps) {\n const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n const { currentX, currentY, step } = useCandlestickChart();\n\n const tooltipPosition = useSharedValue<'left' \| 'right'>('left');\n\n const opacity = useSharedValue(0);\n const onGestureEvent = useAnimatedGestureHandler<\n GestureEvent<LongPressGestureHandlerEventPayload>\n >({\n onActive: ({ x, y }) => {\n const boundedX = x <= width - 1 ? x : width - 1;\n if (boundedX < 100) {\n tooltipPosition.value = 'right';\n } else {\n tooltipPosition.value = 'left';\n }\n opacity.value = 1;\n currentY.value = clamp(y, 0, height);\n currentX.value = boundedX - (boundedX % step) + step / 2;\n },\n onEnd: () => {\n opacity.value = 0;\n currentY.value = -1;\n currentX.value = -1;\n },\n });\n const horizontal = useAnimatedStyle(\n () => ({\n opacity: opacity.value,\n transform: [{ translateY: currentY.value }],\n }),\n [opacity, currentY]\n );\n const vertical = useAnimatedStyle(\n () => ({\n opacity: opacity.value,\n transform: [{ translateX: currentX.value }],\n }),\n [opacity, currentX]\n );\n\n useAnimatedReaction(\n () => currentX.value,\n (data, prevData) => {\n if (data !== -1 && data !== prevData && onCurrentXChange) {\n runOnJS(onCurrentXChange)(data);\n }\n },\n [currentX]\n );\n\n return (\n <LongPressGestureHandler\n minDurationMs={0}\n maxDist={999999}\n onGestureEvent={onGestureEvent}\n {...props}\n >\n <Animated.View style={StyleSheet.absoluteFill}>\n <Animated.View\n style={[StyleSheet.absoluteFill, horizontal]}\n {...horizontalCrosshairProps}\n >\n <CandlestickChartLine color={color} x={width} y={0} {...lineProps} />\n <CandlestickChartCrosshairTooltipContext.Provider\n value={{ position: tooltipPosition }}\n >\n {children}\n </CandlestickChartCrosshairTooltipContext.Provider>\n </Animated.View>\n <Animated.View\n style={[StyleSheet.absoluteFill, vertical]}\n {...verticalCrosshairProps}\n >\n <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />\n </Animated.View>\n </Animated.View>\n </LongPressGestureHandler>\n );\n}\n"]}

package/lib/commonjs/charts/candle/CrosshairTooltip.js CHANGED Viewed

@@ -65,23 +65,23 @@ function CandlestickChartCrosshairTooltip({
     }
     return offset;
-  });
+  }, [currentY, elementHeight, height, yGutter]);
   const tooltip = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     backgroundColor: 'white',
     position: 'absolute',
     display: 'flex',
     padding: 4
-  }));
+  }), []);
   const leftTooltip = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     left: xGutter,
     top: -(elementHeight.value / 2) - topOffset.value,
     opacity: position.value === 'left' ? 1 : 0
-  }));
+  }), [elementHeight, position, topOffset, xGutter]);
   const rightTooltip = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     left: width - elementWidth.value - xGutter,
     top: -(elementHeight.value / 2) - topOffset.value,
     opacity: position.value === 'right' ? 1 : 0
-  }));
+  }), [elementHeight, elementWidth, position, topOffset, width, xGutter]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, _extends({
     onLayout: handleLayout
   }, props, {

package/lib/commonjs/charts/candle/CrosshairTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CrosshairTooltip.tsx"],"names":["CandlestickChartCrosshairTooltipContext","React","createContext","position","value","CandlestickChartCrosshairTooltip","children","xGutter","yGutter","tooltipTextProps","textStyle","props","width","height","useContext","CandlestickChartDimensionsContext","currentY","elementHeight","elementWidth","handleLayout","useCallback","event","nativeEvent","layout","topOffset","offset","tooltip","backgroundColor","display","padding","leftTooltip","left","top","opacity","rightTooltip","style","styles","text","StyleSheet","create","fontSize"],"mappings":";;;;;;;;AAAA;;AAEA;;AACA;;AAMA;;AACA;;AACA;;;;;;;;AAiBO,MAAMA,uCAAuC,gBAClDC,KAAK,CAACC,aAAN,CAA6D;AAC3DC,EAAAA,QAAQ,EAAE;AAAEC,IAAAA,KAAK,EAAE;AAAT;AADiD,CAA7D,CADK;;;AAKA,SAASC,gCAAT,CAA0C;AAC/CC,EAAAA,QAD+C;AAE/CC,EAAAA,OAAO,GAAG,CAFqC;AAG/CC,EAAAA,OAAO,GAAG,CAHqC;AAI/CC,EAAAA,gBAJ+C;AAK/CC,EAAAA,SAL+C;AAM/C,KAAGC;AAN4C,CAA1C,EAOmC;AACxC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBZ,KAAK,CAACa,UAAN,CAAiBC,wCAAjB,CAA1B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAe,+CAArB;AACA,QAAM;AAAEb,IAAAA;AAAF,MAAeF,KAAK,CAACa,UAAN,CACnBd,uCADmB,CAArB;AAIA,QAAMiB,aAAa,GAAG,2CAAe,CAAf,CAAtB;AACA,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AAEA,QAAMC,YAAY,GAAGlB,KAAK,CAACmB,WAAN,CAClBC,KAAD,IAAW;AACTJ,IAAAA,aAAa,CAACb,KAAd,GAAsBiB,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBV,MAA/C;AACAK,IAAAA,YAAY,CAACd,KAAb,GAAqBiB,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBX,KAA9C;AACD,GAJkB,EAKnB,CAACK,aAAD,EAAgBC,YAAhB,CALmB,CAArB;AAQA,QAAMM,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIC,MAAM,GAAG,CAAb;;AACA,QAAIT,QAAQ,CAACZ,KAAT,GAAiBa,aAAa,CAACb,KAAd,GAAsB,CAAtB,GAA0BI,OAA/C,EAAwD;AACtDiB,MAAAA,MAAM,GAAGT,QAAQ,CAACZ,KAAT,IAAkBa,aAAa,CAACb,KAAd,GAAsB,CAAtB,GAA0BI,OAA5C,CAAT;AACD,KAFD,MAEO,IAAIQ,QAAQ,CAACZ,KAAT,GAAiBa,aAAa,CAACb,KAAd,GAAsB,CAAvC,GAA2CS,MAAM,GAAGL,OAAxD,EAAiE;AACtEiB,MAAAA,MAAM,GAAGT,QAAQ,CAACZ,KAAT,GAAiBa,aAAa,CAACb,KAAd,GAAsB,CAAvC,GAA2CS,MAA3C,GAAoDL,OAA7D;AACD;;AAED,WAAOiB,MAAP;AACD,GATiB,CAAlB;AAWA,~~QAAMC~~,OAAO,GAAG,~~6CAAiB~~,OAAO;~~AACtCC~~,IAAAA,eAAe,EAAE,~~OADqB~~;~~AAEtCxB~~,IAAAA,QAAQ,EAAE,~~UAF4B~~;~~AAGtCyB~~,IAAAA,OAAO,EAAE,~~MAH6B~~;~~AAItCC~~,IAAAA,OAAO,EAAE;~~AAJ6B~~,GAAP,~~CAAjB~~,CAAhB;~~AAMA~~,QAAMC,WAAW,GAAG,~~6CAAiB~~,OAAO;~~AAC1CC~~,IAAAA,IAAI,EAAExB,~~OADoC~~;~~AAE1CyB~~,IAAAA,GAAG,EAAE,EAAEf,aAAa,CAACb,KAAd,GAAsB,CAAxB,IAA6BoB,SAAS,CAACpB,~~KAFF~~;~~AAG1C6B~~,IAAAA,OAAO,EAAE9B,QAAQ,CAACC,KAAT,KAAmB,MAAnB,GAA4B,CAA5B,GAAgC;~~AAHC~~,GAAP,~~CAAjB~~,CAApB;~~AAKA~~,~~QAAM8B~~,YAAY,GAAG,~~6CAAiB~~,OAAO;~~AAC3CH~~,IAAAA,IAAI,EAAEnB,KAAK,GAAGM,YAAY,CAACd,KAArB,GAA6BG,~~OADQ~~;~~AAE3CyB~~,IAAAA,GAAG,EAAE,EAAEf,aAAa,CAACb,KAAd,GAAsB,CAAxB,IAA6BoB,SAAS,CAACpB,~~KAFD~~;~~AAG3C6B~~,IAAAA,OAAO,EAAE9B,QAAQ,CAACC,KAAT,KAAmB,OAAnB,GAA6B,CAA7B,GAAiC;~~AAHC~~,GAAP,~~CAAjB~~,CAArB;~~AAMA~~,sBACE,uDACE,oBAAC,8BAAD,CAAU,IAAV;AACE,IAAA,QAAQ,~~EAAEe~~;AADZ,KAEMR,KAFN;AAGE,IAAA,KAAK,EAAE,CAACe,OAAD,EAAUI,WAAV,EAAuBnB,KAAK,CAACwB,KAA7B;AAHT,MAKG7B,QAAQ,iBACP,oBAAC,oCAAD,eACMG,gBADN;AAEE,IAAA,KAAK,EAAE,CAAC2B,MAAM,CAACC,IAAR,EAAc5B,gBAAd,aAAcA,gBAAd,uBAAcA,gBAAgB,CAAE0B,KAAhC,EAAuCzB,SAAvC;AAFT,KANJ,CADF,eAaE,oBAAC,8BAAD,CAAU,IAAV,eAAmBC,KAAnB;AAA0B,IAAA,KAAK,EAAE,CAACe,OAAD,EAAUQ,YAAV,EAAwBvB,KAAK,CAACwB,KAA9B;AAAjC,MACG7B,QAAQ,iBACP,oBAAC,oCAAD,eACMG,gBADN;AAEE,IAAA,KAAK,EAAE,CAAC2B,MAAM,CAACC,IAAR,EAAc5B,gBAAd,aAAcA,gBAAd,uBAAcA,gBAAgB,CAAE0B,KAAhC,EAAuCzB,SAAvC;AAFT,KAFJ,CAbF,CADF;AAwBD;;AAED,MAAM0B,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,IAAI,EAAE;AACJG,IAAAA,QAAQ,EAAE;AADN;AADyB,CAAlB,CAAf","sourcesContent":["import * as React from 'react';\nimport type { StyleProp, TextStyle, ViewProps } from 'react-native';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport {\n CandlestickChartPriceText,\n CandlestickChartPriceTextProps,\n} from './PriceText';\n\nexport type CandlestickChartCrosshairTooltipProps = ViewProps & {\n children?: React.ReactNode;\n xGutter?: number;\n yGutter?: number;\n tooltipTextProps?: CandlestickChartPriceTextProps;\n textStyle?: Animated.AnimateStyle<StyleProp<TextStyle>>;\n};\n\nexport type CandlestickChartCrosshairTooltipContext = {\n position: Animated.SharedValue<'left' \| 'right'>;\n};\n\nexport const CandlestickChartCrosshairTooltipContext =\n React.createContext<CandlestickChartCrosshairTooltipContext>({\n position: { value: 'left' },\n });\n\nexport function CandlestickChartCrosshairTooltip({\n children,\n xGutter = 8,\n yGutter = 8,\n tooltipTextProps,\n textStyle,\n ...props\n}: CandlestickChartCrosshairTooltipProps) {\n const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n const { currentY } = useCandlestickChart();\n const { position } = React.useContext(\n CandlestickChartCrosshairTooltipContext\n );\n\n const elementHeight = useSharedValue(0);\n const elementWidth = useSharedValue(0);\n\n const handleLayout = React.useCallback(\n (event) => {\n elementHeight.value = event.nativeEvent.layout.height;\n elementWidth.value = event.nativeEvent.layout.width;\n },\n [elementHeight, elementWidth]\n );\n\n const topOffset = useDerivedValue(() => {\n let offset = 0;\n if (currentY.value < elementHeight.value / 2 + yGutter) {\n offset = currentY.value - (elementHeight.value / 2 + yGutter);\n } else if (currentY.value + elementHeight.value / 2 > height - yGutter) {\n offset = currentY.value + elementHeight.value / 2 - height + yGutter;\n }\n\n return offset;\n });\n\n const tooltip = useAnimatedStyle(() => ({\n backgroundColor: 'white',\n position: 'absolute',\n display: 'flex',\n padding: 4,\n }));\n const leftTooltip = useAnimatedStyle(() => ({\n left: xGutter,\n top: -(elementHeight.value / 2) - topOffset.value,\n opacity: position.value === 'left' ? 1 : 0,\n }));\n const rightTooltip = useAnimatedStyle(() => ({\n left: width - elementWidth.value - xGutter,\n top: -(elementHeight.value / 2) - topOffset.value,\n opacity: position.value === 'right' ? 1 : 0,\n }));\n\n return (\n <>\n <Animated.View\n onLayout={handleLayout}\n {...props}\n style={[tooltip, leftTooltip, props.style]}\n >\n {children \|\| (\n <CandlestickChartPriceText\n {...tooltipTextProps}\n style={[styles.text, tooltipTextProps?.style, textStyle]}\n />\n )}\n </Animated.View>\n <Animated.View {...props} style={[tooltip, rightTooltip, props.style]}>\n {children \|\| (\n <CandlestickChartPriceText\n {...tooltipTextProps}\n style={[styles.text, tooltipTextProps?.style, textStyle]}\n />\n )}\n </Animated.View>\n </>\n );\n}\n\nconst styles = StyleSheet.create({\n text: {\n fontSize: 14,\n },\n});\n"]}
1	+ {"version":3,"sources":["CrosshairTooltip.tsx"],"names":["CandlestickChartCrosshairTooltipContext","React","createContext","position","value","CandlestickChartCrosshairTooltip","children","xGutter","yGutter","tooltipTextProps","textStyle","props","width","height","useContext","CandlestickChartDimensionsContext","currentY","elementHeight","elementWidth","handleLayout","useCallback","event","nativeEvent","layout","topOffset","offset","tooltip","backgroundColor","display","padding","leftTooltip","left","top","opacity","rightTooltip","style","styles","text","StyleSheet","create","fontSize"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { StyleProp, TextStyle, ViewProps } from 'react-native';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport {\n CandlestickChartPriceText,\n CandlestickChartPriceTextProps,\n} from './PriceText';\n\nexport type CandlestickChartCrosshairTooltipProps = ViewProps & {\n children?: React.ReactNode;\n xGutter?: number;\n yGutter?: number;\n tooltipTextProps?: CandlestickChartPriceTextProps;\n textStyle?: Animated.AnimateStyle<StyleProp<TextStyle>>;\n};\n\nexport type CandlestickChartCrosshairTooltipContext = {\n position: Animated.SharedValue<'left' \| 'right'>;\n};\n\nexport const CandlestickChartCrosshairTooltipContext =\n React.createContext<CandlestickChartCrosshairTooltipContext>({\n position: { value: 'left' },\n });\n\nexport function CandlestickChartCrosshairTooltip({\n children,\n xGutter = 8,\n yGutter = 8,\n tooltipTextProps,\n textStyle,\n ...props\n}: CandlestickChartCrosshairTooltipProps) {\n const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n const { currentY } = useCandlestickChart();\n const { position } = React.useContext(\n CandlestickChartCrosshairTooltipContext\n );\n\n const elementHeight = useSharedValue(0);\n const elementWidth = useSharedValue(0);\n\n const handleLayout = React.useCallback(\n (event) => {\n elementHeight.value = event.nativeEvent.layout.height;\n elementWidth.value = event.nativeEvent.layout.width;\n },\n [elementHeight, elementWidth]\n );\n\n const topOffset = useDerivedValue(() => {\n let offset = 0;\n if (currentY.value < elementHeight.value / 2 + yGutter) {\n offset = currentY.value - (elementHeight.value / 2 + yGutter);\n } else if (currentY.value + elementHeight.value / 2 > height - yGutter) {\n offset = currentY.value + elementHeight.value / 2 - height + yGutter;\n }\n\n return offset;\n }, [currentY, elementHeight, height, yGutter]);\n\n const tooltip = useAnimatedStyle(\n () => ({\n backgroundColor: 'white',\n position: 'absolute',\n display: 'flex',\n padding: 4,\n }),\n []\n );\n const leftTooltip = useAnimatedStyle(\n () => ({\n left: xGutter,\n top: -(elementHeight.value / 2) - topOffset.value,\n opacity: position.value === 'left' ? 1 : 0,\n }),\n [elementHeight, position, topOffset, xGutter]\n );\n const rightTooltip = useAnimatedStyle(\n () => ({\n left: width - elementWidth.value - xGutter,\n top: -(elementHeight.value / 2) - topOffset.value,\n opacity: position.value === 'right' ? 1 : 0,\n }),\n [elementHeight, elementWidth, position, topOffset, width, xGutter]\n );\n\n return (\n <>\n <Animated.View\n onLayout={handleLayout}\n {...props}\n style={[tooltip, leftTooltip, props.style]}\n >\n {children \|\| (\n <CandlestickChartPriceText\n {...tooltipTextProps}\n style={[styles.text, tooltipTextProps?.style, textStyle]}\n />\n )}\n </Animated.View>\n <Animated.View {...props} style={[tooltip, rightTooltip, props.style]}>\n {children \|\| (\n <CandlestickChartPriceText\n {...tooltipTextProps}\n style={[styles.text, tooltipTextProps?.style, textStyle]}\n />\n )}\n </Animated.View>\n </>\n );\n}\n\nconst styles = StyleSheet.create({\n text: {\n fontSize: 14,\n },\n});\n"]}

package/lib/commonjs/charts/candle/useCandleData.js CHANGED Viewed

@@ -27,7 +27,7 @@ function useCandleData() {
     }
     return data[Math.floor(currentX.value / step)];
-  });
+  }, [currentX, data, step]);
   return candle;
 }
 //# sourceMappingURL=useCandleData.js.map

package/lib/commonjs/charts/candle/useCandleData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCandleData.ts"],"names":["useCandleData","currentX","data","step","candle","value","timestamp","low","open","high","close","Math","floor"],"mappings":";;;;;;;AAAA;;AAGA;;AAEO,SAASA,aAAT,GAAkE;AACvE,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAZ;AAAkBC,IAAAA;AAAlB,MAA2B,+CAAjC;AAEA,QAAMC,MAAM,GAAG,4CAAgB,MAAM;AACnC,QAAIH,QAAQ,CAACI,KAAT,KAAmB,CAAC,CAAxB,EAA2B;AACzB,aAAO;AAAEC,QAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,QAAAA,GAAG,EAAE,CAAC,CAAvB;AAA0BC,QAAAA,IAAI,EAAE,CAAC,CAAjC;AAAoCC,QAAAA,IAAI,EAAE,CAAC,CAA3C;AAA8CC,QAAAA,KAAK,EAAE,CAAC;AAAtD,OAAP;AACD;;AACD,WAAOR,IAAI,CAACS,IAAI,CAACC,KAAL,CAAWX,QAAQ,CAACI,KAAT,GAAiBF,IAA5B,CAAD,CAAX;AACD,GALc,CAAf;AAOA,SAAOC,MAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\nimport type { TCandle } from './types';\n\nimport { useCandlestickChart } from './useCandlestickChart';\n\nexport function useCandleData(): Readonly<Animated.SharedValue<TCandle>> {\n const { currentX, data, step } = useCandlestickChart();\n\n const candle = useDerivedValue(() => {\n if (currentX.value === -1) {\n return { timestamp: -1, low: -1, open: -1, high: -1, close: -1 };\n }\n return data[Math.floor(currentX.value / step)];\n });\n\n return candle;\n}\n"]}
1	+ {"version":3,"sources":["useCandleData.ts"],"names":["useCandleData","currentX","data","step","candle","value","timestamp","low","open","high","close","Math","floor"],"mappings":";;;;;;;AAAA;;AAGA;;AAEO,SAASA,aAAT,GAAkE;AACvE,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAZ;AAAkBC,IAAAA;AAAlB,MAA2B,+CAAjC;AAEA,QAAMC,MAAM,GAAG,4CAAgB,MAAM;AACnC,QAAIH,QAAQ,CAACI,KAAT,KAAmB,CAAC,CAAxB,EAA2B;AACzB,aAAO;AAAEC,QAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,QAAAA,GAAG,EAAE,CAAC,CAAvB;AAA0BC,QAAAA,IAAI,EAAE,CAAC,CAAjC;AAAoCC,QAAAA,IAAI,EAAE,CAAC,CAA3C;AAA8CC,QAAAA,KAAK,EAAE,CAAC;AAAtD,OAAP;AACD;;AACD,WAAOR,IAAI,CAACS,IAAI,CAACC,KAAL,CAAWX,QAAQ,CAACI,KAAT,GAAiBF,IAA5B,CAAD,CAAX;AACD,GALc,EAKZ,CAACF,QAAD,EAAWC,IAAX,EAAiBC,IAAjB,CALY,CAAf;AAOA,SAAOC,MAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\nimport type { TCandle } from './types';\n\nimport { useCandlestickChart } from './useCandlestickChart';\n\nexport function useCandleData(): Readonly<Animated.SharedValue<TCandle>> {\n const { currentX, data, step } = useCandlestickChart();\n\n const candle = useDerivedValue(() => {\n if (currentX.value === -1) {\n return { timestamp: -1, low: -1, open: -1, high: -1, close: -1 };\n }\n return data[Math.floor(currentX.value / step)];\n }, [currentX, data, step]);\n\n return candle;\n}\n"]}

package/lib/commonjs/charts/candle/useDatetime.js CHANGED Viewed

@@ -23,7 +23,7 @@ function useCandlestickChartDatetime({
   const timestampString = (0, _reactNativeReanimated.useDerivedValue)(() => {
     if (timestamp.value === -1) return '';
     return timestamp.value.toString();
-  });
+  }, [timestamp]);
   const formatted = (0, _reactNativeReanimated.useDerivedValue)(() => {
     if (timestamp.value === -1) return '';
     const formattedDatetime = (0, _utils.formatDatetime)({
@@ -35,7 +35,7 @@ function useCandlestickChartDatetime({
       value: timestamp.value,
       formatted: formattedDatetime
     }) : formattedDatetime;
-  });
+  }, [timestamp, locale, options, format]);
   return {
     value: timestampString,
     formatted

package/lib/commonjs/charts/candle/useDatetime.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDatetime.ts"],"names":["useCandlestickChartDatetime","format","locale","options","candle","timestamp","value","timestampString","toString","formatted","formattedDatetime"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEO,SAASA,2BAAT,CAAqC;AAC1CC,EAAAA,MAD0C;AAE1CC,EAAAA,MAF0C;AAG1CC,EAAAA;AAH0C,IAQxC,EARG,EAWL;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,WAAOD,MAAM,CAACE,KAAP,CAAaD,SAApB;AACD,GAFiB,CAAlB;AAIA,QAAME,eAAe,GAAG,4CAAgB,MAAM;AAC5C,QAAIF,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,WAAOD,SAAS,CAACC,KAAV,CAAgBE,QAAhB,EAAP;AACD,GAHuB,CAAxB;AAKA,~~QAAMC~~,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIJ,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,UAAMI,iBAAiB,GAAG,2BAAe;AACvCJ,MAAAA,KAAK,EAAED,SAAS,CAACC,KADsB;AAEvCJ,MAAAA,MAFuC;AAGvCC,MAAAA;AAHuC,KAAf,CAA1B;AAKA,WAAOF,MAAM,GACTA,MAAM,CAAC;AAAEK,MAAAA,KAAK,EAAED,SAAS,CAACC,KAAnB;AAA0BG,MAAAA,SAAS,EAAEC;AAArC,KAAD,CADG,GAETA,iBAFJ;AAGD,GAViB,CAAlB;AAYA,SAAO;~~AAAEJ~~,IAAAA,KAAK,EAAEC,eAAT;AAA0BE,IAAAA;AAA1B,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatDatetime } from '../../utils';\nimport type { TFormatterFn } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartDatetime({\n format,\n locale,\n options,\n}: {\n format?: TFormatterFn<number>;\n locale?: string;\n options?: { [key: string]: string };\n} = {}): {\n value: Readonly<Animated.SharedValue<string>>;\n formatted: Readonly<Animated.SharedValue<string>>;\n} {\n const candle = useCandleData();\n\n const timestamp = useDerivedValue(() => {\n return candle.value.timestamp;\n });\n\n const timestampString = useDerivedValue(() => {\n if (timestamp.value === -1) return '';\n return timestamp.value.toString();\n });\n\n const formatted = useDerivedValue(() => {\n if (timestamp.value === -1) return '';\n const formattedDatetime = formatDatetime({\n value: timestamp.value,\n locale,\n options,\n });\n return format\n ? format({ value: timestamp.value, formatted: formattedDatetime })\n : formattedDatetime;\n });\n\n return { value: timestampString, formatted };\n}\n"]}
1	+ {"version":3,"sources":["useDatetime.ts"],"names":["useCandlestickChartDatetime","format","locale","options","candle","timestamp","value","timestampString","toString","formatted","formattedDatetime"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEO,SAASA,2BAAT,CAAqC;AAC1CC,EAAAA,MAD0C;AAE1CC,EAAAA,MAF0C;AAG1CC,EAAAA;AAH0C,IAQxC,EARG,EAWL;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,WAAOD,MAAM,CAACE,KAAP,CAAaD,SAApB;AACD,GAFiB,CAAlB;AAIA,QAAME,eAAe,GAAG,4CAAgB,MAAM;AAC5C,QAAIF,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,WAAOD,SAAS,CAACC,KAAV,CAAgBE,QAAhB,EAAP;AACD,GAHuB,EAGrB,CAACH,SAAD,CAHqB,CAAxB;AAKA,QAAMI,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIJ,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,UAAMI,iBAAiB,GAAG,2BAAe;AACvCJ,MAAAA,KAAK,EAAED,SAAS,CAACC,KADsB;AAEvCJ,MAAAA,MAFuC;AAGvCC,MAAAA;AAHuC,KAAf,CAA1B;AAKA,WAAOF,MAAM,GACTA,MAAM,CAAC;AAAEK,MAAAA,KAAK,EAAED,SAAS,CAACC,KAAnB;AAA0BG,MAAAA,SAAS,EAAEC;AAArC,KAAD,CADG,GAETA,iBAFJ;AAGD,GAViB,EAUf,CAACL,SAAD,EAAYH,MAAZ,EAAoBC,OAApB,EAA6BF,MAA7B,CAVe,CAAlB;AAYA,SAAO;AAAEK,IAAAA,KAAK,EAAEC,eAAT;AAA0BE,IAAAA;AAA1B,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatDatetime } from '../../utils';\nimport type { TFormatterFn } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartDatetime({\n format,\n locale,\n options,\n}: {\n format?: TFormatterFn<number>;\n locale?: string;\n options?: { [key: string]: string };\n} = {}): {\n value: Readonly<Animated.SharedValue<string>>;\n formatted: Readonly<Animated.SharedValue<string>>;\n} {\n const candle = useCandleData();\n\n const timestamp = useDerivedValue(() => {\n return candle.value.timestamp;\n });\n\n const timestampString = useDerivedValue(() => {\n if (timestamp.value === -1) return '';\n return timestamp.value.toString();\n }, [timestamp]);\n\n const formatted = useDerivedValue(() => {\n if (timestamp.value === -1) return '';\n const formattedDatetime = formatDatetime({\n value: timestamp.value,\n locale,\n options,\n });\n return format\n ? format({ value: timestamp.value, formatted: formattedDatetime })\n : formattedDatetime;\n }, [timestamp, locale, options, format]);\n\n return { value: timestampString, formatted };\n}\n"]}

package/lib/commonjs/charts/candle/usePrice.js CHANGED Viewed

@@ -41,7 +41,7 @@ function useCandlestickChartPrice({
     if (price === -1) return '';
     return price.toFixed(precision).toString();
-  });
+  }, [currentY, domain, height, candle, type, precision]);
   const formatted = (0, _reactNativeReanimated.useDerivedValue)(() => {
     if (!float.value) return '';
     const formattedPrice = (0, _utils.formatPrice)({
@@ -51,7 +51,7 @@ function useCandlestickChartPrice({
       value: float.value,
       formatted: formattedPrice
     }) : formattedPrice;
-  });
+  }, [float, format]);
   return {
     value: float,
     formatted

package/lib/commonjs/charts/candle/usePrice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["usePrice.ts"],"names":["useCandlestickChartPrice","format","precision","type","currentY","domain","height","candle","float","price","y","value","Math","min","max","maxHeight","toFixed","toString","formatted","formattedPrice"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;AAEO,SAASA,wBAAT,CAAkC;AACvCC,EAAAA,MADuC;AAEvCC,EAAAA,SAAS,GAAG,CAF2B;AAGvCC,EAAAA,IAAI,GAAG;AAHgC,IAQrC,EARG,EAWL;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA;AAApB,MAA+B,+CAArC;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,KAAK,GAAG,4CAAgB,MAAM;AAClC,QAAIC,KAAK,GAAG,CAAZ;;AACA,QAAIN,IAAI,KAAK,WAAb,EAA0B;AACxBM,MAAAA,KAAK,GAAG,sBAAS;AACfC,QAAAA,CAAC,EAAEN,QAAQ,CAACO,KADG;AAEfN,QAAAA,MAAM,EAAE,CAACO,IAAI,CAACC,GAAL,CAAS,GAAGR,MAAZ,CAAD,EAAsBO,IAAI,CAACE,GAAL,CAAS,GAAGT,MAAZ,CAAtB,CAFO;AAGfU,QAAAA,SAAS,EAAET;AAHI,OAAT,CAAR;AAKD,KAND,MAMO;AACLG,MAAAA,KAAK,GAAGF,MAAM,CAACI,KAAP,CAAaR,IAAb,CAAR;AACD;;AACD,QAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAO,EAAP;AAClB,WAAOA,KAAK,CAACO,OAAN,CAAcd,SAAd,EAAyBe,QAAzB,EAAP;AACD,GAba,CAAd;AAcA,~~QAAMC~~,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAI,CAACV,KAAK,CAACG,KAAX,EAAkB,OAAO,EAAP;AAClB,UAAMQ,cAAc,GAAG,wBAAY;AAAER,MAAAA,KAAK,EAAEH,KAAK,CAACG;AAAf,KAAZ,CAAvB;AACA,WAAOV,MAAM,GACTA,MAAM,CAAC;AAAEU,MAAAA,KAAK,EAAEH,KAAK,CAACG,KAAf;AAAsBO,MAAAA,SAAS,EAAEC;AAAjC,KAAD,CADG,GAETA,cAFJ;AAGD,GANiB,CAAlB;AAQA,SAAO;~~AAAER~~,IAAAA,KAAK,EAAEH,KAAT;AAAgBU,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { getPrice } from './utils';\nimport type { TFormatterFn, TPriceType } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartPrice({\n format,\n precision = 2,\n type = 'crosshair',\n}: {\n format?: TFormatterFn<string>;\n precision?: number;\n type?: TPriceType;\n} = {}): {\n value: Readonly<Animated.SharedValue<string>>;\n formatted: Readonly<Animated.SharedValue<string>>;\n} {\n const { currentY, domain, height } = useCandlestickChart();\n const candle = useCandleData();\n\n const float = useDerivedValue(() => {\n let price = 0;\n if (type === 'crosshair') {\n price = getPrice({\n y: currentY.value,\n domain: [Math.min(...domain), Math.max(...domain)],\n maxHeight: height,\n });\n } else {\n price = candle.value[type];\n }\n if (price === -1) return '';\n return price.toFixed(precision).toString();\n });\n const formatted = useDerivedValue(() => {\n if (!float.value) return '';\n const formattedPrice = formatPrice({ value: float.value });\n return format\n ? format({ value: float.value, formatted: formattedPrice })\n : formattedPrice;\n });\n\n return { value: float, formatted };\n}\n"]}
1	+ {"version":3,"sources":["usePrice.ts"],"names":["useCandlestickChartPrice","format","precision","type","currentY","domain","height","candle","float","price","y","value","Math","min","max","maxHeight","toFixed","toString","formatted","formattedPrice"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;AAEO,SAASA,wBAAT,CAAkC;AACvCC,EAAAA,MADuC;AAEvCC,EAAAA,SAAS,GAAG,CAF2B;AAGvCC,EAAAA,IAAI,GAAG;AAHgC,IAQrC,EARG,EAWL;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA;AAApB,MAA+B,+CAArC;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,KAAK,GAAG,4CAAgB,MAAM;AAClC,QAAIC,KAAK,GAAG,CAAZ;;AACA,QAAIN,IAAI,KAAK,WAAb,EAA0B;AACxBM,MAAAA,KAAK,GAAG,sBAAS;AACfC,QAAAA,CAAC,EAAEN,QAAQ,CAACO,KADG;AAEfN,QAAAA,MAAM,EAAE,CAACO,IAAI,CAACC,GAAL,CAAS,GAAGR,MAAZ,CAAD,EAAsBO,IAAI,CAACE,GAAL,CAAS,GAAGT,MAAZ,CAAtB,CAFO;AAGfU,QAAAA,SAAS,EAAET;AAHI,OAAT,CAAR;AAKD,KAND,MAMO;AACLG,MAAAA,KAAK,GAAGF,MAAM,CAACI,KAAP,CAAaR,IAAb,CAAR;AACD;;AACD,QAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAO,EAAP;AAClB,WAAOA,KAAK,CAACO,OAAN,CAAcd,SAAd,EAAyBe,QAAzB,EAAP;AACD,GAba,EAaX,CAACb,QAAD,EAAWC,MAAX,EAAmBC,MAAnB,EAA2BC,MAA3B,EAAmCJ,IAAnC,EAAyCD,SAAzC,CAbW,CAAd;AAcA,QAAMgB,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAI,CAACV,KAAK,CAACG,KAAX,EAAkB,OAAO,EAAP;AAClB,UAAMQ,cAAc,GAAG,wBAAY;AAAER,MAAAA,KAAK,EAAEH,KAAK,CAACG;AAAf,KAAZ,CAAvB;AACA,WAAOV,MAAM,GACTA,MAAM,CAAC;AAAEU,MAAAA,KAAK,EAAEH,KAAK,CAACG,KAAf;AAAsBO,MAAAA,SAAS,EAAEC;AAAjC,KAAD,CADG,GAETA,cAFJ;AAGD,GANiB,EAMf,CAACX,KAAD,EAAQP,MAAR,CANe,CAAlB;AAQA,SAAO;AAAEU,IAAAA,KAAK,EAAEH,KAAT;AAAgBU,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { getPrice } from './utils';\nimport type { TFormatterFn, TPriceType } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartPrice({\n format,\n precision = 2,\n type = 'crosshair',\n}: {\n format?: TFormatterFn<string>;\n precision?: number;\n type?: TPriceType;\n} = {}): {\n value: Readonly<Animated.SharedValue<string>>;\n formatted: Readonly<Animated.SharedValue<string>>;\n} {\n const { currentY, domain, height } = useCandlestickChart();\n const candle = useCandleData();\n\n const float = useDerivedValue(() => {\n let price = 0;\n if (type === 'crosshair') {\n price = getPrice({\n y: currentY.value,\n domain: [Math.min(...domain), Math.max(...domain)],\n maxHeight: height,\n });\n } else {\n price = candle.value[type];\n }\n if (price === -1) return '';\n return price.toFixed(precision).toString();\n }, [currentY, domain, height, candle, type, precision]);\n const formatted = useDerivedValue(() => {\n if (!float.value) return '';\n const formattedPrice = formatPrice({ value: float.value });\n return format\n ? format({ value: float.value, formatted: formattedPrice })\n : formattedPrice;\n }, [float, format]);\n\n return { value: float, formatted };\n}\n"]}

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

@@ -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,
@@ -53,7 +57,8 @@ function LineChart({
 }) {
   const {
     yDomain,
-    xLength
+    xLength,
+    xDomain
   } = React.useContext(_Context.LineChartContext);
   const {
     data
@@ -77,12 +82,13 @@ function LineChart({
         height,
         gutter: yGutter,
         shape,
-        yDomain
+        yDomain,
+        xDomain
       });
     }
     return '';
-  }, [data, pathWidth, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
   const area = React.useMemo(() => {
     if (data && data.length > 0) {
       return (0, _utils.getArea)({
@@ -97,15 +103,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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEO,MAAMA,0BAA0B,gBAAGC,KAAK,CAACC,aAAN,CAAoB;AAC5DC,EAAAA,KAAK,EAAE,CADqD;AAE5DC,EAAAA,MAAM,EAAE,CAFoD;AAG5DC,EAAAA,~~IAAI~~,EAAE,~~EAHsD~~;AAI5DC,EAAAA,~~IAAI~~,EAAE,~~EAJsD~~;AAK5DC,EAAAA,KAAK,EAAEC,OAAO,CAACC,~~UAL6C~~;~~AAM5DC~~,EAAAA,MAAM,EAAE,~~CANoD~~;~~AAO5DC~~,EAAAA,SAAS,EAAE;~~AAPiD~~,CAApB,CAAnC;;;~~AAuBP~~,MAAM;~~AAAER~~,EAAAA,KAAK,~~EAAES~~;AAAT,IAAyBC,wBAAWC,GAAX,CAAe,QAAf,CAA/B;;AAEAC,SAAS,CAACC,WAAV,GAAwB,WAAxB;;AAEO,SAASD,SAAT,CAAmB;AACxBE,EAAAA,QADwB;AAExBC,EAAAA,OAAO,GAAG,EAFc;~~AAGxBf~~,EAAAA,KAAK,~~GAAGS~~,WAHgB;~~AAIxBR~~,EAAAA,MAAM,~~GAAGQ~~,WAJe;AAKxBL,EAAAA,KAAK,GAAGC,OAAO,CAACC,UALQ;AAMxBU,EAAAA,EANwB;AAOxBC,EAAAA,QAPwB;AAQxB,KAAGC;AARqB,CAAnB,EASY;AACjB,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;~~AAAX~~,~~MAAuBtB~~,KAAK,~~CAACuB~~,UAAN,CAAiBC,yBAAjB,~~CAA7B~~;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAW,4BAAiB;~~AAChCP~~,IAAAA;AADgC,GAAjB,CAAjB;AAIA,QAAMR,SAAS,~~GAAGV~~,KAAK,~~CAAC0B~~,OAAN,CAAc,MAAM;AACpC,QAAIC,YAAY,~~GAAGzB~~,KAAnB;;AACA,~~QAAIoB~~,OAAO,~~GAAGG~~,IAAI,CAACG,MAAnB,EAA2B;AACzBD,MAAAA,YAAY,~~GAAIzB~~,KAAK,~~GAAGuB~~,IAAI,CAACG,MAAd,~~GAAwBN~~,OAAvC;AACD;;AACD,~~WAAOK~~,YAAP;AACD,GANiB,EAMf,CAACF,IAAI,CAACG,MAAN,~~EAAc1B~~,KAAd,~~EAAqBoB~~,OAArB,CANe,CAAlB;AAQA,QAAMlB,IAAI,~~GAAGJ~~,KAAK,~~CAAC0B~~,OAAN,CAAc,MAAM;AAC/B,QAAID,IAAI,IAAIA,IAAI,CAACG,MAAL,GAAc,CAA1B,EAA6B;AAC3B,aAAO,oBAAQ;AACbH,QAAAA,IADa;~~AAEbvB~~,QAAAA,KAAK,~~EAAEQ~~,SAFM;~~AAGbP~~,QAAAA,MAHa;~~AAIbM~~,QAAAA,MAAM,EAAEQ,OAJK;AAKbX,QAAAA,KALa;AAMbe,QAAAA;~~AANa~~,OAAR,CAAP;~~AAQD~~;;AACD,WAAO,EAAP;AACD,~~GAZY~~,~~EAYV~~,~~CAACI~~,IAAD,~~EAAOf~~,SAAP,~~EAAkBP~~,MAAlB,~~EAA0Bc~~,OAA1B,EAAmCX,KAAnC,EAA0Ce,OAA1C,~~CAZU~~,CAAb;~~AAcA~~,~~QAAMhB~~,IAAI,~~GAAGL~~,KAAK,~~CAAC0B~~,OAAN,CAAc,MAAM;AAC/B,QAAID,IAAI,IAAIA,IAAI,CAACG,MAAL,GAAc,CAA1B,EAA6B;AAC3B,aAAO,oBAAQ;AACbH,QAAAA,IADa;~~AAEbvB~~,QAAAA,KAAK,~~EAAEQ~~,SAFM;~~AAGbP~~,QAAAA,MAHa;~~AAIbM~~,QAAAA,MAAM,EAAEQ,OAJK;AAKbX,QAAAA,KALa;AAMbe,QAAAA;AANa,OAAR,CAAP;AAQD;;AACD,WAAO,EAAP;AACD,GAZY,EAYV,~~CAACI~~,IAAD,~~EAAOf~~,SAAP,~~EAAkBP~~,MAAlB,~~EAA0Bc~~,OAA1B,EAAmCX,KAAnC,EAA0Ce,OAA1C,CAZU,CAAb;AAcA,~~QAAMQ~~,YAAY,~~GAAG7B~~,KAAK,~~CAAC0B~~,OAAN,CACnB,OAAO;~~AACLjB~~,IAAAA,MAAM,EAAEQ,OADH;~~AAELZ~~,IAAAA,~~IAFK~~;AAGLD,IAAAA,~~IAHK~~;~~AAILF~~,IAAAA,~~KAJK~~;~~AAKLC~~,IAAAA,~~MALK~~;~~AAMLO~~,IAAAA,~~SANK~~;~~AAOLJ~~,IAAAA;~~AAPK~~,GAAP,CADmB,~~EAUnB~~,~~CAACW~~,~~OAAD~~,~~EAAUZ~~,~~IAAV~~,~~EAAgBD~~,~~IAAhB~~,~~EAAsBF~~,~~KAAtB~~,~~EAA6BC~~,~~MAA7B~~,~~EAAqCO~~,~~SAArC~~,~~EAAgDJ~~,~~KAAhD~~,~~CAVmB~~,CAArB;~~AAaA~~,sBACE,oBAAC,yBAAD;AAAqB,IAAA,EAAE,EAAEY;AAAzB,kBACE,oBAAC,0BAAD,CAA4B,QAA5B;AAAqC,IAAA,KAAK,~~EAAEW~~;AAA5C,kBACE,oBAAC,iBAAD,~~eAAUT~~,KAAV;AAAiB,IAAA,KAAK,EAAE,CAACD,QAAQ,~~IAAIW~~,MAAM,~~CAACX~~,QAApB,EAA8BC,KAAK,~~CAACW~~,KAApC;AAAxB,~~MACGf~~,QADH,CADF,CADF,CADF;AASD;;AAED,~~MAAMc~~,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/Bd,EAAAA,QAAQ,EAAE;~~AACRe~~,IAAAA,QAAQ,EAAE;AADF;AADqB,CAAlB,CAAf","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"]}
1	+ {"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","xDomain","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, xDomain } = 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 xDomain,\n });\n }\n return '';\n }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);\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 CHANGED Viewed

@@ -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({
@@ -93,7 +88,7 @@ function LineChartPathWrapper({
         hasMountedAnimation.value = true;
       })
     };
-  });
+  }, [animateOnMount, animationDuration, animationProps, currentX, hasMountedAnimation, isActive, isMounted, mountAnimationDuration, mountAnimationProps, pathWidth, widthOffset]);
   const viewSize = React.useMemo(() => ({
     width,
     height
@@ -121,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,
@@ -136,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 CHANGED Viewed

	@@ -1 +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;;AAMA;;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,~~QAAIY~~,QAAQ,GACVF,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,~~QAAIgB~~,QAAQ,CAACI,KAAb,EAAoB;AAClBI,MAAAA,QAAQ,GAAG,CAAX;AACD;;AAED,WAAO;~~AACLrB~~,MAAAA,KAAK,EAAE,~~uCACLa~~,QAAQ,CAACI,KAAT,GACI;AACA;AACAM,MAAAA,IAAI,CAACC,GAAL,CAASZ,QAAQ,CAACK,KAAlB,EAAyB,CAAzB,CAHJ,GAIIG,aAAa,~~GAAGlB~~,WALf,~~EAMLuB~~,MAAM,CAACC,MAAP,CAAc;AAAEL,QAAAA;AAAF,OAAd,EAA4BC,KAA5B,CANK,EAOL,MAAM;AACJP,QAAAA,mBAAmB,CAACE,KAApB,GAA4B,IAA5B;AACD,OATI;AADF,KAAP;AAaD,GA/BgB,CAAjB;~~AAiCA~~,~~QAAMU~~,QAAQ,~~GAAGtC~~,KAAK,~~CAACuC~~,OAAN,CAAc,OAAO;~~AAAE5B~~,IAAAA,KAAF;AAASQ,IAAAA;AAAT,GAAP,CAAd,EAAyC,CAACR,KAAD,EAAQQ,MAAR,CAAzC,CAAjB,~~CAhD4B~~,~~CAkD5B~~;;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,~~GAhE2B~~,~~CAkE5B~~;;;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 WithTimingConfig,\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?: 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"]}
1	+ {"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 animateOnMount,\n animationDuration,\n animationProps,\n currentX,\n hasMountedAnimation,\n isActive,\n isMounted,\n mountAnimationDuration,\n mountAnimationProps,\n pathWidth,\n widthOffset,\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/Context.js CHANGED Viewed

@@ -33,6 +33,7 @@ const LineChartContext = /*#__PURE__*/React.createContext({
     min: 0,
     max: 0
   },
+  xDomain: undefined,
   xLength: 0
 });
 exports.LineChartContext = LineChartContext;
@@ -43,7 +44,8 @@ function LineChartProvider({
   data = [],
   yRange,
   onCurrentIndexChange,
-  xLength
+  xLength,
+  xDomain
 }) {
   const currentX = (0, _reactNativeReanimated.useSharedValue)(-1);
   const currentIndex = (0, _reactNativeReanimated.useSharedValue)(-1);
@@ -64,14 +66,15 @@ function LineChartProvider({
         min: (_yRange$min = yRange === null || yRange === void 0 ? void 0 : yRange.min) !== null && _yRange$min !== void 0 ? _yRange$min : Math.min(...values),
         max: (_yRange$max = yRange === null || yRange === void 0 ? void 0 : yRange.max) !== null && _yRange$max !== void 0 ? _yRange$max : Math.max(...values)
       },
+      xDomain,
       xLength: xLength !== null && xLength !== void 0 ? xLength : (Array.isArray(data) ? data : Object.values(data)[0]).length
     };
-  }, [currentIndex, currentX, data, domain, isActive, yRange === null || yRange === void 0 ? void 0 : yRange.max, yRange === null || yRange === void 0 ? void 0 : yRange.min, xLength]);
+  }, [currentIndex, currentX, data, domain, isActive, yRange === null || yRange === void 0 ? void 0 : yRange.max, yRange === null || yRange === void 0 ? void 0 : yRange.min, xLength, xDomain]);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => currentIndex.value, (x, prevX) => {
     if (x !== -1 && x !== prevX && onCurrentIndexChange) {
       (0, _reactNativeReanimated.runOnJS)(onCurrentIndexChange)(x);
     }
-  });
+  }, [currentIndex]);
   return /*#__PURE__*/React.createElement(_Data.LineChartDataProvider, {
     data: data
   }, /*#__PURE__*/React.createElement(LineChartContext.Provider, {

package/lib/commonjs/charts/line/Context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Context.tsx"],"names":["LineChartContext","React","createContext","currentX","value","currentIndex","domain","isActive","yDomain","min","max","xLength","LineChartProvider","displayName","children","data","yRange","onCurrentIndexChange","useMemo","Array","isArray","Object","values","contextValue","map","Math","length","x","prevX"],"mappings":";;;;;;;;AAAA;;AACA;;AAMA;;AAGA;;;;;;AAEO,MAAMA,gBAAgB,gBAAGC,KAAK,CAACC,aAAN,CAAuC;AACrEC,EAAAA,QAAQ,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAC;AAAV,GAD2D;AAErEC,EAAAA,YAAY,EAAE;AAAED,IAAAA,KAAK,EAAE,CAAC;AAAV,GAFuD;AAGrEE,EAAAA,MAAM,EAAE,CAAC,CAAD,EAAI,CAAJ,CAH6D;AAIrEC,EAAAA,QAAQ,EAAE;AAAEH,IAAAA,KAAK,EAAE;AAAT,GAJ2D;AAKrEI,EAAAA,OAAO,EAAE;AACPC,IAAAA,GAAG,EAAE,CADE;AAEPC,IAAAA,GAAG,EAAE;AAFE,GAL4D;AASrEC,EAAAA,OAAO,EAAE;~~AAT4D~~,CAAvC,CAAzB;;~~AAoBPC~~,iBAAiB,CAACC,WAAlB,GAAgC,mBAAhC;;AAEO,SAASD,iBAAT,CAA2B;AAChCE,EAAAA,QADgC;AAEhCC,EAAAA,IAAI,GAAG,EAFyB;AAGhCC,EAAAA,MAHgC;AAIhCC,EAAAA,oBAJgC;AAKhCN,EAAAA;~~AALgC~~,CAA3B,~~EAMoB~~;AACzB,QAAMR,QAAQ,GAAG,2CAAe,CAAC,CAAhB,CAAjB;AACA,QAAME,YAAY,GAAG,2CAAe,CAAC,CAAhB,CAArB;AACA,QAAME,QAAQ,GAAG,2CAAe,KAAf,CAAjB;AAEA,QAAMD,MAAM,GAAGL,KAAK,~~CAACiB~~,OAAN,CACb,MAAM,sBAAUC,KAAK,CAACC,OAAN,CAAcL,IAAd,IAAsBA,IAAtB,GAA6BM,MAAM,CAACC,MAAP,CAAcP,IAAd,EAAoB,CAApB,CAAvC,CADO,EAEb,CAACA,IAAD,CAFa,CAAf;AAKA,QAAMQ,YAAY,~~GAAGtB~~,KAAK,~~CAACiB~~,OAAN,CAAiC,MAAM;AAAA;;AAC1D,UAAMI,MAAM,GAAG,qCAAyBP,IAAzB,EAA+BS,GAA/B,CAAmC,CAAC;~~AAAEpB~~,MAAAA;AAAF,KAAD,KAAeA,KAAlD,CAAf;AAEA,WAAO;AACLD,MAAAA,QADK;AAELE,MAAAA,YAFK;AAGLE,MAAAA,QAHK;AAILD,MAAAA,MAJK;AAKLE,MAAAA,OAAO,EAAE;AACPC,QAAAA,GAAG,~~iBAAEO~~,MAAF,aAAEA,MAAF,uBAAEA,MAAM,~~CAAEP~~,GAAV,~~qDAAiBgB~~,IAAI,~~CAAChB~~,GAAL,CAAS,~~GAAGa~~,MAAZ,CADb;~~AAEPZ~~,QAAAA,GAAG,~~iBAAEM~~,MAAF,aAAEA,MAAF,uBAAEA,MAAM,~~CAAEN~~,GAAV,~~qDAAiBe~~,IAAI,~~CAACf~~,GAAL,CAAS,~~GAAGY~~,MAAZ;AAFb,OALJ;~~AASLX~~,MAAAA,OAAO,EACLA,OADK,aACLA,OADK,cACLA,OADK,GACM,CAACQ,KAAK,CAACC,OAAN,CAAcL,IAAd,IAAsBA,IAAtB,GAA6BM,MAAM,CAACC,MAAP,CAAcP,IAAd,EAAoB,CAApB,CAA9B,EAAsDW;~~AAV9D~~,KAAP;~~AAYD~~,~~GAfoB~~,~~EAelB~~,~~CACDrB~~,YADC,EAEDF,QAFC,~~EAGDY~~,IAHC,~~EAIDT~~,MAJC,EAKDC,QALC,~~EAMDS~~,MANC,aAMDA,MANC,uBAMDA,MAAM,~~CAAEN~~,GANP,~~EAODM~~,MAPC,aAODA,MAPC,uBAODA,MAAM,~~CAAEP~~,GAPP,~~EAQDE~~,OARC,~~CAfkB~~,CAArB;~~AA0BA~~,kDACE,MAAMN,YAAY,CAACD,KADrB,EAEE,~~CAACuB~~,CAAD,EAAIC,KAAJ,KAAc;AACZ,QAAID,CAAC,KAAK,CAAC,CAAP,IAAYA,CAAC,KAAKC,KAAlB,IAA2BX,oBAA/B,EAAqD;AACnD,0CAAQA,oBAAR,EAA8BU,CAA9B;AACD;AACF,GANH;~~AASA~~,sBACE,oBAAC,2BAAD;AAAuB,IAAA,IAAI,~~EAAEZ~~;AAA7B,kBACE,oBAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAEQ;AAAlC,KACGT,QADH,CADF,CADF;AAOD","sourcesContent":["import * as React from 'react';\nimport {\n runOnJS,\n useAnimatedReaction,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { TLineChartDataProp } from './types';\nimport { LineChartDataProvider } from './Data';\n\nimport type { TLineChartContext, YRangeProp } from './types';\nimport { getDomain, lineChartDataPropToArray } from './utils';\n\nexport const LineChartContext = React.createContext<TLineChartContext>({\n currentX: { value: -1 },\n currentIndex: { value: -1 },\n domain: [0, 0],\n isActive: { value: false },\n yDomain: {\n min: 0,\n max: 0,\n },\n xLength: 0,\n});\n\ntype LineChartProviderProps = {\n children: React.ReactNode;\n data: TLineChartDataProp;\n yRange?: YRangeProp;\n onCurrentIndexChange?: (x: number) => void;\n xLength?: number;\n};\n\nLineChartProvider.displayName = 'LineChartProvider';\n\nexport function LineChartProvider({\n children,\n data = [],\n yRange,\n onCurrentIndexChange,\n xLength,\n}: LineChartProviderProps) {\n const currentX = useSharedValue(-1);\n const currentIndex = useSharedValue(-1);\n const isActive = useSharedValue(false);\n\n const domain = React.useMemo(\n () => getDomain(Array.isArray(data) ? data : Object.values(data)[0]),\n [data]\n );\n\n const contextValue = React.useMemo<TLineChartContext>(() => {\n const values = lineChartDataPropToArray(data).map(({ value }) => value);\n\n return {\n currentX,\n currentIndex,\n isActive,\n domain,\n yDomain: {\n min: yRange?.min ?? Math.min(...values),\n max: yRange?.max ?? Math.max(...values),\n },\n xLength:\n xLength ?? (Array.isArray(data) ? data : Object.values(data)[0]).length,\n };\n }, [\n currentIndex,\n currentX,\n data,\n domain,\n isActive,\n yRange?.max,\n yRange?.min,\n xLength,\n ]);\n\n useAnimatedReaction(\n () => currentIndex.value,\n (x, prevX) => {\n if (x !== -1 && x !== prevX && onCurrentIndexChange) {\n runOnJS(onCurrentIndexChange)(x);\n }\n }\n );\n\n return (\n <LineChartDataProvider data={data}>\n <LineChartContext.Provider value={contextValue}>\n {children}\n </LineChartContext.Provider>\n </LineChartDataProvider>\n );\n}\n"]}
1	+ {"version":3,"sources":["Context.tsx"],"names":["LineChartContext","React","createContext","currentX","value","currentIndex","domain","isActive","yDomain","min","max","xDomain","undefined","xLength","LineChartProvider","displayName","children","data","yRange","onCurrentIndexChange","useMemo","Array","isArray","Object","values","contextValue","map","Math","length","x","prevX"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n runOnJS,\n useAnimatedReaction,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { TLineChartDataProp } from './types';\nimport { LineChartDataProvider } from './Data';\n\nimport type { TLineChartContext, YRangeProp } from './types';\nimport { getDomain, lineChartDataPropToArray } from './utils';\n\nexport const LineChartContext = React.createContext<TLineChartContext>({\n currentX: { value: -1 },\n currentIndex: { value: -1 },\n domain: [0, 0],\n isActive: { value: false },\n yDomain: {\n min: 0,\n max: 0,\n },\n xDomain: undefined,\n xLength: 0,\n});\n\ntype LineChartProviderProps = {\n children: React.ReactNode;\n data: TLineChartDataProp;\n yRange?: YRangeProp;\n onCurrentIndexChange?: (x: number) => void;\n xLength?: number;\n xDomain?: [number, number];\n};\n\nLineChartProvider.displayName = 'LineChartProvider';\n\nexport function LineChartProvider({\n children,\n data = [],\n yRange,\n onCurrentIndexChange,\n xLength,\n xDomain,\n}: LineChartProviderProps) {\n const currentX = useSharedValue(-1);\n const currentIndex = useSharedValue(-1);\n const isActive = useSharedValue(false);\n\n const domain = React.useMemo(\n () => getDomain(Array.isArray(data) ? data : Object.values(data)[0]),\n [data]\n );\n\n const contextValue = React.useMemo<TLineChartContext>(() => {\n const values = lineChartDataPropToArray(data).map(({ value }) => value);\n\n return {\n currentX,\n currentIndex,\n isActive,\n domain,\n yDomain: {\n min: yRange?.min ?? Math.min(...values),\n max: yRange?.max ?? Math.max(...values),\n },\n xDomain,\n xLength:\n xLength ?? (Array.isArray(data) ? data : Object.values(data)[0]).length,\n };\n }, [\n currentIndex,\n currentX,\n data,\n domain,\n isActive,\n yRange?.max,\n yRange?.min,\n xLength,\n xDomain,\n ]);\n\n useAnimatedReaction(\n () => currentIndex.value,\n (x, prevX) => {\n if (x !== -1 && x !== prevX && onCurrentIndexChange) {\n runOnJS(onCurrentIndexChange)(x);\n }\n },\n [currentIndex]\n );\n\n return (\n <LineChartDataProvider data={data}>\n <LineChartContext.Provider value={contextValue}>\n {children}\n </LineChartContext.Provider>\n </LineChartDataProvider>\n );\n}\n"]}