TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

review jqplot

Browse Source
This commit is contained in:
Etienne Roudeix
2013-10-31 11:20:51 +01:00
committed by Manuel Raynaud
parent 689de106c7
commit 95be087b90
2 changed files with 151 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/lib/Thelia/Controller/Admin/HomeController.php
View File

@@ -43,46 +43,46 @@ class HomeController extends BaseAdminController
{ {
$data = new \stdClass(); $data = new \stdClass();
$data->title = "Stats on " . $this->getRequest()->request->get('month', date('m')) . "/" . $this->getRequest()->request->get('month', date('Y')); $data->title = "Stats on " . $this->getRequest()->query->get('month', date('m')) . "/" . $this->getRequest()->query->get('year', date('Y'));
/* sales */ /* sales */
$saleSeries = new \stdClass(); $saleSeries = new \stdClass();
$saleSeries->color = $this->getRequest()->request->get('sales_color', '#adadad'); $saleSeries->color = $this->getRequest()->query->get('sales_color', '#adadad');
$saleSeries->data = OrderQuery::getSaleStats( $saleSeries->data = OrderQuery::getSaleStats(
$this->getRequest()->request->get('month', date('m')), $this->getRequest()->query->get('month', date('m')),
$this->getRequest()->request->get('year', date('Y')) $this->getRequest()->query->get('year', date('Y'))
); );
/* new customers */ /* new customers */
$newCustomerSeries = new \stdClass(); $newCustomerSeries = new \stdClass();
$newCustomerSeries->color = $this->getRequest()->request->get('customers_color', '#f39922'); $newCustomerSeries->color = $this->getRequest()->query->get('customers_color', '#f39922');
$newCustomerSeries->data = CustomerQuery::getNewCustomersStats( $newCustomerSeries->data = CustomerQuery::getNewCustomersStats(
$this->getRequest()->request->get('month', date('m')), $this->getRequest()->query->get('month', date('m')),
$this->getRequest()->request->get('year', date('Y')) $this->getRequest()->query->get('year', date('Y'))
); );
/* orders */ /* orders */
$orderSeries = new \stdClass(); $orderSeries = new \stdClass();
$orderSeries->color = $this->getRequest()->request->get('orders_color', '#5cb85c'); $orderSeries->color = $this->getRequest()->query->get('orders_color', '#5cb85c');
$orderSeries->data = OrderQuery::getOrdersStats( $orderSeries->data = OrderQuery::getOrdersStats(
$this->getRequest()->request->get('month', date('m')), $this->getRequest()->query->get('month', date('m')),
$this->getRequest()->request->get('year', date('Y')) $this->getRequest()->query->get('year', date('Y'))
); );
/* first order */ /* first order */
$firstOrderSeries = new \stdClass(); $firstOrderSeries = new \stdClass();
$firstOrderSeries->color = $this->getRequest()->request->get('first_orders_color', '#5bc0de'); $firstOrderSeries->color = $this->getRequest()->query->get('first_orders_color', '#5bc0de');
$firstOrderSeries->data = OrderQuery::getFirstOrdersStats( $firstOrderSeries->data = OrderQuery::getFirstOrdersStats(
$this->getRequest()->request->get('month', date('m')), $this->getRequest()->query->get('month', date('m')),
$this->getRequest()->request->get('year', date('Y')) $this->getRequest()->query->get('year', date('Y'))
); );
/* cancelled orders */ /* cancelled orders */
$cancelledOrderSeries = new \stdClass(); $cancelledOrderSeries = new \stdClass();
$cancelledOrderSeries->color = $this->getRequest()->request->get('cancelled_orders_color', '#d9534f'); $cancelledOrderSeries->color = $this->getRequest()->query->get('cancelled_orders_color', '#d9534f');
$cancelledOrderSeries->data = OrderQuery::getOrdersStats( $cancelledOrderSeries->data = OrderQuery::getOrdersStats(
$this->getRequest()->request->get('month', date('m')), $this->getRequest()->query->get('month', date('m')),
$this->getRequest()->request->get('year', date('Y')), $this->getRequest()->query->get('year', date('Y')),
array(5) array(5)
); );

143
templates/admin/default/home.html
View File

@@ -13,9 +13,9 @@
<div class="title title-without-tabs clearfix"> <div class="title title-without-tabs clearfix">
{intl l='Dashboard'} {intl l='Dashboard'}
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-default js-stats-change-month" data-change="previous"><span class="glyphicon glyphicon-chevron-left"></span></button>
<button type="button" class="btn btn-default disabled"><span class="glyphicon glyphicon-calendar"></span></button> <button type="button" class="btn btn-default" disabled><span class="glyphicon glyphicon-calendar"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></button> <button type="button" class="btn btn-default js-stats-change-month" data-change="next"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div> </div>
</div> </div>
@@ -33,12 +33,6 @@
<div class="jqplot-content"> <div class="jqplot-content">
<div id="jqplot"></div> <div id="jqplot"></div>
<div id="sales" data-toggle="jqplot-serie" class="active"></div>
<div id="registration" data-toggle="jqplot-serie"></div>
<div id="orders" data-toggle="jqplot-serie"></div>
<div id="first-orders" data-toggle="jqplot-serie"></div>
<div id="aborted-orders" data-toggle="jqplot-serie"></div>
</div> </div>
</div> </div>
@@ -255,7 +249,7 @@
{javascripts file='assets/js/jqplot/jquery.jqplot.min.js'} {javascripts file='assets/js/jqplot/jquery.jqplot.min.js'}
<script src="{$asset_url}"></script> <script src="{$asset_url}"></script>
{/javascripts}
{javascripts file='assets/js/jqplot/plugins/jqplot.highlighter.min.js'} {javascripts file='assets/js/jqplot/plugins/jqplot.highlighter.min.js'}
<script type="text/javascript" src="{$asset_url}"></script> <script type="text/javascript" src="{$asset_url}"></script>
{/javascripts} {/javascripts}
@@ -268,18 +262,13 @@
<script> <script>
jQuery(function($){ jQuery(function($){
var $elem = $('#jqplot'); var url = "{url path='/admin/home/stats'}";
var jQplotData; // json data
var jQPlotInstance; // global instance
var url = "{url path='/admin/home/stats'}", var jQPlotsOptions = {
series = [],
seriesColors = [],
ticks = [],
days = 0,
jqplot;
var options = {
animate: true, animate: true,
axesDefaults: { axesDefaults: {
tickOptions: { showMark: true, showGridline: true } tickOptions: { showMark: true, showGridline: true }
@@ -287,7 +276,7 @@
axes: { axes: {
xaxis: { xaxis: {
borderColor: '#ccc', borderColor: '#ccc',
ticks : ticks, ticks : [],
tickOptions: { showGridline: false } tickOptions: { showGridline: false }
}, },
yaxis: { yaxis: {
@@ -311,88 +300,98 @@
tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){ tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
// Return axis value : data value // Return axis value : data value
return ticks[pointIndex][1] + ': ' + plot.data[seriesIndex][pointIndex][1]; //return jQPlotsOptions.axes.xaxis.ticks[pointIndex][1] + ': ' + plot.data[seriesIndex][pointIndex][1];
return plot.data[seriesIndex][pointIndex][1];
} }
} }
}; };
// Get initial data Json // Get initial data Json
$.getJSON(url) $.getJSON(url)
.done(jsonSuccessLoad) .done(function(data) {
jQplotData = data;
jsonSuccessLoad();
})
.fail(jsonFailLoad); .fail(jsonFailLoad);
$('[data-toggle="jqplot"]').click(function(){
function initJqplotData(series, seriesColors, options, json){ $(this).toggleClass('active');
$('[data-toggle="jqplot-serie"].active').each(function(i){ jsonSuccessLoad();
var position = $(this).index() - 1;
});
$('.js-stats-change-month').click(function(e){
$('.js-stats-change-month').attr('disabled', true);
$('#jqplot');
{literal}
$.getJSON(url, {month: 9, year: 2010})
.done(function(data) {
jQplotData = data;
jsonSuccessLoad();
})
.fail(jsonFailLoad);
{/literal}
});
function initJqplotData(json){
var series = [];
var seriesColors = [];
$('[data-toggle="jqplot"].active').each(function(i){
var position = $(this).index();
series.push(json.series[position].data); series.push(json.series[position].data);
seriesColors.push(json.series[position].color); seriesColors.push(json.series[position].color);
}); });
// Number of days to display ( = data.length in one serie) // Number of days to display ( = data.length in one serie)
days = json.series[0].data.length; var days = json.series[0].data.length;
// Graph title
options.title = json.title;
// Graph series colors
options.seriesColors = seriesColors;
}
function jsonFailLoad(data) {
$elem.append('<div class="alert alert-danger">An error occurred while reading from JSON file</div>');
}
function jsonSuccessLoad(data) {
// Init series data and colors
initJqplotData(series, seriesColors, options, data);
// Add days to xaxis // Add days to xaxis
var ticks = [];
for(var i = 1; i < (days+1); i++){ for(var i = 1; i < (days+1); i++){
ticks.push([i-1, i]); ticks.push([i-1, i]);
} }
jQPlotsOptions.axes.xaxis.ticks = ticks;
// Start jqplot // Graph title
var elementId = $elem.attr('id'); jQPlotsOptions.title = json.title;
jqplot = $.jqplot(elementId, series, options);
$('[data-toggle="jqplot"]').each(function(){ // Graph series colors
jQPlotsOptions.seriesColors = seriesColors;
$(this).click(function(){ return series;
if($('[data-toggle="jqplot-serie"].active').length > 1 || !$(this).hasClass('active')){
// Active button and jqplot-serie management
$(this).toggleClass('active');
var id = $(this).data('target');
$('[data-toggle="jqplot-serie"]#' + id).toggleClass('active');
// Reinit variables
series = [];
seriesColors = [];
// Init series data and colors
initJqplotData(series, seriesColors, options, data);
// Restart jqplot
jqplot.destroy();
jqplot = $.jqplot(elementId, series, options);
} }
}); function jsonFailLoad(data) {
$('#jqplot').html('<div class="alert alert-danger">An error occurred while reading from JSON file</div>');
}
}); function jsonSuccessLoad() {
// Init jQPlot
var series = initJqplotData(jQplotData);
console.log('END_INIT', series);
// Start jQPlot
if(jQPlotInstance) {
jQPlotInstance.destroy();
console.log('OLD_DELETED');
}
jQPlotInstance = $.jqplot("jqplot", series, jQPlotsOptions);
console.log('END_LAUNCH');
$(window).bind('resize', function(event, ui) { $(window).bind('resize', function(event, ui) {
jqplot.replot( { resetAxes: true } ); jQPlotInstance.replot( { resetAxes: true } );
}); });
} }
}); });
</script> </script>
{/javascripts}
{/block} {/block}