Add Ethics Bar Chart
This commit is contained in:
parent
053b0366f8
commit
bb6eb3539b
2 changed files with 127 additions and 1 deletions
|
@ -4,6 +4,7 @@ import {RadarChart} from '../components/charts/radar'
|
||||||
import {EmpireStats} from '../components/tables/empires'
|
import {EmpireStats} from '../components/tables/empires'
|
||||||
import { Checkbox } from '@nextui-org/react';
|
import { Checkbox } from '@nextui-org/react';
|
||||||
import { PopChart } from '@/components/charts/pops';
|
import { PopChart } from '@/components/charts/pops';
|
||||||
|
import { EthicsBar } from '../components/charts/ethicsBar';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [weighted, setWeighted] = useState(true);
|
const [weighted, setWeighted] = useState(true);
|
||||||
|
@ -15,7 +16,10 @@ export default function Home() {
|
||||||
<EmpireStats />
|
<EmpireStats />
|
||||||
<Checkbox labelColor="primary" defaultSelected={weighted} onChange={() => setWeighted(!weighted)}>Weighted Ethics</Checkbox>
|
<Checkbox labelColor="primary" defaultSelected={weighted} onChange={() => setWeighted(!weighted)}>Weighted Ethics</Checkbox>
|
||||||
</div>
|
</div>
|
||||||
|
<div className='flex flex-col justify-around h-full'>
|
||||||
<PopChart></PopChart>
|
<PopChart></PopChart>
|
||||||
|
<EthicsBar></EthicsBar>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
122
components/charts/ethicsBar.tsx
Normal file
122
components/charts/ethicsBar.tsx
Normal file
|
@ -0,0 +1,122 @@
|
||||||
|
'use client';
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { Chart as ChartJS, registerables } from 'chart.js';
|
||||||
|
import { Bar } from "react-chartjs-2";
|
||||||
|
import { Ethics, EthicsDataG15, Species } from '../../types/stellaris';
|
||||||
|
import { number } from "prop-types";
|
||||||
|
|
||||||
|
const fetcher = async (url:any) => await fetch(url).then((res) => res.json());
|
||||||
|
|
||||||
|
export const EthicsBar = () => {
|
||||||
|
const {data: tmpData} = useSWR('/api/ethics',fetcher);
|
||||||
|
const {data: empData} = useSWR('/api/empires',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 empireCount = 0;
|
||||||
|
let scaleLimit = 0;
|
||||||
|
|
||||||
|
if (tmpData && empData) {
|
||||||
|
let sheetData = tmpData.sheetData
|
||||||
|
ethicsData = parseData(sheetData);
|
||||||
|
|
||||||
|
empireCount = empData.empireCount;
|
||||||
|
|
||||||
|
let sumArray = new Array<number>;
|
||||||
|
let labelArray = new Array<string>;
|
||||||
|
|
||||||
|
ethicsData.forEach((ethicData, index) => {
|
||||||
|
sumArray[index] = ethicData.sum(false);
|
||||||
|
labelArray[index] = Ethics[index]
|
||||||
|
});
|
||||||
|
|
||||||
|
let zipped: Array<{sums: number, labels: string}> = [];
|
||||||
|
for (let i = 0; i<ethicsData.length; i++) {
|
||||||
|
zipped.push({sums: ethicsData[i].sum(false), labels: Ethics[i]})
|
||||||
|
}
|
||||||
|
zipped.sort((a:{sums: number, labels: string}, b:{sums: number, labels: string}) => (a.sums > b.sums ? -1 : 1));
|
||||||
|
|
||||||
|
for (let i = 0; i<zipped.length; i++) {
|
||||||
|
let z = zipped[i];
|
||||||
|
sumArray[i] = z.sums,
|
||||||
|
labelArray[i] = z.labels
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
scaleLimit = sumArray[0] * 1.2;
|
||||||
|
scaleLimit = Number(scaleLimit.toFixed(0));
|
||||||
|
scaleLimit % 2 == 0 ? scaleLimit = scaleLimit : scaleLimit = scaleLimit - 1;
|
||||||
|
|
||||||
|
data = {
|
||||||
|
labels: labelArray,
|
||||||
|
datasets: [{
|
||||||
|
label: 'Portrait Picks',
|
||||||
|
data: sumArray,
|
||||||
|
backgroundColor: [
|
||||||
|
'rgb(3, 99, 143)',
|
||||||
|
],
|
||||||
|
hoverOffset: 4
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
data = {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
data: [],
|
||||||
|
fill: true,
|
||||||
|
backgroundColor: '#254A6FAA',
|
||||||
|
borderColor: '#356A9F',
|
||||||
|
radius: 3
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
type: 'bar',
|
||||||
|
data: data,
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
max: scaleLimit
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function(ctx: any) {
|
||||||
|
return (ctx.dataset.data[ctx.dataIndex]*100/empireCount).toFixed(1) + "% | " + ctx.dataset.data[ctx.dataIndex] + " / " + empireCount
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
datalabels: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
ChartJS.register( ...registerables )
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="chart-container h-1/2 aspect-square p-2">
|
||||||
|
<Bar {...config} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
Reference in a new issue