mirror of
https://github.com/muety/wakapi.git
synced 2023-08-10 21:12:56 +03:00
chore: move vue components to separate js files
This commit is contained in:
Ferdinand Mütsch
37
static/assets/js/base.js
Normal file
37
static/assets/js/base.js
Normal file
@ -0,0 +1,37 @@
|
||||
// @formatter:off
|
||||
const MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
|
||||
|
||||
function findParentAttribute(el, attrName) {
|
||||
if (el.attributes[attrName]) return el.attributes[attrName]
|
||||
if (!el.parentNode || !el.parentNode.attributes) return null
|
||||
return findParentAttribute(el.parentNode, attrName)
|
||||
}
|
||||
|
||||
function copyApiKey(event) {
|
||||
const el = document.getElementById('api-key-container')
|
||||
el.select()
|
||||
el.setSelectionRange(0, 9999)
|
||||
document.execCommand('copy')
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const baseUrl = location.href.substring(0, location.href.lastIndexOf('/'))
|
||||
document.querySelectorAll('.with-url-src').forEach(e => {
|
||||
e.setAttribute('src', e.getAttribute('src').replace('%s', baseUrl))
|
||||
})
|
||||
document.querySelectorAll('.with-url-src-no-scheme').forEach(e => {
|
||||
const strippedUrl = baseUrl.replace(/https?:\/\//, '')
|
||||
e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl))
|
||||
})
|
||||
document.querySelectorAll('.with-url-value').forEach(e => {
|
||||
e.setAttribute('value', e.getAttribute('value').replace('%s', baseUrl))
|
||||
})
|
||||
document.querySelectorAll('.with-url-inner').forEach(e => {
|
||||
e.innerHTML = e.innerHTML.replace('%s', baseUrl)
|
||||
})
|
||||
document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => {
|
||||
const strippedUrl = baseUrl.replace(/https?:\/\//, '')
|
||||
e.innerHTML = e.innerHTML.replace('%s', strippedUrl)
|
||||
})
|
||||
})
|
||||
14
static/assets/js/components/menu-main.js
Normal file
14
static/assets/js/components/menu-main.js
Normal file
@ -0,0 +1,14 @@
|
||||
PetiteVue.createApp({
|
||||
$delimiters: ['${', '}'],
|
||||
state: {
|
||||
showDropdownResources: false,
|
||||
showDropdownUser: false,
|
||||
showApiKey: false
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('click', (e) => {
|
||||
const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
|
||||
Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
|
||||
})
|
||||
}
|
||||
}).mount('#main-menu')
|
||||
33
static/assets/js/components/settings.js
Normal file
33
static/assets/js/components/settings.js
Normal file
@ -0,0 +1,33 @@
|
||||
PetiteVue.createApp({
|
||||
//$delimiters: ['${', '}'], // https://github.com/vuejs/petite-vue/pull/100
|
||||
activeTab: defaultTab,
|
||||
selectedTimezone: userTimeZone,
|
||||
get tzOptions() {
|
||||
return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))]
|
||||
},
|
||||
updateTab() {
|
||||
this.activeTab = window.location.hash.slice(1) || defaultTab
|
||||
},
|
||||
isActive(tab) {
|
||||
return this.activeTab === tab
|
||||
},
|
||||
confirmRegenerate() {
|
||||
if (confirm('Are you sure?')) {
|
||||
formRegenerate.submit()
|
||||
}
|
||||
},
|
||||
confirmWakatimeImport() {
|
||||
if (confirm('Are you sure? The import can not be undone.')) {
|
||||
formImportWakatime.submit()
|
||||
}
|
||||
},
|
||||
confirmDeleteAccount() {
|
||||
if (confirm('Are you sure? This can not be undone!')) {
|
||||
formDelete.submit()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateTab()
|
||||
window.addEventListener('hashchange', () => this.updateTab())
|
||||
}
|
||||
}).mount('#settings-page')
|
||||
29
static/assets/js/components/signup.js
Normal file
29
static/assets/js/components/signup.js
Normal file
@ -0,0 +1,29 @@
|
||||
let debounceTimeout
|
||||
|
||||
PetiteVue.createApp({
|
||||
timezone: guessTimezone(),
|
||||
username: '',
|
||||
email: '',
|
||||
avatarUrl: defaultAvatarUrl,
|
||||
updateAvatar() {
|
||||
if (!avatarUrlTemplate) return
|
||||
if (debounceTimeout) {
|
||||
clearTimeout(debounceTimeout)
|
||||
}
|
||||
debounceTimeout = setTimeout(() => {
|
||||
let url = avatarUrlTemplate
|
||||
|
||||
if ((url.includes('{username') && !this.username) || (url.includes('{email') && !this.email)) {
|
||||
url = defaultAvatarUrl
|
||||
} else {
|
||||
url = url.replaceAll('{username}', this.username)
|
||||
url = url.replaceAll('{email}', this.email)
|
||||
url = url.replaceAll('{username_hash}', MD5(this.username))
|
||||
url = url.replaceAll('{email_hash}', MD5(this.email))
|
||||
url = url.includes('{') ? defaultAvatarUrl : url
|
||||
}
|
||||
console.log(url)
|
||||
this.avatarUrl = url
|
||||
}, 500)
|
||||
}
|
||||
}).mount('#signup-page')
|
||||
24
static/assets/js/components/summary.js
Normal file
24
static/assets/js/components/summary.js
Normal file
@ -0,0 +1,24 @@
|
||||
PetiteVue.createApp({
|
||||
$delimiters: ['${', '}'],
|
||||
state: {
|
||||
showDropdownTimepicker: false,
|
||||
},
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
timeSelection: timeSelection,
|
||||
onDateUpdated() {
|
||||
formTimePicker.submit()
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('click', (e) => {
|
||||
const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
|
||||
Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
|
||||
})
|
||||
|
||||
const query = new URLSearchParams(window.location.search)
|
||||
if (query.has('interval')) {
|
||||
const refEl = document.getElementById(`time-option-${query.get('interval')}`)
|
||||
this.timeSelection = refEl ? refEl.innerText : 'Unknown'
|
||||
}
|
||||
}
|
||||
}).mount('#summary-page')
|
||||
22
static/assets/js/icons.js
Normal file
22
static/assets/js/icons.js
Normal file
File diff suppressed because one or more lines are too long
400
static/assets/js/summary.js
Normal file
400
static/assets/js/summary.js
Normal file
@ -0,0 +1,400 @@
|
||||
const LEGEND_MAX_ENTRIES = 9
|
||||
// dirty hack to vertically align legends across multiple charts
|
||||
// however, without monospace font, it's still not perfectly aligned
|
||||
// waiting for https://github.com/chartjs/Chart.js/discussions/9890
|
||||
const LEGEND_CHARACTERS = 20
|
||||
|
||||
// https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/276749/39/103/73/white
|
||||
const baseColors = ['#112836', '#163B43', '#1C4F4D', '#215B4C', '#276749', '#437C57', '#5F9167', '#7DA67C', '#9FBA98', '#BFCEB5', '#DCE2D3']
|
||||
|
||||
const projectsCanvas = document.getElementById('chart-projects')
|
||||
const osCanvas = document.getElementById('chart-os')
|
||||
const editorsCanvas = document.getElementById('chart-editor')
|
||||
const languagesCanvas = document.getElementById('chart-language')
|
||||
const machinesCanvas = document.getElementById('chart-machine')
|
||||
const labelsCanvas = document.getElementById('chart-label')
|
||||
|
||||
const projectContainer = document.getElementById('project-container')
|
||||
const osContainer = document.getElementById('os-container')
|
||||
const editorContainer = document.getElementById('editor-container')
|
||||
const languageContainer = document.getElementById('language-container')
|
||||
const machineContainer = document.getElementById('machine-container')
|
||||
const labelContainer = document.getElementById('label-container')
|
||||
|
||||
const containers = [projectContainer, osContainer, editorContainer, languageContainer, machineContainer, labelContainer]
|
||||
const canvases = [projectsCanvas, osCanvas, editorsCanvas, languagesCanvas, machinesCanvas, labelsCanvas]
|
||||
const data = [wakapiData.projects, wakapiData.operatingSystems, wakapiData.editors, wakapiData.languages, wakapiData.machines, wakapiData.labels]
|
||||
|
||||
let topNPickers = [...document.getElementsByClassName('top-picker')]
|
||||
topNPickers.sort(((a, b) => parseInt(a.attributes['data-entity'].value) - parseInt(b.attributes['data-entity'].value)))
|
||||
topNPickers.forEach(e => {
|
||||
const idx = parseInt(e.attributes['data-entity'].value)
|
||||
e.max = Math.min(data[idx].length, 10)
|
||||
e.value = e.max
|
||||
})
|
||||
|
||||
let charts = []
|
||||
let showTopN = []
|
||||
|
||||
Chart.defaults.color = "#E2E8F0"
|
||||
Chart.defaults.borderColor = "#242b3a"
|
||||
Chart.defaults.font.family = 'Source Sans 3, Roboto, Helvetica Neue, Arial, sens-serif'
|
||||
|
||||
String.prototype.toHHMMSS = function () {
|
||||
const sec_num = parseInt(this, 10)
|
||||
let hours = Math.floor(sec_num / 3600)
|
||||
let minutes = Math.floor((sec_num - (hours * 3600)) / 60)
|
||||
let seconds = sec_num - (hours * 3600) - (minutes * 60)
|
||||
|
||||
if (hours < 10) {
|
||||
hours = '0' + hours
|
||||
}
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes
|
||||
}
|
||||
if (seconds < 10) {
|
||||
seconds = '0' + seconds
|
||||
}
|
||||
return `${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
function draw(subselection) {
|
||||
function getTooltipOptions(key) {
|
||||
return {
|
||||
callbacks: {
|
||||
label: (item) => {
|
||||
const d = wakapiData[key][item.dataIndex]
|
||||
return `${d.key}: ${d.total.toString().toHHMMSS()}`
|
||||
},
|
||||
title: () => 'Total Time'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function filterLegendItem(item) {
|
||||
item.text = item.text.length > LEGEND_CHARACTERS ? item.text.slice(0, LEGEND_CHARACTERS - 3).padEnd(LEGEND_CHARACTERS, '.') : item.text
|
||||
item.text = item.text.padEnd(LEGEND_CHARACTERS + 3)
|
||||
return item.index < LEGEND_MAX_ENTRIES
|
||||
}
|
||||
|
||||
function shouldUpdate(index) {
|
||||
return !subselection || (subselection.includes(index) && data[index].length >= showTopN[index])
|
||||
}
|
||||
|
||||
charts
|
||||
.filter((c, i) => shouldUpdate(i))
|
||||
.forEach(c => c.destroy())
|
||||
|
||||
let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
|
||||
? new Chart(projectsCanvas.getContext('2d'), {
|
||||
//type: 'horizontalBar',
|
||||
type: "bar",
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.projects
|
||||
.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))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
|
||||
}),
|
||||
hoverBackgroundColor: wakapiData.projects.map((p, i) => {
|
||||
const c = hexToRgb(getColor(p.key, i % baseColors.length))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
|
||||
}),
|
||||
}],
|
||||
labels: wakapiData.projects
|
||||
.slice(0, Math.min(showTopN[0], wakapiData.projects.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
xAxes: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Duration (hh:mm:ss)',
|
||||
},
|
||||
ticks: {
|
||||
callback: (label) => label.toString().toHHMMSS(),
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: getTooltipOptions('projects'),
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
let osChart = osCanvas && !osCanvas.classList.contains('hidden') && shouldUpdate(1)
|
||||
? new Chart(osCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.operatingSystems
|
||||
.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))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
|
||||
}),
|
||||
hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => {
|
||||
const c = hexToRgb(getColor(p.key, i))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
|
||||
}),
|
||||
borderWidth: 0
|
||||
}],
|
||||
labels: wakapiData.operatingSystems
|
||||
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: getTooltipOptions('operatingSystems'),
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
filter: filterLegendItem
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
let editorChart = editorsCanvas && !editorsCanvas.classList.contains('hidden') && shouldUpdate(2)
|
||||
? new Chart(editorsCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.editors
|
||||
.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))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
|
||||
}),
|
||||
hoverBackgroundColor: wakapiData.editors.map((p, i) => {
|
||||
const c = hexToRgb(getColor(p.key, i))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
|
||||
}),
|
||||
borderWidth: 0
|
||||
}],
|
||||
labels: wakapiData.editors
|
||||
.slice(0, Math.min(showTopN[2], wakapiData.editors.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: getTooltipOptions('editors'),
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
filter: filterLegendItem
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
let languageChart = languagesCanvas && !languagesCanvas.classList.contains('hidden') && shouldUpdate(3)
|
||||
? new Chart(languagesCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.languages
|
||||
.slice(0, Math.min(showTopN[3], wakapiData.languages.length))
|
||||
.map(p => parseInt(p.total)),
|
||||
backgroundColor: wakapiData.languages.map(p => {
|
||||
const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
|
||||
}),
|
||||
hoverBackgroundColor: wakapiData.languages.map(p => {
|
||||
const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
|
||||
}),
|
||||
borderWidth: 0
|
||||
}],
|
||||
labels: wakapiData.languages
|
||||
.slice(0, Math.min(showTopN[3], wakapiData.languages.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: getTooltipOptions('languages'),
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
filter: filterLegendItem
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
let machineChart = machinesCanvas && !machinesCanvas.classList.contains('hidden') && shouldUpdate(4)
|
||||
? new Chart(machinesCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.machines
|
||||
.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))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
|
||||
}),
|
||||
hoverBackgroundColor: wakapiData.machines.map((p, i) => {
|
||||
const c = hexToRgb(getColor(p.key, i))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
|
||||
}),
|
||||
borderWidth: 0
|
||||
}],
|
||||
labels: wakapiData.machines
|
||||
.slice(0, Math.min(showTopN[4], wakapiData.machines.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: getTooltipOptions('machines'),
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
filter: filterLegendItem
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
let labelChart = labelsCanvas && !labelsCanvas.classList.contains('hidden') && shouldUpdate(5)
|
||||
? new Chart(labelsCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.labels
|
||||
.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))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
|
||||
}),
|
||||
hoverBackgroundColor: wakapiData.labels.map((p, i) => {
|
||||
const c = hexToRgb(getColor(p.key, i))
|
||||
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
|
||||
}),
|
||||
borderWidth: 0
|
||||
}],
|
||||
labels: wakapiData.labels
|
||||
.slice(0, Math.min(showTopN[5], wakapiData.labels.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: getTooltipOptions('labels'),
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
filter: filterLegendItem
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
charts[0] = projectChart ? projectChart : charts[0]
|
||||
charts[1] = osChart ? osChart : charts[1]
|
||||
charts[2] = editorChart ? editorChart : charts[2]
|
||||
charts[3] = languageChart ? languageChart : charts[3]
|
||||
charts[4] = machineChart ? machineChart : charts[4]
|
||||
charts[5] = labelChart ? labelChart : charts[5]
|
||||
}
|
||||
|
||||
function parseTopN() {
|
||||
showTopN = topNPickers.map(e => parseInt(e.value))
|
||||
}
|
||||
|
||||
function togglePlaceholders(mask) {
|
||||
const placeholderElements = containers.map(c => c ? c.querySelector('.placeholder-container') : null)
|
||||
|
||||
for (let i = 0; i < mask.length; i++) {
|
||||
if (placeholderElements[i] === null) {
|
||||
continue;
|
||||
}
|
||||
if (!mask[i]) {
|
||||
canvases[i].classList.add('hidden')
|
||||
placeholderElements[i].classList.remove('hidden')
|
||||
} else {
|
||||
canvases[i].classList.remove('hidden')
|
||||
placeholderElements[i].classList.add('hidden')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getPresentDataMask() {
|
||||
return data.map(list => (list ? list.reduce((acc, e) => acc + e.total, 0) : 0) > 0)
|
||||
}
|
||||
|
||||
function getColor(seed, index) {
|
||||
if (index < baseColors.length) return baseColors[(index + 5) % baseColors.length]
|
||||
return getRandomColor(seed)
|
||||
}
|
||||
|
||||
function getRandomColor(seed) {
|
||||
seed = seed ? seed : '1234567'
|
||||
Math.seedrandom(seed)
|
||||
var letters = '0123456789ABCDEF'.split('')
|
||||
var color = '#'
|
||||
for (var i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * 16)]
|
||||
}
|
||||
return color
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/5624139/3112139
|
||||
function hexToRgb(hex) {
|
||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
|
||||
return r + r + g + g + b + b;
|
||||
});
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function swapCharts(showEntity, hideEntity) {
|
||||
document.getElementById(`${showEntity}-container`).parentElement.classList.remove('hidden')
|
||||
document.getElementById(`${hideEntity}-container`).parentElement.classList.add('hidden')
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
topNPickers.forEach(e => e.addEventListener('change', () => {
|
||||
parseTopN()
|
||||
draw([parseInt(e.attributes['data-entity'].value)])
|
||||
}))
|
||||
|
||||
parseTopN()
|
||||
togglePlaceholders(getPresentDataMask())
|
||||
draw()
|
||||
})
|
||||
|
||||
352
static/assets/js/timezones.js
Normal file
352
static/assets/js/timezones.js
Normal file
@ -0,0 +1,352 @@
|
||||
// https://stackoverflow.com/a/54500197/3112139
|
||||
|
||||
const tzs = [
|
||||
'Europe/Andorra',
|
||||
'Asia/Dubai',
|
||||
'Asia/Kabul',
|
||||
'Europe/Tirane',
|
||||
'Asia/Yerevan',
|
||||
'Antarctica/Casey',
|
||||
'Antarctica/Davis',
|
||||
'Antarctica/DumontDUrville',
|
||||
'Antarctica/Mawson',
|
||||
'Antarctica/Palmer',
|
||||
'Antarctica/Rothera',
|
||||
'Antarctica/Syowa',
|
||||
'Antarctica/Troll',
|
||||
'Antarctica/Vostok',
|
||||
'America/Argentina/Buenos_Aires',
|
||||
'America/Argentina/Cordoba',
|
||||
'America/Argentina/Salta',
|
||||
'America/Argentina/Jujuy',
|
||||
'America/Argentina/Tucuman',
|
||||
'America/Argentina/Catamarca',
|
||||
'America/Argentina/La_Rioja',
|
||||
'America/Argentina/San_Juan',
|
||||
'America/Argentina/Mendoza',
|
||||
'America/Argentina/San_Luis',
|
||||
'America/Argentina/Rio_Gallegos',
|
||||
'America/Argentina/Ushuaia',
|
||||
'Pacific/Pago_Pago',
|
||||
'Europe/Vienna',
|
||||
'Australia/Lord_Howe',
|
||||
'Antarctica/Macquarie',
|
||||
'Australia/Hobart',
|
||||
'Australia/Currie',
|
||||
'Australia/Melbourne',
|
||||
'Australia/Sydney',
|
||||
'Australia/Broken_Hill',
|
||||
'Australia/Brisbane',
|
||||
'Australia/Lindeman',
|
||||
'Australia/Adelaide',
|
||||
'Australia/Darwin',
|
||||
'Australia/Perth',
|
||||
'Australia/Eucla',
|
||||
'Asia/Baku',
|
||||
'America/Barbados',
|
||||
'Asia/Dhaka',
|
||||
'Europe/Brussels',
|
||||
'Europe/Sofia',
|
||||
'Atlantic/Bermuda',
|
||||
'Asia/Brunei',
|
||||
'America/La_Paz',
|
||||
'America/Noronha',
|
||||
'America/Belem',
|
||||
'America/Fortaleza',
|
||||
'America/Recife',
|
||||
'America/Araguaina',
|
||||
'America/Maceio',
|
||||
'America/Bahia',
|
||||
'America/Sao_Paulo',
|
||||
'America/Campo_Grande',
|
||||
'America/Cuiaba',
|
||||
'America/Santarem',
|
||||
'America/Porto_Velho',
|
||||
'America/Boa_Vista',
|
||||
'America/Manaus',
|
||||
'America/Eirunepe',
|
||||
'America/Rio_Branco',
|
||||
'America/Nassau',
|
||||
'Asia/Thimphu',
|
||||
'Europe/Minsk',
|
||||
'America/Belize',
|
||||
'America/St_Johns',
|
||||
'America/Halifax',
|
||||
'America/Glace_Bay',
|
||||
'America/Moncton',
|
||||
'America/Goose_Bay',
|
||||
'America/Blanc-Sablon',
|
||||
'America/Toronto',
|
||||
'America/Nipigon',
|
||||
'America/Thunder_Bay',
|
||||
'America/Iqaluit',
|
||||
'America/Pangnirtung',
|
||||
'America/Atikokan',
|
||||
'America/Winnipeg',
|
||||
'America/Rainy_River',
|
||||
'America/Resolute',
|
||||
'America/Rankin_Inlet',
|
||||
'America/Regina',
|
||||
'America/Swift_Current',
|
||||
'America/Edmonton',
|
||||
'America/Cambridge_Bay',
|
||||
'America/Yellowknife',
|
||||
'America/Inuvik',
|
||||
'America/Creston',
|
||||
'America/Dawson_Creek',
|
||||
'America/Fort_Nelson',
|
||||
'America/Vancouver',
|
||||
'America/Whitehorse',
|
||||
'America/Dawson',
|
||||
'Indian/Cocos',
|
||||
'Europe/Zurich',
|
||||
'Africa/Abidjan',
|
||||
'Pacific/Rarotonga',
|
||||
'America/Santiago',
|
||||
'America/Punta_Arenas',
|
||||
'Pacific/Easter',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Urumqi',
|
||||
'America/Bogota',
|
||||
'America/Costa_Rica',
|
||||
'America/Havana',
|
||||
'Atlantic/Cape_Verde',
|
||||
'America/Curacao',
|
||||
'Indian/Christmas',
|
||||
'Asia/Nicosia',
|
||||
'Asia/Famagusta',
|
||||
'Europe/Prague',
|
||||
'Europe/Berlin',
|
||||
'Europe/Copenhagen',
|
||||
'America/Santo_Domingo',
|
||||
'Africa/Algiers',
|
||||
'America/Guayaquil',
|
||||
'Pacific/Galapagos',
|
||||
'Europe/Tallinn',
|
||||
'Africa/Cairo',
|
||||
'Africa/El_Aaiun',
|
||||
'Europe/Madrid',
|
||||
'Africa/Ceuta',
|
||||
'Atlantic/Canary',
|
||||
'Europe/Helsinki',
|
||||
'Pacific/Fiji',
|
||||
'Atlantic/Stanley',
|
||||
'Pacific/Chuuk',
|
||||
'Pacific/Pohnpei',
|
||||
'Pacific/Kosrae',
|
||||
'Atlantic/Faroe',
|
||||
'Europe/Paris',
|
||||
'Europe/London',
|
||||
'Asia/Tbilisi',
|
||||
'America/Cayenne',
|
||||
'Africa/Accra',
|
||||
'Europe/Gibraltar',
|
||||
'America/Godthab',
|
||||
'America/Danmarkshavn',
|
||||
'America/Scoresbysund',
|
||||
'America/Thule',
|
||||
'Europe/Athens',
|
||||
'Atlantic/South_Georgia',
|
||||
'America/Guatemala',
|
||||
'Pacific/Guam',
|
||||
'Africa/Bissau',
|
||||
'America/Guyana',
|
||||
'Asia/Hong_Kong',
|
||||
'America/Tegucigalpa',
|
||||
'America/Port-au-Prince',
|
||||
'Europe/Budapest',
|
||||
'Asia/Jakarta',
|
||||
'Asia/Pontianak',
|
||||
'Asia/Makassar',
|
||||
'Asia/Jayapura',
|
||||
'Europe/Dublin',
|
||||
'Asia/Jerusalem',
|
||||
'Asia/Kolkata',
|
||||
'Indian/Chagos',
|
||||
'Asia/Baghdad',
|
||||
'Asia/Tehran',
|
||||
'Atlantic/Reykjavik',
|
||||
'Europe/Rome',
|
||||
'America/Jamaica',
|
||||
'Asia/Amman',
|
||||
'Asia/Tokyo',
|
||||
'Africa/Nairobi',
|
||||
'Asia/Bishkek',
|
||||
'Pacific/Tarawa',
|
||||
'Pacific/Enderbury',
|
||||
'Pacific/Kiritimati',
|
||||
'Asia/Pyongyang',
|
||||
'Asia/Seoul',
|
||||
'Asia/Almaty',
|
||||
'Asia/Qyzylorda',
|
||||
'Asia/Qostanay',
|
||||
'Asia/Aqtobe',
|
||||
'Asia/Aqtau',
|
||||
'Asia/Atyrau',
|
||||
'Asia/Oral',
|
||||
'Asia/Beirut',
|
||||
'Asia/Colombo',
|
||||
'Africa/Monrovia',
|
||||
'Europe/Vilnius',
|
||||
'Europe/Luxembourg',
|
||||
'Europe/Riga',
|
||||
'Africa/Tripoli',
|
||||
'Africa/Casablanca',
|
||||
'Europe/Monaco',
|
||||
'Europe/Chisinau',
|
||||
'Pacific/Majuro',
|
||||
'Pacific/Kwajalein',
|
||||
'Asia/Yangon',
|
||||
'Asia/Ulaanbaatar',
|
||||
'Asia/Hovd',
|
||||
'Asia/Choibalsan',
|
||||
'Asia/Macau',
|
||||
'America/Martinique',
|
||||
'Europe/Malta',
|
||||
'Indian/Mauritius',
|
||||
'Indian/Maldives',
|
||||
'America/Mexico_City',
|
||||
'America/Cancun',
|
||||
'America/Merida',
|
||||
'America/Monterrey',
|
||||
'America/Matamoros',
|
||||
'America/Mazatlan',
|
||||
'America/Chihuahua',
|
||||
'America/Ojinaga',
|
||||
'America/Hermosillo',
|
||||
'America/Tijuana',
|
||||
'America/Bahia_Banderas',
|
||||
'Asia/Kuala_Lumpur',
|
||||
'Asia/Kuching',
|
||||
'Africa/Maputo',
|
||||
'Africa/Windhoek',
|
||||
'Pacific/Noumea',
|
||||
'Pacific/Norfolk',
|
||||
'Africa/Lagos',
|
||||
'America/Managua',
|
||||
'Europe/Amsterdam',
|
||||
'Europe/Oslo',
|
||||
'Asia/Kathmandu',
|
||||
'Pacific/Nauru',
|
||||
'Pacific/Niue',
|
||||
'Pacific/Auckland',
|
||||
'Pacific/Chatham',
|
||||
'America/Panama',
|
||||
'America/Lima',
|
||||
'Pacific/Tahiti',
|
||||
'Pacific/Marquesas',
|
||||
'Pacific/Gambier',
|
||||
'Pacific/Port_Moresby',
|
||||
'Pacific/Bougainville',
|
||||
'Asia/Manila',
|
||||
'Asia/Karachi',
|
||||
'Europe/Warsaw',
|
||||
'America/Miquelon',
|
||||
'Pacific/Pitcairn',
|
||||
'America/Puerto_Rico',
|
||||
'Asia/Gaza',
|
||||
'Asia/Hebron',
|
||||
'Europe/Lisbon',
|
||||
'Atlantic/Madeira',
|
||||
'Atlantic/Azores',
|
||||
'Pacific/Palau',
|
||||
'America/Asuncion',
|
||||
'Asia/Qatar',
|
||||
'Indian/Reunion',
|
||||
'Europe/Bucharest',
|
||||
'Europe/Belgrade',
|
||||
'Europe/Kaliningrad',
|
||||
'Europe/Moscow',
|
||||
'Europe/Simferopol',
|
||||
'Europe/Kirov',
|
||||
'Europe/Astrakhan',
|
||||
'Europe/Volgograd',
|
||||
'Europe/Saratov',
|
||||
'Europe/Ulyanovsk',
|
||||
'Europe/Samara',
|
||||
'Asia/Yekaterinburg',
|
||||
'Asia/Omsk',
|
||||
'Asia/Novosibirsk',
|
||||
'Asia/Barnaul',
|
||||
'Asia/Tomsk',
|
||||
'Asia/Novokuznetsk',
|
||||
'Asia/Krasnoyarsk',
|
||||
'Asia/Irkutsk',
|
||||
'Asia/Chita',
|
||||
'Asia/Yakutsk',
|
||||
'Asia/Khandyga',
|
||||
'Asia/Vladivostok',
|
||||
'Asia/Ust-Nera',
|
||||
'Asia/Magadan',
|
||||
'Asia/Sakhalin',
|
||||
'Asia/Srednekolymsk',
|
||||
'Asia/Kamchatka',
|
||||
'Asia/Anadyr',
|
||||
'Asia/Riyadh',
|
||||
'Pacific/Guadalcanal',
|
||||
'Indian/Mahe',
|
||||
'Africa/Khartoum',
|
||||
'Europe/Stockholm',
|
||||
'Asia/Singapore',
|
||||
'America/Paramaribo',
|
||||
'Africa/Juba',
|
||||
'Africa/Sao_Tome',
|
||||
'America/El_Salvador',
|
||||
'Asia/Damascus',
|
||||
'America/Grand_Turk',
|
||||
'Africa/Ndjamena',
|
||||
'Indian/Kerguelen',
|
||||
'Asia/Bangkok',
|
||||
'Asia/Dushanbe',
|
||||
'Pacific/Fakaofo',
|
||||
'Asia/Dili',
|
||||
'Asia/Ashgabat',
|
||||
'Africa/Tunis',
|
||||
'Pacific/Tongatapu',
|
||||
'Europe/Istanbul',
|
||||
'America/Port_of_Spain',
|
||||
'Pacific/Funafuti',
|
||||
'Asia/Taipei',
|
||||
'Europe/Kiev',
|
||||
'Europe/Uzhgorod',
|
||||
'Europe/Zaporozhye',
|
||||
'Pacific/Wake',
|
||||
'America/New_York',
|
||||
'America/Detroit',
|
||||
'America/Kentucky/Louisville',
|
||||
'America/Kentucky/Monticello',
|
||||
'America/Indiana/Indianapolis',
|
||||
'America/Indiana/Vincennes',
|
||||
'America/Indiana/Winamac',
|
||||
'America/Indiana/Marengo',
|
||||
'America/Indiana/Petersburg',
|
||||
'America/Indiana/Vevay',
|
||||
'America/Chicago',
|
||||
'America/Indiana/Tell_City',
|
||||
'America/Indiana/Knox',
|
||||
'America/Menominee',
|
||||
'America/North_Dakota/Center',
|
||||
'America/North_Dakota/New_Salem',
|
||||
'America/North_Dakota/Beulah',
|
||||
'America/Denver',
|
||||
'America/Boise',
|
||||
'America/Phoenix',
|
||||
'America/Los_Angeles',
|
||||
'America/Anchorage',
|
||||
'America/Juneau',
|
||||
'America/Sitka',
|
||||
'America/Metlakatla',
|
||||
'America/Yakutat',
|
||||
'America/Nome',
|
||||
'America/Adak',
|
||||
'Pacific/Honolulu',
|
||||
'America/Montevideo',
|
||||
'Asia/Samarkand',
|
||||
'Asia/Tashkent',
|
||||
'America/Caracas',
|
||||
'Asia/Ho_Chi_Minh',
|
||||
'Pacific/Efate',
|
||||
'Pacific/Wallis',
|
||||
'Pacific/Apia',
|
||||
'Africa/Johannesburg'
|
||||
]
|
||||
Reference in New Issue
Block a user