dyadmisha
/
AI-on-the-edge-device
зеркало из https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
							<!DOCTYPE html>
<html lang="en" xml:lang="en"> 
<head>
    <meta charset="UTF-8"/>
    <title>Data Graph</title>
	
    <script type="text/javascript" src='plotly-basic-2.18.2.min.js?v=$COMMIT_HASH'></script>

    <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>
        h1 {font-size: 2em;}
        h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
        h3 {font-size: 1.2em;}
        p {font-size: 1em;}

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        select {
            padding: 3px 5px;
            display: inline-block;
            border: 1px solid #ccc;
            font-size: 16px; 
            margin-right: 10px;
            min-width: 100px;
            vertical-align: middle;
        }

        .button {
            padding: 5px 10px;
            width: 160px;
            font-size: 16px;
        }
    </style>

    <script>
    function run() {
        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 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);

                            /* Catch empty fields */
                            if (value == "" || isNaN(value)) {
                                value = NaN;
                            }

                            if (preValue == "" || isNaN(preValue)) {
                                preValue = NaN;
                            }

                            if (changeRate == "" || isNaN(changeRate)) {
                                changeRate = NaN;
                            }

                            if (changeAbsolute == "" || isNaN(changeAbsolute)) {
                                changeAbsolute = NaN;
                            }

                            traceValue.y.push(value);
                            tracePreValue.y.push(preValue);
                            traceChangeRate.y.push(changeRate);
                            traceChangeAbsolute.y.push(changeAbsolute);
                        }
                    }
                }

                /* If the value trace starts with NaN, replace all those Nans with the first valid value */
                var firstNonNaNIndex = 0;
                for(var i = 0; i < traceValue.y.length; i++) {
                    firstNonNaNIndex = i;
                    if (! isNaN(traceValue.y[i])) {
                        break;
                    }
                }

                if (firstNonNaNIndex == (traceValue.y.length - 1)) {
                    console.log("No data available for 'value'!");
                }
                else if (firstNonNaNIndex > 0) { // Replace all leading NaN with the first valid value 
                    console.log("The first leading values have all just NaN, replacing them with the value of",
                            traceValue.y[firstNonNaNIndex], "at", traceValue.x[firstNonNaNIndex], "(Index:", firstNonNaNIndex, ")");
                    for(var i = 0; i < firstNonNaNIndex; i++) {
                        traceValue.y[i] = traceValue.y[firstNonNaNIndex];
                    }
                }


                // 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];

                traceValue.connectgaps = true;

                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: 70,
                        r: 70,
                        b: 50,
                        t: 40,
                        pad: 4
                    },

                    legend: {
                        x: 0.02,
                        y: 0.97,
                        xanchor: 'left'
                    }
                };

                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">
    <script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>  
    <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
</head>

<body>
    <h2>Data Graph</h2>
    <div id='chart'><p>Loading...<br></p></div>
    Number sequence:
    <select id="numbers" onchange="run();"></select>
    Day:
    <select id="datafiles" onchange="run();"></select>
    <input type="checkbox" id="showRrelativeValues" onclick = 'run();' unchecked ><label for="showRrelativeValues">Show relative values</label><br><br>
    <button class="button" onclick="run();">Refresh</button>
    <button class="button" onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show Data Viewer</button>
    <button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>

<script>
    function WriteModelFiles()
    {
        list_data = getDATAList();

        var _indexDig = document.getElementById("datafiles");
        while (_indexDig.length)
            _indexDig.remove(0);

        for (var i = list_data.length - 1; i >= 0; --i)
        {
            var optionDig = document.createElement("option");
            
            var text = list_data[i];
            optionDig.text = text;
            optionDig.value = list_data[i];
            _indexDig.add(optionDig);
        }
    }

    function WriteNumbers()
    {
        list_data = getNUMBERSList();

        var _indexDig = document.getElementById("numbers");
        while (_indexDig.length)
            _indexDig.remove(0);

        for (var i = 0; i < list_data.length; ++i)
        {
            var optionDig = document.createElement("option");
            
            var text = list_data[i];
            optionDig.text = text;
            optionDig.value = list_data[i];
            _indexDig.add(optionDig);
        }
    }

    WriteModelFiles();
    WriteNumbers();

    function Refresh() {
        setTimeout (function() {
            run();
            Refresh();
        }, 300000);
    }

    run();
    Refresh();
</script>
</body>
</html>