'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>) => { 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"}`) } } }, 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 (
); };