jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

More distinct graph colors

Browse Source
This commit is contained in:
Johannes Zellner
2022-10-14 01:03:00 +02:00
parent 1c0043feff
commit 0f52db5dfe
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/system.js
View File

@@ -33,15 +33,26 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
return (c);
}
function getRandomColor() {
return rainbow(50, Math.random() * 50);
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
var colorIndex = 0;
var colors = [ '#2196F3', '#3995b1', '#f0ad4e', '#ff4c4c' ];
var colors = [];
function resetColors(n) {
colorIndex = 0;
colors = [];
for (var i = 0; i < n; i++) colors.push(rainbow(n, i));
shuffle(colors);
}
function getNextColor() {
if (colors[colorIndex+1]) return colors[colorIndex++];
return getRandomColor();
return colors[colorIndex++];
}
$scope.disks = {
@@ -67,7 +78,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
$scope.disks.disks.forEach(function (disk) {
var usageOther = disk.used;
colorIndex = 0;
resetColors(disk.contents.length);
disk.contents.forEach(function (content) {
content.color = getNextColor();
@@ -84,7 +95,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
type: 'standard',
label: 'Everything else (Ubuntu, Swap, etc)',
id: 'other',
color: '#27CE65',
color: '#555555',
usage: usageOther
});
} else {
@@ -92,7 +103,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
type: 'standard',
label: 'Used',
id: 'other',
color: '#27CE65',
color: '#555555',
usage: usageOther
});
}
@@ -152,13 +163,12 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
}
});
var colors = [ '#2196F3', '#FF6384' ];
function fillGraph(canvasId, contents, chartPropertyName, divisor, max, format, formatDivisor) {
if (!contents || !contents[0]) return; // no data available yet
var datasets = [];
resetColors(contents.length);
contents.forEach(function (content, index) {
// fill holes with previous value
@@ -173,10 +183,9 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
// walk backwards and fill up the datapoints
content.data.datapoints.reverse().forEach(function (d, index) {
datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2);
// return parseInt((d[0] / divisor).toFixed(2));
});
var color = index > 2 ? getRandomColor() : colors[index];
var color = index === 0 ? '#2196F3' : getNextColor();
datasets.push({
label: content.label,
backgroundColor: color + '4F',