github
/
phpservermon
mirror of https://github.com/phpservermon/phpservermon
1
0
Fork 0
Code Issues Releases Wiki Activity

- Issue #45 

- Serie options moved to the js
- On empty charts, hide legends and set the correct date to hide the point.
pull/46/head
Abawell 2014-04-02 14:02:34 +02:00
parent d90afdc5c7
commit feaf6f3f00
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/psm/Util/Server/HistoryGraph.class.php
View File

@ -130,7 +130,7 @@ class HistoryGraph {
'latency_avg' => count($uptimes) > 0 ? round(($latency_avg / count($uptimes)), 4) : 0, 'latency_avg' => count($uptimes) > 0 ? round(($latency_avg / count($uptimes)), 4) : 0,
'server_lines' => sizeof($lines) ? '[' . implode(',', $lines) . ']' : '', 'server_lines' => sizeof($lines) ? '[' . implode(',', $lines) . ']' : '',
'server_down' => sizeof($down) ? '[' . implode(',', $down) . ']' : '', 'server_down' => sizeof($down) ? '[' . implode(',', $down) . ']' : '',
'series' => "[{label: '".psm_get_lang('servers', 'latency')."', lineWidth: 1}]", 'series' => "[{label: '".psm_get_lang('servers', 'latency')."'}]",
'plotmode' => 'hour', 'plotmode' => 'hour',
'buttons' => $buttons, 'buttons' => $buttons,
'chart_id' => $server_id . '_uptime', 'chart_id' => $server_id . '_uptime',
@ -194,13 +194,13 @@ class HistoryGraph {
continue; continue;
} }
$lines_merged[] = '[' . implode(',', $line_value) . ']'; $lines_merged[] = '[' . implode(',', $line_value) . ']';
$series[] = "{label: '".psm_get_lang('servers', $line_key)."', lineWidth: 1}"; $series[] = "{label: '".psm_get_lang('servers', $line_key)."'}";
} }
if($last_date) { if($last_date) {
$down[] = '[' . $last_date . ',0]'; $down[] = '[' . $last_date . ',0]';
} }
$buttons = array(); $buttons = array();
$buttons[] = array('mode' => 'week', 'label' => psm_get_lang('servers', 'week')); $buttons[] = array('mode' => 'week2', 'label' => psm_get_lang('servers', 'week'));
$buttons[] = array('mode' => 'month', 'label' => psm_get_lang('servers', 'month'), 'class_active' => 'btn-info'); $buttons[] = array('mode' => 'month', 'label' => psm_get_lang('servers', 'month'), 'class_active' => 'btn-info');
$buttons[] = array('mode' => 'year', 'label' => psm_get_lang('servers', 'year')); $buttons[] = array('mode' => 'year', 'label' => psm_get_lang('servers', 'year'));
@ -211,7 +211,7 @@ class HistoryGraph {
'server_down' => sizeof($down) ? '[' . implode(',', $down) . ']' : '', 'server_down' => sizeof($down) ? '[' . implode(',', $down) . ']' : '',
'series' => sizeof($series) ? '[' . implode(',', $series) . ']' : '', 'series' => sizeof($series) ? '[' . implode(',', $series) . ']' : '',
'plotmode' => 'month', 'plotmode' => 'month',
'end_timestamp' => $time_end, 'end_timestamp' => $time_end ? $time_end : '',
'buttons' => $buttons, 'buttons' => $buttons,
// make sure to add chart id after buttons so its added to those tmeplates as well // make sure to add chart id after buttons so its added to those tmeplates as well
'chart_id' => $server_id . '_history', 'chart_id' => $server_id . '_history',

26
static/js/history.js
View File

@ -51,6 +51,8 @@ function create_plot($this, mode)
mode = mode || $this.attr('data-plotMode') || 'hour'; mode = mode || $this.attr('data-plotMode') || 'hour';
$this.attr('data-plotMode', mode); $this.attr('data-plotMode', mode);
var timeStamp, tickFormat; var timeStamp, tickFormat;
var showMarker = false;
var showLegend = true;
switch(mode) switch(mode)
{ {
case 'year': case 'year':
@ -62,8 +64,10 @@ function create_plot($this, mode)
tickFormat = day_format; tickFormat = day_format;
break; break;
case 'week': case 'week':
case 'week2':
timeStamp = 1000 * 60 * 60 * 24 * 7; timeStamp = 1000 * 60 * 60 * 24 * 7;
tickFormat = short_date_format; tickFormat = short_date_format;
showMarker = (mode == 'week2');
break; break;
case 'day': case 'day':
timeStamp = 1000 * 60 * 60 *24; timeStamp = 1000 * 60 * 60 *24;
@ -71,12 +75,12 @@ function create_plot($this, mode)
break; break;
case 'hour': case 'hour':
default: default:
showMarker = true;
timeStamp = 1000 * 60 * 60; timeStamp = 1000 * 60 * 60;
tickFormat = short_time_format; tickFormat = short_time_format;
break; break;
} }
var downArray = new Array(); var downArray = new Array();
var down = $this.attr('data-down'); var down = $this.attr('data-down');
if(down) { if(down) {
@ -98,11 +102,27 @@ function create_plot($this, mode)
} }
} }
var series = eval($this.attr('data-series'));
if(Array.isArray(series)) {
for (var i=0; i<series.length; i++)
{
$.extend(true, series[i], {
markerOptions: {
show: showMarker
},
lineWidth: 1
});
}
} else {
series = [{}];
showLegend = false;
}
plot = $.jqplot($this.attr('id'), lines, { plot = $.jqplot($this.attr('id'), lines, {
title: $this.attr('data-title'), title: $this.attr('data-title'),
series: eval($this.attr('data-series')), series: series,
legend: { legend: {
show: true, show: showLegend,
placement: 'insideGrid', placement: 'insideGrid',
location: 'nw' location: 'nw'
}, },