Untitled

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

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

  const data = [
    { x: 'Efficiency', y: 1 },
    { x: 'Liquidity', y: 2 },
    { x: 'Leverage', y: 3 },
    { x: 'Profitability', y: 4 },
    { x: 'Growth', y: 5 },
  ];
  return (
    <View center>
      <VictoryChart polar>
        {/* Outer Polar Axis */}
        <VictoryPolarAxis
          tickValues={['Efficiency', 'Liquidity', 'Leverage', 'Profitability', 'Growth']}
          labelPlacement="parallel"
          style={{
            data: { fillOpacity: 0.2, strokeWidth: 2, lineTension: 0.7 },
            axis: { stroke: 'rgba(39, 132, 216, 0.3)', strokeDasharray: [9, 9] },
            grid: { stroke: 'rgba(39, 132, 216, 0.3)' },
            tickLabels: { fontSize: 10, padding: 5, fill: 'white', angle: 360 },
          }}
        />
        {/* Inner Polar Axis with grid */}
        <VictoryPolarAxis
          dependentAxis
          style={{
            grid: { stroke: 'rgba(39, 132, 216, 0.3)' },
            axis: { strokeOpacity: 0 }, 
            tickLabels: { fontSize: 8, padding: 5, fill: 'white' },
          }}
          tickValues={[1, 2, 3, 4, 5]} 
          innerRadius={40} 
        />
        <VictoryArea
          data={data}
          x="x"
          y="y"
          style={{
            data: {
              fill: 'rgba(10, 109, 198, 0.5)',
              fillOpacity: 0.3,
              stroke: 'rgba(10, 109, 198, 1)',
              strokeWidth: 2,
            },
          }}
        />
      </VictoryChart>
    </View>
  );
}