Untitled

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

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 },
  ];
  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 },
          }}
        />
        <Defs>
          <LinearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
            <Stop offset="30%" stopColor={colors.blueGrStart30} />
            <Stop offset="100%" stopColor={colors.blueGrEnd30} />
          </LinearGradient>
        </Defs>
        <Defs>
          <LinearGradient id="stroke" x1="0" y1="0" x2="0" y2="1">
            <Stop offset="30%" stopColor={colors.blueGrStrokeStart} />
            <Stop offset="100%" stopColor={colors.blueGrStrokeEnd} />
          </LinearGradient>
        </Defs>
        <VictoryArea
          data={data}
          animate={{
            duration: 2000,
            onLoad: { duration: 1000 },
          }}
          style={{
            data: {
              fill: 'url(#gradient)',
              fillOpacity: 0.3,
              stroke: 'url(#stroke)',
              strokeWidth: 2,
            },
          }}
        />
      </VictoryChart>
    </View>
  );
}