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;