jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the chart color more eye-friendly. (#941)

Browse Source 
* Fix chart legend not showing correctly when data has 1 series.

* Change to flexbox

* Change timeline chart color to a palette.
This commit is contained in:
Boyi C 2018-02-27 17:24:40 +08:00 committed by Paulus Schoutsen
parent bb6b0ff714
commit 807837a0dc
1 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/entity/ha-chart-base.html
View File

@ -496,37 +496,20 @@
static getColorGenerator(staticColors, startIndex) {
// Known colors for static data,
// should add for very common state string manually.
// Distribute the color data like complete binary tree
function getColorRange(x) {
if (x === 0) return 0;
if (x === 1) return 0.5;
const y = Math.floor(Math.log(x) / Math.LN2);
// eslint-disable-next-line no-restricted-properties
const e = Math.pow(2, y);
const n = x - e;
let a;
if (y % 2 === 1) {
if (n % 2 === 0) {
a = n + 1;
} else {
a = n + e;
}
} else {
// eslint-disable-next-line no-lonely-if
if (n % 2 === 0) {
a = e - n - 1;
} else {
a = (e + e) - n;
}
}
return a / (e + e);
}
// Palette modified from http://google.github.io/palette.js/ mpn65, Apache 2.0
const palette = [
'ff0029', '66a61e', '377eb8', '984ea3', '00d2d5', 'ff7f00', 'af8d00',
'7f80cd', 'b3e900', 'c42e60', 'a65628', 'f781bf', '8dd3c7', 'bebada',
'fb8072', '80b1d3', 'fdb462', 'fccde5', 'bc80bd', 'ffed6f', 'c4eaff',
'cf8c00', '1b9e77', 'd95f02', 'e7298a', 'e6ab02', 'a6761d', '0097ff',
'00d067', 'f43600', '4ba93b', '5779bb', '927acc', '97ee3f', 'bf3947',
'9f5b00', 'f48758', '8caed6', 'f2b94f', 'eff26e', 'e43872', 'd9b100',
'9d7a00', '698cff', 'd9d9d9', '00d27e', 'd06800', '009f82', 'c49200',
'cbe8ff', 'fecddf', 'c27eb6', '8cd2ce', 'c4b8d9', 'f883b0', 'a49100',
'f48800', '27d0df', 'a04a9b'];
function getColorIndex(idx) {
const hIndex = Math.floor(idx / 6);
const h1 = getColorRange(hIndex);
const c1 = (h1 + (idx % 3)) * 120;
const l1 = idx % 6 < 3 ? 62 : 38;
return Color().hsl(c1, 75, l1);
// Reuse the color if index too large.
return Color('#' + palette[idx % palette.length]);
}
const colorDict = {};
let colorIndex = 0;