Archives/ohwgiles_laminar
1
0
Fork 0
mirror of https://github.com/ohwgiles/laminar.git synced 2024-10-27 20:34:20 +00:00
Code Issues Projects Releases Wiki Activity

Update Chart.js to latest: 2.7.2

Browse Source 
Adapt to new API. This removes a few workarounds and should
contribute nicely to #44, #45 and #57
This commit is contained in:
Oliver Giles 2018-07-06 17:47:48 +03:00
parent d29715c0ec
commit e506142fa4
4 changed files with 82 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CMakeLists.txt
View File

@ -71,15 +71,13 @@ file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router
js/vue-router.min.js EXPECTED_MD5 5d3e35710dbe02de78c39e3e439b8d4e)
file(DOWNLOAD https://raw.githubusercontent.com/drudru/ansi_up/v1.3.0/ansi_up.js
js/ansi_up.js EXPECTED_MD5 158566dc1ff8f2804de972f7e841e2f6)
file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
js/Chart.min.js EXPECTED_MD5 0d3004601c1a855a3d203502549528a7)
file(DOWNLOAD https://raw.githubusercontent.com/tomsouthall/Chart.HorizontalBar.js/v1.04/Chart.HorizontalBar.js
js/Chart.HorizontalBar.js EXPECTED_MD5 95070a38e69bc56534e1b2086d985270)
file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
js/Chart.min.js EXPECTED_MD5 f6c8efa65711e0cbbc99ba72997ecd0e)
file(DOWNLOAD https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
css/bootstrap.min.css EXPECTED_MD5 5d5357cb3704e1f43a1f5bfed2aebf42)
# ...and compile them
generate_compressed_bins(${CMAKE_BINARY_DIR} js/vue-router.min.js js/vue.min.js
js/ansi_up.js js/Chart.min.js js/Chart.HorizontalBar.js css/bootstrap.min.css)
js/ansi_up.js js/Chart.min.js css/bootstrap.min.css)
# (see resources.cpp where these are fetched)
## Server

2
src/resources.cpp
View File

@ -37,13 +37,11 @@ Resources::Resources()
INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG);
INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG);
INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/vue.min.js", js_vue_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/vue-router.min.js", js_vue_router_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/Chart.min.js", js_Chart_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/css/bootstrap.min.css", css_bootstrap_min_css, CONTENT_TYPE_CSS);
}

1
src/resources/index.html
View File

@ -12,7 +12,6 @@
<script src="/js/vue-router.min.js"></script>
<script src="/js/ansi_up.js"></script>
<script src="/js/Chart.min.js"></script>
<script src="/js/Chart.HorizontalBar.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/custom/style.css" rel="stylesheet">
<script src="/js/app.js" defer></script>

116
src/resources/js/app.js
View File

