damn frontend

src/api.rs

@@ -308,12 +308,13 @@ async fn get_summary(
             })?
             .collect::<std::result::Result<Vec<_>, 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"

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(),
+    backgroundColor: c.bgTransparent,
-    tooltip: { trigger: 'axis' },
+    textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor },
-    xAxis: { ...getCommonOptions().xAxis, data: months },
+    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' },
+    tooltip: {
-    legend: { orient: 'vertical', left: 'left', textStyle: { color: c.textColor } },
+      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%'],
+        radius: ['50%', '70%'],
-        avoidLabelOverlap: false,
+        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(),
+    backgroundColor: c.bgTransparent,
-    xAxis: { ...getCommonOptions().xAxis, data: months },
+    textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor },
-    series: seriesData,
+    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 = '<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([
@@ -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);
+    populateMonthSelect('month_from', allMonths);
-      sel.innerHTML = '<option value="">All</option>';
+    populateMonthSelect('month_to', allMonths);
-      allMonths.forEach((m) => {
+
-        const opt = document.createElement('option');
+    // Default to last 6 months
-        opt.value = m;
+    const fromIdx = Math.max(0, allMonths.length - MONTHS_TO_SHOW_DEFAULT);
-        opt.textContent = m;
+    document.getElementById('month_from').value = allMonths[fromIdx];
-        sel.appendChild(opt);
+    document.getElementById('month_to').value = allMonths[allMonths.length - 1];
-      });
-    };
-    fillMonthSelect('month_from');
-    fillMonthSelect('month_to');
   }
 
   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) ---
+  // --- Bar Chart ---
-  if (landings && landings.length > 0) {
+  if (summary && summary.top_species && summary.top_species.length > 0 && 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);
-
     const months = [...new Set(landings.map((l) => l.month))].sort();
+    const topSpecies = summary.top_species;
 
-    const barSeries = barSpecies.map((sp) => ({
+    const barSeries = topSpecies.map((sp) => ({
-      name: 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;

static/index.html

@@ -67,15 +67,15 @@
       <div id="charts-grid" class="charts-grid" style="display:none;">
         <div class="chart-container full-width">
           <div class="chart-title">Total Landings (Mass & Value)</div>
-          <div id="chart-line" style="width:100%; height:300px;"></div>
+          <div id="chart-line" style="width:100%; height:400px;"></div>
         </div>
         <div class="chart-container">
           <div class="chart-title">Top Species by Value</div>
-          <div id="chart-donut" style="width:100%; height:300px;"></div>
+          <div id="chart-donut" style="width:100%; height:350px;"></div>
         </div>
         <div class="chart-container">
-          <div class="chart-title">Landings by Month (Stacked by Species)</div>
+          <div class="chart-title">Monthly Value by Top Species</div>
-          <div id="chart-bar" style="width:100%; height:300px;"></div>
+          <div id="chart-bar" style="width:100%; height:350px;"></div>
         </div>
       </div>
     </div>

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;