Create separate monthly size graphs for each repo

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

@@ -1,5 +1,63 @@
+function draw_time_series_graph(chartID, repo, dateLabels, sizeUnits) {
+    let datasets = [{
+            label: repo.label,
+            data: repo.size,
+            fill: false,
+            borderColor: 'rgb(7, 59, 76)'
+        }]
+
+    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 newChart = new Chart(
+        document.getElementById(chartID),
+        config
+    );
+}
+
+
 function draw_time_graph(chartID, repos, dateLabels, sizeUnits) {
-    var datasets = []
+    let datasets = []
     repos.forEach(function (repo) {
         datasets.push({
             label: repo.label,
@@ -52,7 +110,7 @@ function draw_time_graph(chartID, repos, dateLabels, sizeUnits) {
         }
     }
 
-    var myChart = new Chart(
+    var newChart = new Chart(
         document.getElementById(chartID),
         config
     );

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

@@ -28,15 +28,24 @@ window.addEventListener("DOMContentLoaded", function () {
         repo_list.labels.forEach(function (repo_label) {
             $.getJSON(`/repo/${repo_label}.json`, function (repo_json) {
                 inflateRepo(repo_json, repo_label, template, container);
+                inflateSizeGraph()
             })
+
+            function inflateSizeGraph() {
+                $.getJSON(`/repo/${repo_label}/size.json`, function (repo_size_json) {
+                    draw_time_series_graph(`repo-${repo_label}-size-graph`, repo_size_json.repo,
+                        repo_size_json.dates, repo_size_json.units);
+                })
+            }
+
         });
     })
 
 
-    $.getJSON("repo_daily.json", function (json) {
+    // $.getJSON("repo_daily.json", function (json) {
-        draw_time_graph("daily_backup_size", json.repos, json.dates, json.units);
+    //     draw_time_graph("daily_backup_size", json.repos, json.dates, json.units);
-    });
+    // });
-    $.getJSON("repo_monthly.json", function (json) {
+    // $.getJSON("repo_monthly.json", function (json) {
-        draw_time_graph("monthly_backup_size", json.repos, json.dates, json.units);
+    //     draw_time_graph("monthly_backup_size", json.repos, json.dates, json.units);
-    });
+    // });
 }, false);

borgweb/borg/templates/borg/index.html

@@ -27,12 +27,12 @@
 
 {% block body %}
 <div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">
-    <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">
+{#    <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
-        <canvas id="daily_backup_size" width="400" height="200"></canvas>
+{#        <canvas id="daily_backup_size" width="400" height="200"></canvas>#}
-    </div>
+{#    </div>#}
-    <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">
+{#    <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
-        <canvas id="monthly_backup_size" width="400" height="200"></canvas>
+{#        <canvas id="monthly_backup_size" width="400" height="200"></canvas>#}
-    </div>
+{#    </div>#}
 {#    <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">#}
 {#        <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">#}
 {#        <h2 class="h2">No repositories found</h2>#}