Create graphs based on html data attribute

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

@@ -1,19 +1,19 @@
-function draw_time_series_graph(chartID, repo, dateLabels, sizeUnits) {
+function draw_time_series_graph(canvas, data) {
     let datasets = [{
-        label: repo.label,
+        label: data.label,
-        data: repo.size,
+        data: data.size,
         fill: false,
         borderColor: 'rgb(7, 59, 76)'
     }]
 
-    const data = {
+    const graphData = {
-        labels: dateLabels,
+        labels: data.dates,
         datasets: datasets
     };
 
     const config = {
         type: 'line',
-        data,
+        data: graphData,
         options: {
             plugins: {
                 tooltip: {
@@ -21,7 +21,7 @@ function draw_time_series_graph(chartID, repo, dateLabels, sizeUnits) {
                         label: function (context) {
                             const yValue = context.parsed.y
                             if (yValue !== null) {
-                                return `${yValue} ${sizeUnits}`
+                                return `${yValue} ${data.units}`
                             } else {
                                 return ""
                             }
@@ -44,7 +44,7 @@ function draw_time_series_graph(chartID, repo, dateLabels, sizeUnits) {
                     },
                     ticks: {
                         callback: function (value, index, values) {
-                            return `${value} ${sizeUnits}`
+                            return `${value} ${data.units}`
                         }
                     }
                 }
@@ -52,69 +52,8 @@ function draw_time_series_graph(chartID, repo, dateLabels, sizeUnits) {
         }
     }
 
-    var newChart = new Chart(
+    const newGraph = new Chart(
-        document.getElementById(chartID),
+        canvas,
-        config
-    );
-}
-
-
-function draw_time_graph(chartID, repos, dateLabels, sizeUnits) {
-    let datasets = []
-    repos.forEach(function (repo) {
-        datasets.push({
-            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
     );
 }

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

@@ -16,7 +16,17 @@ function stringRequests() {
     $('[data-json-string-request]').each(function (index, element) {
         $.getJSON($(this).attr("data-json-string-request"), function (data) {
             $(element).html(data['data']);
-        })
+        });
+    });
+}
+
+function graphRequests() {
+    $('[data-json-graph-request]').each(function (index, element) {
+        $.getJSON($(this).attr("data-json-graph-request"), function (data) {
+            let newGraph = $('<canvas/>').width(400).height(200);
+            draw_time_series_graph(newGraph, data)
+            $(element).html(newGraph);
+        });
     });
 }
 
@@ -25,23 +35,14 @@ function colourRepos(repo_list) {
     repo_list.labels.forEach(function (repo_label) {
         $.getJSON(`/repo/${repo_label}.json`, function (repo_json) {
             colourRepo(repo_json, repo_label, container);
-        })
+        });
-    });
-}
-
-function createGraphs(repo_list) {
-    repo_list.labels.forEach(function (repo_label) {
-        $.getJSON(`/repo/${repo_label}/monthly-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);
-        })
     });
 }
 
 window.addEventListener("DOMContentLoaded", function () {
     setTimeout(stringRequests, 0);
+    setTimeout(graphRequests, 0);
     $.getJSON(`/repo-list.json`, function (repo_list) {
-        setTimeout(createGraphs.bind(null, repo_list), 0);
         setTimeout(colourRepos.bind(null, repo_list), 0);
     });
 }, false);

borgweb/borg/templates/borg/index.html

@@ -58,8 +58,12 @@
                         </div>
                     </dd>
                 </dl>
-                <canvas id="repo-{{ repo.label }}-size-graph" width="400" height="200"></canvas>
+                <div id="repo-{{ repo.label }}-size-graph"
-                </dl>
+                     class="d-flex justify-content-center"
+                     data-json-graph-request="/repo/{{ repo.label }}/monthly-size.json">
+                    <div class="spinner-border" role="status">
+                    </div>
+                </div>
             </div>
         {% endfor %}
     {% else %}

borgweb/borg/views/json.py

@@ -35,14 +35,10 @@ def repo_monthly_size_json(request, repo_label, months_ago: int = 12):
 
     max_unit = get_units([repo])
 
-    repo_dict = {"id": repo.id,
-                 "label": repo.label.label,
-                 "size": repo.size_on_months(max_unit, months_ago)}
-
     response_dict = {
         "dates": date_labels,
-        "repo": repo_dict,
+        "units": max_unit,
-        "units": max_unit
+        "size": repo.size_on_months(max_unit, months_ago)
     }
 
     return JsonResponse(response_dict)