first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,223 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Trips Dashboard</title>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
||||
<script src="assets/js/jquery.popupoverlay.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
||||
<style>
|
||||
[class*="fa-"]:before {
|
||||
font-family: 'FontAwesome', sans-serif;
|
||||
}
|
||||
</style>
|
||||
<style id="compiled-css" type="text/css">
|
||||
#ui-datepicker-div { font-size: 12px; }
|
||||
</style>
|
||||
<script src="assets/js/luxon.min.js"></script>
|
||||
<script src="assets/js/Chart.min.js"></script>
|
||||
<script src="assets/js/chartjs-adapter-luxon.js"></script>
|
||||
<script src="assets/js/chartjs-chart-financial.js" type="text/javascript"></script>
|
||||
<script src="assets/js/utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
td:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
col:first-child {background: #FFD}
|
||||
col:nth-child(2n+3) {background: #FFD}
|
||||
tr:first-child {background: #DDF}
|
||||
tr:nth-child(2n+3) {background: #DDD}
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
.well {
|
||||
/* drop-shadow is better than box-shadow as it add a shadow to tooltip arrows arrow as well,
|
||||
however drop-shadow dramatically affects the performance of transition animation on Android. */
|
||||
/* filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); */
|
||||
display:none;
|
||||
margin:1em;
|
||||
max-width: 90%;
|
||||
}
|
||||
.well .popup_close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
border-radius: 2px;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: 25px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.tv-content {
|
||||
display: none;
|
||||
}
|
||||
.tv-radio {
|
||||
display: none;
|
||||
}
|
||||
.tv-radio:checked + .tv-content {
|
||||
display: block;
|
||||
}
|
||||
.tv-tab {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
.tv-tab:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
body {
|
||||
margin: 40px;
|
||||
font-family: 'Georgia';
|
||||
background-color: #ffffee;
|
||||
}
|
||||
.tv-tabs {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
.tv-tabs :nth-child(odd) {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
.tv-tabs :nth-child(even) {
|
||||
background-color: #34495e;
|
||||
}
|
||||
.tv-content {
|
||||
padding: 10px;
|
||||
min-width: 600px;
|
||||
min-height: 600px;
|
||||
}
|
||||
#tv-tab-1 + .tv-content {
|
||||
background-color: #ffffff;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
#tv-tab-2 + .tv-content {
|
||||
background-color: #ffffff;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
#tv-tab-3 + .tv-content {
|
||||
background-color: #ffffff;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
#tv-tab-4 + .tv-content {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
a,
|
||||
.tv-link {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
color: #f1c40f;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
box-shadow: 1px 1px 5px rgba(255,255,255,0.2);
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
a:hover,
|
||||
.tv-link:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
ul {
|
||||
list-style-type: binary;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
code {
|
||||
display: block;
|
||||
margin-top: -10px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
.progress {
|
||||
width:100px;
|
||||
height: 100%;
|
||||
}
|
||||
.progress-wrap {
|
||||
background: #dcdcdc;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.progress-bar {
|
||||
background:#249c23;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width:0%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Wrap all page content in a page container (optional, but recommended for screen readers and iOS*) -->
|
||||
<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="?">
|
||||
<input type="text" id="date1" name="date1" value="<?= $date1 ?>" />
|
||||
<input type="text" id="date2" name="date2" value="<?= $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">Distance vs. Money Spent</label>
|
||||
<label class="tv-tab" for="tv-tab-2">Duration vs. Money Spent</label>
|
||||
<label class="tv-tab" for="tv-tab-3">Rideshare vs. Public</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="width:75%">
|
||||
<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="width:75%">
|
||||
<canvas id="canvas2"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<input class="tv-radio" id="tv-tab-3" name="tv-group" type="radio"/>
|
||||
<div class="tv-content">
|
||||
<div style="width:75%">
|
||||
<canvas id="canvas3"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<input class="tv-radio" id="tv-tab-4" name="tv-group" type="radio"/>
|
||||
<div class="tv-content">
|
||||
<script>
|
||||
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();
|
||||
</script>
|
||||
@@ -0,0 +1,284 @@
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
var dataSets1 = [];
|
||||
var dataSetTrends1 = [];
|
||||
var dataSets2 = [];
|
||||
var dataSetTrends2 = [];
|
||||
// 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]; ?>,
|
||||
y: <?php echo $f[1]; ?>});
|
||||
dataSetTrends1[1].push({
|
||||
x: <?php echo $f[0]; ?>,
|
||||
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]; ?>,
|
||||
y: <?php echo $f[1]; ?>});
|
||||
dataSetTrends2[1].push({
|
||||
x: <?php echo $f[0]; ?>,
|
||||
y: <?php echo $f[2]; ?>});
|
||||
<?php } ?>
|
||||
$("#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 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 } ?>
|
||||
$("#progress").attr("data-progresspercent",43);
|
||||
dataSets2[4] = []; dataSetTrends2[4] = [];
|
||||
<?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 } ?>
|
||||
$("#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: 'Public transit and walking',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
||||
data: dataSets1[1]
|
||||
}, {
|
||||
label: 'Public transit and walking 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: 'Public transit and walking',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
||||
data: dataSets2[1]
|
||||
}, {
|
||||
label: 'Public transit and walking 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]
|
||||
}]
|
||||
};
|
||||
|
||||
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: 'Distance vs. Money Spent'
|
||||
},
|
||||
}
|
||||
});
|
||||
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: 'Duration vs. Money Spent'
|
||||
},
|
||||
}
|
||||
});
|
||||
$('#date1').datepicker({
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true,
|
||||
dateFormat: "yy-m-d"
|
||||
});
|
||||
$('#date2').datepicker({
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true,
|
||||
dateFormat: "yy-m-d"
|
||||
});
|
||||
};
|
||||
/*
|
||||
document.getElementById('reloadData').addEventListener('click', function() {
|
||||
var i = 0;
|
||||
scatterChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataSets[i];
|
||||
i++;
|
||||
});
|
||||
window.myScatter.update();
|
||||
});
|
||||
*/
|
||||
var dataSets3 = [];
|
||||
dataSets3[0] = [];
|
||||
dataSets3[1] = [];
|
||||
<?
|
||||
//var date = luxon.DateTime.fromRFC2822(initialDateStr);
|
||||
// 1491004800000
|
||||
// 0-2 - public (cost, dist, dur)
|
||||
// 3 - date
|
||||
// 4-6 - rideshare (cost, dist, dur)
|
||||
foreach ($public_vs_rideshare as $id=>$val) {
|
||||
if (count($val)!=7) continue;
|
||||
if ($val[6]<$val[2] && $val[6]>0.9*$val[2]) {
|
||||
?>/* <?= "($val[6]<$val[2] && $val[6]>".(0.1*$val[2]).")" ?> */
|
||||
dataSets3[1].push({
|
||||
p: '<?= "You could have saved ".($val[4]-$val[0])." dollars!\\r\\nwith a 10% longer trip\\r\\n" ?>',
|
||||
t: <?=strtotime($val[3]) ?>000, /* <?= $val[3] ?> */
|
||||
o: <?= $val[6] ?>, /* Open: rideshare duration */
|
||||
h: <?= max($val[6],$val[2]) ?>,
|
||||
l: <?= min($val[6],$val[2]) ?>,
|
||||
c: <?= $val[2] ?> /* Close: public duration */
|
||||
});
|
||||
<? } else { ?>
|
||||
dataSets3[0].push({
|
||||
p: '<?= $val[6]>$val[2]?"You could have saved ".($val[6]-$val[2])." minutes!\\r\\nand ".($val[4]-$val[0])." dollars!\\r\\n":""?>',
|
||||
t: <?=strtotime($val[3]) ?>000, /* <?= $val[3] ?> */
|
||||
o: <?= $val[6] ?>, /* Open: rideshare duration */
|
||||
h: <?= max($val[6],$val[2]) ?>,
|
||||
l: <?= min($val[6],$val[2]) ?>,
|
||||
c: <?= $val[2] ?> /* Close: public duration */
|
||||
});
|
||||
<? } } ?>
|
||||
|
||||
var ctx = document.getElementById('canvas3').getContext('2d');
|
||||
//ctx.canvas.width = 1000;
|
||||
//ctx.canvas.height = 850;
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'candlestick',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Rideshare vs. Public (trip time)',
|
||||
data: dataSets3[0],
|
||||
color: {
|
||||
up: '#01ff01',
|
||||
down: '#fe0000',
|
||||
unchanged: '#999',
|
||||
}
|
||||
},{
|
||||
label: 'Rideshare vs. Public (10% longer)',
|
||||
data: dataSets3[1],
|
||||
color: {
|
||||
up: '#ffdd01',
|
||||
down: '#fe0000',
|
||||
unchanged: '#999',
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<!-- vi:ts=2
|
||||
-->
|
||||
Reference in New Issue
Block a user