(() => {
const modal = document.querySelector('#detailModal');
const viewport = document.querySelector('#modalViewport');
const renderCharts = root => root.querySelectorAll('[data-chart]').forEach(host => {
if (host.dataset.rendered) return;
host.dataset.rendered = 'true';
const data = JSON.parse(host.dataset.chart);
const render = (title, series, color, unit = 'тыс. руб.') => {
const width = 520, height = 252, pad = {l: 42, r: 18, t: 18, b: 36};
const values = series.map(item => item.value), maximum = Math.max(...values) * 1.15, minimum = Math.min(0, ...values) * .85;
const x = index => pad.l + index * ((width - pad.l - pad.r) / Math.max(1, series.length - 1));
const y = value => pad.t + (maximum - value) / (maximum - minimum || 1) * (height - pad.t - pad.b);
const points = series.map((item, index) => `${x(index)},${y(item.value)}`).join(' ');
const area = `${pad.l},${height - pad.b} ${points} ${x(series.length - 1)},${height - pad.b}`;
const grid = [0, .25, .5, .75, 1].map(t => { const yy = pad.t + t * (height - pad.t - pad.b); return ``; }).join('');
const labels = series.map((item, index) => `${item.year}`).join('');
const dots = series.map((item, index) => `${item.year}: ${item.value.toLocaleString('ru-RU')} ${unit}`).join('');
return `${title}
`;
};
if (data.employees) {
host.innerHTML = render('Динамика численности', data.employees, '#BE7AB9', data.unit || 'чел.');
return;
}
const unit = data.unit || 'тыс. руб.';
host.innerHTML = render(`Выручка, ${unit}`, data.income, '#73b8e5', unit) + render(`Чистая прибыль, ${unit}`, data.profit, '#55bd79', unit);
});
document.addEventListener('click', event => {
const trigger = event.target.closest('.detail-button');
if (trigger) {
const template = document.querySelector(`#${CSS.escape(trigger.dataset.modalSource)}`);
if (!template) return;
viewport.replaceChildren(template.content.cloneNode(true));
renderCharts(viewport);
modal.showModal();
return;
}
if (event.target.closest('.modal-close')) modal.close();
if (event.target === modal) modal.close();
});
document.addEventListener('keydown', event => { if (event.key === 'Escape' && modal?.open) modal.close(); });
renderCharts(document);
})();