ref(stats): intègre chart.js dans les assets
Raphael
parent
f04120bfdf
commit
595559b23d
|
|
@ -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;
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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…
Reference in New Issue