diff options
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) |
the new dashboard is now the default, the old one moved to the old/ directory and is still accessible and operational
Diffstat (limited to 'web/old')
-rw-r--r-- | web/old/datasource.html | 56 | ||||
-rw-r--r-- | web/old/index.html | 207 | ||||
-rwxr-xr-x | web/old/index.js | 1174 | ||||
-rwxr-xr-x | web/old/netdata.js | 502 | ||||
-rw-r--r-- | web/old/theme.css | 87 |
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"> + <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> " + 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; + } + }); + |