From bd2d05eda4e7f306eea0b7e65c2d6e4fce730d50 Mon Sep 17 00:00:00 2001
From: "Costa Tsaousis (ktsaou)" <costa@tsaousis.gr>
Date: Sun, 13 Dec 2015 20:19:56 +0200
Subject: [PATCH] more optimizations; a working example of a full dashboard

---
 web/Makefile.am         |   1 +
 web/dashboard.css       |   4 +
 web/dashboard.js        | 256 ++++++++++++++++++-----------
 web/dashboard_full.html | 352 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 516 insertions(+), 97 deletions(-)
 create mode 100755 web/dashboard_full.html

diff --git a/web/Makefile.am b/web/Makefile.am
index d963e8c1..c25dec13 100644
--- a/web/Makefile.am
+++ b/web/Makefile.am
@@ -10,6 +10,7 @@ dist_web_DATA = \
         netdata.js \
         robots.txt \
         theme.css \
+        dashboard_full.html \
         dashboard.html \
         dashboard.js \
         dashboard.css \
diff --git a/web/dashboard.css b/web/dashboard.css
index 5c95f75a..d7a4ccd1 100755
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -2,6 +2,10 @@ html {
     font-family: sans-serif;
 }
 
+.netdata-chart-alignment {
+	margin-left: 55px;
+}
+
 .netdata-container {
 	display: -webkit-flex; /* Safari */
 	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
diff --git a/web/dashboard.js b/web/dashboard.js
index 8e4d037d..58becde4 100755
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -122,8 +122,8 @@
 
 		pause: false,					// when enabled we don't auto-refresh the charts
 
-		targets: null,					// an array of all the DOM elements that are
-										// currently visible (independently of their
+		targets: null,					// an array of all the state objects that are
+										// currently active (independently of their
 										// viewport visibility)
 
 		updated_dom: true,				// when true, the DOM has been updated with
@@ -217,11 +217,13 @@
 	};
 
 	window.onscroll = function(event) {
-		// FIXME targets should be states not DOM elements
-		for(i = 0; i < NETDATA.options.targets.length ;i++) {
-			var state = NETDATA.chartState(NETDATA.options.targets[i])
-			state.isVisible();
-		}
+		// when the user scrolls he sees that we have
+		// hidden all the not-visible charts
+		// using this little function we try to switch
+		// the charts back to visible quickly
+		var targets = NETDATA.options.targets;
+		var len = targets.length;
+		while(len--) targets[len].isVisible();
 	}
 
 	// ----------------------------------------------------------------------------------------------------------------
@@ -443,6 +445,8 @@
 			library_name: self.data('chart-library') || NETDATA.chartDefaults.library,
 			library: null,			// object - the chart library used
 
+			colors: null,
+
 			element: element,		// the element already created by the user
 			element_message: null,
 			element_loading: null,
@@ -554,9 +558,12 @@
 	};
 
 	// prevent to global selection sync for some time
-	chartState.prototype.globalSelectionSyncDelay = function() {
+	chartState.prototype.globalSelectionSyncDelay = function(ms) {
 		if(!NETDATA.options.current.sync_selection) return;
-		NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + NETDATA.options.current.sync_selection_delay;
+		if(typeof ms === 'number')
+			NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + ms;
+		else
+			NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + NETDATA.options.current.sync_selection_delay;
 	}
 
 	// can we globally apply selection sync?
@@ -566,10 +573,17 @@
 		return true;
 	}
 
