Skip to content

Commit

Permalink
fix(www): chart colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@shadcn
shadcn committed Nov 4, 2024
1 parent e24e51a commit d64374d
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 169 deletions.
38 changes: 17 additions & 21 deletions apps/www/registry/new-york/example/cards/activity-goal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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>
Expand Down
136 changes: 49 additions & 87 deletions apps/www/registry/new-york/example/cards/metric.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -44,14 +50,18 @@ const data = [
},
]

export function CardsMetric() {
const { theme: mode } = useTheme()
const [config] = useConfig()

const baseColor = baseColors.find(
(baseColor) => baseColor.name === config.theme
)
const chartConfig = {
today: {
label: "Today",
color: "hsl(var(--primary))",
},
average: {
label: "Average",
color: "hsl(var(--muted-foreground))",
},
} satisfies ChartConfig

export function CardsMetric() {
return (
<Card>
<CardHeader>
Expand All @@ -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>
)
Expand Down
110 changes: 49 additions & 61 deletions apps/www/registry/new-york/example/cards/stats.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = [
{
Expand Down Expand Up @@ -47,14 +45,24 @@ const data = [
},
]

export function CardsStats() {
const { theme: mode } = useTheme()
const [config] = useConfig()

const baseColor = baseColors.find(
(baseColor) => baseColor.name === config.theme
)
const chartConfig = {
revenue: {
label: "Revenue",
theme: {
light: "black",
dark: "white",
},
},
subscription: {
label: "Subscriptions",
theme: {
light: "black",
dark: "white",
},
},
} satisfies ChartConfig

export function CardsStats() {
return (
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
<Card>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit d64374d

Please sign in to comment.