dchen4/data-analyse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

less polished

Browse Source
This commit is contained in:
Yurun Chen
2024-12-12 16:33:24 +11:00
parent 3e64c270e6
commit b9ecdecd99
2 changed files with 170 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
index.html
View File

@@ -8,6 +8,86 @@
<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-->
@@ -59,7 +139,7 @@
<!--template-->
<script id="subdiv-template" type="text/x-handlebars-template">
<div>
<strong>Subdiv:</strong><br>
<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>
@@ -98,7 +178,7 @@
<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.[1]}}</option>
<option>{{this}}</option>
{{/each}}
</select>
</div>
@@ -114,7 +194,7 @@
<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" >
<select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" disabled>
{{#each this}}
<option>{{this}}</option>
{{/each}}
@@ -123,6 +203,7 @@
</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>
@@ -138,11 +219,12 @@
<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">Subdiv</th>
<th scope="col">Subdivision</th>
<th scope="col">LGA</th>
<th scope="col">Category</th>
<th scope="col">Subcategory</th>
@@ -159,7 +241,15 @@
{{/each}}
</tbody>
</table>
<h5>Multiple choices in a given column for line graph will be AVGed. Bar graph will be cumulative.</h5>
<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>
@@ -187,25 +277,34 @@
<div id="result_table"></div>
<!--template-->
<script id="result_template" type="text/x-handlebars-template">
<br>
<table class="table">
<thead class="thead-dark">
<thead>
<th>Months</th>
{{#each this.columns}}
<th scope="col">{{this}}</th>
{{/each}}
</thead>
<tbody>
{{#each this.values.[0]}}
<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>
<td>{{lookup ../months @index}}</td>
{{#each ../values}}
{{log this}}
<td>{{lookup this @../index}}</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</tr>
{{/each}}
<tr>
<td>Total:</td>
{{#each this.sum}}
<td>{{this}}</td>
{{/each}}
</tr>
</tbody>
</table>
</script>
</div>