Untitled

import React from 'react';
import { Text, View } from 'react-native-ui-lib';
import { VictoryChart, VictoryAxis, VictoryLabel, VictoryBar } from 'victory-native';

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

export function SpiderChart() {
  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 = [
    { x: 'Data 1', y: 10, price: '$10' },
    { x: 'Data 2', y: 5, price: '$5' },
    { x: 'Data 3', y: 3, price: '$3' },
    { x: 'Data 4', y: 8, price: '$8' },
    { x: 'Data 5', y: 15, price: '$15' },
    { x: 'Data 6', y: 5, price: '$5' },
    { x: 'Data 7', y: 3, price: '$3' },
    { x: 'Data 8', y: 8, price: '$8' },
  ];
  const data2 = [
    { x: 'Data 1', y: -33, price: '$-10' },
    { x: 'Data 2', y: -44, price: '$-5' },
    { x: 'Data 3', y: -3, price: '$-3' },
    { x: 'Data 4', y: -11, price: '$-8' },
    { x: 'Data 5', y: -32, price: '$-15' },
    { x: 'Data 6', y: -12, price: '$-5' },
    { x: 'Data 7', y: -53, price: '$-3' },
    { x: 'Data 8', y: -23, price: '$-8' },
  ];
  return (
    <View row center>
      <View marginT-10>
        <Text marginB-10 center>
          Buy quantity
        </Text>
        <VictoryChart width={100} padding={{ left: 0 }}>
          <VictoryAxis
            tickFormat={() => null}
            style={{
              axis: { stroke: 'transparent' },
              ticks: { stroke: 'transparent' },
              tickLabels: { fill: 'transparent' },
            }}
          />
          <VictoryAxis
            dependentAxis
            tickFormat={() => null}
            style={{
              axis: { stroke: 'transparent' },
              ticks: { stroke: 'transparent' },
              tickLabels: { fill: 'transparent' },
            }}
          />

          <VictoryBar
            data={data2}
            horizontal
            x="x"
            y="y"
            style={{
              data: {
                width: 14,
              },
              labels: {
                fill: 'white',
                fontSize: 12,
              },
            }}
            labels={({ datum }) => datum.price} // Show the price as a label on top of the bar
            dataComponent={
              <GradientBar
                gradientColorStops={gradientColorGreen}
                gradientStrokeStops={gradientStrokeStops}
                strokeLine={0}
              />
            }
          />
        </VictoryChart>
      </View>
      <View>
        <Text>Price</Text>
      </View>
      <View marginL-100 marginT-10>
        <Text marginB-10 center>
          Sell quantity
        </Text>
        <VictoryChart width={100} padding={{ left: 0 }}>
          <VictoryAxis
            tickFormat={() => null}
            style={{
              axis: { stroke: 'transparent' },
              ticks: { stroke: 'transparent' },
              tickLabels: { fill: 'transparent' },
            }}
          />
          <VictoryAxis
            dependentAxis
            tickFormat={() => null}
            style={{
              axis: { stroke: 'transparent' },
              ticks: { stroke: 'transparent' },
              tickLabels: { fill: 'transparent' },
            }}
          />

          <VictoryBar
            data={data}
            horizontal
            x="x"
            y="y"
            style={{
              data: {
                width: 14,
              },
              labels: {
                fill: 'white',
                fontSize: 12,
              },
            }}
            labels={({ datum }) => datum.price} // Show the price as a label on top of the bar
            dataComponent={
              <GradientBar
                gradientColorStops={gradientColorRed}
                gradientStrokeStops={gradientStrokeStops}
                strokeLine={0}
              />
            }
          />
        </VictoryChart>
      </View>
    </View>
  );
}