refs #389, commit MultiSites plugin

15 files changed, 602 insertions, 0 deletions

diff --git a/plugins/MultiSites/Controller.php b/plugins/MultiSites/Controller.php
new file mode 100644
index 0000000000..62059ed2b0
--- /dev/null
+++ b/plugins/MultiSites/Controller.php
@@ -0,0 +1,155 @@
+<?php
+/**
+ * Piwik - Open source web analytics
+ * 
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html Gpl v3 or later
+ * @version $Id$
+ * 
+ * @category Piwik_Plugins
+ * @package Piwik_MultiSites
+ */
+
+/**
+ *
+ * @package Piwik_MultiSites
+ */
+class Piwik_MultiSites_Controller extends Piwik_Controller
+{
+	protected $orderBy = 'names';
+	protected $order = 'desc';
+	protected $evolutionBy = 'visits';
+	protected $mySites = array();
+	protected $page = 1;
+	protected $limit = 20;
+	protected $period;
+	protected $date;
+	protected $dateToStr;
+
+	public function index()
+	{
+		$view = Piwik_View::factory('index');
+		$this->setGeneralVariablesView($view);
+		$view->basicHtmlView = true;
+
+		$view->content = $this->getSitesInfo();
+
+		echo $view->render();		
+	}
+
+	public function getSitesInfo()
+	{
+		$view = Piwik_View::factory('getSitesInfo');
+		$this->setGeneralVariablesView($view);
+		$view->basicHtmlView = true;
+
+		$mySites = Piwik_SitesManager_API::getSitesWithAtLeastViewAccess();
+
+		$params = $this->getGraphParamsModified();
+		$this->dateToStr = $params['date'];
+
+		$ids = 'all';
+		$this->period = PiwiK_Common::getRequestVar('period', 'day');
+
+		$this->date = PiwiK_Common::getRequestVar('date', 'today');
+		$lastDate =  date('Y-m-d',strtotime("-1 ".$this->period, strtotime($this->date)));
+
+		$visits = Piwik_VisitsSummary_API::getVisits($ids, $this->period, $this->date);
+		$lastVisits = Piwik_VisitsSummary_API::getVisits($ids, $this->period, $lastDate);
+
+		$actions = Piwik_VisitsSummary_API::getActions($ids, $this->period, $this->date);
+		$lastActions = Piwik_VisitsSummary_API::getActions($ids, $this->period, $lastDate);
+
+		$uniqueUsers = Piwik_VisitsSummary_API::getUniqueVisitors($ids, $this->period, $this->date);
+		$lastUniqueUsers = Piwik_VisitsSummary_API::getUniqueVisitors($ids, $this->period, $lastDate);
+
+		$visitsSummary = $this->getSummary($lastVisits, $visits, $mySites, "visits");
+		$actionsSummary = $this->getSummary($lastActions, $actions, $mySites, "actions");
+		$uniqueSummary = $this->getSummary($lastUniqueUsers, $uniqueUsers, $mySites, "unique");
+
+		$visitsArray = $visits->getArray();
+		$actionsArray = $actions->getArray();
+		$uniqueUsersArray = $uniqueUsers->getArray();
+		$lastVisitsArray = $lastVisits->getArray();
+		$lastActionsArray = $lastActions->getArray();
+		$lastUniqueUsersArray = $lastUniqueUsers->getArray();
+		foreach($mySites as &$site)
+		{
+			$idSite = $site['idsite'];
+			$site['visits'] = array_shift($visitsArray[$idSite]->getColumn(0));
+			$site['actions'] = array_shift($actionsArray[$idSite]->getColumn(0));
+			$site['unique'] = array_shift($uniqueUsersArray[$idSite]->getColumn(0));
+			$site['lastVisits'] = array_shift($lastVisitsArray[$idSite]->getColumn(0));
+			$site['lastActions'] = array_shift($lastActionsArray[$idSite]->getColumn(0));
+			$site['lastUnique'] = array_shift($lastUniqueUsersArray[$idSite]->getColumn(0));
+			$site['visitsSummaryValue'] = $visitsSummary[$idSite];
+			$site['actionsSummaryValue'] = $actionsSummary[$idSite];
+			$site['uniqueSummaryValue'] = $uniqueSummary[$idSite];
+		}
+
+		$view->mySites = $mySites;
+		$view->arrowDown = '<img src="plugins/MultiSites/images/arrow_asc.gif" width="16px" height="16px" />';
+		$view->arrowUp = '<img src="plugins/MultiSites/images/arrow_desc.gif" width="16px" height="16px" />';
+		$view->evolutionBy = $this->evolutionBy;
+		$view->period = $this->period;
+		$view->date = $this->date;
+		$view->page = $this->page;
+		$view->limit = $this->limit;
+		$view->orderBy = $this->orderBy;
+		$view->order = $this->order;
+		$view->dateToStr = $this->dateToStr;
+
+		$this->setPeriodVariablesView($view);
+		$period = Piwik_Period::factory(Piwik_Common::getRequestVar('period'), Piwik_Date::factory($this->strDate));
+		$view->prettyDate = $period->getLocalizedLongString();
+
+		return $view->render();
+	}
+
+	private function getSummary($lastVisits, $currentVisits, $mySites, $type)
+	{
+
+		$currentVisitsArray = $currentVisits->getArray();
+		$lastVisitsArray = $lastVisits->getArray();
+		$summaryArray = array();
+		foreach($mySites as $site)
+		{
+			$idSite = $site['idsite'];
+			$current = array_shift($currentVisitsArray[$idSite]->getColumn(0));
+			$last = array_shift($lastVisitsArray[$idSite]->getColumn(0));
+			$summaryArray[$idSite] = $this->fillSummary($current, $last, $this->evolutionBy);
+		}
+		return $summaryArray;
+	}
+
+	private function fillSummary($current, $last, $type)
+	{
+		if(($current == 0 && $last == 0) || $current == 0)
+		{
+			$summary = 0;
+		}
+		elseif($last == 0)
+		{
+			$summary = 100;
+		}
+		else
+		{
+			$summary = (($current - $last) / $last) * 100;
+		}
+
+		$output = round($summary,2);
+
+		return $output;
+	}
+
+	public function getEvolutionGraph( $fetch = false, $columns = false)
+	{
+		$view = $this->getLastUnitGraph($this->pluginName, __FUNCTION__, "VisitsSummary.get");
+		if(empty($columns))
+		{
+			$columns = Piwik_Common::getRequestVar('columns');
+		}
+		$view->setColumnsToDisplay($columns);
+		return $this->renderView($view, $fetch);
+	}
+}
diff --git a/plugins/MultiSites/MultiSites.php b/plugins/MultiSites/MultiSites.php
new file mode 100644
index 0000000000..0123aaa08a
--- /dev/null
+++ b/plugins/MultiSites/MultiSites.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Piwik - Open source web analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html Gpl v3 or later
+ * @version $Id$
+ *
+ * @category Piwik_Plugins
+ * @package Piwik_MultiSites
+ */
+
+/**
+ *
+ * @package Piwik_MultiSites
+ */
+class Piwik_MultiSites extends Piwik_Plugin
+{
+	public function getInformation()
+	{
+		return array(
+			'name' => 'MultiSites',
+			'description' => 'Displays multi-site executive summary/statistics. Developed by <a href="http://blogvertising.pl/">Brand New Media LLC</a>. Currently maintained as a core Piwik plugin.',
+			'author' => 'Piwik',
+			'author_homepage' => "http://piwik.org/",
+			'version' => Piwik_Version::VERSION,
+		);
+	}
+
+	public function getListHooksRegistered()
+	{
+		return array(
+			'template_css_import' => 'css',
+			'template_js_import' => 'js',
+		);
+	}
+
+	public function css()
+	{
+		echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"plugins/MultiSites/templates/styles.css\" />\n";
+	}
+
+	public function js()
+	{
+		echo "<script type=\"text/javascript\" src=\"plugins/MultiSites/templates/common.js\"></script>\n";
+	}
+}
diff --git a/plugins/MultiSites/images/arrow_asc.gif b/plugins/MultiSites/images/arrow_asc.gif
new file mode 100644
index 0000000000..f0bb6a4ea6
--- /dev/null
+++ b/plugins/MultiSites/images/arrow_asc.gif
diff --git a/plugins/MultiSites/images/arrow_desc.gif b/plugins/MultiSites/images/arrow_desc.gif
new file mode 100644
index 0000000000..e8234178ef
--- /dev/null
+++ b/plugins/MultiSites/images/arrow_desc.gif
diff --git a/plugins/MultiSites/images/arrow_down.png b/plugins/MultiSites/images/arrow_down.png
new file mode 100644
index 0000000000..efa4624a05
--- /dev/null
+++ b/plugins/MultiSites/images/arrow_down.png
diff --git a/plugins/MultiSites/images/arrow_up.png b/plugins/MultiSites/images/arrow_up.png
new file mode 100644
index 0000000000..800536e52e
--- /dev/null
+++ b/plugins/MultiSites/images/arrow_up.png
diff --git a/plugins/MultiSites/images/door_in.png b/plugins/MultiSites/images/door_in.png
new file mode 100644
index 0000000000..41676a0a5b
--- /dev/null
+++ b/plugins/MultiSites/images/door_in.png
diff --git a/plugins/MultiSites/images/link.gif b/plugins/MultiSites/images/link.gif
new file mode 100644
index 0000000000..e160f23b63
--- /dev/null
+++ b/plugins/MultiSites/images/link.gif
diff --git a/plugins/MultiSites/images/loading-blue.gif b/plugins/MultiSites/images/loading-blue.gif
new file mode 100644
index 0000000000..8a3f8c01b6
--- /dev/null
+++ b/plugins/MultiSites/images/loading-blue.gif
diff --git a/plugins/MultiSites/images/stop.png b/plugins/MultiSites/images/stop.png
new file mode 100644
index 0000000000..84d56a4532
--- /dev/null
+++ b/plugins/MultiSites/images/stop.png
diff --git a/plugins/MultiSites/templates/common.js b/plugins/MultiSites/templates/common.js
new file mode 100644
index 0000000000..0f6b878f0a
--- /dev/null
+++ b/plugins/MultiSites/templates/common.js
@@ -0,0 +1,271 @@
+function setRowData (idsite, visits, actions, unique, name, url, visitsSummaryValue, actionsSummaryValue, uniqueSummaryValue)
+{
+	this.idsite = idsite;
+	this.visits = visits;
+	this.unique = unique;
+	this.name = name;
+	this.url = url;
+	this.actions = actions;
+	this.visitsSummaryValue = parseFloat(visitsSummaryValue);
+	this.actionsSummaryValue = parseFloat(actionsSummaryValue);
+	this.uniqueSummaryValue = parseFloat(uniqueSummaryValue);
+}
+
+function setOrderBy(allSites, params, mOrderBy)
+{
+	if(params['mOrderBy'] == mOrderBy)
+	{
+		if(params['order'] == 'desc')
+		{
+			params['order'] = 'asc';
+		}
+		else
+		{
+			params['order'] = 'desc';
+		}
+	}
+	params['mOrderBy'] = mOrderBy;
+	prepareRows(allSites, params);
+	return params;
+}
+
+function prepareRows(allUnsortedSites, params)
+{
+	var allSites;
+	$("#tb").find("tr:not(:last)").remove();
+	$("#next").html('');
+	$("#prev").html('');
+	$(".asc").hide();
+	$(".desc").hide();
+	var mOrderBy = params['mOrderBy'];
+	if(mOrderBy.indexOf('summary') != -1)
+	{
+		$("#evolution_" + params['order']).show();
+	}
+	else
+	{
+		$("#" + mOrderBy + '_' + params['order']).show();
+	}
+
+	allSites = orderBy(allUnsortedSites, params);
+	if(allSites.length > params['limit'])
+	{
+		allSites = limitBy(allSites, params);
+	}
+
+	displayRows(allSites.reverse(), params);
+	showPagination(allUnsortedSites, params);
+	params['sitesVisible'] = allSites;
+
+}
+
+function orderBy(allSites, params)
+{
+
+	if(params['mOrderBy'] == 'names')
+	{
+		allSites.sort(function(a,b)
+		{
+
+			if (a['name'].toLowerCase() == b['name'].toLowerCase())
+			{
+				return 0;
+			}
+			return (a['name'].toLowerCase() < b['name'].toLowerCase()) ? 1 : -1;
+		});
+	}
+
+	else if(params['mOrderBy'] == 'visits')
+	{
+		allSites.sort(function(a,b)
+		{
+			if (a['visits'] == b['visits']) {
+				return 0;
+			}
+			return (a['visits'] < b['visits']) ? 1 : -1;
+		}
+		);
+	}
+
+	else if(params['mOrderBy'] == 'actions')
+	{
+		allSites.sort(function (a,b)
+		{
+			if (a['actions'] == b['actions']) {
+				return 0;
+			}
+			return (a['actions'] < b['actions']) ? 1 : -1;
+		});
+	}
+	else if(params['mOrderBy'] == 'unique')
+	{
+		allSites.sort(function (a,b)
+		{
+			if (a['unique'] == b['unique']) {
+				return 0;
+			}
+			return (a['unique'] < b['unique']) ? 1 : -1;
+		});
+	}
+	else if(params['mOrderBy'] == 'uniqueSummary')
+	{
+		allSites.sort(function (a,b)
+		{
+			if (a['uniqueSummaryValue'] == b['uniqueSummaryValue']) {
+				return 0;
+			}
+			return (a['uniqueSummaryValue'] - b['uniqueSummaryValue'] <= 0.01) ? 1 : -1;
+		});
+	}
+	else if(params['mOrderBy'] == 'actionsSummary')
+	{
+		allSites.sort(function (a,b)
+		{
+			if (a['actionsSummaryValue'] == b['actionsSummaryValue']) {
+				return 0;
+			}
+
+	return (a['actionsSummaryValue'] - b['actionsSummaryValue'] <= 0.01) ? 1 : -1;
+			});
+		}
+	else if(params['mOrderBy'] == 'visitsSummary')
+	{
+
+		allSites.sort(function (a,b)
+		{
+			if (a['visitsSummaryValue'] == b['visitsSummaryValue']) {
+				return 0;
+			}
+
+	return (a['visitsSummaryValue'] - b['visitsSummaryValue'] <= 0.01) ? 1 : -1;
+		});
+	}
+
+
+	if(params['order'] == 'desc')
+	{
+		allSites.reverse();
+	}
+
+	return allSites;
+}
+
+function limitBy(allSites, params)
+{
+	var begin  = (params['page'] - 1) * params['limit'];
+	var end = (params['page'] * params['limit']);
+	return	allSites.slice(begin, end);
+}
+
+function switchEvolution(params)
+{
+	$('.actions').hide();
+	$('.unique').hide();
+	$('.visits').hide();
+	$('.' + params['evolutionBy']).show();
+	sitesVisible = params['sitesVisible'];
+	for(i  = 0;  i < allSites.length; i++)
+	{
+		$('#sparkline_' + allSites[i].idsite).html(getSparklineImg(allSites[i].idsite, params['evolutionBy'], params));
+	}
+
+}
+
+
+
+function displayRows(allSites, params)
+{
+	var table = document.getElementById('tb');
+	var trow = table.insertRow(0);
+	for(var i  = 0;  i < allSites.length; i++)
+	{
+		var str = params['row'];
+		str = str.replace(/%uniqueSummary%/g, getImageForSummary(allSites[i].uniqueSummaryValue));
+		str = str.replace(/%actionsSummary%/g, getImageForSummary(allSites[i].actionsSummaryValue));
+		str = str.replace(/%visitsSummary%/g, getImageForSummary(allSites[i].visitsSummaryValue));
+		str = str.replace(/%sparkline%/g, getSparklineImg(allSites[i].idsite, params['evolutionBy'], params));
+		str = str.replace(/%actions%/g, allSites[i].actions);
+		str = str.replace(/%idsite%/g, allSites[i].idsite);
+		str = str.replace(/%visits%/g, allSites[i].visits);
+		str = str.replace(/%name%/g, allSites[i].name);
+		str = str.replace(/%unique%/g, allSites[i].unique);
+		str = str.replace(/%main_url%/g, allSites[i].url);
+		str = str.replace(/%date%/g, params['date']);
+		str = str.replace(/%period%/g, params['period']);
+		trow = table.insertRow(0);
+		trow.innerHTML = str;
+		trow.setAttribute('id', 'row_' + allSites[i].idsite);
+		trow.setAttribute('class', 'table_row');
+	}
+
+	$(".table_row").show();
+	$('.actions').hide();
+	$('.unique').hide();
+	$('.visits').hide();
+	$('.' + params['evolutionBy']).show();
+	$("#content").show();
+}
+
+function getSparklineImg(id, column, params)
+{
+    if(column == 'unique')
+    {
+        column = 'uniq_visitors';
+    }
+     return '<img class="sparkline" alt="" src="?module=MultiSites&action=getEvolutionGraph&period=' + params['period'] + '&date=' + params['dateToStr'] + '&evolutionBy=' + params['evolutionBy'] + '&columns[]=nb_' + column  + '&idSite=' + id + '&idsite=' + id + '&viewDataTable=sparkline" width="100" height="25"  />';
+}
+
+
+
+function showPagination(allSites, params)
+{
+	if ((params['page'] * params['limit']) < allSites.length)
+	{
+		var html = '<span style="cursor:pointer;" class="pointer" onClick="changePage(allSites, params, \'next\');">' + params['next'] + ' &#187;</span>';
+		$("#next").html(html);
+	}
+	if(params['page'] > 1)
+	{
+		html = '<span style="cursor:pointer;" onClick="changePage(allSites, params, \'prev\');">&#171; ' + params['prev'] + '</span>'
+		$("#prev").html(html);
+	}
+	var start = (params['page'] - 1) * params['limit'] + 1;
+	var count = allSites.length;
+	var end = parseInt(start) + parseInt(params['limit']);
+	if(end > count) end = count;
+	html = '<span>' + (start ) + ' - ' + end + ' of ' + count + '</span>';
+	$("#counter").html(html);
+}
+
+function changePage(allSites, params, kind)
+{
+	if(kind == 'next')
+	{
+		params['page']++;
+	}
+	else
+	{
+		params['page']--;
+	}
+	prepareRows(allSites, params);
+	return params;
+}
+
+
+function getImageForSummary(value)
+{
+	if(value > 0)
+	{
+		return '<img src="plugins/MultiSites/images/arrow_up.png"  alt="" /> <b style="color: green;">' + value + ' %</b>';
+	}
+	else if(value == 0)
+	{
+		return '<img src="plugins/MultiSites/images/stop.png"  alt="" /> <b>' + value + '%</b>';
+	}
+	else
+	{
+		return '<img src="plugins/MultiSites/images/arrow_down.png"  alt="" /> <b style="color: red;">' + value +' %</b>';
+	}
+}
+
+
diff --git a/plugins/MultiSites/templates/getSitesInfo.tpl b/plugins/MultiSites/templates/getSitesInfo.tpl
new file mode 100644
index 0000000000..2959855fc3
--- /dev/null
+++ b/plugins/MultiSites/templates/getSitesInfo.tpl
@@ -0,0 +1,68 @@
+<span id="loadingDataTable"><img src="{$piwikUrl}themes/default/images/loading-blue.gif" /> {'General_LoadingData'|translate}</span>
+<div id="multisites" style="margin: auto">
+<div id="main">
+{include file='MultiSites/templates/row.tpl' assign=row}
+<script type="text/javascript">
+var allSites = new Array();
+var params = new Array();
+{foreach from=$mySites key=i item=site}
+	allSites[{$i}] = new setRowData({$site.idsite}, {$site.visits}, {$site.actions}, {$site.unique}, '{$site.name}', '{$site.main_url}', '{$site.visitsSummaryValue|replace:",":"."}', '{$site.actionsSummaryValue|replace:",":"."}', '{$site.uniqueSummaryValue|replace:",":"."}');
+{/foreach}
+params['period'] = '{$period}';
+	params['date'] = '{$date}';
+	params['dateToStr'] = '{$dateToStr}';
+	params['evolutionBy'] = '{$evolutionBy}';
+	params['mOrderBy'] = '{$orderBy}';
+	params['order'] = '{$order}';
+	params['site'] = '{$site}';
+	params['limit'] = '{$limit}';
+	params['page'] = 1;
+	params['prev'] = "{'General_Previous'|translate}";
+	params['next'] = "{'General_Next'|translate}";
+	params['row'] = '{$row|escape:"javascript"}';
+</script>
+
+{postEvent name="template_headerMultiSites"}
+<table id="mt" class="dataTable" cellspacing="0" style="width: 90%; margin: auto">
+<thead>
+<th width="30px" class="label"></th>
+<th width="30px"></th>
+<th style="text-align:center">
+	<span style="cursor:pointer;" onClick="params = setOrderBy(allSites, params, 'names');">{'General_ColumnLabel'|translate}</span><span id="names_asc" class="asc" style="display: none;">{$arrowDown}</span><span id="names_desc" class="desc" style="display: none;">{$arrowUp}</span >
+</th>
+<th style="text-align:center">
+	<span style="cursor:pointer;" onClick="params = setOrderBy(allSites, params, 'visits');">{'General_ColumnNbVisits'|translate}</span><span id="visits_asc" class="asc" style="display: none;">{$arrowDown}</span><span id="visits_desc" class="desc" style="display: none;">{$arrowUp}</span>
+</th>
+<th style="text-align:center">
+	<span style="cursor:pointer;" onClick="params = setOrderBy(allSites, params, 'actions');">{'General_ColumnPageviews'|translate}</span><span id="actions_asc" class="asc" style="display: none;">{$arrowDown}</span><span id="actions_desc" class="desc" style="display: none;">{$arrowUp}</span>
+</th>
+<th style="text-align:center">
+	<span style="cursor:pointer;" onClick="params = setOrderBy(allSites, params, 'unique');">{'General_ColumnNbUniqVisitors'|translate}</span><span id="unique_asc" class="asc" style="display: none;">{$arrowDown}</span><span id="unique_desc" class="desc" style="display: none;">{$arrowUp}</span>
+</th>
+<th style="text-align:center" colspan="2">
+	<span style="cursor:pointer;" onClick="params = setOrderBy(allSites, params, $('#evolution_selector').val() + '_summary');"> Evolution</span><span id="evolution_asc" class="asc" style="display: none;">{$arrowDown}</span><span id="evolution_desc" class="desc" style="display: none;">{$arrowUp}</span>
+<select class="selector" id="evolution_selector" onchange="params['evolutionBy'] = $('#evolution_selector').val(); switchEvolution(params);">
+		<option value="visits" {if $evolutionBy eq 'visits'} selected {/if}>{'General_ColumnNbVisits'|translate}</option>
+		<option value="actions" {if $evolutionBy eq 'actions'} selected {/if}>{'General_ColumnPageviews'|translate}</option>
+		<option value="unique"{if $evolutionBy eq 'unique'} selected {/if}>{'General_ColumnNbUniqVisitors'|translate}</option>
+	</select>
+</th>
+</thead>
+<tbody id="tb">
+</tbody>
+<tfoot>
+<tr row_id="last">
+<td colspan="8" style="text-align: center" class="clean">
+<span id="prev" class="pager"  style="padding-right: 20px;"></span>
+<span id="counter">
+</span>
+<span id="next" class="clean" style="padding-left: 20px;"></span>
+</td>
+</tr>
+</tfoot>
+</table>
+<script type="text/javascript">
+prepareRows(allSites, params, '{$orderBy}');
+</script>
+</div>
+</div>
diff --git a/plugins/MultiSites/templates/index.tpl b/plugins/MultiSites/templates/index.tpl
new file mode 100644
index 0000000000..12b9f95eec
--- /dev/null
+++ b/plugins/MultiSites/templates/index.tpl
@@ -0,0 +1 @@
+{include file="CoreHome/templates/index.tpl"}
diff --git a/plugins/MultiSites/templates/row.tpl b/plugins/MultiSites/templates/row.tpl
new file mode 100644
index 0000000000..cb5864f3ba
--- /dev/null
+++ b/plugins/MultiSites/templates/row.tpl
@@ -0,0 +1,33 @@
+<td style="width: 30px" class="label">
+    <div style="width: 10px; margin: auto">
+	<a target="_blank" href="%main_url%"><img src="plugins/MultiSites/images/link.gif"></a>
+    </div>
+</td>
+<td>
+    <div style="width: 20px; margin: auto">
+	<a href="index.php?module=CoreHome&action=index&date=%date%&period=%period%&idSite=%idsite%"><img src="plugins/MultiSites/images/door_in.png"></a>
+    </div>
+</td>
+<td>
+    %name%
+</td>
+<td>
+    %visits%
+</td>
+<td>
+    %actions%&nbsp;
+</td>
+<td>
+    %unique%&nbsp;
+</td>
+<td>
+    <div class="visits" style="display:none">%visitsSummary%</div>
+    <div class="actions"style="display:none">%actionsSummary%</div>
+    <div class="unique" >%uniqueSummary%</div>
+</td>
+
+<td>
+    <div id="sparkline_%idsite%" style="width: 100px; margin: auto">
+	%sparkline%
+    </div
+</td>
diff --git a/plugins/MultiSites/templates/styles.css b/plugins/MultiSites/templates/styles.css
new file mode 100644
index 0000000000..9473e04928
--- /dev/null
+++ b/plugins/MultiSites/templates/styles.css
@@ -0,0 +1,27 @@
+@CHARSET "UTF-8";
+
+
+.indicator {
+	background-image: url("../images/loading-blue.gif");
+	background-position:	center;
+	background-repeat: no-repeat;
+	height: 20px;
+	width: 60px;
+	margin: auto;
+	border: 0px !important;
+}
+
+.clean
+{
+    border: 0px !important;
+}
+
+#multisites td, #multisites tr, #multisites .sparkline
+{
+    text-align: center;
+    vertical-align: middle;
+    padding: 1px !important;
+    margin: 0px !important;
+}
+
+