@ -177,8 +177,8 @@ const Home = function() {
var chtUtilization, chtBuildsPerDay, chtBuildsPerJob, chtTimePerJob;
var updateUtilization = function(busy) {
chtUtilization.segments[0].value += busy ? 1 : -1;
chtUtilization.segments[1].value -= busy ? 1 : -1;
chtUtilization.data.datasets[0].data[0] += busy ? 1 : -1;
chtUtilization.data.datasets[0].data[1] -= busy ? 1 : -1;
chtUtilization.update();
}
@ -196,23 +196,20 @@ const Home = function() {
this.$forceUpdate();
// setup charts
chtUtilization = new Chart(document.getElementById("chartUtil").getContext("2d")).Pie(
[{
value: msg.executorsBusy,
color: "tan",
label: "Busy"
},
{
value: msg.executorsTotal - msg.executorsBusy,
color: "darkseagreen",
label: "Idle"
chtUtilization = new Chart(document.getElementById("chartUtil"), {
type: 'pie',
data: {
labels: ["Busy", "Idle"],
datasets: [{
data: [ msg.executorsBusy, msg.executorsTotal - msg.executorsBusy ],
backgroundColor: ["tan", "darkseagreen"]
}]
}
], {
animationEasing: 'easeInOutQuad'
}
);
chtBuildsPerDay = new Chart(document.getElementById("chartBpd").getContext("2d")).Line({
labels: function() {
});
chtBuildsPerDay = new Chart(document.getElementById("chartBpd"), {
type: 'line',
data: {
labels: (()=>{
res = [];
var now = new Date();
for (var i = 6; i >= 0; --i) {
@ -220,45 +217,42 @@ const Home = function() {
res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]);
}
return res;
}(),
})(),
datasets: [{
label: "Successful Builds",
fillColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65
strokeColor: "forestgreen",
data: msg.buildsPerDay.map(function(e) {
return e.success || 0;
})
label: 'Successful Builds',
backgroundColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65
borderColor: "forestgreen",
data: msg.buildsPerDay.map((e)=>{ return e.success || 0; })
}, {
label: "Failed Bulids",
fillColor: "rgba(233,150,122,0.65)", //darksalmon at 0.65
strokeColor: "crimson",
data: msg.buildsPerDay.map(function(e) {
return e.failed || 0;
})
label: 'Failed Builds',
backgroundColor: "rgba(233,150,122,0.65)", //darkseagreen at 0.65
borderColor: "crimson",
data: msg.buildsPerDay.map((e)=>{ return e.failed || 0; })
}]
}, {
showTooltips: false
}
});
chtBuildsPerJob = new Chart(document.getElementById("chartBpj").getContext("2d")).HorizontalBar({
chtBuildsPerJob = new Chart(document.getElementById("chartBpj"), {
type: 'horizontalBar',
data: {
labels: Object.keys(msg.buildsPerJob),
datasets: [{
fillColor: "lightsteelblue",
data: Object.keys(msg.buildsPerJob).map(function(e) {
return msg.buildsPerJob[e];
})
label: 'Most runs per job in last 24hrs',
backgroundColor: "lightsteelblue",
data: Object.keys(msg.buildsPerJob).map((e)=>{ return msg.buildsPerJob[e]; })
}]
}, {});
chtTimePerJob = new Chart(document.getElementById("chartTpj").getContext("2d")).HorizontalBar({
}
});
chtTimePerJob = new Chart(document.getElementById("chartTpj"), {
type: 'horizontalBar',
data: {
labels: Object.keys(msg.timePerJob),
datasets: [{
fillColor: "lightsteelblue",
data: Object.keys(msg.timePerJob).map(function(e) {
return msg.timePerJob[e];
})
label: 'Longest average runtime this week',
backgroundColor: "lightsteelblue",
data: Object.keys(msg.timePerJob).map((e)=>{ return msg.timePerJob[e]; })
}]
}, {});
}
});
},
job_queued: function(data) {
state.jobsQueued.splice(0, 0, data);
@ -272,9 +266,9 @@ const Home = function() {
},
job_completed: function(data) {
if (data.result === "success")
chtBuildsPerDay.datasets[0].points[6].value++;
chtBuildsPerDay.data.datasets[0].data[6]++;
else
chtBuildsPerDay.datasets[1].points[6].value++;
chtBuildsPerDay.data.datasets[1].data[6]++;
chtBuildsPerDay.update();
for (var i = 0; i < state.jobsRunning.length; ++i) {
@ -287,9 +281,9 @@ const Home = function() {
}
}
updateUtilization(false);
for (var j = 0; j < chtBuildsPerJob.datasets[0].bars.length; ++j) {
if (chtBuildsPerJob.datasets[0].bars[j].label == job.name) {
chtBuildsPerJob.datasets[0].bars[j].value++;
for (var j = 0; j < chtBuildsPerJob.data.datasets[0].data.length; ++j) {
if (chtBuildsPerJob.data.labels[j] == job.name) {
chtBuildsPerJob.data.datasets[0].data[j]++;
chtBuildsPerJob.update();
break;
}
@ -426,27 +420,27 @@ var Job = function() {
state.pages = msg.pages;
state.page = msg.page;
var chtBt = new Chart(document.getElementById("chartBt").getContext("2d")).Bar({
var chtBt = new Chart(document.getElementById("chartBt"), {
type: 'bar',
data: {
labels: msg.recent.map(function(e) {
return '#' + e.number;
}).reverse(),
datasets: [{
fillColor: "darkseagreen",
strokeColor: "forestgreen",
label: 'Build time',
backgroundColor: (new Array(msg.recent.length)).fill('darkseagreen'),
borderColor: (new Array(msg.recent.length)).fill('forestgreen'),
data: msg.recent.map(function(e) {
return e.completed - e.started;
}).reverse()
}]
}, {
barValueSpacing: 1,
barStrokeWidth: 1,
barDatasetSpacing: 0
}
});
for (var i = 0, n = msg.recent.length; i < n; ++i) {
if (msg.recent[i].result != "success") {
chtBt.datasets[0].bars[n - i - 1].fillColor = "darksalmon";
chtBt.datasets[0].bars[n - i - 1].strokeColor = "crimson";
chtBt.data.datasets[0].backgroundColor[n - i - 1] = "darksalmon";
chtBt.data.datasets[0].borderColor[n - i - 1] = "crimson";
}
}
chtBt.update();