refs #534 assets for row evolution

git-svn-id: http://dev.piwik.org/svn/trunk@6095 59fd770c-687e-43c8-a1e3-f5a4ff64c105

lang/en.php

@@ -1527,4 +1527,13 @@ Note: this token will expire in 24 hrs.',
 	'PDFReports_ReportIncludeNWebsites' => 'The report will include main metrics for all websites that have at least one visit (from the %s websites currently available).',
 	'ImageGraph_PluginDescription' => 'Generate beautiful static PNG Graph images for any Piwik report.',
 	'ImageGraph_ColumnOrdinateMissing' => 'The column \'%s\' was not found in this report.',
+	'RowEvolution_AvailableMetrics' => 'Metrics for',
+	'RowEvolution_MetricDetailsText' => 'between %s and %s, %s over the period',
+	'RowEvolution_Documentation' => 'Click the metrics to display them in the large evolution graph. Use shift-click to display multiple metrics at once.',
+	'RowEvolution_CompareRows' => 'Compare records',
+	'RowEvolution_ComparingRecords' => 'Comparing %s rows',
+	'RowEvolution_CompareDocumentation' => 'Click the link below and open this popup for another row from the same table to compare multiple records.<br />Use shift-click to mark the row for comparison without opening this popup.',
+	'RowEvolution_PickARow' => 'Pick a row to compare',
+	'RowEvolution_PickAnotherRow' => 'Pick another row to compare',
+	'RowEvolution_MultiRowEvolutionTitle' => 'Evolution of multiple rows',
 );

plugins/CoreHome/templates/jqplot.css

@@ -99,6 +99,132 @@
     font-size: 1.2em;
 }
 
