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

Move chart creation code to new file

Browse Source 
- Use cdn for chart.js
This commit is contained in:
George Lacey 2021-07-11 10:15:20 +01:00
parent e216e50d74
commit dd21676b55
4 changed files with 66 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
borgweb/borg/static/borg/js/chart.js Normal file
View File

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

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

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

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

@ -4,8 +4,10 @@
{% block title %}Borg Summary{% endblock %}
{% block script %}
<script src="{% static 'js/chart.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"
integrity="sha256-GMN9UIJeUeOsn/Uq4xDheGItEeSpI5Hcfp/63GclDZk=" crossorigin="anonymous"></script>
{{ hour_list|json_script:"hour_list" }}
<script src="{% static 'borg/js/chart.js' %}"></script>
<script src="{% static 'borg/js/index.js' %}"></script>
{% endblock %}

5
borgweb/borg/templates/borg/repo.html
View File

@ -4,8 +4,11 @@
{% load static %}
{% block script %}
{{block.super}}
<script src="{% static 'js/chart.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"
integrity="sha256-GMN9UIJeUeOsn/Uq4xDheGItEeSpI5Hcfp/63GclDZk=" crossorigin="anonymous"></script>
{{ hour_list|json_script:"hour_list" }}
<script src="{% static 'borg/js/chart.js' %}"></script>
<script src="{% static 'borg/js/repo.js' %}"></script>
{% endblock %}
{% block style %}