1
0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00

feat: allow toggling vibrant color for all charts

- supports new config key `app.vibrant_color` or env `WAKAPI_VIBRANT_COLOR`
- updates and extends `data/colors.json` with editor and os colors
- fixes #343
This commit is contained in:
bdeshi
2022-03-28 01:56:13 +06:00
parent 5aae18e241
commit f6cc489425
7 changed files with 306 additions and 125 deletions

View File

@ -97,11 +97,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[0], wakapiData.projects.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.projects.map((p, i) => {
const c = hexToRgb(getColor(p.key, i % baseColors.length))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.projects.map((p, i) => {
const c = hexToRgb(getColor(p.key, i % baseColors.length))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
}],
@ -152,11 +152,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.operatingSystems.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
@ -189,11 +189,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[2], wakapiData.editors.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.editors.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.editors.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
@ -266,11 +266,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[4], wakapiData.machines.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.machines.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.machines.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
@ -303,11 +303,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[5], wakapiData.labels.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.labels.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.labels.map((p, i) => {
const c = hexToRgb(getColor(p.key, i))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
@ -340,11 +340,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[6], wakapiData.branches.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.branches.map((p, i) => {
const c = hexToRgb(getColor(p.key, i % baseColors.length))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.branches.map((p, i) => {
const c = hexToRgb(getColor(p.key, i % baseColors.length))
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
}],
@ -455,4 +455,3 @@ window.addEventListener('load', function () {
togglePlaceholders(getPresentDataMask())
draw()
})