Untitled

import React from 'react';
import { View } from 'react-native-ui-lib';
import { VictoryChart, VictoryArea, VictoryPolarAxis } from 'victory-native';

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

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

  const data = [
    { x: 'Efficiency', y: 1.5 },
    { x: 'Growth', y: 3.5 },
    { x: 'Profitability', y: 4.2 },
    { x: 'Leverage', y: 2.5 },
    { x: 'Liquidity', y: 3 },
  ];
  const gradientColorStops = [
    { offset: 0.3, color: colors.blueGrStart30, stopOpacity: 0.3 },
    { offset: 1, color: colors.blueGrEnd30, stopOpacity: 0.3 },
  ];
  const gradientStrokeStops = [
    { offset: 0.3, color: colors.blueGrStrokeStart, opacity: 0.9 },
    { offset: 1, color: colors.blueGrStrokeEnd, opacity: 0.9 },
  ];
  return (
    <View center>
      <VictoryChart polar startAngle={90} endAngle={450}>
        <VictoryPolarAxis
          style={{
            axis: { strokeWidth: 0 },
            grid: { stroke: colors.secondaryText, strokeOpacity: 0.3 },
            tickLabels: { fontSize: 12, padding: 20, fill: colors.primaryText, angle: 360 },
          }}
        />
        <VictoryPolarAxis
          dependentAxis
          tickValues={['1', '2', '3', '4', '5']}
          style={{
            grid: { stroke: colors.activityBlue, strokeWidth: 1, strokeDasharray: '9', strokeOpacity: 0.55 },
            axis: { strokeOpacity: 0 },
            tickLabels: { fontSize: 11, fill: colors.activityBlue, angle: 0, fillOpacity: 0.55 },
          }}
        />
        <VictoryArea
          data={data}
          animate={{
            duration: 2000,
            onLoad: { duration: 1000 },
          }}
          dataComponent={
            <GradientArea
              gradientColorStops={gradientColorStops}
              gradientStrokeStops={gradientStrokeStops}
              strokeLine={2}
            />
          }
        />
      </VictoryChart>
    </View>
  );
}