damn frontend
This commit is contained in:
+2
-1
@@ -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"
|
||||
|
||||
+188
-65
@@ -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;
|
||||
|
||||
+4
-4
@@ -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 id="chart-bar" style="width:100%; height:300px;"></div>
|
||||
<div class="chart-title">Monthly Value by Top Species</div>
|
||||
<div id="chart-bar" style="width:100%; height:350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+13
-1
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user