dev-chiefworks
264 lines
11 KiB
PHP
264 lines
11 KiB
PHP
<!-- Dashboard content -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="panel panel-white">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<?php if (!empty($errors)): ?>
|
|
<div class="text-danger"><?php echo $errors[0] ?></div>
|
|
<?php endif; ?>
|
|
<div class="col-12">
|
|
<form method="GET" action="/report/chart">
|
|
<div class="row">
|
|
<div class="col-xs-4 col-md-3 col-lg-2">
|
|
<label for="">Period 1:</label>
|
|
<input type="text"
|
|
class="form-control date-picker"
|
|
name="start_date_1"
|
|
autocomplete="off"
|
|
readonly
|
|
placeholder="Start date"
|
|
value="<?= $filterData['start_date_1'] ?? '' ?>" >
|
|
<input type="text"
|
|
class="form-control date-picker m-t-xs"
|
|
placeholder="End date"
|
|
autocomplete="off"
|
|
readonly
|
|
name="end_date_1"
|
|
value="<?= $filterData['end_date_1'] ?? '' ?>" >
|
|
</div>
|
|
|
|
<div class="col-xs-4 col-md-3 col-lg-2">
|
|
<label for="">Period 2:</label>
|
|
<input type="text"
|
|
class="form-control date-picker"
|
|
name="start_date_2"
|
|
autocomplete="off"
|
|
readonly
|
|
placeholder="Start date"
|
|
value="<?= $filterData['start_date_2'] ?? '' ?>" >
|
|
<input type="text"
|
|
class="form-control date-picker m-t-xs"
|
|
name="end_date_2"
|
|
autocomplete="off"
|
|
readonly
|
|
placeholder="End date"
|
|
value="<?= $filterData['end_date_2'] ?? '' ?>" >
|
|
</div>
|
|
|
|
<div class="col-xs-4 col-md-3 col-lg-2">
|
|
<label for="">Transport provider:</label>
|
|
<?php foreach($transport_providers_dropdown as $transport_provider) : ?>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"
|
|
name="transport_providers[]"
|
|
<?php echo in_array($transport_provider['id'], $filterData['transport_providers'] ?? []) ? 'checked' : ''; ?>
|
|
value="<?php echo $transport_provider['id']?> "><?php echo $transport_provider['name'] ?>
|
|
</label>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div class="col-xs-3 col-sm-2">
|
|
<div class="form-group">
|
|
<label for=""></label>
|
|
<div style="margin-top: 7px">
|
|
<button type="submit" class="btn-search btn btn-primary btn-sm">Search</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12" style="margin-top: 40px">
|
|
<div id="loading" class="text-center" style="display:none;">
|
|
<p><img src="/assets/images/icon/loading.gif" /> Waiting for loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="chart-section">
|
|
<div class="col-12">
|
|
<div>
|
|
<canvas id="myChart1" style="width:100%; height:700px"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12" style="margin-top: 55px">
|
|
<div class="m-t-xs">
|
|
<canvas id="myChart2" style="width:100%; height:700px"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
|
|
<script src="/assets/js/app.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('.btn-search').click(function(){
|
|
$('#chart-section').hide();
|
|
$('#loading').show();
|
|
});
|
|
|
|
addDatePicker('.date-picker');
|
|
|
|
/*********** Chart 1 ************/
|
|
var chartData1 = JSON.parse('<?php echo $chartData1 ?>');
|
|
|
|
if (!isEmpty(chartData1)) {
|
|
var ctx = document.getElementById("myChart1");
|
|
var scatterChart = new Chart(ctx, {
|
|
type: 'scatter',
|
|
data: {
|
|
datasets: chartData1.datasets
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'top'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Price comparison trend'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
id: 'x-Period1',
|
|
position: 'bottom',
|
|
distribution: 'linear',
|
|
type: 'linear',
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Period 1'
|
|
},
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return convertIndexToDate(chartData1.index_date_map_1, value);
|
|
},
|
|
min: 0,
|
|
max: getMax(chartData1.index_date_map_1),
|
|
autoSkip: true,
|
|
minRotation: 45,
|
|
}
|
|
}, {
|
|
id: 'x-Period2',
|
|
position: 'bottom',
|
|
distribution: 'linear',
|
|
type: 'linear',
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Period 2'
|
|
},
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return convertIndexToDate(chartData1.index_date_map_2, value);
|
|
},
|
|
min: 0,
|
|
max: getMax(chartData1.index_date_map_2),
|
|
autoSkip: true,
|
|
minRotation: 45,
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
position: 'left',
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Cost'
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(tooltipItem, data) {
|
|
return tooltipItem.yLabel;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/*********** Chart 2 ************/
|
|
var chartData2 = JSON.parse('<?php echo $chartData2 ?>');
|
|
if (!isEmpty(chartData2)) {
|
|
var ctx = document.getElementById("myChart2");
|
|
var scatterChart = new Chart(ctx, {
|
|
type: 'scatter',
|
|
data: {
|
|
datasets: chartData2.datasets
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'top'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
position: 'bottom',
|
|
distribution: 'linear',
|
|
type: 'linear',
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
// convert index to date
|
|
return convertIndexToDate(chartData2.general_index_date_map, value);
|
|
},
|
|
min: 0,
|
|
max: getMax(chartData2.general_index_date_map),
|
|
autoSkip: true,
|
|
minRotation: 45,
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
position: 'left',
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Cost'
|
|
},
|
|
}]
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(tooltipItem, data) {
|
|
return tooltipItem.yLabel;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
function isEmpty(obj) {
|
|
for(var key in obj) {
|
|
if(obj.hasOwnProperty(key))
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function getMax(obj) {
|
|
var arr = Object.keys( obj ).map(function ( key ) { return obj[key]; });
|
|
var max = Math.max.apply( null, arr );
|
|
|
|
return max;
|
|
}
|
|
|
|
function convertIndexToDate(obj, index) {
|
|
var date = Object.keys(obj).find(key => obj[key] === index);
|
|
|
|
if (date == undefined || !date) {
|
|
return '';
|
|
}
|
|
|
|
date = moment(date, 'YYYY-MM-DD').format('D MMM, YY');
|
|
return date;
|
|
}
|
|
</script>
|