+	chartState.prototype.globalSelectionSyncIsMaster = function() {
+		if(NETDATA.globalSelectionSync.state === this)
+			return true;
+		else
+			return false;
+	}
+
 	// this chart is the master of the global selection sync
 	chartState.prototype.globalSelectionSyncBeMaster = function() {
 		// am I the master?
-		if(NETDATA.globalSelectionSync.state === this) {
+		if(this.globalSelectionSyncIsMaster()) {
 			if(this.debug) this.log('sync: I am the master already.');
 			return;
 		}
@@ -585,18 +599,21 @@
 		NETDATA.globalSelectionSync.state = this;
 
 		// find the all slaves
-		var self = this;
-		// FIXME targets should be states not DOM elements
-		$.each(NETDATA.options.targets, function(i, target) {
-			var st = NETDATA.chartState(target);
-			if(st === self) {
-				if(self.debug) st.log('sync: not adding me to sync');
+		var targets = NETDATA.options.targets;
+		var len = targets.length;
+		while(len--) {
+			st = targets[len];
+
+			if(st === this) {
+				if(this.debug) st.log('sync: not adding me to sync');
 			}
 			else if(st.globalSelectionSyncIsEligible()) {
-				if(self.debug) st.log('sync: adding to sync as slave');
+				if(this.debug) st.log('sync: adding to sync as slave');
 				st.globalSelectionSyncBeSlave();
 			}
-		});
+		}
+
+		this.globalSelectionSyncDelay(100);
 	}
 
 	// can the chart participate to the global selection sync as a slave?
@@ -620,21 +637,26 @@
 			return;
 		}
 
-		if(this.debug) this.log('sync: trying to be sync master.');
-		this.globalSelectionSyncBeMaster();
+		if(!this.globalSelectionSyncIsMaster()) {
+			if(this.debug) this.log('sync: trying to be sync master.');
+			this.globalSelectionSyncBeMaster();
 
-		var self = this;
-		$.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
-			if(st === self) {
-				// since we are the sync master, we should not call state.setSelection()
-				// the chart library is taking care of visualizing our selection.
-				if(self.debug) st.log('sync: ignoring me from set selection');
-			}
-			else {
-				if(self.debug) st.log('sync: showing master selection');
-				st.setSelection(t);
+			if(!this.globalSelectionSyncAbility()) {
+				if(this.debug) this.log('sync: cannot sync (yet?).');
+				return;
 			}
+		}
+
+		// FIXME
+		// var start = new Date().getTime();
+
+		$.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
+			st.setSelection(t);
 		});
+
+		// FIXME
+		// var end = new Date().getTime();
+		// console.log(end - start);
 	}
 
 	// stop syncing all charts to the given time
@@ -848,7 +870,11 @@
 	}
 
 	chartState.prototype.legendFormatValue = function(value) {
-		if(typeof value !== 'number' || value === null) return '';
+		// FIXME
+		// return '';
+		// return value;
+		if(value === null) return '';
+		if(typeof value !== 'number') return value;
 
 		var abs = Math.abs(value);
 		if(abs >= 1) return (Math.round(value * 100) / 100).toLocaleString();
@@ -856,15 +882,17 @@
 		return (Math.round(value * 10000) / 10000).toLocaleString();
 	}
 
