sejm-calculator/src/index.ts

import Chartist, {ChartistStatic} from 'chartist';
import {committees, constituencies} from './data';
import {calculateMandates} from './mandates';
import template from './templates/constituency.pug';
import './styles.css';

const clearResults = (bar: ChartistStatic['Bar'], pie: ChartistStatic['Pie']) => {
	document.querySelectorAll<HTMLTableDataCellElement>(`tr td:last-child`).forEach(td => {
		td.innerHTML = '';
	});
	bar.detach();
	pie.detach();
	document.getElementById('support-bar-chart')!.innerHTML = '';
	document.getElementById('division-pie-chart')!.innerHTML = '';
	document.getElementById('constituency-results')!.innerHTML = '';
}

const displayConstituencyResults = () => {
	const container = document.getElementById('constituency-results');
	constituencies.forEach((constituency, index) => {
		const data = (constituency.mandates && constituency.support)
			? constituency.mandates.map((mandates, index) => ({
				committee: committees[index].name,
				support: (constituency.support as number[])[index],
				mandates,
			}))
			: [];
		data.sort((a, b) => b.support - a.support)
		container!.insertAdjacentHTML('beforeend', template({
			number: index + 1,
			name: constituency.name,
			size: constituency.size,
			data,
		}));
	});
}

const handleCalculateButtonClick = (event: Event) => {
	event.preventDefault();

	const inputs = document.querySelectorAll<HTMLInputElement>('#support-form input');
	const support = Array
		.from(inputs)
		.map(input => parseFloat(input.value));
	if (!document.querySelector<HTMLFormElement>('#support-form')!.checkValidity()) return;
	const mandates = calculateMandates(support);

	mandates.forEach((value, index) => {
		const committeeId = committees[index].id;
		const td = document.querySelector<HTMLTableDataCellElement>(`tr.${committeeId} td:last-child`);
		if (td) td.textContent = value.toString();
	});

	const barChartData = {
		labels: committees.map(committee => committee.shortName).slice(0, -1),
		series: support,
	};
	const barChartOptions = {
		distributeSeries: true,
	};
	const bar = new Chartist.Bar('#support-bar-chart', barChartData, barChartOptions);
	bar.on('draw', (data: {type: string; element: {attr(a: object): object}}) => {
		if (data.type === 'bar') {
			data.element.attr({
				style: 'stroke-width: 30px',
			});
		}
	});

	const pieChartData = {
		series: mandates,
	};
	const pieChartOptions = {
		donut: true,
		donutWidth: 60,
		startAngle: 270,
		total: 460 * 2,
	};
	const pie = new Chartist.Pie('#division-pie-chart', pieChartData, pieChartOptions);

	displayConstituencyResults();

	inputs.forEach(input => input.addEventListener('input', () => {
		clearResults(bar, pie);
	}));
}

const bindActions = () => {
	document
		.querySelector('#calculate-button')!
		.addEventListener('click', handleCalculateButtonClick);
}

document.addEventListener('DOMContentLoaded', () => {
	bindActions();
});