112 lines
2.5 KiB
Svelte
112 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { Bar } from 'svelte-chartjs';
|
|
import { LegacyEthics, EthicsDataLegacy } from '$lib/types/stellaris';
|
|
|
|
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>();
|
|
Object.keys(LegacyEthics).forEach((ethic: number | string) => {
|
|
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);
|
|
labelArray[index] = LegacyEthics[index];
|
|
});
|
|
|
|
let zipped: Array<{ sums: number; labels: string }> = [];
|
|
for (let i = 0; i < ethicsData.length; i++) {
|
|
zipped.push({ sums: ethicsData[i].sum(false), labels: LegacyEthics[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);
|
|
}
|
|
|
|
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>
|