Added icons for browsers, OS and devices.
|
@ -2,12 +2,23 @@ import FilterLink from 'components/common/FilterLink';
|
||||||
import MetricsTable from 'components/metrics/MetricsTable';
|
import MetricsTable from 'components/metrics/MetricsTable';
|
||||||
import { BROWSERS } from 'lib/constants';
|
import { BROWSERS } from 'lib/constants';
|
||||||
import useMessages from 'hooks/useMessages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
export function BrowsersTable({ websiteId, ...props }) {
|
export function BrowsersTable({ websiteId, ...props }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
const { basePath } = useRouter();
|
||||||
|
|
||||||
function renderLink({ x: browser }) {
|
function renderLink({ x: browser }) {
|
||||||
return <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser} />;
|
return (
|
||||||
|
<FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser}>
|
||||||
|
<img
|
||||||
|
src={`${basePath}/images/browsers/${browser || 'unknown'}.png`}
|
||||||
|
alt={browser}
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
</FilterLink>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import useMessages from 'hooks/useMessages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
export function DevicesTable({ websiteId, ...props }) {
|
export function DevicesTable({ websiteId, ...props }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
const { basePath } = useRouter();
|
||||||
|
|
||||||
function renderLink({ x: device }) {
|
function renderLink({ x: device }) {
|
||||||
return (
|
return (
|
||||||
|
@ -11,7 +13,14 @@ export function DevicesTable({ websiteId, ...props }) {
|
||||||
id="device"
|
id="device"
|
||||||
value={labels[device] && device}
|
value={labels[device] && device}
|
||||||
label={formatMessage(labels[device] || labels.unknown)}
|
label={formatMessage(labels[device] || labels.unknown)}
|
||||||
/>
|
>
|
||||||
|
<img
|
||||||
|
src={`${basePath}/images/device/${device.toLowerCase() || 'unknown'}.png`}
|
||||||
|
alt={device}
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
</FilterLink>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,25 @@
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import useMessages from 'hooks/useMessages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
export function OSTable({ websiteId, ...props }) {
|
export function OSTable({ websiteId, ...props }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
const { basePath } = useRouter();
|
||||||
|
|
||||||
function renderLink({ x: os }) {
|
function renderLink({ x: os }) {
|
||||||
return <FilterLink id="os" value={os} />;
|
return (
|
||||||
|
<FilterLink id="os" value={os}>
|
||||||
|
<img
|
||||||
|
src={`${basePath}/images/os/${
|
||||||
|
os.toLowerCase().replaceAll(/[^\w]+/g, '-') || 'unknown'
|
||||||
|
}.png`}
|
||||||
|
alt={os}
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
</FilterLink>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -182,7 +182,7 @@ export const DESKTOP_OS = [
|
||||||
'BeOS',
|
'BeOS',
|
||||||
'Chrome OS',
|
'Chrome OS',
|
||||||
'Linux',
|
'Linux',
|
||||||
'macOS',
|
'Mac OS',
|
||||||
'Open BSD',
|
'Open BSD',
|
||||||
'OS/2',
|
'OS/2',
|
||||||
'QNX',
|
'QNX',
|
||||||
|
@ -204,33 +204,34 @@ export const DESKTOP_OS = [
|
||||||
export const MOBILE_OS = ['Amazon OS', 'Android OS', 'BlackBerry OS', 'iOS', 'Windows Mobile'];
|
export const MOBILE_OS = ['Amazon OS', 'Android OS', 'BlackBerry OS', 'iOS', 'Windows Mobile'];
|
||||||
|
|
||||||
export const BROWSERS = {
|
export const BROWSERS = {
|
||||||
|
android: 'Android',
|
||||||
aol: 'AOL',
|
aol: 'AOL',
|
||||||
edge: 'Edge',
|
|
||||||
'edge-ios': 'Edge (iOS)',
|
|
||||||
yandexbrowser: 'Yandex',
|
|
||||||
kakaotalk: 'KaKaoTalk',
|
|
||||||
samsung: 'Samsung',
|
|
||||||
silk: 'Silk',
|
|
||||||
miui: 'MIUI',
|
|
||||||
beaker: 'Beaker',
|
beaker: 'Beaker',
|
||||||
'edge-chromium': 'Edge (Chromium)',
|
bb10: 'BlackBerry 10',
|
||||||
chrome: 'Chrome',
|
chrome: 'Chrome',
|
||||||
'chromium-webview': 'Chrome (webview)',
|
'chromium-webview': 'Chrome (webview)',
|
||||||
phantomjs: 'PhantomJS',
|
|
||||||
crios: 'Chrome (iOS)',
|
crios: 'Chrome (iOS)',
|
||||||
|
curl: 'Curl',
|
||||||
|
edge: 'Edge',
|
||||||
|
'edge-chromium': 'Edge (Chromium)',
|
||||||
|
'edge-ios': 'Edge (iOS)',
|
||||||
|
facebook: 'Facebook',
|
||||||
firefox: 'Firefox',
|
firefox: 'Firefox',
|
||||||
fxios: 'Firefox (iOS)',
|
fxios: 'Firefox (iOS)',
|
||||||
'opera-mini': 'Opera Mini',
|
|
||||||
opera: 'Opera',
|
|
||||||
ie: 'IE',
|
ie: 'IE',
|
||||||
bb10: 'BlackBerry 10',
|
|
||||||
android: 'Android',
|
|
||||||
ios: 'iOS',
|
|
||||||
safari: 'Safari',
|
|
||||||
facebook: 'Facebook',
|
|
||||||
instagram: 'Instagram',
|
instagram: 'Instagram',
|
||||||
|
ios: 'iOS',
|
||||||
'ios-webview': 'iOS (webview)',
|
'ios-webview': 'iOS (webview)',
|
||||||
|
kakaotalk: 'KaKaoTalk',
|
||||||
|
miui: 'MIUI',
|
||||||
|
opera: 'Opera',
|
||||||
|
'opera-mini': 'Opera Mini',
|
||||||
|
phantomjs: 'PhantomJS',
|
||||||
|
safari: 'Safari',
|
||||||
|
samsung: 'Samsung',
|
||||||
|
silk: 'Silk',
|
||||||
searchbot: 'Searchbot',
|
searchbot: 'Searchbot',
|
||||||
|
yandexbrowser: 'Yandex',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const MAP_FILE = '/datamaps.world.json';
|
export const MAP_FILE = '/datamaps.world.json';
|
||||||
|
|
BIN
public/images/browsers/android-webview.png
Normal file
After Width: | Height: | Size: 806 B |
BIN
public/images/browsers/android.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
public/images/browsers/aol.png
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
public/images/browsers/beaker.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/images/browsers/blackberry.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
public/images/browsers/brave.png
Normal file
After Width: | Height: | Size: 635 B |
BIN
public/images/browsers/chrome.png
Normal file
After Width: | Height: | Size: 819 B |
BIN
public/images/browsers/chromium-webview.png
Normal file
After Width: | Height: | Size: 680 B |
BIN
public/images/browsers/crios.png
Normal file
After Width: | Height: | Size: 819 B |
BIN
public/images/browsers/curl.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
public/images/browsers/edge-chromium.png
Normal file
After Width: | Height: | Size: 811 B |
BIN
public/images/browsers/edge-ios.png
Normal file
After Width: | Height: | Size: 811 B |
BIN
public/images/browsers/edge.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
public/images/browsers/facebook.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
public/images/browsers/firefox.png
Normal file
After Width: | Height: | Size: 835 B |
BIN
public/images/browsers/fxios.png
Normal file
After Width: | Height: | Size: 835 B |
BIN
public/images/browsers/ie.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
public/images/browsers/instagram.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
public/images/browsers/ios-webview.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
public/images/browsers/ios.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
public/images/browsers/kakaotalk.png
Normal file
After Width: | Height: | Size: 426 B |
BIN
public/images/browsers/miui.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
public/images/browsers/opera-mini.png
Normal file
After Width: | Height: | Size: 794 B |
BIN
public/images/browsers/opera.png
Normal file
After Width: | Height: | Size: 632 B |
BIN
public/images/browsers/safari.png
Normal file
After Width: | Height: | Size: 829 B |
BIN
public/images/browsers/samsung.png
Normal file
After Width: | Height: | Size: 535 B |
BIN
public/images/browsers/searchbot.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
public/images/browsers/silk.png
Normal file
After Width: | Height: | Size: 621 B |
BIN
public/images/browsers/unknown.png
Normal file
After Width: | Height: | Size: 730 B |
BIN
public/images/browsers/yandexbrowser.png
Normal file
After Width: | Height: | Size: 794 B |
BIN
public/images/device/desktop.png
Normal file
After Width: | Height: | Size: 653 B |
BIN
public/images/device/laptop.png
Normal file
After Width: | Height: | Size: 910 B |
BIN
public/images/device/mobile.png
Normal file
After Width: | Height: | Size: 551 B |
BIN
public/images/device/tablet.png
Normal file
After Width: | Height: | Size: 572 B |
BIN
public/images/device/unknown.png
Normal file
After Width: | Height: | Size: 106 B |
BIN
public/images/os/amazon-os.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
public/images/os/android-os.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
public/images/os/beos.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
public/images/os/blackberry-os.png
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
public/images/os/chrome-os.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
public/images/os/ios.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/images/os/linux.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
public/images/os/mac-os.png
Normal file
After Width: | Height: | Size: 624 B |
BIN
public/images/os/open-bsd.png
Normal file
After Width: | Height: | Size: 3.3 KiB |
BIN
public/images/os/os-2.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
public/images/os/qnx.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
public/images/os/sun-os.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/images/os/unknown.png
Normal file
After Width: | Height: | Size: 106 B |
BIN
public/images/os/windows-10.png
Normal file
After Width: | Height: | Size: 221 B |
BIN
public/images/os/windows-11.png
Normal file
After Width: | Height: | Size: 221 B |
BIN
public/images/os/windows-2000.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
public/images/os/windows-3-11.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
public/images/os/windows-7.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/images/os/windows-8-1.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/images/os/windows-8.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/images/os/windows-95.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
public/images/os/windows-98.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
public/images/os/windows-me.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/images/os/windows-server-2003.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/images/os/windows-vista.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/images/os/windows-xp.png
Normal file
After Width: | Height: | Size: 2.7 KiB |