mirror/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
Code Issues Projects Releases Wiki Activity

chore: minor changes to vibrant colors toggling

Browse Source
This commit is contained in:
Ferdinand Mütsch
2022-04-24 09:26:04 +02:00
parent 9048a8eb7a
commit 30a65b4de9
4 changed files with 28 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/assets/js/components/settings.js
View File

@@ -2,7 +2,7 @@ PetiteVue.createApp({
//$delimiters: ['${', '}'], // https://github.com/vuejs/petite-vue/pull/100 //$delimiters: ['${', '}'], // https://github.com/vuejs/petite-vue/pull/100
activeTab: defaultTab, activeTab: defaultTab,
selectedTimezone: userTimeZone, selectedTimezone: userTimeZone,
vibrantColorEnabled: JSON.parse(localStorage.getItem('vibrant-color') || false), vibrantColorsEnabled: JSON.parse(localStorage.getItem('wakapi_vibrant_colors') || false),
get tzOptions() { get tzOptions() {
return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))] return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))]
}, },
@@ -32,12 +32,8 @@ PetiteVue.createApp({
document.querySelector('#form-delete-user').submit() document.querySelector('#form-delete-user').submit()
} }
}, },
toggleVibrantColor() { onToggleVibrantColors() {
let key = 'vibrant-color'; localStorage.setItem('wakapi_vibrant_colors', this.vibrantColorsEnabled)
let value = !(JSON.parse(localStorage.getItem(key) || false));
localStorage.setItem(key, value);
this.vibrantColorEnabled = value;
return value;
}, },
mounted() { mounted() {
this.updateTab() this.updateTab()

26
static/assets/js/summary.js
View File

@@ -87,7 +87,7 @@ function draw(subselection) {
.filter((c, i) => shouldUpdate(i)) .filter((c, i) => shouldUpdate(i))
.forEach(c => c.destroy()) .forEach(c => c.destroy())
let vibrantColor = JSON.parse(window.localStorage.getItem('vibrant-color') || false); const vibrantColors = JSON.parse(window.localStorage.getItem('wakapi_vibrant_colors') || false);
let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0) let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
? new Chart(projectsCanvas.getContext('2d'), { ? new Chart(projectsCanvas.getContext('2d'), {
@@ -99,11 +99,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[0], wakapiData.projects.length)) .slice(0, Math.min(showTopN[0], wakapiData.projects.length))
.map(p => parseInt(p.total)), .map(p => parseInt(p.total)),
backgroundColor: wakapiData.projects.map((p, i) => { backgroundColor: wakapiData.projects.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}), }),
hoverBackgroundColor: wakapiData.projects.map((p, i) => { hoverBackgroundColor: wakapiData.projects.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}), }),
}], }],
@@ -154,11 +154,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length)) .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
.map(p => parseInt(p.total)), .map(p => parseInt(p.total)),
backgroundColor: wakapiData.operatingSystems.map((p, i) => { backgroundColor: wakapiData.operatingSystems.map((p, i) => {
const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}), }),
hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => { hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => {
const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}), }),
borderWidth: 0 borderWidth: 0
@@ -191,11 +191,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[2], wakapiData.editors.length)) .slice(0, Math.min(showTopN[2], wakapiData.editors.length))
.map(p => parseInt(p.total)), .map(p => parseInt(p.total)),
backgroundColor: wakapiData.editors.map((p, i) => { backgroundColor: wakapiData.editors.map((p, i) => {
const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}), }),
hoverBackgroundColor: wakapiData.editors.map((p, i) => { hoverBackgroundColor: wakapiData.editors.map((p, i) => {
const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}), }),
borderWidth: 0 borderWidth: 0
@@ -268,11 +268,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[4], wakapiData.machines.length)) .slice(0, Math.min(showTopN[4], wakapiData.machines.length))
.map(p => parseInt(p.total)), .map(p => parseInt(p.total)),
backgroundColor: wakapiData.machines.map((p, i) => { backgroundColor: wakapiData.machines.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}), }),
hoverBackgroundColor: wakapiData.machines.map((p, i) => { hoverBackgroundColor: wakapiData.machines.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}), }),
borderWidth: 0 borderWidth: 0
@@ -305,11 +305,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[5], wakapiData.labels.length)) .slice(0, Math.min(showTopN[5], wakapiData.labels.length))
.map(p => parseInt(p.total)), .map(p => parseInt(p.total)),
backgroundColor: wakapiData.labels.map((p, i) => { backgroundColor: wakapiData.labels.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}), }),
hoverBackgroundColor: wakapiData.labels.map((p, i) => { hoverBackgroundColor: wakapiData.labels.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}), }),
borderWidth: 0 borderWidth: 0
@@ -342,11 +342,11 @@ function draw(subselection) {
.slice(0, Math.min(showTopN[6], wakapiData.branches.length)) .slice(0, Math.min(showTopN[6], wakapiData.branches.length))
.map(p => parseInt(p.total)), .map(p => parseInt(p.total)),
backgroundColor: wakapiData.branches.map((p, i) => { backgroundColor: wakapiData.branches.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}), }),
hoverBackgroundColor: wakapiData.branches.map((p, i) => { hoverBackgroundColor: wakapiData.branches.map((p, i) => {
const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}), }),
}], }],

5
views/settings.tpl.html
View File

@@ -369,7 +369,10 @@
<div class="w-full md:w-2/3 inline-block"> <div class="w-full md:w-2/3 inline-block">
<div class="flex-col items-center w-full text-gray-500 text-sm"> <div class="flex-col items-center w-full text-gray-500 text-sm">
<input class="flex cursor-pointer h-4 w-4" type="checkbox" id="vibrant-color-toggle" @click="toggleVibrantColor" v-model="vibrantColorEnabled"> <select autocomplete="off" id="vibrant-color-toggle" class="select-default" style="max-width: 6rem" v-model="vibrantColorsEnabled" @change="onToggleVibrantColors">
<option value="false" class="cursor-pointer">Disabled</option>
<option value="true" class="cursor-pointer">Enabled</option>
</select>
</div> </div>
</div> </div>
</div> </div>