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: 12.229, price: 243.0 },
    { y: 7.229, price: 243.01 },
    { y: 43.223, price: 243.02 },
    { y: 32.119, price: 243.03 },
    { y: 19.228, price: 243.04 },
    { y: 25.882, price: 243.05 },
    { y: 42.971, price: 243.06 },
    { y: 14.287, price: 243.07 },
    { y: 15.882, price: 243.08 },
    { y: 9.907, price: 243.09 },
  ];
  const data2: any = [
    { y: 8.229, price: 243.0 },
    { y: 14.873, price: 243.1 },
    { y: 10.229, price: 243.2 },
    { y: 25.701, price: 243.3 },
    { y: 18.228, price: 243.4 },
    { y: 24.916, price: 243.5 },
    { y: 45.229, price: 243.6 },
    { y: 20.997, price: 243.7 },
    { y: 7.972, price: 243.8 },
    { y: 5.927, price: 243.9 },
  ];
  const reversedData = [...data].reverse();
  const reversedData2 = [...data2].reverse();
  const sumData = data.reduce((acc: any, item: any) => acc + item.y, 0);
  const sumData2 = data2.reduce((acc: any, item: any) => acc + item.y, 0);

  return (
    <View style={{ borderTopWidth: 1, borderColor: 'white' }}>
      <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: '#183B39', opacity: 0.6 },
                labels: {
                  fontSize: 12,
                  fill: '#45E46B',
                },
              }}
              data={reversedData}
              y={datam => -Math.abs(datam.y)}
              labels={({ datum }) => `${datum.y}`}
              labelComponent={<VictoryLabel x={174} />}
            />
            <VictoryAxis
              style={{
                axis: { stroke: 'transparent' },
                ticks: { stroke: 'transparent' },
                tickLabels: { fontSize: 10, fill: 'transparent' },
                grid: {
                  stroke: 'transparent',
                  strokeWidth: 0.1,
                  strokeDasharray: 4,
                },
              }}
            />
          </VictoryChart>

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

          <VictoryChart width={220} height={420} theme={VictoryTheme.material} horizontal>
            <VictoryBar
              barWidth={24}
              style={{
                data: { fill: '#412A3A', opacity: 0.6 },
                labels: {
                  fontSize: 12,
                  fill: '#FF7461',
                },
              }}
              data={reversedData2}
              labels={({ datum }) => `${datum.y}`}
              labelComponent={<VictoryLabel x={47} />}
            />
            <VictoryAxis
              style={{
                axis: { stroke: 'transparent' },
                ticks: { stroke: 'transparent' },
                tickLabels: { fontSize: 10, fill: 'transparent' },
                grid: {
                  stroke: 'transparent',
                  strokeWidth: 0.1,
                  strokeDasharray: 4,
                },
              }}
            />
          </VictoryChart>
        </View>
        <View padding-10 row width={240}>
          <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-50 width={312}>
            <Button label={t('buy')} success style={styles(colors).buttonStyle} />

            <Button label={t('sell')} danger style={styles(colors).buttonStyle} />
          </View>
        </View>
      </View>
    </View>
  );
}
const styles = (colors: any) =>
  StyleSheet.create({
    redColor: {
      color: '#FF7461',
    },
    greenColor: {
      color: '#45E46B',
    },
    buttonStyle: {
      width: 148,
      margin: 10,
    },
    bottomBorder: {
      borderBottomWidth: 1,
      borderColor: colors.white20,
    },
  });