321 lines
15 KiB
HTML
321 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Crime Statistics</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- dependencies -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
</head>
|
|
<body style="background-color: #fffee0;">
|
|
<style>
|
|
.range_container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 80%;
|
|
margin: 35% auto;
|
|
}
|
|
|
|
.sliders_control {
|
|
position: relative;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.form_control {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 24px;
|
|
color: #635a5a;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
pointer-events: all;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px #C6C6C6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=range]::-moz-range-thumb {
|
|
-webkit-appearance: none;
|
|
pointer-events: all;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px #C6C6C6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb:hover {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb:active {
|
|
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
|
|
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
|
|
}
|
|
|
|
input[type="number"] {
|
|
color: #8a8383;
|
|
width: 50px;
|
|
height: 30px;
|
|
font-size: 20px;
|
|
border: none;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 2px;
|
|
width: 100%;
|
|
position: absolute;
|
|
background-color: #C6C6C6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#fromSlider {
|
|
height: 0;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
<!--chartjs-->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<!--handlebars-->
|
|
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
|
|
<!-- bootstrap-->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
|
|
<!-- vue stuff-->
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
|
<!-- SQL -->
|
|
<script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js"></script>
|
|
|
|
|
|
<!--nav-->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
|
|
<a class="navbar-brand" href="#"> NSW Crime statistic analysis</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
</li>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">By year</a>
|
|
<a class="dropdown-item" href="#">By LGA</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">By Crime category</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<br><br>
|
|
|
|
<!-- page columns -->
|
|
<div class="container text-center" id="body">
|
|
<div class="row">
|
|
<!-- now to vue-->
|
|
<div class="col-4 text-left" id="filters">
|
|
<ul class="list-group">
|
|
<li class="list-group-item ">
|
|
<div id="subdiv">
|
|
<strong></strong><h3>Please upload database to start!</h3></strong>
|
|
<input type='file' id='load-db'/>
|
|
</div>
|
|
<!--template-->
|
|
<script id="subdiv-template" type="text/x-handlebars-template">
|
|
<div>
|
|
<strong>Subdivision:</strong><br>
|
|
<select oninput="global_component.update_listbox(0)" class="form-select selectwidthauto" multiple aria-label="multiple select" id="subdiv_sel" multiple="multiple" size="5">
|
|
{{#each this}}
|
|
<option>{{this}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
</script>
|
|
<!--/template-->
|
|
</li>
|
|
|
|
<li class="list-group-item">
|
|
<div id="lga">
|
|
|
|
</div>
|
|
<!--template-->
|
|
<script id="lga-template" type="text/x-handlebars-template">
|
|
<div>
|
|
<strong>LGA:</strong><br>
|
|
<select class="form-select selectwidthauto" multiple aria-label="multiple select" id="lga_sel" multiple="multiple" size="5">
|
|
{{#each this}}
|
|
<option>{{this}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
</script>
|
|
<!--/template-->
|
|
</li>
|
|
|
|
<li class="list-group-item">
|
|
<div id="category">
|
|
|
|
</div>
|
|
<!--template-->
|
|
<script id="category-template" type="text/x-handlebars-template">
|
|
<div>
|
|
<strong>Category:</strong><br>
|
|
<select oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel" multiple="multiple" size="5">
|
|
{{#each this}}
|
|
<option>{{this}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
</script>
|
|
<!--/template-->
|
|
</li>
|
|
|
|
<li class="list-group-item">
|
|
<div id="subcategory">
|
|
|
|
</div>
|
|
<!--template-->
|
|
<script id="subcategory-template" type="text/x-handlebars-template">
|
|
<div>
|
|
<strong>Subcategory:</strong><br>
|
|
<select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" disabled>
|
|
{{#each this}}
|
|
<option>{{this}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
</script>
|
|
<!--/template-->
|
|
<br>
|
|
<button type="button" class="btn btn-warning" onclick="global_component.clear()">Clear</button>
|
|
<button type="button" class="btn btn-primary" onclick="global_component.add_filter()">Add filter</button>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!--charts!-->
|
|
<div class="col-8">
|
|
<div class="col-12">
|
|
<!--this is gonna be the selected values-->
|
|
<div class="row">
|
|
<div id="filter_queue"></div>
|
|
<!--Template-->
|
|
<script id="filter_queue_template" type="text/x-handlebars-template">
|
|
<div>
|
|
<h5>Queries:</h5>
|
|
<p>*multiple queries possible</p>
|
|
<br>
|
|
<table class="table">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th scope="col">Subdivision</th>
|
|
<th scope="col">LGA</th>
|
|
<th scope="col">Category</th>
|
|
<th scope="col">Subcategory</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each this}}
|
|
<tr>
|
|
<td style="word-break: break-all">{{this.subdivs}}</td>
|
|
<td style="word-break: break-all"> {{this.lgas}}</td>
|
|
<td style="word-break: break-all">{{this.categorys}}</td>
|
|
<td style="word-break: break-all">{{this.subcategorys}}</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<label for="customRange1" class="form-label">Begin Month</label><br>
|
|
<input type="range" class="form-range w-25 text-center" min="0" max="215" step="1" id="customRange1">
|
|
<br>
|
|
<label for="customRange2" class="form-label">End Month</label><br>
|
|
<input type="range" class="form-range w-25 text-center" min="1" max="216" step="1" id="customRange2">
|
|
<br>
|
|
|
|
<p>*Multiple choices in a given column for line graph will be averaged. Bar graph will be cumulative.</p>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-danger" onclick="queue_filter.clear()">Clear query queue</button>
|
|
<button type="button" class="btn btn-success" onclick="queue_filter.go()">Run!</button>
|
|
</script>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Line</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Pie/Bar</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Table</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><canvas id="chart_canvas"></canvas></div>
|
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><canvas id="pie_canvas"></canvas><br><canvas id="bar_canvas"></canvas><br><br></div>
|
|
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
<div id="result_table"></div>
|
|
<!--template-->
|
|
<script id="result_template" type="text/x-handlebars-template">
|
|
<br>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<th>Months</th>
|
|
{{#each this.columns}}
|
|
<th scope="col">{{this}}</th>
|
|
{{/each}}
|
|
</thead>
|
|
<tbody>
|
|
{{#each this.values.[0]}}
|
|
<tr>
|
|
<td>{{lookup ../months @index}}</td>
|
|
{{#each ../values}}
|
|
{{log this}}
|
|
<td>{{lookup this @../index}}</td>
|
|
|
|
{{/each}}
|
|
|
|
</tr>
|
|
{{/each}}
|
|
<tr>
|
|
<td>Total:</td>
|
|
{{#each this.sum}}
|
|
<td>{{this}}</td>
|
|
{{/each}}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- my stuff-->
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html> |