134 lines
3.3 KiB
TypeScript
134 lines
3.3 KiB
TypeScript
'use client';
|
|
import '@/app/globals.css';
|
|
import { Ethics, EthicsDataG15, 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/v1/ethics',fetcher);
|
|
|
|
const parseData = (data: Array<Array<any>>) => {
|
|
let parsedData: EthicsDataG15[] = new Array<EthicsDataG15>;
|
|
Object.keys(Ethics).forEach((ethic: number | string) => {
|
|
if (Number.isInteger(Number(ethic))) {
|
|
parsedData[Number(ethic)] = new EthicsDataG15(data[Number(ethic)])
|
|
}
|
|
});
|
|
return parsedData;
|
|
}
|
|
let ethicsData: EthicsDataG15[];
|
|
let data;
|
|
let tEntries = 0;
|
|
let scaleLimit = 0;
|
|
|
|
|
|
if (tmpData) {
|
|
let sheetData = tmpData.sheetData
|
|
ethicsData = parseData(sheetData);
|
|
|
|
let labelsArray = [ Ethics.Egalitarian, Ethics.Militarist, Ethics.Xenophobe,
|
|
Ethics.Competitive, Ethics.Elitist, Ethics.Materialist, Ethics.Ecologist,
|
|
Ethics.Authoritarian, Ethics.Pacifist, Ethics.Xenophile,
|
|
Ethics.Cooperative, Ethics.Pluralist, Ethics.Spiritualist, Ethics.Industrialist]
|
|
|
|
let sumArray = new Array<number>
|
|
let sumRegularArray = new Array<number>
|
|
|
|
labelsArray.forEach((ethic: Ethics, index: number) => {
|
|
sumArray[index] = ethicsData[ethic].sum(props.weighted);
|
|
sumRegularArray[index] = ethicsData[ethic].sumRegular();
|
|
})
|
|
|
|
data = {
|
|
labels: labelsArray.map(ethic => Ethics[ethic]),
|
|
datasets: [{
|
|
label: "Total Ethics",
|
|
data: sumArray,
|
|
fill: true,
|
|
backgroundColor: '#254A6FAA',
|
|
borderColor: '#356A9F',
|
|
radius: 3
|
|
}, {
|
|
label: "Regular Ethics",
|
|
data: sumRegularArray,
|
|
fill: true,
|
|
backgroundColor: '#000000AA',
|
|
borderColor: '#254A6F',
|
|
radius: 3
|
|
}]
|
|
};
|
|
|
|
|
|
ethicsData.forEach(elem => {
|
|
tEntries = tEntries + elem.sum(false);
|
|
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'>
|
|
<Radar className=' chart' {...config} />
|
|
</div>
|
|
);
|
|
};
|
|
|