Split lines if measurements are 1h apart

ampel-firmware/web_server.cpp

@@ -122,19 +122,19 @@ namespace web_server {
                 "<button onclick=\"fetch('/command?send=set_time '+Math.floor(Date.now()/1000))\" %s>Set time!</button>" // Can be useful in AP mode
                 "</div>"
                 "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-firmware' target='_blank'>Source code</a>&nbsp;"
-                "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-documentation' target='_blank'>Documentation</a>");
+                "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-documentation' target='_blank'>Documentation</a>"
+                "<script>"
+                "document.body.style.cursor='default';");
 
-    script_template = PSTR("<script>"
-        "document.body.style.cursor = 'default';"
-        "fetch('%s',{credentials:'include'})"
+    script_template = PSTR("fetch('%s',{credentials:'include'})"
         ".then(r=>r.text())"
         ".then(c2t)"
-        ".then(addLog)"
+        ".then(t=>document.getElementById('log').appendChild(t))"
         ".then(_=>Plotly.newPlot('graph',data,layout,{displaylogo:false}))"
         ".catch(console.error);"
         "xs=[];y1=[];y2=[];y3=[];"
         "d={x:xs,type:'scatter',mode:'lines+markers',marker:{symbol:123}};" // diamond-tall-open from https://plotly.com/python/marker-style/
-        "data = ["
+        "data=["
         "{...d,...{y:y1,name:'CO<sub>2</sub>',line:{color:'#2ca02c'}}},"
         "{...d,...{y:y2,name:'Temperature',yaxis:'y2',line:{color:'#ff7f0e',dash:'dot'}}},"
         "{...d,...{y:y3,name:'Humidity',yaxis:'y3',line:{color:'#1f77b4',dash:'dot'}}}];"
@@ -149,16 +149,25 @@ namespace web_server {
         "tb=document.createElement('table');"
         "tb.className='pure-table-striped';"
         "n=ls.length;"
+        "ld=NaN;"
         "ls.forEach((l,i)=>{"
         "fs=l.split(';');"
         //Don't display points without time
-        "if (!fs[0].includes('1970-')){"
+        "if(fs[0].includes('1970-')){return};"
+        "d=Date.parse(fs[0]);"
+        //Split curves when points are more than 1h apart
+        "if(d-ld>36e5){"
+        "xs.push(NaN);"
+        "y1.push(NaN);"
+        "y2.push(NaN);"
+        "y3.push(NaN);"
+        "}"
+        "ld=d;"
         "xs.push(fs[0]);"
         "y1.push(fs[1]);"
         "y2.push(fs[2]);"
         "y3.push(fs[3]);"
-        "};"
-        "if(i>4 && i<n-12){if(i==5){fs=['...','...','...','...']}else{return;}}"
+        "if(i>4&&i<n-12){if(i==5){fs=['...','...','...','...']}else{return;}}"
         "r=document.createElement('tr');"
         "fs.forEach((f,_)=>{"
         "c=document.createElement(i<2?'th':'td');"
@@ -166,7 +175,6 @@ namespace web_server {
         "r.appendChild(c);});"
         "tb.appendChild(r);});"
         "return tb;}"
-        "function addLog(t){document.getElementById('log').appendChild(t);}"
         "</script>"
         "</body>"
         "</html>");