From 82db0a34b9d03e23807baf3bb158afc6d2bae0b8 Mon Sep 17 00:00:00 2001 From: billz Date: Sun, 2 Feb 2020 08:37:15 +0000 Subject: [PATCH] WIP: dashboard redesign --- app/js/dashboardchart.js | 106 ++++++++++++++++++++++++++++++++ app/js/linkquality.js | 126 ++++++++++++++++++++------------------- includes/dashboard.php | 3 +- index.php | 13 ++-- templates/dashboard.php | 54 +++++++++-------- 5 files changed, 209 insertions(+), 93 deletions(-) create mode 100644 app/js/dashboardchart.js diff --git a/app/js/dashboardchart.js b/app/js/dashboardchart.js new file mode 100644 index 00000000..45914885 --- /dev/null +++ b/app/js/dashboardchart.js @@ -0,0 +1,106 @@ +(function($, _t) { + "use strict"; + + /** + * Create a Chart.js barchart. + */ + function CreateChart(ctx, labels) { + var barchart = new Chart(ctx,{ + type: 'line', + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + xAxes: [{ + scaleLabel: { + display: true + }, + ticks: { + maxRotation: 0, + minRotation: 0 + } + }], + yAxes: [{ + id: 'y-axis-1', + type: 'linear', + display: true, + position: 'left', + ticks: { + beginAtZero: true + } + }] + } + }, + data: { + labels: labels, + datasets: [] + } + }); + return barchart; + } + + function ShowBandwidthChartHandler(e) { + // Remove hourly chartjs chart + $('#divChartBandwidthhourly').empty(); + // Construct ajax uri for getting the proper data + var timeunit = 'hourly'; + var uri = 'ajax/bandwidth/get_bandwidth.php?'; + uri += 'inet='; + uri += encodeURIComponent($('#divInterface').text()); + uri += '&tu='; + uri += encodeURIComponent(timeunit.substr(0, 1)); + var datasizeunits = 'mb'; + uri += '&dsu='+encodeURIComponent(datasizeunits); + // Get data for chart + $.ajax({ + url: uri, + dataType: 'json', + beforeSend: function() {} + }).done(function(jsondata) { + // Map json values to label array + var labels = jsondata.map(function(e) { + return e.date; + }); + // Init. chart with label series + var barchart = CreateChart('divChartBandwidth'+timeunit, labels); + var dataRx = jsondata.map(function(e) { + return e.rx; + }); + var dataTx = jsondata.map(function(e) { + return e.tx; + }); + addData(barchart, dataTx, dataRx, datasizeunits); + }).fail(function(xhr, textStatus) { + if (window.console) { + console.error('server error'); + } else { + alert("server error"); + } + }); + } + /** + * Add data array to datasets of current chart. + */ + function addData(chart, dataTx, dataRx, datasizeunits) { + chart.data.datasets.push({ + label: 'Send'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'rgba(75, 192, 192, 0.2)', + data: dataTx + }); + chart.data.datasets.push({ + label: 'Receive'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(192, 192, 192, 1)', + backgroundColor: 'rgba(192, 192, 192, 0.2)', + data: dataRx + }); + chart.update(); + } + $(document).ready(function() { + ShowBandwidthChartHandler(); + }); + +})(jQuery, t); + diff --git a/app/js/linkquality.js b/app/js/linkquality.js index 6e8dd34b..79d3ad1d 100644 --- a/app/js/linkquality.js +++ b/app/js/linkquality.js @@ -3,84 +3,86 @@ // Support for dark terminal theme theme = getCookie('theme'); if (theme == 'terminal.css') { - var bgColor1 = '#000'; - var bgColor2 = '#000'; - var borderColor = 'rgba(46, 230, 0, 1)'; - var labelColor = 'rgba(46, 230, 0, 1)'; + var bgColor1 = '#000'; + var bgColor2 = '#000'; + var borderColor = 'rgba(46, 230, 0, 1)'; + var labelColor = 'rgba(46, 230, 0, 1)'; } else { - var bgColor1 = '#d4edda'; - var bgColor2 = '#eaecf4'; - var borderColor = 'rgba(147, 210, 162, 1)'; - var labelColor = 'rgba(130, 130, 130, 1)'; + var bgColor1 = '#d4edda'; + var bgColor2 = '#eaecf4'; + var borderColor = 'rgba(147, 210, 162, 1)'; + var labelColor = 'rgba(130, 130, 130, 1)'; } let data1 = { - datasets: [{ - data: [linkQ, 100-linkQ], - backgroundColor: [bgColor1, bgColor2], - borderColor: borderColor, - }], + datasets: [{ + data: [linkQ, 100-linkQ], + backgroundColor: [bgColor1, bgColor2], + borderColor: borderColor, + }], }; let config = { - type: 'doughnut', - data: data1, - options: { - aspectRatio: 2, - responsive: true, - tooltips: {enabled: false}, - hover: {mode: null}, - legend: { - display: false, - }, - rotation: (2/3)*Math.PI,//2+(1/3), - circumference: (1+(2/3)) * Math.PI, // * Math.PI, - cutoutPercentage: 80, - animation: { - animateScale: false, - animateRotate: true - }, - tooltips: { - enabled: false - } - }, - centerText: { - display: true, - text: linkQ + "%" - } + type: 'doughnut', + data: data1, + options: { + aspectRatio: 2, + responsive: true, + maintainAspectRatio: false, + tooltips: {enabled: false}, + hover: {mode: null}, + legend: { + display: false, + }, + rotation: (2/3)*Math.PI,//2+(1/3), + circumference: (1+(2/3)) * Math.PI, // * Math.PI, + cutoutPercentage: 80, + animation: { + animateScale: false, + animateRotate: true + }, + tooltips: { + enabled: false + } + }, + centerText: { + display: true, + text: linkQ + "%" + } }; -Chart.Chart.pluginService.register({ - beforeDraw: function(chart) { - if (chart.config.centerText.display !== null && - typeof chart.config.centerText.display !== 'undefined' && - chart.config.centerText.display) { - drawLinkQ(chart); - } - } -}); +//Chart.Chart.pluginService.register({ +// beforeDraw: function(chart) { +// if (chart.config.centerText.display !== null && +// typeof chart.config.centerText.display !== 'undefined' && +// chart.config.centerText.display) { +// drawLinkQ(chart); +// } +// } +//}); function drawLinkQ(chart) { - let width = chart.chart.width; - let height = chart.chart.height; - let ctx = chart.chart.ctx; + let width = chart.chart.width; + let height = chart.chart.height; + let ctx = chart.chart.ctx; - ctx.restore(); - let fontSize = (height / 100).toFixed(2); - ctx.font = fontSize + "em sans-serif"; - ctx.fillStyle = labelColor; - ctx.textBaseline = "middle"; + ctx.restore(); + let fontSize = (height / 100).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.fillStyle = labelColor; + ctx.textBaseline = "middle"; - let text = chart.config.centerText.text; - let textX = Math.round((width - ctx.measureText(text).width) * 0.5); - let textY = height / 2; - ctx.fillText(text, textX, textY); - ctx.save(); + let text = chart.config.centerText.text; + let textX = Math.round((width - ctx.measureText(text).width) * 0.5); + let textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); } window.onload = function() { - let ctx = document.getElementById("canvas").getContext("2d"); - window.myDoughnut = new Chart(ctx, config); + let ctx = document.getElementById("divChartLinkQ").getContext("2d"); + window.myDoughnut = new Chart(ctx, config); + //drawLinkQ(Chart); }; diff --git a/includes/dashboard.php b/includes/dashboard.php index aea43cb1..42d39b48 100755 --- a/includes/dashboard.php +++ b/includes/dashboard.php @@ -3,7 +3,7 @@ /** * Show dashboard page. */ -function DisplayDashboard() +function DisplayDashboard(&$extraFooterScripts) { $status = new StatusMessages(); @@ -194,6 +194,7 @@ function DisplayDashboard() "strLinkQuality", "wlan0up" )); + $extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false); } diff --git a/index.php b/index.php index 710fb2c5..5ffe2c63 100755 --- a/index.php +++ b/index.php @@ -108,13 +108,14 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) {