@cryptotaxi247 / netdata-1 / commits / f0c419923

eliminated all reflows; had to re-configure gauge and easypiecharts

Costa Tsaousis (ktsaou) committed Jun 5, 2017 at 16:11 UTC f0c4199237528542c257c06d25035b8770f87268
4 files changed +165 -106
web/dashboard.css
+42 -5
@@ -49,6 +49,38 @@ body {
49 /* width and height is given per chart with data-width and data-height */
50 }
51
52 +.netdata-container-gauge {
53 + display: inline-block;
54 + overflow: hidden;
55 +
56 + /* required for child elements to have absolute position */
57 + position: relative;
58 +
59 + /* width and height is given per chart with data-width and data-height */
60 +}
61 +
62 +.netdata-container-gauge:after {
63 + padding-top: 60%;
64 + display: block;
65 + content: '';
66 +}
67 +
68 +.netdata-container-easypiechart {
69 + display: inline-block;
70 + overflow: hidden;
71 +
72 + /* required for child elements to have absolute position */
73 + position: relative;
74 +
75 + /* width and height is given per chart with data-width and data-height */
76 +}
77 +
78 +.netdata-container-easypiechart:after {
79 + padding-top: 100%;
80 + display: block;
81 + content: '';
82 +}
83 +
84 .netdata-aspect {
85 position: relative;
86 width: 100%;
@@ -128,12 +160,15 @@ body {
160
161 .netdata-message {
162 display: inline-block;
163 + position: absolute;
164 + top: 0;
165 + left: 0;
166 + right: 0;
167 + bottom: 0;
168 text-align: left;
169 vertical-align: top;
170 font-weight: bold;
171 font-size: x-small;
135 - width: 100%;
136 - height: 100%;
172 overflow: hidden;
173 background: inherit;
174 z-index: 0;
@@ -399,7 +434,7 @@ body {
434 margin-left: 18%;
435 text-align: center;
436 color: #999999;
402 - font-weight: normal;
437 + font-weight: bold;
438 }
439
440 .easyPieChartUnits {
@@ -423,6 +458,8 @@ body {
458 position: absolute;
459 top: 0;
460 left: 0;
461 + bottom: 0;
462 + right: 0;
463 z-index: 0;
464 }
465
@@ -471,7 +508,7 @@ body {
508 position: absolute;
509 float: left;
510 left: 0;
474 - bottom: 10%;
511 + bottom: 8%;
512 width: 92%;
513 margin-left: 8%;
514 text-align: left;
@@ -484,7 +521,7 @@ body {
521 position: absolute;
522 float: left;
523 left: 0;
487 - bottom: 10%;
524 + bottom: 8%;
525 width: 95%;
526 margin-right: 5%;
527 text-align: right;
web/dashboard.js
+70 -85
@@ -144,7 +144,7 @@ var NETDATA = window.NETDATA || {};
144 NETDATA.themes = {
145 white: {
146 bootstrap_css: NETDATA.serverDefault + 'css/bootstrap-3.3.7.css',
147 - dashboard_css: NETDATA.serverDefault + 'dashboard.css?v20161229-2',
147 + dashboard_css: NETDATA.serverDefault + 'dashboard.css?v20170605-2',
148 background: '#FFFFFF',
149 foreground: '#000000',
150 grid: '#F0F0F0',
@@ -161,7 +161,7 @@ var NETDATA = window.NETDATA || {};
161 },
162 slate: {
163 bootstrap_css: NETDATA.serverDefault + 'css/bootstrap-slate-flat-3.3.7.css?v20161229-1',
164 - dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css?v20161229-2',
164 + dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css?v20170605-2',
165 background: '#272b30',
166 foreground: '#C8C8C8',
167 grid: '#283236',
@@ -1602,6 +1602,7 @@ var NETDATA = window.NETDATA || {};
1602 this.running = false; // boolean - true when the chart is being refreshed now
1603 this.enabled = true; // boolean - is the chart enabled for refresh?
1604
1605 + that.tmp = {};
1606
1607 // ============================================================================================================
1608 // PRIVATE FUNCTIONS
@@ -1620,28 +1621,28 @@ var NETDATA = window.NETDATA || {};
1621 that.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
1622
1623 that.tm = {
1623 - last_initialized: 0, // milliseconds - the timestamp it was last initialized
1624 - last_dom_created: 0, // milliseconds - the timestamp its DOM was last created
1625 - last_mode_switch: 0, // milliseconds - the timestamp it switched modes
1626 -
1627 - last_info_downloaded: 0, // milliseconds - the timestamp we downloaded the chart
1628 - last_updated: 0, // the timestamp the chart last updated with data
1629 - pan_and_zoom_seq: 0, // the sequence number of the global synchronization
1630 - // between chart.
1631 - // Used with NETDATA.globalPanAndZoom.seq
1632 - last_visible_check: 0, // the time we last checked if it is visible
1633 - last_resized: 0, // the time the chart was resized
1634 - last_hidden: 0, // the time the chart was hidden
1635 - last_unhidden: 0, // the time the chart was unhidden
1636 - last_autorefreshed: 0 // the time the chart was last refreshed
1624 + last_initialized: 0, // milliseconds - the timestamp it was last initialized
1625 + last_dom_created: 0, // milliseconds - the timestamp its DOM was last created
1626 + last_mode_switch: 0, // milliseconds - the timestamp it switched modes
1627 +
1628 + last_info_downloaded: 0, // milliseconds - the timestamp we downloaded the chart
1629 + last_updated: 0, // the timestamp the chart last updated with data
1630 + pan_and_zoom_seq: 0, // the sequence number of the global synchronization
1631 + // between chart.
1632 + // Used with NETDATA.globalPanAndZoom.seq
1633 + last_visible_check: 0, // the time we last checked if it is visible
1634 + last_resized: 0, // the time the chart was resized
1635 + last_hidden: 0, // the time the chart was hidden
1636 + last_unhidden: 0, // the time the chart was unhidden
1637 + last_autorefreshed: 0 // the time the chart was last refreshed
1638 };
1639
1639 - that.data = null; // the last data as downloaded from the netdata server
1640 - that.data_url = 'invalid://'; // string - the last url used to update the chart
1641 - that.data_points = 0; // number - the number of points returned from netdata
1642 - that.data_after = 0; // milliseconds - the first timestamp of the data
1643 - that.data_before = 0; // milliseconds - the last timestamp of the data
1644 - that.data_update_every = 0; // milliseconds - the frequency to update the data
1640 + that.data = null; // the last data as downloaded from the netdata server
1641 + that.data_url = 'invalid://'; // string - the last url used to update the chart
1642 + that.data_points = 0; // number - the number of points returned from netdata
1643 + that.data_after = 0; // milliseconds - the first timestamp of the data
1644 + that.data_before = 0; // milliseconds - the last timestamp of the data
1645 + that.data_update_every = 0; // milliseconds - the frequency to update the data
1646
1647 that.tmp = {}; // members that can be destroyed to save memory
1648 };
@@ -1755,30 +1756,6 @@ var NETDATA = window.NETDATA || {};
1756 that.tm.last_dom_created = 0;
1757 };
1758
1758 - var resizeDOM = function() {
1759 - if(typeof(that.width) === 'string')
1760 - that.element.style.width = that.width;
1761 - else if(typeof(that.width) === 'number')
1762 - that.element.style.width = that.width.toString() + 'px';
1763 -
1764 - if(typeof(that.library.aspect_ratio) === 'undefined') {
1765 - if(typeof(that.height) === 'string')
1766 - that.element.style.height = that.height;
1767 - else if(typeof(that.height) === 'number')
1768 - that.element.style.height = that.height.toString() + 'px';
1769 - }
1770 - else {
1771 - var w = that.element.offsetWidth;
1772 - if (w === null || w === 0) {
1773 - // the div is hidden
1774 - // this will resize the chart when next viewed
1775 - that.tm.last_resized = 0;
1776 - }
1777 - else
1778 - that.element.style.height = (w * that.library.aspect_ratio / 100).toString() + 'px';
1779 - }
1780 - };
1781 -
1759 var createDOM = function() {
1760 if(that.enabled === false) return;
1761 lateInitialization();
@@ -1788,11 +1765,6 @@ var NETDATA = window.NETDATA || {};
1765 if(that.debug === true)
1766 that.log('createDOM()');
1767
1791 - if(that.hasLegend() === true)
1792 - that.element.className = "netdata-container-with-legend";
1793 - else
1794 - that.element.className = "netdata-container";
1795 -
1768 that.element_message = document.createElement('div');
1769 that.element_message.className = 'netdata-message icon hidden';
1770 that.element.appendChild(that.element_message);
@@ -1803,17 +1775,26 @@ var NETDATA = window.NETDATA || {};
1775 that.tm.last_dom_created =
1776 that.tm.last_resized = Date.now();
1777
1806 - resizeDOM();
1778 showLoading();
1779 };
1780
1781 var initDOM = function() {
1811 - that.element.className = "netdata-container";
1782 + that.element.className = that.library.container_class(that);
1783 +
1784 + if(typeof(that.width) === 'string')
1785 + that.element.style.width = that.width;
1786 + else if(typeof(that.width) === 'number')
1787 + that.element.style.width = that.width.toString() + 'px';
1788 +
1789 + if(typeof(that.library.aspect_ratio) === 'undefined') {
1790 + if(typeof(that.height) === 'string')
1791 + that.element.style.height = that.height;
1792 + else if(typeof(that.height) === 'number')
1793 + that.element.style.height = that.height.toString() + 'px';
1794 + }
1795
1796 if(NETDATA.chartDefaults.min_width !== null)
1797 that.element.style.min_width = NETDATA.chartDefaults.min_width;
1815 -
1816 - resizeDOM();
1798 };
1799
1800 /* init() private
@@ -5711,7 +5692,6 @@ var NETDATA = window.NETDATA || {};
5692 var value = data.result[0];
5693 var min = NETDATA.dataAttribute(state.element, 'easypiechart-min-value', null);
5694 var max = NETDATA.dataAttribute(state.element, 'easypiechart-max-value', null);
5714 - var adjust = NETDATA.dataAttribute(state.element, 'easypiechart-adjust', null);
5695
5696 if(min === null) {
5697 min = NETDATA.commonMin.get(state);
@@ -5731,17 +5711,7 @@ var NETDATA = window.NETDATA || {};
5711
5712 chart.data('data-percent', pcent);
5713
5734 - var size;
5735 - switch(adjust) {
5736 - case 'width': size = state.chartHeight(); break;
5737 - case 'min': size = Math.min(state.chartWidth(), state.chartHeight()); break;
5738 - case 'max': size = Math.max(state.chartWidth(), state.chartHeight()); break;
5739 - case 'height':
5740 - default: size = state.chartWidth(); break;
5741 - }
5742 - state.element.style.width = size + 'px';
5743 - state.element.style.height = size + 'px';
5744 -
5714 + var size = state.chartWidth();
5715 var stroke = Math.floor(size / 22);
5716 if(stroke < 3) stroke = 2;
5717
@@ -6002,7 +5972,7 @@ var NETDATA = window.NETDATA || {};
5972 var value = data.result[0];
5973 var min = NETDATA.dataAttribute(state.element, 'gauge-min-value', null);
5974 var max = NETDATA.dataAttribute(state.element, 'gauge-max-value', null);
6005 - var adjust = NETDATA.dataAttribute(state.element, 'gauge-adjust', null);
5975 + // var adjust = NETDATA.dataAttribute(state.element, 'gauge-adjust', null);
5976 var pointerColor = NETDATA.dataAttribute(state.element, 'gauge-pointer-color', NETDATA.themes.current.gauge_pointer);
5977 var strokeColor = NETDATA.dataAttribute(state.element, 'gauge-stroke-color', NETDATA.themes.current.gauge_stroke);
5978 var startColor = NETDATA.dataAttribute(state.element, 'gauge-start-color', state.chartCustomColors()[0]);
@@ -6028,6 +5998,7 @@ var NETDATA = window.NETDATA || {};
5998 if(max < 0) max = 0;
5999
6000 var width = state.chartWidth(), height = state.chartHeight(); //, ratio = 1.5;
6001 + // console.log('gauge width: ' + width.toString() + ', height: ' + height.toString());
6002 //switch(adjust) {
6003 // case 'width': width = height * ratio; break;
6004 // case 'height':
@@ -6040,12 +6011,12 @@ var NETDATA = window.NETDATA || {};
6011
6012 var options = {
6013 lines: 12, // The number of lines to draw
6043 - angle: 0.15, // The span of the gauge arc
6044 - lineWidth: 0.50, // The line thickness
6045 - radiusScale: 0.85, // Relative radius
6014 + angle: 0.14, // The span of the gauge arc
6015 + lineWidth: 0.57, // The line thickness
6016 + radiusScale: 1.0, // Relative radius
6017 pointer: {
6047 - length: 0.8, // 0.9 The radius of the inner circle
6048 - strokeWidth: 0.035, // The rotation offset
6018 + length: 0.85, // 0.9 The radius of the inner circle
6019 + strokeWidth: 0.045, // The rotation offset
6020 color: pointerColor // Fill color
6021 },
6022 limitMax: true, // If false, the max value of the gauge will be updated if value surpass max
@@ -6103,15 +6074,15 @@ var NETDATA = window.NETDATA || {};
6074 state.tmp.gauge_canvas.height = height;
6075 state.element_chart.appendChild(state.tmp.gauge_canvas);
6076
6106 - var valuefontsize = Math.floor(height / 6);
6107 - var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2);
6077 + var valuefontsize = Math.floor(height / 5);
6078 + var valuetop = Math.round((height - valuefontsize) / 3.2);
6079 state.tmp.gaugeChartLabel = document.createElement('span');
6080 state.tmp.gaugeChartLabel.className = 'gaugeChartLabel';
6081 state.tmp.gaugeChartLabel.style.fontSize = valuefontsize + 'px';
6082 state.tmp.gaugeChartLabel.style.top = valuetop.toString() + 'px';
6083 state.element_chart.appendChild(state.tmp.gaugeChartLabel);
6084
6114 - var titlefontsize = Math.round(valuefontsize / 2);
6085 + var titlefontsize = Math.round(valuefontsize / 2.1);
6086 var titletop = 0;
6087 state.tmp.gaugeChartTitle = document.createElement('span');
6088 state.tmp.gaugeChartTitle.className = 'gaugeChartTitle';
@@ -6200,6 +6171,11 @@ var NETDATA = window.NETDATA || {};
6171 state.tmp.dygraph_sparkline = (t === 'sparkline');
6172 }
6173 return state.tmp.dygraph_sparkline;
6174 + },
6175 + container_class: function(state) {
6176 + if(this.legend(state) !== null)
6177 + return 'netdata-container-with-legend';
6178 + return 'netdata-container';
6179 }
6180 },
6181 "sparkline": {
@@ -6218,7 +6194,8 @@ var NETDATA = window.NETDATA || {};
6194 autoresize: function(state) { void(state); return false; },
6195 max_updates_to_recreate: function(state) { void(state); return 5000; },
6196 track_colors: function(state) { void(state); return false; },
6221 - pixels_per_point: function(state) { void(state); return 3; }
6197 + pixels_per_point: function(state) { void(state); return 3; },
6198 + container_class: function(state) { void(state); return 'netdata-container'; }
6199 },
6200 "peity": {
6201 initialize: NETDATA.peityInitialize,
@@ -6236,7 +6213,8 @@ var NETDATA = window.NETDATA || {};
6213 autoresize: function(state) { void(state); return false; },
6214 max_updates_to_recreate: function(state) { void(state); return 5000; },
6215 track_colors: function(state) { void(state); return false; },
6239 - pixels_per_point: function(state) { void(state); return 3; }
6216 + pixels_per_point: function(state) { void(state); return 3; },
6217 + container_class: function(state) { void(state); return 'netdata-container'; }
6218 },
6219 "morris": {
6220 initialize: NETDATA.morrisInitialize,
@@ -6254,7 +6232,8 @@ var NETDATA = window.NETDATA || {};
6232 autoresize: function(state) { void(state); return false; },
6233 max_updates_to_recreate: function(state) { void(state); return 50; },
6234 track_colors: function(state) { void(state); return false; },
6257 - pixels_per_point: function(state) { void(state); return 15; }
6235 + pixels_per_point: function(state) { void(state); return 15; },
6236 + container_class: function(state) { void(state); return 'netdata-container'; }
6237 },
6238 "google": {
6239 initialize: NETDATA.googleInitialize,
@@ -6272,7 +6251,8 @@ var NETDATA = window.NETDATA || {};
6251 autoresize: function(state) { void(state); return false; },
6252 max_updates_to_recreate: function(state) { void(state); return 300; },
6253 track_colors: function(state) { void(state); return false; },
6275 - pixels_per_point: function(state) { void(state); return 4; }
6254 + pixels_per_point: function(state) { void(state); return 4; },
6255 + container_class: function(state) { void(state); return 'netdata-container'; }
6256 },
6257 "raphael": {
6258 initialize: NETDATA.raphaelInitialize,
@@ -6290,7 +6270,8 @@ var NETDATA = window.NETDATA || {};
6270 autoresize: function(state) { void(state); return false; },
6271 max_updates_to_recreate: function(state) { void(state); return 5000; },
6272 track_colors: function(state) { void(state); return false; },
6293 - pixels_per_point: function(state) { void(state); return 3; }
6273 + pixels_per_point: function(state) { void(state); return 3; },
6274 + container_class: function(state) { void(state); return 'netdata-container'; }
6275 },
6276 "c3": {
6277 initialize: NETDATA.c3Initialize,
@@ -6308,7 +6289,8 @@ var NETDATA = window.NETDATA || {};
6289 autoresize: function(state) { void(state); return false; },
6290 max_updates_to_recreate: function(state) { void(state); return 5000; },
6291 track_colors: function(state) { void(state); return false; },
6311 - pixels_per_point: function(state) { void(state); return 15; }
6292 + pixels_per_point: function(state) { void(state); return 15; },
6293 + container_class: function(state) { void(state); return 'netdata-container'; }
6294 },
6295 "d3": {
6296 initialize: NETDATA.d3Initialize,
@@ -6326,7 +6308,8 @@ var NETDATA = window.NETDATA || {};
6308 autoresize: function(state) { void(state); return false; },
6309 max_updates_to_recreate: function(state) { void(state); return 5000; },
6310 track_colors: function(state) { void(state); return false; },
6329 - pixels_per_point: function(state) { void(state); return 3; }
6311 + pixels_per_point: function(state) { void(state); return 3; },
6312 + container_class: function(state) { void(state); return 'netdata-container'; }
6313 },
6314 "easypiechart": {
6315 initialize: NETDATA.easypiechartInitialize,
@@ -6345,7 +6328,8 @@ var NETDATA = window.NETDATA || {};
6328 max_updates_to_recreate: function(state) { void(state); return 5000; },
6329 track_colors: function(state) { void(state); return true; },
6330 pixels_per_point: function(state) { void(state); return 3; },
6348 - aspect_ratio: 100
6331 + aspect_ratio: 100,
6332 + container_class: function(state) { void(state); return 'netdata-container-easypiechart'; }
6333 },
6334 "gauge": {
6335 initialize: NETDATA.gaugeInitialize,
@@ -6364,7 +6348,8 @@ var NETDATA = window.NETDATA || {};
6348 max_updates_to_recreate: function(state) { void(state); return 5000; },
6349 track_colors: function(state) { void(state); return true; },
6350 pixels_per_point: function(state) { void(state); return 3; },
6367 - aspect_ratio: 70
6351 + aspect_ratio: 60,
6352 + container_class: function(state) { void(state); return 'netdata-container-gauge'; }
6353 }
6354 };
6355
web/dashboard.slate.css
+42 -5
@@ -63,6 +63,38 @@ code {
63 /* width and height is given per chart with data-width and data-height */
64 }
65
66 +.netdata-container-gauge {
67 + display: inline-block;
68 + overflow: hidden;
69 +
70 + /* required for child elements to have absolute position */
71 + position: relative;
72 +
73 + /* width and height is given per chart with data-width and data-height */
74 +}
75 +
76 +.netdata-container-gauge:after {
77 + padding-top: 60%;
78 + display: block;
79 + content: '';
80 +}
81 +
82 +.netdata-container-easypiechart {
83 + display: inline-block;
84 + overflow: hidden;
85 +
86 + /* required for child elements to have absolute position */
87 + position: relative;
88 +
89 + /* width and height is given per chart with data-width and data-height */
90 +}
91 +
92 +.netdata-container-easypiechart:after {
93 + padding-top: 100%;
94 + display: block;
95 + content: '';
96 +}
97 +
98 .netdata-aspect {
99 position: relative;
100 width: 100%;
@@ -142,12 +174,15 @@ code {
174
175 .netdata-message {
176 display: inline-block;
177 + position: absolute;
178 + top: 0;
179 + left: 0;
180 + right: 0;
181 + bottom: 0;
182 text-align: left;
183 vertical-align: top;
184 font-weight: bold;
185 font-size: x-small;
149 - width: 100%;
150 - height: 100%;
186 overflow: hidden;
187 background: inherit;
188 z-index: 0;
@@ -417,7 +452,7 @@ code {
452 margin-left: 18%;
453 text-align: center;
454 color: #676b70;
420 - font-weight: normal;
455 + font-weight: bold;
456 }
457
458 .easyPieChartUnits {
@@ -441,6 +476,8 @@ code {
476 position: absolute;
477 top: 0;
478 left: 0;
479 + bottom: 0;
480 + right: 0;
481 z-index: 0;
482 }
483
@@ -489,7 +526,7 @@ code {
526 position: absolute;
527 float: left;
528 left: 0;
492 - bottom: 10%;
529 + bottom: 8%;
530 width: 92%;
531 margin-left: 8%;
532 text-align: left;
@@ -502,7 +539,7 @@ code {
539 position: absolute;
540 float: left;
541 left: 0;
505 - bottom: 10%;
542 + bottom: 8%;
543 width: 95%;
544 margin-right: 5%;
545 text-align: right;
web/index.html
+11 -11
@@ -1302,7 +1302,7 @@
1302 + ' data-title="Used Swap"'
1303 + ' data-units="%"'
1304 + ' data-easypiechart-max-value="100"'
1305 - + ' data-width="8%"'
1305 + + ' data-width="9%"'
1306 + ' data-before="0"'
1307 + ' data-after="-' + duration.toString() + '"'
1308 + ' data-points="' + duration.toString() + '"'
@@ -1314,7 +1314,7 @@
1314 + ' data-dimensions="in"'
1315 + ' data-chart-library="easypiechart"'
1316 + ' data-title="Disk Read"'
1317 - + ' data-width="10%"'
1317 + + ' data-width="11%"'
1318 + ' data-before="0"'
1319 + ' data-after="-' + duration.toString() + '"'
1320 + ' data-points="' + duration.toString() + '"'
@@ -1324,7 +1324,7 @@
1324 + ' data-dimensions="out"'
1325 + ' data-chart-library="easypiechart"'
1326 + ' data-title="Disk Write"'
1327 - + ' data-width="10%"'
1327 + + ' data-width="11%"'
1328 + ' data-before="0"'
1329 + ' data-after="-' + duration.toString() + '"'
1330 + ' data-points="' + duration.toString() + '"'
@@ -1332,12 +1332,12 @@
1332 }
1333
1334 if(typeof charts['system.cpu'] !== 'undefined')
1335 - head += '<div class="netdata-container" data-netdata="system.cpu"'
1335 + head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.cpu"'
1336 + ' data-chart-library="gauge"'
1337 + ' data-title="CPU"'
1338 + ' data-units="%"'
1339 + ' data-gauge-max-value="100"'
1340 - + ' data-width="18%"'
1340 + + ' data-width="20%"'
1341 + ' data-after="-' + duration.toString() + '"'
1342 + ' data-points="' + duration.toString() + '"'
1343 + ' data-colors="' + NETDATA.colors[12] + '"'
@@ -1348,7 +1348,7 @@
1348 + ' data-dimensions="received"'
1349 + ' data-chart-library="easypiechart"'
1350 + ' data-title="IPv4 Inbound"'
1351 - + ' data-width="10%"'
1351 + + ' data-width="11%"'
1352 + ' data-before="0"'
1353 + ' data-after="-' + duration.toString() + '"'
1354 + ' data-points="' + duration.toString() + '"'
@@ -1358,7 +1358,7 @@
1358 + ' data-dimensions="sent"'
1359 + ' data-chart-library="easypiechart"'
1360 + ' data-title="IPv4 Outbound"'
1361 - + ' data-width="10%"'
1361 + + ' data-width="11%"'
1362 + ' data-before="0"'
1363 + ' data-after="-' + duration.toString() + '"'
1364 + ' data-points="' + duration.toString() + '"'
@@ -1370,7 +1370,7 @@
1370 + ' data-chart-library="easypiechart"'
1371 + ' data-title="IPv6 Inbound"'
1372 + ' data-units="kbps"'
1373 - + ' data-width="10%"'
1373 + + ' data-width="11%"'
1374 + ' data-before="0"'
1375 + ' data-after="-' + duration.toString() + '"'
1376 + ' data-points="' + duration.toString() + '"'
@@ -1381,7 +1381,7 @@
1381 + ' data-chart-library="easypiechart"'
1382 + ' data-title="IPv6 Outbound"'
1383 + ' data-units="kbps"'
1384 - + ' data-width="10%"'
1384 + + ' data-width="11%"'
1385 + ' data-before="0"'
1386 + ' data-after="-' + duration.toString() + '"'
1387 + ' data-points="' + duration.toString() + '"'
@@ -1396,7 +1396,7 @@
1396 + ' data-title="Used RAM"'
1397 + ' data-units="%"'
1398 + ' data-easypiechart-max-value="100"'
1399 - + ' data-width="8%"'
1399 + + ' data-width="9%"'
1400 + ' data-after="-' + duration.toString() + '"'
1401 + ' data-points="' + duration.toString() + '"'
1402 + ' data-colors="' + NETDATA.colors[7] + '"'
@@ -3578,4 +3578,4 @@
3578 </div>
3579 </body>
3580 </html>
3581 -<script type="text/javascript" src="dashboard.js?v20170604-1"></script>
3581 +<script type="text/javascript" src="dashboard.js?v20170605-2"></script>