vercel colors

Author: sdairs

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

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

apps/web/src/components/tools/vercel/git-analytics-chart.tsx

@@ -15,6 +15,13 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
+function transformData(data: GitData[]): (GitData & { fill: string })[] {
+    return data.map((item, index) => ({
+        ...item,
+        fill: `hsl(var(--chart-${(index % 12) + 1}))`
+    }));
+}
+
 export function GitAnalyticsChart({ data, isLoading, className }: {
     data: GitData[]
     isLoading: boolean
@@ -23,11 +30,13 @@ export function GitAnalyticsChart({ data, isLoading, className }: {
     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
                 data={data}
-                margin={{ left: 120, right: 24, top: 24, bottom: 24 }}
+                margin={{ left: 24, right: 24, top: 24, bottom: 24 }}
                 layout="vertical"
             >
                 <XAxis type="number" tickLine={false} axisLine={false} />

apps/web/src/components/tools/vercel/projects-chart.tsx

@@ -9,15 +9,22 @@ interface ProjectData {
 
 const chartConfig = {
     total_deployments: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "Total Deployments",
     },
     error_rate: {
-        color: "hsl(0 84.2% 60.2%)",
+        color: "hsl(var(--chart-2))",
         label: "Error Rate %",
     },
 } satisfies ChartConfig
 
+function transformData(data: ProjectData[]): (ProjectData & { fill: string })[] {
+    return data.map((item, index) => ({
+        ...item,
+        fill: `hsl(var(--chart-${(index % 12) + 1}))`
+    }));
+}
+
 export function ProjectsChart({ data, isLoading, className }: {
     data: ProjectData[]
     isLoading: boolean
@@ -26,6 +33,8 @@ export function ProjectsChart({ data, isLoading, className }: {
     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