Browse Source

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

pull/146/head
François Poulain 1 year ago
committed by Raphael
parent
commit
595559b23d
  1. 29
      assets/js/stats.js
  2. 81
      benevalibre/templates/base/stats.html
  3. 8
      gulpfile.js

29
assets/js/stats.js

@ -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;

81
benevalibre/templates/base/stats.html

@ -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,58 +117,34 @@
</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',
data: {
datasets: [{
data: {{ page.assoGroupsData|safe }},
backgroundColor: [
'#c0392b', '#9b59b6', '#2980b9', '#1abc9c', '#2ecc71', '#f1c40f',
'#3498db', '#d35400'
],
label: "Nombre d'associations par groupe d'activité"
}],
labels: {{ page.assoGroupsLabels|safe }}
},
options: {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontSize: 16,
fontColor: '#ffffff',
padding: 20,
align: 'left',
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: {{ page.assoGroupsData|safe }},
backgroundColor: [
'#c0392b', '#9b59b6', '#2980b9', '#1abc9c', '#2ecc71', '#f1c40f',
'#3498db', '#d35400'
],
label: "Nombre d'associations par groupe d'activité"
}],
labels: {{ page.assoGroupsLabels|safe }}
},
options: {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontSize: 16,
fontColor: '#ffffff',
padding: 20,
align: 'left',
}
}
};
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 %}

8
gulpfile.js

@ -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

Loading…
Cancel
Save
Map all the world