update browser barlist

Author: alrocar

apps/web/package-lock.json

@@ -12,6 +12,12 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^1.0.6",
     "@ai-sdk/openai": "^1.0.11",
+    "@browser-logos/chrome": "^2.0.0",
+    "@browser-logos/edge": "^2.0.7",
+    "@browser-logos/firefox": "^3.0.10",
+    "@browser-logos/internet-explorer-tile_10-11": "^1.0.13",
+    "@browser-logos/opera": "^1.1.11",
+    "@browser-logos/safari": "^2.1.0",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -24,6 +30,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@tinybirdco/charts": "^0.2.4",
     "ai": "^4.0.22",
+    "browser-logos": "^2.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",

apps/web/package.json

@@ -1,6 +1,12 @@
 'use client'
 
 import { BarList } from '@tinybirdco/charts'
+import chrome from '@browser-logos/chrome/chrome.svg'
+import firefox from '@browser-logos/firefox/firefox.svg'
+import safari from '@browser-logos/safari/safari.svg'
+import edge from '@browser-logos/edge/edge.svg'
+import opera from '@browser-logos/opera/opera.svg'
+import ie from '@browser-logos/internet-explorer-tile_10-11/internet-explorer-tile_10-11.svg'
 
 export function Auth0TopBrowsers(params: {
   client_id?: string
@@ -10,23 +16,40 @@ export function Auth0TopBrowsers(params: {
   date_from?: string
   date_to?: string
 }) {
+  const icons = {
+    'Chrome': chrome,
+    'Firefox': firefox,
+    'Safari': safari,
+    'Edge': edge,
+    'Opera': opera,
+    'Internet Explorer': ie,
+    'Other': chrome
+  }
+
   return <BarList 
     endpoint={`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_top_browsers.json`}
     token={params.token ?? ''}
     index="browser"
     categories={['request_count']}
-    colorPalette={['#000000']}
+    colorPalette={['#f2f2f2']}
     height="250px"
     params={params}
     indexConfig={{
-        label: 'BROWSER',
-        renderBarContent: ({ label }) => (
-        <span className="font-normal text-white [text-shadow:2px_1px_0px_#000]">{label}</span>
-        )
+        label: <span className="font-bold normal-case">Browser</span>,
+        renderBarContent: ({ label }) => {
+          return (
+            <span className="font-bold text-black flex items-center gap-2">
+              <img src={icons[label as keyof typeof icons] || icons['Other']} width="16" height="16" alt="" /> {label}
+            </span>
+          )
+        }
     }}
     categoryConfig={{
         request_count: {
-              label: <span>Requests</span>
+              label: <span className="font-normal normal-case text-xs">Requests</span>,
+              renderValue: ({ value }) => {
+                return <span className="font-bold text-black">{value}</span>
+              }
         }
     }}
   />