added user control for the details of the charts
Costa Tsaousis (ktsaou) committed
Nov 22, 2015 at 19:55 UTC
4854426b257346f3229e48a828d814e41ad8df24
4 files changed
+226
-97
web/index.html
+25
-14
@@ -33,9 +33,20 @@
33
<!-- <div class="form-group">
34
<input type="text" class="form-control" placeholder="Search">
35
</div> -->
36
- <button type="button" class="btn btn-default 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">
36
+ <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.">
37
<span class="glyphicon glyphicon-pause"></span> Pause
38
- </button>
38
+ </button>
39
+ <div class="btn-group btn-group" data-toggle="buttons" role="group">
40
+ <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.">
41
+ <input type="radio" name="presentation" id="presentation_speedy" onChange="setPresentationSpeedy(0);">Speedy
42
+ </label>
43
+ <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Balance graphs detail with browser speed. Use this on modern computers.">
44
+ <input type="radio" name="presentation" id="presentation_normal" onChange="setPresentationNormal(0);">Normal
45
+ </label>
46
+ <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show all the detail there is. This may slow down your browser.">
47
+ <input type="radio" name="presentation" id="presentation_detailed" onChange="setPresentationDetailed(0);">Detailed
48
+ </label>
49
+ </div>
50
</form>
51
<div class="collapse navbar-collapse" id="main_menu_div">
52
<ul class="nav navbar-nav">
@@ -60,48 +71,48 @@
71
<tr><td align="center">
72
<div class="btn-group">
73
<form id="mainchartform">
63
- <div class="btn-group btn-group" data-toggle="tooltip" 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." >
74
+ <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." >
75
<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');">
76
<span class="glyphicon glyphicon-pause"></span>
77
</button>
78
</div>
68
- <div class="btn-group btn-group" data-toggle="tooltip" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
79
+ <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" >
80
<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');">
81
<span class="glyphicon glyphicon-signal"></span>
82
</button>
83
</div>
84
<div class="btn-group btn-group" data-toggle="buttons" >
74
- <label class="btn btn-primary" data-toggle="tooltip" title="do not group points, show the raw data">
85
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="do not group points, show the raw data">
86
<input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
87
</label>
88
78
- <label class="btn btn-primary" data-toggle="tooltip" title="group in half, show 1 every 2 points of data">
89
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group in half, show 1 every 2 points of data">
90
<input type="radio" name="group" id="group2" onChange="setMainChartGroup(2);">2
91
</label>
92
82
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 5 points of data">
93
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 5 points of data">
94
<input type="radio" name="group" id="group5" onChange="setMainChartGroup(5);">5
95
</label>
85
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 10 points of data">
96
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 10 points of data">
97
<input type="radio" name="group" id="group10" onChange="setMainChartGroup(10);">10
98
</label>
88
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 15 points of data">
99
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 15 points of data">
100
<input type="radio" name="group" id="group15" onChange="setMainChartGroup(15);">15
101
</label>
91
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 20 points of data">
102
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 20 points of data">
103
<input type="radio" name="group" id="group20" onChange="setMainChartGroup(20);">20
104
</label>
94
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 30 points of data">
105
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 30 points of data">
106
<input type="radio" name="group" id="group30" onChange="setMainChartGroup(30);">30
107
</label>
97
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 45 points of data">
108
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 45 points of data">
109
<input type="radio" name="group" id="group45" onChange="setMainChartGroup(45);">45
110
</label>
100
- <label class="btn btn-primary" data-toggle="tooltip" title="group every 60 points of data">
111
+ <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 60 points of data">
112
<input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60
113
</label>
114
</div>
104
- <div class="btn-group btn-group" data-toggle="tooltip" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
115
+ <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" >
116
<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');">
117
<span class="glyphicon glyphicon-fullscreen"></span>
118
</button>
web/index.js
+98
-49
@@ -7,18 +7,18 @@ var TARGET_GROUP_GRAPH_HEIGHT = 160;
7
8
var THUMBS_MAX_TIME_TO_SHOW = 240; // how much time the thumb charts will present?
9
var THUMBS_POINTS_DIVISOR = 3;
10
-var THUMBS_STACKED_POINTS_DIVISOR = 3;
10
+var THUMBS_STACKED_POINTS_DIVISOR = 4;
11
12
var GROUPS_MAX_TIME_TO_SHOW = 600; // how much time the group charts will present?
13
var GROUPS_POINTS_DIVISOR = 2;
14
-var GROUPS_STACKED_POINTS_DIVISOR = 2;
14
+var GROUPS_STACKED_POINTS_DIVISOR = 3;
15
16
var MAINCHART_MIN_TIME_TO_SHOW = 1200; // how much time the main chart will present by default?
17
-var MAINCHART_POINTS_DIVISOR = 5; // how much detailed will the main chart be by default? 1 = finest, higher is faster
18
-var MAINCHART_STACKED_POINTS_DIVISOR = 10; // how much detailed will the main chart be by default? 1 = finest, higher is faster
17
+var MAINCHART_POINTS_DIVISOR = 2; // how much detailed will the main chart be by default? 1 = finest, higher is faster
18
+var MAINCHART_STACKED_POINTS_DIVISOR = 3; // how much detailed will the main chart be by default? 1 = finest, higher is faster
19
20
var MAINCHART_CONTROL_HEIGHT = 75; // how tall the control chart will be
21
-var MAINCHART_CONTROL_DIVISOR = 2; // how much detailed will the control chart be? 1 = finest, higher is faster
21
+var MAINCHART_CONTROL_DIVISOR = 5; // how much detailed will the control chart be? 1 = finest, higher is faster
22
var MAINCHART_INITIAL_SELECTOR= 20; // 1/20th of the width, this overrides MAINCHART_MIN_TIME_TO_SHOW
23
24
var CHARTS_REFRESH_LOOP = 50; // delay between chart refreshes
@@ -26,6 +26,52 @@ var CHARTS_REFRESH_IDLE = 500; // delay between chart refreshes when no chart
26
var CHARTS_CHECK_NO_FOCUS = 500; // delay to check for visibility when the page has no focus
27
var CHARTS_SCROLL_IDLE = 100; // delay to wait after a page scroll
28
29
+var ENABLE_CURVE = 1;
30
+
31
+var resize_request = false;
32
+
33
+function setPresentationNormal(ui) {
34
+ THUMBS_POINTS_DIVISOR = 3;
35
+ THUMBS_STACKED_POINTS_DIVISOR = Math.round(THUMBS_POINTS_DIVISOR * 1.5);
36
+ GROUPS_POINTS_DIVISOR = 2;
37
+ GROUPS_STACKED_POINTS_DIVISOR = Math.round(GROUPS_POINTS_DIVISOR * 1.5);
38
+ MAINCHART_POINTS_DIVISOR = 2;
39
+ MAINCHART_STACKED_POINTS_DIVISOR = Math.round(MAINCHART_POINTS_DIVISOR * 1.5);
40
+ ENABLE_CURVE = 1;
41
+ CHARTS_REFRESH_LOOP = 50;
42
+ CHARTS_SCROLL_IDLE = 50;
43
+ resize_request = true;
44
+ if(ui) $('#presentation_normal').trigger('click');
45
+ playGraphs();
46
+}
47
+function setPresentationSpeedy(ui) {
48
+ THUMBS_POINTS_DIVISOR = 10;
49
+ THUMBS_STACKED_POINTS_DIVISOR = Math.round(THUMBS_POINTS_DIVISOR * 1.5);
50
+ GROUPS_POINTS_DIVISOR = 8;
51
+ GROUPS_STACKED_POINTS_DIVISOR = Math.round(GROUPS_POINTS_DIVISOR * 1.5);
52
+ MAINCHART_POINTS_DIVISOR = 5;
53
+ MAINCHART_STACKED_POINTS_DIVISOR = Math.round(MAINCHART_POINTS_DIVISOR * 1.5);
54
+ ENABLE_CURVE = 0;
55
+ CHARTS_REFRESH_LOOP = 50;
56
+ CHARTS_SCROLL_IDLE = 100;
57
+ resize_request = true;
58
+ if(ui) $('#presentation_speedy').trigger('click');
59
+ playGraphs();
60
+}
61
+function setPresentationDetailed(ui) {
62
+ THUMBS_POINTS_DIVISOR = 1;
63
+ THUMBS_STACKED_POINTS_DIVISOR = 1;
64
+ GROUPS_POINTS_DIVISOR = 1;
65
+ GROUPS_STACKED_POINTS_DIVISOR = 1;
66
+ MAINCHART_POINTS_DIVISOR = 1;
67
+ MAINCHART_STACKED_POINTS_DIVISOR = 1;
68
+ ENABLE_CURVE = 1;
69
+ CHARTS_REFRESH_LOOP = 50;
70
+ CHARTS_SCROLL_IDLE = 50;
71
+ resize_request = true;
72
+ if(ui) $('#presentation_detailed').trigger('click');
73
+ playGraphs();
74
+}
75
76
function isIE() {
77
userAgent = navigator.userAgent;
@@ -64,7 +110,7 @@ function thumbChartActions(i, c, nogroup) {
110
if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
111
else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
112
67
- var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" title=\"" + refinfo + "\">"
113
+ var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"" + refinfo + "\">"
114
+ "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
115
+ "</div>"
116
+ "<div class=\"btn-group btn-group\"><button type=\"button\" class=\"btn btn-default disabled\"><small> " + name + "</small></button>";
@@ -83,12 +129,12 @@ function thumbChartActions(i, c, nogroup) {
129
var hidden = "";
130
if(ingroup_detail) hidden = ", including " + ingroup_detail + " charts not shown now";
131
86
- html += "<button type=\"button\" data-toggle=\"tooltip\" 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>";
132
+ 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>";
133
}
134
89
- html += "<button type=\"button\" data-toggle=\"tooltip\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
90
- + "<button type=\"button\" data-toggle=\"tooltip\" title=\"set options for chart '" + c.name + "'\" class=\"btn btn-default disabled\" onclick=\"alert('Not implemented yet!');\"><span class=\"glyphicon glyphicon-cog\"></span></button>"
91
- + "<button type=\"button\" data-toggle=\"tooltip\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
135
+ 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>"
136
+ + "<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>"
137
+ + "<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>"
138
+ "</div>";
139
140
return html;
@@ -101,12 +147,12 @@ function groupChartActions(i, c) {
147
if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
148
else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
149
104
- var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" title=\"" + refinfo + "\">"
150
+ var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"" + refinfo + "\">"
151
+ "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
152
+ "</div>";
153
108
- html += "<button type=\"button\" data-toggle=\"tooltip\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
109
- + "<button type=\"button\" data-toggle=\"tooltip\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
154
+ 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>"
155
+ + "<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>"
156
+ "</div>";
157
158
return html;
@@ -152,7 +198,7 @@ function initMainChart(c) {
198
mainchart.div = 'maingraph';
199
mainchart.max_time_to_show = (mainchart.last_entry_t - mainchart.first_entry_t) / ( MAINCHART_INITIAL_SELECTOR * mainchart.update_every );
200
if(mainchart.max_time_to_show < MAINCHART_MIN_TIME_TO_SHOW) mainchart.max_time_to_show = MAINCHART_MIN_TIME_TO_SHOW;
155
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0);
201
+ calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE);
202
203
// copy it to the hidden chart
204
mainchart.hiddenchart = $.extend(true, {}, mainchart);
@@ -239,7 +285,7 @@ function refreshHiddenChart(doNext) {
285
286
// load the data for the control and the hidden wrappers
287
// calculate the group and points to show for the control chart
242
- calculateChartPointsToShow(mainchart.hiddenchart, MAINCHART_CONTROL_DIVISOR, 0, -1);
288
+ calculateChartPointsToShow(mainchart.hiddenchart, MAINCHART_CONTROL_DIVISOR, 0, -1, ENABLE_CURVE);
289
290
$.ajax({
291
url: generateChartURL(mainchart.hiddenchart),
@@ -293,7 +339,7 @@ function mainchartControlStateHandler() {
339
mainchart.after = Math.round(state.range.start.getTime() / 1000);
340
mainchart.before = Math.round(state.range.end.getTime() / 1000);
341
296
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, 0, 0);
342
+ calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.before - mainchart.after, 0, ENABLE_CURVE);
343
//mylog('group = ' + mainchart.group + ', points_to_show = ' + mainchart.points_to_show + ', dt = ' + (mainchart.before - mainchart.after));
344
345
$('#group' + mainchart.group).trigger('click');
@@ -353,9 +399,9 @@ function setMainChartGroup(g, norefresh) {
399
mainchart.group = g;
400
401
if(!mainchart.before && !mainchart.after)
356
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, mainchart.group);
402
+ calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, mainchart.group, ENABLE_CURVE);
403
else
358
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, 0, mainchart.group);
404
+ calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, 0, mainchart.group, ENABLE_CURVE);
405
406
if(!norefresh) {
407
mainchart.last_updated = 0;
@@ -394,7 +440,7 @@ function setMainChartPlay(p) {
440
//mainchart.chartOptions.explorer = null;
441
mainchart.after = 0;
442
mainchart.before = 0;
397
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0);
443
+ calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE);
444
$('#group' + mainchart.group).trigger('click');
445
mainchart.last_updated = 0;
446
mainchart.hiddenchart.last_updated = 0;
@@ -487,11 +533,12 @@ function resizeCharts() {
533
534
width = thumbWidth();
535
$.each(allCharts, function(i, c) {
490
- if(c.enabled && c.chartOptions.width != width) {
536
+ if(c.enabled) {
537
cleanThisChart(c);
538
c.chartOptions.width = width;
493
- calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1);
539
+ calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
540
showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height);
541
+ document.getElementById(c.id + '_thumb_actions_div').innerHTML = thumbChartActions(i, c);
542
c.last_updated = 0;
543
}
544
});
@@ -499,18 +546,20 @@ function resizeCharts() {
546
if(groupCharts) $.each(groupCharts, function(i, c) {
547
var sizes = groupChartSizes();
548
502
- if(c.enabled && (c.chartOptions.width != sizes.width || c.chartOptions.height != sizes.height)) {
549
+ if(c.enabled) {
550
cleanThisChart(c);
551
c.chartOptions.width = sizes.width;
552
c.chartOptions.height = sizes.height;
506
- calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1);
553
+ calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
554
showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height);
555
+ document.getElementById(c.id + '_group_actions_div').innerHTML = groupChartActions(i, c);
556
c.last_updated = 0;
557
}
558
});
559
+
560
+ updateUI();
561
}
562
513
-var resize_request = false;
563
window.onresize = function(event) {
564
resize_request = true;
565
};
@@ -806,33 +855,31 @@ function cleanupCharts() {
855
}
856
857
// cleanup the disabled charts
809
- if(mode == MODE_THUMBS)
810
- $.each(allCharts, function(i, c) {
811
- if(c.disablethisplease && c.enabled) {
812
- cleanThisChart(c, 'emptydivs');
813
- c.disablethisplease = false;
814
- c.enabled = false;
815
- resize_request = true;
816
- mylog("removed thumb chart " + c.name + " removed");
817
- }
818
- });
858
+ $.each(allCharts, function(i, c) {
859
+ if(c.disablethisplease && c.enabled) {
860
+ cleanThisChart(c, 'emptydivs');
861
+ c.disablethisplease = false;
862
+ c.enabled = false;
863
+ resize_request = true;
864
+ mylog("removed thumb chart " + c.name + " removed");
865
+ }
866
+ });
867
820
- if(mode == MODE_GROUP_THUMBS)
821
- if(groupCharts) $.each(groupCharts, function(i, c) {
822
- if(c.disablethisplease && c.enabled) {
823
- cleanThisChart(c, 'emptydivs');
824
- c.disablethisplease = false;
825
- c.enabled = false;
826
- resize_request = true;
827
- mylog("removed group chart " + c.name + " removed");
828
- }
829
- });
868
+ if(groupCharts) $.each(groupCharts, function(i, c) {
869
+ if(c.disablethisplease && c.enabled) {
870
+ cleanThisChart(c, 'emptydivs');
871
+ c.disablethisplease = false;
872
+ c.enabled = false;
873
+ resize_request = true;
874
+ mylog("removed group chart " + c.name + " removed");
875
+ }
876
+ });
877
878
// we never cleanup the main chart
879
}
880
881
function updateUI() {
835
- $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body', 'html': true});
882
+ $('[data-toggle="tooltip"]').tooltip({'container': 'body', 'html': true});
883
884
$('[data-spy="scroll"]').each(function () {
885
var $spy = $(this).scrollspy('refresh')
@@ -942,9 +989,9 @@ function initGroupGraphs(group) {
989
c.chartOptions.tooltip = { "textStyle": { "fontSize": 9 } };
990
c.chartOptions.legend = { "textStyle": { "fontSize": 9 } };
991
945
- calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1);
992
+ calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
993
947
- groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td width='" + sizes.width + "'><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td><td align=\"center\">" + groupChartActions(i, c) + "</td></tr><tr><td width='15'></td></tr></table></div>";
994
+ groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td width='" + sizes.width + "'><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td><td id=\"" + c.id + "_group_actions_div\" align=\"center\">" + groupChartActions(i, c) + "</td></tr><tr><td width='15'></td></tr></table></div>";
995
//groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div>";
996
});
997
groupbody += "";
@@ -975,6 +1022,8 @@ var last_user_scroll = 0;
1022
// load the charts from the server
1023
// generate html for the thumbgraphs to support them
1024
function initCharts() {
1025
+ setPresentationNormal(1);
1026
+
1027
var width = thumbWidth();
1028
var height = TARGET_THUMB_GRAPH_HEIGHT;
1029
@@ -1020,10 +1069,10 @@ function initCharts() {
1069
//c.points_to_show = Math.round(c.entries / c.group) - 1;
1070
// show max 10 mins of data
1071
//if(c.points_to_show * c.group > THUMBS_MAX_TIME_TO_SHOW) c.points_to_show = THUMBS_MAX_TIME_TO_SHOW / c.group;
1023
- calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1);
1072
+ calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
1073
1074
if(c.enabled) {
1026
- var h = "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\">"
1075
+ var h = "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td id=\"" + c.id + "_thumb_actions_div\" align=\"center\">"
1076
+ thumbChartActions(i, c)
1077
+ "</td></tr><tr><td height='15'></td></tr></table></div>";
1078
web/netdata.js
+73
-34
@@ -123,7 +123,7 @@ function showChartIsLoading(id, name, width, height, message) {
123
// if undefined or negative, any calculated value will be used
124
// if zero, one of 1,2,5,10,15,20,30,45,60 will be used
125
126
-function calculateChartPointsToShow(c, divisor, maxtime, group) {
126
+function calculateChartPointsToShow(c, divisor, maxtime, group, enable_curve) {
127
// console.log('calculateChartPointsToShow( c = ' + c.id + ', divisor = ' + divisor + ', maxtime = ' + maxtime + ', group = ' + group + ' )');
128
129
if(!divisor) divisor = 2;
@@ -136,43 +136,47 @@ function calculateChartPointsToShow(c, divisor, maxtime, group) {
136
137
// console.log('chart ' + c.id + ' internal duration is ' + dt + ' secs, requested maxtime is ' + maxtime + ' secs');
138
139
- if(maxtime) dt = maxtime;
139
+ if(!maxtime) maxtime = c.entries * c.update_every;
140
+ dt = maxtime;
141
142
var data_points = Math.round(dt / c.update_every);
143
+ if(!data_points) data_points = 100;
144
+
145
var screen_points = Math.round(c.chartOptions.width / divisor);
143
- // console.log('screen = ' + screen_points + ', data = ' + data_points + ', divisor = ' + divisor);
146
+ if(!screen_points) screen_points = 100;
147
+
148
+ // console.log('screen_points = ' + screen_points + ', data_points = ' + data_points + ', divisor = ' + divisor);
149
150
if(group == undefined || group <= 0) {
151
if(screen_points > data_points) {
152
c.group = 1;
153
c.points_to_show = data_points;
149
- // console.log("rendering at full detail");
154
+ // console.log("rendering at full detail (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
155
}
156
else {
157
c.group = Math.round(data_points / screen_points);
158
154
- if(group != undefined && group >= 0) {
155
- if(c.group > 60) c.group = 60;
156
- else if(c.group > 45) c.group = 45;
157
- else if(c.group > 30) c.group = 30;
158
- else if(c.group > 20) c.group = 20;
159
- else if(c.group > 15) c.group = 15;
160
- else if(c.group > 10) c.group = 10;
161
- else if(c.group > 5) c.group = 5;
162
- else if(c.group > 2) c.group = 2;
163
- else c.group = 1;
164
- }
159
+ if(c.group > 45) c.group = 60;
160
+ else if(c.group > 30) c.group = 45;
161
+ else if(c.group > 20) c.group = 30;
162
+ else if(c.group > 15) c.group = 20;
163
+ else if(c.group > 10) c.group = 15;
164
+ else if(c.group > 5) c.group = 10;
165
+ else if(c.group > 2) c.group = 5;
166
+ else if(c.group > 1) c.group = 2;
167
+ else c.group = 1;
168
169
c.points_to_show = Math.round(data_points / c.group);
167
- //console.log("rendering adaptive");
170
+ // console.log("rendering adaptive (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
171
}
172
}
173
else {
174
c.group = group;
175
c.points_to_show = Math.round(data_points / group);
173
- //console.log("rendering with given group");
176
+ // console.log("rendering with supplied group (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
177
}
175
- // console.log('group = ' + c.group + ', points = ' + c.points_to_show);
178
+
179
+ // console.log("final configuration (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
180
181
// make sure the line width is not congesting the chart
182
if(c.chartType == 'LineChart') {
@@ -193,19 +197,14 @@ function calculateChartPointsToShow(c, divisor, maxtime, group) {
197
198
// do not render curves when we don't have at
199
// least 2 twice the space per point
196
- if(c.points_to_show > (c.chartOptions.width * c.chartOptions.lineWidth / 2) )
200
+ if(!enable_curve || c.points_to_show > (c.chartOptions.width * c.chartOptions.lineWidth / 2) )
201
c.chartOptions.curveType = 'none';
202
else
203
c.chartOptions.curveType = c.default_curveType;
204
201
- c.chartOptions.hAxis.gridlines = { "color": '#EEE' };
202
- c.chartOptions.vAxis.gridlines = { "color": '#EEE' };
203
-
204
- if(maxtime) {
205
- var hpoints = Math.round(maxtime / 30);
206
- if(hpoints > 10) hpoints = 10;
207
- c.chartOptions.hAxis.gridlines.count = hpoints;
208
- }
205
+ var hpoints = Math.round(maxtime / 30);
206
+ if(hpoints > 10) hpoints = 10;
207
+ c.chartOptions.hAxis.gridlines.count = hpoints;
208
}
209
210
@@ -252,15 +251,55 @@ function loadCharts(base_url, doNext) {
251
height: 200,
252
lineWidth: 1,
253
title: json.charts[i].title,
255
- // hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
254
fontSize: 11,
257
- hAxis: {viewWindowMode: 'maximized', slantedText: false, format:'HH:mm:ss', textStyle: { fontSize: 9 } },
258
- vAxis: {title: json.charts[i].units, viewWindowMode: 'pretty', minValue: -0.1, maxValue: 0.1, textStyle: { fontSize: 9 } },
259
- chartArea : {width: '65%', height: '80%'},
255
+ hAxis: {
256
+ // title: "Time of Day",
257
+ // format:'HH:mm:ss',
258
+ viewWindowMode: 'maximized',
259
+ slantedText: false,
260
+ format:'HH:mm:ss',
261
+ textStyle: {
262
+ fontSize: 9
263
+ },
264
+ gridlines: {
265
+ color: '#EEE'
266
+ }
267
+ },
268
+ vAxis: {
269
+ title: json.charts[i].units,
270
+ viewWindowMode: 'pretty',
271
+ minValue: -0.1,
272
+ maxValue: 0.1,
273
+ direction: 1,
274
+ textStyle: {
275
+ fontSize: 9
276
+ },
277
+ gridlines: {
278
+ color: '#EEE'
279
+ }
280
+ },
281
+ chartArea: {
282
+ width: '65%',
283
+ height: '80%'
284
+ },
285
focusTarget: 'category',
261
- annotation: {'1': {style: 'line'}},
262
- //colors: ['blue', 'red', 'green', 'lime', 'olive', 'yellow', 'navy', 'fuchsia', 'maroon', 'aqua', 'teal', 'purple', 'black', 'gray', 'silver'],
263
- //tooltip: {isHtml: true},
286
+ annotation: {
287
+ '1': {
288
+ style: 'line'
289
+ }
290
+ },
291
+ pointsVisible: 0,
292
+ titlePosition: 'out',
293
+ titleTextStyle: {
294
+ fontSize: 11
295
+ },
296
+ tooltip: {
297
+ isHtml: true,
298
+ ignoreBounds: true,
299
+ textStyle: {
300
+ fontSize: 9
301
+ }
302
+ }
303
};
304
305
json.charts[i].default_curveType = 'none';
web/theme.css
+30
@@ -55,3 +55,33 @@ body {
55
overflow-x: hidden;
56
}
57
58
+.google-visualization-tooltip-action: hover {
59
+ background-color: #eeeeee;
60
+}
61
+.google-visualization-tooltip {
62
+ border: solid 1px #bdbdbd;
63
+ border-radius: 2px;
64
+ background-color: white;
65
+ box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
66
+ font-size: 9px;
67
+ -moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
68
+ -webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
69
+ position: absolute;
70
+ z-index: 1000;
71
+ line-height: 90% !important;
72
+ margin: 0 0 0 0 !important;
73
+ padding: 0.5em 0.1em 0.5em 0.1em !important;
74
+ width: 180px !important;
75
+}
76
+.google-visualization-tooltip-item-list {
77
+ list-style-type: none;
78
+ margin: 0 0 0 0 !important;
79
+ padding: 0 0 0 0 !important;
80
+}
81
+.google-visualization-tooltip-item {
82
+ margin: 0 0 0 0 !important;
83
+}
84
+.google-visualization-tooltip-item-list
85
+.google-visualization-tooltip-item:first-child {
86
+ margin: 0 0 0 0 !important;
87
+}