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

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;

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 %}

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