non-weighted chart option, hover elements and legend
This commit is contained in:
parent
d0fc498856
commit
3e27047561
GPG key ID:
B6983AAA6B9A7A6C
2 changed files with 69 additions and 32 deletions
|
|
@ -1,31 +1,30 @@
|
|||
'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 { 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 = () => {
|
||||
const {data: tmpData} = useSWR('/api',fetcher);
|
||||
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.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
|
||||
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;
|
||||
}
|
||||
|
|
@ -37,26 +36,40 @@ export const RadarChart = () => {
|
|||
|
||||
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()],
|
||||
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()],
|
||||
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: 0
|
||||
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: '#20406088',
|
||||
borderColor: '#254A6F',
|
||||
radius: 3
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
ethicsData.forEach(elem => {
|
||||
tEntries = tEntries + elem.entries();
|
||||
if (elem.sum() > scaleLimit) {
|
||||
scaleLimit = elem.sum() + 1;
|
||||
if (elem.sum(props.weighted) >= scaleLimit) {
|
||||
scaleLimit = elem.sum(props.weighted) + 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -68,7 +81,7 @@ export const RadarChart = () => {
|
|||
fill: true,
|
||||
backgroundColor: '#254A6FAA',
|
||||
borderColor: '#356A9F',
|
||||
radius: 0
|
||||
radius: 3
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
|
@ -79,6 +92,14 @@ export const RadarChart = () => {
|
|||
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
|
||||
|
|
@ -102,10 +123,10 @@ export const RadarChart = () => {
|
|||
},
|
||||
};
|
||||
|
||||
ChartJS.register(PolarAreaController, RadialLinearScale, PointElement, LineElement, ArcElement, Filler)
|
||||
ChartJS.register( ...registerables )
|
||||
|
||||
return (
|
||||
<div className="chart-container w-screen h-screen p-2">
|
||||
<div className="chart-container min-h-screen aspect-square p-2">
|
||||
<Radar {...config} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { element } from 'prop-types';
|
||||
export namespace Ethics {
|
||||
|
||||
class eth_template {
|
||||
|
|
@ -8,10 +9,25 @@ export namespace Ethics {
|
|||
this.data = data;
|
||||
}
|
||||
|
||||
sum(): number {
|
||||
sum(weigthed: boolean): number {
|
||||
let sum = 0;
|
||||
this.data.forEach((element) => {
|
||||
sum = sum + element.value * element.type;
|
||||
if (weigthed) {
|
||||
sum = sum + element.value * element.type;
|
||||
}
|
||||
else {
|
||||
sum = sum + element.value * 1;
|
||||
}
|
||||
});
|
||||
return sum;
|
||||
}
|
||||
|
||||
sumRegular(): number {
|
||||
let sum = 0;
|
||||
this.data.forEach((element) => {
|
||||
if (element.type == Scale.normal) {
|
||||
sum = sum + element.value;
|
||||
}
|
||||
});
|
||||
return sum;
|
||||
}
|
||||
|
|
@ -71,7 +87,7 @@ export namespace Ethics {
|
|||
}
|
||||
|
||||
export class mat extends eth_template {
|
||||
protected key = "Materialsit";
|
||||
protected key = "Materialist";
|
||||
}
|
||||
|
||||
export class spi extends eth_template {
|
||||
|
|
|
|||
Reference in a new issue