first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,264 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user