first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,413 @@
|
||||
<style>
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.dataTables_wrapper .table-bordered{
|
||||
border-top: 2px #bbbbbb solid;
|
||||
}
|
||||
.dataTable thead .sorting:before{
|
||||
content: none;
|
||||
}
|
||||
table.dataTable.table-condensed .sorting:after, table.dataTable.table-condensed .sorting_asc:after, table.dataTable.table-condensed .sorting_desc:after{
|
||||
top: 10px !important;
|
||||
}
|
||||
#tblSummary tr.hidd{
|
||||
display: none;
|
||||
}
|
||||
.tippy{
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
</style>
|
||||
<table class="table table-striped table-hover table-bordered table-condensed" id="tblSummary">
|
||||
<thead class="bg-indigo">
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Total Accounts</th>
|
||||
<th>Active Bank Connection</th>
|
||||
<th>InActive Bank Connection</th>
|
||||
<th>Active Email Connection</th>
|
||||
<th>InActive Email Connection</th>
|
||||
<th>No Bank Connected</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$s1 = $s2 = $s3 = $s4 = $s5 = $s6 = 0;
|
||||
foreach ($data_report ?? [] as $item) {
|
||||
$s1 += $item['total_account'];
|
||||
$s2 += $item['active_bank_connection'];
|
||||
$s3 += $item['inactive_bank_connection'];
|
||||
$s4 += $item['active_email_connection'];
|
||||
$s5 += $item['inactive_email_connection'];
|
||||
$s6 += $item['no_bank_connected'];
|
||||
?>
|
||||
<tr class="<?=$item['location']?> <?=(!in_array($item['location'],['SG','US','unknown'])?'hidd':'')?>" >
|
||||
<td class="text-right">
|
||||
<?php
|
||||
if($item['location'] === 'unknown'){
|
||||
echo '<span class="tippy" data-tippy-content="User has not provided GPS Permission">'.$item["location"].'</span>';
|
||||
}else{
|
||||
echo $item['location'];
|
||||
}
|
||||
?>
|
||||
</td>
|
||||
<td class="text-right"><?= $item['total_account'] ?></td>
|
||||
<td class="text-right"><?= $item['active_bank_connection'] ?></td>
|
||||
<td class="text-right"><?= $item['inactive_bank_connection'] ?></td>
|
||||
<td class="text-right"><?= $item['active_email_connection'] ?></td>
|
||||
<td class="text-right"><?= $item['inactive_email_connection'] ?></td>
|
||||
<td class="text-right"><?= $item['no_bank_connected'] ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<tr>
|
||||
<td colspan="100%" class="text-center">
|
||||
<a onclick="fnShowExpand(this)">...Expand...</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="background-color: #efefbf8c; opacity: 0.8; font-weight: bold">
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right"><?= $s1 ?></td>
|
||||
<td class="text-right"><?= $s2 ?></td>
|
||||
<td class="text-right"><?= $s3 ?></td>
|
||||
<td class="text-right"><?= $s4 ?></td>
|
||||
<td class="text-right"><?= $s5 ?></td>
|
||||
<td class="text-right"><?= $s6 ?></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="block" style="margin-top: 30px">
|
||||
<hr/>
|
||||
<form method="get" action="#" onsubmit="return fnSubmitFormReport();">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="date_range" name="date_range"
|
||||
value="<?= $date_range ?? '' ?>" style="width: 100%" autocomplete="off"
|
||||
placeholder="Date range filter"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group">
|
||||
<?= $country_filter ?? '' ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group">
|
||||
<select class="form-control" id="bank_connection_status" name="bank_connection_status">
|
||||
<option value="">- Bank Connection -</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group">
|
||||
<select class="form-control" id="email_connection_status" name="email_connection_status">
|
||||
<option value="">- Email connection -</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-group">
|
||||
<input class="form-control" type="text" id="email_search" name="email_search" placeholder="Search email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a class="btn btn-default" href="/report/emailAndBankConnectionReport">Reset</a>
|
||||
<input type="button" onclick="fn_export_csv();" class="btn btn-info btn-xs" value="Export CSV">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="block">
|
||||
<div class="table-responsive">
|
||||
<table id="tblReport" class="table table-striped table-hover table-bordered table-condensed">
|
||||
<thead class="">
|
||||
<tr>
|
||||
<th>Sign-up Date</th>
|
||||
<th>Location</th>
|
||||
<th>User ID</th>
|
||||
<th>User Email</th>
|
||||
<th>Bank Connection</th>
|
||||
<th>Email Connection</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" tabindex="-1" role="dialog" id="modal_getBankAccountDetailJson">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Bank connection detail: #<span class="member_id"></span></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead class="bg-indigo">
|
||||
<tr>
|
||||
<th>added</th>
|
||||
<th>bank_login_provider</th>
|
||||
<th>bank_login_status</th>
|
||||
<th>bank_name</th>
|
||||
<th>card_type</th>
|
||||
<th>currency</th>
|
||||
<th>description</th>
|
||||
<th>intel_imported</th>
|
||||
<th>last_bank_data_fetch</th>
|
||||
<th>name</th>
|
||||
<th>status</th>
|
||||
<th>type</th>
|
||||
<th>id</th>
|
||||
<th>import_id</th>
|
||||
<th>member_id</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<!-- <button type="button" class="btn btn-primary">Save changes</button>-->
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<!-- Production -->
|
||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
tippy('.tippy', {
|
||||
content: 'Global content',
|
||||
animation: 'scale',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const $date_range = $('input[name="date_range"]');
|
||||
$date_range.daterangepicker({
|
||||
opens: 'right',
|
||||
autoUpdateInput: false,
|
||||
locale: {
|
||||
cancelLabel: 'Clear'
|
||||
},
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Past 24 hours': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
||||
'Last 60 Days': [moment().subtract(59, 'days'), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
|
||||
'Two months ago': [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')]
|
||||
},
|
||||
alwaysShowCalendars: true
|
||||
});
|
||||
$date_range.on('apply.daterangepicker', function (ev, picker) {
|
||||
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
|
||||
fnSubmitFormReport();
|
||||
});
|
||||
|
||||
$date_range.on('cancel.daterangepicker', function (ev, picker) {
|
||||
$(this).val('');
|
||||
fnSubmitFormReport();
|
||||
});
|
||||
$date_range.on('show.daterangepicker', function (ev, picker) {
|
||||
$("#date_range").get(0).scrollIntoView();
|
||||
});
|
||||
|
||||
$('#country_filter').change(function () {
|
||||
window.country_filter = $(this).val();
|
||||
fnSubmitFormReport();
|
||||
});
|
||||
|
||||
$('#bank_connection_status').change(function () {
|
||||
window.bank_connection_status = $(this).val();
|
||||
fnSubmitFormReport();
|
||||
});
|
||||
$('#email_connection_status').change(function () {
|
||||
window.email_connection_status = $(this).val();
|
||||
fnSubmitFormReport();
|
||||
});
|
||||
$('#email_search').keyup(debounce(function(){
|
||||
fnSubmitFormReport();
|
||||
},500));
|
||||
|
||||
window.tblReport = null;
|
||||
window.date_range_value = '';
|
||||
window.country_filter = '';
|
||||
$(function () {
|
||||
window.tblReport = $('#tblReport').DataTable({
|
||||
"sDom": 'lrtip',
|
||||
"responsive": true,
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"bProcessing": true,
|
||||
'ajax': {
|
||||
'url': '/report/emailAndBankConnectionReportDatatables',
|
||||
"type": "POST",
|
||||
"data": {
|
||||
"date_range": function () {
|
||||
return window.date_range_value
|
||||
},
|
||||
"country_filter": function () {
|
||||
return $('#country_filter').val()
|
||||
},
|
||||
"bank_connection_status": function () {
|
||||
return $('#bank_connection_status').val()
|
||||
},
|
||||
"email_connection_status": function () {
|
||||
return $('#email_connection_status').val()
|
||||
},
|
||||
"email_search": function (){
|
||||
return $('#email_search').val()
|
||||
}
|
||||
}
|
||||
},
|
||||
"order": [[0, "desc"]],
|
||||
"pageLength": 25,
|
||||
"lengthMenu": [10, 25, 50, 100, 200, 500, 1000],
|
||||
'columns': [
|
||||
{data: 'sign_up_date'},
|
||||
{data: 'location'},
|
||||
{data: 'user_id'},
|
||||
{data: 'user_email'},
|
||||
{data: 'bank_connection'},
|
||||
{data: 'email_connection'}
|
||||
],
|
||||
'columnDefs': [
|
||||
{
|
||||
targets: 1,
|
||||
render: function (data, type, row, meta) {
|
||||
const _user_id = row.user_id;
|
||||
if (type === 'display' && data === 'unknown') {
|
||||
return '<span class="tippy" data-tippy-content="User has not provided GPS Permission">'+data+'</span>';
|
||||
}
|
||||
return data;
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 4,
|
||||
render: function (data, type, row, meta) {
|
||||
const _user_id = row.user_id;
|
||||
if (type === 'display' && data === 'active') {
|
||||
return '<a class="badge badge-primary" href="javascript:void(0);" onclick="fn_show_pop_bank_connection(' + _user_id + ');">Active</a>';
|
||||
}
|
||||
return '<a class="badge badge-default" href="javascript:void(0);" onclick="fn_show_pop_bank_connection(' + _user_id + ');">Inactive</a>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 5,
|
||||
render: function (data, type, row, meta) {
|
||||
const _user_id = row.user_id;
|
||||
if (type === 'display' && data === 'active') {
|
||||
return '<span class="badge badge-primary">Active</span>';
|
||||
}
|
||||
return '<span class="badge badge-default">Inactive</span>';
|
||||
}
|
||||
},
|
||||
{"orderable": true, "targets": [0]},
|
||||
{"orderable": false, "targets": [3, 4, 5]}
|
||||
],
|
||||
'language': {
|
||||
'loadingRecords': ' ',
|
||||
'processing': 'Loading...',
|
||||
'searchPlaceholder': 'Email...'
|
||||
},
|
||||
});
|
||||
window.tblReport.on( 'draw', function () {
|
||||
tippy('.tippy', {
|
||||
content: 'Global content',
|
||||
animation: 'scale',
|
||||
});
|
||||
} );
|
||||
});
|
||||
|
||||
//filter clicked
|
||||
function fnSubmitFormReport() {
|
||||
window.date_range_value = $("#date_range").val();
|
||||
window.tblReport.ajax.reload(false);
|
||||
return false;
|
||||
}
|
||||
|
||||
function fn_export_csv() {
|
||||
window.location.assign("/report/emailAndBankConnectionReportCSV");
|
||||
}
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
}
|
||||
|
||||
function fnShowExpand(that){
|
||||
const cur_text = $(that).text();
|
||||
$(that).text(cur_text == '...Expand...'?'Collapse':'...Expand...');
|
||||
$('#tblSummary').find('tr.hidd').toggle();
|
||||
}
|
||||
window.fn_show_pop_bank_connection = function (member_id) {
|
||||
const $modal_getBankAccountDetailJson = $('#modal_getBankAccountDetailJson');
|
||||
const $table = $modal_getBankAccountDetailJson.find('table').first();
|
||||
const $tbody = $table.find('tbody').first();
|
||||
$tbody.html('<tr><td colspan="100%">Loading...</td></tr>');
|
||||
$modal_getBankAccountDetailJson.modal('show');
|
||||
$.getJSON('/report/getBankAccountDetailJson?member_id=' + member_id, function (data) {
|
||||
$modal_getBankAccountDetailJson.find('.member_id').html(member_id);
|
||||
$tbody.html('');
|
||||
data.forEach(function (info) {
|
||||
$tbody.append(`
|
||||
<tr>
|
||||
<td>${info.added}</td>
|
||||
<td>${info.bank_login_provider}</td>
|
||||
<td>${info.bank_login_status}</td>
|
||||
<td>${info.bank_name}</td>
|
||||
<td>${info.card_type}</td>
|
||||
<td>${info.currency}</td>
|
||||
<td>${info.description}</td>
|
||||
<td>${info.intel_imported}</td>
|
||||
<td>${info.last_bank_data_fetch}</td>
|
||||
<td>${info.name}</td>
|
||||
<td>${info.status}</td>
|
||||
<td>${info.type}</td>
|
||||
<td>${info.id}</td>
|
||||
<td>${info.import_id}</td>
|
||||
<td>${info.member_id}</td>
|
||||
</tr>
|
||||
`)
|
||||
});
|
||||
if (data.length == 0) {
|
||||
$tbody.append(`
|
||||
<tr>
|
||||
<td colspan="100%">Empty</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,549 @@
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/reports/surge_pricing_varaition.css">
|
||||
|
||||
<div id="page">
|
||||
<div id="loader">
|
||||
Loading data
|
||||
<div id="progress" class="progress-wrap progress"
|
||||
data-progresspercent="0"
|
||||
data-height="10px"
|
||||
data-width="150px"
|
||||
data-speed="1500"
|
||||
data-color="3a9c23">
|
||||
<div class="progress-bar progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dfilter" style="display:none">
|
||||
<form method="get" action="?">
|
||||
<select name="t">
|
||||
<?php foreach ($providers as $key=>$val) { ?>
|
||||
<option value="<?php echo$key?>"<?php echo $key==$t ? ' selected' : '' ?>><?php echo$val?></option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
<select name="area1">
|
||||
<?php foreach ($areas as $key=>$val) { ?>
|
||||
<option value="<?php echo$key?>"<?php echo $key == $area1 ? ' selected' : '' ?>><?php echo$val?></option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
<select name="area2">
|
||||
<?php foreach ($areas as $key=>$val) { ?>
|
||||
<option value="<?php echo$key?>"<?php echo $key == $area2 ? ' selected' : '' ?>><?php echo$val?></option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
<input type="text" id="date1" class="date-picker" name="date1" value="<?php echo $date1 ?>" />
|
||||
<input type="text" id="date2" class="date-picker" name="date2" value="<?php echo $date2 ?>" />
|
||||
<input type="submit" value="filter"/>
|
||||
</form>
|
||||
<br/>
|
||||
</div>
|
||||
<div id="tabs" class="tv-tabs" style="display:none">
|
||||
<label class="tv-tab" for="tv-tab-1"><?php echo $providers[$t] ?>: <?php echo $label1 ?></label>
|
||||
<label class="tv-tab" for="tv-tab-2"><?php echo $providers[$t] ?>: <?php echo $label2 ?></label>
|
||||
<label class="tv-tab" for="tv-tab-5">Map</label>
|
||||
<label class="tv-tab" for="tv-tab-3">Comparison</label>
|
||||
<label class="tv-tab" for="tv-tab-4">Data</label>
|
||||
</div>
|
||||
<input class="tv-radio" id="tv-tab-1" name="tv-group" type="radio" checked="checked"/>
|
||||
<div class="tv-content">
|
||||
<div style="max-width: 950px">
|
||||
<canvas id="canvas1"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input class="tv-radio" id="tv-tab-2" name="tv-group" type="radio"/>
|
||||
<div class="tv-content">
|
||||
<div style="max-width: 950px">
|
||||
<canvas id="canvas2"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<input class="tv-radio" id="tv-tab-5" name="tv-group" type="radio"/>
|
||||
<div class="tv-content">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<input class="tv-radio" id="tv-tab-3" name="tv-group" type="radio"/>
|
||||
<div class="tv-content">
|
||||
<div style="width:75%;color:#000000!important;">
|
||||
<div id="dataRes1"></div>
|
||||
<br/>
|
||||
<div id="dataRes2"></div>
|
||||
<br/>
|
||||
<div style="max-width: 950px">
|
||||
<canvas id="canvas3"></canvas>
|
||||
</div>
|
||||
<table style="margin-top: 50px">
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<tr>
|
||||
<th>NN</th>
|
||||
<th>Travel Date</th>
|
||||
<th>Time</th>
|
||||
<th>Cost</th>
|
||||
<th>Trend</th>
|
||||
<th>Delta</th>
|
||||
<th>Variation</th>
|
||||
</tr>
|
||||
<?php $j=1; $dMax = 0; $dMin = 0; $tVar = []; $tVar0 = []; foreach ($data1 as $i=>$f) { $d = variation($data1,$i,$f,$pub1, $dMin, $dMax, $tVar, $tVar0); ?>
|
||||
<tr>
|
||||
<td><?php echo $j++ ?></td>
|
||||
<td><?php echo strtok($f['travel_date'],'+') ?></td>
|
||||
<td><?php echo $f['time'] ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $f['cost']) ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $d[0]) ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $d[1]) ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $d[2]) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div id="dataSrc1"><?php echo $label1.": ".sprintf("%0.02f",$dMin).' / '.sprintf("%0.02f",$dMax).' ~ '.stats_variance($tVar) ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $tVar1 = $tVar0; $dMax = 0; $dMin = 0; $tVar = []; $tVar0 = []; foreach ($data2 as $i=>$f) { $d = variation($data1,$i,$f,$pub2, $dMin, $dMax, $tVar, $tVar0); ?>
|
||||
<tr>
|
||||
<td><?php echo $j++ ?></td>
|
||||
<td><?php echo strtok($f['travel_date'],'+') ?></td>
|
||||
<td><?php echo $f['time'] ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $f['cost']) ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $d[0]) ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $d[1]) ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $d[2]) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<?php $tVar2 = $tVar0; ?>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div id="dataSrc2"><?php echo $label2.": ".sprintf("%0.02f",$dMin).' / '.sprintf("%0.02f",$dMax).' ~ '.stats_variance($tVar) ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<input class="tv-radio" id="tv-tab-4" name="tv-group" type="radio"/>
|
||||
<div class="tv-content">
|
||||
<table>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<tr>
|
||||
<th>NN</th>
|
||||
<th>Travel Date</th>
|
||||
<th>Cost</th>
|
||||
<th>GPS</th>
|
||||
<th>Origin</th>
|
||||
<th>GPS</th>
|
||||
<th>Destination</th>
|
||||
</tr>
|
||||
<?php
|
||||
$i = 1;
|
||||
foreach ($data as $f) { ?>
|
||||
<tr>
|
||||
<td><?php echo $i ?></td>
|
||||
<td><?php echo strtok($f['travel_date'],'+') ?></td>
|
||||
<td><?php echo sprintf("%0.02f", $f['cost']) ?></td>
|
||||
<td><?php echo $f['location_start_lat'].','.$f['location_end_lng']?></td>
|
||||
<td><?php echo $f['origin'] ?></td>
|
||||
<td><?php echo $f['location_end_lat'].','.$f['location_end_lng']?></td>
|
||||
<td><?php echo $f['destination'] ?></td>
|
||||
</tr>
|
||||
<?php
|
||||
$i++;
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
|
||||
<script src="/assets/js/app.js" type="text/javascript"></script>
|
||||
<script src="/assets/js/charts/chartjs/luxon.min.js"></script>
|
||||
<script src="/assets/js/charts/chartjs/Chart.min.js"></script>
|
||||
<script src="/assets/js/charts/chartjs/chartjs-adapter-luxon.js"></script>
|
||||
<script src="/assets/js/charts/chartjs/chartjs-chart-financial.js" type="text/javascript"></script>
|
||||
<script src="/assets/js/pages/reports/surge_pricing_varaition/utils.js"></script>
|
||||
|
||||
<script>
|
||||
addDatePicker('.date-picker');
|
||||
|
||||
document.getElementById('dataRes1').innerHTML = document.getElementById('dataSrc1').innerHTML;
|
||||
document.getElementById('dataRes2').innerHTML = document.getElementById('dataSrc2').innerHTML;
|
||||
|
||||
function updateProgress() {
|
||||
var progress = $("#progress");
|
||||
var getPercent = progress.attr("data-progresspercent");
|
||||
var getSpeed = parseInt(progress.attr("data-speed"));
|
||||
var getColor = progress.attr("data-color");
|
||||
var getHeight = progress.attr("data-height");
|
||||
var getWidth = progress.attr("data-width");
|
||||
progress.css({"height":getHeight,"width":getWidth});
|
||||
progress.find(".progress-bar").css({"background-color":"#"+getColor}).animate({ width:getPercent+'%' },getSpeed);
|
||||
if (getPercent<100) setTimeout(updateProgress,500);
|
||||
}
|
||||
|
||||
updateProgress();
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var dataSets1 = [];
|
||||
var dataSetTrends1 = [];
|
||||
var dataSets2 = [];
|
||||
var dataSetTrends2 = [];
|
||||
var dataSets3 = [];
|
||||
var dataSetTrends3 = [];
|
||||
// Rideshare only
|
||||
dataSets1[0] = []; dataSetTrends1[0] = [];
|
||||
dataSets2[0] = []; dataSetTrends2[0] = [];
|
||||
$("#progress").attr("data-progresspercent",25);
|
||||
// Public transit and walking
|
||||
dataSets1[1] = []; dataSetTrends1[1] = [];
|
||||
|
||||
<?php foreach ($pub2 as $f) { ?> dataSets1[1].push({x: <?php echo $f[0]; ?>000, y: <?php echo $f[1]; ?>});
|
||||
dataSetTrends1[1].push({x: <?php echo $f[0]; ?>000, y: <?php echo $f[2]; ?>});
|
||||
<?php } ?>
|
||||
|
||||
$("#progress").attr("data-progresspercent",27);
|
||||
dataSets2[1] = []; dataSetTrends2[1] = [];
|
||||
|
||||
<?php foreach ($pub1 as $f) { ?> dataSets2[1].push({x: <?php echo $f[0]; ?>000, y: <?php echo $f[1]; ?>});
|
||||
dataSetTrends2[1].push({x: <?php echo $f[0]; ?>000, y: <?php echo $f[2]; ?>});
|
||||
<?php } ?>
|
||||
|
||||
dataSets3[0] = []; dataSetTrends3[0] = [];
|
||||
<?php $tVar1a = []; foreach ($tVar1 as $k=>$v) { ?> dataSets3[0].push({x: <?php echo $k; ?>000, y: <?php echo $v; ?>});
|
||||
<?php /* $tVar1a[] = $v;*/ } ?>
|
||||
|
||||
//dataSetTrends3[0] = [<?php echo implode(',',$tVar1a); ?>];
|
||||
dataSets3[1] = []; dataSetTrends3[1] = [];
|
||||
<?php $tVar2a = []; foreach ($tVar2 as $k=>$v) { ?> dataSets3[1].push({x: <?php echo $k; ?>000, y: <?php echo $v; ?>});
|
||||
<?php /* $tVar2a[] = $v;*/ } ?>
|
||||
|
||||
//dataSetTrends3[1] = [<?php echo implode(',',$tVar2a); ?>];
|
||||
$("#progress").attr("data-progresspercent",30);
|
||||
// Public transit, walking and scooter
|
||||
dataSets1[2] = []; dataSetTrends1[2] = [];
|
||||
dataSets2[2] = []; dataSetTrends2[2] = [];
|
||||
$("#progress").attr("data-progresspercent",35);
|
||||
// Public transit, walking and bicycle
|
||||
dataSets1[3] = []; dataSetTrends1[3] = [];
|
||||
dataSets2[3] = []; dataSetTrends2[3] = [];
|
||||
$("#progress").attr("data-progresspercent",40);
|
||||
// Driving your own car
|
||||
dataSets1[4] = []; dataSetTrends1[4] = [];
|
||||
|
||||
<?php if (isset($taxi)): ?>
|
||||
<?php foreach ($taxi as $f) { if (!isset($f[2])) continue; ?> dataSets1[4].push({
|
||||
x: <?php echo $f[0]; ?>,
|
||||
y: <?php echo $f[1]; ?>});
|
||||
dataSetTrends1[4].push({
|
||||
x: <?php echo $f[0]; ?>,
|
||||
y: <?php echo $f[2]; ?>});
|
||||
<?php } ?>
|
||||
<?php endif; ?>
|
||||
|
||||
$("#progress").attr("data-progresspercent",43);
|
||||
dataSets2[4] = []; dataSetTrends2[4] = [];
|
||||
|
||||
<?php if (isset($taxi0)): ?>
|
||||
<?php foreach ($taxi0 as $f) { if (!isset($f[2])) continue; ?> dataSets2[4].push({
|
||||
x: <?php echo $f[0]; ?>,
|
||||
y: <?php echo $f[1]; ?>});
|
||||
dataSetTrends2[4].push({
|
||||
x: <?php echo $f[0]; ?>,
|
||||
y: <?php echo $f[2]; ?>});
|
||||
<?php } ?>
|
||||
<?php endif; ?>
|
||||
|
||||
$("#progress").attr("data-progresspercent",45);
|
||||
// Car share (like Zipcar or BlueSG) and public transit, walking
|
||||
dataSets1[5] = []; dataSetTrends1[5] = [];
|
||||
dataSets2[5] = []; dataSetTrends2[5] = [];
|
||||
$("#progress").attr("data-progresspercent",50);
|
||||
|
||||
var scatterChartData1 = {
|
||||
datasets: [/*{
|
||||
label: 'Rideshare only',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
data: dataSets1[0]
|
||||
},*/{
|
||||
label: '<?php echo $providers[$t] ?>',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
||||
data: dataSets1[1]
|
||||
}, {
|
||||
label: '<?php echo $providers[$t] ?> trend line',
|
||||
pointBorderColor: window.chartColors.black,
|
||||
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
||||
data: dataSetTrends1[1],
|
||||
showLine: true,
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 3
|
||||
}/*,{
|
||||
label: 'Public transit, walking and scooter',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
data: dataSets1[2]
|
||||
}, {
|
||||
label: 'Public transit, walking and bicycle',
|
||||
borderColor: window.chartColors.purple,
|
||||
backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(),
|
||||
data: dataSets1[3]
|
||||
}, {
|
||||
label: 'Driving your own car',
|
||||
borderColor: window.chartColors.orange,
|
||||
backgroundColor: color(window.chartColors.orange).alpha(0.2).rgbString(),
|
||||
data: dataSets1[4]
|
||||
}, {
|
||||
label: 'Driving your own car trend line',
|
||||
pointBorderColor: window.chartColors.black,
|
||||
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
||||
data: dataSetTrends1[4],
|
||||
showLine: true,
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 3
|
||||
}, {
|
||||
label: 'Car share (like Zipcar or BlueSG) and public transit, walking',
|
||||
borderColor: window.chartColors.yellow,
|
||||
backgroundColor: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
||||
Color: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
||||
data: dataSets1[5]
|
||||
}*/]
|
||||
};
|
||||
|
||||
var scatterChartData2 = {
|
||||
datasets: [/*{
|
||||
label: 'Rideshare only',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
data: dataSets2[0]
|
||||
},*/ {
|
||||
label: '<?php echo$providers[$t]?>',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
||||
data: dataSets2[1]
|
||||
}, {
|
||||
label: '<?php echo$providers[$t]?> trend line',
|
||||
pointBorderColor: window.chartColors.black,
|
||||
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
||||
data: dataSetTrends2[1],
|
||||
showLine: true,
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 3
|
||||
}/*,{
|
||||
label: 'Public transit, walking and scooter',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
data: dataSets2[2]
|
||||
}, {
|
||||
label: 'Public transit, walking and bicycle',
|
||||
borderColor: window.chartColors.purple,
|
||||
backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(),
|
||||
data: dataSets2[3]
|
||||
}, {
|
||||
label: 'Driving your own car',
|
||||
borderColor: window.chartColors.orange,
|
||||
backgroundColor: color(window.chartColors.orange).alpha(0.2).rgbString(),
|
||||
data: dataSets2[4]
|
||||
}, {
|
||||
label: 'Driving your own car trend line',
|
||||
pointBorderColor: window.chartColors.black,
|
||||
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
||||
data: dataSetTrends2[4],
|
||||
showLine: true,
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 3
|
||||
}, {
|
||||
label: 'Car share (like Zipcar or BlueSG) and public transit, walking',
|
||||
borderColor: window.chartColors.yellow,
|
||||
backgroundColor: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
||||
Color: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
||||
data: dataSets2[5]
|
||||
}*/]
|
||||
};
|
||||
|
||||
var scatterChartData3 = {
|
||||
datasets: [{
|
||||
label: '<?php echo $label1 ?>',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
pointBorderColor: window.chartColors.red,
|
||||
pointBackgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
data: dataSets3[0],
|
||||
pointHoverRadius: 5,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
showLine: true
|
||||
}, {
|
||||
label: '<?php echo $label2 ?>',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
pointBorderColor: window.chartColors.blue,
|
||||
pointBackgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
data: dataSets3[1],
|
||||
pointHoverRadius: 5,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
showLine: true
|
||||
}/*, {
|
||||
label: '<?php echo $label1 ?> line',
|
||||
data: dataSets3[0],
|
||||
type: 'line'
|
||||
}, {
|
||||
label: '<?php echo $label2 ?> line',
|
||||
data: dataSets3[1],
|
||||
type: 'line'
|
||||
}*/]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx1 = document.getElementById('canvas1').getContext('2d');
|
||||
//window.myScatter = Chart.Scatter(ctx1, {
|
||||
window.myScatter1 = new Chart(ctx1, {
|
||||
type: 'scatter',
|
||||
data: scatterChartData1,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '<?php echo $providers[$t] ?>: <?php echo $label1 ?>'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return new Date(value).toLocaleDateString("en-US");
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
var ctx2 = document.getElementById('canvas2').getContext('2d');
|
||||
//window.myScatter = Chart.Scatter(ctx2, {
|
||||
window.myScatter2 = new Chart(ctx2, {
|
||||
type: 'scatter',
|
||||
data: scatterChartData2,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '<?php echo $providers[$t] ?>: <?php echo $label2 ?>'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return new Date(value).toLocaleDateString("en-US");
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
var ctx3 = document.getElementById('canvas3').getContext('2d');
|
||||
//window.myScatter = Chart.Scatter(ctx3, {
|
||||
window.myScatter3 = new Chart(ctx3, {
|
||||
type: 'scatter',
|
||||
data: scatterChartData3,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Statistical variance'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return new Date(value).toLocaleDateString("en-US");
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
/*
|
||||
document.getElementById('reloadData').addEventListener('click', function() {
|
||||
var i = 0;
|
||||
scatterChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataSets[i];
|
||||
i++;
|
||||
});
|
||||
window.myScatter.update();
|
||||
});
|
||||
*/
|
||||
function initMap() {
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: 12,
|
||||
center: {lat: 1.313333, lng: 103.833333},
|
||||
mapTypeId: 'roadmap'
|
||||
});
|
||||
|
||||
<?php foreach ($data as $i=>$f) { ?>
|
||||
var flightPlanCoordinates<?php echo $i ?> = [
|
||||
{lat: <?php echo $f["location_start_lat"] ?>, lng: <?php echo $f["location_start_lng"] ?>},
|
||||
{lat: <?php echo $f["location_end_lat"] ?>, lng: <?php echo $f["location_end_lng"] ?>}
|
||||
];
|
||||
var flightPath<?php echo $i ?> = new google.maps.Polyline({
|
||||
path: flightPlanCoordinates<?php echo $i ?>,
|
||||
geodesic: true,
|
||||
strokeColor: '<?php echo $f['c'] ?>',
|
||||
strokeOpacity: 0.06125,
|
||||
strokeWeight: 2
|
||||
});
|
||||
|
||||
flightPath<?php echo $i ?>.setMap(map);
|
||||
<?php } ?>
|
||||
var areaCoordinates1 = [
|
||||
<?php foreach ($poly1 as $i=>$coord) { ?>{lat: <?php echo $coord[1] ?>, lng: <?php echo $coord[0] ?>},<?php } ?>
|
||||
{lat:<?php echo$poly1[$i][1]?> ,lng:<?php echo$poly1[$i][0]?>}
|
||||
];
|
||||
var areaPath1 = new google.maps.Polyline({
|
||||
path: areaCoordinates1,
|
||||
geodesic: true,
|
||||
strokeColor: '#009900',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 2
|
||||
});
|
||||
areaPath1.setMap(map);
|
||||
|
||||
var areaCoordinates2 = [
|
||||
<?php foreach ($poly2 as $i=>$coord) { ?>{lat: <?php echo $coord[1] ?>, lng: <?php echo $coord[0] ?>},<?php } ?>
|
||||
{lat:<?php echo$poly2[$i][1]?> ,lng:<?php echo$poly2[$i][0]?>}
|
||||
];
|
||||
var areaPath2 = new google.maps.Polyline({
|
||||
path: areaCoordinates2,
|
||||
geodesic: true,
|
||||
strokeColor: '#009900',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 2
|
||||
});
|
||||
areaPath2.setMap(map);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$("#loader").hide();$("#tabs").show();$("#dfilter").show();
|
||||
</script>
|
||||
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=<?php echo$google_api_key?>&callback=initMap">
|
||||
</script>
|
||||
Reference in New Issue
Block a user