diff --git a/apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx b/apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx new file mode 100644 index 00000000..a74e837e --- /dev/null +++ b/apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx @@ -0,0 +1,129 @@ +import type { LucideIcon, LucideProps } from 'lucide-react'; + +const createFlagIcon = (url: string) => { + return function (_props: LucideProps) { + return ( + + ); + } as LucideIcon; +}; + +const data = { + se: createFlagIcon('se'), + us: createFlagIcon('us'), + gb: createFlagIcon('gb'), + ua: createFlagIcon('ua'), + ru: createFlagIcon('ru'), + de: createFlagIcon('de'), + fr: createFlagIcon('fr'), + br: createFlagIcon('br'), + in: createFlagIcon('in'), + it: createFlagIcon('it'), + es: createFlagIcon('es'), + pl: createFlagIcon('pl'), + nl: createFlagIcon('nl'), + id: createFlagIcon('id'), + tr: createFlagIcon('tr'), + ph: createFlagIcon('ph'), + ca: createFlagIcon('ca'), + ar: createFlagIcon('ar'), + mx: createFlagIcon('mx'), + za: createFlagIcon('za'), + au: createFlagIcon('au'), + co: createFlagIcon('co'), + ch: createFlagIcon('ch'), + at: createFlagIcon('at'), + be: createFlagIcon('be'), + pt: createFlagIcon('pt'), + my: createFlagIcon('my'), + th: createFlagIcon('th'), + vn: createFlagIcon('vn'), + sg: createFlagIcon('sg'), + eg: createFlagIcon('eg'), + sa: createFlagIcon('sa'), + pk: createFlagIcon('pk'), + bd: createFlagIcon('bd'), + ro: createFlagIcon('ro'), + hu: createFlagIcon('hu'), + cz: createFlagIcon('cz'), + gr: createFlagIcon('gr'), + il: createFlagIcon('il'), + no: createFlagIcon('no'), + fi: createFlagIcon('fi'), + dk: createFlagIcon('dk'), + sk: createFlagIcon('sk'), + bg: createFlagIcon('bg'), + hr: createFlagIcon('hr'), + rs: createFlagIcon('rs'), + ba: createFlagIcon('ba'), + si: createFlagIcon('si'), + lv: createFlagIcon('lv'), + lt: createFlagIcon('lt'), + ee: createFlagIcon('ee'), + by: createFlagIcon('by'), + md: createFlagIcon('md'), + kz: createFlagIcon('kz'), + uz: createFlagIcon('uz'), + kg: createFlagIcon('kg'), + tj: createFlagIcon('tj'), + tm: createFlagIcon('tm'), + az: createFlagIcon('az'), + ge: createFlagIcon('ge'), + am: createFlagIcon('am'), + af: createFlagIcon('af'), + ir: createFlagIcon('ir'), + iq: createFlagIcon('iq'), + sy: createFlagIcon('sy'), + lb: createFlagIcon('lb'), + jo: createFlagIcon('jo'), + ps: createFlagIcon('ps'), + kw: createFlagIcon('kw'), + qa: createFlagIcon('qa'), + om: createFlagIcon('om'), + ye: createFlagIcon('ye'), + ae: createFlagIcon('ae'), + bh: createFlagIcon('bh'), + cy: createFlagIcon('cy'), + mt: createFlagIcon('mt'), + sm: createFlagIcon('sm'), + li: createFlagIcon('li'), + is: createFlagIcon('is'), + al: createFlagIcon('al'), + mk: createFlagIcon('mk'), + me: createFlagIcon('me'), + ad: createFlagIcon('ad'), + lu: createFlagIcon('lu'), + mc: createFlagIcon('mc'), + fo: createFlagIcon('fo'), + gg: createFlagIcon('gg'), + je: createFlagIcon('je'), + im: createFlagIcon('im'), + gi: createFlagIcon('gi'), + va: createFlagIcon('va'), + ax: createFlagIcon('ax'), + bl: createFlagIcon('bl'), + mf: createFlagIcon('mf'), + pm: createFlagIcon('pm'), + yt: createFlagIcon('yt'), + wf: createFlagIcon('wf'), + tf: createFlagIcon('tf'), + re: createFlagIcon('re'), + sc: createFlagIcon('sc'), + mu: createFlagIcon('mu'), + zw: createFlagIcon('zw'), + mz: createFlagIcon('mz'), + na: createFlagIcon('na'), + bw: createFlagIcon('bw'), + ls: createFlagIcon('ls'), + sz: createFlagIcon('sz'), + bi: createFlagIcon('bi'), + rw: createFlagIcon('rw'), + ug: createFlagIcon('ug'), + ke: createFlagIcon('ke'), + tz: createFlagIcon('tz'), + mg: createFlagIcon('mg'), +}; + +export default data; diff --git a/apps/dashboard/src/components/report/chart/SerieIcon.tsx b/apps/dashboard/src/components/report/chart/SerieIcon.tsx index 368ab9d2..47edce1d 100644 --- a/apps/dashboard/src/components/report/chart/SerieIcon.tsx +++ b/apps/dashboard/src/components/report/chart/SerieIcon.tsx @@ -16,6 +16,9 @@ import { import { NOT_SET_VALUE } from '@openpanel/constants'; +import flags from './SerieIcon.flags'; +import iconsWithUrls from './SerieIcon.urls'; + interface SerieIconProps extends LucideProps { name?: string; } @@ -25,21 +28,11 @@ function getProxyImage(url: string) { } const createImageIcon = (url: string) => { - return function (props: LucideProps) { + return function (_props: LucideProps) { return ; } as LucideIcon; }; -const createFlagIcon = (url: string) => { - return function (props: LucideProps) { - return ( - - ); - } as LucideIcon; -}; - const mapper: Record = { // Events screen_view: MonitorPlayIcon, @@ -47,75 +40,6 @@ const mapper: Record = { session_end: ActivityIcon, link_out: ExternalLinkIcon, - // Websites - linkedin: createImageIcon(getProxyImage('https://linkedin.com')), - slack: createImageIcon(getProxyImage('https://slack.com')), - pinterest: createImageIcon(getProxyImage('https://www.pinterest.se')), - ecosia: createImageIcon(getProxyImage('https://ecosia.com')), - yandex: createImageIcon(getProxyImage('https://yandex.com')), - google: createImageIcon(getProxyImage('https://google.com')), - facebook: createImageIcon(getProxyImage('https://facebook.com')), - bing: createImageIcon(getProxyImage('https://bing.com')), - twitter: createImageIcon(getProxyImage('https://twitter.com')), - duckduckgo: createImageIcon(getProxyImage('https://duckduckgo.com')), - 'yahoo!': createImageIcon(getProxyImage('https://yahoo.com')), - instagram: createImageIcon(getProxyImage('https://instagram.com')), - gmail: createImageIcon(getProxyImage('https://mail.google.com')), - microlaunch: createImageIcon(getProxyImage('https://microlaunch.net')), - producthunt: createImageIcon(getProxyImage('https://www.producthunt.com')), - youtube: createImageIcon(getProxyImage('https://youtube.com')), - reddit: createImageIcon(getProxyImage('https://reddit.com')), - taaft: createImageIcon(getProxyImage('https://theresanaiforthat.com')), - 'openpanel.dev': createImageIcon(getProxyImage('https://openpanel.dev')), - github: createImageIcon(getProxyImage('https://github.com')), - 'vstat.info': createImageIcon(getProxyImage('https://vstat.info')), - - 'mobile safari': createImageIcon( - getProxyImage( - 'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg' - ) - ), - chrome: createImageIcon( - getProxyImage( - 'https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg' - ) - ), - 'samsung internet': createImageIcon( - getProxyImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Samsung_Internet_logo.svg/1024px-Samsung_Internet_logo.svg.png' - ) - ), - safari: createImageIcon( - getProxyImage( - 'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg' - ) - ), - edge: createImageIcon( - getProxyImage( - 'https://upload.wikimedia.org/wikipedia/commons/7/7e/Microsoft_Edge_logo_%282019%29.png' - ) - ), - firefox: createImageIcon( - getProxyImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/1920px-Firefox_logo%2C_2019.svg.png' - ) - ), - snapchat: createImageIcon(getProxyImage('https://snapchat.com')), - - // OS - 'mac os': createImageIcon( - 'https://upload.wikimedia.org/wikipedia/commons/c/c9/Finder_Icon_macOS_Big_Sur.png' - ), - windows: createImageIcon( - 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Windows_logo_-_2012.png' - ), - ios: createImageIcon( - 'https://upload.wikimedia.org/wikipedia/commons/9/96/IOS_17_logo.png' - ), - android: createImageIcon( - 'https://image.similarpng.com/very-thumbnail/2020/08/Android-icon-on-transparent--background-PNG.png' - ), - // Misc mobile: SmartphoneIcon, desktop: MonitorIcon, @@ -126,120 +50,15 @@ const mapper: Record = { unknown: HelpCircleIcon, [NOT_SET_VALUE]: ScanIcon, - // Flags - se: createFlagIcon('se'), - us: createFlagIcon('us'), - gb: createFlagIcon('gb'), - ua: createFlagIcon('ua'), - ru: createFlagIcon('ru'), - de: createFlagIcon('de'), - fr: createFlagIcon('fr'), - br: createFlagIcon('br'), - in: createFlagIcon('in'), - it: createFlagIcon('it'), - es: createFlagIcon('es'), - pl: createFlagIcon('pl'), - nl: createFlagIcon('nl'), - id: createFlagIcon('id'), - tr: createFlagIcon('tr'), - ph: createFlagIcon('ph'), - ca: createFlagIcon('ca'), - ar: createFlagIcon('ar'), - mx: createFlagIcon('mx'), - za: createFlagIcon('za'), - au: createFlagIcon('au'), - co: createFlagIcon('co'), - ch: createFlagIcon('ch'), - at: createFlagIcon('at'), - be: createFlagIcon('be'), - pt: createFlagIcon('pt'), - my: createFlagIcon('my'), - th: createFlagIcon('th'), - vn: createFlagIcon('vn'), - sg: createFlagIcon('sg'), - eg: createFlagIcon('eg'), - sa: createFlagIcon('sa'), - pk: createFlagIcon('pk'), - bd: createFlagIcon('bd'), - ro: createFlagIcon('ro'), - hu: createFlagIcon('hu'), - cz: createFlagIcon('cz'), - gr: createFlagIcon('gr'), - il: createFlagIcon('il'), - no: createFlagIcon('no'), - fi: createFlagIcon('fi'), - dk: createFlagIcon('dk'), - sk: createFlagIcon('sk'), - bg: createFlagIcon('bg'), - hr: createFlagIcon('hr'), - rs: createFlagIcon('rs'), - ba: createFlagIcon('ba'), - si: createFlagIcon('si'), - lv: createFlagIcon('lv'), - lt: createFlagIcon('lt'), - ee: createFlagIcon('ee'), - by: createFlagIcon('by'), - md: createFlagIcon('md'), - kz: createFlagIcon('kz'), - uz: createFlagIcon('uz'), - kg: createFlagIcon('kg'), - tj: createFlagIcon('tj'), - tm: createFlagIcon('tm'), - az: createFlagIcon('az'), - ge: createFlagIcon('ge'), - am: createFlagIcon('am'), - af: createFlagIcon('af'), - ir: createFlagIcon('ir'), - iq: createFlagIcon('iq'), - sy: createFlagIcon('sy'), - lb: createFlagIcon('lb'), - jo: createFlagIcon('jo'), - ps: createFlagIcon('ps'), - kw: createFlagIcon('kw'), - qa: createFlagIcon('qa'), - om: createFlagIcon('om'), - ye: createFlagIcon('ye'), - ae: createFlagIcon('ae'), - bh: createFlagIcon('bh'), - cy: createFlagIcon('cy'), - mt: createFlagIcon('mt'), - sm: createFlagIcon('sm'), - li: createFlagIcon('li'), - is: createFlagIcon('is'), - al: createFlagIcon('al'), - mk: createFlagIcon('mk'), - me: createFlagIcon('me'), - ad: createFlagIcon('ad'), - lu: createFlagIcon('lu'), - mc: createFlagIcon('mc'), - fo: createFlagIcon('fo'), - gg: createFlagIcon('gg'), - je: createFlagIcon('je'), - im: createFlagIcon('im'), - gi: createFlagIcon('gi'), - va: createFlagIcon('va'), - ax: createFlagIcon('ax'), - bl: createFlagIcon('bl'), - mf: createFlagIcon('mf'), - pm: createFlagIcon('pm'), - yt: createFlagIcon('yt'), - wf: createFlagIcon('wf'), - tf: createFlagIcon('tf'), - re: createFlagIcon('re'), - sc: createFlagIcon('sc'), - mu: createFlagIcon('mu'), - zw: createFlagIcon('zw'), - mz: createFlagIcon('mz'), - na: createFlagIcon('na'), - bw: createFlagIcon('bw'), - ls: createFlagIcon('ls'), - sz: createFlagIcon('sz'), - bi: createFlagIcon('bi'), - rw: createFlagIcon('rw'), - ug: createFlagIcon('ug'), - ke: createFlagIcon('ke'), - tz: createFlagIcon('tz'), - mg: createFlagIcon('mg'), + ...Object.entries(iconsWithUrls).reduce( + (acc, [key, value]) => ({ + ...acc, + [key]: createImageIcon(value), + }), + {} + ), + + ...flags, }; export function SerieIcon({ name, ...props }: SerieIconProps) { diff --git a/apps/dashboard/src/components/report/chart/SerieIcon.urls.ts b/apps/dashboard/src/components/report/chart/SerieIcon.urls.ts new file mode 100644 index 00000000..295f042c --- /dev/null +++ b/apps/dashboard/src/components/report/chart/SerieIcon.urls.ts @@ -0,0 +1,41 @@ +// prettier-ignore +const data = { + 'chromium os': 'https://upload.wikimedia.org/wikipedia/commons/2/28/Chromium_Logo.svg', + 'mac os': 'https://upload.wikimedia.org/wikipedia/commons/c/c9/Finder_Icon_macOS_Big_Sur.png', + 'mobile safari': 'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg', + 'openpanel.dev': 'https://openpanel.dev', + 'samsung internet': 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Samsung_Internet_logo.svg/1024px-Samsung_Internet_logo.svg.png', + 'vstat.info': 'https://vstat.info', + 'yahoo!': 'https://yahoo.com', + android: 'https://image.similarpng.com/very-thumbnail/2020/08/Android-icon-on-transparent--background-PNG.png', + bing: 'https://bing.com', + chrome: 'https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg', + chromecast: 'https://upload.wikimedia.org/wikipedia/commons/archive/2/26/20161130022732%21Chromecast_cast_button_icon.svg', + duckduckgo: 'https://duckduckgo.com', + ecosia: 'https://ecosia.com', + edge: 'https://upload.wikimedia.org/wikipedia/commons/7/7e/Microsoft_Edge_logo_%282019%29.png', + facebook: 'https://facebook.com', + firefox: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/1920px-Firefox_logo%2C_2019.svg.png', + github: 'https://github.com', + gmail: 'https://mail.google.com', + google: 'https://google.com', + instagram: 'https://instagram.com', + ios: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Apple_iOS_logo.svg', + linkedin: 'https://linkedin.com', + linux: 'https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg', + microlaunch: 'https://microlaunch.net', + opera: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Opera_2015_icon.svg/1920px-Opera_2015_icon.svg.png', + pinterest: 'https://www.pinterest.se', + producthunt: 'https://www.producthunt.com', + reddit: 'https://reddit.com', + safari: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg', + slack: 'https://slack.com', + snapchat: 'https://snapchat.com', + taaft: 'https://theresanaiforthat.com', + twitter: 'https://twitter.com', + windows: 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Windows_logo_-_2012.png', + yandex: 'https://yandex.com', + youtube: 'https://youtube.com', +}; + +export default data;