From 8024a226c747a99e09d309cbb0208a268a8451c6 Mon Sep 17 00:00:00 2001
From: BeezyT <timo@ezdesign.de>
Date: Thu, 22 Mar 2012 17:27:26 +0000
Subject: [PATCH] refs #534 assets for row evolution
git-svn-id: http://dev.piwik.org/svn/trunk@6095 59fd770c-687e-43c8-a1e3-f5a4ff64c105
---
lang/en.php | 9 ++
plugins/CoreHome/templates/jqplot.css | 126 ++++++++++++++++++
.../templates/popup_multirowevolution.tpl | 35 +++++
.../CoreHome/templates/popup_rowevolution.tpl | 31 +++++
plugins/ExampleUI/Controller.php | 1 +
themes/default/images/row_evolution.png | Bin 0 -> 1934 bytes
6 files changed, 202 insertions(+)
create mode 100644 plugins/CoreHome/templates/popup_multirowevolution.tpl
create mode 100644 plugins/CoreHome/templates/popup_rowevolution.tpl
create mode 100644 themes/default/images/row_evolution.png
diff --git a/lang/en.php b/lang/en.php
index 9fb67a3e02..f69f33aeff 100644
--- a/lang/en.php
+++ b/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',
);
diff --git a/plugins/CoreHome/templates/jqplot.css b/plugins/CoreHome/templates/jqplot.css
index 728e5da159..b8797b373b 100644
--- a/plugins/CoreHome/templates/jqplot.css
+++ b/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;
diff --git a/plugins/CoreHome/templates/popup_multirowevolution.tpl b/plugins/CoreHome/templates/popup_multirowevolution.tpl
new file mode 100644
index 0000000000..7e5fd2d416
--- /dev/null
+++ b/plugins/CoreHome/templates/popup_multirowevolution.tpl
@@ -0,0 +1,35 @@
+<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">» {'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
diff --git a/plugins/CoreHome/templates/popup_rowevolution.tpl b/plugins/CoreHome/templates/popup_rowevolution.tpl
new file mode 100644
index 0000000000..bbbed6cbed
--- /dev/null
+++ b/plugins/CoreHome/templates/popup_rowevolution.tpl
@@ -0,0 +1,31 @@
+<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">» {'RowEvolution_PickARow'|translate}</a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/plugins/ExampleUI/Controller.php b/plugins/ExampleUI/Controller.php
index b778b9f318..3a0d18e1ba 100644
--- a/plugins/ExampleUI/Controller.php
+++ b/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);
}
diff --git a/themes/default/images/row_evolution.png b/themes/default/images/row_evolution.png
new file mode 100644
index 0000000000000000000000000000000000000000..7423c473ccede74c8aae1585d50aa79d140aea8c
GIT binary patch
literal 1934
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
O12$InmL(QGvHt*^v|oGx
literal 0
HcmV?d00001
--
GitLab