fajri/cpone_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Live-update all dashboard charts via SSE

Browse Source
This commit is contained in:
sas.fajri
2026-04-30 16:35:20 +07:00
parent 428817e23a
commit 42f5bb745f
2 changed files with 120 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
cpone-dashboard/templates/dashboard/index.html
View File

@@ -638,10 +638,12 @@ function openPatientsModal() {
const palette = ['#3b50a0', '#6677d6', '#10b981', '#f59e0b'];
const tatData = {{.TATChart}};
const trendData = {{.TrendChart}};
let tatChart = null;
let trendChart = null;
const tatEl = document.getElementById('tat-chart');
if (tatEl && tatData.labels && tatData.labels.length) {
const tatChart = echarts.init(tatEl);
tatChart = echarts.init(tatEl);
tatChart.setOption({
color: palette,
tooltip: {
@@ -668,7 +670,7 @@ function openPatientsModal() {
const trendEl = document.getElementById('trend-chart');
if (trendEl && trendData.labels && trendData.labels.length) {
const trendChart = echarts.init(trendEl);
trendChart = echarts.init(trendEl);
trendChart.setOption({
color: palette,
tooltip: { trigger: 'axis' },
@@ -689,6 +691,41 @@ function openPatientsModal() {
});
window.addEventListener('resize', () => trendChart.resize());
}
document.body.addEventListener('htmx:sseMessage', function (evt) {
const eventName = evt.detail && evt.detail.event ? evt.detail.event : '';
if (eventName !== 'trend' || !trendChart) return;
const raw = evt.detail && typeof evt.detail.data === 'string' ? evt.detail.data : '';
if (!raw) return;
try {
const next = JSON.parse(raw);
if (!next || !Array.isArray(next.labels) || !Array.isArray(next.checkedIn) || !Array.isArray(next.checkedOut)) {
return;
}
trendChart.setOption({
xAxis: { data: next.labels },
series: [
{ name: 'Checked In', data: next.checkedIn },
{ name: 'Checked Out', data: next.checkedOut }
]
});
} catch (_) {}
});
document.body.addEventListener('htmx:sseMessage', function (evt) {
const eventName = evt.detail && evt.detail.event ? evt.detail.event : '';
if (eventName !== 'tat' || !tatChart) return;
const raw = evt.detail && typeof evt.detail.data === 'string' ? evt.detail.data : '';
if (!raw) return;
try {
const next = JSON.parse(raw);
if (!next || !Array.isArray(next.labels) || !Array.isArray(next.values)) return;
tatChart.setOption({
xAxis: { data: next.labels },
series: [{ name: 'Avg TAT', data: next.values }]
});
} catch (_) {}
});
})();
</script>
{{end}}