diff --git a/borgweb/borg/static/borg/js/chart.js b/borgweb/borg/static/borg/js/chart.js new file mode 100644 index 0000000..66b0979 --- /dev/null +++ b/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 + ); +} diff --git a/borgweb/borg/static/borg/js/index.js b/borgweb/borg/static/borg/js/index.js index ebf6435..b797a69 100644 --- a/borgweb/borg/static/borg/js/index.js +++ b/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 - ); -} diff --git a/borgweb/borg/templates/borg/index.html b/borgweb/borg/templates/borg/index.html index ac0c1c7..36a0001 100644 --- a/borgweb/borg/templates/borg/index.html +++ b/borgweb/borg/templates/borg/index.html @@ -4,8 +4,10 @@ {% block title %}Borg Summary{% endblock %} {% block script %} - + {{ hour_list|json_script:"hour_list" }} + {% endblock %} diff --git a/borgweb/borg/templates/borg/repo.html b/borgweb/borg/templates/borg/repo.html index a125559..945560a 100644 --- a/borgweb/borg/templates/borg/repo.html +++ b/borgweb/borg/templates/borg/repo.html @@ -4,8 +4,11 @@ {% load static %} {% block script %} {{block.super}} - + {{ hour_list|json_script:"hour_list" }} + + {% endblock %} {% block style %}