george/borg-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create separate monthly size graphs for each repo

Browse Source
This commit is contained in:
George Lacey 2022-04-07 10:43:59 +01:00
parent dd1bba9748
commit bbcc71ad3d
3 changed files with 81 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
borgweb/borg/static/borg/js/chart.js
View File

@ -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
);

21
borgweb/borg/static/borg/js/index.js
View File

@ -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) {
draw_time_graph("daily_backup_size", json.repos, json.dates, json.units);
});
$.getJSON("repo_monthly.json", function (json) {
draw_time_graph("monthly_backup_size", json.repos, json.dates, json.units);
});
// $.getJSON("repo_daily.json", function (json) {
// draw_time_graph("daily_backup_size", json.repos, json.dates, json.units);
// });
// $.getJSON("repo_monthly.json", function (json) {
// draw_time_graph("monthly_backup_size", json.repos, json.dates, json.units);
// });
}, false);

12
borgweb/borg/templates/borg/index.html
View File

@ -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">
<canvas id="daily_backup_size" width="400" height="200"></canvas>
</div>
<div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">
<canvas id="monthly_backup_size" width="400" height="200"></canvas>
</div>
{# <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
{# <canvas id="daily_backup_size" width="400" height="200"></canvas>#}
{# </div>#}
{# <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
{# <canvas id="monthly_backup_size" width="400" height="200"></canvas>#}
{# </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>#}