diff options
author | Costa Tsaousis (ktsaou) <costa@tsaousis.gr> | 2016-01-09 05:46:10 +0200 |
---|---|---|
committer | Costa Tsaousis (ktsaou) <costa@tsaousis.gr> | 2016-01-09 05:46:10 +0200 |
commit | ae676be6beb76e5bc9c0d977057348a3c78cf3e2 (patch) | |
tree | 08632e16a5b58d3425823036c67dd6d25003ec08 /web | |
parent | 721683bf2a7485e316b1cdb02a3d0034bc1f2192 (diff) |
added gauge.js and adapted dashboard to use it
Diffstat (limited to 'web')
-rw-r--r-- | web/Makefile.am | 1 | ||||
-rwxr-xr-x | web/dashboard.css | 78 | ||||
-rwxr-xr-x | web/dashboard.html | 84 | ||||
-rwxr-xr-x | web/dashboard.js | 321 | ||||
-rwxr-xr-x | web/index.html | 116 | ||||
-rw-r--r-- | web/lib/gauge.min.js | 1 |
6 files changed, 545 insertions, 56 deletions
diff --git a/web/Makefile.am b/web/Makefile.am index 248326b4cb..c7f75c9a2a 100644 --- a/web/Makefile.am +++ b/web/Makefile.am @@ -40,6 +40,7 @@ dist_weblib_DATA = \ lib/bootstrap-toggle.min.js \ lib/c3.min.js \ lib/d3.min.js \ + lib/gauge.min.js \ $(NULL) webcssdir=$(webdir)/css diff --git a/web/dashboard.css b/web/dashboard.css index 98c877f7fb..937825d7f5 100755 --- a/web/dashboard.css +++ b/web/dashboard.css @@ -330,6 +330,7 @@ html { display: inline-block; position: absolute; float: left; + left: 0; width: 100%; text-align: center; color: #333333; @@ -340,6 +341,7 @@ html { display: inline-block; position: absolute; float: left; + left: 0; width: 64%; margin-left: 18%; text-align: center; @@ -351,9 +353,85 @@ html { display: inline-block; position: absolute; float: left; + left: 0; width: 60%; margin-left: 20%; text-align: center; color: #999999; font-weight: normal; } + + +.gaugeChart { + position: relative; + text-align: center; +} + +.gaugeChart canvas { + position: absolute; + top: 0; + left: 0; + z-index: 0; +} + +.gaugeChartLabel { + display: inline-block; + position: absolute; + float: left; + left: 0; + width: 100%; + text-align: center; + color: #FFFFFF; + font-weight: bold; + z-index: 1; +} + +.gaugeChartTitle { + display: inline-block; + position: absolute; + float: left; + left: 0; + width: 100%; + text-align: center; + color: #999999; + font-weight: bold; +} + +.gaugeChartUnits { + display: inline-block; + position: absolute; + float: left; + left: 0; + bottom: 0; + width: 100%; + text-align: left; + margin-left: 5%; + color: #999999; + font-weight: normal; +} + +.gaugeChartMin { + display: inline-block; + position: absolute; + float: left; + left: 0; + bottom: 10%; + width: 92%; + margin-left: 8%; + text-align: left; + color: #999999; + font-weight: normal; +} + +.gaugeChartMax { + display: inline-block; + position: absolute; + float: left; + left: 0; + bottom: 10%; + width: 95%; + margin-right: 5%; + text-align: right; + color: #999999; + font-weight: normal; +} diff --git a/web/dashboard.html b/web/dashboard.html index b8cc10e967..82f8128cdb 100755 --- a/web/dashboard.html +++ b/web/dashboard.html @@ -422,6 +422,90 @@ Sparklines using dygraphs </div> </div> + +<hr> +<h1>Gauge.js</h1> +<br/> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.processes" + data-chart-library="gauge" + data-width="250" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time701" + ></div> + <br/> + <small>rendered in <span id="time701">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.processes" + data-chart-library="gauge" + data-width="125" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time701a" + ></div> + <br/> + <small>rendered in <span id="time701a">X</span> ms</small> + </div> +</div> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.ipv4" + data-chart-library="gauge" + data-width="250" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time702" + ></div> + <br/> + <small>rendered in <span id="time702">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.ipv4" + data-chart-library="gauge" + data-width="125" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time702a" + ></div> + <br/> + <small>rendered in <span id="time702a">X</span> ms</small> + </div> +</div> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.cpu" + data-chart-library="gauge" + data-width="250" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time703" + ></div> + <br/> + <small>rendered in <span id="time703">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.cpu" + data-chart-library="gauge" + data-width="125" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time703a" + ></div> + <br/> + <small>rendered in <span id="time703a">X</span> ms</small> + </div> +</div> + + <hr> <h1>Google Charts</h1> NetData was originaly developed with Google Charts. diff --git a/web/dashboard.js b/web/dashboard.js index 8c01700aac..c61e570ef4 100755 --- a/web/dashboard.js +++ b/web/dashboard.js @@ -6,6 +6,7 @@ // var netdataNoGoogleCharts = true; // do not use google // var netdataNoMorris = true; // do not use morris // var netdataNoEasyPieChart = true; // do not use easy pie chart +// var netdataNoGauge = true; // do not use gauge.js // var netdataNoD3 = true; // do not use D3 // var netdataNoC3 = true; // do not use C3 // var netdataNoBootstrap = true; // do not load bootstrap @@ -76,6 +77,7 @@ NETDATA.peity_js = NETDATA.serverDefault + 'lib/jquery.peity.min.js'; NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js'; NETDATA.easypiechart_js = NETDATA.serverDefault + 'lib/jquery.easypiechart.min.js'; + NETDATA.gauge_js = NETDATA.serverDefault + 'lib/gauge.min.js'; NETDATA.dygraph_js = NETDATA.serverDefault + 'lib/dygraph-combined.js'; NETDATA.dygraph_smooth_js = NETDATA.serverDefault + 'lib/dygraph-smooth-plotter.js'; NETDATA.raphael_js = NETDATA.serverDefault + 'lib/raphael-min.js'; @@ -1356,6 +1358,7 @@ var noDataToShow = function() { + showMessageIcon('<i class="fa fa-warning"></i> empty'); that.legendUpdateDOM(); that.tm.last_autorefreshed = new Date().getTime(); that.data_update_every = 30 * 1000; @@ -4145,6 +4148,21 @@ }; // ---------------------------------------------------------------------------------------------------------------- + + NETDATA.percentFromValueMax = function(value, max) { + if(value === null) value = 0; + if(max < value) max = value; + + var pcent = 0; + if(max !== 0) { + pcent = Math.round(value * 100 / max); + if(pcent === 0 && value > 0) pcent = 1; + } + + return pcent; + } + + // ---------------------------------------------------------------------------------------------------------------- // easy-pie-chart NETDATA.easypiechartInitialize = function(callback) { @@ -4200,20 +4218,6 @@ if(slot < 0 || slot >= state.data.result.length) return NETDATA.easypiechartClearSelection(state); - var value = state.data.result[slot]; - if(value === null) value = 0; - - var max = (state.easyPieChartMax === null)?state.data.max:state.easyPieChartMax; - if(max < value) max = value; - - var pcent = 0; - if(max !== 0) { - pcent = Math.round(value * 100 / max); - if(pcent === 0 && value > 0) pcent = 1; - } - - // console.log('slot = ' + slot + ' value = ' + value + ' max = ' + max + ' pcent = ' + pcent); - if(typeof state.easyPieChartEvent === 'undefined') { state.easyPieChartEvent = { timer: null, @@ -4222,6 +4226,10 @@ }; } + var value = state.data.result[slot]; + var max = (state.easyPieChartMax === null)?state.data.max:state.easyPieChartMax; + var pcent = NETDATA.percentFromValueMax(value, max); + state.easyPieChartEvent.value = value; state.easyPieChartEvent.pcent = pcent; state.easyPieChartLabel.innerHTML = state.legendFormatValue(value); @@ -4248,16 +4256,8 @@ } else { value = data.result[0]; - if(value === null) value = 0; - max = (state.easyPieChartMax === null)?data.max:state.easyPieChartMax; - if(max < value) max = value; - - pcent = 0; - if(max !== 0) { - pcent = Math.round(value * 100 / max); - if(pcent === 0 && value > 0) pcent = 1; - } + pcent = NETDATA.percentFromValueMax(value, max); } state.easyPieChartLabel.innerHTML = state.legendFormatValue(value); @@ -4270,29 +4270,28 @@ var chart = $(state.element_chart); var value = data.result[0]; - if(value === null) value = 0; - var max = self.data('easypiechart-max-value') || null; + var adjust = self.data('easypiechart-adjust') || null; + if(max === null) { max = data.max; state.easyPieChartMax = null; } - else { + else state.easyPieChartMax = max; - } - if(max < value) max = value; - var pcent = 0; - if(max !== 0) { - pcent = Math.round(value * 100 / max); - if(pcent === 0 && value > 0) pcent = 1; - } + var pcent = NETDATA.percentFromValueMax(value, max); - // console.log('value = ' + value + ' max = ' + max + ' pcent = ' + pcent); chart.data('data-percent', pcent); - var size = Math.min(state.chartWidth(), state.chartHeight()); - if(size < 50) size = state.chartWidth(); + var size; + switch(adjust) { + case 'width': size = state.chartHeight(); break; + case 'min': size = Math.min(state.chartWidth(), state.chartHeight()); break; + case 'max': size = Math.max(state.chartWidth(), state.chartHeight()); break; + case 'height': + default: size = state.chartWidth(); break; + } state.element.style.width = size + 'px'; state.element.style.height = size + 'px'; @@ -4329,7 +4328,7 @@ chart.easyPieChart({ barColor: self.data('easypiechart-barcolor') || state.chartColors()[0], //'#ef1e25', - trackColor: self.data('easypiechart-trackcolor') || '#f2f2f2', + trackColor: self.data('easypiechart-trackcolor') || '#f0f0f0', scaleColor: self.data('easypiechart-scalecolor') || '#dfe0e0', scaleLength: self.data('easypiechart-scalelength') || 5, lineCap: self.data('easypiechart-linecap') || 'round', @@ -4355,6 +4354,237 @@ }; // ---------------------------------------------------------------------------------------------------------------- + // gauge.js + + NETDATA.gaugeInitialize = function(callback) { + if(typeof netdataNoGauge === 'undefined' || !netdataNoGauge) { + $.ajax({ + url: NETDATA.gauge_js, + cache: true, + dataType: "script" + }) + .done(function() { + NETDATA.registerChartLibrary('gauge', NETDATA.gauge_js); + }) + .fail(function() { + NETDATA.error(100, NETDATA.gauge_js); + }) + .always(function() { + if(typeof callback === "function") + callback(); + }) + } + else { + NETDATA.chartLibraries.gauge.enabled = false; + if(typeof callback === "function") + callback(); + } + }; + + NETDATA.gaugeClearSelection = function(state) { + if(typeof state.gaugeEvent !== 'undefined') { + if(state.gaugeEvent.timer !== null) + clearTimeout(state.gaugeEvent.timer); + + state.gaugeEvent.timer = null; + } + + if(state.isAutoRefreshed() === true && state.data !== null) { + NETDATA.gaugeChartUpdate(state, state.data); + } + else { + state.gaugeChartLabel.innerHTML = state.legendFormatValue(null); + state.gaugeChartMax.innerHTML = state.legendFormatValue(null); + state.gauge_instance.animationSpeed = 1; + state.gauge_instance.set(0); + } + state.gauge_instance.animationSpeed = 32; + + return true; + }; + + NETDATA.gaugeSetSelection = function(state, t) { + if(t < state.data_after || t > state.data_before) + return NETDATA.gaugeClearSelection(state); + + var slot = Math.floor(state.data.result.length - 1 - (t - state.data_after) / state.data_update_every); + if(slot < 0 || slot >= state.data.result.length) + return NETDATA.gaugeClearSelection(state); + + if(typeof state.gaugeEvent === 'undefined') { + state.gaugeEvent = { + timer: null, + value: 0, + max: 0, + }; + } + + var value = state.data.result[slot]; + var max = (state.gaugeMax === null)?state.data.max:state.gaugeMax; + if(value > max) max = value; + + state.gaugeEvent.value = value; + state.gaugeEvent.max = max; + state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); + state.gaugeChartMax.innerHTML = state.legendFormatValue(max); + + if(state.gaugeEvent.timer === null) { + state.gauge_instance.animationSpeed = 1; + + state.gaugeEvent.timer = setTimeout(function() { + state.gaugeEvent.timer = null; + state.gauge_instance.maxValue = state.gaugeEvent.max; + state.gauge_instance.set(state.gaugeEvent.value); + }, 50); + } + + return true; + }; + + NETDATA.gaugeChartUpdate = function(state, data) { + var value, max; + + if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshed() === false) { + value = 0; + state.gaugeChartLabel.innerHTML = state.legendFormatValue(null); + state.gaugeChartMax.innerHTML = state.legendFormatValue(null); + state.gauge_instance.set(value); + } + else { + value = data.result[0]; + max = (state.gaugeMax === null)?data.max:state.gaugeMax; + if(value > max) max = value; + state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); + state.gaugeChartMax.innerHTML = state.legendFormatValue(max); + state.gauge_instance.maxValue = max; + state.gauge_instance.set(value); + } + + return true; + }; + + NETDATA.gaugeChartCreate = function(state, data) { + var self = $(state.element); + var chart = $(state.element_chart); + + var value = data.result[0]; + var max = self.data('gauge-max-value') || null; + var adjust = self.data('gauge-adjust') || null; + + if(max === null) { + max = data.max; + state.gaugeMax = null; + } + else + state.gaugeMax = max; + + var width = state.chartWidth(), height = state.chartHeight(), ratio = 1.5; + switch(adjust) { + case 'width': width = height * ratio; break; + case 'height': + default: height = width / ratio; break; + } + state.element.style.width = width.toString() + 'px'; + state.element.style.height = height.toString() + 'px'; + + var lum_d = 0.05; + + var options = { + lines: 12, // The number of lines to draw + angle: 0.15, // The length of each line + lineWidth: 0.44, // 0.44 The line thickness + pointer: { + length: 0.8, // 0.9 The radius of the inner circle + strokeWidth: 0.035, // The rotation offset + color: '#C0C0C0' // Fill color + }, + colorStart: state.chartColors()[0], // Colors + colorStop: state.chartColors()[0], // just experiment with them + strokeColor: '#F0F0F0', // to see which ones work best for you + generateGradient: false, + percentColors: [ + [0.0, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 0))], + [0.1, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 1))], + [0.2, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 2))], + [0.3, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 3))], + [0.4, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 4))], + [0.5, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 5))], + [0.6, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 6))], + [0.7, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 7))], + [0.8, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 8))], + [0.9, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 9))], + [1.0, state.chartColors()[0]]] + }; + + state.gauge_canvas = document.createElement('canvas'); + state.gauge_canvas.id = 'gauge-' + state.uuid + '-canvas'; + state.gauge_canvas.className = 'gaugeChart'; + state.gauge_canvas.width = width; + state.gauge_canvas.height = height; + state.element_chart.appendChild(state.gauge_canvas); + + var valuefontsize = Math.floor(height / 6); + var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2); + state.gaugeChartLabel = document.createElement('span'); + state.gaugeChartLabel.className = 'gaugeChartLabel'; + state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); + state.gaugeChartLabel.style.fontSize = valuefontsize + 'px'; + state.gaugeChartLabel.style.top = valuetop.toString() + 'px'; + state.element_chart.appendChild(state.gaugeChartLabel); + + var titlefontsize = Math.round(valuefontsize / 2); + var titletop = 0; + state.gaugeChartTitle = document.createElement('span'); + state.gaugeChartTitle.className = 'gaugeChartTitle'; + state.gaugeChartTitle.innerHTML = state.title; + state.gaugeChartTitle.style.fontSize = titlefontsize + 'px'; + state.gaugeChartTitle.style.lineHeight = titlefontsize + 'px'; + state.gaugeChartTitle.style.top = titletop.toString() + 'px'; + state.element_chart.appendChild(state.gaugeChartTitle); + + var unitfontsize = Math.round(titlefontsize * 0.9); + state.gaugeChartUnits = document.createElement('span'); + state.gaugeChartUnits.className = 'gaugeChartUnits'; + state.gaugeChartUnits.innerHTML = state.units; + state.gaugeChartUnits.style.fontSize = unitfontsize + 'px'; + state.element_chart.appendChild(state.gaugeChartUnits); + + state.gaugeChartMin = document.createElement('span'); + state.gaugeChartMin.className = 'gaugeChartMin'; + state.gaugeChartMin.innerHTML = 0; + state.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px'; + state.element_chart.appendChild(state.gaugeChartMin); + + state.gaugeChartMax = document.createElement('span'); + state.gaugeChartMax.className = 'gaugeChartMax'; + state.gaugeChartMax.innerHTML = state.legendFormatValue(max); + state.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px'; + state.element_chart.appendChild(state.gaugeChartMax); + + // when we just re-create the chart + // do not animate the first update + var animate = true; + if(typeof state.gauge_instance !== 'undefined') + animate = false; + + state.gauge_instance = new Gauge(state.gauge_canvas).setOptions(options); // create sexy gauge! + + // set max gauge value + state.gauge_instance.maxValue = max; + + // set animation speed (32 is default value) + if(animate === false) state.gauge_instance.animationSpeed = 32; + else state.gauge_instance.animationSpeed = 1; + + // set actual value + state.gauge_instance.set(value); + + // restore animation + state.gauge_instance.animationSpeed = 32; + return true; + }; + + // ---------------------------------------------------------------------------------------------------------------- // Charts Libraries Registration NETDATA.chartLibraries = { @@ -4534,6 +4764,23 @@ max_updates_to_recreate: function(state) { return 5000; }, track_colors: function(state) { return false; }, pixels_per_point: function(state) { return 3; } + }, + "gauge": { + initialize: NETDATA.gaugeInitialize, + create: NETDATA.gaugeChartCreate, + update: NETDATA.gaugeChartUpdate, + resize: null, + setSelection: NETDATA.gaugeSetSelection, + clearSelection: NETDATA.gaugeClearSelection, + initialized: false, + enabled: true, + format: function(state) { return 'array'; }, + options: function(state) { return 'absolute'; }, + legend: function(state) { return null; }, + autoresize: function(state) { return false; }, + max_updates_to_recreate: function(state) { return 5000; }, + track_colors: function(state) { return false; }, + pixels_per_point: function(state) { return 3; } } }; diff --git a/web/index.html b/web/index.html index a8d54531d7..11b71868a4 100755 --- a/web/index.html +++ b/web/index.html @@ -253,7 +253,7 @@ <!-- <script> netdataServer = "http://box:19999"; </script> --> <!-- load the dashboard manager - it will do the rest --> - <script type="text/javascript" src="dashboard.js?v15"></script> + <script type="text/javascript" src="dashboard.js?v16"></script> </head> <body data-spy="scroll" data-target="#sidebar"> @@ -342,6 +342,9 @@ <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library, <i class="fa fa-copyright"></i> Copyright 2013, Robert Fleischmann, <a href="https://github.com/rendro/easy-pie-chart/blob/master/LICENSE" target="_blank">MIT License</a> + <i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library, + <i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a> + <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>, <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a> @@ -923,31 +926,33 @@ function prepareScreen(data) { $.each(disks, function(j, c) { sidebar += '<li class><a href="#' + name2id(c.name) + '">' + c.name + '</a></li>'; html += '<div class="netdata-group-container" id="disk_' + name2id(c.name) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(c.name) + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>'; - var head = '<div class="netdata-chart-alignment">'; + var head = '<div style="width: 100%; text-align: center;">'; var all = ''; $.each(c.values, function(x, f) { var c = null; var h = options.chartsHeight / 2; switch(f.type) { case 'disk' : h = options.chartsHeight; - head += '<div style="margin-right: 10px;" data-netdata="' + f.id + '"' + head += '<div data-netdata="' + f.id + '"' + ' data-dimensions="reads"' - + ' data-chart-library="easypiechart"' + + ' data-chart-library="gauge"' + + ' data-gauge-adjust="width"' + ' data-title="Read"' - + ' data-width="120px"' - + ' data-height="120px"' + + ' data-width="100px"' + + ' data-height="100px"' + ' data-before="0"' + ' data-after="-' + duration.toString() + '"' + ' data-points="' + duration.toString() + '"' + ' data-colors="' + NETDATA.colors[0] + '"' + ' role="application"></div>'; - head += '<div style="margin-right: 10px;" data-netdata="' + f.id + '"' + head += '<div data-netdata="' + f.id + '"' + ' data-dimensions="writes"' - + ' data-chart-library="easypiechart"' + + ' data-chart-library="gauge"' + + ' data-gauge-adjust="width"' + ' data-title="Write"' - + ' data-width="120px"' - + ' data-height="120px"' + + ' data-width="100px"' + + ' data-height="100px"' + ' data-before="0"' + ' data-after="-' + duration.toString() + '"' + ' data-points="' + duration.toString() + '"' @@ -956,12 +961,13 @@ function prepareScreen(data) { break; case 'disk_backlog': c = '#DD4477'; break; case 'disk_util' : c = '#109618'; - head += '<div style="margin-right: 10px;" data-netdata="' + f.id + '"' - + ' data-chart-library="easypiechart"' + head += '<div data-netdata="' + f.id + '"' + + ' data-chart-library="gauge"' + ' data-title="Utilization"' - + ' data-easypiechart-max-value="100"' - + ' data-width="120px"' - + ' data-height="120px"' + + ' data-gauge-max-value="100"' + + ' data-gauge-adjust="width"' + + ' data-width="100px"' + + ' data-height="100px"' + ' data-before="0"' + ' data-after="-' + duration.toString() + '"' + ' data-points="' + duration.toString() + '"' @@ -1055,12 +1061,12 @@ function prepareScreen(data) { } if(typeof charts['system.cpu'] !== 'undefined') - head += '<div style="margin-right: 10px;" data-netdata="system.cpu"' - + ' data-chart-library="easypiechart"' + head += '<div data-netdata="system.cpu"' + + ' data-chart-library="gauge"' + ' data-title="CPU"' + ' data-units="%"' - + ' data-easypiechart-max-value="100"' - + ' data-width="11%"' + + ' data-gauge-max-value="100"' + + ' data-width="18%"' + ' data-height="49px"' + ' data-after="-' + duration.toString() + '"' + ' data-points="' + duration.toString() + '"' @@ -1178,6 +1184,78 @@ function prepareScreen(data) { }); html += head + all; } + else if(t.name === 'netdata') { + var head = '<div style="width: 100%; text-align: center;">'; + var all = ''; + + $.each(t.charts, function(x, f) { + switch(f.id) { + case 'netdata.net' : + head += '<div data-netdata="' + f.id + '"' + + ' data-dimensions="in"' + + ' data-chart-library="gauge"' + + ' data-title="Bytes In"' + + ' data-gauge-adjust="width"' + + ' data-width="100px"' + + ' data-height="100px"' + + ' data-before="0"' + + ' data-after="-' + duration.toString() + '"' + + ' data-points="' + duration.toString() + '"' + + ' role="application"></div>'; + + head += '<div data-netdata="' + f.id + '"' + + ' data-dimensions="out"' + + ' data-chart-library="gauge"' + + ' data-title="Bytes Out"' + + ' data-gauge-adjust="width"' + + ' data-width="100px"' + + ' data-height="100px"' + + ' data-before="0"' + + ' data-after="-' + duration.toString() + '"' + + ' data-points="' + duration.toString() + '"' + + ' role="application"></div>'; + break; + + case 'netdata.requests' : c = NETDATA.colors[2]; + head += '<div data-netdata="' + f.id + '"' + + ' data-chart-library="gauge"' + + ' data-title="Requests / second"' + + ' data-gauge-adjust="width"' + + ' data-width="100px"' + + ' data-height="100px"' + + ' data-before="0"' + + ' data-after="-' + duration.toString() + '"' + + ' data-points="' + duration.toString() + '"' + + ' data-colors="' + c + '"' + + ' role="application"></div>'; + break; + + case 'netdata.clients' : c = NETDATA.colors[3]; + head += '<div data-netdata="' + f.id + '"' + + ' data-chart-library="gauge"' + + ' data-title="Connections"' + + ' data-gauge-adjust="width"' + + ' data-width="100px"' + + ' data-height="100px"' + + ' data-before="0"' + + ' data-after="-' + duration.toString() + '"' + + ' data-points="' + duration.toString() + '"' + + ' data-colors="' + c + '"' + + ' role="application"></div>'; + break; + } + + all += getMessage(f.id) + '<div data-netdata="' + f.id + '"' + + ' data-width="' + pcent_width.toString() + '%"' + + ' data-height="' + options.chartsHeight.toString() + 'px"' + + ' data-before="0"' + + ' data-after="-' + duration.toString() + '"' + + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"' + + ' role="application"></div>'; + }); + head += '</div>'; + html += head + all; + } else { $.each(t.charts, function(x, f) { html += getMessage(f.id) + '<div data-netdata="' + f.id + '"' diff --git a/web/lib/gauge.min.js b/web/lib/gauge.min.js new file mode 100644 index 0000000000..733d502a22 --- /dev/null +++ b/web/lib/gauge.min.js @@ -0,0 +1 @@ +(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q={}.hasOwnProperty,r=function(a,b){function c(){this.constructor=a}for(var d in b)q.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a};!function(){var a,b,c,d,e,f,g;for(g=["ms","moz","webkit","o"],c=0,e=g.length;e>c&&(f=g[c],!window.requestAnimationFrame);c++)window.requestAnimationFrame=window[f+"RequestAnimationFrame"],window.cancelAnimationFrame=window[f+"CancelAnimationFrame"]||window[f+"CancelRequestAnimationFrame"];return a=null,d=0,b={},requestAnimationFrame?window.cancelAnimationFrame?void 0:(a=window.requestAnimationFrame,window.requestAnimationFrame=function(c,e){var f;return f=++d,a(function(){return b[f]?void 0:c()},e),f},window.cancelAnimationFrame=function(a){return b[a]=!0}):(window.requestAnimationFrame=function(a,b){var c,d,e,f;return c=(new Date).getTime(),f=Math.max(0,16-(c-e)),d=window.setTimeout(function(){return a(c+f)},f),e=c+f,d},window.cancelAnimationFrame=function(a){return clearTimeout(a)})}(),String.prototype.hashCode=function(){var a,b,c,d,e;if(b=0,0===this.length)return b;for(c=d=0,e=this.length;e>=0?e>d:d>e;c=e>=0?++d:--d)a=this.charCodeAt(c),b=(b<<5)-b+a,b&=b;return b},o=function(a){var b,c;for(b=Math.floor(a/3600),c=Math.floor((a-3600*b)/60),a-=3600*b+60*c,a+="",c+="";c.length<2;)c="0"+c;for(;a.length<2;)a="0"+a;return b=b?b+":":"",b+c+":"+a},m=function(a){return k(a.toFixed(0))},p=function(a,b){var c,d;for(c in b)q.call(b,c)&&(d=b[c],a[c]=d);return a},n=function(a,b){var c,d,e;d={};for(c in a)q.call(a,c)&&(e=a[c],d[c]=e);for(c in b)q.call(b,c)&&(e=b[c],d[c]=e);return d},k=function(a){var b,c,d,e;for(a+="",c=a.split("."),d=c[0],e="",c.length>1&&(e="."+c[1]),b=/(\d+)(\d{3})/;b.test(d);)d=d.replace(b,"$1,$2");return d+e},l=function(a){return"#"===a.charAt(0)?a.substring(1,7):a},j=function(){function a(a,b){null==a&&(a=!0),this.clear=null!=b?b:!0,a&&AnimationUpdater.add(this)}return a.prototype.animationSpeed=32,a.prototype.update=function(a){var b;return null==a&&(a=!1),a||this.displayedValue!==this.value?(this.ctx&&this.clear&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),b=this.value-this.displayedValue,Math.abs(b/this.animationSpeed)<=.001?this.displayedValue=this.value:this.displayedValue=this.displayedValue+b/this.animationSpeed,this.render(),!0):!1},a}(),e=function(a){function b(){return b.__super__.constructor.apply(this,arguments)}return r(b,a),b.prototype.displayScale=1,b.prototype.setTextField=function(a){return this.textField=a instanceof i?a:new i(a)},b.prototype.setMinValue=function(a,b){var c,d,e,f,g;if(this.minValue=a,null==b&&(b=!0),b){for(this.displayedValue=this.minValue,f=this.gp||[],g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.displayedValue=this.minValue);return g}},b.prototype.setOptions=function(a){return null==a&&(a=null),this.options=n(this.options,a),this.textField&&(this.textField.el.style.fontSize=a.fontSize+"px"),this.options.angle>.5&&(this.gauge.options.angle=.5),this.configDisplayScale(),this},b.prototype.configDisplayScale=function(){var a,b,c,d,e;return d=this.displayScale,this.options.highDpiSupport===!1?delete this.displayScale:(b=window.devicePixelRatio||1,a=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1,this.displayScale=b/a),this.displayScale!==d&&(e=this.canvas.G__width||this.canvas.width,c=this.canvas.G__height||this.canvas.height,this.canvas.width=e*this.displayScale,this.canvas.height=c*this.displayScale,this.canvas.style.width=e+"px",this.canvas.style.height=c+"px",this.canvas.G__width=e,this.canvas.G__height=c),this},b}(j),i=function(){function a(a){this.el=a}return a.prototype.render=function(a){return this.el.innerHTML=m(a.displayedValue)},a}(),a=function(a){function b(a,b){this.elem=a,this.text=null!=b?b:!1,this.value=1*this.elem.innerHTML,this.text&&(this.value=0)}return r(b,a),b.prototype.displayedValue=0,b.prototype.value=0,b.prototype.setVal=function(a){return this.value=1*a},b.prototype.render=function(){var a;return a=this.text?o(this.displayedValue.toFixed(0)):k(m(this.displayedValue)),this.elem.innerHTML=a},b}(j),b={create:function(b){var c,d,e,f;for(f=[],d=0,e=b.length;e>d;d++)c=b[d],f.push(new a(c));return f}},h=function(a){function b(a){this.gauge=a,this.ctx=this.gauge.ctx,this.canvas=this.gauge.canvas,b.__super__.constructor.call(this,!1,!1),this.setOptions()}return r(b,a),b.prototype.displayedValue=0,b.prototype.value=0,b.prototype.options={strokeWidth:.035,length:.1,color:"#000000"},b.prototype.setOptions=function(a){return null==a&&(a=null),p(this.options,a),this.length=this.canvas.height*this.options.length,this.strokeWidth=this.canvas.height*this.options.strokeWidth,this.maxValue=this.gauge.maxValue,this.minValue=this.gauge.minValue,this.animationSpeed=this.gauge.animationSpeed,this.options.angle=this.gauge.options.angle},b.prototype.render=function(){var a,b,c,d,e,f,g,h,i;return a=this.gauge.getAngle.call(this,this.displayedValue),b=this.canvas.width/2,c=.9*this.canvas.height,h=Math.round(b+this.length*Math.cos(a)),i=Math.round(c+this.length*Math.sin(a)),f=Math.round(b+this.strokeWidth*Math.cos(a-Math.PI/2)),g=Math.round(c+this.strokeWidth*Math.sin(a-Math.PI/2)),d=Math.round(b+this.strokeWidth*Math.cos(a+Math.PI/2)),e=Math.round(c+this.strokeWidth*Math.sin(a+Math.PI/2)),this.ctx.fillStyle=this.options.color,this.ctx.beginPath(),this.ctx.arc(b,c,this.strokeWidth,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(f,g),this.ctx.lineTo(h,i),this.ctx.lineTo(d,e),this.ctx.fill()},b}(j),c=function(){function a(a){this.elem=a}return a.prototype.updateValues=function(a){return this.value=a[0],this.maxValue=a[1],this.avgValue=a[2],this.render()},a.prototype.render=function(){var a,b;return this.textField&&this.textField.text(m(this.value)),0===this.maxValue&&(this.maxValue=2*this.avgValue),b=this.value/this.maxValue*100,a=this.avgValue/this.maxValue*100,$(".bar-value",this.elem).css({width:b+"%"}),$(".typical-value",this.elem).css({width:a+"%"})},a}(),g=function(a){function b(a){this.canvas=a,b.__super__.constructor.call(this),this.percentColors=null,"undefined"!=typeof G_vmlCanvasManager&&(this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)),this.ctx=this.canvas.getContext("2d"),this.gp=[new h(this)],this.setOptions(),this.render()}return r(b,a),b.prototype.elem=null,b.prototype.value=[20],b.prototype.maxValue=80,b.prototype.minValue=0,b.prototype.displayedAngle=0,b.prototype.displayedValue=0,b.prototype.lineWidth=40,b.prototype.paddingBottom=.1,b.prototype.percentColors=null,b.prototype.options={colorStart:"#6fadcf",colorStop:void 0,gradientType:0,strokeColor:"#e0e0e0",pointer:{length:.8,strokeWidth:.035},angle:.15,lineWidth:.44,fontSize:40,limitMax:!1},b.prototype.setOptions=function(a){var c,d,e,f;for(null==a&&(a=null),b.__super__.setOptions.call(this,a),this.configPercentColors(),this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.line |