From 3e27047561b4d93ef0178b5138a21ab5bdb18a92 Mon Sep 17 00:00:00 2001 From: Neshura Date: Thu, 1 Jun 2023 18:55:36 +0200 Subject: [PATCH] non-weighted chart option, hover elements and legend --- components/charts/radar.tsx | 79 +++++++++++++++++++++++-------------- types/stellaris.ts | 22 +++++++++-- 2 files changed, 69 insertions(+), 32 deletions(-) diff --git a/components/charts/radar.tsx b/components/charts/radar.tsx index aa2dfef..6fb0243 100644 --- a/components/charts/radar.tsx +++ b/components/charts/radar.tsx @@ -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>) => { 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 ( -
+
); diff --git a/types/stellaris.ts b/types/stellaris.ts index 917eefa..8030106 100644 --- a/types/stellaris.ts +++ b/types/stellaris.ts @@ -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 {