график хотя бы рисуется, но при обновлении страницы возникает переполнение стека
This commit is contained in:
parent
6122040752
commit
9c62810e8e
@ -94,10 +94,12 @@
|
|||||||
<h2>Просмотр логов</h2>
|
<h2>Просмотр логов</h2>
|
||||||
<button class="action-button" @click="logView()">Обновить <span class="submit-spinner" v-show="submitStatus.logView"></span></button>
|
<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>
|
<a href="/dev/logs.csv" class="action-button" download>Скачать</a>
|
||||||
<div style="width: 100%;"><canvas id="mainChart"></canvas></div>
|
|
||||||
</div>
|
</div>
|
||||||
</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/vue.js?v=3.5.13"></script>
|
||||||
<script src="/js/chart.js"></script>
|
<script src="/js/chart.js"></script>
|
||||||
<script src="/js/moment.js"></script>
|
<script src="/js/moment.js"></script>
|
||||||
@ -181,11 +183,27 @@
|
|||||||
let logfileContent = await resp.text()
|
let logfileContent = await resp.text()
|
||||||
const lines = logfileContent.trim().split(/\r\n|\n/)
|
const lines = logfileContent.trim().split(/\r\n|\n/)
|
||||||
|
|
||||||
|
let datasets = []
|
||||||
|
|
||||||
// столбец timestamp пропускаем
|
// столбец timestamp пропускаем
|
||||||
this.chart.data.labels = lines.shift().split('\t').shift()
|
let labels = lines.shift().split('\t')
|
||||||
|
labels.shift()
|
||||||
|
let rows = lines.map(line => line.split('\t'))
|
||||||
|
|
||||||
|
for (let li = 0; li < labels.length; li++) {
|
||||||
// this.chartDataset.rows = lines.map(line => line.split('\t'))
|
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,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.chart.datasets = datasets
|
||||||
this.chart.update()
|
this.chart.update()
|
||||||
})
|
})
|
||||||
.catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) })
|
.catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) })
|
||||||
@ -205,31 +223,39 @@
|
|||||||
this.updateLoggingStatisticsSettings(vals)
|
this.updateLoggingStatisticsSettings(vals)
|
||||||
}
|
}
|
||||||
doFetchSettings().then(() => {})
|
doFetchSettings().then(() => {})
|
||||||
let chart = new Chart(
|
let chart = new Chart(document.getElementById('mainChart').getContext('2d'), {
|
||||||
document.getElementById("mainChart"),
|
|
||||||
{
|
|
||||||
type: 'line',
|
type: 'line',
|
||||||
datasets: [
|
data: {
|
||||||
{
|
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: {
|
options: {
|
||||||
|
responsive: true,
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Время',
|
||||||
|
font: {
|
||||||
|
padding: 4,
|
||||||
|
size: 20,
|
||||||
|
weight: 'bold',
|
||||||
|
family: 'Arial'
|
||||||
|
},
|
||||||
|
//color: 'darkblue'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
type: 'linear',
|
||||||
|
position: 'left'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
)
|
|
||||||
this.chart = chart
|
this.chart = chart
|
||||||
document.getElementById("app").removeAttribute("hidden")
|
document.getElementById("app").removeAttribute("hidden")
|
||||||
|
//this.chart = chart
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
Loading…
x
Reference in New Issue
Block a user