use tinybird charts

.gitignore

@@ -4,4 +4,4 @@
 .tmp
 .tb_error*
 tinybird/fixtures
-
+tinybird/tests

apps/web/package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@tinybirdco/charts": "^0.2.4",
     "ai": "^4.0.22",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/web/src/components/tools/auth0/auth-mech-chart.tsx

@@ -1,88 +1,36 @@
-"use client"
+'use client'
 
-import {
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card"
-import {
-    ChartContainer,
-    ChartTooltip,
-    ChartConfig,
-    ChartTooltipContent
-} from "@/components/ui/chart"
-import { Bar, BarChart, XAxis, YAxis } from "recharts"
+import { BarList } from '@tinybirdco/charts'
 
-export interface AuthMechDataPoint {
-    mech: string
-    logins: number
-}
-
-export interface AuthMechChartData {
-    data: AuthMechDataPoint[]
-    className?: string
-}
-
-const chartConfig = {
-    logins: {
-        color: "hsl(var(--chart-1))",
-        label: "Logins",
-    },
-} satisfies ChartConfig
-
-function transformData(data: AuthMechDataPoint[]): (AuthMechDataPoint & { fill: string })[] {
-    return data.map((item, index) => ({
-        ...item,
-        fill: `hsl(var(--chart-${(index % 12) + 1}))`
-    }));
-}
-
-export function AuthMechChart({ data, className }: AuthMechChartData) {
-    const sortedData = transformData([...data].sort((a, b) => b.logins - a.logins))
-
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Authentication Methods</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <ChartContainer config={chartConfig} className={`w-full ${className}`}>
-                    <BarChart
-                        data={sortedData}
-                        layout="vertical"
-                        margin={{
-                            left: 24,
-                            right: 12,
-                            top: 12,
-                            bottom: 12,
-                        }}
-                    >
-                        <XAxis
-                            type="number"
-                            tickLine={false}
-                            axisLine={false}
-                            tickMargin={8}
-                        />
-                        <YAxis
-                            type="category"
-                            dataKey="mech"
-                            tickLine={false}
-                            axisLine={false}
-                            tickMargin={8}
-                            width={70}
-                        />
-                        <ChartTooltip
-                            content={<ChartTooltipContent />}
-                            cursor={{ fill: "hsl(var(--muted))", opacity: 0.2 }}
-                        />
-                        <Bar
-                            dataKey="logins"
-                            radius={[4, 4, 4, 4]}
-                        />
-                    </BarChart>
-                </ChartContainer>
-            </CardContent>
-        </Card>
-    )
-}
+export function Auth0TopAuth(params: {
+  client_id?: string
+  connection_id?: string
+  tenant_name?: string
+  token?: string
+  date_from?: string
+  date_to?: string
+}) {
+  return <BarList 
+    endpoint={`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_mech_usage.json`}
+    token={params.token ?? ''}
+    index="mech"
+    categories={['logins']}
+    colorPalette={['#000000']}
+    height="250px"
+    params={params}
+    indexConfig={{
+        label: 'AUTH',
+        renderBarContent: ({ label }) => (
+        <span className="font-normal text-white [text-shadow:2px_1px_0px_#000]">{label}</span>
+        )
+      }}
+    options={{
+        tooltip: {
+          backgroundColor: '#fff',
+          textStyle: {
+            color: '#333'
+          }
+        }
+      }}
+  />
+}