react-native-wagmi-charts/lib/module/charts/candle/Candle.js

A sweet candlestick chart for React Native

import React from 'react';
import Animated, {
  withTiming,
  useAnimatedProps,
} from 'react-native-reanimated';
import { Line, Rect } from 'react-native-svg';
import { getY, getHeight } from './utils';
const AnimatedRect = Animated.createAnimatedComponent(Rect);
const AnimatedLine = Animated.createAnimatedComponent(Line);
export const CandlestickChartCandle = ({
  candle,
  maxHeight,
  domain,
  margin = 2,
  positiveColor = '#10b981',
  negativeColor = '#ef4444',
  rectProps: overrideRectProps,
  lineProps: overrideLineProps,
  index,
  width,
  useAnimations = true,
  renderLine = (props) =>
    props.useAnimations
      ? /*#__PURE__*/ React.createElement(AnimatedLine, props)
      : /*#__PURE__*/ React.createElement(Line, props),
  renderRect = (props) =>
    props.useAnimations
      ? /*#__PURE__*/ React.createElement(AnimatedRect, props)
      : /*#__PURE__*/ React.createElement(Rect, props),
}) => {
  const { close, open, high, low } = candle;
  const isPositive = close > open;
  const fill = isPositive ? positiveColor : negativeColor;
  const x = index * width;
  const max = Math.max(open, close);
  const min = Math.min(open, close);
  const lineProps = React.useMemo(
    () => ({
      stroke: fill,
      strokeWidth: 1,
      direction: isPositive ? 'positive' : 'negative',
      x1: x + width / 2,
      y1: getY({
        maxHeight,
        value: low,
        domain,
      }),
      x2: x + width / 2,
      y2: getY({
        maxHeight,
        value: high,
        domain,
      }),
      candle: candle,
      ...overrideLineProps,
    }),
    [
      domain,
      fill,
      high,
      isPositive,
      low,
      maxHeight,
      overrideLineProps,
      width,
      x,
      candle,
    ]
  );
  const animatedLineProps = useAnimatedProps(() => ({
    x1: withTiming(x + width / 2),
    y1: withTiming(
      getY({
        maxHeight,
        value: low,
        domain,
      })
    ),
    x2: withTiming(x + width / 2),
    y2: withTiming(
      getY({
        maxHeight,
        value: high,
        domain,
      })
    ),
  }));
  const rectProps = React.useMemo(
    () => ({
      width: width - margin * 2,
      fill: fill,
      direction: isPositive ? 'positive' : 'negative',
      x: x + margin,
      y: getY({
        maxHeight,
        value: max,
        domain,
      }),
      height: getHeight({
        maxHeight,
        value: max - min,
        domain,
      }),
      candle: candle,
      ...overrideRectProps,
    }),
    [
      domain,
      fill,
      isPositive,
      margin,
      max,
      maxHeight,
      min,
      overrideRectProps,
      width,
      x,
      candle,
    ]
  );
  const animatedRectProps = useAnimatedProps(() => ({
    x: withTiming(x + margin),
    y: withTiming(
      getY({
        maxHeight,
        value: max,
        domain,
      })
    ),
    height: withTiming(
      getHeight({
        maxHeight,
        value: max - min,
        domain,
      })
    ),
  }));
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    renderLine({
      ...lineProps,
      useAnimations,
      ...(useAnimations
        ? {
            animatedProps: animatedLineProps,
          }
        : {}),
    }),
    renderRect({
      ...rectProps,
      useAnimations,
      ...(useAnimations
        ? {
            animatedProps: animatedRectProps,
          }
        : {}),
    })
  );
};
//# sourceMappingURL=Candle.js.map