devshort

Unnamed repository; edit this file 'description' to name the repository.
git clone git://code.clttr.info/devshort.git
Log | Files | Refs | README | LICENSE

commit 5990050ccff4a8dfc1f3ffd72ae4d06ef176d000
parent 9d93f2577012bc380f6602876f52ea5d6cbcac19
Author: Florian <flokX@users.noreply.github.com>
Date:   Sat, 18 Jan 2020 10:12:26 +0100

Fix incorrect charts

Diffstat:
Massets/main.js | 121+++++++++++++++++++++++++++++++++++++++----------------------------------------
1 file changed, 59 insertions(+), 62 deletions(-)

diff --git a/assets/main.js b/assets/main.js @@ -4,65 +4,6 @@ const spinner = document.getElementById('spinner'); const statusDiv = document.getElementById('status'); const template = document.getElementById('chart-template'); const version = "v3.0.0"; -var chartOptions = { - type: 'bar', - data: { - datasets: [{ - label: 'Access count', - data: [], - backgroundColor: 'rgba(0, 123, 255, 0.4)', - borderColor: '#007bff', - hoverBackgroundColor: 'rgba(0, 123, 255, 0.7)' - }] - }, - options: { - legend: { - display: false - }, - title: { - display: true, - text: 'Accesses to ' - }, - scales: { - xAxes: [{ - type: 'time', - distribution: 'linear', - ticks: { - min: currentDate.getTime() - (60 * 60 * 24 * 14 * 1000), - max: currentDate - }, - time: { - tooltipFormat: 'YYYY-MM-DD', - unit: 'day' - } - }], - yAxes: [{ - ticks: { - beginAtZero: true, - precision: 0 - } - }] - }, - plugins: { - zoom: { - pan: { - enabled: true, - mode: 'x', - rangeMax: { - x: currentDate - } - }, - zoom: { - enabled: true, - mode: 'x', - rangeMax: { - x: currentDate - } - } - } - } - } -}; // Helper function to post to page api function post(url, data) { @@ -100,9 +41,65 @@ Vue.component('chart', { this.accessCount.total += count; dataset.push({ x: timestamp, y: count }); } - this.chart = new Chart(ctx, chartOptions); - this.chart.data.datasets[0].data = dataset; - this.chart.options.title.text = 'Accesses to ' + this.name; + this.chart = new Chart(ctx, { + type: 'bar', + data: { + datasets: [{ + label: 'Access count', + data: dataset, + backgroundColor: 'rgba(0, 123, 255, 0.4)', + borderColor: '#007bff', + hoverBackgroundColor: 'rgba(0, 123, 255, 0.7)' + }] + }, + options: { + legend: { + display: false + }, + title: { + display: true, + text: 'Accesses to ' + this.name + }, + scales: { + xAxes: [{ + type: 'time', + distribution: 'linear', + ticks: { + min: currentDate.getTime() - (60 * 60 * 24 * 14 * 1000), + max: currentDate + }, + time: { + tooltipFormat: 'YYYY-MM-DD', + unit: 'day' + } + }], + yAxes: [{ + ticks: { + beginAtZero: true, + precision: 0 + } + }] + }, + plugins: { + zoom: { + pan: { + enabled: true, + mode: 'x', + rangeMax: { + x: currentDate + } + }, + zoom: { + enabled: true, + mode: 'x', + rangeMax: { + x: currentDate + } + } + } + } + } + }); }, beforeDestroy: function () { this.chart.destroy();