Skip to content

Commit

Permalink
Removed Highcharts
Browse files Browse the repository at this point in the history 
Added Chart.js
New layout for Charts page
Bumped electron
  • Loading branch information
@Mattk70
Mattk70 committed Dec 2, 2023
1 parent 5da02b4 commit 1478872
Show file tree
Hide file tree
Showing 17 changed files with 316 additions and 1,226 deletions.
87 changes: 43 additions & 44 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,20 @@
<!-- Additional JavaScript & CSS -->
<link rel="stylesheet" href="css/style.css" />
<script defer src="./node_modules/@easepick/bundle/dist/index.umd.js"></script>
<script defer src="./node_modules/chart.js/dist/chart.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
function goFullscreen(){
const container = document.getElementById('chart-week');

container.requestFullscreen();
}
</script>
<!-- App title -->
<title>Chirpity Bird Call Detection</title>

Expand Down Expand Up @@ -1005,69 +1013,66 @@ <h5 class="modal-title" id="locationModalLabel">Set Location</h5>
<div class="d-none h-100 overflow-auto" id="recordsContainer">
<div class="container-fluid">
<div class="row p-1 g-1 justify-content-evenly">
<div class="col">
<div class="btn btn-light pt-3" id="chartRange">
<span class="material-symbols-outlined align-bottom">date_range</span>&nbsp;
<span>Apply a date filter</span> <span
class="material-symbols-outlined align-bottom">expand_more</span>
<div class="col-3 pt-4">
<div class="col">
<div class="btn btn-light pt-3 mb-2" id="chartRange">
<span class="material-symbols-outlined align-bottom">date_range</span>&nbsp;
<span>Apply a date filter</span> <span
class="material-symbols-outlined align-bottom">expand_more</span>
</div>
</div>
</div>
<div class="col">
<div id="speciesSearch" class="species-selector">
<div id="chart-list" class="chart bird-list-wrapper form-floating"></div>
<div class="col mb-2">
<div id="speciesSearch" class="species-selector">
<div id="chart-list" class="chart bird-list-wrapper form-floating"></div>
</div>
</div>
</div>
<div class="col">
<div id="chart-location-list" class="form-floating">
<select spellcheck="false" class="input form-select mb-3" aria-label=".form-select"
id="chart-locations"></select>
<label for="explore-locations">Location</label>
<div class="col">
<div id="chart-location-list" class="form-floating">
<select spellcheck="false" class="input form-select mb-3" aria-label=".form-select"
id="chart-locations"></select>
<label for="explore-locations">Location</label>
</div>
</div>
</div>
<div class="col-9">
<div class="chart-outer position-relative">
<span class="material-symbols-outlined text-muted" style="z-index: 2;position: absolute; top: 40px; left: 30px" title="View Fullscreen" onclick="goFullscreen()">fullscreen</span>
<canvas class="border border-dark rounded-3 w-100" id="chart-week"></canvas>
</canvas>
</div>
</div>
</div>
<div class="row">
<div id='dataRecords' class="col-3">
<table class="table table-striped border border-dark rounded-border mt-5">
<div class="col-3"></div>
<div id='dataRecords' class="col-9 ps-5">
<table class="table table-striped border border-dark rounded-border">
<tbody id="recordsTableBody">
<tr>
<th id="speciesName" class="text-center" colspan="2"></th>
<th id="speciesName" class="text-center" colspan="6"></th>
</tr>
<tr>
<th>Earliest Spring Record</th>
<td id="earliestSpring"></td>
</tr>
<tr>
<th>Latest Spring Record</th>
<td id="latestSpring"></td>
</tr>
<tr>
<th>Earliest Autumn Record</th>
<td id="earliestAutumn"></td>
</tr>
<tr>
<th>Latest Autumn Record</th>
<td id="latestAutumn"></td>
<th>Most Calls in 24 hours</th>
<th class="fst-italic text-sm-start">Chart generated in:</th>
</tr>
<tr>
<th>Most Calls in 24 hours</th>
<td id="earliestSpring"></td>
<td id="latestSpring"></td>
<td id="earliestAutumn"></td>
<td id="latestAutumn"></td>
<td id="mostDetections"></td>
</tr>
<tr class="fst-italic text-sm-start">
<th>Chart generated in:</th>
<td id="genTime"></td>
</tr>
</tbody>
</table>
</div>

<div class="col-9">
<div class="chart-outer">
<div class="border border-dark rounded-3" id="chart-week"></div>
</div>
</div>
</div>
</div>
</div>

</div>

<!-- Footer -->
Expand All @@ -1081,12 +1086,6 @@ <h5 class="modal-title" id="locationModalLabel">Set Location</h5>
<script src="node_modules/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js"></script>
<script src="node_modules/wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js"></script>
<script src="node_modules/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>
<script defer src="js/highcharts.js"></script>
<script defer src="js/series-label.js"></script>
<script defer src="js/exporting.js"></script>
<script defer src="js/export-data.js"></script>
<script defer src="js/accessibility.js"></script>
<script defer src="js/no-data-to-display.js"></script>
<script defer src="./js/ui.js"></script>
<script>
let map, marker;
Expand Down
Loading

0 comments on commit 1478872

Please sign in to comment.