auth0 colors

Author: sdairs

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>

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"
                 />

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>

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>

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>

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>

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 

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 

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>