web: plot individual temperatures separately

3 files changed, 50 insertions, 30 deletions

diff --git a/web/index.html b/web/index.html
index 9d55a13..d62d2b7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -15,7 +15,7 @@
         </div>
         <div>
           <select id="profile" value="">
-            <option value="">none</option>
+            <option value="">none / manual</option>
             <option value="0">profile 1</option>
             <option value="1">profile 2</option>
             <option value="2">profile 3</option>
diff --git a/web/main.js b/web/main.js
index 51e2a3a..4d72357 100644
--- a/web/main.js
+++ b/web/main.js
@@ -33,6 +33,13 @@ let END_TIME = null;
 let TIMEOUT;
 let TEMPS = '';
 
+const PLOTS = {
+  temp1: plot.addPlot('temp1'),
+  temp2: plot.addPlot('temp2'),
+  temp3: plot.addPlot('temp3'),
+  tempavg: plot.addPlot('tempavg'),
+};
+
 const elements = [
   'temps',
   'connect', 'status', 'profile', 'start', 'read', 'write',
@@ -134,7 +141,12 @@ const onMessage = async (msg) => {
       if (!STATUS || STATUS === 'connecting') {
         STATUS = 'idle';
       } else if (STATUS === 'running' || STATUS == 'manual') {
-        plot.addPoint((temp1 + temp2) / 2);
+        const t = PLOTS.temp1.data.length;
+        PLOTS.temp1.data.push([t, temp1]);
+        PLOTS.temp2.data.push([t, temp2]);
+        PLOTS.temp3.data.push([t, temp3]);
+        PLOTS.tempavg.data.push([t, (temp1 + temp2) / 2]);
+        plot.update();
       }
       break;
     }
@@ -234,7 +246,12 @@ el.start.onclick = () => {
     if (el.profile.value !== '') {
       const i = +el.profile.value;
       send8(FUNC.C_STARTSTOP, i, ARG.STARTSTOP_START);
-      plot.clear();
+
+      PLOTS.temp1.data.length = 0;
+      PLOTS.temp2.data.length = 0;
+      PLOTS.temp3.data.length = 0;
+      PLOTS.tempavg.data.length = 0;
+      plot.update();
     }
   } else if (STATUS === 'running') {
     STATUS = 'idle';
diff --git a/web/plot.js b/web/plot.js
index b5e023f..c907f94 100644
--- a/web/plot.js
+++ b/web/plot.js
@@ -2,13 +2,9 @@ import './lib/d3.v7.min.js';
 
 let POINTS = [];
 
-const x = d3.scaleLinear([0, 350]);
-const y = d3.scaleLinear([0, 120]).nice(30);
-
-// Declare the line generator.
-const line = d3.line()
-  .x((d, i) => x(i))
-  .y((d, i) => y(d));
+const x = d3.scaleLinear([0, 120]).nice(30);
+const y = d3.scaleLinear([0, 350]);
+const line = d3.line(d => x(d[0]), d => y(d[1]));
 
 const margin = 40;
 
@@ -20,33 +16,38 @@ const xa = svg.append('g');
 // Add the y-axis.
 const ya = svg.append('g');
 
-// add the plot.
-const plot = svg.append('path')
-  .attr('fill', 'none')
-  .attr('stroke', 'black')
-  .attr('stroke-width', '2');
+const PLOTS = {};
 
 const sec = d3.format('02');
 const min = d3.format(' ');
 const minsec = v => `${min(Math.floor(v / 60))}:${sec(v % 60)}`;
 
-const update = () => {
-  x.domain([0, Math.max(POINTS.length, 120)]).nice(30);
-  y.domain(d3.extent([...d3.extent(POINTS), 0, 350]));
-
-  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
-  ya.transition().call(d3.axisLeft(y))
-  plot.transition().attr('d', line(POINTS));
+export const addPlot = (name) => {
+  const path = svg.append('path')
+    .attr('fill', 'none')
+    .attr('stroke', 'black')
+    .attr('stroke-width', '2');
+
+  PLOTS[name] = {
+    data: [],
+    path,
+  };
+  return PLOTS[name];
 };
 
-export const clear = () => {
-  POINTS = [];
-  update();
-};
 
-export const addPoint = (temp) => {
-  POINTS.push(temp);
-  update();
+export const update = () => {
+  const times = d3.merge(Object.values(PLOTS).map(p => p.data.map(d => d[0])));
+  const temps = d3.merge(Object.values(PLOTS).map(p => p.data.map(d => d[1])));
+
+  x.domain([0, d3.max([...times, 120])]).nice(30);
+  y.domain([0, d3.max([...temps, 200])]).nice(25);
+
+  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
+  ya.transition().call(d3.axisLeft(y))
+  for (const { path, data } of Object.values(PLOTS)) {
+    path.transition().attr('d', line(data));
+  }
 };
 
 const onresize = () => {
@@ -60,7 +61,9 @@ const onresize = () => {
   y.range([height-2*margin, margin]);
   xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
   ya.transition().call(d3.axisLeft(y))
-  plot.transition().attr('d', line(POINTS));
+  for (const { path, data } of Object.values(PLOTS)) {
+    path.transition().attr('d', line(data));
+  }
 
   xa.attr('transform', `translate(0, ${height - 2*margin})`);
   ya.attr('transform', `translate(${margin}, 0)`);