-	chartState.prototype.legendSetLabelValue = function(label, string) {
-		if(typeof this.element_legend_childs.series[label] === 'undefined')
+	chartState.prototype.legendSetLabelValue = function(label, value) {
+		var series = this.element_legend_childs.series[label];
+
+		if(typeof series === 'undefined' || series.last === value)
 			return;
 
-		if(this.element_legend_childs.series[label].value !== null)
-			this.element_legend_childs.series[label].value.innerHTML = string;
+		series.last = value;
+		value = this.legendFormatValue(value);
 
-		if(this.element_legend_childs.series[label].user !== null)
-			this.element_legend_childs.series[label].user.innerHTML = string;
+		if(series.value !== null) series.value.innerHTML = value;
+		if(series.user !== null) series.user.innerHTML = value;
 	}
 
 	chartState.prototype.legendSetDate = function(ms) {
@@ -910,17 +938,18 @@
 		else
 			this.legendUndefined();
 
-		for(var i = 0; i < this.current.data.dimension_names.length; i++) {
-			if(typeof this.current.data.dimension_names[i] === 'undefined')
-				continue;
+		var labels = this.current.data.dimension_names;
+		var i = labels.length;
+		while(i--) {
+			var label = labels[i];
 
-			if(typeof this.element_legend_childs.series[this.current.data.dimension_names[i]] === 'undefined')
-				continue;
+			if(typeof label === 'undefined') continue;
+			if(typeof this.element_legend_childs.series[label] === 'undefined') continue;
 
 			if(Math.abs(this.current.data.last_entry_t - this.current.data.before) <= this.current.data.view_update_every)
-				this.legendSetLabelValue(this.current.data.dimension_names[i], this.legendFormatValue(this.current.data.result_latest_values[i]));
+				this.legendSetLabelValue(label, this.current.data.result_latest_values[i]);
 			else
-				this.legendSetLabelValue(this.current.data.dimension_names[i], '');
+				this.legendSetLabelValue(label, null);
 		}
 	}
 
@@ -928,6 +957,33 @@
 		this.legendShowLatestValues();
 	}
 
+	chartState.prototype.chartColors = function() {
+		if(this.colors !== null) return this.colors;
+
+		this.colors = $(this.element).data('colors');
+		if(typeof this.colors === 'undefined' || this.colors === null)
+			this.colors = NETDATA.colors;
+		else {
+			// console.log(this.colors);
+			var s = this.colors;
+			if(typeof s === 'string') s = s.split(' ');
+
+			this.colors = new Array();
+			var self = this;
+			$.each(s, function(i, c) {
+				self.colors.push(c);
+			});
+
+			// push the default colors too
+			var self = this;
+			$.each(NETDATA.colors, function(i, c) {
+				self.colors.push(c);
+			});
+		}
+
+		return this.colors;
+	}
+
 	chartState.prototype.legendUpdateDOM = function() {
 		if(!this.hasLegend()) return;
 
@@ -944,15 +1000,18 @@
 		}
 		else {
 			// this.log('checking existing legend');
-			for(var i = 0; i < this.current.data.dimension_names.length; i++) {
-				if(typeof this.element_legend_childs.series[this.current.data.dimension_names[i]] === 'undefined') {
-					// this.log('legend is incosistent - missing dimension:' + this.current.data.dimension_names[i]);
+			var labels = this.current.data.dimension_names;
+			var i = labels.length;
+			while(i--) {
+				var name = labels[i];
+				if(typeof this.element_legend_childs.series[name] === 'undefined') {
+					// this.log('legend is incosistent - missing dimension:' + name);
 					needed = true;
 					break;
 				}
 				else if(Math.abs(this.current.data.last_entry_t - this.current.data.before) <= this.current.data.view_update_every) {
-					// this.log('setting legend of ' + this.current.data.dimension_names[i] + ' to ' + this.current.data.latest_values[i]);
-					this.legendSetLabelValue(this.current.data.dimension_names[i], this.legendFormatValue(this.current.data.latest_values[i]));
+					// this.log('setting legend of ' + name + ' to ' + this.current.data.latest_values[i]);
+					this.legendSetLabelValue(name, this.current.data.latest_values[i]);
 				}
 			}
 		}
@@ -995,7 +1054,7 @@
 
 		self = $(this);
 		var genLabel = function(state, parent, name, count) {
-			var c = count % NETDATA.colors.length;
+			var c = count % state.chartColors().length;
 
 			var user_element = null;
 			var user_id = self.data('show-value-of-' + name + '-at') || null;
@@ -1004,7 +1063,8 @@
 			state.element_legend_childs.series[name] = {
 				name: document.createElement('span'),
 				value: document.createElement('span'),
-				user: user_element
+				user: user_element,
+				last: null
 			};
 
 			var label = state.element_legend_childs.series[name];
@@ -1014,7 +1074,7 @@
 			label.name.title = name;
 			label.value.title = name;
 
-			var rgb = NETDATA.colorHex2Rgb(NETDATA.colors[c]);
+			var rgb = NETDATA.colorHex2Rgb(state.chartColors()[c]);
 			label.name.innerHTML = '<table class="netdata-legend-name-table-'
 				+ state.chart.chart_type
 				+ '" style="background-color: '
@@ -1024,8 +1084,8 @@
 			var text = document.createTextNode(' ' + name);
 			label.name.appendChild(text);
 
-			label.name.style.color = NETDATA.colors[c];
-			label.value.style.color = NETDATA.colors[c];
+			label.name.style.color = state.chartColors()[c];
+			label.value.style.color = state.chartColors()[c];
 
 			if(count > 0)
 				parent.appendChild(document.createElement('br'));
@@ -1753,7 +1813,7 @@
 	// ----------------------------------------------------------------------------------------------------------------
 
 	NETDATA.chartRefresherNoParallel = function(index) {
-		// if(NETDATA.options.debug.mail_loop) console.log('NETDATA.chartRefresher(<targets, ' + index + ')');
+		if(NETDATA.options.debug.mail_loop) console.log('NETDATA.chartRefresherNoParallel(' + index + ')');
 
 		if(NETDATA.options.updated_dom) {
 			// the dom has been updated
@@ -1761,9 +1821,7 @@
 			NETDATA.getDomCharts(NETDATA.chartRefresher);
 			return;
 		}
-		// FIXME targets should be states not DOM elements
-		var target = NETDATA.options.targets.get(index);
-		if(typeof target === 'undefined') {
+		if(index >= NETDATA.options.targets.length) {
 			if(NETDATA.options.debug.main_loop) console.log('waiting to restart main loop...');
 				NETDATA.options.auto_refresher_fast_weight = 0;
 
@@ -1772,7 +1830,7 @@
 				}, NETDATA.options.current.idle_between_loops);
 			}
 		else {
-			var state = NETDATA.chartState(target);
+			var state = NETDATA.options.targets[index];
 
 			if(NETDATA.options.auto_refresher_fast_weight < NETDATA.options.current.fast_render_timeframe) {
 				if(NETDATA.options.debug.main_loop) console.log('fast rendering...');
@@ -1843,10 +1901,10 @@
 		NETDATA.options.parallel = new Array();
 		NETDATA.options.sequencial = new Array();
 
-		// FIXME targets should be states not DOM elements
-		for(var i = 0; i < NETDATA.options.targets.length ; i++) {
-			var target = NETDATA.options.targets.get(i);
-			var state = NETDATA.chartState(target);
+		var targets = NETDATA.options.targets;
+		var len = targets.length;
+		while(len--) {
+			var state = targets[len];
 
 			if(!state.library.initialized)
 				NETDATA.options.sequencial.push(state);
@@ -1876,20 +1934,18 @@
 	NETDATA.getDomCharts = function(callback) {
 		NETDATA.options.updated_dom = false;
 
-		// FIXME targets should be states not DOM elements
-		NETDATA.options.targets = $('div[data-netdata]').filter(':visible');
+		var targets = $('div[data-netdata]').filter(':visible');
 
 		if(NETDATA.options.debug.main_loop)
-			console.log('DOM updated - there are ' + NETDATA.options.targets.length + ' charts on page.');
+			console.log('DOM updated - there are ' + targets.length + ' charts on page.');
 
-		// we need to re-size all the charts quickly
-		// before making any external calls
-		// FIXME targets should be states not DOM elements
-		$.each(NETDATA.options.targets, function(i, target) {
+		NETDATA.options.targets = new Array();
+		var len = targets.length;
+		while(len--) {
 			// the initialization will take care of sizing
 			// and the "loading..." message
-			var state = NETDATA.chartState(target);
-		});
+			NETDATA.options.targets.push(NETDATA.chartState(targets[len]));
+		}
 
 		if(typeof callback === 'function') callback();
 	}
@@ -2000,7 +2056,7 @@
 	NETDATA.sparklineChartCreate = function(state, data) {
 		var self = $(state.element);
 		var type = self.data('sparkline-type') || 'line';
-		var lineColor = self.data('sparkline-linecolor') || NETDATA.colors[0];
+		var lineColor = self.data('sparkline-linecolor') || state.chartColors()[0];
 		var fillColor = self.data('sparkline-fillcolor') || (state.chart.chart_type === 'line')?'#FFF':NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance);
 		var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
 		var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
@@ -2110,15 +2166,13 @@
 	NETDATA.dygraphSetSelection = function(state, t) {
 		if(typeof state.dygraph_instance !== 'undefined') {
 			var r = state.calculateRowForTime(t);
-			if(r !== -1) {
+			if(r !== -1)
 				state.dygraph_instance.setSelection(r);
-				return true;
-			}
-			else {
+			else
 				state.dygraph_instance.clearSelection();
-				return false;
-			}
 		}
+
+		return true;
 	}
 
 	NETDATA.dygraphClearSelection = function(state, t) {
@@ -2170,6 +2224,12 @@
 
 	NETDATA.dygraphChartUpdate = function(state, data) {
 		var dygraph = state.dygraph_instance;
+		
+		// when the chart is not visible, and hidden
+		// if there is a window resize, dygraph detects
+		// its element size as 0x0.
+		// this will make it re-appear properly
+		dygraph.resize();
 
 		if(state.current.name === 'pan') {
 			if(NETDATA.options.debug.dygraph || state.debug) state.log('dygraphChartUpdate() loose update');
@@ -2197,7 +2257,7 @@
 		var self = $(state.element);
 
 		state.dygraph_options = {
-			colors: self.data('dygraph-colors') || NETDATA.colors,
+			colors: self.data('dygraph-colors') || state.chartColors(),
 			
 			// leave a few pixels empty on the right of the chart
 			rightGap: self.data('dygraph-rightgap') || 5,
@@ -2290,7 +2350,9 @@
 					pixelsPerLabel: 15,
 					valueFormatter: function (x) {
 						// return (Math.round(x*100) / 100).toLocaleString();
-						return state.legendFormatValue(x);
+						//return state.legendFormatValue(x);
+						//FIXME
+						return x;
 					}
 				}
 			},
@@ -2300,7 +2362,7 @@
 				var elements = state.element_legend_childs;
 
 				// if the hidden div is not there
-				// state is not managing the legend
+				// we are not managing the legend
 				if(elements.hidden === null) return;
 
 				if (typeof data.x === 'undefined') {
@@ -2308,11 +2370,11 @@
 				}
 				else {
 					state.legendSetDate(data.x);
-					for (var i = 0; i < data.series.length; i++) {
+					var i = data.series.length;
+					while(i--) {
 						var series = data.series[i];
 						if(!series.isVisible) continue;
-						state.legendSetLabelValue(series.label, series.yHTML);
-						// elements.series[series.label].value.innerHTML = series.yHTML;
+						state.legendSetLabelValue(series.label, series.y);
 					}
 				}
 
@@ -2852,8 +2914,8 @@
 			initialize: NETDATA.sparklineInitialize,
 			create: NETDATA.sparklineChartCreate,
 			update: NETDATA.sparklineChartUpdate,
-			setSelection: null,
-			clearSelection: null,
+			setSelection: function(t) { return true; },
+			clearSelection: function() { return true; },
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'array'; },
@@ -2867,8 +2929,8 @@
 			initialize: NETDATA.peityInitialize,
 			create: NETDATA.peityChartCreate,
 			update: NETDATA.peityChartUpdate,
-			setSelection: null,
-			clearSelection: null,
+			setSelection: function(t) { return true; },
+			clearSelection: function() { return true; },
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'ssvcomma'; },
@@ -2882,8 +2944,8 @@
 			initialize: NETDATA.morrisInitialize,
 			create: NETDATA.morrisChartCreate,
 			update: NETDATA.morrisChartUpdate,
-			setSelection: null,
-			clearSelection: null,
+			setSelection: function(t) { return true; },
+			clearSelection: function() { return true; },
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
@@ -2897,8 +2959,8 @@
 			initialize: NETDATA.googleInitialize,
 			create: NETDATA.googleChartCreate,
 			update: NETDATA.googleChartUpdate,
-			setSelection: null,
-			clearSelection: null,
+			setSelection: function(t) { return true; },
+			clearSelection: function() { return true; },
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'datatable'; },
@@ -2912,8 +2974,8 @@
 			initialize: NETDATA.raphaelInitialize,
 			create: NETDATA.raphaelChartCreate,
 			update: NETDATA.raphaelChartUpdate,
-			setSelection: null,
-			clearSelection: null,
+			setSelection: function(t) { return true; },
+			clearSelection: function() { return true; },
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
@@ -2927,8 +2989,8 @@
 			initialize: NETDATA.easypiechartInitialize,
 			create: NETDATA.easypiechartChartCreate,
 			update: NETDATA.easypiechartChartUpdate,
-			setSelection: null,
-			clearSelection: null,
+			setSelection: function(t) { return true; },
+			clearSelection: function() { return true; },
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
diff --git a/web/dashboard_full.html b/web/dashboard_full.html
new file mode 100755
index 00000000..203f75a6
--- /dev/null
+++ b/web/dashboard_full.html
@@ -0,0 +1,352 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>NetData Dashboard</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+	<meta name="author" content="costa@tsaousis.gr">
+</head>
+<body>
+
+<div class="container-fluid">
+	<div id="charts_div" class="container-fluid"></div>
+</div>
+
+</body>
+</html>
+	<!-- you can set your netdata server globally, by ucommenting this -->
+	<!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
+	<!-- <script> netdataServer = "http://box:19999"; </script> -->
+
+	<!-- load the dashboard manager - it will do the rest -->
+	<script type="text/javascript" src="dashboard.js"></script>
+
+<script>
+var options = {
+	data: null,
+	hostnane: 'netdata_server',
+	categories: new Array(),
+	categories_idx: {},
+	families: new Array(),
+	families_idx: {},
+	chartsPerRow: 0,
+	chartsMinWidth: 450,
+	chartsHeight: 200,
+	sparklinesHeight: 60
+}
+
+function screenWidth() {
+	return (($(window).width() * 0.95) - 50);
+}
+
+function chartsPerRow(total) {
+	if(options.chartsPerRow === 0) {
+		width = Math.floor(total / options.chartsMinWidth);
+		if(width === 0) width = 1;
+		return width;
+	}
+	else return options.chartsPerRow;
+}
+
+function chartsPrioritySort(a, b) {
+	if(a.priority === b.priority) {
+		if(a.name < b.name) return -1;
+	}
+	else if(a.priority < b.priority) return -1;
+	return 1;
+}
+
+function uniq(array, find_key, get_result) {
+	if(typeof get_result === 'undefined' || get_result === null)
+		get_result = find_key;
+
+	var idx = {};
+	var result = new Array();
+
+	$.each(array, function(i, c) {
+		key = find_key(c);
+		if(typeof idx[key] === 'undefined') {
+			idx[key] = true;
+			result.push(get_result(c));
+		}
+	});
+	return result;
+}
+
+function uniq_with_list(array, find_key_function) {
+	var idx = {};
+	var result = new Array();
+
+	$.each(array, function(i, c) {
+		key = find_key_function(c);
+		if(typeof idx[key] === 'undefined') {
+			idx[key] = new Array();
+			result.push( { name: key, values: idx[key] } );
+		}
+		idx[key].push(c);
+	});
+	result.sort(function(a, b) {
+		if(a.name < b.name) return -1;
+		return 1;
+	});
+	return result;
+}
+
+function prepareScreen(data) {
+	console.log('NETDATA is paused - ready to prepare the screen');
+	console.log(data);
+
+	options.data = data;
+	options.hostname = data.hostname;
+	var charts = data.charts;
+
+	$.each(charts, function(i, c) {
+		if(c.enabled === true) {
+
+			//if(c.family.length > 4 && c.family.substring(c.family.length - 4, c.family.length) === '-ifb')
+			//	c.family = c.family.split('-')[0];
+
+			// find the category of the chart
+			c.category = c.type.split('.')[0];
+
+			var tmp = c.category.split('_')[0];
+			if(tmp === 'net' || tmp === 'disk')
+				c.category = tmp;
+
+			switch(c.category) {
+				case 'system':
+					c.category_priority = 10;
+					c.category_title = 'System';
+					c.glyphicon = "glyphicon-dashboard";
+					break;
+
+				case 'tc':
+					c.category_priority = 20;
+					c.category_title = 'Quality Of Service';
+					c.glyphicon = "glyphicon-random";
+					break;
+
+				case 'net':
+					c.category_priority = 30;
+					c.category_title = 'Network Interfaces';
+					c.glyphicon = "glyphicon-transfer";
+					break;
+
+				case 'apps':
+					c.category_priority = 40;
+					c.category_title = 'Applications Monitoring';
+					c.glyphicon = "glyphicon-tasks";
+					break;
+
+				case 'ipvs':
+					c.category_priority = 50;
+					c.category_title = 'IP Virtual Server';
+					c.glyphicon = "glyphicon-transfer";
+					break;
+
+				case 'netfilter':
+					c.category_priority = 60;
+					c.category_title = 'Netfilter';
+					c.glyphicon = "glyphicon-cloud";
+					break;
+
+				case 'ipv4':
+					c.category_priority = 70;
+					c.category_title = 'IPv4';
+					c.glyphicon = "glyphicon-globe";
+					break;
+
+				case 'mem':
+					c.category_priority = 80;
+					c.category_title = 'Memory';
+					c.glyphicon = "glyphicon-dashboard";
+					break;
+
+				case 'cpu':
+					c.category_priority = 90;
+					c.category_title = 'CPUs';
+					c.glyphicon = "glyphicon-dashboard";
+					break;
+
+				case 'disk':
+					c.category_priority = 100;
+					c.category_title = 'Disks';
+					c.glyphicon = "glyphicon-hdd";
+					break;
+
+				case 'nfsd':
+					c.category_priority = 110;
+					c.category_title = 'NFS Server';
+					c.glyphicon = "glyphicon-hdd";
+					break;
+
+				case 'squid':
+					c.category_priority = 140;
+					c.category_title = 'Proxy Server';
+					c.glyphicon = "glyphicon-link";
+					break;
+
+				case 'netdata':
+					c.category_priority = 150;
+					c.category_title = 'Netdata Monitoring';
+					c.glyphicon = "glyphicon-thumbs-up";
+					break;
+
+				case 'example':
+					c.category_priority = 100000;
+					c.category_title = 'Example Plugins';
+					c.glyphicon = "glyphicon-search";
+					break;
+
+				default:
+					c.category_priority = 150;
+					c.category_title = c.type;
+					c.glyphicon = "glyphicon-dashboard";
+					break;
+			}
+
+			// find the unique categories
+			if(typeof options.categories_idx[c.category] === 'undefined') {
+				options.categories_idx[c.category] = {
+					charts: new Array()
+				}
+				options.categories.push({
+					name: c.category,
+					title: c.category_title,
+					priority: c.category_priority,
+					glyphicon: c.glyphicon,
+					charts: options.categories_idx[c.category].charts
+				});
+			}
+			options.categories_idx[c.category].charts.push(c);
+
+			// find the unique families
+			if(typeof options.families_idx[c.family] === 'undefined') {
+				options.families_idx[c.family] = {
+					charts: new Array()
+				};
+				options.families.push({
+					name: c.family,
+					title: c.family,
+					priority: c.category_priority,
+					glyphicon: c.glyphicon,
+					charts: options.categories_idx[c.category].charts
+				});
+			}
+			options.families_idx[c.family].charts.push(c);
+		}
+	});
+
+	function prioritySort(a, b) {
+		if(a.priority < b.priority) return -1;
+		return 1;
+	}
+
+	// sort all of them
+	options.categories.sort(prioritySort);
+	options.families.sort(prioritySort);
+	$.each(options.families,   function(i, c) { c.charts.sort(prioritySort); });
+
+	var div = document.getElementById('charts_div');
+	var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
+
+	// find the proper duration for per-second updates
+	var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
+	console.log(duration);
+	html = '';
+	$.each(options.categories, function(i, t) {
+		t.charts.sort(prioritySort);
+
+		html += '<div class="container-fluid row clearfix"><h2>' + t.title + '</h2>';
+
+		if(t.name === 'net') {
+			var interfaces = uniq_with_list(t.charts, function(c) { return c.family; });
+			console.log(interfaces);
+
+			$.each(interfaces, function(i, c) {
+				html += '<div class="netdata-group-container" id="interface_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 class="netdata-chart-alignment">' + c.name + '</h2>';
+				$.each(c.values, function(x, f) {
+					if(f.type === 'net') {
+						html += '<div data-netdata="' + f.id + '"'
+							+ ' data-width="100%"'
+							+ ' data-height="' + options.chartsHeight.toString() + 'px"'
+							+ ' data-before="0"'
+							+ ' data-after="-' + duration.toString() + '"'
+							+ '></div>';
+					}
+					else {
+						html += '<div data-netdata="' + f.id + '"'
+							+ ' data-width="100%"'
+							+ ' data-height="' + (options.chartsHeight / 2).toString() + 'px"'
+							+ ' data-before="0"'
+							+ ' data-after="-' + duration.toString() + '"'
+							+ '></div>';
+					}
+				});
+				html += '</div>';
+			});
+		}
+		else if(t.name === 'disk') {
+			var disks = uniq_with_list(t.charts, function(c) { return c.family; });
+			console.log(disks);
+
+			$.each(disks, function(i, c) {
+				html += '<div class="netdata-group-container" id="disk_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 class="netdata-chart-alignment">' + c.name + '</h2>';
+				$.each(c.values, function(x, f) {
+					var c = null;
+					var h = options.chartsHeight / 2;
+					switch(f.type) {
+						case 'disk'        : h = options.chartsHeight; break;
+						case 'disk_backlog': c = '#DD4477'; break;
+						case 'disk_util'   : c = '#109618'; break;
+						case 'disk_qops'   : c = '#8B0707'; break;
+					}
+
+					html += '<div data-netdata="' + f.id + '"'
+						+ ' data-width="100%"'
+						+ ' data-height="' + h.toString() + 'px"'
+						+ ' data-before="0"'
+						+ ' data-after="-' + duration.toString() + '"'
+						+ ' data-colors="' + c + '"'
+						+ '></div>';
+				});
+				html += '</div>';
+			});
+		}
+		else {
+			$.each(t.charts, function(x, c) {
+				html += '<div data-netdata="' + c.id + '"'
+					+ ' data-width="' + pcent_width.toString() + '%"'
+					+ ' data-height="' + options.chartsHeight.toString() + 'px"'
+					+ ' data-before="0"'
+					+ ' data-after="-' + duration.toString() + '"'
+					+ '></div>';
+			});
+		}
+
+		html += '</div>';
+	});
+
+	html += '<br/>'
+	$.each(NETDATA.colors, function(i, c){
+		html += '<div style="display: inline-block;"><div style="display: inline-block; width: 100px; height: 100px; background: ' + c + ';"></div><br/>' + c + '</div>';
+	});
+
+	div.innerHTML = html;
+	NETDATA.unpause();
+}
+
+NETDATA.ready(function() {
+	NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {
+		NETDATA.pause(function () {
+			prepareScreen(data);
+		});
+	});
+});
+
+</script>
-- 
2.39.2