465 lines
13 KiB
JavaScript
465 lines
13 KiB
JavaScript
let chartLine, chartBar, chartDonut;
|
|
let allMonths = [];
|
|
const MONTHS_TO_SHOW_DEFAULT = 6;
|
|
|
|
function formatMonthDisplay(monthCode) {
|
|
const monthNames = [
|
|
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
|
];
|
|
const year = monthCode.substring(0, 4);
|
|
const monthIdx = parseInt(monthCode.substring(5, 7)) - 1;
|
|
return `${monthNames[monthIdx]} ${year}`;
|
|
}
|
|
|
|
function getThemeColors() {
|
|
const theme = document.documentElement.getAttribute('data-theme');
|
|
const isDark = theme === 'tokyo';
|
|
return {
|
|
isDark,
|
|
textColor: isDark ? '#e8f4ff' : '#1a1d22',
|
|
gridColor: isDark ? 'rgba(100, 220, 255, 0.1)' : 'rgba(26, 29, 34, 0.1)',
|
|
accent: isDark ? '#64dcff' : '#2c5a7a',
|
|
secondary: isDark ? '#2c5a7a' : '#64dcff',
|
|
palette: isDark
|
|
? ['#64dcff', '#2c5a7a', '#a3b3cc', '#7886a0', '#d93d3d', '#dcad2b', '#4caf50', '#ff9800', '#9c27b0', '#00bcd4']
|
|
: ['#2c5a7a', '#64dcff', '#595f68', '#9299a2', '#a03030', '#8a6a10', '#4caf50', '#ff9800', '#9c27b0', '#00bcd4'],
|
|
bgTransparent: 'transparent',
|
|
};
|
|
}
|
|
|
|
function initCharts() {
|
|
if (chartLine) chartLine.dispose();
|
|
if (chartBar) chartBar.dispose();
|
|
if (chartDonut) chartDonut.dispose();
|
|
|
|
chartLine = echarts.init(document.getElementById('chart-line'));
|
|
chartBar = echarts.init(document.getElementById('chart-bar'));
|
|
chartDonut = echarts.init(document.getElementById('chart-donut'));
|
|
|
|
renderLineChart([], [], []);
|
|
renderBarChart([], []);
|
|
renderDonutChart([]);
|
|
|
|
window.addEventListener('resize', () => {
|
|
chartLine.resize();
|
|
chartBar.resize();
|
|
chartDonut.resize();
|
|
});
|
|
}
|
|
|
|
function renderLineChart(months, massData, valueData) {
|
|
const c = getThemeColors();
|
|
|
|
const formattedMonths = months.map(m => formatMonthDisplay(m));
|
|
// Show every nth month label to prevent crowding
|
|
const step = months.length > 24 ? 6 : (months.length > 12 ? 3 : 1);
|
|
|
|
const xLabels = formattedMonths.map((label, idx) =>
|
|
idx % step === 0 ? label : ''
|
|
);
|
|
|
|
chartLine.setOption({
|
|
backgroundColor: c.bgTransparent,
|
|
textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross' }
|
|
},
|
|
legend: {
|
|
data: ['Mass (kg)', 'Value (DKK)'],
|
|
textStyle: { color: c.textColor },
|
|
top: 0
|
|
},
|
|
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xLabels,
|
|
axisLine: { lineStyle: { color: c.gridColor } },
|
|
axisLabel: {
|
|
color: c.textColor,
|
|
interval: 0,
|
|
rotate: 0,
|
|
fontSize: 10
|
|
},
|
|
boundaryGap: false,
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'Mass (kg)',
|
|
position: 'left',
|
|
splitLine: { lineStyle: { color: c.gridColor } },
|
|
axisLabel: {
|
|
color: c.accent,
|
|
formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString())
|
|
},
|
|
axisLine: { show: true, lineStyle: { color: c.accent } },
|
|
nameTextStyle: { color: c.accent, padding: [0, 0, 0, 0] }
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: 'Value (DKK)',
|
|
position: 'right',
|
|
splitLine: { show: false },
|
|
axisLabel: {
|
|
color: c.secondary,
|
|
formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString())
|
|
},
|
|
axisLine: { show: true, lineStyle: { color: c.secondary } },
|
|
nameTextStyle: { color: c.secondary }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'Mass (kg)',
|
|
type: 'line',
|
|
yAxisIndex: 0,
|
|
smooth: true,
|
|
symbol: 'none',
|
|
lineStyle: { width: 2 },
|
|
itemStyle: { color: c.accent },
|
|
areaStyle: { opacity: 0.05 },
|
|
data: massData,
|
|
},
|
|
{
|
|
name: 'Value (DKK)',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
symbol: 'none',
|
|
lineStyle: { width: 2 },
|
|
itemStyle: { color: c.secondary },
|
|
areaStyle: { opacity: 0.05 },
|
|
data: valueData,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
function renderDonutChart(data) {
|
|
const c = getThemeColors();
|
|
|
|
// Limit to top 8 for clarity
|
|
const limitedData = data.slice(0, 8);
|
|
if (data.length > 8) {
|
|
const otherSum = data.slice(8).reduce((sum, d) => sum + (d.value || 0), 0);
|
|
if (otherSum > 0) {
|
|
limitedData.push({ name: 'Other', value: otherSum });
|
|
}
|
|
}
|
|
|
|
chartDonut.setOption({
|
|
backgroundColor: c.bgTransparent,
|
|
textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor },
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} DKK'
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: 0,
|
|
textStyle: { color: c.textColor },
|
|
type: 'scroll',
|
|
padding: [20, 0, 0, 0]
|
|
},
|
|
grid: { bottom: '30%' },
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: true,
|
|
itemStyle: {
|
|
borderRadius: 3,
|
|
borderColor: c.isDark ? '#07070d' : '#f4f1ec',
|
|
borderWidth: 1,
|
|
},
|
|
label: { show: false },
|
|
emphasis: {
|
|
label: { show: false },
|
|
},
|
|
data: limitedData,
|
|
color: c.palette,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
function renderBarChart(months, seriesData) {
|
|
const c = getThemeColors();
|
|
|
|
const formattedMonths = months.map(m => formatMonthDisplay(m));
|
|
const step = months.length > 24 ? 6 : (months.length > 12 ? 3 : 1);
|
|
const xLabels = formattedMonths.map((label, idx) =>
|
|
idx % step === 0 ? label : ''
|
|
);
|
|
|
|
// Limit to top 5 species for readability
|
|
const limitedSeries = seriesData.slice(0, 5);
|
|
|
|
chartBar.setOption({
|
|
backgroundColor: c.bgTransparent,
|
|
textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
},
|
|
legend: {
|
|
textStyle: { color: c.textColor },
|
|
top: 0,
|
|
type: 'scroll',
|
|
maxItems: 5
|
|
},
|
|
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xLabels,
|
|
axisLine: { lineStyle: { color: c.gridColor } },
|
|
axisLabel: {
|
|
color: c.textColor,
|
|
interval: 0,
|
|
fontSize: 10,
|
|
rotate: 0
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: { lineStyle: { color: c.gridColor } },
|
|
axisLabel: {
|
|
color: c.textColor,
|
|
formatter: (val) => val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()
|
|
},
|
|
},
|
|
series: limitedSeries.map(s => ({
|
|
...s,
|
|
barMaxWidth: 30
|
|
})),
|
|
color: c.palette,
|
|
});
|
|
}
|
|
|
|
async function fetchData(endpoint) {
|
|
try {
|
|
const res = await fetch(endpoint);
|
|
if (!res.ok) throw new Error(`API Error: ${res.status}`);
|
|
return await res.json();
|
|
} catch (err) {
|
|
console.error(err);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function populateSelect(id, items, codeKey, labelKey) {
|
|
const sel = document.getElementById(id);
|
|
sel.innerHTML = '<option value="">All</option>';
|
|
items.forEach((item) => {
|
|
const opt = document.createElement('option');
|
|
opt.value = item[codeKey];
|
|
opt.textContent = item[labelKey];
|
|
sel.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
function populateMonthSelect(selectId, months) {
|
|
const sel = document.getElementById(selectId);
|
|
sel.innerHTML = '<option value="">All</option>';
|
|
months.forEach((m) => {
|
|
const opt = document.createElement('option');
|
|
opt.value = m;
|
|
opt.textContent = formatMonthDisplay(m);
|
|
sel.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
async function populateDropdowns() {
|
|
showLoading(true);
|
|
const [speciesList, zonesList, gearList, summaryData] = await Promise.all([
|
|
fetchData('/api/species'),
|
|
fetchData('/api/zones'),
|
|
fetchData('/api/gear'),
|
|
fetchData('/api/summary'),
|
|
]);
|
|
|
|
if (speciesList) {
|
|
populateSelect('species', speciesList, 'code', 'label');
|
|
}
|
|
|
|
if (zonesList) {
|
|
populateSelect('zone', zonesList, 'code', 'label');
|
|
}
|
|
|
|
if (gearList) {
|
|
populateSelect('gear', gearList, 'code', 'label');
|
|
}
|
|
|
|
if (summaryData && summaryData.monthly) {
|
|
allMonths = summaryData.monthly.map((m) => m.month).sort();
|
|
|
|
populateMonthSelect('month_from', allMonths);
|
|
populateMonthSelect('month_to', allMonths);
|
|
|
|
// Default to last 6 months
|
|
const fromIdx = Math.max(0, allMonths.length - MONTHS_TO_SHOW_DEFAULT);
|
|
document.getElementById('month_from').value = allMonths[fromIdx];
|
|
document.getElementById('month_to').value = allMonths[allMonths.length - 1];
|
|
}
|
|
|
|
showLoading(false);
|
|
}
|
|
|
|
async function updateCharts() {
|
|
showLoading(true);
|
|
hideEmptyState();
|
|
|
|
const species = document.getElementById('species').value;
|
|
const zone = document.getElementById('zone').value;
|
|
const gear = document.getElementById('gear').value;
|
|
const monthFrom = document.getElementById('month_from').value;
|
|
const monthTo = document.getElementById('month_to').value;
|
|
|
|
// Validation: prevent from > to
|
|
if (monthFrom && monthTo && monthFrom > monthTo) {
|
|
alert('From date cannot be greater than To date.');
|
|
showLoading(false);
|
|
return;
|
|
}
|
|
|
|
const landingsParams = new URLSearchParams();
|
|
if (species) landingsParams.append('species', species);
|
|
if (zone) landingsParams.append('zone', zone);
|
|
if (gear) landingsParams.append('gear', gear);
|
|
if (monthFrom) landingsParams.append('month_from', monthFrom);
|
|
if (monthTo) landingsParams.append('month_to', monthTo);
|
|
landingsParams.append('limit', '10000');
|
|
|
|
const summaryParams = new URLSearchParams();
|
|
if (species) summaryParams.append('species', species);
|
|
if (monthFrom) summaryParams.append('month_from', monthFrom);
|
|
if (monthTo) summaryParams.append('month_to', monthTo);
|
|
|
|
const [landings, summary] = await Promise.all([
|
|
fetchData(`/api/landings?${landingsParams.toString()}`),
|
|
fetchData(`/api/summary?${summaryParams.toString()}`),
|
|
]);
|
|
|
|
showLoading(false);
|
|
|
|
if ((!landings || landings.length === 0) && (!summary || !summary.monthly || summary.monthly.length === 0)) {
|
|
showEmptyState();
|
|
return;
|
|
}
|
|
|
|
hideEmptyState();
|
|
document.getElementById('charts-grid').style.display = 'grid';
|
|
|
|
setTimeout(() => {
|
|
chartLine.resize();
|
|
chartBar.resize();
|
|
chartDonut.resize();
|
|
}, 0);
|
|
|
|
// --- Line Chart ---
|
|
if (summary && summary.monthly) {
|
|
const months = summary.monthly.map((m) => m.month);
|
|
const massData = summary.monthly.map((m) => m.total_mass || 0);
|
|
const valueData = summary.monthly.map((m) => m.total_value || 0);
|
|
renderLineChart(months, massData, valueData);
|
|
} else {
|
|
renderLineChart([], [], []);
|
|
}
|
|
|
|
// --- Donut Chart ---
|
|
if (summary && summary.top_species && summary.top_species.length > 0) {
|
|
const donutData = summary.top_species.map((s) => ({
|
|
name: s.species_label,
|
|
value: s.total_value || 0,
|
|
}));
|
|
renderDonutChart(donutData);
|
|
} else {
|
|
renderDonutChart([]);
|
|
}
|
|
|
|
// --- Bar Chart ---
|
|
if (summary && summary.top_species && summary.top_species.length > 0 && landings && landings.length > 0) {
|
|
const months = [...new Set(landings.map((l) => l.month))].sort();
|
|
const topSpecies = summary.top_species;
|
|
|
|
const barSeries = topSpecies.map((sp) => ({
|
|
name: sp.species_label,
|
|
type: 'bar',
|
|
stack: 'total',
|
|
emphasis: { focus: 'series' },
|
|
data: months.map((m) => {
|
|
const row = landings.find(
|
|
(l) =>
|
|
l.month === m &&
|
|
l.species_code === sp.species_code &&
|
|
l.measure_code === 'VALUE'
|
|
);
|
|
return row && row.value ? row.value : 0;
|
|
}),
|
|
}));
|
|
|
|
renderBarChart(months, barSeries);
|
|
} else {
|
|
renderBarChart([], []);
|
|
}
|
|
}
|
|
|
|
function showLoading(show) {
|
|
const overlay = document.getElementById('loading-overlay');
|
|
if (show) {
|
|
overlay.classList.remove('hidden');
|
|
} else {
|
|
overlay.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function showEmptyState() {
|
|
document.getElementById('charts-grid').style.display = 'none';
|
|
document.getElementById('empty-state').style.display = 'flex';
|
|
}
|
|
|
|
function hideEmptyState() {
|
|
document.getElementById('empty-state').style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('apply-filters').addEventListener('click', updateCharts);
|
|
|
|
// Theme Logic
|
|
(() => {
|
|
function currentSystemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'tokyo'
|
|
: 'light';
|
|
}
|
|
const btn = document.getElementById('theme-toggle');
|
|
if (btn) {
|
|
btn.addEventListener('click', () => {
|
|
const current =
|
|
document.documentElement.getAttribute('data-theme') || 'light';
|
|
const next = current === 'light' ? 'tokyo' : 'light';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('poc-theme', next);
|
|
|
|
initCharts();
|
|
updateCharts();
|
|
});
|
|
}
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', () => {
|
|
if (!localStorage.getItem('poc-theme')) {
|
|
document.documentElement.setAttribute('data-theme', currentSystemTheme());
|
|
initCharts();
|
|
updateCharts();
|
|
}
|
|
});
|
|
})();
|
|
|
|
// Init
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initCharts();
|
|
populateDropdowns().then(updateCharts);
|
|
});
|