257 lines
13 KiB
HTML
257 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>NSW Crime Statistics</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Bootstrap -->
|
|
<link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.2.0/dist/css/themes/bootstrap/bootstrap.min.css" rel="stylesheet" integrity="sha384-nQQlHXZO4YmST3YDqk/JU3f1t2D58a/nPd1QbiLecouKn68glzRym4BlOxlr5Rrg" crossorigin="anonymous">
|
|
</head>
|
|
<body style="background-color: #ffffff;">
|
|
<!--Bootstrap-->
|
|
<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>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
|
|
<!--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>
|
|
<!--sqlite-->
|
|
<script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
|
|
<!--moment-->
|
|
<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">#</th>
|
|
<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>{{@index}}</td>
|
|
<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="startRange" class="form-label">Start Month</label>
|
|
<input type="range" class="form-range" min="0" max="216" id="startRange" oninput="queue_filter.bound_range(0)">
|
|
<label for="endRange" class="form-label">End Month</label>
|
|
<input type="range" class="form-range" min="0" max="216" id="endRange" oninput="queue_filter.bound_range(1)">
|
|
<p class="text-center" id="mnth_range"></p>
|
|
<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</button>
|
|
<button type="button" class="btn btn-success" onclick="queue_filter.go()">Execute</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="Line" 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="Pie/Bar" 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="Table" 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">
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
|
|
</div>
|
|
<div class="col-6">
|
|
<canvas id="pie_canvas"></canvas>
|
|
<br>
|
|
<canvas id="bar_canvas"></canvas>
|
|
</div>
|
|
<div class="col-1">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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}}
|
|
<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> |