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

damn frontend

Browse Source
This commit is contained in:
bartal-lsn
2026-08-20 23:21:41 +01:00
parent 8630a61abd
commit 1af25a20fe
4 changed files with 207 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+188 -65
View File
@@ -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 = '<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);
sel.innerHTML = '<option value="">All</option>';
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;