Untitled

import React from 'react';
import { Text, View } from 'react-native-ui-lib';
import { FlatList, StyleSheet, useWindowDimensions } from 'react-native';
import { useTranslation } from 'react-i18next';

import { useColors } from '../../../hooks/useColors';

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

  const data: any = [
    { price: 243.0, buy: 12.229, sell: 8.229 },
    { price: 243.01, buy: 7.229, sell: 14.873 },
    { price: 243.02, buy: 43.223, sell: 10.229 },
    { price: 243.03, buy: 32.119, sell: 25.701 },
    { price: 243.04, buy: 19.228, sell: 18.228 },
    { price: 243.05, buy: 25.882, sell: 24.916 },
    { price: 243.06, buy: 42.971, sell: 45.229 },
    { price: 243.07, buy: 14.287, sell: 20.997 },
    { price: 243.08, buy: 15.882, sell: 7.972 },
    { price: 243.09, buy: 9.907, sell: 5.927 },
  ];

  let { width } = useWindowDimensions();
  width = width - 250 - 32;
  const sumData = data.reduce((acc: any, item: any) => acc + item.buy, 0);
  const sumData2 = data.reduce((acc: any, item: any) => acc + item.sell, 0);

  const maxBuy = Math.max(...data.map((item: any) => item.buy));
  const maxSell = Math.max(...data.map((item: any) => item.sell));
  const x = width / maxBuy;
  const y = width / maxSell;

  return (
    <>
      <View center>
        <View row marginH-20 marginT-20 width={280}>
          <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>
        <FlatList
          data={data}
          renderItem={({ item, index }: any) => (
            <View row width={320} center marginT-12 marginB-12>
              <View style={styles(colors).greenColorView} width={x * item.buy}>
                <View style={styles(colors).greenColorTextView}>
                  <Text style={styles(colors).greenColor} key={index} body2>
                    {item.buy.toFixed(3)}
                  </Text>
                </View>
              </View>
              <View>
                <Text key={index} body2 primaryText center>
                  {item.price.toFixed(2)}
                </Text>
              </View>
              <View style={styles(colors).redColorView} width={y * item.sell}>
                <Text style={styles(colors).redColor} key={index} body2>
                  {item.sell.toFixed(3)}
                </Text>
              </View>
            </View>
          )}
        />
        <View center style={styles(colors).topBorder} width={320}>
          <View marginT-10 marginB-10 row>
            <Text body2 style={{ color: colors.greenPrice }} flex-1 center>
              {sumData.toFixed(3)}
            </Text>
            <Text body2 style={{ color: colors.redPrice }} flex-1 center>
              {sumData2.toFixed(3)}
            </Text>
          </View>
        </View>
      </View>
    </>
  );
}

const styles = (colors: any) =>
  StyleSheet.create({
    redColor: {
      color: colors.redPrice,
      paddingLeft: 4,
      width: 100,
    },
    greenColor: {
      color: colors.greenPrice,
      paddingRight: 4,
      width: 100,
      textAlign: 'right',
    },
    greenColorTextView: {
      position: 'absolute',
      right: 0,
    },
    redColorView: {
      backgroundColor: colors.darkRedBg,
      backgroundOpacity: 0.6,
      position: 'absolute',
      left: 0,
      marginLeft: 220,
      height: 24,
      justifyContent: 'center',
    },
    greenColorView: {
      backgroundColor: colors.darkGreenBg,
      backgroundOpacity: 0.6,
      position: 'absolute',
      right: 0,
      marginRight: 220,
      height: 24,
      justifyContent: 'center',
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
    },
  });