add nicer theme, and next update in navbar
This commit is contained in:
+158
-53
@@ -26,18 +26,85 @@ function formatDKKShort(value) {
|
||||
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() {
|
||||
const theme = document.documentElement.getAttribute('data-theme');
|
||||
const isDark = theme === 'macchiato';
|
||||
|
||||
if (isDark) {
|
||||
return {
|
||||
isDark: true,
|
||||
textColor: '#cdd6f4',
|
||||
subTextColor: '#bac2de',
|
||||
gridColor: 'rgba(180, 185, 200, 0.12)',
|
||||
accent: '#89b4fa',
|
||||
secondary: '#94e2d5',
|
||||
palette: [
|
||||
'#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,
|
||||
textColor: isDark ? '#e8f4ff' : '#1a1d22',
|
||||
gridColor: isDark ? 'rgba(100, 220, 255, 0.1)' : 'rgba(26, 29, 34, 0.1)',
|
||||
accent: isDark ? '#64dcff' : '#2c5a7a',
|
||||
secondary: isDark ? '#2c5a7a' : '#64dcff',
|
||||
palette: isDark
|
||||
? ['#64dcff', '#2c5a7a', '#a3b3cc', '#7886a0', '#d93d3d', '#dcad2b', '#4caf50', '#ff9800', '#9c27b0', '#00bcd4']
|
||||
: ['#2c5a7a', '#64dcff', '#595f68', '#9299a2', '#a03030', '#8a6a10', '#4caf50', '#ff9800', '#9c27b0', '#00bcd4'],
|
||||
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',
|
||||
};
|
||||
}
|
||||
@@ -77,34 +144,42 @@ function renderLineChart(months, massData, valueData) {
|
||||
textStyle: { fontFamily: 'Noto Sans', color: c.textColor },
|
||||
tooltip: {
|
||||
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: {
|
||||
data: ['Mass (kg)', 'Value (DKK)'],
|
||||
textStyle: { color: c.textColor },
|
||||
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
|
||||
top: 0,
|
||||
left: 'center',
|
||||
orient: 'horizontal'
|
||||
orient: 'horizontal',
|
||||
},
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '10%',
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
top: '18%'
|
||||
top: '18%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xLabels,
|
||||
axisLine: { lineStyle: { color: c.gridColor } },
|
||||
axisLabel: {
|
||||
color: c.textColor,
|
||||
color: c.subTextColor,
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
fontSize: 10,
|
||||
margin: 8,
|
||||
overflow: 'break',
|
||||
width: 70
|
||||
width: 70,
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
@@ -115,12 +190,12 @@ function renderLineChart(months, massData, valueData) {
|
||||
position: 'left',
|
||||
splitLine: { lineStyle: { color: c.gridColor } },
|
||||
axisLabel: {
|
||||
color: c.accent,
|
||||
color: c.subTextColor,
|
||||
formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()),
|
||||
margin: 8
|
||||
margin: 8,
|
||||
},
|
||||
axisLine: { show: true, lineStyle: { color: c.accent } },
|
||||
nameTextStyle: { color: c.accent, padding: [0, 0, 0, 0] }
|
||||
axisLine: { show: true, lineStyle: { color: c.gridColor } },
|
||||
nameTextStyle: { color: c.accent, padding: [0, 0, 0, 0] },
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
@@ -128,13 +203,13 @@ function renderLineChart(months, massData, valueData) {
|
||||
position: 'right',
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: c.secondary,
|
||||
color: c.subTextColor,
|
||||
formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()),
|
||||
margin: 8
|
||||
margin: 8,
|
||||
},
|
||||
axisLine: { show: true, lineStyle: { color: c.secondary } },
|
||||
nameTextStyle: { color: c.secondary, padding: [0, 10, 0, 0] }
|
||||
}
|
||||
axisLine: { show: true, lineStyle: { color: c.gridColor } },
|
||||
nameTextStyle: { color: c.secondary, padding: [0, 10, 0, 0] },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
@@ -143,9 +218,18 @@ function renderLineChart(months, massData, valueData) {
|
||||
yAxisIndex: 0,
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: { width: 2 },
|
||||
lineStyle: { width: 2, opacity: 0.9 },
|
||||
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,
|
||||
},
|
||||
{
|
||||
@@ -154,9 +238,18 @@ function renderLineChart(months, massData, valueData) {
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: { width: 2 },
|
||||
lineStyle: { width: 2, opacity: 0.9 },
|
||||
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,
|
||||
},
|
||||
],
|
||||
@@ -183,10 +276,14 @@ function renderTopSpeciesChart(data) {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: c.tooltipBg,
|
||||
borderColor: c.tooltipBorder,
|
||||
borderWidth: 1,
|
||||
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
|
||||
formatter: (params) => {
|
||||
const p = params[0];
|
||||
return `${p.name}<br/>${formatDKK(p.value)}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
@@ -199,7 +296,7 @@ function renderTopSpeciesChart(data) {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
|
||||
axisLabel: {
|
||||
color: c.textColor,
|
||||
color: c.subTextColor,
|
||||
formatter: (val) => formatDKKShort(val),
|
||||
fontSize: 9,
|
||||
hideOverlap: true,
|
||||
@@ -224,25 +321,27 @@ function renderTopSpeciesChart(data) {
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: values,
|
||||
data: values.map((v, i) => ({
|
||||
value: v,
|
||||
itemStyle: {
|
||||
color: c.palette[i],
|
||||
borderRadius: [0, 4, 4, 0],
|
||||
},
|
||||
})),
|
||||
barMaxWidth: 28,
|
||||
barGap: '30%',
|
||||
itemStyle: {
|
||||
borderRadius: [0, 4, 4, 0],
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: (params) => formatDKKShort(params.value),
|
||||
color: c.textColor,
|
||||
color: c.subTextColor,
|
||||
fontSize: 10,
|
||||
distance: 8,
|
||||
overflow: 'break',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0,0,0,0.3)',
|
||||
shadowBlur: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -274,6 +373,10 @@ function renderBarChart(months, seriesData) {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: c.tooltipBg,
|
||||
borderColor: c.tooltipBorder,
|
||||
borderWidth: 1,
|
||||
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
|
||||
formatter: (params) => {
|
||||
const month = params[0]?.axisValue || '';
|
||||
let html = `<strong>${month}</strong><br/>`;
|
||||
@@ -283,59 +386,63 @@ function renderBarChart(months, seriesData) {
|
||||
});
|
||||
return html;
|
||||
},
|
||||
extraCssText: 'background: rgba(0,0,0,0.8); padding: 8px;'
|
||||
},
|
||||
legend: {
|
||||
textStyle: { color: c.textColor },
|
||||
textStyle: { color: c.textColor, fontFamily: 'Noto Sans' },
|
||||
top: 0,
|
||||
left: 'center',
|
||||
orient: 'horizontal',
|
||||
type: 'scroll',
|
||||
maxItems: 5,
|
||||
padding: [0, 0, 0, 0],
|
||||
itemGap: 10
|
||||
itemGap: 10,
|
||||
},
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '5%',
|
||||
bottom: 65,
|
||||
containLabel: true,
|
||||
top: '25%'
|
||||
top: '25%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xLabels,
|
||||
axisLine: { lineStyle: { color: c.gridColor } },
|
||||
axisLabel: {
|
||||
color: c.textColor,
|
||||
color: c.subTextColor,
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
rotate: 0,
|
||||
margin: 8,
|
||||
overflow: 'break',
|
||||
width: 60
|
||||
width: 60,
|
||||
},
|
||||
axisTick: { show: false }
|
||||
axisTick: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
|
||||
axisLabel: {
|
||||
color: c.textColor,
|
||||
color: c.subTextColor,
|
||||
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) => ({
|
||||
...s,
|
||||
barMaxWidth: barMaxWidth,
|
||||
itemStyle: {
|
||||
color: c.palette[idx % c.palette.length]
|
||||
color: c.palette[idx % c.palette.length],
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 0,
|
||||
},
|
||||
},
|
||||
})),
|
||||
});
|
||||
}
|
||||
@@ -652,7 +759,6 @@ function hideEmptyState() {
|
||||
|
||||
document.getElementById('apply-filters').addEventListener('click', updateCharts);
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.filter-group.multi-select')) {
|
||||
document.querySelectorAll('.checkbox-dropdown-list.open').forEach(el => {
|
||||
@@ -693,8 +799,8 @@ document.addEventListener('click', (e) => {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initCharts();
|
||||
updateNavbarUpdateDate();
|
||||
|
||||
// Setup click handlers for dropdown toggles
|
||||
['species', 'zone', 'gear'].forEach(id => {
|
||||
const container = document.getElementById(id);
|
||||
if (container) {
|
||||
@@ -705,8 +811,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
toggleDropdown(id);
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for changes inside the dropdown list
|
||||
|
||||
const list = container.querySelector('.checkbox-dropdown-list');
|
||||
if (list) {
|
||||
list.addEventListener('change', () => {
|
||||
|
||||
Reference in New Issue
Block a user