the new dashboard is now the default, the old one moved to the old/ directory and is still accessible and operational

author: Costa Tsaousis (ktsaou) <costa@tsaousis.gr> 2015-12-20 05:05:38 +0200
committer: Costa Tsaousis (ktsaou) <costa@tsaousis.gr> 2015-12-20 05:05:38 +0200
commit: 27c2b265b7d2cfdcac70343778d4d583bd9ce465 (patch)
tree: 3a1bdc050df2cf161ac0baecbe812c7ed73a6c91 /web/old
parent: 9e43f71f87b33a38dc157050fdf75552b1c23442 (diff)
5 files changed, 2026 insertions, 0 deletions
diff --git a/web/old/datasource.html b/web/old/datasource.html
new file mode 100644
index 0000000000..f61db4fb90
--- /dev/null
+++ b/web/old/datasource.html
@@ -0,0 +1,56 @@
+<html>
+	<style>
+		* {font-family:Arial}
+		div {float: left; margin: 0 0 0 0; }
+	</style>
+	<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<title>NetData Datasource Example</title>
+	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+	<script type="text/javascript">
+
+	google.load('visualization', '1', {packages: ['charteditor']});
+	// google.load('visualization', '1.0');  // Note: No need to specify chart libraries.
+
+	google.setOnLoadCallback(drawVisualization);
+
+	var wrapper;
+	function drawVisualization() {
+		wrapper = new google.visualization.ChartWrapper({
+			containerId: 'graph_div',
+			chartType: 'AreaChart',
+			dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs
+			refreshInterval: 1,
+			options: {
+				isStacked: true,
+				areaOpacity: 0.85,
+				lineWidth: 1,
+				title: 'CPU utilization',
+				width: window.innerWidth - 50,
+				height: window.innerHeight - 50,
+				hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
+				vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100},
+				focusTarget: 'category',
+				annotation: {'1': {style: 'line'}},
+			},
+		});
+		wrapper.draw();
+	}
+
+	function openEditor() {
+		var editor = new google.visualization.ChartEditor();
+		google.visualization.events.addListener(editor, 'ok', function() {
+			wrapper = editor.getChartWrapper();
+			wrapper.draw(document.getElementById('graph_div'));
+		});
+		editor.openDialog(wrapper);
+	}
+
+	</script>
+	</head>
+	<body>
+		<input type='button' onclick='openEditor()' value='Open Editor'>
+		<br/>
+		<div><div id="graph_div"/></div>
+	</body>
+</html>
diff --git a/web/old/index.html b/web/old/index.html
new file mode 100644
index 0000000000..ff26bfa21d
--- /dev/null
+++ b/web/old/index.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<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="description" content="">
+    <meta name="author" content="costa@tsaousis.gr">
+
+ 	<title>NetData</title>
+
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+	<link href="theme.css" rel="stylesheet">
+</head>
+
+<body role="document" data-spy="scroll" data-target="#main_menu_div">
+    <nav id="mynav" class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container" style="width: 98%;">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_menu_div">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/" id="hostname_id">NetData</a>
+        </div>
+        <div class="navbar-header navbar-right">
+        	<ul class="nav navbar-nav">
+        	<li><a href="/">Looking for the new Dashboard?</a></li>
+        	</ul>
+        </div>
+		<form class="navbar-form navbar-right">
+			<!-- <div class="form-group">
+				<input type="text" class="form-control" placeholder="Search">
+			</div> -->
+				<button type="button" class="btn btn-primary global_play_button" onClick="buttonGlobalPlayPause('toggle');" data-play-text="<span class='glyphicon glyphicon-pause'></span> Pause" data-pause-text="<span class='glyphicon glyphicon-play'></span> Play" data-toggle="tooltip" data-placement="bottom" title=" click <span class='glyphicon glyphicon-play'></span> to have the graphs auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graphs.">
+				<span class="glyphicon glyphicon-pause"></span> Pause
+				</button>
+			<div class="btn-group btn-group" data-toggle="buttons" role="group">
+				<label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show less detail to speed up the browser. Use this if your machine is old and slow.">
+					<input type="radio" name="presentation" id="presentation_speedy" onChange="setPresentationSpeedy(0);">Speedy
+				</label>
+				<label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Balance graphs detail with browser speed. Use this on modern computers.">
+					<input type="radio" name="presentation" id="presentation_normal" onChange="setPresentationNormal(0);">Normal
+				</label>
+				<label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show all the detail there is. This may slow down your browser.">
+					<input type="radio" name="presentation" id="presentation_detailed" onChange="setPresentationDetailed(0);">Detailed
+				</label>
+			</div>
+		</form>
+        <div class="collapse navbar-collapse" id="main_menu_div">
+          <ul class="nav navbar-nav">
+            <li><a href="#">preparing charts...</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
+
+    <div class="container graphs" id="maingraph_container" style="display: none;">
+		<table>
+			<tr><td>
+		    	<div class="maingraph">
+					<table>
+						<tr><td>
+						<div class="maingraph" id="maingraph"></div>
+						<div id="maingraph_dashboard">
+							<div class="maingraph" id="maingraph_hidden" style="display: none"></div>
+							<div class="maingraph" id="maingraph_control"></div>
+						</div>
+						</td></tr>
+						<tr><td align="center">
+							<div class="btn-group">
+								<form id="mainchartform">
+									<div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title=" click <span class='glyphicon glyphicon-play'></span> to have the graph auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graph. When paused the graph can be zoomed and panned horizontally." >
+										<button type="button" class="btn btn-primary mainchart_play_button" data-play-text="<span class='glyphicon glyphicon-pause'></span>" data-pause-text="<span class='glyphicon glyphicon-play'></span>" onClick="setMainChartPlay('toggle');">
+											<span class="glyphicon glyphicon-pause"></span>
+										</button>
+									</div>
+									<div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
+										<button type="button" class="btn btn-primary mainchart_avg_button" data-max-text="<span class='glyphicon glyphicon-signal'></span>" data-average-text="<span class='glyphicon glyphicon-align-justify'></span>" onClick="setMainChartGroupMethod('toggle');">
+											<span class="glyphicon glyphicon-signal"></span>
+										</button>
+									</div>
+									<div class="btn-group btn-group" data-toggle="buttons" >
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="do not group points, show the raw data">
+											<input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group in half, show 1 every 2 points of data">
+											<input type="radio" name="group" id="group2" onChange="setMainChartGroup(2);">2
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 3 points of data">
+											<input type="radio" name="group" id="group3" onChange="setMainChartGroup(3);">3
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 4 points of data">
+											<input type="radio" name="group" id="group4" onChange="setMainChartGroup(4);">4
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 5 points of data">
+											<input type="radio" name="group" id="group5" onChange="setMainChartGroup(5);">5
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 10 points of data">
+											<input type="radio" name="group" id="group10" onChange="setMainChartGroup(10);">10
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 15 points of data">
+											<input type="radio" name="group" id="group15" onChange="setMainChartGroup(15);">15
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 20 points of data">
+											<input type="radio" name="group" id="group20" onChange="setMainChartGroup(20);">20
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 30 points of data">
+											<input type="radio" name="group" id="group30" onChange="setMainChartGroup(30);">30
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 45 points of data">
+											<input type="radio" name="group" id="group45" onChange="setMainChartGroup(45);">45
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 60 points of data">
+											<input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60
+										</label>
+										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 90 points of data">
+											<input type="radio" name="group" id="group90" onChange="setMainChartGroup(90);">90
+										</label>
+									</div>
+									<div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
+										<button type="button" class="btn btn-primary mainchart_max_button" data-maximized-text="<span class='glyphicon glyphicon-resize-small'></span>" data-normal-text="<span class='glyphicon glyphicon-fullscreen'></span>" onClick="setMainChartMax('toggle');">
+											<span class="glyphicon glyphicon-fullscreen"></span>
+										</button>
+									</div>
+								</form>
+							</div>
+							</td></tr>
+					</table>
+		 	   </div><!-- /.maingraph -->
+			</td></tr>
+		</table>
+	</div>
+
+    <div class="container graphs" id="thumbgraphs_container" style="display: none;">
+    	<div id="thumbgraphs">
+    	</div>
+	</div>
+
+    <div class="container graphs" id="groupgraphs_container" style="display: none;">
+    	<div class="allgraphs" id="groupgraphs">
+    	</div>
+	</div>
+
+    <div class="container" id="splash_container">
+		<table width="100%">
+			<tr><td id="splash" align="center" style="vertical-align: middle; height: 400px; overflow: auto;">
+				<h2>
+				Welcome to <b>NetData</b>!
+				<br/><br/>
+				<span class="glyphicon glyphicon-off"></span>
+				<br/><br/>
+				loading cosmos
+				<br/><br/>
+				<span class="label label-default">Please wait...</span>
+				</h2>
+			</td></tr>
+		</table>
+	</div>
+
+    <div class="container graphs" id="footer_container">
+   		&nbsp;<p/>
+   		<hr/>
+    	<h4>NetData</h4>
+    	Realtime System Information over the web for all linux systems.
+    	<p/>
+    	Distributed under GPL v2.
+    	<p/>
+    	(c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
+    	<p/>
+    	<div id="server_summary_id"></div>
+    </div>
+
+	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+	<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+	<script type='text/javascript'>
+		document.getElementById('splash').height = $(window).height();
+	</script>
+
+	<!-- Google AJAX API -->
+	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+
+	<!-- NetData -->
+	<script type="text/javascript" src="netdata.js"></script>
+	<script type="text/javascript" src="index.js"></script>
+
+	<script type='text/javascript'>
+		google.load('visualization', '1.1', {packages: ['controls']});
+
+		$(document).ready(function(){
+
+			$(document).on('click','.navbar-collapse.in',function(e) {
+				if( $(e.target).is('a') ) {
+					$(this).collapse('hide');
+				}
+			});
+
+			$('body').scrollspy({ target: '#main_menu_div' })
+		});
+	</script>
+</html>
diff --git a/web/old/index.js b/web/old/index.js
new file mode 100755
index 0000000000..3a28daf738
--- /dev/null
+++ b/web/old/index.js
@@ -0,0 +1,1174 @@
+var page_is_visible = 1;
+
+var TARGET_THUMB_GRAPH_WIDTH = 500;		// thumb charts width will range from 0.5 to 1.5 of that
+var MINIMUM_THUMB_GRAPH_WIDTH = 400;	// thumb chart will generally try to be wider than that
+var TARGET_THUMB_GRAPH_HEIGHT = 160;	// the height of the thumb charts
+var TARGET_GROUP_GRAPH_HEIGHT = 160;
+
+var THUMBS_MAX_TIME_TO_SHOW = 240;		// how much time the thumb charts will present?
+var THUMBS_POINTS_DIVISOR = 3;
+var THUMBS_STACKED_POINTS_DIVISOR = 4;
+
+var GROUPS_MAX_TIME_TO_SHOW = 600;		// how much time the group charts will present?
+var GROUPS_POINTS_DIVISOR = 2;
+var GROUPS_STACKED_POINTS_DIVISOR = 3;
+
+var MAINCHART_MIN_TIME_TO_SHOW = 1200;	// how much time the main chart will present by default?
+var MAINCHART_POINTS_DIVISOR = 2;		// how much detailed will the main chart be by default? 1 = finest, higher is faster
+var MAINCHART_STACKED_POINTS_DIVISOR = 3;		// how much detailed will the main chart be by default? 1 = finest, higher is faster
+
+var MAINCHART_CONTROL_HEIGHT = 75;		// how tall the control chart will be
+var MAINCHART_CONTROL_DIVISOR = 5;		// how much detailed will the control chart be? 1 = finest, higher is faster
+var MAINCHART_INITIAL_SELECTOR= 20;		// 1/20th of the width, this overrides MAINCHART_MIN_TIME_TO_SHOW
+
+var CHARTS_REFRESH_LOOP = 50;			// delay between chart refreshes
+var CHARTS_REFRESH_IDLE = 500;			// delay between chart refreshes when no chart was ready for refresh the last time
+var CHARTS_CHECK_NO_FOCUS = 500;		// delay to check for visibility when the page has no focus
+var CHARTS_SCROLL_IDLE = 100;			// delay to wait after a page scroll
+
+var ENABLE_CURVE = 1;
+
+var resize_request = false;
+
+function setPresentationNormal(ui) {
+	THUMBS_POINTS_DIVISOR 				= 3;
+	THUMBS_STACKED_POINTS_DIVISOR 		= Math.round(THUMBS_POINTS_DIVISOR * 1.5);
+	GROUPS_POINTS_DIVISOR 				= 2;
+	GROUPS_STACKED_POINTS_DIVISOR 		= Math.round(GROUPS_POINTS_DIVISOR * 1.5);
+	MAINCHART_POINTS_DIVISOR 			= 2;
+	MAINCHART_STACKED_POINTS_DIVISOR 	= Math.round(MAINCHART_POINTS_DIVISOR * 1.5);
+	ENABLE_CURVE = 1;
+	CHARTS_REFRESH_LOOP = 50;
+	CHARTS_SCROLL_IDLE = 50;
+	resize_request = true;
+	if(ui) $('#presentation_normal').trigger('click');
+	playGraphs();
+}
+function setPresentationSpeedy(ui) {
+	THUMBS_POINTS_DIVISOR 				= 10;
+	THUMBS_STACKED_POINTS_DIVISOR 		= Math.round(THUMBS_POINTS_DIVISOR * 1.5);
+	GROUPS_POINTS_DIVISOR 				= 8;
+	GROUPS_STACKED_POINTS_DIVISOR 		= Math.round(GROUPS_POINTS_DIVISOR * 1.5);
+	MAINCHART_POINTS_DIVISOR 			= 5;
+	MAINCHART_STACKED_POINTS_DIVISOR 	= Math.round(MAINCHART_POINTS_DIVISOR * 1.5);
+	ENABLE_CURVE = 0;
+	CHARTS_REFRESH_LOOP = 50;
+	CHARTS_SCROLL_IDLE = 100;
+	resize_request = true;
+	if(ui) $('#presentation_speedy').trigger('click');
+	playGraphs();
+}
+function setPresentationDetailed(ui) {
+	THUMBS_POINTS_DIVISOR 				= 1;
+	THUMBS_STACKED_POINTS_DIVISOR 		= 1;
+	GROUPS_POINTS_DIVISOR 				= 1;
+	GROUPS_STACKED_POINTS_DIVISOR 		= 1;
+	MAINCHART_POINTS_DIVISOR 			= 1;
+	MAINCHART_STACKED_POINTS_DIVISOR 	= 1;
+	ENABLE_CURVE = 1;
+	CHARTS_REFRESH_LOOP = 50;
+	CHARTS_SCROLL_IDLE = 50;
+	resize_request = true;
+	if(ui) $('#presentation_detailed').trigger('click');
+	playGraphs();
+}
+
+function isIE() {
+  userAgent = navigator.userAgent;
+  return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1;
+}
+
+if(isIE()){
+	// do stuff with ie-users
+	CHARTS_REFRESH_LOOP=250;
+	CHARTS_SCROLL_IDLE=500;
+}
+
+var MODE_THUMBS = 1;
+var MODE_MAIN = 2;
+var MODE_GROUP_THUMBS = 3;
+var mode; // one of the MODE_* values
+
+var allCharts = new Array();
+var mainchart;
+
+// html for the main menu
+var mainmenu = "";
+var categoriesmainmenu = "";
+var familiesmainmenu = "";
+var chartsmainmenu = "";
+
+
+// ------------------------------------------------------------------------
+// common HTML generation
+
+function thumbChartActions(i, c, nogroup) {
+	var name = c.name;
+	if(!nogroup) name = c.family;
+
+	var refinfo = "the chart is drawing ";
+	if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
+	else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
+
+	var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"" + refinfo + "\">"
+	+		"<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
+	+	"</div>"
+	+	"<div class=\"btn-group btn-group\"><button type=\"button\" class=\"btn btn-default disabled\"><small>&nbsp;&nbsp; " + name + "</small></button>";
+
+	if(!nogroup) {
+		var ingroup = 0;
+		var ingroup_detail = 0;
+
+		$.each(allCharts, function(i, d) {
+			if(d.family == c.family) {
+				ingroup++;
+				if(d.isdetail) ingroup_detail++;
+			}
+		});
+
+		var hidden = "";
+		if(ingroup_detail) hidden = ", including " + ingroup_detail + " charts not shown now";
+
+		html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Show all " + ingroup + " charts in group '" + c.family + "'" + hidden + "\" class=\"btn btn-default\" onclick=\"initGroupGraphs('" + c.family +"');\"><span class=\"glyphicon glyphicon-th-large\"></span></button>";
+	}
+
+	html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
+	+		"<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"set options for chart '" + c.name + "'\" class=\"btn btn-default disabled\" onclick=\"alert('Not implemented yet!');\"><span class=\"glyphicon glyphicon-cog\"></span></button>"
+	+		"<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
+	+	"</div>";
+
+	return html;
+}
+
+function groupChartActions(i, c) {
+	var name = c.name;
+
+	var refinfo = "the chart is drawing ";
+	if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
+	else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
+
+	var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"" + refinfo + "\">"
+	+		"<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
+	+	"</div>";
+
+	html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
+	+		"<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
+	+	"</div>";
+
+	return html;
+}
+
+function mylog(txt) {
+	console.log(txt);
+	$('#logline').html(txt);
+}
+
+function chartssort(a, b) {
+	if(a.priority == b.priority) {
+		if(a.name < b.name) return -1;
+	}
+	else if(a.priority < b.priority) return -1;
+
+	return 1;
+}
+
+
+// ------------------------------------------------------------------------
+// MAINGRAPH = fullscreen view of 1 graph
+
+// copy the chart c to mainchart
+// switch to main graphs screen
+function initMainChart(c) {
+	if(mainchart) cleanThisChart(mainchart);
+
+	mainchart = $.extend(true, {}, c);
+	mainchart.enabled = true;
+	mainchart.refreshCount = 0;
+	mainchart.last_updated = 0;
+	mainchart.chartOptions.explorer = null;
+	mainchart.chart = null;
+
+	mainchart.before = 0;
+	mainchart.after = 0;
+
+	mainchart.chartOptions.width = screenWidth();
+	mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
+	if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
+
+	mainchart.div = 'maingraph';
+	mainchart.max_time_to_show = (mainchart.last_entry_t - mainchart.first_entry_t) / ( MAINCHART_INITIAL_SELECTOR * mainchart.update_every );
+	if(mainchart.max_time_to_show < MAINCHART_MIN_TIME_TO_SHOW) mainchart.max_time_to_show = MAINCHART_MIN_TIME_TO_SHOW;
+	calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE);
+
+	// copy it to the hidden chart
+	mainchart.hiddenchart = $.extend(true, {}, mainchart);
+	mainchart.hiddenchart.chartOptions.height = MAINCHART_CONTROL_HEIGHT;
+	mainchart.hiddenchart.div = 'maingraph_control';
+	mainchart.hiddenchart.non_zero = 0;
+
+	// initialize the div
+	showChartIsLoading(mainchart.div, mainchart.name, mainchart.chartOptions.width, mainchart.chartOptions.height);
+	document.getElementById(mainchart.hiddenchart.div).innerHTML = "<table><tr><td align=\"center\" width=\"" + mainchart.hiddenchart.chartOptions.width + "\" height=\"" + mainchart.hiddenchart.chartOptions.height + "\" style=\"vertical-align:middle\"><h4><span class=\"label label-default\">Please wait...</span></h4></td></tr></table>";
+	//showChartIsLoading(mainchart.hiddenchart.div, mainchart.hiddenchart.name, mainchart.hiddenchart.chartOptions.width, mainchart.hiddenchart.chartOptions.height);
+
+	// set the radio buttons
+	setMainChartGroupMethod(mainchart.group_method, 'no-refresh');
+	setMainChartMax('normal');
+
+	$('#group' + mainchart.group).trigger('click');
+	setMainChartGroup(mainchart.group, 'no-refresh');
+
+	switchToMainGraph();
+}
+
+function refreshHiddenChart(doNext) {
+	if(refresh_mode == REFRESH_PAUSED && mainchart.hiddenchart.last_updated != 0) {
+		if(typeof doNext == "function") doNext();
+		return;
+	}
+
+	// is it too soon for a refresh?
+	var now = new Date().getTime();
+	if((now - mainchart.hiddenchart.last_updated) < (mainchart.update_every * 10 * 1000) || (now - mainchart.hiddenchart.last_updated) < (mainchart.hiddenchart.group * mainchart.hiddenchart.update_every * 1000)) {
+		if(typeof doNext == "function") doNext();
+		return;
+	}
+
+	if(mainchart.dashboard && mainchart.hiddenchart.refreshCount > 50) {
+		mainchart.dashboard.clear();
+		mainchart.control_wrapper.clear();
+		mainchart.hidden_wrapper.clear();
+
+		mainchart.dashboard = null;
+		mainchart.control_wrapper = null;
+		mainchart.hidden_wrapper = null;
+		mainchart.hiddenchart.last_updated = 0;
+	}
+
+	if(!mainchart.dashboard) {
+		var controlopts = $.extend(true, {}, mainchart.chartOptions, {
+			lineWidth: 1,
+			height: mainchart.hiddenchart.chartOptions.height,
+			chartArea: {'width': '98%'},
+			hAxis: {'baselineColor': 'none', viewWindowMode: 'maximized', gridlines: { count: 0 } },
+			vAxis: {'title': null, gridlines: { count: 0 } },
+		});
+
+		mainchart.dashboard = new google.visualization.Dashboard(document.getElementById('maingraph_dashboard'));
+		mainchart.control_wrapper = new google.visualization.ControlWrapper({
+			controlType: 'ChartRangeFilter',
+			containerId: 'maingraph_control',
+			options: {
+				filterColumnIndex: 0,
+				ui: {
+					chartType: mainchart.chartType,
+					chartOptions: controlopts,
+					minRangeSize: (mainchart.max_time_to_show * 1000) / MAINCHART_POINTS_DIVISOR,
+				}
+			},
+		});
+		mainchart.hidden_wrapper = new google.visualization.ChartWrapper({
+			chartType: mainchart.chartType,
+			containerId: 'maingraph_hidden',
+			options: {
+				isStacked: mainchart.chartOptions.isStacked,
+				width: mainchart.hiddenchart.chartOptions.width,
+				height: mainchart.hiddenchart.chartOptions.height,
+				//chartArea: {'height': '80%', 'width': '100%'},
+				//hAxis: {'slantedText': false},
+				//legend: {'position': 'none'}
+			},
+		});
+
+		mainchart.hiddenchart.refreshCount = 0;
+	}
+
+	// load the data for the control and the hidden wrappers
+	// calculate the group and points to show for the control chart
+	calculateChartPointsToShow(mainchart.hiddenchart, MAINCHART_CONTROL_DIVISOR, 0, -1, ENABLE_CURVE);
+
+	$.ajax({
+		url: generateChartURL(mainchart.hiddenchart),
+		dataType:"json",
+		cache: false
+	})
+	.done(function(jsondata) {
+		if(!jsondata || jsondata.length == 0) return;
+
+		mainchart.control_data = new google.visualization.DataTable(jsondata);
+
+		if(mainchart.hiddenchart.last_updated == 0) {
+			google.visualization.events.addListener(mainchart.control_wrapper, 'ready', mainchartControlReadyEvent);
+			mainchart.dashboard.bind(mainchart.control_wrapper, mainchart.hidden_wrapper);
+		}
+		if(refresh_mode != REFRESH_PAUSED) {
+			// console.log('mainchart.points_to_show: ' + mainchart.points_to_show + ', mainchart.group: ' + mainchart.group + ', mainchart.update_every: ' + mainchart.update_every);
+
+			var start = now - (mainchart.points_to_show * mainchart.group * mainchart.update_every * 1000);
+			var end = now;
+			var min = MAINCHART_MIN_TIME_TO_SHOW * 1000;
+			if(end - start < min) start = end - min;
+
+			mainchart.control_wrapper.setState({range: {
+				start: new Date(start),
+				end: new Date(end)
+			},
+			ui: {
+				minRangeSize: min
+			}});
+		}
+
+		mainchart.dashboard.draw(mainchart.control_data);
+		mainchart.hiddenchart.last_updated = new Date().getTime();
+		mainchart.hiddenchart.refreshCount++;
+	})
+	.always(function() {
+		if(typeof doNext == "function") doNext();
+	});
+}
+
+function mainchartControlReadyEvent() {
+	google.visualization.events.addListener(mainchart.control_wrapper, 'statechange', mainchartControlStateHandler);
+	//mylog(mainchart);
+}
+
+function mainchartControlStateHandler() {
+	// setMainChartPlay('pause');
+
+	var state = mainchart.control_wrapper.getState();
+	mainchart.after = Math.round(state.range.start.getTime() / 1000);
+	mainchart.before = Math.round(state.range.end.getTime() / 1000);
+
+	calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.before - mainchart.after, 0, ENABLE_CURVE);
+	//mylog('group = ' + mainchart.group + ', points_to_show = ' + mainchart.points_to_show + ', dt = ' + (mainchart.before - mainchart.after));
+
+	$('#group' + mainchart.group).trigger('click');
+	mainchart.last_updated = 0;
+
+	if(refresh_mode != REFRESH_PAUSED) pauseGraphs();
+}
+
+function initMainChartIndex(i) {
+	if(mode == MODE_GROUP_THUMBS)
+		initMainChart(groupCharts[i]);
+
+	else if(mode == MODE_THUMBS)
+		initMainChart(allCharts[i]);
+
+	else
+		initMainChart(allCharts[i]);
+}
+
+function initMainChartIndexOfMyCharts(i) {
+	initMainChart(allCharts[i]);
+}
+
+var last_main_chart_max='normal';
+function setMainChartMax(m) {
+	if(!mainchart) return;
+
+	if(m == 'toggle') {
+		if(last_main_chart_max == 'maximized') m = 'normal';
+		else m = 'maximized';
+	}
+
+	if(m == "maximized") {
+		mainchart.chartOptions.theme = 'maximized';
+		//mainchart.chartOptions.axisTitlesPosition = 'in';
+		//mainchart.chartOptions.legend = {position: 'none'};
+		mainchart.chartOptions.hAxis.title = null;
+		mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
+		mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
+		mainchart.chartOptions.chartArea = {'width': '98%', 'height': '100%'};
+	}
+	else {
+		mainchart.chartOptions.hAxis.title = null;
+		mainchart.chartOptions.theme = null;
+		mainchart.chartOptions.hAxis.viewWindowMode = null;
+		mainchart.chartOptions.vAxis.viewWindowMode = null;
+		mainchart.chartOptions.chartArea = {'width': '80%', 'height': '90%'};
+	}
+	$('.mainchart_max_button').button(m);
+	last_main_chart_max = m;
+	mainchart.last_updated = 0;
+}
+
+function setMainChartGroup(g, norefresh) {
+	if(!mainchart) return;
+
+	mainchart.group = g;
+
+	if(!mainchart.before && !mainchart.after)
+		calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, mainchart.group, ENABLE_CURVE);
+	else
+		calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, 0, mainchart.group, ENABLE_CURVE);
+
+	if(!norefresh) {
+		mainchart.last_updated = 0;
+	}
+}
+
+var last_main_chart_avg = null;
+function setMainChartGroupMethod(g, norefresh) {
+	if(!mainchart) return;
+
+	if(g == 'toggle') {
+		if(last_main_chart_avg == 'max') g = 'average';
+		else g = 'max';
+	}
+
+	mainchart.group_method = g;
+
+	$('.mainchart_avg_button').button(g);
+
+	if(!norefresh) {
+		mainchart.last_updated = 0;
+	}
+
+	last_main_chart_avg = g;
+}
+
+function setMainChartPlay(p) {
+	if(!mainchart) return;
+
+	if(p == 'toggle') {
+		if(refresh_mode != REFRESH_ALWAYS) p = 'play';
+		else p = 'pause';
+	}
+
+	if(p == 'play') {
+		//mainchart.chartOptions.explorer = null;
+		mainchart.after = 0;
+		mainchart.before = 0;
+		calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE);
+		$('#group' + mainchart.group).trigger('click');
+		mainchart.last_updated = 0;
+		mainchart.hiddenchart.last_updated = 0;
+		playGraphs();
+	}
+	else {
+		//mainchart.chartOptions.explorer = {
+		//	'axis': 'horizontal',
+		//	'maxZoomOut': 1,
+		//};
+		//mainchart.last_updated = 0;
+
+		//if(!renderChart(mainchart, pauseGraphs))
+		pauseGraphs();
+	}
+}
+
+function buttonGlobalPlayPause(p) {
+	if(mode == MODE_MAIN) {
+		setMainChartPlay(p);
+		return;
+	}
+
+	if(p == 'toggle') {
+		if(refresh_mode != REFRESH_ALWAYS) p = 'play';
+		else p = 'pause';
+	}
+
+	if(p == 'play') playGraphs();
+	else pauseGraphs();
+}
+
+
+// ------------------------------------------------------------------------
+// Chart resizing
+
+function screenWidth() {
+	return (($(window).width() * 0.95) - 50);
+}
+
+// calculate the proper width for the thumb charts
+function thumbWidth() {
+	var cwidth = screenWidth();
+	var items = Math.round(cwidth / TARGET_THUMB_GRAPH_WIDTH);
+	if(items < 1) items = 1;
+
+	if(items > 1 && (cwidth / items) < MINIMUM_THUMB_GRAPH_WIDTH) items--;
+
+	return Math.round(cwidth / items) - 1;
+}
+
+function groupChartSizes() {
+	var s = { width: screenWidth(), height: TARGET_GROUP_GRAPH_HEIGHT };
+
+	var count = 0;
+	if(groupCharts) $.each(groupCharts, function(i, c) {
+		if(c.enabled) count++;
+	});
+
+	if(count == 0) {
+		s.width = TARGET_GROUP_GRAPH_HEIGHT;
+		s.height = TARGET_GROUP_GRAPH_HEIGHT;
+	}
+	else {
+		if(s.width < MINIMUM_THUMB_GRAPH_WIDTH) s.width = screenWidth();
+		s.height = ($(window).height() - 130) / count - 10;
+	}
+
+	if(s.height < TARGET_GROUP_GRAPH_HEIGHT)
+		s.height = TARGET_GROUP_GRAPH_HEIGHT;
+
+	return s;
+}
+
+// resize all charts
+// if the thumb charts need resize in their width, reset them
+function resizeCharts() {
+	var width = screenWidth();
+
+	if(mainchart) {
+		mainchart.chartOptions.width = width;
+		mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
+		mainchart.last_updated = 0;
+
+		mainchart.hidden_wrapper.setOption('width', width);
+		mainchart.control_wrapper.setOption('ui.chartOptions.width', width);
+		mainchart.hiddenchart.chartOptions.width = width;
+		mainchart.hiddenchart.last_updated = 0;
+	}
+
+	width = thumbWidth();
+	$.each(allCharts, function(i, c) {
+		if(c.enabled) {
+			cleanThisChart(c);
+			c.chartOptions.width = width;
+			calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
+			showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height);
+			document.getElementById(c.id + '_thumb_actions_div').innerHTML = thumbChartActions(i, c);
+			c.last_updated = 0;
+		}
+	});
+
+	if(groupCharts) $.each(groupCharts, function(i, c) {
+		var sizes = groupChartSizes();
+
+		if(c.enabled) {
+			cleanThisChart(c);
+			c.chartOptions.width = sizes.width;
+			c.chartOptions.height = sizes.height;
+			calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
+			showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height);
+			document.getElementById(c.id + '_group_actions_div').innerHTML = groupChartActions(i, c);
+			c.last_updated = 0;
+		}
+	});
+</
author	Costa Tsaousis (ktsaou) <costa@tsaousis.gr>	2015-12-20 05:05:38 +0200
committer	Costa Tsaousis (ktsaou) <costa@tsaousis.gr>	2015-12-20 05:05:38 +0200
commit	27c2b265b7d2cfdcac70343778d4d583bd9ce465 (patch)
tree	3a1bdc050df2cf161ac0baecbe812c7ed73a6c91 /web/old
parent	9e43f71f87b33a38dc157050fdf75552b1c23442 (diff)