forked from browserslist/browserslist
-
Notifications
You must be signed in to change notification settings - Fork 0
/
browserStats.js
155 lines (127 loc) · 4.7 KB
/
browserStats.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import wikipediaLinks from '../../data/wikipedia-links.js'
import * as browsersIcons from '../../data/browsers-logos.js'
const browserStats = document.querySelector('[data-id=browsers_stats]')
const regionCoverage = document.querySelector('[data-id=region_coverage]')
const regionCoverageCounter = document.querySelector(
'[data-id=region_coverage_counter]'
)
const palceholder = document.querySelector(
'[data-id=browsers_stats_placeholder]'
)
function formatPercent(percent) {
let rounded = percent >= 0.1 ? percent.toFixed(1) : 0
return rounded + ' %'
}
export function updateRegionCoverageCounter(coverage) {
regionCoverageCounter.innerHTML = formatPercent(coverage)
}
export function updateRegionCoverageBar(data) {
let element = document.querySelector('[data-id=region_coverage_bar]')
element.innerHTML = ''
data.forEach(item => {
let itemElem = document.createElement('li')
itemElem.classList.add('BrowsersStat__regionCoverageBarItem')
itemElem.style.setProperty('--proportion', item.coverage)
itemElem.style.setProperty('--alpha', 1 - 1 / item.coverage)
if (item.coverage > 10) {
itemElem.innerHTML = item.name
itemElem.classList.add('BrowsersStat__regionCoverageBarItem--texted')
}
element.appendChild(itemElem)
})
}
export function toggleShowStats(isShown) {
regionCoverage.hidden = !isShown
browserStats.hidden = !isShown
palceholder.hidden = isShown
}
function createCoverageCell(coverage) {
let coveragePercentageHtmlString = cov =>
cov !== null ? formatPercent(cov) : '—'
let coveragePercentageCssString = cov => {
let result = (Math.log(1 + cov) * 100) / Math.log(1 + 100)
if (result === 0) {
return '0'
} else if (result > 5) {
return result + '%'
}
return '1px'
}
let coverageCell = document.createElement('td')
coverageCell.classList.add('BrowsersStat__td')
coverageCell.innerHTML = coveragePercentageHtmlString(coverage)
coverageCell.classList.add('BrowsersStat__td--coverage')
coverageCell.style.setProperty(
'--coverage',
coveragePercentageCssString(coverage)
)
return coverageCell
}
function createVersionCell(version) {
let versionCell = document.createElement('td')
versionCell.classList.add('BrowsersStat__td')
versionCell.innerHTML = version
return versionCell
}
export function updateBrowsersStats(data) {
let element = document.querySelector('[data-id=browsers_stats_results]')
let table = document.createElement('table')
table.classList.add('BrowsersStat__table')
data.forEach(({ id, name, versions: versionsInput }) => {
let versions = Object.entries(versionsInput)
.sort(([versionA], [versionB]) => versionB - versionA)
.map(([version, coverage]) => {
return {
version,
coverage
}
})
let tBody = document.createElement('tbody')
let tr = document.createElement('tr')
tr.classList.add('BrowsersStat_tr')
let iconCell = document.createElement('td')
iconCell.classList.add('BrowsersStat__td')
iconCell.setAttribute('rowspan', versions.length)
tr.appendChild(iconCell)
if (id in browsersIcons) {
let iconElem = document.createElement('img')
iconElem.classList.add('BrowsersStat__icon')
iconElem.src = browsersIcons[id]
iconElem.setAttribute('alt', '')
iconCell.appendChild(iconElem)
}
let nameCell = document.createElement('td')
nameCell.classList.add('BrowsersStat__td')
let nameLink = document.createElement('a')
nameLink.classList.add('Link')
// TODO Need to take care of the case when we do not have link for some browser. Can I Use sometimes adds browsers
nameLink.href = wikipediaLinks[id]
nameLink.rel = 'noreferrer noopener'
nameLink.target = '_blank'
nameCell.setAttribute('rowspan', versions.length)
nameLink.innerHTML = name
nameCell.appendChild(nameLink)
tr.appendChild(nameCell)
tr.appendChild(createVersionCell(versions[0].version))
tr.appendChild(createCoverageCell(versions[0].coverage))
tBody.appendChild(tr)
versions.slice(1).forEach(item => {
let { version, coverage } = item
let versionTr = document.createElement('tr')
versionTr.appendChild(createVersionCell(version))
versionTr.appendChild(createCoverageCell(coverage))
tBody.appendChild(versionTr)
})
table.appendChild(tBody)
})
element.innerHTML = ''
element.appendChild(table)
}
export function updateToolsVersions({ browserslist, caniuse }) {
let canIUseElement = document.querySelector('[data-id=can_i_use_version]')
canIUseElement.innerHTML = caniuse
let browsersListElement = document.querySelector(
'[data-id=browsers_list_version]'
)
browsersListElement.innerHTML = browserslist
}