mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-26 14:16:08 +00:00
fix(www): chart colors
This commit is contained in:
shadcn
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user