app/python/templates/index.html (102 lines of code) (raw):
<!--- Generated by 'make generate'. Do not manually edit. -->
<!--
Copyright 2024 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title>Census Data</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐿️</text></svg>">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
{% if squirrel_count > 0 %}
<h1>Census Data</h1>
<div id="facets">
During the 2018 Squirrel Census,
{{ squirrel_count }}
<form action="/">
<select name="age" id="age">
<option value="Adult">Adult</option>
<option value="Juvenile">Juvenile</option>
</select>
<select name="fur" id="fur">
<option value="Gray">Gray</option>
<option value="Black">Black</option>
<option value="Cinnamon">Cinnamon</option>
</select>
squirrels were observed
<select name="location" id="location">
<option value="Above Ground">Above Ground</option>
<option value="Ground Plane">on the Ground Plane</option>
</select>.
<button id="submit">Update</button>
</form>
<script>
// Select dropdowns from querystring
this_url = new URL(window.location.href)
selected_fur = this_url.searchParams.get("fur");
document.querySelector('option[value="'+selected_fur+'"]').selected = true
selected_location = this_url.searchParams.get("location");
document.querySelector('option[value="'+selected_location+'"]').selected = true
selected_age = this_url.searchParams.get("age");
document.querySelector('option[value="'+selected_age+'"]').selected = true
</script>
</div>
<div id="chart" style="height: 500px; width: 500px">
<canvas id="chart_canvas"></canvas>
</div>
<script>
var count = {{ squirrel_count }};
var points = {{ data_points }};
line_col = "#8e39a7"
const data = {
labels: ['Chasing', 'Climbing', 'Eating', 'Foraging', 'Running'],
datasets: [
{
label: 'Squirrels',
data: points,
fill: true,
backgroundColor: line_col + "42",
borderColor: line_col,
pointBackgroundColor: line_col,
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: line_col,
}
]
};
const config = {
type: 'radar',
data: data,
options: {
plugins: {
legend: {
display: false
}
},
elements: {
line: {
borderWidth: 3
}
},
},
};
const ctx = document.getElementById('chart_canvas');
new Chart(ctx, config);
</script>
<div id="footer">
Data represents the number of squirrels observed performing
described activities during the survey period.
</div>
{% else %}
<div>No data available.
<a href="https://console.cloud.google.com/?walkthrough_id=solutions-in-console--cloud-client-api--cloud-client-api_postdeploy" target=_blank>Follow the tutorial instructions</a>.
</div>
{% endif %}
<style>
body {
font-family: 'Helvetica Neue';
}
#footer {
font-size: 0.7em;
}
form { display: inline-block}
</style>
</body>
</html>