khantey/nrml_dashboard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finalized overview page

Browse Source
This commit is contained in:
Khantey Long
2026-03-19 09:20:42 +07:00
parent c2b820fc6d
commit e80cb128bf
9 changed files with 822 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
dashboard/public/js/dashboard/charts.js
View File

@@ -1,6 +1,83 @@
Chart.register(ChartDataLabels);
const charts = {};
function buildChart(id, type, labels, data, label = 'Cases') {
function buildStackedChart(canvasId, labels, datasets) {
const ctx = document.getElementById(canvasId);
if (!ctx) return;
if (charts[canvasId]) {
charts[canvasId].destroy();
}
charts[canvasId] = new Chart(ctx, {
type: "bar",
data: {
labels: labels,
datasets: datasets,
datalabels: {
display: true
}
},
plugins: [ChartDataLabels],
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 20,
bottom: 30
}
},
plugins: {
legend: {
position: 'bottom',
align: 'center',
labels: {
padding: 20,
boxWidth: 10,
boxHeight: 10,
usePointStyle: true,
pointStyle: 'circle'
}
},
datalabels: {
color: "#000",
anchor: "end",
align: "top",
clamp: true,
clip: false,
font: {
weight: "bold",
size: 10
},
formatter: function (value) {
return value > 0 ? value : null;
}
}
},
scales: {
x: {
stacked: true
},
y: {
stacked: true,
beginAtZero: true
}
}
}
});
}
function buildChart(id, type, labels, data) {
const ctx = document.getElementById(id);
@@ -13,96 +90,276 @@ function buildChart(id, type, labels, data, label = 'Cases') {
data: {
labels: labels,
datasets: [{
label: label,
data: data,
borderWidth: 2,
tension: 0.3
tension: 0.3,
barPercentage: 0.8,
categoryPercentage: 0.6,
maxBarThickness: 50
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
function buildMixedTrendChart(canvasId, labels, samples, positivity) {
const ctx = document.getElementById(canvasId);
if (!ctx) return;
if (charts[canvasId]) charts[canvasId].destroy();
charts[canvasId] = new Chart(ctx, {
data: {
labels: labels,
datasets: [
{
type: 'line',
label: '% Positive',
data: positivity,
borderColor: '#1e6ef2',
borderWidth: 2,
tension: 0.4,
fill: false,
pointRadius: 4,
pointStyle: 'line',
yAxisID: 'y1'
},
{
type: 'bar',
label: 'Total sample',
data: samples,
backgroundColor: '#2ecc71',
borderRadius: 6,
barPercentage: 0.6,
pointStyle: 'rect',
categoryPercentage: 0.7,
yAxisID: 'y',
},
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 30,
bottom: 30
}
},
plugins: {
legend: {
position: 'bottom',
align: 'center',
display: type === 'pie' || type === 'doughnut',
labels: {
padding: 10,
boxWidth: 14,
boxHeight: 14,
usePointStyle: true,
pointStyle: 'circle'
}
},
datalabels: {
color: "#282626",
anchor: type === "bar" ? "end" : "center",
align: type === "bar" ? "top" : "center",
font: {
size: 10
},
formatter: function(value, ctx) {
const data = ctx.chart.data.datasets[0].data;
const total = data.reduce((a, b) => a + b, 0);
const percent = total ? (value / total * 100).toFixed(1) : 0;
return percent + '%';
}
}
}
}
});
}
function buildMixedTrendChart(canvasId, labels, samples, fluRate, covidRate) {
const ctx = document.getElementById(canvasId);
if (!ctx) return;
if (charts[canvasId]) charts[canvasId].destroy();
charts[canvasId] = new Chart(ctx, {
data: {
labels: labels,
datasets: [
{
type: 'line',
label: 'Influenza %',
data: fluRate,
borderColor: '#fa2929',
backgroundColor: '#fa2929',
tension: 0.4,
yAxisID: 'y1',
pointStyle: 'line',
},
{
type: 'line',
label: 'COVID-19 %',
data: covidRate,
borderColor: '#1976D2',
backgroundColor: '#1976D2',
tension: 0.4,
yAxisID: 'y1',
pointStyle: 'line',
},
{
type: 'bar',
label: 'Total Cases',
data: samples,
backgroundColor: '#0B8F3C',
borderRadius: 2,
barPercentage: 0.8,
categoryPercentage: 0.7,
yAxisID: 'y',
}
]
},
plugins: [ChartDataLabels],
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
padding: 20,
boxWidth: 30,
font: {
size: 12
padding: 20
}
},
datalabels: {
align: "top",
anchor: "end",
color: "#555",
font: {
size: 10
},
formatter: function (value, context) {
if (Number(value) === 0) return null;
if (context.dataset.type === 'line') {
return value + '%';
}
return value;
}
}
},
layout: {
padding: {
bottom: 50
top: 30,
bottom: 20
}
},
scales: {
y: {
position: 'left',
title: {
display: true,
text: 'Total sample'
text: 'Cases'
}
},
y1: {
position: 'right',
grid: {
drawOnChartArea: false
},
grid: { drawOnChartArea: false },
title: {
display: true,
text: '% Positive'
text: '% Positivity'
},
ticks: {
callback: value => value + '%'
}
}
}
}
});
}
}
// function buildMixedTrendChart(canvasId, labels, samples, positivity) {
// const ctx = document.getElementById(canvasId);
// if (!ctx) return;
// if (charts[canvasId]) charts[canvasId].destroy();
// charts[canvasId] = new Chart(ctx, {
// data: {
// labels: labels,
// datasets: [
// {
// type: 'line',
// label: '% Positive',
// data: positivity,
// borderColor: '#1e6ef2',
// borderWidth: 2,
// tension: 0.4,
// fill: false,
// pointRadius: 2,
// pointStyle: 'line',
// yAxisID: 'y1',
// },
// {
// type: 'bar',
// label: 'Total sample ',
// data: samples,
// backgroundColor: '#2ecc71',
// borderRadius: 2,
// barPercentage: 0.8,
// categoryPercentage: 0.7,
// yAxisID: 'y',
// }
// ]
// },
// plugins: [ChartDataLabels],
// options: {
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// legend: {
// position: 'bottom',
// align: 'center',
// labels: {
// usePointStyle: true,
// padding: 20,
// boxWidth: 30,
// font: { size: 12 }
// }
// },
// datalabels: {
// align: "top",
// anchor: "end",
// color: "#555",
// font: {
// size: 10
// },
// formatter: function (value, context) {
// if (Number(value) === 0) return null;
// if (context.dataset.type === 'line') {
// console.log(value);
// return value + '%';
// }
// return value;
// }
// }
// },
// layout: {
// padding: {
// top: 20,
// bottom: 50
// }
// },
// scales: {
// y: {
// position: 'left',
// title: {
// display: true,
// text: 'Total sample'
// }
// },
// y1: {
// position: 'right',
// grid: {
// drawOnChartArea: false
// },
// title: {
// display: true,
// text: '% Positive'
// },
// ticks: {
// callback: value => value + '%'
// }
// }
// }
// }
// });
// }

