mostly working

This commit is contained in:
Yurun Chen
2024-12-11 21:09:36 +11:00
parent 163a3cffc4
commit 3e64c270e6
2 changed files with 408 additions and 36 deletions

View File

@@ -7,7 +7,7 @@
<!-- 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: azure;">
<body style="background-color: #fffee0;">
<!--chartjs-->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--handlebars-->
@@ -19,11 +19,12 @@
<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="#">&nbsp;&nbsp;Crime statistic analysis</a>
<a class="navbar-brand" href="#">&nbsp;&nbsp;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>
@@ -141,7 +142,8 @@
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Subdiv/LGA</th>
<th scope="col">Subdiv</th>
<th scope="col">LGA</th>
<th scope="col">Category</th>
<th scope="col">Subcategory</th>
</tr>
@@ -149,20 +151,65 @@
<tbody>
{{#each this}}
<tr>
<td>{{this.subdivs}} {{this.lgas}}</td>
<td>{{this.categorys}}</td>
<td>{{this.subcategorys}}</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>
<h5>Multiple choices in a given column will be AVGed.</h5>
<h5>Multiple choices in a given column for line graph will be AVGed. Bar graph will be cumulative.</h5>
</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">
<div>
<canvas id="chart_canvas"></canvas>
<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">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Month</th>
{{#each columns}}
<th scope="col">{{this}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each (range 0 (maxLength this)) as |rowIndex|}}
<tr>
<td>{{months.[rowIndex]}}</td>
{{#each this as |array|}}
<td>{{array.[rowIndex]}}</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</script>
</div>
</div>
</div>
</div>
</div>