<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>