react-native-wagmi-charts 2.9.0 → 2.10.0

package/lib/typescript/src/charts/line/types.d.ts

@@ -1,29 +1,27 @@
 import type { SharedValue } from 'react-native-reanimated';
 export type TLineChartPoint = {
-  timestamp: number;
-  value: number;
+    timestamp: number;
+    value: number;
+};
+export type TLineChartDataProp = TLineChartData | {
+    [key: string]: TLineChartData;
 };
-export type TLineChartDataProp =
-  | TLineChartData
-  | {
-      [key: string]: TLineChartData;
-    };
 export type TLineChartData = Array<TLineChartPoint>;
 export type TLineChartContext = {
-  currentX: SharedValue<number>;
-  currentIndex: SharedValue<number>;
-  isActive: SharedValue<boolean>;
-  domain: [number, number];
-  yDomain: YDomain;
-  xLength: number;
-  xDomain?: [number, number] | undefined;
+    currentX: SharedValue<number>;
+    currentIndex: SharedValue<number>;
+    isActive: SharedValue<boolean>;
+    domain: [number, number];
+    yDomain: YDomain;
+    xLength: number;
+    xDomain?: [number, number] | undefined;
 };
 export type YRangeProp = {
-  min?: number;
-  max?: number;
+    min?: number;
+    max?: number;
 };
 export type YDomain = {
-  min: number;
-  max: number;
+    min: number;
+    max: number;
 };
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/charts/line/useAnimatedPath.d.ts

