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