Merge branch 'refs/heads/dev-log-chart'

src/main.cpp

@@ -113,6 +113,9 @@ public:
     // картинки, их даже можно кешировать
     static constexpr const char* FAVICON_ICO = "/favicon.ico";
     static constexpr const char* VUE_JS = "/js/vue.js"; // это тоже можно кешировать
+    static constexpr const char* CHARTJS = "/js/chart.js";
+    static constexpr const char* MOMENT_JS = "/js/moment.js";
+    static constexpr const char* CHARTJS_ADAPTER_MOMENT = "/js/chartjs-adapter-moment.js";
 
     // а эти стили нельзя кешировать в отладочной версии
     static constexpr const char* STYLE_CSS = "/style.css";
@@ -135,6 +138,9 @@ public:
         auth.users.emplace_back(std::make_shared<http::auth::User>("developer", "10628cfc434fb87f31d675d37e0402c2d824cfe8393aff7a61ee57aaa7d909c3", http::auth::User::SUPERUSER));
 
         sf->registerFile(staticFilesPath + "/favicon.png", FAVICON_ICO, mime_types::image_png, true);
+        sf->registerFile(staticFilesPath + CHARTJS, CHARTJS, mime_types::javascript, true);
+        sf->registerFile(staticFilesPath + MOMENT_JS, MOMENT_JS, mime_types::javascript, true);
+        sf->registerFile(staticFilesPath + CHARTJS_ADAPTER_MOMENT, CHARTJS_ADAPTER_MOMENT, mime_types::javascript, true);
 #ifdef USE_DEBUG
         sf->registerFile(staticFilesPath + VUE_JS, VUE_JS, mime_types::javascript, true);
 #else
@@ -203,6 +209,9 @@ public:
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(STYLE_CSS, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(STYLE_CSS, rep); }));
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(FIELDS_CSS, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(FIELDS_CSS, rep); }));
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(VUE_JS, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(VUE_JS, rep); }));
+        s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(CHARTJS, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(CHARTJS, rep); }));
+        s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(MOMENT_JS, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(MOMENT_JS, rep); }));
+        s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(CHARTJS_ADAPTER_MOMENT, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(CHARTJS_ADAPTER_MOMENT, rep); }));
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>(INTERNET_JPG, [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(INTERNET_JPG, rep); }));
 
         s.resources.emplace_back(std::make_unique<http::auth::AuthRequiredResource>("/api/get/statistics", this->auth, http::auth::User::WATCH_STATISTICS, [this](const auto& req, auto& rep) {

static/dev.html

@@ -94,27 +94,52 @@
             <h2>Просмотр логов</h2>
             <button class="action-button" @click="logView()">Обновить <span class="submit-spinner" v-show="submitStatus.logView"></span></button>
             <a href="/dev/logs.csv" class="action-button" download>Скачать</a>
-            <div v-if="logsTable.headers.length != 0" style="overflow-x: auto;">
-                <table>
-                    <tbody>
-                    <tr>
-                        <th v-for="h in logsTable.headers">{{ h }}</th>
-                    </tr>
-                    <tr v-for="r in logsTable.rows">
-                        <td v-for="value in r">{{ value }}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
         </div>
     </div>
 </div>
+
+<div class="settings-set-container"><h2>График</h2><canvas id="mainChart" style="display: block; box-sizing: border-box;"></canvas></div>
+
 <script src="/js/vue.js?v=3.5.13"></script>
+<script src="/js/chart.js"></script>
+<script src="/js/moment.js"></script>
+<script src="/js/chartjs-adapter-moment.js"></script>
 <script>
     // для обновления высоты хидера
     function updateHeaderHeight() { const header = document.querySelector('header'); document.body.style.setProperty('--header-height', `${header.offsetHeight}px`); }
     window.addEventListener('load', updateHeaderHeight); window.addEventListener('resize', updateHeaderHeight);
 
+    let MainChart = new Chart(document.getElementById('mainChart').getContext('2d'), {
+        type: 'line',
+        data: {
+            datasets: []
+        },
+        options: {
+            responsive: true,
+            scales: {
+                x: {
+                    type: 'time',
+                    title: {
+                        display: true,
+                        text: 'Время',
+                        font: {
+                            padding: 4,
+                            size: 20,
+                            weight: 'bold',
+                            family: 'Arial'
+                        },
+                        //color: 'darkblue'
+                    },
+                },
+                y: {
+                    beginAtZero: true,
+                    type: 'linear',
+                    position: 'left'
+                }
+            }
+        }
+    })
+
     const app = Vue.createApp({
         data() {
             return {
@@ -132,10 +157,7 @@
                         maxAgeMs: 0
                     }
                 },
-                logsTable: {
-                    headers: [],
-                    rows: []
-                },
+                chart: null,
 
                 settingFetchComplete: false
             }
@@ -192,11 +214,28 @@
                         let logfileContent = await resp.text()
                         const lines = logfileContent.trim().split(/\r\n|\n/)
 
-                        // Первая строка содержит заголовки
-                        this.logsTable.headers = lines.shift().split('\t')
+                        let datasets = []
 
-                        // Остальные строки содержат данные
-                        this.logsTable.rows = lines.map(line => line.split('\t'))
+                        // столбец timestamp пропускаем
+                        let labels = lines.shift().split('\t')
+                        labels.shift()
+                        let rows = lines.map(line => line.split('\t'))
+
+                        for (let li = 0; li < labels.length; li++) {
+                            let td = []
+                            for (let ri = 0; ri < rows.length; ri++) {
+                                td.push({x: new Date(rows[ri][0]), y: rows[ri][li + 1]})
+                            }
+                            datasets.push({
+                                label: labels[li],
+                                data: td,
+                                //borderColor: 'blue',
+                                borderWidth: 2,
+                                fill: false,
+                            })
+                        }
+                        MainChart.datasets = datasets
+                        MainChart.update()
                     })
                     .catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) })
                     .finally(() => { this.submitStatus.logView = false })
