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

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;">
-                <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 style="width: 100%;"><canvas id="mainChart"></canvas></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: {
-                    headers: [],
-                    rows: []
-                },
+                chart: null,
 
                 settingFetchComplete: false
             }
@@ -192,11 +181,12 @@
                         let logfileContent = await resp.text()
                         const lines = logfileContent.trim().split(/\r\n|\n/)
 
-                        // Первая строка содержит заголовки
-                        this.logsTable.headers = lines.shift().split('\t')
+                        // столбец timestamp пропускаем
+                        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")
         }
     });