+
+/**
+ * ROW EVOLUTION POPUP
+ */
+
+.rowevolution {
+	position: relative;
+	overflow: hidden;
+}
+
+.rowevolution h2 {
+	font-size: 16px;
+	margin: 0;
+	padding: 0;
+}
+
+.rowevolution .metrics-container {
+	padding: 11px 0 5px 0;
+}
+
+.rowevolution table.metrics {
+	border-spacing: 0;
+}
+.multirowevolution table.metrics {
+	margin-bottom: 12px;
+}
+.rowevolution table.metrics,
+.multirowevolution table.metrics {
+	/* prevent select for shift-click on metric toggles */
+	user-select: none; /* CSS3 */
+    -moz-user-select: none; /* Gecko (Firefox) */
+    -khtml-user-select:none; /* Webkit (Safari, Chrome) */
+}
+
+.rowevolution table.metrics tr {
+	margin: 0;
+	padding: 0;
+	cursor: pointer;
+}
+
+.rowevolution table.metrics td {
+	vertical-align: middle;
+	text-align: left;
+	margin: 0;
+	padding: 4px 0;
+	cursor: pointer;
+}
+
+.rowevolution table.metrics td.sparkline {
+	width: 120px;
+}
+.multirowevolution table.metrics td.sparkline {
+	padding-top: 15px;
+}
+
+/** IE7 does not support inline image data, which is needed for spark lines */
+*+html .multirowevolution table.metrics td.sparkline,
+*+html .rowevolution table.metrics td.sparkline {
+	display: none;
+}
+
+.rowevolution table.metrics td.text {
+	font-size: 13px;
+	line-height: 18px;
+	color: #7E7363;
+	font-weight: bold;
+}
+.multirowevolution table.metrics td.text {
+	padding-top: 8px;
+}
+
+.rowevolution table.metrics td.text span.details {
+	font-weight: normal;
+	color: #444;
+}
+
+.rowevolution table.metrics td.text span.change {
+	display: block;
+	float: left;
+	padding-left: 15px;
+}
+
+.rowevolution table.metrics td.text span.up {
+	color: green;
+}
+
+.rowevolution table.metrics td.text span.down {
+	color: red;
+}
+
+.rowevolution-documentation {
+	font-size: 12px;
+	margin: 2px 0 5px 0;
+	padding:  5px 0 5px 23px;
+	color: #888;
+	background: url(../../../themes/default/images/help.png) no-repeat left center;
+}
+
+.rowevolution .metric-selectbox,
+.rowevolution .compare-container {
+	padding: 15px 0 5px 0;
+}
+
+.rowevolution .metric-selectbox select {
+	font-size: 13px;
+	color: #444;
+	margin: 8px 0 0 0;
+	padding: 0;
+}
+
+a.rowevolution-startmulti {
+	font-size: 12px;
+	color: #7E7363;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+a.rowevolution-startmulti:hover {
+	color: #444;
+}
+
+
+/**
+ * SERIES PICKER FOR CHARTS
+ */
+ 
 .jqplot-seriespicker {
 	display: block;
 	position: absolute;

plugins/CoreHome/templates/popup_multirowevolution.tpl

+<div class="rowevolution multirowevolution">
+	<div class="popup-title">{'RowEvolution_MultiRowEvolutionTitle'|translate|escape:'html'}</div>
+	<div class="graph">
+		{$graph}
+	</div>
+	<div class="metrics-container">
+		<h2>{$availableRecordsText|translate}</h2>
+		<table class="metrics" border="0" cellpadding="0" cellspacing="0">
+			{foreach from=$metrics item=metric}
+				<tr>
+					<td class="sparkline">
+						{$metric.sparkline}
+					</td>
+					<td class="text">
+						<span style="color:{$metric.color}">{$metric.label|escape:'html'}</span><br />
+						<span class="details">{$metric.details}</span>
+					</td>
+				</tr>
+			{/foreach}
+		</table>
+		<a href="#" class="rowevolution-startmulti">&raquo; {'RowEvolution_PickAnotherRow'|translate}</a>
+	</div>
+	{if count($availableMetrics) > 1}
+	<div class="metric-selectbox">
+		<h2>{'RowEvolution_AvailableMetrics'|translate}</h2> 
+		<select name="metric" class="multirowevoltion-metric">
+			{foreach from=$availableMetrics item=metricName key=metric}
+				<option value="{$metric|escape:'html'}"{if $selectedMetric == $metric} selected="selected"{/if}>
+					{$metricName|escape:'html'}
+				</option>
+			{/foreach}
+		</select>
+	</div>
+	{/if}
+</div>
\ No newline at end of file

plugins/CoreHome/templates/popup_rowevolution.tpl

+<div class="rowevolution">
+	<div class="graph">
+		{$graph}
+	</div>
+	<div class="metrics-container">
+		<h2>{$availableMetricsText}</h2>
+		<div class="rowevolution-documentation">
+			{'RowEvolution_Documentation'|translate}
+		</div>
+		<table class="metrics" border="0" cellpadding="0" cellspacing="0">
+			{foreach from=$metrics item=metric}
+				<tr>
+					<td class="sparkline">
+						{$metric.sparkline}
+					</td>
+					<td class="text">
+						<span style="color:{$metric.color}">{$metric.label|escape:'html'}</span>: 
+						<span class="details">{$metric.details}</span>
+					</td>
+				</tr>
+			{/foreach}
+		</table>
+	</div>
+	<div class="compare-container">
+		<h2>{'RowEvolution_CompareRows'|translate}</h2>
+		<div class="rowevolution-documentation">
+			{'RowEvolution_CompareDocumentation'|translate}
+		</div>
+		<a href="#" class="rowevolution-startmulti">&raquo; {'RowEvolution_PickARow'|translate}</a>
+	</div>
+</div>
\ No newline at end of file

plugins/ExampleUI/Controller.php

@@ -26,6 +26,7 @@ class Piwik_ExampleUI_Controller extends Piwik_Controller
 		$view->setLimit( 24 );
 		$view->disableExcludeLowPopulation();
 		$view->disableShowAllColumns();
+		$view->disableRowEvolution();
 		$view->setAxisYUnit('°C'); // useful if the user requests the bar graph
 		return $this->renderView($view);
 	}