ref(stats): intègre chart.js dans les assets

pull/146/head
François Poulain 2020-10-27 10:58:16 +01:00 commité par Raphael
Parent f04120bfdf
révision 595559b23d
3 fichiers modifiés avec 60 ajouts et 58 suppressions

29
assets/js/stats.js Normal file
Voir le fichier

@ -0,0 +1,29 @@
import Chart from 'chart.js';
window.onload = function() {
var ctx = document.getElementById('asso-activity-chart').getContext('2d');
var defaultTable = document.getElementById("table-total");
var btns = document.querySelectorAll(".dropdown-item");
window.myDoughnut = new Chart(ctx, config);
defaultTable.classList.add("show");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.querySelectorAll(".active");
if (current.length > 0) {
current[0].classList.remove("active");
}
this.classList.add("active");
});
};
};
function showTable(id) {
var tables = document.querySelectorAll(".categories-data-table");
var tlength = tables.length;
var element = document.querySelector("#"+id);
tables.forEach(el => el.classList.remove("show"));
element.classList.add("show");
};
// Export showtable for external usage
window.showTable = showTable;

Voir le fichier

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% load minified %}
{% block content_container %}
<div class="container content-container">
@ -47,10 +48,10 @@
Sélection des données
</button>
<div class="dropdown-menu" aria-labbeledby="categoriesTableChoice">
<button class="dropdown-item active" type="button" onclick="showTable('table-total')">Totaux</button>
<button class="dropdown-item active" type="button" onclick="window.showTable('table-total')">Totaux</button>
<div class="dropdown-divider"></div>
{% for year in page.activeYears %}
<button class="dropdown-item" type="button" onclick="showTable('table-{{ year }}')">{{ year }}</button>
<button class="dropdown-item" type="button" onclick="window.showTable('table-{{ year }}')">{{ year }}</button>
{% endfor %}
</div>
</div>
@ -116,9 +117,8 @@
</div>
</div>
{% endblock %}
{% block javascript %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
{% block javascript %}{{ block.super }}
<script src="{% minified "js/stats.js" %}"></script>
<script>
var config = {
type: 'doughnut',
@ -146,28 +146,5 @@
}
}
};
window.onload = function() {
var ctx = document.getElementById('asso-activity-chart').getContext('2d');
var defaultTable = document.getElementById("table-total");
var btns = document.querySelectorAll(".dropdown-item");
window.myDoughnut = new Chart(ctx, config);
defaultTable.classList.add("show");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.querySelectorAll(".active");
if (current.length > 0) {
current[0].classList.remove("active");
}
this.classList.add("active");
});
};
};
function showTable(id) {
var tables = document.querySelectorAll(".categories-data-table");
var tlength = tables.length;
var element = document.querySelector("#"+id);
tables.forEach(el => el.classList.remove("show"));
element.classList.add("show");
};
</script>
{% endblock %}

Voir le fichier

@ -35,11 +35,6 @@ const CONFIG = {
src: 'node_modules/fork-awesome/fonts/*',
dest: 'fonts/fork-awesome'
},
{
// Chart.js
src: 'node_modules/chart.js/dist/*.js',
dest: 'vendor/chart.js'
},
{
// Open Sans
src: 'node_modules/open-sans-fonts/open-sans/{Bold*,Italic,Regular,Semibold*}/*',
@ -54,7 +49,8 @@ const CONFIG = {
// Paths to JavaScript entries which will be bundled
JS_ENTRIES: [
'assets/js/app.js'
'assets/js/app.js',
'assets/js/stats.js'
],
// Paths to Sass files which will be compiled