diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js index 7fd8ec58e2ce..5f861040cd1d 100644 --- a/assets/js/dashboard/stats/devices/index.js +++ b/assets/js/dashboard/stats/devices/index.js @@ -103,7 +103,37 @@ function BrowserVersions({ query, site, afterFetchData }) { query={query} /> ) +} +// Icons copied from https://github.com/ngeenx/operating-system-logos +const OS_ICONS = { + 'iOS': 'ios.png', + 'Mac': 'mac.png', + 'Windows': 'windows.png', + 'Windows Phone': 'windows.png', + 'Android': 'android.png', + 'GNU/Linux': 'gnu_linux.png', + 'Ubuntu': 'ubuntu.png', + 'Chrome OS': 'chrome_os.png', + 'iPadOS': 'ipad_os.png', + 'Fire OS': 'fire_os.png', + 'HarmonyOS': 'harmony_os.png', + 'Tizen': 'tizen.png', + 'PlayStation': 'playstation.png', + 'KaiOS': 'kai_os.png', + 'Fedora': 'fedora.png', + 'FreeBSD': 'freebsd.png', +} + +function osIconFor(os) { + const filename = OS_ICONS[os] || 'fallback.svg' + + return ( + + ) } function OperatingSystems({ query, site, afterFetchData }) { @@ -118,11 +148,16 @@ function OperatingSystems({ query, site, afterFetchData }) { } } + function renderIcon(listItem) { + return osIconFor(listItem.name) + } + return ( { + return {...res, results: res.results.map((row => { + return {...row, name: `${row.os} ${row.name}`, version: row.name} + }))} + }) + } + + function renderIcon(listItem) { + return osIconFor(listItem.os) } function getFilterFor(listItem) { @@ -141,13 +185,14 @@ function OperatingSystemVersions({ query, site, afterFetchData }) { } return { prefix: 'os_version', - filter: ["is", "os_version", [listItem['name']]] + filter: ["is", "os_version", [listItem.version]] } } return ( + + diff --git a/priv/static/images/icon/os/fedora.png b/priv/static/images/icon/os/fedora.png new file mode 100644 index 000000000000..6c689600257b Binary files /dev/null and b/priv/static/images/icon/os/fedora.png differ diff --git a/priv/static/images/icon/os/fire_os.png b/priv/static/images/icon/os/fire_os.png new file mode 100644 index 000000000000..9936154d5df9 Binary files /dev/null and b/priv/static/images/icon/os/fire_os.png differ diff --git a/priv/static/images/icon/os/freebsd.png b/priv/static/images/icon/os/freebsd.png new file mode 100644 index 000000000000..a330ab244632 Binary files /dev/null and b/priv/static/images/icon/os/freebsd.png differ diff --git a/priv/static/images/icon/os/gnu_linux.png b/priv/static/images/icon/os/gnu_linux.png new file mode 100644 index 000000000000..37358e00d612 Binary files /dev/null and b/priv/static/images/icon/os/gnu_linux.png differ diff --git a/priv/static/images/icon/os/harmony_os.png b/priv/static/images/icon/os/harmony_os.png new file mode 100644 index 000000000000..f680636558be Binary files /dev/null and b/priv/static/images/icon/os/harmony_os.png differ diff --git a/priv/static/images/icon/os/ios.png b/priv/static/images/icon/os/ios.png new file mode 100644 index 000000000000..77f6d153fc0e Binary files /dev/null and b/priv/static/images/icon/os/ios.png differ diff --git a/priv/static/images/icon/os/ipad_os.png b/priv/static/images/icon/os/ipad_os.png new file mode 100644 index 000000000000..42402ad2bc85 Binary files /dev/null and b/priv/static/images/icon/os/ipad_os.png differ diff --git a/priv/static/images/icon/os/kai_os.png b/priv/static/images/icon/os/kai_os.png new file mode 100644 index 000000000000..cbcf492eb2b4 Binary files /dev/null and b/priv/static/images/icon/os/kai_os.png differ diff --git a/priv/static/images/icon/os/mac.png b/priv/static/images/icon/os/mac.png new file mode 100644 index 000000000000..8e821f935bfc Binary files /dev/null and b/priv/static/images/icon/os/mac.png differ diff --git a/priv/static/images/icon/os/playstation.png b/priv/static/images/icon/os/playstation.png new file mode 100644 index 000000000000..22c468d59b95 Binary files /dev/null and b/priv/static/images/icon/os/playstation.png differ diff --git a/priv/static/images/icon/os/tizen.png b/priv/static/images/icon/os/tizen.png new file mode 100644 index 000000000000..f32b415f7129 Binary files /dev/null and b/priv/static/images/icon/os/tizen.png differ diff --git a/priv/static/images/icon/os/ubuntu.png b/priv/static/images/icon/os/ubuntu.png new file mode 100644 index 000000000000..6878759aa8ee Binary files /dev/null and b/priv/static/images/icon/os/ubuntu.png differ diff --git a/priv/static/images/icon/os/windows.png b/priv/static/images/icon/os/windows.png new file mode 100644 index 000000000000..2451fb16d2f1 Binary files /dev/null and b/priv/static/images/icon/os/windows.png differ