2023-08-06 04:16:32 +02:00
< script lang = "ts" >
import { Bar } from 'svelte-chartjs';
2023-08-15 22:51:28 +02:00
import { LegacyEthics , EthicsDataLegacy } from '$lib/types/stellaris';
2023-08-06 04:16:32 +02:00
import { Chart as ChartJS , registerables } from 'chart.js';
export let data: {
popsData: Array< number > ;
ethicsData: Array< Array < number > >;
empireData: number;
};
ChartJS.register(...registerables);
const parseEthicsData = (data: Array< Array < number > >) => {
let parsedEthicsData: Array< EthicsDataLegacy > = new Array< EthicsDataLegacy > ();
2023-08-15 22:51:28 +02:00
Object.keys(LegacyEthics).forEach((ethic: number | string) => {
2023-08-06 04:16:32 +02:00
if (Number.isInteger(Number(ethic))) {
parsedEthicsData[Number(ethic)] = new EthicsDataLegacy(data[Number(ethic)]);
}
});
return parsedEthicsData;
};
const ethicsData: Array< EthicsDataLegacy > = parseEthicsData(data.ethicsData);
let sumArray = new Array< number > ();
let labelArray = new Array< string > ();
ethicsData.forEach((ethicsData, index) => {
sumArray[index] = ethicsData.sum(false);
2023-08-15 22:51:28 +02:00
labelArray[index] = LegacyEthics[index];
2023-08-06 04:16:32 +02:00
});
let zipped: Array< { sums : number ; labels : string } > = [];
for (let i = 0; i < ethicsData.length ; i ++) {
2023-08-15 22:51:28 +02:00
zipped.push({ sums : ethicsData [ i ]. sum ( false ), labels : LegacyEthics [ i ] } );
2023-08-06 04:16:32 +02:00
}
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);
}
let scaleLimit = Number((sumArray[0] * 1.2).toFixed(0));
scaleLimit % 2 == 0 ? (scaleLimit = scaleLimit) : (scaleLimit = scaleLimit + 1);
const chart_data = {
labels: labelArray,
datasets: [
{
label: 'Portrait Picks',
data: sumArray,
backgroundColor: ['rgb(3, 99, 143)'],
hoverOffset: 4
}
]
};
const options = {
plugins: {
scales: {
y: {
beginAtZero: true,
max: scaleLimit
}
},
tooltip: {
callbacks: {
label: function (ctx: any) {
return (
((ctx.dataset.data[ctx.dataIndex] * 100) / data.empireData).toFixed(1) +
'% | ' +
ctx.dataset.data[ctx.dataIndex] +
' / ' +
data.empireData
);
}
}
},
legend: {
display: false
},
datalabels: {
display: false
}
}
};
< / script >
< div class = "chart" >
< Bar data = { chart_data } { options } / >
< / div >
< style >
.chart {
display: flex;
flex-direction: column;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
justify-content: center;
align-items: center;
}
< / style >