review jqplot
This commit is contained in:
Etienne Roudeix
@@ -43,46 +43,46 @@ class HomeController extends BaseAdminController
|
||||
{
|
||||
$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 */
|
||||
$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(
|
||||
$this->getRequest()->request->get('month', date('m')),
|
||||
$this->getRequest()->request->get('year', date('Y'))
|
||||
$this->getRequest()->query->get('month', date('m')),
|
||||
$this->getRequest()->query->get('year', date('Y'))
|
||||
);
|
||||
|
||||
/* new customers */
|
||||
$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(
|
||||
$this->getRequest()->request->get('month', date('m')),
|
||||
$this->getRequest()->request->get('year', date('Y'))
|
||||
$this->getRequest()->query->get('month', date('m')),
|
||||
$this->getRequest()->query->get('year', date('Y'))
|
||||
);
|
||||
|
||||
/* orders */
|
||||
$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(
|
||||
$this->getRequest()->request->get('month', date('m')),
|
||||
$this->getRequest()->request->get('year', date('Y'))
|
||||
$this->getRequest()->query->get('month', date('m')),
|
||||
$this->getRequest()->query->get('year', date('Y'))
|
||||
);
|
||||
|
||||
/* first order */
|
||||
$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(
|
||||
$this->getRequest()->request->get('month', date('m')),
|
||||
$this->getRequest()->request->get('year', date('Y'))
|
||||
$this->getRequest()->query->get('month', date('m')),
|
||||
$this->getRequest()->query->get('year', date('Y'))
|
||||
);
|
||||
|
||||
/* cancelled orders */
|
||||
$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(
|
||||
$this->getRequest()->request->get('month', date('m')),
|
||||
$this->getRequest()->request->get('year', date('Y')),
|
||||
$this->getRequest()->query->get('month', date('m')),
|
||||
$this->getRequest()->query->get('year', date('Y')),
|
||||
array(5)
|
||||
);
|
||||
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
|
||||
<div class="title title-without-tabs clearfix">
|
||||
{intl l='Dashboard'}
|
||||
<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 disabled"><span class="glyphicon glyphicon-calendar"></span></button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
||||
<div class="btn-group pull-right">
|
||||
<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 js-stats-change-month" data-change="next"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,12 +33,6 @@
|
||||
|
||||
<div class="jqplot-content">
|
||||
<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>
|
||||
@@ -255,144 +249,149 @@
|
||||
|
||||
{javascripts file='assets/js/jqplot/jquery.jqplot.min.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
|
||||
{javascripts file='assets/js/jqplot/plugins/jqplot.highlighter.min.js'}
|
||||
<script type="text/javascript" src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/jqplot/plugins/jqplot.barRenderer.min.js'}
|
||||
<script type="text/javascript" src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/jqplot/plugins/jqplot.pieRenderer.min.js'}
|
||||
<script type="text/javascript" src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/jqplot/plugins/jqplot.highlighter.min.js'}
|
||||
<script type="text/javascript" src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/jqplot/plugins/jqplot.barRenderer.min.js'}
|
||||
<script type="text/javascript" src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/jqplot/plugins/jqplot.pieRenderer.min.js'}
|
||||
<script type="text/javascript" src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
|
||||
<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'}",
|
||||
series = [],
|
||||
seriesColors = [],
|
||||
ticks = [],
|
||||
days = 0,
|
||||
jqplot;
|
||||
|
||||
var options = {
|
||||
animate: true,
|
||||
axesDefaults: {
|
||||
tickOptions: { showMark: true, showGridline: true }
|
||||
var jQPlotsOptions = {
|
||||
animate: true,
|
||||
axesDefaults: {
|
||||
tickOptions: { showMark: true, showGridline: true }
|
||||
},
|
||||
axes: {
|
||||
xaxis: {
|
||||
borderColor: '#ccc',
|
||||
ticks : [],
|
||||
tickOptions: { showGridline: false }
|
||||
},
|
||||
axes: {
|
||||
xaxis: {
|
||||
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];
|
||||
}
|
||||
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){
|
||||
|
||||
// Get initial data Json
|
||||
$.getJSON(url)
|
||||
.done(jsonSuccessLoad)
|
||||
.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]);
|
||||
// Return axis value : data value
|
||||
//return jQPlotsOptions.axes.xaxis.ticks[pointIndex][1] + ': ' + plot.data[seriesIndex][pointIndex][1];
|
||||
return plot.data[seriesIndex][pointIndex][1];
|
||||
}
|
||||
|
||||
// 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>
|
||||
{/javascripts}
|
||||
{/block}
|
||||
Reference in New Issue
Block a user