Archives
/
ohwgiles_laminar
mirror of https://github.com/ohwgiles/laminar
1
0
Fork 0
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
pull/70/head
Oliver Giles 6 years ago
parent d29715c0ec
commit e506142fa4
4 changed files with 82 additions and 93 deletions
Show Stats Download Patch File Download Diff File

8
CMakeLists.txt
Unescape 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
Unescape 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
Unescape 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>

164
src/resources/js/app.js
Unescape 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,69 +196,63 @@ 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"
}
], {
animationEasing: 'easeInOutQuad'
chtUtilization = new Chart(document.getElementById("chartUtil"), {
type: 'pie',
data: {
labels: ["Busy", "Idle"],
datasets: [{
data: [ msg.executorsBusy, msg.executorsTotal - msg.executorsBusy ],
backgroundColor: ["tan", "darkseagreen"]
}]
}
});
chtBuildsPerDay = new Chart(document.getElementById("chartBpd"), {
type: 'line',
data: {
labels: (()=>{
res = [];
var now = new Date();
for (var i = 6; i >= 0; --i) {
var then = new Date(now.getTime() - i * 86400000);
res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]);
}
return res;
})(),
datasets: [{
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 Builds',
backgroundColor: "rgba(233,150,122,0.65)", //darkseagreen at 0.65
borderColor: "crimson",
data: msg.buildsPerDay.map((e)=>{ return e.failed || 0; })
}]
}
});
chtBuildsPerJob = new Chart(document.getElementById("chartBpj"), {
type: 'horizontalBar',
data: {
labels: Object.keys(msg.buildsPerJob),
datasets: [{
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"), {
type: 'horizontalBar',
data: {
labels: Object.keys(msg.timePerJob),
datasets: [{
label: 'Longest average runtime this week',
backgroundColor: "lightsteelblue",
data: Object.keys(msg.timePerJob).map((e)=>{ return msg.timePerJob[e]; })
}]
}
);
chtBuildsPerDay = new Chart(document.getElementById("chartBpd").getContext("2d")).Line({
labels: function() {
res = [];
var now = new Date();
for (var i = 6; i >= 0; --i) {
var then = new Date(now.getTime() - i * 86400000);
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: "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;
})
}]
}, {
showTooltips: false
});
chtBuildsPerJob = new Chart(document.getElementById("chartBpj").getContext("2d")).HorizontalBar({
labels: Object.keys(msg.buildsPerJob),
datasets: [{
fillColor: "lightsteelblue",
data: Object.keys(msg.buildsPerJob).map(function(e) {
return msg.buildsPerJob[e];
})
}]
}, {});
chtTimePerJob = new Chart(document.getElementById("chartTpj").getContext("2d")).HorizontalBar({
labels: Object.keys(msg.timePerJob),
datasets: [{
fillColor: "lightsteelblue",
data: Object.keys(msg.timePerJob).map(function(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({
labels: msg.recent.map(function(e) {
return '#' + e.number;
}).reverse(),
datasets: [{
fillColor: "darkseagreen",
strokeColor: "forestgreen",
data: msg.recent.map(function(e) {
return e.completed - e.started;
}).reverse()
}]
}, {
barValueSpacing: 1,
barStrokeWidth: 1,
barDatasetSpacing: 0
var chtBt = new Chart(document.getElementById("chartBt"), {
type: 'bar',
data: {
labels: msg.recent.map(function(e) {
return '#' + e.number;
}).reverse(),
datasets: [{
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()
}]
}
});
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();

Write Preview
Loading…
Cancel
Save