FLO/hagfish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix fronted

Browse Source
This commit is contained in:
bartal-lsn
2026-08-21 09:04:21 +01:00
parent 1af25a20fe
commit 0dcb7d1414
3 changed files with 326 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+179 -105
View File
@@ -12,6 +12,20 @@ function formatMonthDisplay(monthCode) {
return `${monthNames[monthIdx]} ${year}`;
}
function formatDKK(value) {
return new Intl.NumberFormat('da-DK', {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(value) + ' DKK';
}
function formatDKKShort(value) {
if (value >= 1e9) return (value / 1e9).toFixed(1).replace('.', ',') + ' mia.';
if (value >= 1e6) return (value / 1e6).toFixed(1).replace('.', ',') + ' mio.';
if (value >= 1e3) return (value / 1e3).toFixed(0) + ' tus.';
return value.toString();
}
function getThemeColors() {
const theme = document.documentElement.getAttribute('data-theme');
const isDark = theme === 'tokyo';
@@ -39,7 +53,7 @@ function initCharts() {
renderLineChart([], [], []);
renderBarChart([], []);
renderDonutChart([]);
renderTopSpeciesChart([]);
window.addEventListener('resize', () => {
chartLine.resize();
@@ -52,7 +66,6 @@ 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) =>
@@ -137,49 +150,85 @@ function renderLineChart(months, massData, valueData) {
});
}
function renderDonutChart(data) {
function renderTopSpeciesChart(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 });
}
const top5 = data.slice(0, 5);
if (top5.length === 0) {
chartDonut.setOption({ series: [] });
return;
}
const sorted = [...top5].sort((a, b) => a.value - b.value);
const speciesLabels = sorted.map(d => d.name);
const values = sorted.map(d => d.value);
chartDonut.setOption({
backgroundColor: c.bgTransparent,
textStyle: { fontFamily: 'JetBrains Mono', color: c.textColor },
tooltip: {
trigger: 'item',
formatter: '{b}: {c} DKK'
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: (params) => {
const p = params[0];
return `${p.name}<br/>${formatDKK(p.value)}`;
}
},
legend: {
orient: 'horizontal',
bottom: 0,
textStyle: { color: c.textColor },
type: 'scroll',
padding: [20, 0, 0, 0]
grid: {
left: '3%',
right: '8%',
bottom: '8%',
top: '5%',
containLabel: true,
},
xAxis: {
type: 'value',
splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
axisLabel: {
color: c.textColor,
formatter: (val) => formatDKKShort(val),
fontSize: 9,
hideOverlap: true,
},
axisLine: { show: false },
axisTick: { show: false },
},
yAxis: {
type: 'category',
data: speciesLabels,
axisLine: { lineStyle: { color: c.gridColor } },
axisTick: { show: false },
axisLabel: {
color: c.textColor,
fontSize: 11,
fontWeight: 'bold',
width: 120,
overflow: 'truncate',
},
},
grid: { bottom: '30%' },
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
type: 'bar',
data: values,
barMaxWidth: 28,
itemStyle: {
borderRadius: 3,
borderColor: c.isDark ? '#07070d' : '#f4f1ec',
borderWidth: 1,
borderRadius: [0, 4, 4, 0],
},
label: {
show: true,
position: 'right',
formatter: (params) => formatDKKShort(params.value),
color: c.textColor,
fontSize: 11,
distance: 6,
},
label: { show: false },
emphasis: {
label: { show: false },
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)',
},
},
data: limitedData,
color: c.palette,
},
],
});
@@ -188,14 +237,20 @@ function renderDonutChart(data) {
function renderBarChart(months, seriesData) {
const c = getThemeColors();
if (months.length === 0 || seriesData.length === 0) {
chartBar.setOption({ series: [] });
return;
}
const formattedMonths = months.map(m => formatMonthDisplay(m));
const step = months.length > 24 ? 6 : (months.length > 12 ? 3 : 1);
const step = months.length > 36 ? 12 : (months.length > 18 ? 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);
const chartWidth = chartBar.getWidth();
const barMaxWidth = Math.max(15, Math.floor((chartWidth * 0.7) / (months.length * 1.5)));
chartBar.setOption({
backgroundColor: c.bgTransparent,
@@ -203,14 +258,32 @@ function renderBarChart(months, seriesData) {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: (params) => {
const month = params[0]?.axisValue || '';
let html = `<strong>${month}</strong><br/>`;
params.forEach(p => {
const val = p.value || 0;
html += `${p.marker} ${p.seriesName}: ${formatDKK(val)}<br/>`;
});
return html;
},
extraCssText: 'background: rgba(0,0,0,0.8); padding: 8px;'
},
legend: {
textStyle: { color: c.textColor },
top: 0,
type: 'scroll',
maxItems: 5
maxItems: 5,
padding: [0, 0, 0, 0],
itemGap: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true,
top: '20%'
},
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
xAxis: {
type: 'category',
data: xLabels,
@@ -218,23 +291,28 @@ function renderBarChart(months, seriesData) {
axisLabel: {
color: c.textColor,
interval: 0,
fontSize: 10,
rotate: 0
fontSize: 9,
rotate: 0,
margin: 12
},
axisTick: { show: false }
},
yAxis: {
type: 'value',
splitLine: { lineStyle: { color: c.gridColor } },
splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
axisLabel: {
color: c.textColor,
formatter: (val) => val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()
formatter: (val) => formatDKKShort(val)
},
nameTextStyle: { padding: [0, 0, 0, 10] }
},
series: limitedSeries.map(s => ({
series: seriesData.map((s, idx) => ({
...s,
barMaxWidth: 30
barMaxWidth: barMaxWidth,
itemStyle: {
color: c.palette[idx % c.palette.length]
}
})),
color: c.palette,
});
}
@@ -298,7 +376,6 @@ async function populateDropdowns() {
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];
@@ -317,38 +394,84 @@ 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);
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()}`),
const [summary, monthlyBreakdown] = await Promise.all([
fetchData(`/api/summary?${summaryParams.toString()}`),
fetchData(`/api/summary/monthly-breakdown?${summaryParams.toString()}`),
]);
showLoading(false);
if ((!landings || landings.length === 0) && (!summary || !summary.monthly || summary.monthly.length === 0)) {
if (!summary || !summary.monthly || summary.monthly.length === 0) {
showLoading(false);
showEmptyState();
return;
}
const months = summary.monthly.map(m => m.month).sort();
const topSpecies = summary.top_species ? summary.top_species.slice(0, 5) : [];
if (monthlyBreakdown && monthlyBreakdown.length > 0 && topSpecies.length > 0) {
const speciesMonthlyMap = {};
monthlyBreakdown.forEach(row => {
if (!speciesMonthlyMap[row.species_code]) {
speciesMonthlyMap[row.species_code] = {};
}
speciesMonthlyMap[row.species_code][row.month] = row.total_value || 0;
});
const topSpeciesCodes = topSpecies.map(s => s.species_code);
const filteredBreakdown = monthlyBreakdown.filter(row =>
topSpeciesCodes.includes(row.species_code)
);
const barSeries = topSpecies.map(sp => {
const data = months.map(month => {
const matching = filteredBreakdown.find(
row => row.month === month && row.species_code === sp.species_code
);
return matching ? matching.total_value || 0 : 0;
});
return {
name: sp.species_label,
type: 'bar',
stack: 'total',
emphasis: { focus: 'series' },
data: data,
};
});
renderBarChart(months, barSeries);
} else {
renderBarChart([], []);
}
const massData = summary.monthly.map((m) => m.total_mass || 0);
const valueData = summary.monthly.map((m) => m.total_value || 0);
renderLineChart(months, massData, valueData);
if (summary.top_species && summary.top_species.length > 0) {
const topData = summary.top_species.map((s) => ({
name: s.species_label,
value: s.total_value || 0,
}));
renderTopSpeciesChart(topData);
} else {
renderTopSpeciesChart([]);
}
showLoading(false);
hideEmptyState();
document.getElementById('charts-grid').style.display = 'grid';
@@ -357,53 +480,6 @@ async function updateCharts() {
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) {
@@ -426,7 +502,6 @@ function hideEmptyState() {
document.getElementById('apply-filters').addEventListener('click', updateCharts);
// Theme Logic
(() => {
function currentSystemTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -457,7 +532,6 @@ document.getElementById('apply-filters').addEventListener('click', updateCharts)
});
})();
// Init
document.addEventListener('DOMContentLoaded', () => {
initCharts();
populateDropdowns().then(updateCharts);