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
parent e5f5570d2b
commit 00dab8e7ec
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)
); );

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

@@ -12,10 +12,10 @@
<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,144 +249,149 @@
{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}
{javascripts file='assets/js/jqplot/plugins/jqplot.barRenderer.min.js'} {javascripts file='assets/js/jqplot/plugins/jqplot.barRenderer.min.js'}
<script type="text/javascript" src="{$asset_url}"></script> <script type="text/javascript" src="{$asset_url}"></script>
{/javascripts} {/javascripts}
{javascripts file='assets/js/jqplot/plugins/jqplot.pieRenderer.min.js'} {javascripts file='assets/js/jqplot/plugins/jqplot.pieRenderer.min.js'}
<script type="text/javascript" src="{$asset_url}"></script> <script type="text/javascript" src="{$asset_url}"></script>
{/javascripts} {/javascripts}
<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 = [], animate: true,
seriesColors = [], axesDefaults: {
ticks = [], tickOptions: { showMark: true, showGridline: true }
days = 0, },
jqplot; axes: {
xaxis: {
var options = { borderColor: '#ccc',
animate: true, ticks : [],
axesDefaults: { tickOptions: { showGridline: false }
tickOptions: { showMark: true, showGridline: true }
}, },
axes: { yaxis: {
xaxis: { tickOptions: { showGridline: true, showMark: false, showLabel: false, shadow: false }
borderColor: '#ccc',
ticks : ticks,
tickOptions: { showGridline: false }
},
yaxis: {
tickOptions: { showGridline: true, showMark: false, showLabel: false, shadow: false }
}
},
seriesDefaults: {
lineWidth: 3,
shadow : false,
markerOptions: { shadow : false, style: 'filledCircle', size: 12 }
},
grid: {
background: '#FFF',
shadow : false,
borderColor : '#FFF'
},
highlighter: {
show: true,
sizeAdjust: 7,
tooltipLocation: 'n',
tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
// Return axis value : data value
return ticks[pointIndex][1] + ': ' + plot.data[seriesIndex][pointIndex][1];
}
} }
}; },
seriesDefaults: {
lineWidth: 3,
shadow : false,
markerOptions: { shadow : false, style: 'filledCircle', size: 12 }
},
grid: {
background: '#FFF',
shadow : false,
borderColor : '#FFF'
},
highlighter: {
show: true,
sizeAdjust: 7,
tooltipLocation: 'n',
tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
// Get initial data Json // Return axis value : data value
$.getJSON(url) //return jQPlotsOptions.axes.xaxis.ticks[pointIndex][1] + ': ' + plot.data[seriesIndex][pointIndex][1];
.done(jsonSuccessLoad) return plot.data[seriesIndex][pointIndex][1];
.fail(jsonFailLoad);
function initJqplotData(series, seriesColors, options, json){
$('[data-toggle="jqplot-serie"].active').each(function(i){
var position = $(this).index() - 1;
series.push(json.series[position].data);
seriesColors.push(json.series[position].color);
});
// Number of days to display ( = data.length in one serie)
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
for(var i = 1; i < (days+1); i++){
ticks.push([i-1, i]);
} }
// Start jqplot
var elementId = $elem.attr('id');
jqplot = $.jqplot(elementId, series, options);
$('[data-toggle="jqplot"]').each(function(){
$(this).click(function(){
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);
}
});
});
$(window).bind('resize', function(event, ui) {
jqplot.replot( { resetAxes: true } );
});
} }
};
// Get initial data Json
$.getJSON(url)
.done(function(data) {
jQplotData = data;
jsonSuccessLoad();
})
.fail(jsonFailLoad);
$('[data-toggle="jqplot"]').click(function(){
$(this).toggleClass('active');
jsonSuccessLoad();
}); });
$('.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);
seriesColors.push(json.series[position].color);
});
// Number of days to display ( = data.length in one serie)
var days = json.series[0].data.length;
// Add days to xaxis
var ticks = [];
for(var i = 1; i < (days+1); i++){
ticks.push([i-1, i]);
}
jQPlotsOptions.axes.xaxis.ticks = ticks;
// Graph title
jQPlotsOptions.title = json.title;
// Graph series colors
jQPlotsOptions.seriesColors = seriesColors;
return series;
}
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) {
jQPlotInstance.replot( { resetAxes: true } );
});
}
});
</script> </script>
{/javascripts}
{/block} {/block}