group chart mode stretches the charts to fill the screen.
Costa Tsaousis (ktsaou) committed
Apr 13, 2014 at 20:46 UTC
744c2c7f7961e389d39cde1abd333142eb4ad840
1 file changed
+46
-14
web/index.html
+46
-14
@@ -96,6 +96,15 @@
96
function disableChart(i) {
97
var chart = null;
98
99
+ var count = 0;
100
+ if(group_charts) $.each(group_charts, function(i, c) {
101
+ if(c.enabled) count++;
102
+ });
103
+ if(count <= 1) {
104
+ alert('Cannot close the last chart shown.');
105
+ return;
106
+ }
107
+
108
if(group_charts)
109
chart = group_charts[i];
110
else
@@ -111,6 +120,8 @@
120
121
div = document.getElementById(chart.div + "_parent");
122
if(div) div.innerHTML = "";
123
+
124
+ resizeCharts();
125
}
126
127
function chartssort(a, b) {
@@ -264,10 +275,31 @@
275
return Math.round(cwidth / items) - 1;
276
}
277
267
- function groupWidth() {
268
- var width = screenWidth() / 2;
269
- if(width < 500) width = screenWidth();
270
- return width;
278
+ function groupChartSizes() {
279
+ var s = { width: screenWidth() / 2, height: ($(window).height() - 130) / 3 - 10};
280
+ if(s.width < MINIMUM_THUMB_GRAPH_WIDTH) s.width = screenWidth();
281
+
282
+ var count = 0;
283
+ if(group_charts) $.each(group_charts, function(i, c) {
284
+ if(c.enabled) count++;
285
+ });
286
+
287
+ if(count == 0) {
288
+ s.width = TARGET_THUMB_GRAPH_WIDTH;
289
+ s.height = TARGET_THUMB_GRAPH_HEIGHT;
290
+ }
291
+ if(count < 4) {
292
+ s.width = screenWidth();
293
+ s.height = ($(window).height() - 130) / count - 10;
294
+ }
295
+ else if(count == 4) {
296
+ s.height = ($(window).height() - 130) / 2 - 10;
297
+ }
298
+
299
+ if(s.height < TARGET_THUMB_GRAPH_HEIGHT * 1.5)
300
+ s.height = TARGET_THUMB_GRAPH_HEIGHT * 1.5;
301
+
302
+ return s;
303
}
304
305
// resize all charts
@@ -292,12 +324,14 @@
324
}
325
});
326
295
- width = groupWidth();
327
if(group_charts) $.each(group_charts, function(i, c) {
297
- if(c.enabled && c.chartOptions.width != width) {
328
+ var sizes = groupChartSizes();
329
+
330
+ if(c.enabled && (c.chartOptions.width != sizes.width || c.chartOptions.height != sizes.height)) {
331
if(c.chart) c.chart.clearChart();
332
c.chart = null;
300
- c.chartOptions.width = width;
333
+ c.chartOptions.width = sizes.width;
334
+ c.chartOptions.height = sizes.height;
335
showChartIsLoading(c.div, c.chartOptions.width, c.chartOptions.height);
336
c.last_updated = 0;
337
}
@@ -535,10 +569,6 @@
569
570
var group_charts = null;
571
function initGroupGraphs(group) {
538
- var width = groupWidth();
539
- var height = (($(window).height() - 130) / 3) - 10;
540
- if(height < TARGET_THUMB_GRAPH_HEIGHT) height = TARGET_THUMB_GRAPH_HEIGHT;
541
-
572
var count = 0;
573
574
if(group_charts) clearGroupGraphs();
@@ -553,16 +583,18 @@
583
group_charts[count].enabled = true;
584
group_charts[count].chart = null;
585
group_charts[count].last_updated = 0;
556
-
557
- group_charts[count].chartOptions.width = width;
558
- group_charts[count].chartOptions.height = height;
586
count++;
587
}
588
});
589
group_charts.sort(chartssort);
590
591
+ var sizes = groupChartSizes();
592
+
593
var groupbody = "";
594
$.each(group_charts, function(i, c) {
595
+ c.chartOptions.width = sizes.width;
596
+ c.chartOptions.height = sizes.height;
597
+
598
groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\">" + thumbChartActions(i, c, 'nogroup') + "</td></tr></table></div>";
599
});
600
groupbody += "";