diff --git a/static/multi_pu_dashboard.html b/static/multi_pu_dashboard.html index af801fb..17cff5a 100644 --- a/static/multi_pu_dashboard.html +++ b/static/multi_pu_dashboard.html @@ -78,16 +78,13 @@ const plots = [ { id: 'Cdilute-plot', quantity: 'Cdilute', title: 'Cdilute per PU' }, ]; +const plotTraceMap = {}; // track trace indices per plot + function initAllPlots() { plots.forEach(plot => { const data = makeTraces(plot.quantity); - const layout = { - title: plot.title, - xaxis: { title: 'Time', type: 'date' }, - yaxis: { title: plot.id.includes('P') ? 'Pressure (bar)' : 'Flow (L/h)' }, - }; + plotTraceMap[plot.id] = { pu: [0,1,2], extra: {} }; // base 3 PUs - // Add dynamic reference line placeholder (flat 0 initially) if (plot.refKey) { data.push({ x: time0.slice(), @@ -95,46 +92,35 @@ function initAllPlots() { mode: 'lines', line: { dash: 'dash', color: 'red' }, name: `${plot.refKey} (PU2)`, - showlegend: true }); + plotTraceMap[plot.id].extra.ref = data.length - 1; } - // Extra traces for Qperm plot if (plot.id === 'Qperm-plot') { - data.push({ - x: time0.slice(), - y: zero.slice(), - name: 'QSkid', - mode: 'lines', - line: { color: 'black', width: 2, dash: 'dot' }, - legendgroup: 'PatientSkid' - }); - data.push({ - x: time0.slice(), - y: zero.slice(), - name: 'Qconso', - mode: 'lines', - line: { color: 'green', width: 2, dash: 'dot' }, - legendgroup: 'Consumption' - }); + data.push({ x: time0.slice(), y: zero.slice(), name: 'QSkid', mode: 'lines' }); + plotTraceMap[plot.id].extra.qSkid = data.length - 1; + + data.push({ x: time0.slice(), y: zero.slice(), name: 'Qconso', mode: 'lines' }); + plotTraceMap[plot.id].extra.qConso = data.length - 1; } - // Extra trace for Qdrain plot if (plot.id === 'Qdrain-plot') { - data.push({ - x: time0.slice(), - y: zero.slice(), - name: 'Qconso', - mode: 'lines', - line: { color: 'black', width: 2, dash: 'dot' }, - legendgroup: 'Consumption' - }); + data.push({ x: time0.slice(), y: zero.slice(), name: 'QSkid', mode: 'lines' }); + plotTraceMap[plot.id].extra.qSkid = data.length - 1; + + data.push({ x: time0.slice(), y: zero.slice(), name: 'Qconso', mode: 'lines' }); + plotTraceMap[plot.id].extra.qConso = data.length - 1; } - Plotly.newPlot(plot.id, data, layout); + Plotly.newPlot(plot.id, data, { + title: plot.title, + xaxis: { type: 'date' }, + yaxis: { title: plot.id.includes('P') ? 'Pressure (bar)' : 'Flow (L/h)' } + }); }); } + async function updateAllPlots() { try { const res = await fetch('/monitor'); @@ -161,36 +147,35 @@ async function updateAllPlots() { Plotly.extendTraces(plot.id, { x: xUpdates, y: yUpdates }, puList.map((_, i) => i), maxPoints); // Update PU2 reference line dynamically + Plotly.extendTraces(plot.id, + { x: xUpdates, y: yUpdates }, + plotTraceMap[plot.id].pu, + maxPoints +); + if (plot.refKey) { const refVal = pu2Data[plot.refKey]; - const refIndex = puList.length; // because ref trace was pushed last Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[refVal ?? null]] }, - [refIndex], + [plotTraceMap[plot.id].extra.ref], maxPoints ); } if (plot.id === 'Qperm-plot') { + const qSkid = SkidData["QSkid"]; const qConso = DSData["Qconso"]; - const baseIndex = puList.length + (plot.refKey ? 1 : 0); - Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [baseIndex + 1], maxPoints); + Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qSkid ?? null]] }, [plotTraceMap[plot.id].extra.qSkid], maxPoints); + Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [plotTraceMap[plot.id].extra.qConso], maxPoints); } - // Extend QSkid + Qconso for Qperm + if (plot.id === 'Qdrain-plot') { const qSkid = SkidData["QSkid"]; const qConso = DSData["Qconso"]; - const baseIndex = puList.length + (plot.refKey ? 1 : 0); - Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qSkid ?? null]] }, [baseIndex], maxPoints); - Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [baseIndex + 1], maxPoints); + Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qSkid ?? null]] }, [plotTraceMap[plot.id].extra.qSkid], maxPoints); + Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [plotTraceMap[plot.id].extra.qConso], maxPoints); } - // Extend Qconso for Qdrain - if (plot.id === 'Qdrain-plot') { - const qConso = DSData["Qconso"]; - const consoIndex = puList.length + (plot.refKey ? 1 : 0); - Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [consoIndex], maxPoints); - } // Sliding window (30s) const layoutUpdate = {