Merge pull request #53 from tinybirdco/stylepass

sdairs · web-flow · commit 2798b2bfefaa · 2025-01-11T14:38:10.000Z
basic style pass
diff --git a/apps/web/src/app/[id]/page.tsx b/apps/web/src/app/[id]/page.tsx
@@ -57,7 +57,7 @@ export default function AppPage({ params }: { params: Promise<{ id: string }> })
   const Component = toolState === 'configured' ? tool_comps.Dashboard : tool_comps.Readme;
 
   return (
-    <div className="py-6">
+    <div className="py-6 mb-6 pb-6">
       <div className="flex flex-col gap-6">
         <div className="flex items-center gap-2">
           <h1 className="text-2xl font-bold">{TOOLS[id].name}</h1>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -27,11 +27,21 @@ body {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --chart-1: 265, 65%, 46%;
+    --chart-2: 204, 86%, 49%;
+    --chart-3: 180, 100%, 18%;
+    --chart-4: 334, 74%, 36%;
+    --chart-5: 357, 95%, 64%;
+    --chart-6: 357, 91%, 18%;
+    --chart-7: 138, 67%, 30%;
+    --chart-8: 223, 100%, 31%;
+    --chart-9: 338, 82%, 63%;
+    --chart-10: 45, 100%, 35%;
+    --chart-11: 179, 100%, 31%;
+    --chart-12: 208, 97%, 15%;
+    --chart-13: 24, 100%, 27%;
+    --chart-14: 263, 100%, 72%;
+
     --radius: 0.5rem;
   }
   .dark {
@@ -59,6 +69,10 @@ body {
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    /* 
+    chart color pallete from https://carbondesignsystem.com/data-visualization/color-palettes/ 
+    also contains dark colors when needed
+    */
   }
 }
 
diff --git a/apps/web/src/components/tools/auth0/auth-mech-chart.tsx b/apps/web/src/components/tools/auth0/auth-mech-chart.tsx
@@ -26,14 +26,20 @@ export interface AuthMechChartData {
 
 const chartConfig = {
     logins: {
-        color: "hsl(var(--primary))",
+        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) {
-    // Sort data by number of logins in descending order
-    const sortedData = [...data].sort((a, b) => b.logins - a.logins)
+    const sortedData = transformData([...data].sort((a, b) => b.logins - a.logins))
 
     return (
         <Card>
@@ -73,7 +79,6 @@ export function AuthMechChart({ data, className }: AuthMechChartData) {
                         <Bar
                             dataKey="logins"
                             radius={[4, 4, 4, 4]}
-                            fill="hsl(var(--primary))"
                         />
                     </BarChart>
                 </ChartContainer>
diff --git a/apps/web/src/components/tools/auth0/cumulative-signups-chart.tsx b/apps/web/src/components/tools/auth0/cumulative-signups-chart.tsx
@@ -15,11 +15,11 @@ interface CumulativeSignupsChartProps {
 
 const chartConfig = {
     cumulative_users: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Total Users",
     },
     new_users: {
-        color: "hsl(var(--secondary))",
+        color: "hsl(var(--chart-2))",
         label: "New Users",
     },
 } satisfies ChartConfig
@@ -57,13 +57,13 @@ export function CumulativeSignupsChart({ data, isLoading, className }: Cumulativ
                 />
                 <Bar 
                     dataKey="cumulative_users" 
-                    fill="hsl(var(--primary))"
-                    radius={[4, 4, 0, 0]}
+                    fill={chartConfig.cumulative_users.color}
+                    radius={[0, 0, 4, 4]}
                     stackId="a"
                 />
                 <Bar 
                     dataKey="new_users" 
-                    fill="hsl(var(--secondary))"
+                    fill={chartConfig.new_users.color}
                     radius={[4, 4, 0, 0]}
                     stackId="a"
                 />
diff --git a/apps/web/src/components/tools/auth0/daily-login-fails-chart.tsx b/apps/web/src/components/tools/auth0/daily-login-fails-chart.tsx
@@ -28,7 +28,7 @@ export interface DailyLoginFailsChartData {
 
 const chartConfig = {
     fails: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Login Fails",
     },
 } satisfies ChartConfig
@@ -94,9 +94,9 @@ export function DailyLoginFailsChart({ data, timeRange, className }: DailyLoginF
                             strokeWidth={2}
                             dot={true}
                             style={{
-                                stroke: "hsl(var(--primary))",
+                                stroke: chartConfig.fails.color,
                             }}
-                            activeDot={{ fill: "hsl(var(--primary))", stroke: "hsl(var(--primary))" }}
+                            activeDot={{ fill: chartConfig.fails.color, stroke: chartConfig.fails.color }}
                         />
                     </LineChart>
                 </ChartContainer>
diff --git a/apps/web/src/components/tools/auth0/daily-signups-chart.tsx b/apps/web/src/components/tools/auth0/daily-signups-chart.tsx
@@ -28,7 +28,7 @@ export interface DailySignupsChartData {
 
 const chartConfig = {
     signups: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Signups",
     },
 } satisfies ChartConfig
@@ -94,9 +94,9 @@ export function DailySignupsChart({ data, timeRange, className }: DailySignupsCh
                             strokeWidth={2}
                             dot={true}
                             style={{
-                                stroke: "hsl(var(--primary))",
+                                stroke: chartConfig.signups.color,
                             }}
-                            activeDot={{ fill: "hsl(var(--primary))", stroke: "hsl(var(--primary))" }}
+                            activeDot={{ fill: chartConfig.signups.color, stroke: chartConfig.signups.color }}
                         />
                     </LineChart>
                 </ChartContainer>
diff --git a/apps/web/src/components/tools/auth0/dau-chart.tsx b/apps/web/src/components/tools/auth0/dau-chart.tsx
@@ -29,7 +29,7 @@ export interface DauChartData {
 
 const chartConfig = {
     active: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Active Users",
     },
 } satisfies ChartConfig
@@ -95,10 +95,10 @@ export function DauChart({ data, timeRange, className }: DauChartData) {
                             strokeWidth={2}
                             activeDot={{
                                 r: 4,
-                                style: { fill: "hsl(var(--primary))" },
+                                style: { fill: chartConfig.active.color },
                             }}
                             style={{
-                                stroke: "hsl(var(--primary))",
+                                stroke: chartConfig.active.color,
                             }}
                         />
                     </LineChart>
diff --git a/apps/web/src/components/tools/auth0/top-browsers-chart.tsx b/apps/web/src/components/tools/auth0/top-browsers-chart.tsx
@@ -19,10 +19,19 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
+function transformData(data: Browser[]): (Browser & { fill: string })[] {
+    return data.map((item, index) => ({
+        ...item,
+        fill: `hsl(var(--chart-${(index % 12) + 1}))`
+    }));
+}
+
 export function TopBrowsersChart({ data, isLoading, className }: TopBrowsersChartProps) {
     if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
     if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
 
+    data = transformData(data)
+
     return (
         <ChartContainer config={chartConfig} className={`w-full ${className}`}>
             <BarChart 
@@ -55,7 +64,6 @@ export function TopBrowsersChart({ data, isLoading, className }: TopBrowsersChar
                 />
                 <Bar 
                     dataKey="request_count" 
-                    fill="hsl(var(--primary))"
                     radius={[4, 4, 4, 4]}
                 />
             </BarChart>
diff --git a/apps/web/src/components/tools/auth0/top-devices-chart.tsx b/apps/web/src/components/tools/auth0/top-devices-chart.tsx
@@ -13,15 +13,24 @@ interface TopDevicesChartProps {
 
 const chartConfig = {
     request_count: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Requests",
     },
 } satisfies ChartConfig
 
+function transformData(data: Device[]): (Device & { fill: string })[] {
+    return data.map((item, index) => ({
+        ...item,
+        fill: `hsl(var(--chart-${(index % 12) + 1}))`
+    }));
+}
+
 export function TopDevicesChart({ data, isLoading, className }: TopDevicesChartProps) {
     if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
     if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
 
+    data = transformData(data)
+
     return (
         <ChartContainer config={chartConfig} className={`w-full ${className}`}>
             <BarChart 
diff --git a/apps/web/src/components/tools/auth0/top-domains-chart.tsx b/apps/web/src/components/tools/auth0/top-domains-chart.tsx
@@ -15,15 +15,24 @@ interface TopDomainsChartProps {
 
 const chartConfig = {
     unique_emails: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Users",
     },
 } satisfies ChartConfig
 
+function transformData(data: Domain[]): (Domain & { fill: string })[] {
+    return data.map((item, index) => ({
+        ...item,
+        fill: `hsl(var(--chart-${(index % 12) + 1}))`
+    }));
+}
+
 export function TopDomainsChart({ data, isLoading, className }: TopDomainsChartProps) {
     if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
     if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
 
+    data = transformData(data)
+    
     return (
         <ChartContainer config={chartConfig} className={`w-full ${className}`}>
             <BarChart 
diff --git a/apps/web/src/components/tools/auth0/user-retention-chart.tsx b/apps/web/src/components/tools/auth0/user-retention-chart.tsx
@@ -26,7 +26,7 @@ export interface UserRetentionChartData {
 
 const chartConfig = {
     user_retention: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "User Retention",
     },
 } satisfies ChartConfig
@@ -95,9 +95,9 @@ export function UserRetentionChart({ data, timeRange, className }: UserRetention
                             strokeWidth={2}
                             dot={true}
                             style={{
-                                stroke: "hsl(var(--primary))",
+                                stroke: chartConfig.user_retention.color,
                             }}
-                            activeDot={{ fill: "hsl(var(--primary))", stroke: "hsl(var(--primary))" }}
+                            activeDot={{ fill: chartConfig.user_retention.color, stroke: chartConfig.user_retention.color }}
                         />
                     </LineChart>
                 </ChartContainer>
diff --git a/apps/web/src/components/tools/orb/dashboard.tsx b/apps/web/src/components/tools/orb/dashboard.tsx
@@ -93,9 +93,8 @@ export default function OrbDashboard() {
             {/* Charts Grid */}
             <div className="grid gap-4 grid-cols-1">
                 <SubsChart data={subsTimeSeriesData} />
-
             </div>
-            <div className="grid gap-4 md:grid-cols-2">
+            <div className="grid gap-4 md:grid-cols-2 max-h-[400px]">
                 <SubsByPlanTsChart data={subsByPlanTsData} />
                 <SubsByPlanChart data={subsByPlanData} />
             </div>
diff --git a/apps/web/src/components/tools/orb/sub-by-plan-chart.tsx b/apps/web/src/components/tools/orb/sub-by-plan-chart.tsx
@@ -60,7 +60,7 @@ export function SubsByPlanChart({ data: rawData }: SubsByPlanChartData) {
             <CardContent className="flex-1 pb-0">
                 <ChartContainer
                     config={chartConfig}
-                    className="mx-auto aspect-square max-h-[300px]"
+                    className="mx-auto"
                 >
                     <PieChart>
                         <Pie data={data} dataKey="subs" nameKey="plan" />
diff --git a/apps/web/src/components/tools/orb/sub-by-plan-ts-chart.tsx b/apps/web/src/components/tools/orb/sub-by-plan-ts-chart.tsx
@@ -64,6 +64,8 @@ export function SubsByPlanTsChart({ data: rawData }: SubsByPlanTsChartData) {
                         margin={{
                             left: 12,
                             right: 12,
+                            top: 12,
+                            bottom: 12,
                         }}
                     >
                         <XAxis
@@ -89,14 +91,15 @@ export function SubsByPlanTsChart({ data: rawData }: SubsByPlanTsChartData) {
                             }}
                         />
                         <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                        {planNames.map((plan) => (
+                        {planNames.map((plan, i) => (
                             <Line
                                 key={plan}
                                 type="monotone"
                                 dataKey={plan}
                                 name={plan}
                                 strokeWidth={2}
                                 dot={false}
+                                stroke={`hsl(var(--chart-${i}))`}
                             />
                         ))}
                     </LineChart>
diff --git a/apps/web/src/components/tools/orb/subs-chart.tsx b/apps/web/src/components/tools/orb/subs-chart.tsx
@@ -25,7 +25,7 @@ export interface SubsChartProps {
 
 const chartConfig = {
     invoices: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "New Subscriptions",
     },
 } satisfies ChartConfig
@@ -43,6 +43,8 @@ export function SubsChart({ data }: SubsChartProps) {
                         margin={{
                             left: 12,
                             right: 12,
+                            top: 12,
+                            bottom: 12
                         }}
                     >
                         <XAxis
@@ -77,11 +79,9 @@ export function SubsChart({ data }: SubsChartProps) {
                             strokeWidth={2}
                             activeDot={{
                                 r: 4,
-                                style: { fill: "hsl(var(--primary))" },
-                            }}
-                            style={{
-                                stroke: "hsl(var(--primary))",
+                                style: { fill: chartConfig.invoices.color },
                             }}
+                            stroke={chartConfig.invoices.color}
                         />
                     </LineChart>
                 </ChartContainer>
diff --git a/apps/web/src/components/tools/vercel/deployments-chart.tsx b/apps/web/src/components/tools/vercel/deployments-chart.tsx
@@ -10,11 +10,11 @@ interface DeploymentsData {
 
 const chartConfig = {
     'deployment.succeeded': {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-2))",
         label: "Successful Deployments",
     },
     'deployment.error': {
-        color: "hsl(var(--secondary))",
+        color: "hsl(var(--chart-1))",
         label: "Failed Deployments",
     },
 } satisfies ChartConfig
@@ -80,7 +80,7 @@ export function DeploymentsChart({ data, isLoading, className }: {
                 <Bar
                     dataKey="deployment.succeeded"
                     fill={chartConfig['deployment.succeeded'].color}
-                    radius={[4, 4, 0, 0]}
+                    radius={[0, 0, 4, 4]}
                     stackId="stack"
                 />
                 <Bar
diff --git a/apps/web/src/components/tools/vercel/duration-chart.tsx b/apps/web/src/components/tools/vercel/duration-chart.tsx
@@ -43,14 +43,14 @@ export function DurationChart({ data }: DurationChartProps) {
                 <Line
                     type="monotone"
                     dataKey="avg_duration"
-                    stroke="hsl(var(--primary))"
+                    stroke="hsl(var(--chart-1))"
                     strokeWidth={2}
                     dot={false}
                 />
                 <Line
                     type="monotone"
                     dataKey="p95_duration"
-                    stroke="hsl(var(--secondary))"
+                    stroke="hsl(var(--chart-2))"
                     strokeWidth={2}
                     dot={false}
                 />
diff --git a/apps/web/src/components/tools/vercel/git-analytics-chart.tsx b/apps/web/src/components/tools/vercel/git-analytics-chart.tsx
diff --git a/apps/web/src/components/tools/vercel/projects-chart.tsx b/apps/web/src/components/tools/vercel/projects-chart.tsx
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
