diff --git a/src/api.rs b/src/api.rs index ac0f8fa..e6fc9a8 100644 --- a/src/api.rs +++ b/src/api.rs @@ -308,12 +308,13 @@ async fn get_summary( })? .collect::, duckdb::Error>>()?; + // Filter out "TOTAL" species from top species let top_sql = format!( "SELECT species_code, \ COALESCE(MAX(species_label), species_code) AS species_label, \ SUM(CASE WHEN measure_code = 'VALUE' THEN value END) AS total_value, \ SUM(CASE WHEN measure_code = 'MASS' THEN value END) AS total_mass \ - FROM landings WHERE 1=1{where_clause} \ + FROM landings WHERE 1=1{where_clause} AND species_code != 'TOTAL' \ GROUP BY species_code, species_label \ ORDER BY total_value DESC NULLS LAST \ LIMIT 10" diff --git a/static/app.js b/static/app.js index c3be181..4505084 100644 --- a/static/app.js +++ b/static/app.js @@ -1,5 +1,16 @@ 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'); @@ -17,28 +28,6 @@ function getThemeColors() { }; } -function getCommonOptions() { - const c = getThemeColors(); - return { - backgroundColor: c.bgTransparent, - textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor }, - tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, - legend: { textStyle: { color: c.textColor }, top: 10 }, - grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, - xAxis: { - type: 'category', - axisLine: { lineStyle: { color: c.gridColor } }, - axisLabel: { color: c.textColor }, - data: [], - }, - yAxis: { - type: 'value', - splitLine: { lineStyle: { color: c.gridColor } }, - axisLabel: { color: c.textColor }, - }, - }; -} - function initCharts() { if (chartLine) chartLine.dispose(); if (chartBar) chartBar.dispose(); @@ -61,25 +50,87 @@ function initCharts() { 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({ - ...getCommonOptions(), - tooltip: { trigger: 'axis' }, - xAxis: { ...getCommonOptions().xAxis, data: months }, + 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.08 }, + 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.08 }, + areaStyle: { opacity: 0.05 }, data: valueData, }, ], @@ -88,26 +139,46 @@ function renderLineChart(months, massData, 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' }, - legend: { orient: 'vertical', left: 'left', textStyle: { 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: ['40%', '70%'], - avoidLabelOverlap: false, + radius: ['50%', '70%'], + avoidLabelOverlap: true, itemStyle: { - borderRadius: 5, + borderRadius: 3, borderColor: c.isDark ? '#07070d' : '#f4f1ec', - borderWidth: 2, + borderWidth: 1, }, - label: { show: false, position: 'center' }, + label: { show: false }, emphasis: { - label: { show: true, fontSize: 16, fontWeight: 'bold', color: c.textColor }, + label: { show: false }, }, - data: data, + data: limitedData, color: c.palette, }, ], @@ -116,10 +187,53 @@ function renderDonutChart(data) { 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({ - ...getCommonOptions(), - xAxis: { ...getCommonOptions().xAxis, data: months }, - series: seriesData, + 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, }); } @@ -146,6 +260,17 @@ function populateSelect(id, items, codeKey, labelKey) { }); } +function populateMonthSelect(selectId, months) { + const sel = document.getElementById(selectId); + sel.innerHTML = ''; + 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([ @@ -169,18 +294,14 @@ async function populateDropdowns() { if (summaryData && summaryData.monthly) { allMonths = summaryData.monthly.map((m) => m.month).sort(); - const fillMonthSelect = (selectId) => { - const sel = document.getElementById(selectId); - sel.innerHTML = ''; - allMonths.forEach((m) => { - const opt = document.createElement('option'); - opt.value = m; - opt.textContent = m; - sel.appendChild(opt); - }); - }; - fillMonthSelect('month_from'); - fillMonthSelect('month_to'); + + 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); @@ -196,6 +317,13 @@ async function updateCharts() { 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); @@ -230,7 +358,7 @@ async function updateCharts() { chartDonut.resize(); }, 0); - // --- Line Chart (from filtered summary) --- + // --- Line Chart --- if (summary && summary.monthly) { const months = summary.monthly.map((m) => m.month); const massData = summary.monthly.map((m) => m.total_mass || 0); @@ -240,9 +368,9 @@ async function updateCharts() { renderLineChart([], [], []); } - // --- Donut Chart (from filtered summary top_species) --- + // --- Donut Chart --- if (summary && summary.top_species && summary.top_species.length > 0) { - const donutData = summary.top_species.slice(0, 10).map((s) => ({ + const donutData = summary.top_species.map((s) => ({ name: s.species_label, value: s.total_value || 0, })); @@ -251,18 +379,13 @@ async function updateCharts() { renderDonutChart([]); } - // --- Bar Chart (from filtered landings) --- - if (landings && landings.length > 0) { - const barSpeciesSet = new Set(); - landings.forEach((l) => { - if (l.measure_code === 'VALUE') barSpeciesSet.add(l.species_label); - }); - const barSpecies = [...barSpeciesSet].slice(0, 10); - + // --- 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 = barSpecies.map((sp) => ({ - name: sp, + const barSeries = topSpecies.map((sp) => ({ + name: sp.species_label, type: 'bar', stack: 'total', emphasis: { focus: 'series' }, @@ -270,7 +393,7 @@ async function updateCharts() { const row = landings.find( (l) => l.month === m && - l.species_label === sp && + l.species_code === sp.species_code && l.measure_code === 'VALUE' ); return row && row.value ? row.value : 0; diff --git a/static/index.html b/static/index.html index 18215f9..3705993 100644 --- a/static/index.html +++ b/static/index.html @@ -67,15 +67,15 @@ diff --git a/static/style.css b/static/style.css index 99793c9..8c24fcf 100644 --- a/static/style.css +++ b/static/style.css @@ -260,12 +260,18 @@ nav { border: 1px solid var(--border); border-radius: 2px; padding: 1rem; - height: 350px; position: relative; + min-height: 300px; } .chart-container.full-width { grid-column: span 2; + height: 450px; +} + +.chart-container:nth-child(2), /* Donut */ +.chart-container:nth-child(3) { /* Bar */ + height: 350px; } .chart-title { @@ -305,6 +311,12 @@ nav { } @media (max-width: 820px) { + .charts-grid { + grid-template-columns: 1fr; + } + .chart-container.full-width { + grid-column: span 1; + } nav { gap: 0.5rem; padding: 0.85rem 0.85rem;