a bit better screen space management
Costa Tsaousis (ktsaou) committed
Apr 26, 2014 at 04:23 UTC
2a2382c84c8946faec032b8601c5f405bf18a9cf
2 files changed
+12
-6
web/index.js
+9
-5
@@ -1,6 +1,6 @@
1
var TARGET_THUMB_GRAPH_WIDTH = 500; // thumb charts width will range from 0.5 to 1.5 of that
2
var MINIMUM_THUMB_GRAPH_WIDTH = 400; // thumb chart will generally try to be wider than that
3
-var TARGET_THUMB_GRAPH_HEIGHT = 220; // the height of the thumb charts
3
+var TARGET_THUMB_GRAPH_HEIGHT = 180; // the height of the thumb charts
4
5
var THUMBS_MAX_TIME_TO_SHOW = 600; // how much time the thumb charts will present?
6
var THUMBS_POINTS_DIVISOR = 4;
@@ -97,7 +97,6 @@ function initMainChart(c) {
97
mainchart.chartOptions.width = screenWidth();
98
mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
99
if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
100
- //mainchart.chartOptions.chartArea = {'width': '80%'};
100
101
mainchart.div = 'maingraph';
102
calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, MAINCHART_MAX_TIME_TO_SHOW, 0);
@@ -109,6 +108,8 @@ function initMainChart(c) {
108
109
// initialize the div
110
showChartIsLoading(mainchart.div, mainchart.name, mainchart.chartOptions.width, mainchart.chartOptions.height);
111
+ 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>";
112
+ //showChartIsLoading(mainchart.hiddenchart.div, mainchart.hiddenchart.name, mainchart.hiddenchart.chartOptions.width, mainchart.hiddenchart.chartOptions.height);
113
114
// set the radio buttons
115
setMainChartGroupMethod(mainchart.group_method, 'no-refresh');
@@ -257,14 +258,17 @@ function setMainChartMax(m) {
258
mainchart.chartOptions.theme = 'maximized';
259
//mainchart.chartOptions.axisTitlesPosition = 'in';
260
//mainchart.chartOptions.legend = {position: 'none'};
260
- //mainchart.chartOptions.hAxis.title = null;
261
+ mainchart.chartOptions.hAxis.title = null;
262
mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
263
mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
264
+ mainchart.chartOptions.chartArea = {'width': '98%', 'height': '100%'};
265
}
266
else {
267
+ mainchart.chartOptions.hAxis.title = null;
268
mainchart.chartOptions.theme = null;
269
mainchart.chartOptions.hAxis.viewWindowMode = null;
270
mainchart.chartOptions.vAxis.viewWindowMode = null;
271
+ mainchart.chartOptions.chartArea = {'width': '80%', 'height': '90%'};
272
}
273
$('.mainchart_max_button').button(m);
274
last_main_chart_max = m;
@@ -803,7 +807,7 @@ function initGroupGraphs(group) {
807
808
calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1);
809
806
- 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></table></div>";
810
+ 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>";
811
});
812
groupbody += "";
813
@@ -871,7 +875,7 @@ function initCharts() {
875
var j;
876
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\">"
877
+ thumbChartActions(i, c)
874
- + "</td></tr></table></div>";
878
+ + "</td></tr><tr><td height='15'></td></tr></table></div>";
879
880
// find the categories object for this type
881
for(j = 0; j < categories.length ;j++) {
web/netdata.js
+3
-1
@@ -245,8 +245,10 @@ function loadCharts(base_url, doNext) {
245
height: 200,
246
lineWidth: 1,
247
title: json.charts[i].title,
248
- hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
248
+ // hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
249
+ hAxis: {viewWindowMode: 'maximized', format:'HH:mm:ss'},
250
vAxis: {title: json.charts[i].units, viewWindowMode: 'pretty', minValue: 0, maxValue: 10},
251
+ chartArea : {width: '70%', height: '80%'},
252
focusTarget: 'category',
253
annotation: {'1': {style: 'line'}},
254
//colors: ['blue', 'red', 'green', 'lime', 'olive', 'yellow', 'navy', 'fuchsia', 'maroon', 'aqua', 'teal', 'purple', 'black', 'gray', 'silver'],