Migrate chartjs to npm

package-lock.json

@@ -15,6 +15,7 @@
         "@zip.js/zip.js": "^2.7.52",
         "3d-force-graph": "^1.73.4",
         "alpinejs": "^3.14.1",
+        "chart.js": "^4.4.4",
         "cytoscape": "^3.30.2",
         "cytoscape-cxtmenu": "^3.5.0",
         "cytoscape-klay": "^3.1.4",
@@ -2169,6 +2170,11 @@
       "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3087,6 +3093,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",

package.json

@@ -48,6 +48,7 @@
     "@zip.js/zip.js": "^2.7.52",
     "3d-force-graph": "^1.73.4",
     "alpinejs": "^3.14.1",
+    "chart.js": "^4.4.4",
     "cytoscape": "^3.30.2",
     "cytoscape-cxtmenu": "^3.5.0",
     "cytoscape-klay": "^3.1.4",

sith/settings.py

@@ -748,6 +748,4 @@ if SENTRY_DSN:
         environment=SENTRY_ENV,
     )
 
-SITH_FRONT_DEP_VERSIONS = {
+SITH_FRONT_DEP_VERSIONS = {}
-    "https://github.com/chartjs/Chart.js/": "2.6.0",
-}

subscription/static/webpack/subscription/stats-index.ts

@@ -0,0 +1,91 @@
+import { BarController, BarElement, CategoryScale, Chart, LinearScale } from "chart.js";
+Chart.register(BarController, BarElement, CategoryScale, LinearScale);
+
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+function getRandomColorUniq(list: string[]) {
+  let color = getRandomColor();
+  while (list.includes(color)) {
+    color = getRandomColor();
+  }
+  return color;
+}
+function hexToRgb(hex: string) {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  // biome-ignore lint/performance/useTopLevelRegex: Performance impact is minimal
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const hexrgb = hex.replace(shorthandRegex, (_m, r, g, b) => {
+    return r + r + g + g + b + b;
+  });
+
+  // biome-ignore lint/performance/useTopLevelRegex: Performance impact is minimal
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexrgb);
+  return result
+    ? {
+        r: Number.parseInt(result[1], 16),
+        g: Number.parseInt(result[2], 16),
+        b: Number.parseInt(result[3], 16),
+      }
+    : null;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const ctx = (document.getElementById("statsChart") as HTMLCanvasElement).getContext(
+    "2d",
+  );
+  const labels: string[] = [];
+  const total: string[] = [];
+  const colors: string[] = [];
+  const colorsDimmed: string[] = [];
+  for (const element of Array.from(document.getElementsByClassName("types"))) {
+    labels.push(element.childNodes[0].textContent);
+  }
+  for (const element of Array.from(document.getElementsByClassName("total"))) {
+    total.push(element.childNodes[0].childNodes[0].textContent);
+  }
+
+  for (const _ of labels) {
+    colors.push(getRandomColorUniq(colors));
+  }
+
+  for (const element of colors) {
+    const rgbColor = hexToRgb(element);
+    colorsDimmed.push(`rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.2)`);
+  }
+
+  for (const element of colors) {
+    const rgbColorDimmed = hexToRgb(element);
+    colorsDimmed.push(
+      `rgba(${rgbColorDimmed.r}, ${rgbColorDimmed.g}, ${rgbColorDimmed.b}, 0.2)`,
+    );
+  }
+
+  new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: [
+        {
+          label: document.getElementById("graphLabel").childNodes[0].textContent,
+          data: total,
+          backgroundColor: colorsDimmed,
+          borderColor: colors,
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+        },
+      },
+    },
+  });
+});

subscription/templates/subscription/stats.jinja

@@ -6,17 +6,19 @@
 
 {% block head %}
   {{ super() }}
-  <script type="text/javascript" src="{{ static('vendored/chart/Chart.bundle.min.js') }}"></script>
+  <script src="{{ static('webpack/subscription/stats-index.ts') }}" defer></script>
 {% endblock %}
 
 {% block content %}
 
   <p>
+    <form>
       {{ form.start_date.label }}<br>
       {{ form.start_date }}<br><br>
       {{ form.end_date.label }}<br>
       {{ form.end_date }}<br>
       <p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
+    </form>
   </p>
 
   <canvas id="statsChart" width="400" height="200"></canvas>
@@ -57,80 +59,3 @@
         </table>
 
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script>
-    function getRandomColor() {
-      var letters = '0123456789ABCDEF';
-      var color = '#';
-      for (var i = 0; i < 6; i++ ) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    }
-    function getRandomColorUniq(list) {
-      var color = getRandomColor();
-      while (list.includes(color)){
-        color = getRandomColor();
-      }
-      return color;
-    }
-    function hexToRgb(hex) {
-    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-      hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-        return r + r + g + g + b + b;
-      });
-
-      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-      } : null;
-    }
-
-    var ctx = document.getElementById("statsChart").getContext('2d');
-    var labels = [];
-    var total = [];
-    var colors = [];
-    var colors_dimmed = [];
-    Array.from(document.getElementsByClassName("types")).forEach(function(element){
-      labels.push(element.childNodes[0].data);
-    });
-    Array.from(document.getElementsByClassName("total")).forEach(function(element){
-      total.push(element.childNodes[0].childNodes[0].data);
-    });
-    labels.forEach(function(element){
-      colors.push(getRandomColorUniq(colors));
-    });
-    colors.forEach(function(element){
-      var rgb_color = hexToRgb(element);
-      colors_dimmed.push('rgba(' + rgb_color.r + ', ' + rgb_color.g + ', ' + rgb_color.b + ', 0.2)');
-    });
-    console.log(colors);console.log(colors_dimmed);
-    var myChart = new Chart(ctx, {
-      type: 'bar',
-      data: {
-        labels: labels,
-        datasets: [{
-          label: document.getElementById("graphLabel").childNodes[0].data,
-          data: total,
-          backgroundColor: colors_dimmed,
-          borderColor: colors,
-          borderWidth: 1
-        }]
-      },
-      options: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero:true
-            }
-          }]
-        }
-      }
-    });
-  </script>
-{% endblock %}