Move chart creation code to new file

- Use cdn for chart.js

borgweb/borg/static/borg/js/chart.js

@@ -0,0 +1,59 @@
+function draw_time_graph(chartID, repos, dateLabels, sizeUnits) {
+    var datasets = []
+    repos.forEach(function (repo) {
+        datasets.push({
+            label: repo.label,
+            data: repo.size,
+            fill: false,
+            borderColor: 'rgb(75, 192, 192)'
+        });
+    })
+
+    const data = {
+        labels: dateLabels,
+        datasets: datasets
+    };
+
+    const config = {
+        type: 'line',
+        data,
+        options: {
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        label: function (context) {
+                            const yValue = context.parsed.y
+                            if (yValue !== null) {
+                                return `${yValue} ${sizeUnits}`
+                            } else {
+                                return ""
+                            }
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    min: 0,
+                    title: {
+                        display: true,
+                        text: "Compressed Size",
+                        font: {
+                            size: 18
+                        }
+                    },
+                    ticks: {
+                        callback: function (value, index, values) {
+                            return `${value} ${sizeUnits}`
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    var myChart = new Chart(
+        document.getElementById(chartID),
+        config
+    );
+}

borgweb/borg/static/borg/js/index.js

@@ -6,63 +6,3 @@ window.addEventListener("DOMContentLoaded", function () {
         draw_time_graph("monthly_backup_size", json.repos, json.dates, json.units);
      });
 }, false);
-
-function draw_time_graph(chartID, repos, dateLabels, sizeUnits) {
-    var datasets = []
-    repos.forEach(function (repo) {
-        datasets.push({
-            label: repo.label,
-            data: repo.size,
-            fill: false,
-            borderColor: 'rgb(75, 192, 192)'
-        });
-    })
-
-    const data = {
-        labels: dateLabels,
-        datasets: datasets
-    };
-
-    const config = {
-        type: 'line',
-        data,
-        options: {
-            plugins: {
-                tooltip: {
-                    callbacks: {
-                        label: function (context) {
-                            const yValue = context.parsed.y
-                            if (yValue !== null) {
-                                return `${yValue} ${sizeUnits}`
-                            } else {
-                                return ""
-                            }
-                        }
-                    }
-                }
-            },
-            scales: {
-                y: {
-                    min: 0,
-                    title: {
-                        display: true,
-                        text: "Compressed Size",
-                        font: {
-                            size: 18
-                        }
-                    },
-                    ticks: {
-                        callback: function (value, index, values) {
-                            return `${value} ${sizeUnits}`
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    var myChart = new Chart(
-        document.getElementById(chartID),
-        config
-    );
-}

borgweb/borg/templates/borg/index.html

@@ -4,8 +4,10 @@
 
 {% block title %}Borg Summary{% endblock %}
 {% block script %}
-    <script src="{% static 'js/chart.js' %}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"
+            integrity="sha256-GMN9UIJeUeOsn/Uq4xDheGItEeSpI5Hcfp/63GclDZk=" crossorigin="anonymous"></script>
     {{ hour_list|json_script:"hour_list" }}
+    <script src="{% static 'borg/js/chart.js' %}"></script>
     <script src="{% static 'borg/js/index.js' %}"></script>
 {% endblock %}
 

borgweb/borg/templates/borg/repo.html

@@ -4,8 +4,11 @@
 {% load static %}
 {% block script %}
     {{block.super}}
-    <script src="{% static 'js/chart.js' %}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"
+            integrity="sha256-GMN9UIJeUeOsn/Uq4xDheGItEeSpI5Hcfp/63GclDZk=" crossorigin="anonymous"></script>
     {{ hour_list|json_script:"hour_list" }}
+    <script src="{% static 'borg/js/chart.js' %}"></script>
+    <script src="{% static 'borg/js/repo.js' %}"></script>
 {% endblock %}
 
 {% block style %}