114 lines
4.2 KiB
TypeScript
114 lines
4.2 KiB
TypeScript
'use client';
|
|
import { google } from 'googleapis';
|
|
import { Ethics, Scale } from '../../types/stellaris';
|
|
import { Radar } from 'react-chartjs-2'
|
|
import { ArcElement, Chart as ChartJS, Filler, LineElement, PointElement, PolarAreaController, RadialLinearScale } from 'chart.js';
|
|
import useSWR from 'swr';
|
|
|
|
const fetcher = async (url:any) => await fetch(url).then((res) => res.json());
|
|
|
|
export const RadarChart = () => {
|
|
const {data: tmpData} = useSWR('/api',fetcher);
|
|
|
|
const parseData = (data: Array<Array<any>>) => {
|
|
let parsedData = [
|
|
new Ethics.ega([{ type: Scale.fanatic, value: data[0][0] }, { type: Scale.fanatic, value: data[0][1] }]), // 0
|
|
new Ethics.aut([{ type: Scale.fanatic, value: data[1][0] }, { type: Scale.fanatic, value: data[1][1] }]), // 1
|
|
new Ethics.mil([{ type: Scale.fanatic, value: data[2][0] }, { type: Scale.fanatic, value: data[2][1] }]), // 2
|
|
new Ethics.pac([{ type: Scale.fanatic, value: data[3][0] }, { type: Scale.fanatic, value: data[3][1] }]), // 3
|
|
new Ethics.pho([{ type: Scale.fanatic, value: data[4][0] }, { type: Scale.fanatic, value: data[4][1] }]), // 4
|
|
new Ethics.phi([{ type: Scale.fanatic, value: data[5][0] }, { type: Scale.fanatic, value: data[5][1] }]), // 5
|
|
new Ethics.com([{ type: Scale.fanatic, value: data[6][0] }, { type: Scale.fanatic, value: data[6][1] }]), // 6
|
|
new Ethics.coo([{ type: Scale.fanatic, value: data[7][0] }, { type: Scale.fanatic, value: data[7][1] }]), // 7
|
|
new Ethics.eli([{ type: Scale.fanatic, value: data[8][0] }, { type: Scale.fanatic, value: data[8][1] }]), // 8
|
|
new Ethics.plu([{ type: Scale.fanatic, value: data[9][0] }, { type: Scale.fanatic, value: data[9][1] }]), // 9
|
|
new Ethics.mat([{ type: Scale.fanatic, value: data[10][0] }, { type: Scale.fanatic, value: data[10][1] }]), // 10
|
|
new Ethics.spi([{ type: Scale.fanatic, value: data[11][0] }, { type: Scale.fanatic, value: data[11][1] }]), // 11
|
|
new Ethics.eco([{ type: Scale.fanatic, value: data[12][0] }, { type: Scale.fanatic, value: data[12][1] }]), // 12
|
|
new Ethics.ind([{ type: Scale.fanatic, 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
|
|
console.log(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: [{
|
|
data: [ ethicsData[0].sum(), ethicsData[2].sum(), ethicsData[4].sum(), ethicsData[6].sum(), ethicsData[8].sum(), ethicsData[10].sum(), ethicsData[12].sum(),
|
|
ethicsData[1].sum(), ethicsData[3].sum(), ethicsData[5].sum(), ethicsData[7].sum(), ethicsData[9].sum(), ethicsData[11].sum(), ethicsData[13].sum()],
|
|
fill: true,
|
|
backgroundColor: '#254A6FAA',
|
|
borderColor: '#356A9F',
|
|
radius: 0
|
|
}]
|
|
};
|
|
|
|
|
|
ethicsData.forEach(elem => {
|
|
tEntries = tEntries + elem.entries();
|
|
if (elem.sum() > scaleLimit) {
|
|
scaleLimit = elem.sum() + 1;
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
data = {
|
|
labels: [],
|
|
datasets: [{
|
|
data: [],
|
|
fill: true,
|
|
backgroundColor: '#254A6FAA',
|
|
borderColor: '#356A9F',
|
|
radius: 0
|
|
}]
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const config = {
|
|
type: 'radar',
|
|
data: data,
|
|
options: {
|
|
elements: {
|
|
line: {
|
|
borderWidth: 3
|
|
}
|
|
},
|
|
scales: {
|
|
r: {
|
|
max: scaleLimit,
|
|
min: 0,
|
|
ticks: {
|
|
display: false
|
|
},
|
|
grid: {
|
|
color: 'grey'
|
|
},
|
|
angleLines: {
|
|
color: 'grey'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
ChartJS.register(PolarAreaController, RadialLinearScale, PointElement, LineElement, ArcElement, Filler)
|
|
|
|
return (
|
|
<div className="chart-container w-screen h-screen p-2">
|
|
<Radar {...config} />
|
|
</div>
|
|
);
|
|
};
|
|
|