prinzeskaalisa/dz1

site: root: "<путь_к_директории_с_файлами_сайта>" ref: "<ветка_или_тег>" function parseVolumeToTons(raw) { let str = String(raw).replace(/,/g, '.').toLowerCase(); let num = parseFloat(str); if (isNaN(num)) return 0; if (str.includes('млн')) return num * 1000; // условно, но для графика покажем if (str.includes('тыс')) return num * 1000; return num; // если уже тонны } let chartInstance = null; function renderDashboard() { const yearFilter = document.getElementById('filterYear').value; const regionFilter = document.getElementById('filterRegion').value.toLowerCase(); let filtered = rawData.filter(row => { const matchYear = yearFilter === 'all' || row.year == yearFilter; const matchRegion = row.region.toLowerCase().includes(regionFilter); return matchYear && matchRegion; }); // KPI const count = filtered.length; const totalTons = filtered.reduce((sum, r) => sum + parseVolumeToTons(r.volumeRaw), 0); const avgTons = count ? (totalTons / count) : 0; document.getElementById('kpiContainer').innerHTML = ` <div class="kpi-card"><div class="label">🏢 Предприятий</div><div class="value">${count}</div></div> <div class="kpi-card"><div class="label">📦 Суммарный объём</div><div class="value">${totalTons.toFixed(0)} т</div></div> <div class="kpi-card"><div class="label">📊 Средний объём</div><div class="value">${avgTons.toFixed(0)} т</div></div> <div class="kpi-card"><div class="label">📅 Диапазон годов</div><div class="value">${filtered.length ? Math.min(...filtered.map(r=>r.year)) + '–' + Math.max(...filtered.map(r=>r.year)) : '—'}</div></div> `; // Таблица document.getElementById('tableBody').innerHTML = filtered.map(r => ` <tr> <td><strong>${r.company}</strong></td> <td>${r.region}</td> <td>${r.volumeRaw}</td> <td>${r.year}</td> <td><span class="badge ${r.supply === 'внутр.' ? 'badge-inner' : 'badge-export'}">${r.supply}</span></td> </tr> `).join(''); // График (баровый) const ctx = document.getElementById('volumeChart').getContext('2d'); if (chartInstance) chartInstance.destroy(); const labels = filtered.map(r => r.company); const values = filtered.map(r => parseVolumeToTons(r.volumeRaw)); const colors = ['#2a6f8f', '#4a8db7', '#6aa9c9', '#94c2db']; chartInstance = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Объём (тонны)', data: values, backgroundColor: colors.slice(0, values.length), borderRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { display: false }, tooltip: { callbacks: { label: (ctx) => ctx.parsed.y + ' т' } } }, scales: { y: { beginAtZero: true, ticks: { callback: (v) => v + ' т' } } } } }); } // Первоначальный рендер renderDashboard(); </script> </body> </html>

язык не указан · рейтинг — · 👍 0 · ❤️ 0 · 💎 0 · 0 форков · ссылка на SourceCraft