From d64374d009dabfbfb1bb9ad6ffa8d1973879e8f6 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 4 Nov 2024 23:06:14 +0400
Subject: [PATCH] fix(www): chart colors

---
 .../new-york/example/cards/activity-goal.tsx  |  38 +++--
 .../new-york/example/cards/metric.tsx         | 136 +++++++-----------
 .../registry/new-york/example/cards/stats.tsx | 110 +++++++-------
 3 files changed, 115 insertions(+), 169 deletions(-)

diff --git a/apps/www/registry/new-york/example/cards/activity-goal.tsx b/apps/www/registry/new-york/example/cards/activity-goal.tsx
index 9028b08441..896598338e 100644
--- a/apps/www/registry/new-york/example/cards/activity-goal.tsx
+++ b/apps/www/registry/new-york/example/cards/activity-goal.tsx
@@ -15,6 +15,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
 import { baseColors } from "@/registry/registry-base-colors"
 
 const data = [
@@ -59,13 +60,17 @@ const data = [
   },
 ]
 
-export function CardsActivityGoal() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
+const chartConfig = {
+  goal: {
+    label: "Goal",
+    theme: {
+      light: "black",
+      dark: "white",
+    },
+  },
+} satisfies ChartConfig
 
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
+export function CardsActivityGoal() {
   const [goal, setGoal] = React.useState(350)
 
   function onClick(adjustment: number) {
@@ -108,23 +113,14 @@ export function CardsActivityGoal() {
           </Button>
         </div>
         <div className="my-3 h-[60px]">
-          <ResponsiveContainer width="100%" height="100%">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-full w-full"
+          >
             <BarChart data={data}>
-              <Bar
-                dataKey="goal"
-                style={
-                  {
-                    fill: "var(--theme-primary)",
-                    opacity: 0.2,
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
+              <Bar dataKey="goal" radius={4} fill="var(--color-goal)" />
             </BarChart>
-          </ResponsiveContainer>
+          </ChartContainer>
         </div>
       </CardContent>
       <CardFooter>
diff --git a/apps/www/registry/new-york/example/cards/metric.tsx b/apps/www/registry/new-york/example/cards/metric.tsx
index e9d6e7f545..f1f84d8d9e 100644
--- a/apps/www/registry/new-york/example/cards/metric.tsx
+++ b/apps/www/registry/new-york/example/cards/metric.tsx
@@ -11,6 +11,12 @@ import {
   CardHeader,
   CardTitle,
 } from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
 import { baseColors } from "@/registry/registry-base-colors"
 
 const data = [
@@ -44,14 +50,18 @@ const data = [
   },
 ]
 
+const chartConfig = {
+  today: {
+    label: "Today",
+    color: "hsl(var(--primary))",
+  },
+  average: {
+    label: "Average",
+    color: "hsl(var(--muted-foreground))",
+  },
+} satisfies ChartConfig
+
 export function CardsMetric() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-
   return (
     <Card>
       <CardHeader>
@@ -61,87 +71,39 @@ export function CardsMetric() {
         </CardDescription>
       </CardHeader>
       <CardContent className="pb-4">
-        <div className="h-[200px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart
-              data={data}
-              margin={{
-                top: 5,
-                right: 10,
-                left: 10,
-                bottom: 0,
+        <ChartContainer config={chartConfig} className="h-[200px] w-full">
+          <LineChart
+            data={data}
+            margin={{
+              top: 5,
+              right: 10,
+              left: 10,
+              bottom: 0,
+            }}
+          >
+            <Line
+              type="monotone"
+              strokeWidth={2}
+              dataKey="average"
+              stroke="var(--color-average)"
+              activeDot={{
+                r: 6,
+                fill: "var(--color-average)",
               }}
-            >
-              <Tooltip
-                content={({ active, payload }) => {
-                  if (active && payload && payload.length) {
-                    return (
-                      <div className="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Average
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {payload[0].value}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Today
-                            </span>
-                            <span className="font-bold">
-                              {payload[1].value}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  }
-
-                  return null
-                }}
-              />
-              <Line
-                type="monotone"
-                strokeWidth={2}
-                dataKey="average"
-                activeDot={{
-                  r: 6,
-                  style: { fill: "var(--theme-primary)", opacity: 0.25 },
-                }}
-                style={
-                  {
-                    stroke: "var(--theme-primary)",
-                    opacity: 0.25,
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-              <Line
-                type="monotone"
-                dataKey="today"
-                strokeWidth={2}
-                activeDot={{
-                  r: 8,
-                  style: { fill: "var(--theme-primary)" },
-                }}
-                style={
-                  {
-                    stroke: "var(--theme-primary)",
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
+            />
+            <Line
+              type="monotone"
+              dataKey="today"
+              strokeWidth={2}
+              stroke="var(--color-today)"
+              activeDot={{
+                r: 8,
+                style: { fill: "var(--color-today)" },
+              }}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+          </LineChart>
+        </ChartContainer>
       </CardContent>
     </Card>
   )
diff --git a/apps/www/registry/new-york/example/cards/stats.tsx b/apps/www/registry/new-york/example/cards/stats.tsx
index 53e9b38963..c198191a73 100644
--- a/apps/www/registry/new-york/example/cards/stats.tsx
+++ b/apps/www/registry/new-york/example/cards/stats.tsx
@@ -1,16 +1,14 @@
 "use client"
 
-import { useTheme } from "next-themes"
-import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
+import { Bar, BarChart, Line, LineChart } from "recharts"
 
-import { useConfig } from "@/hooks/use-config"
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
 } from "@/registry/new-york/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
 
 const data = [
   {
@@ -47,14 +45,24 @@ const data = [
   },
 ]
 
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    theme: {
+      light: "black",
+      dark: "white",
+    },
+  },
+  subscription: {
+    label: "Subscriptions",
+    theme: {
+      light: "black",
+      dark: "white",
+    },
+  },
+} satisfies ChartConfig
+
 export function CardsStats() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-
   return (
     <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
       <Card>
@@ -66,38 +74,28 @@ export function CardsStats() {
           <p className="text-xs text-muted-foreground">
             +20.1% from last month
           </p>
-          <div className="h-[80px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <LineChart
-                data={data}
-                margin={{
-                  top: 5,
-                  right: 10,
-                  left: 10,
-                  bottom: 0,
+          <ChartContainer config={chartConfig} className="h-[80px] w-full">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="revenue"
+                activeDot={{
+                  r: 6,
+                  fill: "var(--color-revenue)",
                 }}
-              >
-                <Line
-                  type="monotone"
-                  strokeWidth={2}
-                  dataKey="revenue"
-                  activeDot={{
-                    r: 6,
-                    style: { fill: "var(--theme-primary)", opacity: 0.25 },
-                  }}
-                  style={
-                    {
-                      stroke: "var(--theme-primary)",
-                      "--theme-primary": `hsl(${
-                        baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                          .primary
-                      })`,
-                    } as React.CSSProperties
-                  }
-                />
-              </LineChart>
-            </ResponsiveContainer>
-          </div>
+                stroke="var(--color-revenue)"
+              />
+            </LineChart>
+          </ChartContainer>
         </CardContent>
       </Card>
       <Card>
@@ -109,25 +107,15 @@ export function CardsStats() {
           <p className="text-xs text-muted-foreground">
             +180.1% from last month
           </p>
-          <div className="mt-4 h-[80px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={data}>
-                <Bar
-                  dataKey="subscription"
-                  style={
-                    {
-                      fill: "var(--theme-primary)",
-                      opacity: 1,
-                      "--theme-primary": `hsl(${
-                        baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                          .primary
-                      })`,
-                    } as React.CSSProperties
-                  }
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
+          <ChartContainer config={chartConfig} className="mt-2 h-[80px] w-full">
+            <BarChart data={data}>
+              <Bar
+                dataKey="subscription"
+                fill="var(--color-subscription)"
+                radius={4}
+              />
+            </BarChart>
+          </ChartContainer>
         </CardContent>
       </Card>
     </div>