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

A sweet candlestick chart for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.CandlestickChartCandle = void 0;
var _react = _interopRequireDefault(require('react'));
var _reactNativeReanimated = _interopRequireWildcard(
  require('react-native-reanimated')
);
var _reactNativeSvg = require('react-native-svg');
var _utils = require('./utils');
function _interopRequireWildcard(e, t) {
  if ('function' == typeof WeakMap)
    var r = new WeakMap(),
      n = new WeakMap();
  return (_interopRequireWildcard = function (e, t) {
    if (!t && e && e.__esModule) return e;
    var o,
      i,
      f = { __proto__: null, default: e };
    if (null === e || ('object' != typeof e && 'function' != typeof e))
      return f;
    if ((o = t ? n : r)) {
      if (o.has(e)) return o.get(e);
      o.set(e, f);
    }
    for (const t in e)
      'default' !== t &&
        {}.hasOwnProperty.call(e, t) &&
        ((i =
          (o = Object.defineProperty) &&
          Object.getOwnPropertyDescriptor(e, t)) &&
        (i.get || i.set)
          ? o(f, t, i)
          : (f[t] = e[t]));
    return f;
  })(e, t);
}
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : { default: e };
}
const AnimatedRect = _reactNativeReanimated.default.createAnimatedComponent(
  _reactNativeSvg.Rect
);
const AnimatedLine = _reactNativeReanimated.default.createAnimatedComponent(
  _reactNativeSvg.Line
);
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.default.createElement(AnimatedLine, props)
      : /*#__PURE__*/ _react.default.createElement(_reactNativeSvg.Line, props),
  renderRect = (props) =>
    props.useAnimations
      ? /*#__PURE__*/ _react.default.createElement(AnimatedRect, props)
      : /*#__PURE__*/ _react.default.createElement(_reactNativeSvg.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.default.useMemo(
    () => ({
      stroke: fill,
      strokeWidth: 1,
      direction: isPositive ? 'positive' : 'negative',
      x1: x + width / 2,
      y1: (0, _utils.getY)({
        maxHeight,
        value: low,
        domain,
      }),
      x2: x + width / 2,
      y2: (0, _utils.getY)({
        maxHeight,
        value: high,
        domain,
      }),
      candle: candle,
      ...overrideLineProps,
    }),
    [
      domain,
      fill,
      high,
      isPositive,
      low,
      maxHeight,
      overrideLineProps,
      width,
      x,
      candle,
    ]
  );
  const animatedLineProps = (0, _reactNativeReanimated.useAnimatedProps)(
    () => ({
      x1: (0, _reactNativeReanimated.withTiming)(x + width / 2),
      y1: (0, _reactNativeReanimated.withTiming)(
        (0, _utils.getY)({
          maxHeight,
          value: low,
          domain,
        })
      ),
      x2: (0, _reactNativeReanimated.withTiming)(x + width / 2),
      y2: (0, _reactNativeReanimated.withTiming)(
        (0, _utils.getY)({
          maxHeight,
          value: high,
          domain,
        })
      ),
    })
  );
  const rectProps = _react.default.useMemo(
    () => ({
      width: width - margin * 2,
      fill: fill,
      direction: isPositive ? 'positive' : 'negative',
      x: x + margin,
      y: (0, _utils.getY)({
        maxHeight,
        value: max,
        domain,
      }),
      height: (0, _utils.getHeight)({
        maxHeight,
        value: max - min,
        domain,
      }),
      candle: candle,
      ...overrideRectProps,
    }),
    [
      domain,
      fill,
      isPositive,
      margin,
      max,
      maxHeight,
      min,
      overrideRectProps,
      width,
      x,
      candle,
    ]
  );
  const animatedRectProps = (0, _reactNativeReanimated.useAnimatedProps)(
    () => ({
      x: (0, _reactNativeReanimated.withTiming)(x + margin),
      y: (0, _reactNativeReanimated.withTiming)(
        (0, _utils.getY)({
          maxHeight,
          value: max,
          domain,
        })
      ),
      height: (0, _reactNativeReanimated.withTiming)(
        (0, _utils.getHeight)({
          maxHeight,
          value: max - min,
          domain,
        })
      ),
    })
  );
  return /*#__PURE__*/ _react.default.createElement(
    _react.default.Fragment,
    null,
    renderLine({
      ...lineProps,
      useAnimations,
      ...(useAnimations
        ? {
            animatedProps: animatedLineProps,
          }
        : {}),
    }),
    renderRect({
      ...rectProps,
      useAnimations,
      ...(useAnimations
        ? {
            animatedProps: animatedRectProps,
          }
        : {}),
    })
  );
};
exports.CandlestickChartCandle = CandlestickChartCandle;
//# sourceMappingURL=Candle.js.map