1
dashboard/public/js/dashboard/filter.js
View File

@@ -1,7 +1,6 @@
class DashboardFilter {
constructor(onChange) {
this.onChange = onChange;
this.rangeSelect = document.getElementById("trend_range");

2
dashboard/public/js/overview.js
View File

@@ -238,7 +238,7 @@ function loadProvinceMap(startYear, startWeek, endYear, endWeek) {
})
.bindTooltip(`
<strong>${province}</strong><br>
${programName}<br>
${programName}<br>
Total: ${row.total}
`)
.addTo(map);

182
dashboard/public/js/program.js
View File

@@ -1,6 +1,7 @@
const standardPrograms = ['SARI', 'ILI', 'LBM'];
const programCode = (window.PROGRAM_CODE || '').trim().toUpperCase();
let map;
let provinceLayer;
document.addEventListener("DOMContentLoaded", () => {
@@ -15,6 +16,115 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
function renderProvinceHeatmap(rows) {
const totals = {};
rows.forEach(r => {
totals[r.site_province_name] = {
total: Number(r.total),
positive: Number(r.positive)
};
});
if (map) {
map.remove();
}
map = L.map('provinceMap').setView([12.7, 104.9], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
addProvinceLegend();
fetch('/geo/cambodia_provinces.geojson')
.then(r => r.json())
.then(geo => {
function getColor(value) {
if (value > 50) return "#b91c1c";
if (value >= 10) return "#ef4444";
if (value > 0) return "#fecaca";
return "#f3f4f600";
}
provinceLayer = L.geoJSON(geo, {
style: feature => {
const province = feature.properties.ADM1_EN;
const value = totals[province]?.total || 0;
return {
color: "#444",
weight: 1,
fillColor: getColor(value),
fillOpacity: 0.7
};
},
onEachFeature: (feature, layer) => {
const province = feature.properties.ADM1_EN;
const total = totals[province]?.total || 0;
const positive = totals[province]?.positive || 0;
const percent = total ? ((positive / total) * 100).toFixed(1) : 0;
console.log(province, total, positive, percent);
layer.bindTooltip(`
${province}<br>
Total: ${total}<br>
Positivity: ${percent}%
`);
}
}).addTo(map);
});
}
function addProvinceLegend() {
const legend = L.control({ position: "bottomright" });
legend.onAdd = function () {
const div = L.DomUtil.create("div", "map-legend");
div.innerHTML = `
<div style="background:white;padding:10px 12px;border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);font-size:12px;">
<div style="font-weight:600;margin-bottom:6px;">Cases</div>
<div style="display:flex;align-items:center;margin-bottom:4px;">
<span style="width:12px;height:12px;background:#b91c1c;
display:inline-block;margin-right:6px;"></span>
> 50
</div>
<div style="display:flex;align-items:center;margin-bottom:4px;">
<span style="width:12px;height:12px;background:#ef4444;
display:inline-block;margin-right:6px;"></span>
10 – 50
</div>
<div style="display:flex;align-items:center;margin-bottom:4px;">
<span style="width:12px;height:12px;background:#fecaca;
display:inline-block;margin-right:6px;"></span>
1 – 9
</div>
<div style="display:flex;align-items:center;">
<span style="width:12px;height:12px;background:#f3f4f6;
display:inline-block;margin-right:6px;"></span>
0
</div>
</div>
`;
return div;
};
legend.addTo(map);
}
function renderTrend(valueId, changeId, current, previous, suffix = '') {
const valueEl = document.getElementById(valueId);
@@ -49,16 +159,17 @@ function renderTrend(valueId, changeId, current, previous, suffix = '') {
function renderProgramTrend(rows) {
rows = rows || [];
const labels = rows.map(r => `W${r.period}`);
const samples = rows.map(r => r.total_samples || 0);
const positivity = rows.map(r => r.positivity_rate || 0);
const fluRate = rows.map(r => r.influenza_rate || 0);
const covidRate = rows.map(r => r.covid_rate || 0);
buildMixedTrendChart(
'trendChart',
labels,
samples,
positivity
fluRate,
covidRate
);
}
function renderSummary(summary) {
@@ -117,26 +228,46 @@ function renderSummary(summary) {
);
}
function renderDashboard(data) {
console.log("SUMMARY:", data.summary);
data = data || {};
renderProgramTrend(data.trend || []);
renderSummary(data.summary || {});
buildChart(
'provinceChart',
'bar',
(data.province_distribution || []).map(r => r.site_province_name),
(data.province_distribution || []).map(r => r.total)
);
renderProvinceHeatmap(data.province_distribution || []);
// buildStackedChart(
// "pathogenChart",
// labels,
// [
// {
// label: "Influenza",
// data: influenza,
// backgroundColor: "#2E7D32"
// },
// {
// label: "SARS-CoV-2",
// data: covid,
// backgroundColor: "#A5D6A7"
// }
// ]
// );
const pathogenRows = (data.pathogen_distribution || [])
.sort((a, b) => b.total - a.total);
const colors = [
'#2563eb', '#10b981', '#f59e0b', '#ef4444',
'#8b5cf6', '#14b8a6', '#f97316', '#84cc16'
];
buildChart(
'pathogenChart',
'bar',
(data.pathogen_distribution || []).map(r => r.pathogen_name),
(data.pathogen_distribution || []).map(r => r.total),
'Positive'
'doughnut',
pathogenRows.map(r => r.pathogen),
pathogenRows.map(r => r.total)
);
charts['pathogenChart'].data.datasets[0].backgroundColor = colors;
charts['pathogenChart'].update();
buildChart(
'ageChart',
@@ -144,6 +275,8 @@ function renderDashboard(data) {
(data.age_distribution || []).map(r => r.age_group),
(data.age_distribution || []).map(r => r.total)
);
charts['ageChart'].data.datasets[0].backgroundColor = colors;
charts['ageChart'].update();
buildChart(
'sexChart',
@@ -151,5 +284,24 @@ function renderDashboard(data) {
(data.sex_distribution || []).map(r => r.patient_sex),
(data.sex_distribution || []).map(r => r.total)
);
charts['sexChart'].data.datasets[0].backgroundColor = colors;
charts['sexChart'].update();
buildChart(
'subtypeChart',
'bar',
(data.subtype_distribution || []).map(r => r.subtype),
(data.subtype_distribution || []).map(r => r.total)
);
charts['subtypeChart'].data.datasets[0].backgroundColor = colors;
charts['subtypeChart'].update();
buildChart(
'sentinelChart',
'pie',
(data.sentinel_sites || []).map(r => r.name),
(data.sentinel_sites || []).map(r => r.total)
);
charts['sentinelChart'].data.datasets[0].backgroundColor = colors;
charts['sentinelChart'].update();
}