Experiment with using hash for coloring bars

This commit is contained in:
2017-11-17 17:53:28 +01:00
parent df981f5c4d
commit e23a93a7a0

View File

@@ -1,35 +1,58 @@
// Generate unique looking color for a given bar index.
function generateBarColor(index) {
var builtin_colors = [[255, 99, 132],
[255, 159, 64],
[255, 205, 86],
[75, 192, 192],
[54, 162, 235],
[153, 102, 255],
[201, 203, 207],
[48, 103, 204],
[220, 56, 18],
[254, 155, 0],
[15, 147, 25],
[54, 76, 121],
[118, 153, 249],
[148, 50, 123],
[85, 172, 6],
[219, 200, 187],
[255, 134, 72],
[186, 247, 71],
[252, 200, 13],
[141, 215, 251],
[2, 79, 237],
[194, 138, 207],
[89, 51, 251]];
var color = [0, 0, 0];
if (index >= 0 && index < builtin_colors.length) {
color = builtin_colors[index];
function hash_string_int(s) {
var hash = 1;
for (var i = 0; i < s.length; ++i) {
var ch = s.charCodeAt(i);
hash = (hash * 163 + ch) % 2147483647;
}
return "rgb(" + color[0].toString() + ", " +
color[1].toString() + ", " +
color[2].toString() + ")";
return hash;
}
function hash_string_float(s) {
return hash_string_int(s) / 2147483647;
}
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)};
}
// Generate unique looking color for a given bar index.
function generateBarColor(index, label) {
var u1 = hash_string_float(label);
var u2 = hash_string_float(label.split("").reverse().join(""));
var h = 0, s = 0.8, v = 0.8;
if (label.startsWith("AMD")) {
h = 0;
} else if (label.startsWith("Intel")) {
h = 0.66;
} else if (label.startsWith("Nvidia")) {
h = 0.33;
}
h += ((u1 + u2) * 0.5 - 0.5) * 0.2;
if (h < 0) h = 1.0 - h;
s += (u1 - 0.5) * 0.5;
v += (u2 - 0.5) * 0.25;
var color = HSVtoRGB(h, s, v);
return "rgb(" + Math.round(color.r).toString() + ", " +
Math.round(color.g).toString() + ", " +
Math.round(color.b).toString() + ")";
}
// Correct device name, ensuring it has clear vendor indication,
@@ -80,7 +103,7 @@ function secondsToHumanReadable(seconds) {
function setDatasetColor(data, is_bar) {
var index = 0;
for (dataset of data.datasets) {
var color = Chart.helpers.color(generateBarColor(index));
var color = Chart.helpers.color(generateBarColor(index, dataset.label));
dataset.backgroundColor = color.alpha(0.5).rgbString();
dataset.borderColor = color.alpha(1.0).rgbString();
if (is_bar) {