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

add nicer theme, and next update in navbar

Browse Source
This commit is contained in:
bartal-lsn
2026-08-25 21:58:46 +01:00
parent 225aa9b1c6
commit 3ca28677ec
3 changed files with 177 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+156 -51
View File
@@ -26,18 +26,85 @@ function formatDKKShort(value) {
return value.toString(); return value.toString();
} }
function getNextUpdateDate() {
const now = new Date();
const currentMonth = now.getMonth();
const currentYear = now.getFullYear();
const today = now.getDate();
let updateMonth = currentMonth;
let updateYear = currentYear;
if (today > 28) {
updateMonth++;
if (updateMonth > 11) {
updateMonth = 0;
updateYear++;
}
}
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return `${monthNames[updateMonth]} ${updateYear}`;
}
function updateNavbarUpdateDate() {
const container = document.getElementById('update-date-display');
if (container) {
container.textContent = `Next update: ${getNextUpdateDate()} 28`;
}
}
function getThemeColors() { function getThemeColors() {
const theme = document.documentElement.getAttribute('data-theme'); const theme = document.documentElement.getAttribute('data-theme');
const isDark = theme === 'macchiato'; const isDark = theme === 'macchiato';
if (isDark) {
return { return {
isDark, isDark: true,
textColor: isDark ? '#e8f4ff' : '#1a1d22', textColor: '#cdd6f4',
gridColor: isDark ? 'rgba(100, 220, 255, 0.1)' : 'rgba(26, 29, 34, 0.1)', subTextColor: '#bac2de',
accent: isDark ? '#64dcff' : '#2c5a7a', gridColor: 'rgba(180, 185, 200, 0.12)',
secondary: isDark ? '#2c5a7a' : '#64dcff', accent: '#89b4fa',
palette: isDark secondary: '#94e2d5',
? ['#64dcff', '#2c5a7a', '#a3b3cc', '#7886a0', '#d93d3d', '#dcad2b', '#4caf50', '#ff9800', '#9c27b0', '#00bcd4'] palette: [
: ['#2c5a7a', '#64dcff', '#595f68', '#9299a2', '#a03030', '#8a6a10', '#4caf50', '#ff9800', '#9c27b0', '#00bcd4'], '#89b4fa',
'#fab387',
'#a6e3a1',
'#f9e2af',
'#f5c2e7',
'#cba6f7',
'#f38ba8',
'#eba0ac',
'#94e2d5',
'#89dceb',
],
tooltipBg: 'rgba(30, 32, 48, 0.95)',
tooltipBorder: 'rgba(180, 185, 200, 0.2)',
bgTransparent: 'transparent',
};
}
return {
isDark: false,
textColor: '#45475a',
subTextColor: '#7f849c',
gridColor: 'rgba(73, 77, 113, 0.08)',
accent: '#89b4fa',
secondary: '#94e2d5',
palette: [
'#89b4fa',
'#fab387',
'#a6e3a1',
'#f9e2af',
'#f5c2e7',
'#cba6f7',
'#f38ba8',
'#eba0ac',
'#94e2d5',
'#89dceb',
],
tooltipBg: 'rgba(255, 255, 255, 0.98)',
tooltipBorder: 'rgba(73, 77, 113, 0.15)',
bgTransparent: 'transparent', bgTransparent: 'transparent',
}; };
} }
@@ -77,34 +144,42 @@ function renderLineChart(months, massData, valueData) {
textStyle: { fontFamily: 'Noto Sans', color: c.textColor }, textStyle: { fontFamily: 'Noto Sans', color: c.textColor },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'cross' } axisPointer: {
type: 'cross',
lineStyle: { color: c.gridColor, type: 'dashed' },
crossStyle: { color: c.gridColor },
},
backgroundColor: c.tooltipBg,
borderColor: c.tooltipBorder,
borderWidth: 1,
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
}, },
legend: { legend: {
data: ['Mass (kg)', 'Value (DKK)'], data: ['Mass (kg)', 'Value (DKK)'],
textStyle: { color: c.textColor }, textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
top: 0, top: 0,
left: 'center', left: 'center',
orient: 'horizontal' orient: 'horizontal',
}, },
grid: { grid: {
left: '8%', left: '8%',
right: '10%', right: '10%',
bottom: 50, bottom: 50,
containLabel: true, containLabel: true,
top: '18%' top: '18%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xLabels, data: xLabels,
axisLine: { lineStyle: { color: c.gridColor } }, axisLine: { lineStyle: { color: c.gridColor } },
axisLabel: { axisLabel: {
color: c.textColor, color: c.subTextColor,
interval: 0, interval: 0,
rotate: 0, rotate: 0,
fontSize: 10, fontSize: 10,
margin: 8, margin: 8,
overflow: 'break', overflow: 'break',
width: 70 width: 70,
}, },
boundaryGap: false, boundaryGap: false,
}, },
@@ -115,12 +190,12 @@ function renderLineChart(months, massData, valueData) {
position: 'left', position: 'left',
splitLine: { lineStyle: { color: c.gridColor } }, splitLine: { lineStyle: { color: c.gridColor } },
axisLabel: { axisLabel: {
color: c.accent, color: c.subTextColor,
formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()), formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()),
margin: 8 margin: 8,
}, },
axisLine: { show: true, lineStyle: { color: c.accent } }, axisLine: { show: true, lineStyle: { color: c.gridColor } },
nameTextStyle: { color: c.accent, padding: [0, 0, 0, 0] } nameTextStyle: { color: c.accent, padding: [0, 0, 0, 0] },
}, },
{ {
type: 'value', type: 'value',
@@ -128,13 +203,13 @@ function renderLineChart(months, massData, valueData) {
position: 'right', position: 'right',
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { axisLabel: {
color: c.secondary, color: c.subTextColor,
formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()), formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()),
margin: 8 margin: 8,
},
axisLine: { show: true, lineStyle: { color: c.gridColor } },
nameTextStyle: { color: c.secondary, padding: [0, 10, 0, 0] },
}, },
axisLine: { show: true, lineStyle: { color: c.secondary } },
nameTextStyle: { color: c.secondary, padding: [0, 10, 0, 0] }
}
], ],
series: [ series: [
{ {
@@ -143,9 +218,18 @@ function renderLineChart(months, massData, valueData) {
yAxisIndex: 0, yAxisIndex: 0,
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
lineStyle: { width: 2 }, lineStyle: { width: 2, opacity: 0.9 },
itemStyle: { color: c.accent }, itemStyle: { color: c.accent },
areaStyle: { opacity: 0.05 }, areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: c.isDark ? 'rgba(137, 180, 250, 0.22)' : 'rgba(137, 180, 250, 0.18)' },
{ offset: 1, color: 'rgba(137, 180, 250, 0)' },
],
},
},
data: massData, data: massData,
}, },
{ {
@@ -154,9 +238,18 @@ function renderLineChart(months, massData, valueData) {
yAxisIndex: 1, yAxisIndex: 1,
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
lineStyle: { width: 2 }, lineStyle: { width: 2, opacity: 0.9 },
itemStyle: { color: c.secondary }, itemStyle: { color: c.secondary },
areaStyle: { opacity: 0.05 }, areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: c.isDark ? 'rgba(148, 226, 213, 0.22)' : 'rgba(148, 226, 213, 0.18)' },
{ offset: 1, color: 'rgba(148, 226, 213, 0)' },
],
},
},
data: valueData, data: valueData,
}, },
], ],
@@ -183,10 +276,14 @@ function renderTopSpeciesChart(data) {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'shadow' }, axisPointer: { type: 'shadow' },
backgroundColor: c.tooltipBg,
borderColor: c.tooltipBorder,
borderWidth: 1,
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
formatter: (params) => { formatter: (params) => {
const p = params[0]; const p = params[0];
return `${p.name}<br/>${formatDKK(p.value)}`; return `${p.name}<br/>${formatDKK(p.value)}`;
} },
}, },
grid: { grid: {
left: '5%', left: '5%',
@@ -199,7 +296,7 @@ function renderTopSpeciesChart(data) {
type: 'value', type: 'value',
splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } }, splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
axisLabel: { axisLabel: {
color: c.textColor, color: c.subTextColor,
formatter: (val) => formatDKKShort(val), formatter: (val) => formatDKKShort(val),
fontSize: 9, fontSize: 9,
hideOverlap: true, hideOverlap: true,
@@ -224,25 +321,27 @@ function renderTopSpeciesChart(data) {
series: [ series: [
{ {
type: 'bar', type: 'bar',
data: values, data: values.map((v, i) => ({
barMaxWidth: 28, value: v,
barGap: '30%',
itemStyle: { itemStyle: {
color: c.palette[i],
borderRadius: [0, 4, 4, 0], borderRadius: [0, 4, 4, 0],
}, },
})),
barMaxWidth: 28,
barGap: '30%',
label: { label: {
show: true, show: true,
position: 'right', position: 'right',
formatter: (params) => formatDKKShort(params.value), formatter: (params) => formatDKKShort(params.value),
color: c.textColor, color: c.subTextColor,
fontSize: 10, fontSize: 10,
distance: 8, distance: 8,
overflow: 'break', overflow: 'break',
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 0,
shadowColor: 'rgba(0,0,0,0.3)',
}, },
}, },
}, },
@@ -274,6 +373,10 @@ function renderBarChart(months, seriesData) {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'shadow' }, axisPointer: { type: 'shadow' },
backgroundColor: c.tooltipBg,
borderColor: c.tooltipBorder,
borderWidth: 1,
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
formatter: (params) => { formatter: (params) => {
const month = params[0]?.axisValue || ''; const month = params[0]?.axisValue || '';
let html = `<strong>${month}</strong><br/>`; let html = `<strong>${month}</strong><br/>`;
@@ -283,59 +386,63 @@ function renderBarChart(months, seriesData) {
}); });
return html; return html;
}, },
extraCssText: 'background: rgba(0,0,0,0.8); padding: 8px;'
}, },
legend: { legend: {
textStyle: { color: c.textColor }, textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
top: 0, top: 0,
left: 'center', left: 'center',
orient: 'horizontal', orient: 'horizontal',
type: 'scroll', type: 'scroll',
maxItems: 5, maxItems: 5,
padding: [0, 0, 0, 0], padding: [0, 0, 0, 0],
itemGap: 10 itemGap: 10,
}, },
grid: { grid: {
left: '8%', left: '8%',
right: '5%', right: '5%',
bottom: 65, bottom: 65,
containLabel: true, containLabel: true,
top: '25%' top: '25%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xLabels, data: xLabels,
axisLine: { lineStyle: { color: c.gridColor } }, axisLine: { lineStyle: { color: c.gridColor } },
axisLabel: { axisLabel: {
color: c.textColor, color: c.subTextColor,
interval: 0, interval: 0,
fontSize: 9, fontSize: 9,
rotate: 0, rotate: 0,
margin: 8, margin: 8,
overflow: 'break', overflow: 'break',
width: 60 width: 60,
}, },
axisTick: { show: false } axisTick: { show: false },
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } }, splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
axisLabel: { axisLabel: {
color: c.textColor, color: c.subTextColor,
formatter: (val) => formatDKKShort(val), formatter: (val) => formatDKKShort(val),
margin: 8 margin: 8,
}, },
nameTextStyle: { padding: [0, 0, 0, 10] } nameTextStyle: { padding: [0, 0, 0, 10] },
}, },
series: seriesData.map((s, idx) => ({ series: seriesData.map((s, idx) => ({
...s, ...s,
barMaxWidth: barMaxWidth, barMaxWidth: barMaxWidth,
itemStyle: { itemStyle: {
color: c.palette[idx % c.palette.length] color: c.palette[idx % c.palette.length],
}, },
label: { label: {
show: false show: false,
} },
emphasis: {
itemStyle: {
shadowBlur: 0,
},
},
})), })),
}); });
} }
@@ -652,7 +759,6 @@ function hideEmptyState() {
document.getElementById('apply-filters').addEventListener('click', updateCharts); document.getElementById('apply-filters').addEventListener('click', updateCharts);
// Close dropdowns when clicking outside
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
if (!e.target.closest('.filter-group.multi-select')) { if (!e.target.closest('.filter-group.multi-select')) {
document.querySelectorAll('.checkbox-dropdown-list.open').forEach(el => { document.querySelectorAll('.checkbox-dropdown-list.open').forEach(el => {
@@ -693,8 +799,8 @@ document.addEventListener('click', (e) => {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initCharts(); initCharts();
updateNavbarUpdateDate();
// Setup click handlers for dropdown toggles
['species', 'zone', 'gear'].forEach(id => { ['species', 'zone', 'gear'].forEach(id => {
const container = document.getElementById(id); const container = document.getElementById(id);
if (container) { if (container) {
@@ -706,7 +812,6 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
} }
// Listen for changes inside the dropdown list
const list = container.querySelector('.checkbox-dropdown-list'); const list = container.querySelector('.checkbox-dropdown-list');
if (list) { if (list) {
list.addEventListener('change', () => { list.addEventListener('change', () => {
static/index.html
+1
View File
@@ -27,6 +27,7 @@
<a href="/" class="nav-brand"> <a href="/" class="nav-brand">
FLÓ <span class="brand-sep">/</span> <span class="brand-sub">HAGFISH</span> FLÓ <span class="brand-sep">/</span> <span class="brand-sub">HAGFISH</span>
</a> </a>
<div class="update-date-display" id="update-date-display"></div>
</nav> </nav>
<main class="page-body"> <main class="page-body">
static/style.css
+18
View File
@@ -141,6 +141,21 @@ nav {
} }
.nav-brand:hover { color: var(--accent); border-bottom: none; } .nav-brand:hover { color: var(--accent); border-bottom: none; }
.update-date-display {
grid-column: 3;
justify-self: end;
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ink-muted);
white-space: nowrap;
padding: 0.35rem 0.8rem;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--input-bg);
}
.brand-sep { font-weight: 300; color: var(--ink-dim); } .brand-sep { font-weight: 300; color: var(--ink-dim); }
.brand-sub { .brand-sub {
font-weight: 400; font-weight: 400;
@@ -481,6 +496,9 @@ footer {
.dashboard { .dashboard {
padding: 1.5rem; padding: 1.5rem;
} }
.update-date-display {
display: none;
}
} }
@media (max-width: 460px) { @media (max-width: 460px) {