// Shortcuts for chart selection

This commit is contained in:
Damien Metzger
2013-10-22 14:07:19 +02:00
parent a7c7bc68a3
commit a4eeff4cd7
5 changed files with 64 additions and 42 deletions
+30 -30
View File
@@ -1,5 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:200,400,700); @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:200,400,700);
/*! /*
* Bootstrap v3.0.0 * Bootstrap v3.0.0
* *
* Copyright 2013 Twitter, Inc * Copyright 2013 Twitter, Inc
@@ -8,7 +8,7 @@
* *
* Designed and built with all the love in the world by @mdo and @fat. * Designed and built with all the love in the world by @mdo and @fat.
*/ */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* normalize.css v2.1.0 | MIT License | git.io/normalize */
/* line 22, ../bower_components/sass-bootstrap/lib/_normalize.scss */ /* line 22, ../bower_components/sass-bootstrap/lib/_normalize.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block; } display: block; }
@@ -5718,7 +5718,7 @@ th.visible-print, td.visible-print {
/* line 523, ../bower_components/sass-bootstrap/lib/_mixins.scss */ /* line 523, ../bower_components/sass-bootstrap/lib/_mixins.scss */
th.hidden-print, td.hidden-print { th.hidden-print, td.hidden-print {
display: none !important; } } display: none !important; } }
/*! /*
* Font Awesome 3.2.1 * Font Awesome 3.2.1
* the iconic font designed for Bootstrap * the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------ * ------------------------------------------------------------------------------
@@ -9312,8 +9312,7 @@ textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[ty
-webkit-box-shadow: #00a4e7 0 0 0 inset; -webkit-box-shadow: #00a4e7 0 0 0 inset;
box-shadow: #00a4e7 0 0 0 inset; } } box-shadow: #00a4e7 0 0 0 inset; } }
/*! /* Ladda
* Ladda
* http://lab.hakim.se/ladda * http://lab.hakim.se/ladda
* MIT licensed * MIT licensed
* *
@@ -10295,6 +10294,7 @@ li.sortable-placeholder {
margin: 4px -16px; } margin: 4px -16px; }
/* line 140, admin-theme/_admin-dashboard.sass */ /* line 140, admin-theme/_admin-dashboard.sass */
#dashboard #dashtrends dl { #dashboard #dashtrends dl {
cursor: pointer;
margin: 0; margin: 0;
min-height: 120px; min-height: 120px;
text-align: center; text-align: center;
@@ -10302,22 +10302,22 @@ li.sortable-placeholder {
padding: 10px; padding: 10px;
border-left: 1px solid #dddddd; border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd; } border-bottom: 1px solid #dddddd; }
/* line 148, admin-theme/_admin-dashboard.sass */ /* line 149, admin-theme/_admin-dashboard.sass */
#dashboard #dashtrends dl:first-child { #dashboard #dashtrends dl:first-child {
border-left: none; } border-left: none; }
/* line 150, admin-theme/_admin-dashboard.sass */ /* line 151, admin-theme/_admin-dashboard.sass */
#dashboard #dashtrends dl.active { #dashboard #dashtrends dl.active {
background-color: #eeeeee; } background-color: #eeeeee; }
/* line 152, admin-theme/_admin-dashboard.sass */ /* line 153, admin-theme/_admin-dashboard.sass */
#dashboard #dashtrends dt { #dashboard #dashtrends dt {
text-align: center; text-align: center;
height: 37px; height: 37px;
line-height: 1em; line-height: 1em;
font: 300 1.1em/120% "Ubuntu", sans-serif; } font: 300 1.1em/120% "Ubuntu", sans-serif; }
/* line 157, admin-theme/_admin-dashboard.sass */ /* line 158, admin-theme/_admin-dashboard.sass */
#dashboard #dashtrends svg { #dashboard #dashtrends svg {
height: 350px; } height: 350px; }
/* line 162, admin-theme/_admin-dashboard.sass */ /* line 163, admin-theme/_admin-dashboard.sass */
#dashboard #dashaddons { #dashboard #dashaddons {
background-color: white; background-color: white;
border: 1px dashed #dfdfdf; border: 1px dashed #dfdfdf;
@@ -10327,33 +10327,33 @@ li.sortable-placeholder {
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
padding: 10px 20px; } padding: 10px 20px; }
/* line 166, admin-theme/_admin-dashboard.sass */ /* line 167, admin-theme/_admin-dashboard.sass */
#dashboard #dashaddons a { #dashboard #dashaddons a {
display: block; } display: block; }
/* line 168, admin-theme/_admin-dashboard.sass */ /* line 169, admin-theme/_admin-dashboard.sass */
#dashboard #dashaddons a:hover { #dashboard #dashaddons a:hover {
text-decoration: none; } text-decoration: none; }
/* line 173, admin-theme/_admin-dashboard.sass */ /* line 174, admin-theme/_admin-dashboard.sass */
#dashboard #dashactivity svg { #dashboard #dashactivity svg {
height: 150px; } height: 150px; }
/* line 180, admin-theme/_admin-dashboard.sass */ /* line 181, admin-theme/_admin-dashboard.sass */
#dashboard .loading .data_value { #dashboard .loading .data_value {
min-width: 30px; min-width: 30px;
text-align: center; } text-align: center; }
/* line 183, admin-theme/_admin-dashboard.sass */ /* line 184, admin-theme/_admin-dashboard.sass */
#dashboard .loading .data_value:before { #dashboard .loading .data_value:before {
font-size: 0.7em; font-size: 0.7em;
font-family: FontAwesome; font-family: FontAwesome;
content: "\f021"; content: "\f021";
color: #cccccc; } color: #cccccc; }
/* line 189, admin-theme/_admin-dashboard.sass */ /* line 190, admin-theme/_admin-dashboard.sass */
#dashboard .loading .data_value span, #dashboard .loading .data_value small { #dashboard .loading .data_value span, #dashboard .loading .data_value small {
display: none; } display: none; }
/* line 191, admin-theme/_admin-dashboard.sass */ /* line 192, admin-theme/_admin-dashboard.sass */
#dashboard .loading .data_trend { #dashboard .loading .data_trend {
display: none; } display: none; }
/* line 216, admin-theme/_admin-dashboard.sass */ /* line 217, admin-theme/_admin-dashboard.sass */
.data_loading, #dashboard .data_value span, #dashboard .data_value .dash_trend { .data_loading, #dashboard .data_value span, #dashboard .data_value .dash_trend {
opacity: 1; opacity: 1;
-webkit-animation-name: bounceG; -webkit-animation-name: bounceG;
@@ -10367,7 +10367,7 @@ li.sortable-placeholder {
transform: scale(0.7); } transform: scale(0.7); }
@-webkit-keyframes bounceG { @-webkit-keyframes bounceG {
/* line 224, admin-theme/_admin-dashboard.sass */ /* line 225, admin-theme/_admin-dashboard.sass */
0% { 0% {
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@@ -10375,7 +10375,7 @@ li.sortable-placeholder {
-ms-transform: scale(0.1); -ms-transform: scale(0.1);
transform: scale(0.1); } transform: scale(0.1); }
/* line 227, admin-theme/_admin-dashboard.sass */ /* line 228, admin-theme/_admin-dashboard.sass */
100% { 100% {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
@@ -10384,7 +10384,7 @@ li.sortable-placeholder {
transform: scale(1); } } transform: scale(1); } }
@-moz-keyframes bounceG { @-moz-keyframes bounceG {
/* line 224, admin-theme/_admin-dashboard.sass */ /* line 225, admin-theme/_admin-dashboard.sass */
0% { 0% {
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@@ -10392,7 +10392,7 @@ li.sortable-placeholder {
-ms-transform: scale(0.1); -ms-transform: scale(0.1);
transform: scale(0.1); } transform: scale(0.1); }
/* line 227, admin-theme/_admin-dashboard.sass */ /* line 228, admin-theme/_admin-dashboard.sass */
100% { 100% {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
@@ -10401,7 +10401,7 @@ li.sortable-placeholder {
transform: scale(1); } } transform: scale(1); } }
@-ms-keyframes bounceG { @-ms-keyframes bounceG {
/* line 224, admin-theme/_admin-dashboard.sass */ /* line 225, admin-theme/_admin-dashboard.sass */
0% { 0% {
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@@ -10409,7 +10409,7 @@ li.sortable-placeholder {
-ms-transform: scale(0.1); -ms-transform: scale(0.1);
transform: scale(0.1); } transform: scale(0.1); }
/* line 227, admin-theme/_admin-dashboard.sass */ /* line 228, admin-theme/_admin-dashboard.sass */
100% { 100% {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
@@ -10418,7 +10418,7 @@ li.sortable-placeholder {
transform: scale(1); } } transform: scale(1); } }
@-o-keyframes bounceG { @-o-keyframes bounceG {
/* line 224, admin-theme/_admin-dashboard.sass */ /* line 225, admin-theme/_admin-dashboard.sass */
0% { 0% {
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@@ -10426,7 +10426,7 @@ li.sortable-placeholder {
-ms-transform: scale(0.1); -ms-transform: scale(0.1);
transform: scale(0.1); } transform: scale(0.1); }
/* line 227, admin-theme/_admin-dashboard.sass */ /* line 228, admin-theme/_admin-dashboard.sass */
100% { 100% {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
@@ -10435,7 +10435,7 @@ li.sortable-placeholder {
transform: scale(1); } } transform: scale(1); } }
@keyframes bounceG { @keyframes bounceG {
/* line 224, admin-theme/_admin-dashboard.sass */ /* line 225, admin-theme/_admin-dashboard.sass */
0% { 0% {
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@@ -10443,7 +10443,7 @@ li.sortable-placeholder {
-ms-transform: scale(0.1); -ms-transform: scale(0.1);
transform: scale(0.1); } transform: scale(0.1); }
/* line 227, admin-theme/_admin-dashboard.sass */ /* line 228, admin-theme/_admin-dashboard.sass */
100% { 100% {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
@@ -10451,11 +10451,11 @@ li.sortable-placeholder {
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); } } transform: scale(1); } }
/* line 231, admin-theme/_admin-dashboard.sass */ /* line 232, admin-theme/_admin-dashboard.sass */
#dash_version { #dash_version {
padding: 0 !important; padding: 0 !important;
overflow: hidden; } overflow: hidden; }
/* line 235, admin-theme/_admin-dashboard.sass */ /* line 236, admin-theme/_admin-dashboard.sass */
#dash_version iframe { #dash_version iframe {
height: 80px; height: 80px;
width: 100%; } width: 100%; }
@@ -138,6 +138,7 @@
#dashtrends_toolbar #dashtrends_toolbar
margin: 4px -16px margin: 4px -16px
dl dl
cursor: pointer
margin: 0 margin: 0
min-height: 120px min-height: 120px
text-align: center text-align: center
+2 -2
View File
@@ -325,8 +325,8 @@ class Dashtrends extends Module
$data = array('chart_type' => 'line_chart_trends', 'data' => array()); $data = array('chart_type' => 'line_chart_trends', 'data' => array());
foreach ($charts as $key => $title) foreach ($charts as $key => $title)
{ {
$data['data'][] = array('key' => $title, 'values' => $chart_data[$key], 'disabled' => ($key == 'sales' ? false : true)); $data['data'][] = array('id' => $key, 'key' => $title, 'values' => $chart_data[$key], 'disabled' => ($key == 'sales' ? false : true));
$data['data'][] = array('key' => sprintf($this->l('%s (previous period)'), $title), 'values' => $chart_data_compare[$key], 'disabled' => ($key == 'sales' ? false : true)); $data['data'][] = array('id' => $key.'_compare', 'key' => sprintf($this->l('%s (previous period)'), $title), 'values' => $chart_data_compare[$key], 'disabled' => ($key == 'sales' ? false : true));
} }
return $data; return $data;
} }
+25 -4
View File
@@ -1,3 +1,6 @@
var dashtrends_data;
var dashtrends_chart;
function line_chart_trends(widget_name, chart_details) function line_chart_trends(widget_name, chart_details)
{ {
nv.addGraph(function() { nv.addGraph(function() {
@@ -14,14 +17,32 @@ function line_chart_trends(widget_name, chart_details)
chart.yAxis chart.yAxis
.tickFormat(d3.format(',.1%')); .tickFormat(d3.format(',.1%'));
dashtrends_data = chart_details.data;
dashtrends_chart = chart;
d3.select('#dash_trends_chart1 svg') d3.select('#dash_trends_chart1 svg')
.datum(chart_details.data) .datum(chart_details.data)
.call(chart); .call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
return chart; return chart;
}); });
}
function selectDashtrendsChart(element, type)
{
$('#dashtrends_toolbar dl').removeClass('active');
$(element).addClass('active');
$.each(dashtrends_data, function(index, value) {
if (value.id == type || value.id == type + '_compare')
value.disabled = false;
else
value.disabled = true;
});
d3.select('#dash_trends_chart1 svg')
.datum(dashtrends_data)
.call(dashtrends_chart);
} }
@@ -36,32 +36,32 @@
</span> </span>
</header> </header>
<div id="dashtrends_toolbar" class="row"> <div id="dashtrends_toolbar" class="row">
<dl class="col-xs-4 col-lg-2 active"> <dl class="col-xs-4 col-lg-2 active" onclick="selectDashtrendsChart(this, 'sales');">
<dt>{l s='Sales'}</dt> <dt>{l s='Sales'}</dt>
<dd class="data_value size_l"><span id="sales_score"></span></dd> <dd class="data_value size_l"><span id="sales_score"></span></dd>
<dd class="dash_trend"><span id="sales_score_trends"></span></dd> <dd class="dash_trend"><span id="sales_score_trends"></span></dd>
</dl> </dl>
<dl class="col-xs-4 col-lg-2"> <dl class="col-xs-4 col-lg-2" onclick="selectDashtrendsChart(this, 'orders');">
<dt>{l s='Orders'}</dt> <dt>{l s='Orders'}</dt>
<dd class="data_value size_l"><span id="orders_score"></span></dd> <dd class="data_value size_l"><span id="orders_score"></span></dd>
<dd class="dash_trend"><span id="orders_score_trends"></span></dd> <dd class="dash_trend"><span id="orders_score_trends"></span></dd>
</dl> </dl>
<dl class="col-xs-4 col-lg-2"> <dl class="col-xs-4 col-lg-2" onclick="selectDashtrendsChart(this, 'average_cart_value');">
<dt>{l s='Cart Value'}</dt> <dt>{l s='Cart Value'}</dt>
<dd class="data_value size_l"><span id="cart_value_score"></span></dd> <dd class="data_value size_l"><span id="cart_value_score"></span></dd>
<dd class="dash_trend"><span id="cart_value_score_trends"></span></dd> <dd class="dash_trend"><span id="cart_value_score_trends"></span></dd>
</dl> </dl>
<dl class="col-xs-4 col-lg-2"> <dl class="col-xs-4 col-lg-2" onclick="selectDashtrendsChart(this, 'visits');">
<dt>{l s='Visits'}</dt> <dt>{l s='Visits'}</dt>
<dd class="data_value size_l"><span id="visits_score"></span></dd> <dd class="data_value size_l"><span id="visits_score"></span></dd>
<dd class="dash_trend"><span id="visits_score_trends"></span></dd> <dd class="dash_trend"><span id="visits_score_trends"></span></dd>
</dl> </dl>
<dl class="col-xs-4 col-lg-2"> <dl class="col-xs-4 col-lg-2" onclick="selectDashtrendsChart(this, 'conversion_rate');">
<dt>{l s='Conversion Rate'}</dt> <dt>{l s='Conversion Rate'}</dt>
<dd class="data_value size_l"><span id="conversion_rate_score"></span></dd> <dd class="data_value size_l"><span id="conversion_rate_score"></span></dd>
<dd class="dash_trend"><span id="conversion_rate_score_trends"></span></dd> <dd class="dash_trend"><span id="conversion_rate_score_trends"></span></dd>
</dl> </dl>
<dl class="col-xs-4 col-lg-2"> <dl class="col-xs-4 col-lg-2" onclick="selectDashtrendsChart(this, 'net_profits');">
<dt>{l s='Net Profits'}</dt> <dt>{l s='Net Profits'}</dt>
<dd class="data_value size_l"><span id="net_profits_score"></span></dd> <dd class="data_value size_l"><span id="net_profits_score"></span></dd>
<dd class="dash_trend"><span id="net_profits_score_trends"></span></dd> <dd class="dash_trend"><span id="net_profits_score_trends"></span></dd>