Untitled

import React from 'react';
import { Text, View } from 'react-native-ui-lib';
import { StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';
import { VictoryChart, VictoryAxis, VictoryLabel, VictoryBar, VictoryTheme } from 'victory-native';
import { useColors } from '../../../hooks/useColors';
import { Button } from '../../ui';

export function StackedChart() {
  const { colors }: any = useColors();
  const { t } = useTranslation();

  const data: any = [
    { y: 243.0, buy: 12.229, sell: 8.229 },
    { y: 243.01, buy: 7.229, sell: 14.873 },
    { y: 243.02, buy: 43.223, sell: 10.229 },
    { y: 243.03, buy: 32.119, sell: 25.701 },
    { y: 243.04, buy: 19.228, sell: 18.228 },
    { y: 243.05, buy: 25.882, sell: 24.916 },
    { y: 243.06, buy: 42.971, sell: 45.229 },
    { y: 243.07, buy: 14.287, sell: 20.997 },
    { y: 243.08, buy: 15.882, sell: 7.972 },
    { y: 243.09, buy: 9.907, sell: 5.927 },
  ];
  const reversedData = [...data].reverse();
  const sumData = data.reduce((acc: any, item: any) => acc + item.buy, 0);
  const sumData2 = data.reduce((acc: any, item: any) => acc + item.sell, 0);

  return (
    <>
      <Text body3 primaryText flex-1 marginT-20>
        {t('whatPriceLevel')}
      </Text>
      <View center>
        <View row flex-0 marginH-20 marginT-20>
          <Text body2 secondaryText flex-1 center>
            {t('buyQuantity')}
          </Text>
          <Text body2 secondaryText flex-1 center>
            {t('price')}
          </Text>
          <Text body2 secondaryText flex-1 center>
            {t('sellQuantity')}
          </Text>
        </View>
        <View row style={styles(colors).bottomBorder}>
          <VictoryChart width={220} height={420}>
            <VictoryBar
              horizontal
              barWidth={24}
              style={{
                data: { fill: colors.darkGreenBg, opacity: 0.6 },
                labels: {
                  fontSize: 12,
                  fill: colors.greenPrice,
                },
              }}
              data={reversedData}
              y={datam => -Math.abs(datam.buy)}
              labels={({ datum }) => `${datum.buy}`}
              labelComponent={<VictoryLabel x={174} />}
            />
            <VictoryAxis
              style={{
                axis: { stroke: 'transparent' },
                ticks: { stroke: 'transparent' },
                tickLabels: { fill: 'transparent' },
                grid: {
                  stroke: 'transparent',
                },
              }}
            />
          </VictoryChart>

          <View center height={360} marginT-40 flex-0>
            {data.map((item: any, index: any) => (
              <View flex-1>
                <Text key={index} body2 primaryText>
                  {item.y.toFixed(2)}
                </Text>
              </View>
            ))}
          </View>

          <VictoryChart width={220} height={420} theme={VictoryTheme.material} horizontal>
            <VictoryBar
              barWidth={24}
              style={{
                data: { fill: colors.darkRedBg, opacity: 0.6 },
                labels: {
                  fontSize: 12,
                  fill: colors.redPrice,
                },
              }}
              data={reversedData}
              y={datam => Math.abs(datam.sell)}
              labels={({ datum }) => `${datum.sell}`}
              labelComponent={<VictoryLabel x={47} />}
            />
            <VictoryAxis
              style={{
                axis: { stroke: 'transparent' },
                ticks: { stroke: 'transparent' },
                tickLabels: { fill: 'transparent' },
                grid: {
                  stroke: 'transparent',
                },
              }}
            />
          </VictoryChart>
        </View>
        <View paddingT-10 row width={230}>
          <Text body2 style={styles(colors).greenColor} flex-1>
            {sumData.toFixed(3)}
          </Text>
          <Text body2 style={styles(colors).redColor} flex-0>
            {sumData2.toFixed(3)}
          </Text>
        </View>
        <View>
          <View row center marginT-60>
            <Button label={t('buy')} success style={styles(colors).buttonStyle} />

            <Button label={t('sell')} danger style={styles(colors).buttonStyle} />
          </View>
        </View>
      </View>
    </>
  );
}

const styles = (colors: any) =>
  StyleSheet.create({
    redColor: {
      color: colors.redPrice,
    },
    greenColor: {
      color: colors.greenPrice,
    },
    buttonStyle: {
      width: 148,
      margin: 10,
    },
    bottomBorder: {
      borderBottomWidth: 1,
      borderColor: colors.white20,
    },
  });