chellaris-sign-up-site/src/routes/legacy-graphs/EthicsBar.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>