plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-23 20:13:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Show real counts along percentages (#293)

Browse Source
This commit is contained in:
Uku Taht 2020-08-20 11:16:26 +03:00 committed by GitHub
parent 01ef17abb0
commit a7f3aa430e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/js/dashboard/stats/devices.js
View File

@ -64,11 +64,11 @@ class ScreenSizes extends React.Component {
renderScreenSize(size) {
return (
<div className="flex items-center justify-between my-1 text-sm" key={size.name}>
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
<Bar count={size.count} all={this.state.sizes} bg="bg-green-50" />
<span tooltip={EXPLANATION[size.name]} className="block px-2" style={{marginTop: '-26px'}}>{iconFor(size.name)} {size.name}</span>
</div>
<span className="font-medium">{size.percentage}%</span>
<span className="font-medium">{size.count} <span className="inline-block text-xs w-8 text-right">({size.percentage}%)</span></span>
</div>
)
}
@ -131,11 +131,11 @@ class Browsers extends React.Component {
renderBrowser(browser) {
return (
<div className="flex items-center justify-between my-1 text-sm" key={browser.name}>
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
<Bar count={browser.count} all={this.state.browsers} bg="bg-green-50" />
<span className="block px-2" style={{marginTop: '-26px'}}>{browser.name}</span>
</div>
<span className="font-medium">{browser.percentage}%</span>
<span className="font-medium">{browser.count} <span className="inline-block text-xs w-8 text-right">({browser.percentage}%)</span></span>
</div>
)
}
@ -198,11 +198,11 @@ class OperatingSystems extends React.Component {
renderOperatingSystem(os) {
return (
<div className="flex items-center justify-between my-1 text-sm" key={os.name}>
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
<Bar count={os.count} all={this.state.operatingSystems} bg="bg-green-50" />
<span className="block px-2" style={{marginTop: '-26px'}}>{os.name}</span>
</div>
<span className="font-medium">{os.percentage}%</span>
<span className="font-medium">{os.count} <span className="inline-block text-xs w-8 text-right">({os.percentage}%)</span></span>
</div>
)
}

4
assets/js/dashboard/stats/modals/countries.js
View File

@ -25,7 +25,9 @@ class CountriesModal extends React.Component {
return (
<tr className="text-sm" key={country.name}>
<td className="p-2">{country.full_country_name}</td>
<td className="p-2 w-32 font-medium" align="right">{numberFormatter(country.percentage)}%</td>
<td className="p-2 w-32 font-medium" align="right">
{country.count} <span className="inline-block text-xs w-8 text-right">({country.percentage}%)</span>
</td>
</tr>
)
}