Updates chart markup

This commit is contained in:
Mouse Reeve 2021-10-04 10:53:22 -07:00
parent fa241b08e7
commit 37cd7e684c
3 changed files with 32 additions and 42 deletions

View file

@ -96,22 +96,22 @@
</form> </form>
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column"> <div class="column is-half">
<h3>{% trans "Total users" %}</h3> <h3>{% trans "Total users" %}</h3>
<div class="box"> <div class="box">
<canvas id="user_stats"></canvas> <canvas id="user_stats"></canvas>
</div> </div>
</div> </div>
<div class="column"> <div class="column is-half">
<h3>{% trans "Status activity" %}</h3> <h3>{% trans "Status activity" %}</h3>
<div class="box"> <div class="box">
<canvas id="status_stats"></canvas> <canvas id="status_stats"></canvas>
</div> </div>
</div> </div>
<div class="column"> <div class="column is-half">
<h3>{% trans "User signup activity" %}</h3> <h3>{% trans "User signup activity" %}</h3>
<div class="box"> <div class="box">
<canvas id="user_stats"></canvas> <canvas id="register_stats"></canvas>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,24 +1,19 @@
{% load i18n %} {% load i18n %}
<script> <script>
const labels = [{% for label in registration_stats.labels %}"{{ label }}",{% endfor %}]; var registerStats = new Chart(
const data = { document.getElementById('register_stats'),
labels: labels, {
type: 'bar',
data: {
labels: [{% for label in register_stats.labels %}"{{ label }}",{% endfor %}],
datasets: [{ datasets: [{
label: '{% trans "Active this month" %}', label: '{% trans "Registrations" %}',
backgroundColor: 'rgb(75, 192, 192)', backgroundColor: 'rgb(75, 192, 192)',
borderColor: 'rgb(75, 192, 192)', borderColor: 'rgb(75, 192, 192)',
data: {{ register_stats.total }}, data: {{ register_stats.total }},
}] }]
}; },
const config = {
type: 'line',
data: data,
options: {} options: {}
}; }
var userStats = new Chart(
document.getElementById('user_stats'),
config
); );
</script> </script>

View file

@ -1,26 +1,21 @@
{% load i18n %} {% load i18n %}
<script> <script>
const status_labels = [{% for label in status_stats.labels %}"{{ label }}",{% endfor %}];
const status_data = { var statusStats = new Chart(
labels: status_labels, document.getElementById('status_stats'),
{
type: 'bar',
data: {
labels: [{% for label in status_stats.labels %}"{{ label }}",{% endfor %}],
datasets: [{ datasets: [{
label: '{% trans "Statuses posted" %}', label: '{% trans "Statuses posted" %}',
backgroundColor: 'rgb(255, 99, 132)', backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)',
data: {{ status_stats.total }}, data: {{ status_stats.total }},
}] }]
}; },
// === include 'setup' then 'config' above ===
const status_config = {
type: 'bar',
data: status_data,
options: {} options: {}
}; },
var statusStats = new Chart(
document.getElementById('status_stats'),
status_config
); );
</script> </script>