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

all working

Browse Source
This commit is contained in:
dchen4
2024-12-12 17:56:53 +11:00
parent b9ecdecd99
commit 548838a391
4 changed files with 64 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
index.html
View File

@@ -5,99 +5,16 @@
<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">
<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: #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/@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>
<!-- 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 -->
<!-- bootstrap--> <!-- 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>
@@ -224,6 +141,7 @@
<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>
@@ -233,6 +151,7 @@
<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>
@@ -242,13 +161,11 @@
</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>
<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>
@@ -272,7 +189,20 @@
</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="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="container">
<div class="row">
<div class="col-5">
<canvas id="pie_canvas"></canvas>
</div>
<div class="col-5">
<canvas id="bar_canvas"></canvas>
</div>
</div>
</div>
<br>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div id="result_table"></div>
<!--template-->
@@ -291,7 +221,6 @@
<tr>
<td>{{lookup ../months @index}}</td>
{{#each ../values}}
{{log this}}
<td>{{lookup this @../index}}</td>
{{/each}}