Untitled

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

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

  const gradientColorRed = [{ offset: 0, color: 'red', stopOpacity: 0.2 }];
  const gradientColorGreen = [{ offset: 0, color: 'green', stopOpacity: 0.2 }];
  const gradientStrokeStops = [{ offset: 0.3, color: 'transparent', opacity: 0.9 }];
  const data: any = [
    { x: ' 1', y: 12.229, price: 243.0 },
    { x: ' 2', y: 7.229, price: 243.01 },
    { x: ' 3', y: 43.223, price: 243.02 },
    { x: ' 4', y: 32.119, price: 243.03 },
    { x: ' 5', y: 19.228, price: 243.04 },
    { x: ' 6', y: 25.882, price: 243.05 },
    { x: ' 7', y: 42.971, price: 243.06 },
    { x: ' 8', y: 14.287, price: 243.07 },
    { x: ' 9', y: 15.882, price: 243.08 },
    { x: ' 10', y: 9.907, price: 243.09 },
  ];
  const data2: any = [
    { x: ' 1', y: 8.229, price: 243.0 },
    { x: ' 2', y: 14.873, price: 243.0 },
    { x: ' 3', y: 10.229, price: 243.0 },
    { x: ' 4', y: 25.701, price: 243.0 },
    { x: ' 5', y: 18.228, price: 243.0 },
    { x: ' 6', y: 24.916, price: 243.0 },
    { x: ' 7', y: 45.229, price: 243.0 },
    { x: ' 8', y: 20.997, price: 243.0 },
    { x: ' 9', y: 7.972, price: 243.0 },
    { x: ' 10', y: 5.927, price: 243.0 },
  ];
  return (
    <View row center width={360}>
      <View center>
        <Text body2 secondaryText>
          Buy quantity
        </Text>
        <VictoryChart width={180} height={420} theme={VictoryTheme.material} horizontal>
          <VictoryBar
            barWidth={24}
            style={{
              data: { fill: 'green', opacity: 0.2 },
              labels: {
                fontSize: 12,
                fill: '#45E46B',
              },
            }}
            data={data.reverse()}
            y={(data: any) => -Math.abs(data.y)}
            labels={({ datum }) => `${datum.y}`}
          />
          <VictoryAxis
            style={{
              axis: { stroke: 'transparent' },
              ticks: { stroke: 'transparent' },
              tickLabels: { fontSize: 10, fill: 'transparent' },
              grid: {
                stroke: 'transparent',
                strokeWidth: 0.1,
                strokeDasharray: 4,
              },
            }}
          />
        </VictoryChart>
      </View>
      <View center marginB-38 height={420}>
        <Text body2 secondaryText marginB-20>
          Price
        </Text>
        {data.reverse().map((item: any, index: any) => (
          <Text key={index} body2 primaryText marginT-20>
            {item.price.toFixed(2)}
          </Text>
        ))}
      </View>
      <View center>
        <Text body2 secondaryText>
          Sell quantity
        </Text>
        <VictoryChart width={180} height={420} theme={VictoryTheme.material} horizontal>
          <VictoryBar
            barWidth={24}
            style={{
              data: { fill: 'red', opacity: 0.2 },
              labels: {
                fontSize: 12,
                fill: '#FF7461',
              },
            }}
            data={data2.reverse()}
            labels={({ datum }) => `${datum.y}`}
          />
          <VictoryAxis
            style={{
              axis: { stroke: 'transparent' },
              ticks: { stroke: 'transparent' },
              tickLabels: { fontSize: 10, fill: 'transparent' },
              grid: {
                stroke: 'transparent',
                strokeWidth: 0.1,
                strokeDasharray: 4,
              },
            }}
          />
        </VictoryChart>
      </View>
    </View>
  );
}