various optimizations; group mode now shows a better view of the charts
Costa Tsaousis (ktsaou) committed
Nov 22, 2015 at 01:19 UTC
6f261461a92c2f6c907692924895b3815e95ab1f
3 files changed
+190
-114
web/index.html
+8
@@ -29,6 +29,14 @@
29
</button>
30
<a class="navbar-brand" href="/" id="hostname_id">NetData</a>
31
</div>
32
+ <form class="navbar-form navbar-right">
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">
37
+ <span class="glyphicon glyphicon-pause"></span> Pause
38
+ </button>
39
+ </form>
40
<div class="collapse navbar-collapse" id="main_menu_div">
41
<ul class="nav navbar-nav">
42
<li><a href="#">preparing charts...</a></li>
web/index.js
+159
-101
@@ -2,13 +2,14 @@ var page_is_visible = 1;
2
3
var TARGET_THUMB_GRAPH_WIDTH = 500; // thumb charts width will range from 0.5 to 1.5 of that
4
var MINIMUM_THUMB_GRAPH_WIDTH = 400; // thumb chart will generally try to be wider than that
5
-var TARGET_THUMB_GRAPH_HEIGHT = 180; // the height of the thumb charts
5
+var TARGET_THUMB_GRAPH_HEIGHT = 160; // the height of the thumb charts
6
+var TARGET_GROUP_GRAPH_HEIGHT = 120;
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;
11
11
-var GROUPS_MAX_TIME_TO_SHOW = 120; // how much time the group charts will present?
12
+var GROUPS_MAX_TIME_TO_SHOW = 360; // how much time the group charts will present?
13
var GROUPS_POINTS_DIVISOR = 2;
14
var GROUPS_STACKED_POINTS_DIVISOR = 2;
15
@@ -42,7 +43,7 @@ var MODE_MAIN = 2;
43
var MODE_GROUP_THUMBS = 3;
44
var mode; // one of the MODE_* values
45
45
-var mycharts = new Array();
46
+var allCharts = new Array();
47
var mainchart;
48
49
// html for the main menu
@@ -72,7 +73,7 @@ function thumbChartActions(i, c, nogroup) {
73
var ingroup = 0;
74
var ingroup_detail = 0;
75
75
- $.each(mycharts, function(i, d) {
76
+ $.each(allCharts, function(i, d) {
77
if(d.family == c.family) {
78
ingroup++;
79
if(d.isdetail) ingroup_detail++;
@@ -93,6 +94,24 @@ function thumbChartActions(i, c, nogroup) {
94
return html;
95
}
96
97
+function groupChartActions(i, c) {
98
+ var name = c.name;
99
+
100
+ var refinfo = "the chart is drawing ";
101
+ if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
102
+ else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
103
+
104
+ var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" title=\"" + refinfo + "\">"
105
+ + "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
106
+ + "</div>";
107
+
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>"
110
+ + "</div>";
111
+
112
+ return html;
113
+}
114
+
115
function mylog(txt) {
116
console.log(txt);
117
$('#logline').html(txt);
@@ -131,7 +150,7 @@ function initMainChart(c) {
150
if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
151
152
mainchart.div = 'maingraph';
134
- mainchart.max_time_to_show = (mainchart.last_entry_t - mainchart.first_entry_t) / MAINCHART_INITIAL_SELECTOR;
153
+ mainchart.max_time_to_show = (mainchart.last_entry_t - mainchart.first_entry_t) / ( MAINCHART_INITIAL_SELECTOR * mainchart.update_every );
154
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);
156
@@ -185,8 +204,8 @@ function refreshHiddenChart(doNext) {
204
lineWidth: 1,
205
height: mainchart.hiddenchart.chartOptions.height,
206
chartArea: {'width': '98%'},
188
- hAxis: {'baselineColor': 'none', viewWindowMode: 'maximized'},
189
- vAxis: {'title': null},
207
+ hAxis: {'baselineColor': 'none', viewWindowMode: 'maximized', gridlines: { count: 0 } },
208
+ vAxis: {'title': null, gridlines: { count: 0 } },
209
});
210
211
mainchart.dashboard = new google.visualization.Dashboard(document.getElementById('maingraph_dashboard'));
@@ -285,17 +304,17 @@ function mainchartControlStateHandler() {
304
305
function initMainChartIndex(i) {
306
if(mode == MODE_GROUP_THUMBS)
288
- initMainChart(group_charts[i]);
307
+ initMainChart(groupCharts[i]);
308
309
else if(mode == MODE_THUMBS)
291
- initMainChart(mycharts[i]);
310
+ initMainChart(allCharts[i]);
311
312
else
294
- initMainChart(mycharts[i]);
313
+ initMainChart(allCharts[i]);
314
}
315
316
function initMainChartIndexOfMyCharts(i) {
298
- initMainChart(mycharts[i]);
317
+ initMainChart(allCharts[i]);
318
}
319
320
var last_main_chart_max='normal';
@@ -393,6 +412,21 @@ function setMainChartPlay(p) {
412
}
413
}
414
415
+function buttonGlobalPlayPause(p) {
416
+ if(mode == MODE_MAIN) {
417
+ setMainChartPlay(p);
418
+ return;
419
+ }
420
+
421
+ if(p == 'toggle') {
422
+ if(refresh_mode != REFRESH_ALWAYS) p = 'play';
423
+ else p = 'pause';
424
+ }
425
+
426
+ if(p == 'play') playGraphs();
427
+ else pauseGraphs();
428
+}
429
+
430
431
// ------------------------------------------------------------------------
432
// Chart resizing
@@ -413,28 +447,24 @@ function thumbWidth() {
447
}
448
449
function groupChartSizes() {
416
- var s = { width: screenWidth() / 2, height: ($(window).height() - 130) / 3 - 10};
417
- if(s.width < MINIMUM_THUMB_GRAPH_WIDTH * 1.5) s.width = screenWidth();
450
+ var s = { width: screenWidth(), height: TARGET_GROUP_GRAPH_HEIGHT };
451
452
var count = 0;
420
- if(group_charts) $.each(group_charts, function(i, c) {
453
+ if(groupCharts) $.each(groupCharts, function(i, c) {
454
if(c.enabled) count++;
455
});
456
457
if(count == 0) {
425
- s.width = TARGET_THUMB_GRAPH_WIDTH;
426
- s.height = TARGET_THUMB_GRAPH_HEIGHT;
458
+ s.width = TARGET_GROUP_GRAPH_HEIGHT;
459
+ s.height = TARGET_GROUP_GRAPH_HEIGHT;
460
}
428
- if(count < 4) {
429
- s.width = screenWidth();
461
+ else {
462
+ if(s.width < MINIMUM_THUMB_GRAPH_WIDTH) s.width = screenWidth();
463
s.height = ($(window).height() - 130) / count - 10;
464
}
432
- else if(count == 4) {
433
- s.height = ($(window).height() - 130) / 2 - 10;
434
- }
465
436
- if(s.height < TARGET_THUMB_GRAPH_HEIGHT * 1.5)
437
- s.height = TARGET_THUMB_GRAPH_HEIGHT * 1.5;
466
+ if(s.height < TARGET_GROUP_GRAPH_HEIGHT)
467
+ s.height = TARGET_GROUP_GRAPH_HEIGHT;
468
469
return s;
470
}
@@ -456,7 +486,7 @@ function resizeCharts() {
486
}
487
488
width = thumbWidth();
459
- $.each(mycharts, function(i, c) {
489
+ $.each(allCharts, function(i, c) {
490
if(c.enabled && c.chartOptions.width != width) {
491
cleanThisChart(c);
492
c.chartOptions.width = width;
@@ -466,7 +496,7 @@ function resizeCharts() {
496
}
497
});
498
469
- if(group_charts) $.each(group_charts, function(i, c) {
499
+ if(groupCharts) $.each(groupCharts, function(i, c) {
500
var sizes = groupChartSizes();
501
502
if(c.enabled && (c.chartOptions.width != sizes.width || c.chartOptions.height != sizes.height)) {
@@ -495,27 +525,30 @@ var REFRESH_ALWAYS = 1;
525
var refresh_mode = REFRESH_PAUSED;
526
var last_refresh = 0;
527
function playGraphs() {
528
+ mylog('playGraphs()');
529
if(refresh_mode == REFRESH_ALWAYS) return;
530
531
//mylog('PlayGraphs()');
532
refresh_mode = REFRESH_ALWAYS;
533
$('.mainchart_play_button').button('play');
534
+ $('.global_play_button').button('play');
535
536
// check if the thread died due to a javascript error
537
var now = new Date().getTime();
538
if((now - last_refresh) > 60000) {
539
// it died or never started
540
//mylog('It seems the refresh thread died. Restarting it.');
509
- chartsRefresh();
541
+ renderChartCallback();
542
}
543
}
544
545
function pauseGraphs() {
546
+ mylog('pauseGraphs()');
547
if(refresh_mode == REFRESH_PAUSED) return;
548
516
- //mylog('PauseGraphs()');
549
refresh_mode = REFRESH_PAUSED;
550
$('.mainchart_play_button').button('pause');
551
+ $('.global_play_button').button('pause');
552
}
553
554
var interval = null;
@@ -528,7 +561,7 @@ function checkRefreshThread() {
561
var now = new Date().getTime();
562
if(now - last_refresh > 60000) {
563
mylog('Refresh thread died. Restarting it.');
531
- chartsRefresh();
564
+ renderChartCallback();
565
}
566
}
567
@@ -536,7 +569,7 @@ function checkRefreshThread() {
569
// this is an internal function.
570
// never call it directly, or new javascript threads will be spawn
571
var timeout = null;
539
-function chartsRefresh() {
572
+function renderChartCallback() {
573
last_refresh = new Date().getTime();
574
575
if(!page_is_visible) {
@@ -545,6 +578,8 @@ function chartsRefresh() {
578
}
579
580
if(resize_request) {
581
+ mylog('renderChartCallback() resize_request is set');
582
+ cleanupCharts();
583
resizeCharts();
584
resize_request = false;
585
// refresh_mode = REFRESH_ALWAYS;
@@ -568,10 +603,15 @@ function chartsRefresh() {
603
mainChartRefresh();
604
return;
605
}
606
+
607
+ if(mode != MODE_MAIN) {
608
+ timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
609
+ return;
610
+ }
611
}
612
573
- if(mode == MODE_THUMBS) timeout = setTimeout(thumbChartsRefresh, CHARTS_REFRESH_LOOP);
574
- else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(groupChartsRefresh, CHARTS_REFRESH_LOOP);
613
+ if(mode == MODE_THUMBS) timeout = setTimeout(thumbChartsRefreshNext, CHARTS_REFRESH_LOOP);
614
+ else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(groupChartsRefreshNext, CHARTS_REFRESH_LOOP);
615
else if(mode == MODE_MAIN) timeout = setTimeout(mainChartRefresh, CHARTS_REFRESH_LOOP);
616
else timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
617
}
@@ -582,14 +622,15 @@ function chartsRefresh() {
622
function triggerRefresh() {
623
//mylog('triggerRefresh()');
624
585
- // cleanup has to take place when the charts are not refreshed
586
- // since the refreshing thread is in this function, it means
587
- // nothing is being refreshed.
588
- cleanupCharts();
625
+ if(!page_is_visible || (refresh_mode == REFRESH_PAUSED && mode != MODE_MAIN)) {
626
+ last_refresh = new Date().getTime();
627
+ timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
628
+ return;
629
+ }
630
590
- if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, CHARTS_REFRESH_IDLE);
591
- else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(chartsRefresh, CHARTS_REFRESH_IDLE);
592
- else if(mode == MODE_MAIN) timeout = setTimeout(chartsRefresh, CHARTS_REFRESH_IDLE);
631
+ if(mode == MODE_THUMBS) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE);
632
+ else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE);
633
+ else if(mode == MODE_MAIN) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE);
634
else timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
635
}
636
@@ -616,7 +657,7 @@ function hiddenChartRefresh() {
657
refreshHiddenChart(triggerRefresh);
658
}
659
619
-function roundRobinRefresh(charts, startat) {
660
+function roundRobinRenderChart(charts, startat) {
661
var refreshed = false;
662
663
// find a chart to refresh
@@ -628,7 +669,7 @@ function roundRobinRefresh(charts, startat) {
669
if(cur >= all) cur = 0;
670
671
if(charts[cur].enabled) {
631
- refreshed = renderChart(charts[cur], chartsRefresh);
672
+ refreshed = renderChart(charts[cur], renderChartCallback);
673
if(refreshed) {
674
mylog('Refreshed: ' + charts[cur].name);
675
break;
@@ -643,30 +684,30 @@ function roundRobinRefresh(charts, startat) {
684
// refresh the thumb charts
685
// make sure we don't loose the refreshing thread
686
var last_thumb_updated = 0;
646
-function thumbChartsRefresh() {
647
- //mylog('thumbChartsRefresh()');
687
+function thumbChartsRefreshNext() {
688
+ //mylog('thumbChartsRefreshNext()');
689
649
- if(mycharts.length == 0 || mode != MODE_THUMBS) {
690
+ if(allCharts.length == 0 || mode != MODE_THUMBS) {
691
triggerRefresh();
692
return;
693
}
694
654
- last_thumb_updated = roundRobinRefresh(mycharts, last_thumb_updated);
695
+ last_thumb_updated = roundRobinRenderChart(allCharts, last_thumb_updated);
696
}
697
698
// refresh the group charts
699
// make sure we don't loose the refreshing thread
700
var last_group_updated = 0;
660
-function groupChartsRefresh() {
661
- //mylog('groupChartsRefresh()');
701
+function groupChartsRefreshNext() {
702
+ //mylog('groupChartsRefreshNext()');
703
663
- if(!group_charts || group_charts.length == 0 || mode != MODE_GROUP_THUMBS) {
704
+ if(!groupCharts || groupCharts.length == 0 || mode != MODE_GROUP_THUMBS) {
705
//mylog('cannot refresh charts');
706
triggerRefresh();
707
return;
708
}
709
669
- last_group_updated = roundRobinRefresh(group_charts, last_group_updated);
710
+ last_group_updated = roundRobinRenderChart(groupCharts, last_group_updated);
711
}
712
713
@@ -675,24 +716,24 @@ function groupChartsRefresh() {
716
// these should be called only from initXXXX()
717
718
function disableChart(i) {
678
- //mylog('disableChart(' + i + ')');
719
+ mylog('disableChart(' + i + ')');
720
721
var chart = null;
722
723
var count = 0;
683
- if(mode == MODE_GROUP_THUMBS && group_charts) {
684
- $.each(group_charts, function(i, c) {
724
+ if(mode == MODE_GROUP_THUMBS && groupCharts) {
725
+ $.each(groupCharts, function(i, c) {
726
if(c.enabled) count++;
727
});
728
688
- if(i < group_charts.length) chart = group_charts[i];
729
+ if(i < groupCharts.length) chart = groupCharts[i];
730
}
731
else if(mode == MODE_THUMBS) {
691
- $.each(mycharts, function(i, c) {
732
+ $.each(allCharts, function(i, c) {
733
if(c.enabled) count++;
734
});
735
695
- if(i < mycharts.length) chart = mycharts[i];
736
+ if(i < allCharts.length) chart = allCharts[i];
737
}
738
739
if(!chart) return;
@@ -703,9 +744,12 @@ function disableChart(i) {
744
}
745
746
if(chart) {
706
- //mylog("disabling chart " + chart.name);
747
+ mylog("request to disable chart " + chart.name);
748
chart.disablethisplease = true;
749
+ resize_request = true;
750
}
751
+ else
752
+ mylog("no chart to disable");
753
}
754
755
function cleanThisChart(chart, emptydivs) {
@@ -750,39 +794,41 @@ function cleanThisChart(chart, emptydivs) {
794
795
// cleanup the previously shown charts
796
function cleanupCharts() {
753
- //mylog('cleanupCharts()');
797
+ // mylog('cleanupCharts()');
798
799
if(mode != MODE_MAIN && mainchart) {
800
if(mainchart.chart) cleanThisChart(mainchart);
801
mainchart = null;
802
}
803
760
- if(mode != MODE_GROUP_THUMBS && group_charts) {
804
+ if(mode != MODE_GROUP_THUMBS && groupCharts) {
805
clearGroupGraphs();
806
}
807
808
// cleanup the disabled charts
765
- $.each(mycharts, function(i, c) {
766
- if(c.disablethisplease && c.enabled) {
767
- cleanThisChart(c, 'emptydivs');
768
- c.disablethisplease = false;
769
- c.enabled = false;
770
- resize_request = true;
771
- //mylog("disabled chart " + c.name + " removed");
772
- }
773
- });
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
+ });
819
775
- if(group_charts) $.each(group_charts, function(i, c) {
776
- if(c.disablethisplease && c.enabled) {
777
- cleanThisChart(c, 'emptydivs');
778
- c.disablethisplease = false;
779
- c.enabled = false;
780
- resize_request = true;
781
- //mylog("disabled chart " + c.name + " removed");
782
- }
783
- });
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
+ });
830
785
- // we never cleanup the thumb charts
831
+ // we never cleanup the main chart
832
}
833
834
function updateUI() {
@@ -799,14 +845,14 @@ function switchToMainGraph() {
845
846
if(!mainchart) return;
847
802
- if(!group_charts) thumbsScrollPosition = window.pageYOffset;
848
+ if(!groupCharts) thumbsScrollPosition = window.pageYOffset;
849
850
document.getElementById('maingraph_container').style.display = 'block';
851
document.getElementById('thumbgraphs_container').style.display = 'none';
852
document.getElementById('groupgraphs_container').style.display = 'none';
853
document.getElementById('splash_container').style.display = 'none';
854
809
- document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Dashboard</a></li><li class=\"active\"><a href=\"#\">" + mainchart.name + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";
855
+ document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Dashboard</a></li><li class=\"active\"><a href=\"#\">" + mainchart.name + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>" ;
856
857
window.scrollTo(0, 0);
858
@@ -836,7 +882,7 @@ function switchToThumbGraphs() {
882
function switchToGroupGraphs() {
883
//mylog('switchToGroupGraphs()');
884
839
- if(!group_charts) return;
885
+ if(!groupCharts) return;
886
887
if(!mainchart) thumbsScrollPosition = window.pageYOffset;
888
@@ -845,7 +891,7 @@ function switchToGroupGraphs() {
891
document.getElementById('groupgraphs_container').style.display = 'block';
892
document.getElementById('splash_container').style.display = 'none';
893
848
- document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Dashboard</a></li><li class=\"active\"><a href=\"#\">" + group_charts[0].family + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";
894
+ document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Dashboard</a></li><li class=\"active\"><a href=\"#\">" + groupCharts[0].family + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";
895
896
window.scrollTo(0, 0);
897
@@ -858,37 +904,49 @@ function switchToGroupGraphs() {
904
// ------------------------------------------------------------------------
905
// Group Charts
906
861
-var group_charts = null;
907
+var groupCharts = null;
908
function initGroupGraphs(group) {
909
var count = 0;
910
865
- if(group_charts) clearGroupGraphs();
866
- group_charts = new Array();
911
+ if(groupCharts) clearGroupGraphs();
912
+ groupCharts = new Array();
913
914
var groupbody = "";
869
- $.each(mycharts, function(i, c) {
915
+ $.each(allCharts, function(i, c) {
916
if(c.family == group) {
871
- group_charts[count] = [];
872
- group_charts[count] = $.extend(true, {}, c);
873
- group_charts[count].div += "_group";
874
- group_charts[count].enabled = true;
875
- group_charts[count].chart = null;
876
- group_charts[count].last_updated = 0;
917
+ groupCharts[count] = [];
918
+ groupCharts[count] = $.extend(true, {}, c);
919
+ groupCharts[count].div += "_group";
920
+ groupCharts[count].enabled = true;
921
+ groupCharts[count].chart = null;
922
+ groupCharts[count].last_updated = 0;
923
count++;
924
}
925
});
880
- group_charts.sort(chartssort);
926
+ groupCharts.sort(chartssort);
927
928
var sizes = groupChartSizes();
929
930
var groupbody = "";
885
- $.each(group_charts, function(i, c) {
931
+ $.each(groupCharts, function(i, c) {
932
c.chartOptions.width = sizes.width;
933
c.chartOptions.height = sizes.height;
934
+ c.chartOptions.chartArea.width = '85%';
935
+ c.chartOptions.chartArea.height = '90%';
936
+ c.chartOptions.hAxis.textPosition = 'in';
937
+ c.chartOptions.hAxis.viewWindowMode = 'maximized';
938
+ c.chartOptions.hAxis.textStyle = { "fontSize": 9 };
939
+ c.chartOptions.vAxis.textStyle = { "fontSize": 9 };
940
+ c.chartOptions.fontSize = 11;
941
+ c.chartOptions.titlePosition = 'in';
942
+ c.chartOptions.tooltip = { "textStyle": { "fontSize": 9 } };
943
+ c.chartOptions.legend = { "textStyle": { "fontSize": 9 } };
944
+ c.default_curveType = 'none';
945
946
calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1);
947
891
- groupbody += "<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\">" + thumbChartActions(i, c, 'nogroup') + "</td></tr><tr><td height='15'></td></tr></table></div>";
948
+ 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>";
949
+ //groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div>";
950
});
951
groupbody += "";
952
@@ -897,12 +955,12 @@ function initGroupGraphs(group) {
955
}
956
957
function clearGroupGraphs() {
900
- if(group_charts && group_charts.length) {
901
- $.each(group_charts, function(i, c) {
958
+ if(groupCharts && groupCharts.length) {
959
+ $.each(groupCharts, function(i, c) {
960
cleanThisChart(c, 'emptydivs');
961
});
962
905
- group_charts = null;
963
+ groupCharts = null;
964
}
965
966
document.getElementById("groupgraphs").innerHTML = "";
@@ -927,9 +985,9 @@ function initCharts() {
985
}
986
987
loadCharts(null, function(all) {
930
- mycharts = all.charts;
988
+ allCharts = all.charts;
989
932
- if(mycharts == null || mycharts.length == 0) {
990
+ if(allCharts == null || allCharts.length == 0) {
991
alert("Cannot load data from server.");
992
return;
993
}
@@ -940,7 +998,7 @@ function initCharts() {
998
return;
999
}
1000
943
- mycharts.sort(chartssort);
1001
+ allCharts.sort(chartssort);
1002
1003
document.getElementById('hostname_id').innerHTML = all.hostname;
1004
document.title = all.hostname;
@@ -950,7 +1008,7 @@ function initCharts() {
1008
var categories = new Array();
1009
var families = new Array();
1010
var chartslist = new Array();
953
- $.each(mycharts, function(i, c) {
1011
+ $.each(allCharts, function(i, c) {
1012
var j;
1013
1014
chartslist.push({name: c.name, type: c.type, id: i});
@@ -995,7 +1053,7 @@ function initCharts() {
1053
families.push({name: c.family, count: 1});
1054
});
1055
998
- document.getElementById('server_summary_id').innerHTML = "<small>NetData server at <b>" + all.hostname + "</b> is maintaining <b>" + mycharts.length + "</b> charts, having <b>" + dimensions + "</b> dimensions (by default with <b>" + all.history + "</b> entries each), which are updated every <b>" + all.update_every + "s</b>, using a total of <b>" + (Math.round(all.memory * 10 / 1024 / 1024) / 10) + " MB</b> for the round robin database.</small>";
1056
+ document.getElementById('server_summary_id').innerHTML = "<small>NetData server at <b>" + all.hostname + "</b> is maintaining <b>" + allCharts.length + "</b> charts, having <b>" + dimensions + "</b> dimensions (by default with <b>" + all.history + "</b> entries each), which are updated every <b>" + all.update_every + "s</b>, using a total of <b>" + (Math.round(all.memory * 10 / 1024 / 1024) / 10) + " MB</b> for the round robin database.</small>";
1057
1058
$.each(categories, function(i, a) {
1059
a.html = "<tr><td id=\"" + a.name + "\"><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
web/netdata.js
+23
-13
@@ -124,6 +124,8 @@ function showChartIsLoading(id, name, width, height, message) {
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) {
127
+ // console.log('calculateChartPointsToShow( c = ' + c.id + ', divisor = ' + divisor + ', maxtime = ' + maxtime + ', group = ' + group + ' )');
128
+
129
if(!divisor) divisor = 2;
130
131
var before = c.before?c.before:new Date().getTime() / 1000;
@@ -144,7 +146,7 @@ function calculateChartPointsToShow(c, divisor, maxtime, group) {
146
if(screen_points > data_points) {
147
c.group = 1;
148
c.points_to_show = data_points;
147
- //console.log("rendering at full detail");
149
+ // console.log("rendering at full detail");
150
}
151
else {
152
c.group = Math.round(data_points / screen_points);
@@ -174,28 +176,33 @@ function calculateChartPointsToShow(c, divisor, maxtime, group) {
176
177
// make sure the line width is not congesting the chart
178
if(c.chartType == 'LineChart') {
177
- if(c.points_to_show > c.chartOptions.width / 2) {
179
+ if(c.points_to_show > c.chartOptions.width / 3) {
180
c.chartOptions.lineWidth = 1;
179
- c.chartOptions.curveType = 'none';
180
- }
181
-
182
- else if(c.points_to_show > c.chartOptions.width / 3) {
183
- c.chartOptions.lineWidth = 1;
184
- c.chartOptions.curveType = c.default_curveType;
181
}
182
183
else {
184
c.chartOptions.lineWidth = 2;
189
- c.chartOptions.curveType = c.default_curveType;
185
}
186
}
187
else if(c.chartType == 'AreaChart') {
188
if(c.points_to_show > c.chartOptions.width / 2)
189
c.chartOptions.lineWidth = 0;
195
-
190
else
191
c.chartOptions.lineWidth = 1;
192
}
193
+
194
+ // do not render curves when we don't have at
195
+ // least 2 twice the space per point
196
+ if(c.points_to_show > (c.chartOptions.width * c.chartOptions.lineWidth / 2) )
197
+ c.chartOptions.curveType = 'none';
198
+ else
199
+ c.chartOptions.curveType = c.default_curveType;
200
+
201
+ var hpoints = Math.round(maxtime / 30);
202
+ if(hpoints > 10) hpoints = 10;
203
+
204
+ c.chartOptions.hAxis.gridlines = { "count": hpoints, "color": '#EEE' };
205
+ c.chartOptions.vAxis.gridlines = { "color": '#EEE' };
206
}
207
208
@@ -243,15 +250,18 @@ function loadCharts(base_url, doNext) {
250
lineWidth: 1,
251
title: json.charts[i].title,
252
// hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
246
- hAxis: {viewWindowMode: 'maximized', slantedText: false, format:'HH:mm:ss'},
247
- vAxis: {title: json.charts[i].units, viewWindowMode: 'pretty', minValue: -0.1, maxValue: 0.1},
248
- chartArea : {width: '65%', height: '75%'},
253
+ fontSize: 11,
254
+ hAxis: {viewWindowMode: 'maximized', slantedText: false, format:'HH:mm:ss', textStyle: { fontSize: 9 } },
255
+ vAxis: {title: json.charts[i].units, viewWindowMode: 'pretty', minValue: -0.1, maxValue: 0.1, textStyle: { fontSize: 9 } },
256
+ chartArea : {width: '65%', height: '80%'},
257
focusTarget: 'category',
258
annotation: {'1': {style: 'line'}},
259
//colors: ['blue', 'red', 'green', 'lime', 'olive', 'yellow', 'navy', 'fuchsia', 'maroon', 'aqua', 'teal', 'purple', 'black', 'gray', 'silver'],
260
//tooltip: {isHtml: true},
261
};
262
263
+ json.charts[i].default_curveType = 'none';
264
+
265
// set the chart type
266
switch(json.charts[i].chart_type) {
267
case "area":