попытка нарисовать график

src/main.cpp

@@ -95,6 +95,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";
@@ -117,6 +120,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
@@ -185,6 +191,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,22 +94,14 @@
             <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;">
+            <div style="width: 100%;"><canvas id="mainChart"></canvas></div>
-                <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>
 <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`); }
@@ -132,10 +124,7 @@
                         maxAgeMs: 0
                     }
                 },
-                logsTable: {
+                chart: null,
-                    headers: [],
-                    rows: []
-                },
 
                 settingFetchComplete: false
             }
@@ -192,11 +181,12 @@
                         let logfileContent = await resp.text()
                         const lines = logfileContent.trim().split(/\r\n|\n/)
 
-                        // Первая строка содержит заголовки
+                        // столбец timestamp пропускаем
-                        this.logsTable.headers = lines.shift().split('\t')
+                        this.chart.data.labels = lines.shift().split('\t').shift()
 
-                        // Остальные строки содержат данные
+
-                        this.logsTable.rows = lines.map(line => line.split('\t'))
+                        // this.chartDataset.rows = lines.map(line => line.split('\t'))
+                        this.chart.update()
                     })
                     .catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) })
                     .finally(() => { this.submitStatus.logView = false })
@@ -215,6 +205,30 @@
                 this.updateLoggingStatisticsSettings(vals)
             }
             doFetchSettings().then(() => {})
+            let chart = new Chart(
+                document.getElementById("mainChart"),
+                {
+                    type: 'line',
+                    datasets: [
+                        {
+                            label: 'Net sales',
+                            data: [
+                                {x: new Date('2021-11-06 23:39:30'), y: 50},
+                                {x: new Date('2021-11-07 01:00:28'), y: 60},
+                                {x: new Date('2021-11-07 09:00:28'), y: 20}
+                            ]
+                        }
+                    ],
+                    options: {
+                        scales: {
+                            x: {
+                                type: 'time',
+                            }
+                        }
+                    }
+                }
+            )
+            this.chart = chart
             document.getElementById("app").removeAttribute("hidden")
         }
     });

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()}}:{})}));