dashboard: improve serie icons

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 (
+      <span
+        className={`rounded-[2px] overflow-hidden !block !leading-[1rem] fi fi-${url}`}
+      ></span>
+    );
+  } 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;

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 <img className="h-4 object-contain rounded-[2px]" src={url} />;
   } as LucideIcon;
 };
 
-const createFlagIcon = (url: string) => {
-  return function (props: LucideProps) {
-    return (
-      <span
-        className={`rounded-[2px] overflow-hidden !block !leading-[1rem] fi fi-${url}`}
-      ></span>
-    );
-  } as LucideIcon;
-};
-
 const mapper: Record<string, LucideIcon> = {
   // Events
   screen_view: MonitorPlayIcon,
@@ -47,75 +40,6 @@ const mapper: Record<string, LucideIcon> = {
   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<string, LucideIcon> = {
   unknown: HelpCircleIcon,
   [NOT_SET_VALUE]: ScanIcon,
 
-  // Flags
+  ...Object.entries(iconsWithUrls).reduce(
-  se: createFlagIcon('se'),
+    (acc, [key, value]) => ({
-  us: createFlagIcon('us'),
+      ...acc,
-  gb: createFlagIcon('gb'),
+      [key]: createImageIcon(value),
-  ua: createFlagIcon('ua'),
+    }),
-  ru: createFlagIcon('ru'),
+    {}
-  de: createFlagIcon('de'),
+  ),
-  fr: createFlagIcon('fr'),
+
-  br: createFlagIcon('br'),
+  ...flags,
-  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 function SerieIcon({ name, ...props }: SerieIconProps) {

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;