Server History Controller

src/lang/bg.lang.php

@@ -48,6 +48,7 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => 'Настройки',
 		'server' => 'Сървъри',
+		'server_history' => 'History',
 		'server_log' => 'Логове',
 		'server_status' => 'Статус',
 		'server_update' => 'Обнови данните',
@@ -103,6 +104,10 @@ $sm_lang = array(
 		'updated' => 'Информацията за сървъра е обновена.',
 		'inserted' => 'Сървърът е добвен успешно.',
 		'rtime' => 'Пинг',
+		'month' => 'Month',
+		'week' => 'Week',
+		'day' => 'Day',
+		'hour' => 'Hour',
 	),
 	'config' => array(
 		'general' => 'Основни настройки',

src/lang/br.lang.php

@@ -48,6 +48,7 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => 'Configuração',
 		'server' => 'Servidores',
+		'server_history' => 'History',
 		'server_log' => 'Log',
 		'server_status' => 'Status',
 		'server_update' => 'Atualização',
@@ -103,6 +104,10 @@ $sm_lang = array(
         'updated' => 'Servidor atualizado.',
         'inserted' => 'Servidor adicionar.',
         'rtime' => 'Tempo de resposta',
+		'month' => 'Month',
+		'week' => 'Week',
+		'day' => 'Day',
+		'hour' => 'Hour',
     ),
     'config' => array(
         'general' => 'Geral',

src/lang/de.lang.php

@@ -48,6 +48,7 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => 'Einstellungen',
 		'server' => 'Server',
+		'server_history' => 'History',
 		'server_log' => 'Log',
 		'server_status' => 'Status',
 		'server_update' => 'Updates',
@@ -103,6 +104,10 @@ $sm_lang = array(
 		'updated' => 'Server aktualisiert.',
 		'inserted' => 'Server eingetragen.',
 		'rtime' => 'Antwortzeit',
+		'month' => 'Month',
+		'week' => 'Week',
+		'day' => 'Day',
+		'hour' => 'Hour',
 	),
 	'config' => array(
 		'general' => 'General',

src/lang/en.lang.php

@@ -48,6 +48,7 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => 'Config',
 		'server' => 'Servers',
+		'server_history' => 'History',
 		'server_log' => 'Log',
 		'server_status' => 'Status',
 		'server_update' => 'Update',
@@ -103,6 +104,10 @@ $sm_lang = array(
 		'updated' => 'Server updated.',
 		'inserted' => 'Server added.',
 		'rtime' => 'Response time',
+		'month' => 'Month',
+		'week' => 'Week',
+		'day' => 'Day',
+		'hour' => 'Hour',
 	),
 	'config' => array(
 		'general' => 'General',

src/lang/fr.lang.php

@@ -27,7 +27,7 @@
 
 $sm_lang = array(
 	'system' => array(
-		'title' => 'Surveillance de serveurs',
+		'title' => 'Server Moniter',
 		'install' => 'Installer',
 		'action' => 'Action',
 		'save' => 'Enregistrer',
@@ -48,8 +48,9 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => 'Configuration',
 		'server' => 'Serveurs',
+		'server_history' => 'Historique',
 		'server_log' => 'Événements',
-		'server_status' => 'État',
+		'server_status' => 'États',
 		'server_update' => 'Mise à jour',
 		'user' => 'Utilisateurs',
 		'help' => 'Aide',
@@ -103,6 +104,10 @@ $sm_lang = array(
 		'updated' => 'Serveur mis à jour.',
 		'inserted' => 'Serveur ajouté.',
 		'rtime' => 'Temps de réponse',
+		'month' => 'Mois',
+		'week' => 'Semaine',
+		'day' => 'Jour',
+		'hour' => 'Heure',
 	),
 	'config' => array(
 		'general' => 'Général',
@@ -124,7 +129,7 @@ $sm_lang = array(
 		'email_smtp_username' => 'Nom utilisateur SMTP',
 		'email_smtp_password' => 'Mot de passe SMTP',
 		'email_smtp_noauth' => 'Laisser vide si pas d\'authentication',
-		'sms_status' => 'Autoriser l\'envoi de SMS?',
+		'sms_status' => 'Autoriser l\'envoi de SMS',
 		'sms_gateway' => 'Passerelle à utiliser pour l\'envoi de SMS',
 		'sms_gateway_mosms' => 'Mosms',
 		'sms_gateway_mollie' => 'Mollie',

src/lang/kr.lang.php

@@ -48,6 +48,7 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => '설정',
 		'server' => '서버목록',
+		'server_history' => 'History',
 		'server_log' => '로그',
 		'server_status' => 'Status',
 		'server_update' => '업데이트',
@@ -103,6 +104,10 @@ $sm_lang = array(
 		'updated' => '서버가 수정되었습니다.',
 		'inserted' => '서버가 추가되었습니다.',
 		'rtime' => '응답',
+		'month' => 'Month',
+		'week' => 'Week',
+		'day' => 'Day',
+		'hour' => 'Hour',
 	),
 	'config' => array(
 		'general' => '일반',

src/lang/nl.lang.php

@@ -48,6 +48,7 @@ $sm_lang = array(
 	'menu' => array(
 		'config' => 'Config',
 		'server' => 'Servers',
+		'server_history' => 'History',
 		'server_log' => 'Log',
 		'server_status' => 'Status',
 		'server_update' => 'Update',
@@ -103,6 +104,10 @@ $sm_lang = array(
 		'updated' => 'Server gewijzigd.',
 		'inserted' => 'Server toegevoegd.',
 		'rtime' => 'Response tijd',
+		'month' => 'Month',
+		'week' => 'Week',
+		'day' => 'Day',
+		'hour' => 'Hour',
 	),
 	'config' => array(
 		'general' => 'Algemeen',

src/psm/Module/AbstractController.class.php

@@ -221,10 +221,10 @@ abstract class AbstractController implements ControllerInterface {
 
 		switch($ulvl) {
 			case PSM_USER_ADMIN:
-				$items = array('server', 'server_status', 'server_log', 'user', 'config', 'server_update');
+				$items = array('server', 'server_status', 'server_history', 'server_log', 'user', 'config', 'server_update');
 				break;
 			case PSM_USER_USER:
-				$items = array('server', 'server_status', 'server_log', 'server_update');
+				$items = array('server', 'server_status', 'server_history', 'server_log', 'server_update');
 				break;
 			default:
 				$items = array();

src/psm/Module/Server/Controller/AbstractServerController.class.php

@@ -75,4 +75,8 @@ abstract class AbstractServerController extends AbstractController {
 		return $servers;
 
 	}
+	
+	public function getServerUptime($server_id)	{
+		return $this->db->select(PSM_DB_PREFIX.'servers_uptime' , "server_id=$server_id", null, '', 'date');
+	}
 }

src/psm/Module/Server/Controller/HistoryController.class.php

@@ -0,0 +1,131 @@
+<?php
+/**
+ * PHP Server Monitor
+ * Monitor your servers and websites.
+ *
+ * This file is part of PHP Server Monitor.
+ * PHP Server Monitor is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * PHP Server Monitor is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with PHP Server Monitor.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * @package     phpservermon
+ * @author      Pepijn Over <pep@neanderthal-technology.com>
+ *				History module : Jérôme Cabanis <http://lauraly.com>
+ * @copyright   Copyright (c) 2008-2014 Pepijn Over <pep@neanderthal-technology.com>
+ * @license     http://www.gnu.org/licenses/gpl.txt GNU GPL v3
+ * @version     Release: @package_version@
+ * @link        http://www.phpservermonitor.org/
+ **/
+
+namespace psm\Module\Server\Controller;
+use psm\Service\Database;
+use psm\Service\Template;
+
+/**
+ * History module. Create the page to view server history
+ */
+class HistoryController extends AbstractServerController {
+
+	function __construct(Database $db, Template $tpl) {
+		parent::__construct($db, $tpl);
+
+		$this->setActions('index', 'index');
+	}
+
+	/**
+	 * Prepare the template with a list of all log entries
+	 */
+	protected function executeIndex() {
+		$this->setTemplateId('history_list', 'history.tpl.html');
+		
+		// get the active servers from database
+		$servers = $this->getServers();
+
+		$data = array();
+		foreach ($servers as $server) {
+			if($server['active'] == 'no') {
+				continue;
+			}
+			
+			$server_id = $server['server_id'];
+			$uptimes = $this->getServerUptime($server_id);
+			$last_date = 0;
+			$last_status = 0;
+			// Create the list of points and server down zones
+			$line = array();
+			$lines = array();
+			$down = array();
+			foreach ($uptimes as $uptime) {
+				$time = strtotime($uptime['date']) * 1000;
+				if($uptime['status']) {
+					// The server is up
+					$line[] = '[' . $time . ',' . round((float)$uptime['latency'], 3) . ']';
+					if($last_date) {		
+						// Was down before.
+						// Record the first and last date as a string in the down array
+						$down[] = '[' . $last_date . ',' . $time . ']';
+						$last_date = 0;
+					}
+					$last_status = 1;
+				}
+				else {
+					// The server is down
+					if($last_status) {
+						// If was up before, record la line as string in the lines array
+						$lines[] = '[' . implode(',', $line) . ']';
+						$line = array();
+						$last_status = 0;
+					}
+					if(!$last_date) {
+						$last_date = $time;
+					}
+				}
+			}
+			if($last_status) {
+				$lines[] = '[' . implode(',', $line) . ']';
+			}
+			if($last_date) {
+				$down[] = '[' . $last_date . ',0]';
+			}
+			$data[] = array(
+				'server_id'		=> $server_id,
+				'server_name'	=> $server['label'],
+				'server_lines'	=> sizeof($lines) ? '[' . implode(',', $lines) . ']' : '',
+				'server_down'	=> sizeof($down) ? '[' . implode(',', $down) . ']' : '',
+				'server_online'	=> $server['last_online'],
+				'server_rtime'	=> round((float)$server['rtime'], 3),
+			);
+		}
+
+		$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers', $data);
+	}
+	
+	
+	// override parent::createHTMLLabels()
+	protected function createHTMLLabels() {
+		$this->tpl->addTemplateData(
+			$this->getTemplateId(),
+			array(
+				'subtitle' => psm_get_lang('menu', 'server_history'),
+				'label_server' => psm_get_lang('servers', 'server'),
+				'label_last_online' => psm_get_lang('servers', 'last_online'),
+				'label_rtime' => psm_get_lang('servers', 'rtime'),
+				'label_month' => psm_get_lang('servers', 'month'),
+				'label_week' => psm_get_lang('servers', 'week'),
+				'label_day' => psm_get_lang('servers', 'day'),
+				'label_hour' => psm_get_lang('servers', 'hour'),
+			)
+		);
+
+		return parent::createHTMLLabels();
+	}
+}

src/psm/Module/Server/ServerModule.class.php

@@ -33,6 +33,7 @@ class ServerModule implements ModuleInterface {
 	public function getControllers() {
 		return array(
 			'server' => __NAMESPACE__ . '\Controller\ServerController',
+			'history' => __NAMESPACE__ . '\Controller\HistoryController',
 			'log' => __NAMESPACE__ . '\Controller\LogController',
 			'status' => __NAMESPACE__ . '\Controller\StatusController',
 			'update' => __NAMESPACE__ . '\Controller\UpdateController',

src/templates/history.tpl.html

@@ -0,0 +1,49 @@
+<!--%tpl_history_list-->
+<link href="static/plugin/jqplot/jquery.jqplot.min.css" rel="stylesheet" >
+<!--[if lt IE 9]><script type="text/javascript" src="static/plugin/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="static/plugin/jqplot/jquery.jqplot.min.js"></script>
+<script type="text/javascript" src="static/plugin/jqplot/jqplot.canvasOverlay.min.js"></script>
+<script type="text/javascript" src="static/plugin/jqplot/jqplot.dateAxisRenderer.min.js"></script>
+<script type="text/javascript" src="static/plugin/jqplot/jqplot.highlighter.min.js"></script>
+
+<link href="static/css/history.css" rel="stylesheet" >
+<script type="text/javascript" src="static/js/history.js"></script>
+
+<div id="history-panel">
+<!--%tpl_repeat_servers-->
+<div class="chart-row">
+	<div class="chart-container">
+		<div class="chart-content">
+			<div id="chart{server_id}" class="chart" data-title="{server_name}" data-lines="{server_lines}" data-down="{server_down}"></div>
+		</div>
+	</div>
+	<div class="info-container">
+		<div class="info-content">
+			<div class="info-dropdown btn-group">
+				<button class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-info-sign"></i></span></button>
+				<ul class="dropdown-menu">
+					<li><span>{label_last_online}: {server_online}</span></li>
+					<li><span>{label_rtime}: {server_rtime}</span></li>
+				</ul>
+			</div>
+			<div class="server-info">
+				{label_last_online}: {server_online}<br/>
+				{label_rtime}: {server_rtime}<br/>
+			</div>
+		</div>
+		<div class="chart-selector">
+			<div class="btn-group">
+				<button class="btn" data-chartId="{server_id}" data-chartMode="month" >{label_month}</button>
+				<button class="btn" data-chartId="{server_id}" data-chartMode="week" >{label_week}</button>
+				<button class="btn" data-chartId="{server_id}" data-chartMode="day" >{label_day}</button>
+				<button class="btn btn-info" data-chartId="{server_id}" data-chartMode="hour" >{label_hour}</button>
+			</div>			
+		</div>
+	</div>
+</div>
+<div style="clear: both;">&nbsp;</div>
+<!--%%tpl_repeat_servers-->
+{servers}
+</div>
+
+<!--%%tpl_history_list-->

src/templates/main.tpl.html

@@ -12,10 +12,10 @@
     <link href="static/plugin/twitter-bootstrap/css/bootstrap.css" rel="stylesheet">
     <link href="static/plugin/twitter-bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="static/css/style.css" rel="stylesheet">
-    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
+	<![endif]-->
     <script type="text/javascript" src="static/plugin/jquery-1.7.1.min.js"></script>
     <script type="text/javascript" src="static/plugin/twitter-bootstrap/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="static/js/scripts.js"></script>
@@ -43,7 +43,7 @@
     <!-- /navbar -->
 
     <!-- container -->
-    <div class="container">
+    <div class="container-fluid">
 
         <div class="page-header">
             <h1>{subtitle}<small>&nbsp;</small></h1>

static/css/history.css

@@ -0,0 +1,73 @@
+#history-panel {
+	width: 100%;
+	max-width: 1100px;
+}
+
+.chart-row {
+	margin-bottom: 20px;
+}
+
+.chart-row:after {
+	clear:both;
+}
+
+.chart-container {
+	float: left;
+	width: 100%;
+	margin-right: -260px;
+}
+
+.chart-content {
+	margin-right: 260px;
+}
+
+.info-container {
+	float: right;
+	width: 250px;
+}
+
+.info-dropdown {
+	display: none;
+}
+
+.chart {
+	height: 300px;
+	width: 100%;
+}
+
+.server-info {
+	padding-top: 40px;
+	height: 200px;
+}
+
+.chart-selector {
+}
+
+@media (max-width: 767px) {
+	.chart-container {
+		margin-right: 0;
+	}
+	
+	.chart-content {
+		margin-right: 0;
+	}
+	
+	.info-container {
+		float: none;
+		clear: both;
+		width: 100%;
+	}
+
+	.info-dropdown {
+		display: block;
+		float: left;
+	}
+	
+	.server-info {
+		display: none;
+	}
+	
+	.chart-selector {
+		float: right;
+	}
+}

static/css/style.css

@@ -1,5 +1,7 @@
 body {
 	padding-top: 70px;
+    padding-left: 0px;
+    padding-right: 0px;
 }
 .navbar-fixed-top {
 	position: fixed;
@@ -8,7 +10,7 @@ body {
 .navbar-fixed-top .navbar-inner {
 	padding-left: 0;
 	padding-right: 0;
-}
+}	
 body.install{
     padding-top:20px;
 }
@@ -67,4 +69,14 @@ legend{
 	height: auto;
 	margin-bottom: 15px;
 	padding: 7px 9px;
+}
+
+.dropdown-menu span {
+  display: block;
+  padding: 3px 15px;
+  clear: both;
+  font-weight: normal;
+  line-height: 18px;
+  color: #333333;
+  white-space: nowrap;
 }

static/js/history.js

@@ -0,0 +1,123 @@
+$().ready(function()
+{
+	$('.chart').each(function() {
+		var $this = $(this);
+		create_plot($this);
+	});	
+	
+	$(window).resize(function(){
+		$('.chart').each(function() {
+			var plot = $(this).data('psm_plot');
+			if(plot)
+				plot.replot( );
+		});
+	});
+	
+	$('.chart-selector .btn').click(function(){
+		var $btn = $(this);
+		var chartID = $btn.attr('data-chartId');
+		var chartMode = $btn.attr('data-chartMode');
+		create_plot($('#chart' + chartID), chartMode);
+		$btn.siblings('.btn-info').removeClass('btn-info');
+		$btn.addClass('btn-info');
+	});
+});
+
+function create_plot($this, mode)
+{
+	if(!$this) return;
+	
+	var plot = $this.data('psm_plot');
+	if(plot) {
+		plot.destroy();
+		$this.removeData('psm_plot');
+	}
+
+	var d = new Date();
+	var time = d.getTime();
+
+	var lines = $this.attr('data-lines');
+	if(!lines) {
+		lines = [[[0, 0]]];
+	}
+	else if(typeof(lines) == 'string') {
+		lines = eval(lines);
+	}
+
+	mode = mode || $this.data('psm_plotMode') || 'hour';
+	$this.data('psm_plotMode', mode);
+	var timeStamp, tickFormat;
+	switch(mode)
+	{
+		case 'month':
+			timeStamp = 1000 * 60 * 60 * 24 * 30;
+			tickFormat = '%d/%m %H:%M';
+			break;
+		case 'week':
+			timeStamp = 1000 * 60 * 60 * 24 * 7;
+			tickFormat = '%d/%m %H:%M';
+			break;
+		case 'day':
+			timeStamp = 1000 * 60 * 60 *24;
+			tickFormat = '%H:%M';
+			break;
+		case 'hour':
+		default:
+			timeStamp = 1000 * 60 * 60;
+			tickFormat = '%H:%M';
+			break;
+	}
+
+
+	var downArray = new Array();
+	var down = $this.attr('data-down');
+	if(down) {
+		if(typeof(down) == 'string') {
+			down = eval(down);
+		}
+		for (var index = 0; index < down.length; ++index) {
+			var interval = down[index];
+			var d = new $.jsDate(interval[0]);
+			downArray.push({rectangle: {
+				xmin: interval[0],
+				xmax: interval[1] || time,
+				yOffset: '1px',
+				color: '#fe5d5d',
+				showTooltip: true,
+				showTooltipPrecision: 1.0,
+				tooltipFormatString: "&darr; " + d.strftime('%d/%m/%y %H:%M:%S')
+			}});
+		}		
+	}
+
+	plot = $.jqplot($this.attr('id'), lines, {
+		title: $this.attr('data-title'),
+		axes : {
+			xaxis:{
+				renderer:$.jqplot.DateAxisRenderer, 
+				tickOptions : {	formatString: tickFormat },
+				min: time - timeStamp,
+				max: time
+			}
+		},
+		highlighter: {
+			show: true,
+			sizeAdjust: 7.5,
+			useAxesFormatters: false,
+			tooltipContentEditor: function(str, seriesIndex, pointIndex, plot)
+			{
+				var point = plot.series[seriesIndex].data[pointIndex];
+				var d = new $.jsDate(point[0]);
+				return "&uarr; " + d.strftime('%d/%m/%y %H:%M:%S') + ' - ' + $.jqplot.sprintf('%.3fs', point[1]);
+			}
+		},
+		seriesDefaults: {
+			color: "#4bb2c5"
+		},
+		canvasOverlay: {
+			show: true,
+			objects: downArray
+		}			
+	});
+	$this.data('psm_plot', plot);
+}

static/plugin/jqplot/jquery.jqplot.min.css

@@ -0,0 +1 @@
+.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em}.jqplot-axis{font-size:.75em}.jqplot-xaxis{margin-top:10px}.jqplot-x2axis{margin-bottom:10px}.jqplot-yaxis{margin-right:10px}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis,.jqplot-yMidAxis{margin-left:10px;margin-right:10px}.jqplot-axis-tick,.jqplot-xaxis-tick,.jqplot-yaxis-tick,.jqplot-x2axis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick,.jqplot-yMidAxis-tick{position:absolute;white-space:pre}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom}.jqplot-yaxis-tick{right:0;top:15px;text-align:right}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px 1px 5px;z-index:2;font-size:1.5em}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left}.jqplot-yMidAxis-tick{text-align:center;white-space:nowrap}.jqplot-xaxis-label{margin-top:10px;font-size:11pt;position:absolute}.jqplot-x2axis-label{margin-bottom:10px;font-size:11pt;position:absolute}.jqplot-yaxis-label{margin-right:10px;font-size:11pt;position:absolute}.jqplot-yMidAxis-label{font-size:11pt;position:absolute}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;margin-left:10px;position:absolute}.jqplot-meterGauge-tick{font-size:.75em;color:#999}.jqplot-meterGauge-label{font-size:1em;color:#999}table.jqplot-table-legend{margin-top:12px;margin-bottom:12px;margin-left:12px;margin-right:12px}table.jqplot-table-legend,table.jqplot-cursor-legend{background-color:rgba(255,255,255,0.6);border:1px solid #ccc;position:absolute;font-size:.75em}td.jqplot-table-legend{vertical-align:middle}td.jqplot-seriesToggle:hover,td.jqplot-seriesToggle:active{cursor:pointer}.jqplot-table-legend .jqplot-series-hidden{text-decoration:line-through}div.jqplot-table-legend-swatch-outline{border:1px solid #ccc;padding:1px}div.jqplot-table-legend-swatch{width:0;height:0;border-top-width:5px;border-bottom-width:5px;border-left-width:6px;border-right-width:6px;border-top-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-style:solid}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em}.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-highlighter-tooltip,.jqplot-canvasOverlay-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-point-label{font-size:.75em;z-index:2}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em}.jqplot-error{text-align:center}.jqplot-error-message{position:relative;top:46%;display:inline-block}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%)}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,0.7)}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,0.3)}