dashboard: update event and profile list

apps/dashboard/src/components/events/ListProperties.tsx

@@ -1,35 +0,0 @@
-import { toDots } from '@openpanel/common';
-
-import { Table, TableBody, TableCell, TableRow } from '../ui/table';
-
-interface ListPropertiesProps {
-  data: any;
-  className?: string;
-}
-
-export function ListProperties({
-  data,
-  className = 'mini',
-}: ListPropertiesProps) {
-  const dots = toDots(data);
-  return (
-    <Table className={className}>
-      <TableBody>
-        {Object.keys(dots).map((key) => {
-          return (
-            <TableRow key={key}>
-              <TableCell className="font-medium">{key}</TableCell>
-              <TableCell>
-                {typeof dots[key] === 'boolean'
-                  ? dots[key]
-                    ? 'true'
-                    : 'false'
-                  : dots[key]}
-              </TableCell>
-            </TableRow>
-          );
-        })}
-      </TableBody>
-    </Table>
-  );
-}

apps/dashboard/src/components/events/ListPropertiesIcon.tsx

@@ -0,0 +1,69 @@
+import { SerieIcon } from '../report/chart/SerieIcon';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+interface Props {
+  country?: string;
+  city?: string;
+  os?: string;
+  os_version?: string;
+  browser?: string;
+  browser_version?: string;
+  referrer_name?: string;
+  referrer_type?: string;
+}
+
+export function ListPropertiesIcon({
+  country,
+  city,
+  os,
+  os_version,
+  browser,
+  browser_version,
+  referrer_name,
+  referrer_type,
+}: Props) {
+  return (
+    <div className="flex gap-1">
+      {country && (
+        <Tooltip>
+          <TooltipTrigger>
+            <SerieIcon name={country} />
+          </TooltipTrigger>
+          <TooltipContent>
+            {country}, {city}
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {os && (
+        <Tooltip>
+          <TooltipTrigger>
+            <SerieIcon name={os} />
+          </TooltipTrigger>
+          <TooltipContent>
+            {os} ({os_version})
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {browser && (
+        <Tooltip>
+          <TooltipTrigger>
+            <SerieIcon name={browser} />
+          </TooltipTrigger>
+          <TooltipContent>
+            {browser} ({browser_version})
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {referrer_name && (
+        <Tooltip>
+          <TooltipTrigger>
+            <SerieIcon name={referrer_name} />
+          </TooltipTrigger>
+          <TooltipContent>
+            {referrer_name} ({referrer_type})
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}