enhance data pages (#2088)

* enhance data pages * add checkbox to show relative values * remove static entries, they get overwritten by dynamic oes --------- Co-authored-by: CaCO3 <caco@ruinelli.ch>
2025-12-08 20:46:52 +03:00 · 2023-02-26 23:08:39 +01:00
parent 9a9aa68a65
commit 53ff190860
4 changed files with 123 additions and 77 deletions
--- a/sd-card/html/data.html
+++ b/sd-card/html/data.html
@@ -5,6 +5,7 @@
            body {
                height: 100%;
                margin: 2px;
+                font-family: Arial, Helvetica, sans-serif;
            }

            .box {
@@ -33,19 +34,22 @@
        <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
    </head>
    <body>
+            <h3>Todays Data</h3>
+            <h4>Last part of Todays Data</h4>
        <div class="box">
            <div class="row header">
-                <button onClick="reload();">Reload</button>
-                <button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button>
-                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button>
-                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button>
+                <button onClick="reload();">Refresh</button>
+                <button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</button>
+                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
+                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show Graph</button>
            </div>
            <div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div>
            <div class="row footer">
-                <button onClick="reload();">Reload</button>
-                <button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button>
-                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button>
-                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button>
+                <button onClick="reload();">Refresh</button>
+                <button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</button>
+                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
+                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show Graph</button>
+                <p></p>
            </div>
          </div>
    </body>
--- a/sd-card/html/edit_config_param.html
+++ b/sd-card/html/edit_config_param.html
@@ -462,9 +462,6 @@ textarea {
 				<br>
 				<b>Postprocessing Individual Parameters: 
                <select id="Numbers_value1" onchange="numberChanged()">
-                    <option value="0" selected>default</option>
-                    <option value="1" >NT</option>
-                    <option value="2" >HT</option>
                </select></b>
 			</td>
 		</tr>
@@ -786,9 +783,6 @@ textarea {
 				<br>
 				<b>Postprocessing Individual Parameters: 
                <select id="NumbersInfluxDB_value1" onchange="numberInfluxDBChanged()">
-                    <option value="0" selected>default</option>
-                    <option value="1" >NT</option>
-                    <option value="2" >HT</option>
                </select></b>
 			</td>
 		</tr>
--- a/sd-card/html/graph.html
+++ b/sd-card/html/graph.html
@@ -5,17 +5,115 @@
    <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
    <script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script>  
    <script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>  
-
    <style>
-        textarea {
-            width: 600px;
-            height: 300px;
+        body {
+            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
+  
    <script>
    function run() {
-      var el = document.getElementById('cnsl');
-      el && eval(el.value);
+        datefile = document.getElementById("datafiles").value;
+        numbername = document.getElementById("numbers").value;
+        showRrelativeValues = document.getElementById("showRrelativeValues").checked;
+        //alert("Auslesen: " + datefile + " " + numbername);
+
+        _domainname = getDomainname();
+        fetch(_domainname + '/fileserver/log/data/' + datefile)
+        .then(response => {
+            // handle the response
+            if (response.status == 404) {
+                firework.launch("No log data available for " + dateString, 'warning', 10000);
+            }
+            response.text()
+            .then( result => {
+                var lines = result.split("\n");
+                var traceValue =          { x: [], y: [], type: 'scatter', line: {width: 6}, name: 'Value'};
+                var tracePreValue =       { x: [], y: [], type: 'scatter', line: {width: 2}, name: 'Previous Value', visible: 'legendonly'};
+                var traceChangeRate =     { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Rate'};
+                var traceChangeAbsolute = { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Absolute', visible: 'legendonly'};
+
+                var timex = 1;
+                for (let line of lines) {
+                    {
+                        //console.log(line);
+                        if (line.split(",")[1] == numbername)
+                        {
+                            var value = line.split(",")[3];
+                            var preValue = line.split(",")[4];
+                            var changeRate = line.split(",")[5];
+                            var changeAbsolute = line.split(",")[6];
+                            var time  = line.split(",")[0];
+                            //console.log("> "+time+" "+value+"\n");
+
+                            traceValue.x.push(time);
+
+                            traceValue.y.push(value);
+                            tracePreValue.y.push(preValue);
+                            traceChangeRate.y.push(changeRate);
+                            traceChangeAbsolute.y.push(changeAbsolute);
+                        }
+                    }
+                }
+                //console.log(trace);
+
+                // Copy time to all traces
+                tracePreValue.x = traceValue.x;
+                traceChangeRate.x = traceValue.x;
+                traceChangeAbsolute.x = traceValue.x;
+
+                //console.log(traceValue.y);
+
+                var offsetValue = traceValue.y[0];
+                var offsetPreValue = tracePreValue.y[0];
+
+                if (showRrelativeValues) {
+                    traceValue.y.forEach(function(part, index, arr) {
+                        arr[index] = arr[index] - offsetValue;
+                    });
+
+                    tracePreValue.y.forEach(function(part, index, arr) {
+                        arr[index] = arr[index] - offsetPreValue;
+                    });
+                }
+
+              //  console.log(traceValue.x)
+
+                var data = [traceValue, tracePreValue, traceChangeRate, traceChangeAbsolute];
+
+                var layout = {
+                    showlegend: true,
+                    colorway: ['green', 'black', 'blue', 'black'],
+
+                    yaxis: {title: 'Value'},
+                    yaxis2: {
+                        title: 'Change',
+                        overlaying: 'y',
+                        side: 'right'
+                    },
+
+                    margin: {
+                        l: 50,
+                        r: 50,
+                        b: 50,
+                        t: 50,
+                        pad: 4
+                    },
+
+                    legend: {
+                        x: 0.2,
+                        y: 0.9,
+                        xanchor: 'right'
+                    }
+                };
+
+                document.getElementById("chart").innerHTML = "";
+                Plotly.newPlot('chart', data, layout, {displayModeBar: true});
+            });
+        }).catch((error) => {
+            // handle the error
+            console.log(error);
+        });
    }
    </script>
    <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
@@ -23,67 +121,16 @@
    <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
    </head>
    <body>
-    <div id='chart'></div>
+        <h3>Data Graph</h3>
+        <div id='chart'><p>Loading...<br></p></div>
        <select id="datafiles" onchange="run();"></select>
        <select id="numbers" onchange="run();"></select>
-        <select id="datatype" onchange="run();">
-            <option value="3">Value</option>
-            <option value="4">PreValue</option>
-            <option value="5">Change-Rate</option>
-            <option value="6">Change-Absolut</option>
-        </select>
-        
+        <input type="checkbox" id="showRrelativeValues" onclick = 'run();' unchecked ><label for="showRrelativeValues">Show relative values</label>
+        <button onclick="run();">Refresh</button>
+        &nbsp;&nbsp;|&nbsp;&nbsp;
+        <button onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show data</button>
        <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show data files</button>

-  <!-- <button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button> -->
-    <div id='editor' hidden='true'>
-    <textarea id="cnsl">
-datefile = document.getElementById("datafiles").value;
-numbername = document.getElementById("numbers").value;
-datatype = document.getElementById("datatype").value;
-//alert("Auslesen: " + datefile + " " + numbername);
-
-_domainname = getDomainname(); 
-fetch(_domainname + '/fileserver/log/data/' + datefile)
-.then(response => {
-    // handle the response
-    if (response.status == 404) {
-        firework.launch("No log data available for " + dateString, 'warning', 10000);
-    }
-    response.text()
-    .then( result => {
-        var lines = result.split("\n");
-        var trace = {
-        x: [],
-        y: [],
-        type: 'scatter'
-        };
-
-        var timex = 1;
-        for (let line of lines) {
-            {
-                console.log(line);
-                if (line.split(",")[1] == numbername)
-                {
-                    var value = line.split(",")[datatype];
-                    var time  = line.split(",")[0];
-                    console.log("> "+time+" "+value+"\n");
-                    trace.x.push(time);
-//                    timex += 1;
-                    trace.y.push(value);
-                }
-            }
-        }
-        console.log(trace);
-        var data = [trace];
-        Plotly.newPlot('chart', data);
-    });
-}).catch((error) => {
-    // handle the error
-    console.log(error);
-});        
-</textarea><br />
-<button onclick="run();">run</button>
 </div>

 <script>
--- a/sd-card/html/index.html
+++ b/sd-card/html/index.html
@@ -89,6 +89,7 @@
            <li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li>
            <li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li>
            <li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Viewer</a></li>
+            <li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li>
        </ul>
    </li>