@@ -1,12 +1,9 @@
-export declare function useAnimatedPath({
-  enabled,
-  path,
-}: {
-  enabled?: boolean;
-  path: string;
+export declare function useAnimatedPath({ enabled, path, }: {
+    enabled?: boolean;
+    path: string;
 }): {
-  animatedProps: Partial<{
-    d: string;
-  }>;
+    animatedProps: Partial<{
+        d: string;
+    }>;
 };
-//# sourceMappingURL=useAnimatedPath.d.ts.map
+//# sourceMappingURL=useAnimatedPath.d.ts.map

package/lib/typescript/src/charts/line/useCurrentY.d.ts

@@ -1,2 +1,2 @@
-export declare function useCurrentY(): import('react-native-reanimated').DerivedValue<number>;
-//# sourceMappingURL=useCurrentY.d.ts.map
+export declare function useCurrentY(): import("react-native-reanimated").DerivedValue<number>;
+//# sourceMappingURL=useCurrentY.d.ts.map

package/lib/typescript/src/charts/line/useDatetime.d.ts

@@ -1,14 +1,10 @@
 import type { TFormatterFn } from '../../types';
-export declare function useLineChartDatetime({
-  format,
-  locale,
-  options,
-}?: {
-  format?: TFormatterFn<number>;
-  locale?: string;
-  options?: Intl.DateTimeFormatOptions;
+export declare function useLineChartDatetime({ format, locale, options, }?: {
+    format?: TFormatterFn<number>;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
 }): {
-  value: import('react-native-reanimated').DerivedValue<number>;
-  formatted: import('react-native-reanimated').DerivedValue<string>;
+    value: import("react-native-reanimated").DerivedValue<number>;
+    formatted: import("react-native-reanimated").DerivedValue<string>;
 };
-//# sourceMappingURL=useDatetime.d.ts.map
+//# sourceMappingURL=useDatetime.d.ts.map

package/lib/typescript/src/charts/line/useLineChart.d.ts

@@ -1,12 +1,12 @@
 export declare function useLineChart(): {
-  currentY: import('react-native-reanimated').DerivedValue<number>;
-  data: import('./types').TLineChartData | undefined;
-  currentX: import('react-native-reanimated').SharedValue<number>;
-  currentIndex: import('react-native-reanimated').SharedValue<number>;
-  isActive: import('react-native-reanimated').SharedValue<boolean>;
-  domain: [number, number];
-  yDomain: import('./types').YDomain;
-  xLength: number;
-  xDomain?: [number, number] | undefined;
+    currentY: import("react-native-reanimated").DerivedValue<number>;
+    data: import("./types").TLineChartData | undefined;
+    currentX: import("react-native-reanimated").SharedValue<number>;
+    currentIndex: import("react-native-reanimated").SharedValue<number>;
+    isActive: import("react-native-reanimated").SharedValue<boolean>;
+    domain: [number, number];
+    yDomain: import("./types").YDomain;
+    xLength: number;
+    xDomain?: [number, number] | undefined;
 };
-//# sourceMappingURL=useLineChart.d.ts.map
+//# sourceMappingURL=useLineChart.d.ts.map

package/lib/typescript/src/charts/line/usePrice.d.ts

@@ -1,14 +1,10 @@
 import type { TFormatterFn } from '../../types';
-export declare function useLineChartPrice({
-  format,
-  precision,
-  index,
-}?: {
-  format?: TFormatterFn<string>;
-  precision?: number;
-  index?: number;
+export declare function useLineChartPrice({ format, precision, index, }?: {
+    format?: TFormatterFn<string>;
+    precision?: number;
+    index?: number;
 }): {
-  value: import('react-native-reanimated').DerivedValue<string>;
-  formatted: import('react-native-reanimated').DerivedValue<string>;
+    value: import("react-native-reanimated").DerivedValue<string>;
+    formatted: import("react-native-reanimated").DerivedValue<string>;
 };
-//# sourceMappingURL=usePrice.d.ts.map
+//# sourceMappingURL=usePrice.d.ts.map

package/lib/typescript/src/charts/line/utils/getArea.d.ts

@@ -1,19 +1,11 @@
 import type { TLineChartData, YDomain } from '../types';
-export declare function getArea({
-  data,
-  width,
-  height,
-  gutter,
-  shape: _shape,
-  yDomain,
-  xDomain,
-}: {
-  data: TLineChartData;
-  width: number;
-  height: number;
-  gutter: number;
-  shape?: unknown;
-  yDomain: YDomain;
-  xDomain?: [number, number];
+export declare function getArea({ data, width, height, gutter, shape: _shape, yDomain, xDomain, }: {
+    data: TLineChartData;
+    width: number;
+    height: number;
+    gutter: number;
+    shape?: unknown;
+    yDomain: YDomain;
+    xDomain?: [number, number];
 }): string;
-//# sourceMappingURL=getArea.d.ts.map
+//# sourceMappingURL=getArea.d.ts.map

package/lib/typescript/src/charts/line/utils/getDomain.d.ts

@@ -1,3 +1,3 @@
 import type { TLineChartPoint } from '../types';
 export declare function getDomain(rows: TLineChartPoint[]): [number, number];
-//# sourceMappingURL=getDomain.d.ts.map
+//# sourceMappingURL=getDomain.d.ts.map

package/lib/typescript/src/charts/line/utils/getDomain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getDomain.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/getDomain.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,wBAAgB,SAAS,CAAC,IAAI,EAAE,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAInE"}
+{"version":3,"file":"getDomain.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/getDomain.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,wBAAgB,SAAS,CAAC,IAAI,EAAE,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAKnE"}

package/lib/typescript/src/charts/line/utils/getPath.d.ts

@@ -1,23 +1,13 @@
 import type { TLineChartData, YDomain } from '../types';
-export declare function getPath({
-  data,
-  from,
-  to,
-  width,
-  height,
-  gutter,
-  shape: _shape,
-  yDomain,
-  xDomain,
-}: {
-  data: TLineChartData;
-  from?: number;
-  to?: number;
-  width: number;
-  height: number;
-  gutter: number;
-  shape?: unknown;
-  yDomain: YDomain;
-  xDomain?: [number, number];
+export declare function getPath({ data, from, to, width, height, gutter, shape: _shape, yDomain, xDomain, }: {
+    data: TLineChartData;
+    from?: number;
+    to?: number;
+    width: number;
+    height: number;
+    gutter: number;
+    shape?: unknown;
+    yDomain: YDomain;
+    xDomain?: [number, number];
 }): string;
-//# sourceMappingURL=getPath.d.ts.map
+//# sourceMappingURL=getPath.d.ts.map

package/lib/typescript/src/charts/line/utils/getXPositionForCurve.d.ts

@@ -1,3 +1,3 @@
 import type { Path } from 'react-native-redash';
 export declare function getXPositionForCurve(path: Path, index: number): number;
-//# sourceMappingURL=getXPositionForCurve.d.ts.map
+//# sourceMappingURL=getXPositionForCurve.d.ts.map

package/lib/typescript/src/charts/line/utils/index.d.ts

@@ -3,4 +3,4 @@ export * from './getDomain';
 export * from './getPath';
 export * from './interpolatePath';
 export * from './lineChartDataPropToArray';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/charts/line/utils/interpolatePath.d.ts

@@ -7,11 +7,7 @@
  * @param {Number} segmentCount The number of segments to create
  * @return {Object[]} An array of commands representing the segments in sequence
  */
-export declare function splitCurve(
-  commandStart: any,
-  commandEnd: any,
-  segmentCount: any
-): {}[];
+export declare function splitCurve(commandStart: any, commandEnd: any, segmentCount: any): {}[];
 /**
  * Takes a path `d` string and converts it into an array of command
  * objects. Drops the `Z` character.
@@ -19,7 +15,7 @@ export declare function splitCurve(
  * @param {String|null} d A path `d` string
  */
 export declare function pathCommandsFromString(d: any): {
-  type: any;
+    type: any;
 }[];
 /**
  * Interpolate from A to B by extending A and B during interpolation to have
@@ -37,11 +33,7 @@ export declare function pathCommandsFromString(d: any): {
  *   end command object and returns true if the segment should be excluded from splitting.
  * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
  */
-export declare function interpolatePathCommands(
-  aCommandsInput: any,
-  bCommandsInput: any,
-  excludeSegment: any
-): (t: any) => any;
+export declare function interpolatePathCommands(aCommandsInput: any, bCommandsInput: any, excludeSegment: any): (t: any) => any;
 /**
  * Interpolate from A to B by extending A and B during interpolation to have
  * the same number of points. This allows for a smooth transition when they
@@ -55,9 +47,5 @@ export declare function interpolatePathCommands(
  *   end command object and returns true if the segment should be excluded from splitting.
  * @returns {Function} Interpolation function that maps t ([0, 1]) to a path `d` string.
  */
-export declare function interpolatePath(
-  a: any,
-  b: any,
-  excludeSegment: any
-): (t: any) => any;
-//# sourceMappingURL=interpolatePath.d.ts.map
+export declare function interpolatePath(a: any, b: any, excludeSegment: any): (t: any) => any;
+//# sourceMappingURL=interpolatePath.d.ts.map

package/lib/typescript/src/charts/line/utils/lineChartDataPropToArray.d.ts

@@ -1,5 +1,3 @@
 import type { TLineChartData, TLineChartDataProp } from '../types';
-export declare function lineChartDataPropToArray(
-  dataProp: TLineChartDataProp
-): TLineChartData;
-//# sourceMappingURL=lineChartDataPropToArray.d.ts.map
+export declare function lineChartDataPropToArray(dataProp: TLineChartDataProp): TLineChartData;
+//# sourceMappingURL=lineChartDataPropToArray.d.ts.map

package/lib/typescript/src/components/AnimatedText.d.ts

@@ -2,12 +2,9 @@ import React from 'react';
 import { TextProps as RNTextProps } from 'react-native';
 import type { SharedValue, AnimatedProps } from 'react-native-reanimated';
 interface AnimatedTextProps {
-  text: SharedValue<string>;
-  style?: AnimatedProps<RNTextProps>['style'];
+    text: SharedValue<string>;
+    style?: AnimatedProps<RNTextProps>['style'];
 }
-export declare const AnimatedText: ({
-  text,
-  style,
-}: AnimatedTextProps) => React.JSX.Element;
+export declare const AnimatedText: ({ text, style }: AnimatedTextProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=AnimatedText.d.ts.map
+//# sourceMappingURL=AnimatedText.d.ts.map

package/lib/typescript/src/index.d.ts

@@ -3,4 +3,4 @@ export * from './charts/line';
 export * from './components/AnimatedText';
 export * from './utils';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types.d.ts

@@ -1,8 +1,5 @@
-export type TFormatterFn<T> = ({
-  value,
-  formatted,
-}: {
-  value: T;
-  formatted: string;
+export type TFormatterFn<T> = ({ value, formatted, }: {
+    value: T;
+    formatted: string;
 }) => string;
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/utils/formatDatetime.d.ts

@@ -1,13 +1,9 @@
 /**
  * @worklet
  */
-export declare function formatDatetime({
-  value,
-  locale,
-  options,
-}: {
-  value: number;
-  locale?: string;
-  options?: Intl.DateTimeFormatOptions;
+export declare function formatDatetime({ value, locale, options, }: {
+    value: number;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
 }): string;
-//# sourceMappingURL=formatDatetime.d.ts.map
+//# sourceMappingURL=formatDatetime.d.ts.map

package/lib/typescript/src/utils/formatPrice.d.ts

@@ -1,13 +1,9 @@
 /**
  * @worklet
  */
-export declare function formatPrice({
-  value: _value,
-  defaultPrice: _defaultPrice,
-  precision,
-}: {
-  value: string;
-  defaultPrice?: string | number;
-  precision?: number;
+export declare function formatPrice({ value: _value, defaultPrice: _defaultPrice, precision, }: {
+    value: string;
+    defaultPrice?: string | number;
+    precision?: number;
 }): string;
-//# sourceMappingURL=formatPrice.d.ts.map
+//# sourceMappingURL=formatPrice.d.ts.map

package/lib/typescript/src/utils/index.d.ts

@@ -1,4 +1,4 @@
 export * from './formatDatetime';
 export * from './formatPrice';
 export * from './usePrevious';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/usePrevious.d.ts

@@ -1,2 +1,2 @@
 export declare function usePrevious<T>(value: T): T | undefined;
-//# sourceMappingURL=usePrevious.d.ts.map
+//# sourceMappingURL=usePrevious.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/charts/line/CursorLine.tsx

@@ -18,6 +18,7 @@ import { useLineChartPrice } from './usePrice';
 type LineChartCursorLineProps = {
   children?: React.ReactNode;
   color?: string;
+  showLabel?: boolean;
   lineProps?: Partial<LineProps>;
   format?: TFormatterFn<string | number>;
   textStyle?: TextStyle;
@@ -48,6 +49,7 @@ const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
 export function LineChartCursorLine({
   children,
   color = 'gray',
+  showLabel = true,
   lineProps,
   format,
   textStyle,
@@ -105,7 +107,7 @@ export function LineChartCursorLine({
     if (isHorizontal) return 0;
 
     // For vertical cursor, extend line to the chart area (excluding reserved label space)
-    return height - SPACING.X_AXIS_LABEL_RESERVED_HEIGHT;
+    return showLabel ? height - SPACING.X_AXIS_LABEL_RESERVED_HEIGHT : height;
   });
 
   const containerStyle = useAnimatedStyle(() => ({
@@ -208,7 +210,9 @@ export function LineChartCursorLine({
             {...lineProps}
           />
         </Svg>
-        <AnimatedText text={displayText} style={textPositionStyle} />
+        {showLabel && (
+          <AnimatedText text={displayText} style={textPositionStyle} />
+        )}
       </Animated.View>
       {children}
     </LineChartCursor>

package/src/charts/line/HorizontalLine.tsx

@@ -55,6 +55,9 @@ export function LineChartHorizontalLine({
   );
   const { yDomain } = useLineChart();
 
+  // Reserve space at the bottom for x-axis cursor labels
+  const X_AXIS_LABEL_RESERVED_HEIGHT = 40;
+
   const y = useDerivedValue(() => {
     if (typeof at === 'number' || at.index != null) {
       const index = typeof at === 'number' ? at : at.index;
@@ -74,7 +77,8 @@ export function LineChartHorizontalLine({
 
     const offsetTop = yDomain.max - at.value;
     const percentageOffsetTop = offsetTop / (yDomain.max - yDomain.min);
-    const heightBetweenGutters = height - gutter * 2;
+    const chartDrawingHeight = height - X_AXIS_LABEL_RESERVED_HEIGHT;
+    const heightBetweenGutters = chartDrawingHeight - gutter * 2;
     const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;
 
     return withTiming(offsetTopPixels + offsetY);