@@ -216,6 +255,7 @@
             }
             doFetchSettings().then(() => {})
             document.getElementById("app").removeAttribute("hidden")
+            //this.chart = chart
         }
     });
     app.mount('#app')

static/js/chartjs-adapter-moment.js

@@ -0,0 +1,7 @@
+/*!
+  * chartjs-adapter-moment v1.0.1
+  * https://www.chartjs.org
+  * (c) 2022 chartjs-adapter-moment Contributors
+  * Released under the MIT license
+  */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("moment"),require("chart.js")):"function"==typeof define&&define.amd?define(["moment","chart.js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).moment,e.Chart)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=n(e);const a={datetime:"MMM D, YYYY, h:mm:ss a",millisecond:"h:mm:ss.SSS a",second:"h:mm:ss a",minute:"h:mm a",hour:"hA",day:"MMM D",week:"ll",month:"MMM YYYY",quarter:"[Q]Q - YYYY",year:"YYYY"};t._adapters._date.override("function"==typeof f.default?{_id:"moment",formats:function(){return a},parse:function(e,t){return"string"==typeof e&&"string"==typeof t?e=f.default(e,t):e instanceof f.default||(e=f.default(e)),e.isValid()?e.valueOf():null},format:function(e,t){return f.default(e).format(t)},add:function(e,t,n){return f.default(e).add(t,n).valueOf()},diff:function(e,t,n){return f.default(e).diff(f.default(t),n)},startOf:function(e,t,n){return e=f.default(e),"isoWeek"===t?(n=Math.trunc(Math.min(Math.max(0,n),6)),e.isoWeekday(n).startOf("day").valueOf()):e.startOf(t).valueOf()},endOf:function(e,t){return f.default(e).endOf(t).valueOf()}}:{})}));