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

Create graphs based on html data attribute

Browse Source
This commit is contained in:
George Lacey 2022-04-11 11:30:15 +01:00
parent 3031454682
commit 29d5b51752
4 changed files with 31 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,
data: repo.size,
label: data.label,
data: data.size,
fill: false,
borderColor: 'rgb(7, 59, 76)'
}]
const data = {
labels: dateLabels,
const graphData = {
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(
document.getElementById(chartID),
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),
const newGraph = new Chart(
canvas,
config
);
}

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

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

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

@ -58,8 +58,12 @@
</div>
</dd>
</dl>
<canvas id="repo-{{ repo.label }}-size-graph" width="400" height="200"></canvas>
</dl>
<div id="repo-{{ repo.label }}-size-graph"
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 %}

8
borgweb/borg/views/json.py
View File

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