chellaris-galaxy-political-compass/components/charts/radar.tsx

'use client';
import { Ethics, Scale } from '../../types/stellaris';
import { Radar } from 'react-chartjs-2'
import { Chart as ChartJS, registerables } from 'chart.js';
import useSWR from 'swr';

const fetcher = async (url:any) => await fetch(url).then((res) => res.json());

export const RadarChart = (props: { weighted: boolean }) => {
  const {data: tmpData} = useSWR('/api/radar',fetcher);
  
  const parseData = (data: Array<Array<any>>) => {
    let parsedData = [
      new Ethics.ega([{ type: Scale.normal, value: data[0][0] }, { type: Scale.fanatic, value: data[0][1] }]), // 0
      new Ethics.aut([{ type: Scale.normal, value: data[1][0] }, { type: Scale.fanatic, value: data[1][1] }]), // 1
      new Ethics.mil([{ type: Scale.normal, value: data[2][0] }, { type: Scale.fanatic, value: data[2][1] }]), // 2
      new Ethics.pac([{ type: Scale.normal, value: data[3][0] }, { type: Scale.fanatic, value: data[3][1] }]), // 3
      new Ethics.pho([{ type: Scale.normal, value: data[4][0] }, { type: Scale.fanatic, value: data[4][1] }]), // 4
      new Ethics.phi([{ type: Scale.normal, value: data[5][0] }, { type: Scale.fanatic, value: data[5][1] }]), // 5
      new Ethics.com([{ type: Scale.normal, value: data[6][0] }, { type: Scale.fanatic, value: data[6][1] }]), // 6
      new Ethics.coo([{ type: Scale.normal, value: data[7][0] }, { type: Scale.fanatic, value: data[7][1] }]), // 7
      new Ethics.eli([{ type: Scale.normal, value: data[8][0] }, { type: Scale.fanatic, value: data[8][1] }]), // 8
      new Ethics.plu([{ type: Scale.normal, value: data[9][0] }, { type: Scale.fanatic, value: data[9][1] }]), // 9
      new Ethics.mat([{ type: Scale.normal, value: data[10][0] }, { type: Scale.fanatic, value: data[10][1] }]), // 10
      new Ethics.spi([{ type: Scale.normal, value: data[11][0] }, { type: Scale.fanatic, value: data[11][1] }]), // 11
      new Ethics.eco([{ type: Scale.normal, value: data[12][0] }, { type: Scale.fanatic, value: data[12][1] }]), // 12
      new Ethics.ind([{ type: Scale.normal, value: data[13][0] }, { type: Scale.fanatic, value: data[13][1] }]), // 13
    ];
    return parsedData;
  }
  let ethicsData;
  let data;
  let tEntries = 0;
  let scaleLimit = 0;
  

  if (tmpData) {
    let sheetData = tmpData.sheetData
    ethicsData = parseData(sheetData);
    data = {
      labels: [ ethicsData[0].getKey(), ethicsData[2].getKey(), ethicsData[4].getKey(), 
                ethicsData[6].getKey(), ethicsData[8].getKey(), ethicsData[10].getKey(), ethicsData[12].getKey(), 
                ethicsData[1].getKey(), ethicsData[3].getKey(), ethicsData[5].getKey(), 
                ethicsData[7].getKey(), ethicsData[9].getKey(), ethicsData[11].getKey(), ethicsData[13].getKey()],
      datasets: [{
        label: "Total Ethics",
        data: [ ethicsData[0].sum(props.weighted), ethicsData[2].sum(props.weighted), ethicsData[4].sum(props.weighted), ethicsData[6].sum(props.weighted), 
                ethicsData[8].sum(props.weighted), ethicsData[10].sum(props.weighted), ethicsData[12].sum(props.weighted), 
                ethicsData[1].sum(props.weighted), ethicsData[3].sum(props.weighted), ethicsData[5].sum(props.weighted), ethicsData[7].sum(props.weighted), 
                ethicsData[9].sum(props.weighted), ethicsData[11].sum(props.weighted), ethicsData[13].sum(props.weighted)],
        fill: true,
        backgroundColor: '#254A6FAA',
        borderColor: '#356A9F',
        radius: 3
      }, {
        label: "Regular Ethics",
        data: [ ethicsData[0].sumRegular(), ethicsData[2].sumRegular(), ethicsData[4].sumRegular(), 
                ethicsData[6].sumRegular(), ethicsData[8].sumRegular(), ethicsData[10].sumRegular(), ethicsData[12].sumRegular(), 
                ethicsData[1].sumRegular(), ethicsData[3].sumRegular(), ethicsData[5].sumRegular(), 
                ethicsData[7].sumRegular(), ethicsData[9].sumRegular(), ethicsData[11].sumRegular(), ethicsData[13].sumRegular()],
        fill: true,
        backgroundColor: '#000000AA',
        borderColor: '#254A6F',
        radius: 3
      }]
    };


  ethicsData.forEach(elem => {
    tEntries = tEntries + elem.entries();
    if (elem.sum(props.weighted) >= scaleLimit) {
      scaleLimit = elem.sum(props.weighted) + 1;
    }
  });
  }
  else {
    data = {
      labels: [],
      datasets: [{
        data: [],
        fill: true,
        backgroundColor: '#254A6FAA',
        borderColor: '#356A9F',
        radius: 3
      }]
    }
  }
  


  const config = {
    type: 'radar',
    data: data,
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (ctx: any) => (`${ctx.dataset.label}: ${ctx.dataset.data[ctx.dataIndex]} ${props.weighted ? "Points" : "Picks"}`)
          }
        },
        datalabels: {
          display: false,
        },
      },
      legend: { display: true },
      elements: {
        line: {
          borderWidth: 3
        }
      },
      scales: {
        r: {
          max: scaleLimit,
          min: 0,
          ticks: {
            display: false
          },
          grid: {
            color: 'grey'
          },
          angleLines: {
            color: 'grey'
          }
        }
      }
    },
  };

  ChartJS.register( ...registerables )

  return (
    <div className="chart-container h-full aspect-square p-2">
      <Radar {...config} />
    </div>
  );
};