mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 22:45:47 +00:00
feat(www): tooltip examples (#4309)
* feat(www): more chart examples * feat(www): add tooltip examples * feat: add themes support on blocks page * chore: build registry * fix: colors on charts * fix: styles * fix: downgrade rehype-pretty-code * chore: fix * fix: frame * fix: code * feat: update charts nav * fix: use client * feat: update all charts
This commit is contained in:
shadcn
GitHub
123
apps/www/__registry__/default/block/chart-tooltip-advanced.tsx
Normal file
123
apps/www/__registry__/default/block/chart-tooltip-advanced.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Advanced</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom formatter and total.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
className="w-[180px]"
|
||||
formatter={(value, name, item, index) => (
|
||||
<>
|
||||
<div
|
||||
className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
|
||||
style={
|
||||
{
|
||||
"--color-bg": `var(--color-${name})`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
{/* Add this after the last item */}
|
||||
{index === 1 && (
|
||||
<div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
|
||||
Total
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{item.payload.running + item.payload.swimming}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Default</CardTitle>
|
||||
<CardDescription>
|
||||
Default tooltip with ChartTooltipContent.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
100
apps/www/__registry__/default/block/chart-tooltip-formatter.tsx
Normal file
100
apps/www/__registry__/default/block/chart-tooltip-formatter.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with custom formatter .</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
formatter={(value, name) => (
|
||||
<div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
87
apps/www/__registry__/default/block/chart-tooltip-icons.tsx
Normal file
87
apps/www/__registry__/default/block/chart-tooltip-icons.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client"
|
||||
|
||||
import { Footprints, Waves } from "lucide-react"
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
icon: Footprints,
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
icon: Waves,
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Icons</CardTitle>
|
||||
<CardDescription>Tooltip with icons.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Line Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with line indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with no indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
activities: {
|
||||
label: "Activities",
|
||||
},
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Custom label</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom label from chartConfig.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent labelKey="activities" indicator="line" />
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Label Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with label formatter.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Label</CardTitle>
|
||||
<CardDescription>Tooltip with no label.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -42,16 +42,9 @@ export const containerClassName = "min-h-screen py-12"
|
||||
|
||||
export default function Charts() {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--gap": "1.4rem",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-[--gap] p-6 sm:flex-row sm:p-8"
|
||||
>
|
||||
<div className="grid w-full gap-[--gap] sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card x-chunk="charts-01-chunk-0">
|
||||
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
|
||||
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
@@ -111,18 +104,8 @@ export default function Charts() {
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
fillOpacity={0.6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -187,7 +170,7 @@ export default function Charts() {
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="flex flex-col" x-chunk="charts-01-chunk-1">
|
||||
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
<CardDescription>Resting HR</CardDescription>
|
||||
@@ -307,8 +290,8 @@ export default function Charts() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap] lg:max-w-[20rem]">
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -420,7 +403,7 @@ export default function Charts() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -488,16 +471,8 @@ export default function Charts() {
|
||||
fill="var(--color-steps)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -510,7 +485,7 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
@@ -616,8 +591,8 @@ export default function Charts() {
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap]">
|
||||
<Card x-chunk="charts-01-chunk-5">
|
||||
<div className="grid w-full flex-1 gap-6">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
|
||||
<CardContent className="flex gap-4 p-4">
|
||||
<div className="grid items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
@@ -705,7 +680,7 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -772,16 +747,8 @@ export default function Charts() {
|
||||
fill="var(--color-calories)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -794,7 +761,7 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-7">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
|
||||
@@ -3217,6 +3217,105 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "Radial",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-default": {
|
||||
name: "chart-tooltip-default",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-default")),
|
||||
source: "__registry__/default/block/chart-tooltip-default.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-default.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-indicator-line": {
|
||||
name: "chart-tooltip-indicator-line",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-line")),
|
||||
source: "__registry__/default/block/chart-tooltip-indicator-line.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-indicator-line.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-indicator-none": {
|
||||
name: "chart-tooltip-indicator-none",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-none")),
|
||||
source: "__registry__/default/block/chart-tooltip-indicator-none.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-indicator-none.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-label-none": {
|
||||
name: "chart-tooltip-label-none",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-none")),
|
||||
source: "__registry__/default/block/chart-tooltip-label-none.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-label-none.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-label-custom": {
|
||||
name: "chart-tooltip-label-custom",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-custom")),
|
||||
source: "__registry__/default/block/chart-tooltip-label-custom.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-label-custom.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-label-formatter": {
|
||||
name: "chart-tooltip-label-formatter",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-formatter")),
|
||||
source: "__registry__/default/block/chart-tooltip-label-formatter.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-label-formatter.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-formatter": {
|
||||
name: "chart-tooltip-formatter",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-formatter")),
|
||||
source: "__registry__/default/block/chart-tooltip-formatter.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-formatter.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-icons": {
|
||||
name: "chart-tooltip-icons",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-icons")),
|
||||
source: "__registry__/default/block/chart-tooltip-icons.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-icons.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-advanced": {
|
||||
name: "chart-tooltip-advanced",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/chart-tooltip-advanced")),
|
||||
source: "__registry__/default/block/chart-tooltip-advanced.tsx",
|
||||
files: ["registry/default/block/chart-tooltip-advanced.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
}, "new-york": {
|
||||
"accordion": {
|
||||
name: "accordion",
|
||||
@@ -6430,5 +6529,104 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "Radial",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-default": {
|
||||
name: "chart-tooltip-default",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-default")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-default.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-default.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-indicator-line": {
|
||||
name: "chart-tooltip-indicator-line",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-line")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-indicator-line.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-indicator-line.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-indicator-none": {
|
||||
name: "chart-tooltip-indicator-none",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-none")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-indicator-none.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-indicator-none.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-label-none": {
|
||||
name: "chart-tooltip-label-none",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-none")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-label-none.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-label-none.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-label-custom": {
|
||||
name: "chart-tooltip-label-custom",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-custom")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-label-custom.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-label-custom.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-label-formatter": {
|
||||
name: "chart-tooltip-label-formatter",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-formatter")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-label-formatter.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-label-formatter.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-formatter": {
|
||||
name: "chart-tooltip-formatter",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-formatter")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-formatter.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-formatter.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-icons": {
|
||||
name: "chart-tooltip-icons",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-icons")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-icons.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-icons.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
"chart-tooltip-advanced": {
|
||||
name: "chart-tooltip-advanced",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card","chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-advanced")),
|
||||
source: "__registry__/new-york/block/chart-tooltip-advanced.tsx",
|
||||
files: ["registry/new-york/block/chart-tooltip-advanced.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
chunks: []
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
123
apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx
Normal file
123
apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Advanced</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom formatter and total.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
className="w-[180px]"
|
||||
formatter={(value, name, item, index) => (
|
||||
<>
|
||||
<div
|
||||
className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
|
||||
style={
|
||||
{
|
||||
"--color-bg": `var(--color-${name})`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
{/* Add this after the last item */}
|
||||
{index === 1 && (
|
||||
<div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
|
||||
Total
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{item.payload.running + item.payload.swimming}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Default</CardTitle>
|
||||
<CardDescription>
|
||||
Default tooltip with ChartTooltipContent.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
100
apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx
Normal file
100
apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with custom formatter .</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
formatter={(value, name) => (
|
||||
<div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
87
apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx
Normal file
87
apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client"
|
||||
|
||||
import { Footprints, Waves } from "lucide-react"
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
icon: Footprints,
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
icon: Waves,
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Icons</CardTitle>
|
||||
<CardDescription>Tooltip with icons.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Line Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with line indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with no indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
activities: {
|
||||
label: "Activities",
|
||||
},
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Custom label</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom label from chartConfig.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent labelKey="activities" indicator="line" />
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Label Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with label formatter.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Label</CardTitle>
|
||||
<CardDescription>Tooltip with no label.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -26,13 +26,13 @@ import {
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
} from "@/registry/new-york//ui/chart"
|
||||
import { Separator } from "@/registry/new-york//ui/separator"
|
||||
|
||||
export const description = "A collection of health charts."
|
||||
|
||||
@@ -42,16 +42,9 @@ export const containerClassName = "min-h-screen py-12"
|
||||
|
||||
export default function Charts() {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--gap": "1.4rem",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-[--gap] p-6 sm:flex-row sm:p-8"
|
||||
>
|
||||
<div className="grid w-full gap-[--gap] sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card x-chunk="charts-01-chunk-0">
|
||||
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
|
||||
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
@@ -111,18 +104,8 @@ export default function Charts() {
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
fillOpacity={0.6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -187,7 +170,7 @@ export default function Charts() {
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="flex flex-col" x-chunk="charts-01-chunk-1">
|
||||
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
<CardDescription>Resting HR</CardDescription>
|
||||
@@ -307,8 +290,8 @@ export default function Charts() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap] lg:max-w-[20rem]">
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -420,7 +403,7 @@ export default function Charts() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -488,16 +471,8 @@ export default function Charts() {
|
||||
fill="var(--color-steps)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -510,7 +485,7 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
@@ -616,8 +591,8 @@ export default function Charts() {
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap]">
|
||||
<Card x-chunk="charts-01-chunk-5">
|
||||
<div className="grid w-full flex-1 gap-6">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
|
||||
<CardContent className="flex gap-4 p-4">
|
||||
<div className="grid items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
@@ -705,7 +680,7 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -772,16 +747,8 @@ export default function Charts() {
|
||||
fill="var(--color-calories)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -794,7 +761,7 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-7">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
|
||||
@@ -22,6 +22,10 @@ export async function editInV0({
|
||||
style,
|
||||
})
|
||||
|
||||
// Replace "use client" in the code.
|
||||
// v0 will handle this for us.
|
||||
code = code.replace(`"use client"`, "")
|
||||
|
||||
const response = await fetch(`${process.env.V0_URL}/api/edit`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ description, code, source: EDIT_IN_V0_SOURCE }),
|
||||
|
||||
@@ -64,3 +64,13 @@ export { default as ChartRadialGrid } from "@/registry/new-york/block/chart-radi
|
||||
export { default as ChartRadialText } from "@/registry/new-york/block/chart-radial-text"
|
||||
export { default as ChartRadialShape } from "@/registry/new-york/block/chart-radial-shape"
|
||||
export { default as ChartRadialStacked } from "@/registry/new-york/block/chart-radial-stacked"
|
||||
|
||||
export { default as ChartTooltipDefault } from "@/registry/new-york/block/chart-tooltip-default"
|
||||
export { default as ChartTooltipIndicatorLine } from "@/registry/new-york/block/chart-tooltip-indicator-line"
|
||||
export { default as ChartTooltipIndicatorNone } from "@/registry/new-york/block/chart-tooltip-indicator-none"
|
||||
export { default as ChartTooltipLabelCustom } from "@/registry/new-york/block/chart-tooltip-label-custom"
|
||||
export { default as ChartTooltipLabelFormatter } from "@/registry/new-york/block/chart-tooltip-label-formatter"
|
||||
export { default as ChartTooltipLabelNone } from "@/registry/new-york/block/chart-tooltip-label-none"
|
||||
export { default as ChartTooltipFormatter } from "@/registry/new-york/block/chart-tooltip-formatter"
|
||||
export { default as ChartTooltipIcons } from "@/registry/new-york/block/chart-tooltip-icons"
|
||||
export { default as ChartTooltipAdvanced } from "@/registry/new-york/block/chart-tooltip-advanced"
|
||||
|
||||
@@ -8,7 +8,8 @@ import * as Charts from "@/app/(app)/charts/charts"
|
||||
|
||||
export default function ChartsPage() {
|
||||
return (
|
||||
<>
|
||||
<div className="grid gap-4">
|
||||
<ChartsNav className="[&>a:first-child]:bg-muted [&>a:first-child]:font-medium [&>a:first-child]:text-primary" />
|
||||
<ThemesStyle />
|
||||
<div className="gap-6 md:flex md:flex-row-reverse md:items-start">
|
||||
<ThemesSwitcher
|
||||
@@ -17,7 +18,10 @@ export default function ChartsPage() {
|
||||
/>
|
||||
<div className="grid flex-1 gap-12">
|
||||
<h2 className="sr-only">Examples</h2>
|
||||
<div className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
|
||||
<div
|
||||
id="examples"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
@@ -31,10 +35,7 @@ export default function ChartsPage() {
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<div className="hidden gap-4 md:grid">
|
||||
<ChartsNav />
|
||||
<Separator />
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="area-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
@@ -259,8 +260,41 @@ export default function ChartsPage() {
|
||||
<Charts.ChartRadialStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="tooltip"
|
||||
className="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-tooltip-default">
|
||||
<Charts.ChartTooltipDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-indicator-line">
|
||||
<Charts.ChartTooltipIndicatorLine />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-indicator-none">
|
||||
<Charts.ChartTooltipIndicatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-custom">
|
||||
<Charts.ChartTooltipLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-formatter">
|
||||
<Charts.ChartTooltipLabelFormatter />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-none">
|
||||
<Charts.ChartTooltipLabelNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-formatter">
|
||||
<Charts.ChartTooltipFormatter />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-icons">
|
||||
<Charts.ChartTooltipIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-advanced">
|
||||
<Charts.ChartTooltipAdvanced />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
BarChartBig,
|
||||
Hexagon,
|
||||
LineChart,
|
||||
MousePointer2,
|
||||
PieChart,
|
||||
Radar,
|
||||
} from "lucide-react"
|
||||
@@ -24,13 +25,7 @@ export function ChartToolbar({
|
||||
return (
|
||||
<div className={cn("flex items-center gap-2", className)}>
|
||||
<div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
|
||||
{chart.subcategory === "Line" && <LineChart />}
|
||||
{chart.subcategory === "Bar" && <BarChartBig />}
|
||||
{chart.subcategory === "Pie" && <PieChart />}
|
||||
{chart.subcategory === "Area" && <AreaChart />}
|
||||
{chart.subcategory === "Radar" && <Hexagon />}
|
||||
{chart.subcategory === "Radial" && <Radar />}
|
||||
{chart.subcategory} Chart
|
||||
<ChartTitle chart={chart} />
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2 [&>form]:flex">
|
||||
<BlockCopyButton
|
||||
@@ -45,3 +40,70 @@ export function ChartToolbar({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ChartTitle({ chart }: { chart: Block }) {
|
||||
const { subcategory } = chart
|
||||
|
||||
if (!subcategory) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (subcategory === "Line") {
|
||||
return (
|
||||
<>
|
||||
<LineChart /> Chart
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (subcategory === "Bar") {
|
||||
return (
|
||||
<>
|
||||
<BarChartBig /> Chart
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (subcategory === "Pie") {
|
||||
return (
|
||||
<>
|
||||
<PieChart /> Chart
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (subcategory === "Area") {
|
||||
return (
|
||||
<>
|
||||
<AreaChart /> Chart
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (subcategory === "Radar") {
|
||||
return (
|
||||
<>
|
||||
<Hexagon /> Chart
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (subcategory === "Radial") {
|
||||
return (
|
||||
<>
|
||||
<Radar /> Chart
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (subcategory === "Tooltip") {
|
||||
return (
|
||||
<>
|
||||
<MousePointer2 />
|
||||
Tooltip
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return subcategory
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
|
||||
|
||||
const examples = [
|
||||
const links = [
|
||||
{
|
||||
name: "Area Chart",
|
||||
href: "/charts#area-chart",
|
||||
@@ -31,6 +31,10 @@ const examples = [
|
||||
name: "Radial Chart",
|
||||
href: "/charts#radial-chart",
|
||||
},
|
||||
{
|
||||
name: "Tooltip",
|
||||
href: "/charts#tooltip",
|
||||
},
|
||||
]
|
||||
|
||||
export function ChartsNav({
|
||||
@@ -40,33 +44,25 @@ export function ChartsNav({
|
||||
const pathname = usePathname()
|
||||
|
||||
return (
|
||||
<div className="relative px-1 pb-4 md:px-0 md:pb-0">
|
||||
<ScrollArea className="max-w-[600px] lg:max-w-none">
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-2 sm:items-center md:flex-row",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{examples.map((example, index) => (
|
||||
<Link
|
||||
href={example.href}
|
||||
key={example.href}
|
||||
className={cn(
|
||||
"flex h-7 rounded-full px-4 text-left text-sm transition-colors hover:text-primary sm:items-center sm:justify-center sm:text-center",
|
||||
pathname?.startsWith(example.href) ||
|
||||
(index === 0 && pathname === "/")
|
||||
? "bg-muted font-medium text-primary"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{example.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" className="invisible" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<ScrollArea className="max-w-[600px] lg:max-w-none">
|
||||
<div className={cn("flex items-center", className)} {...props}>
|
||||
{links.map((example, index) => (
|
||||
<Link
|
||||
href={example.href}
|
||||
key={example.href}
|
||||
className={cn(
|
||||
"flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
|
||||
pathname?.startsWith(example.href) ||
|
||||
(index === 0 && pathname === "/")
|
||||
? "bg-muted font-medium text-primary"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{example.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" className="invisible" />
|
||||
</ScrollArea>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -500,4 +500,76 @@ export const charts: Registry = [
|
||||
category: "Charts",
|
||||
subcategory: "Radial",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-default",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-default.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-indicator-line",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-indicator-line.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-indicator-none",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-indicator-none.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-label-none",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-label-none.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-label-custom",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-label-custom.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-label-formatter",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-label-formatter.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-formatter",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-formatter.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-icons",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-icons.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
{
|
||||
name: "chart-tooltip-advanced",
|
||||
type: "components:block",
|
||||
registryDependencies: ["card", "chart"],
|
||||
files: ["block/chart-tooltip-advanced.tsx"],
|
||||
category: "Charts",
|
||||
subcategory: "Tooltip",
|
||||
},
|
||||
]
|
||||
|
||||
123
apps/www/registry/default/block/chart-tooltip-advanced.tsx
Normal file
123
apps/www/registry/default/block/chart-tooltip-advanced.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Advanced</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom formatter and total.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
className="w-[180px]"
|
||||
formatter={(value, name, item, index) => (
|
||||
<>
|
||||
<div
|
||||
className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
|
||||
style={
|
||||
{
|
||||
"--color-bg": `var(--color-${name})`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
{/* Add this after the last item */}
|
||||
{index === 1 && (
|
||||
<div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
|
||||
Total
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{item.payload.running + item.payload.swimming}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
86
apps/www/registry/default/block/chart-tooltip-default.tsx
Normal file
86
apps/www/registry/default/block/chart-tooltip-default.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Default</CardTitle>
|
||||
<CardDescription>
|
||||
Default tooltip with ChartTooltipContent.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
100
apps/www/registry/default/block/chart-tooltip-formatter.tsx
Normal file
100
apps/www/registry/default/block/chart-tooltip-formatter.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with custom formatter .</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
formatter={(value, name) => (
|
||||
<div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
87
apps/www/registry/default/block/chart-tooltip-icons.tsx
Normal file
87
apps/www/registry/default/block/chart-tooltip-icons.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client"
|
||||
|
||||
import { Footprints, Waves } from "lucide-react"
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
icon: Footprints,
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
icon: Waves,
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Icons</CardTitle>
|
||||
<CardDescription>Tooltip with icons.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Line Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with line indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with no indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
activities: {
|
||||
label: "Activities",
|
||||
},
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Custom label</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom label from chartConfig.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent labelKey="activities" indicator="line" />
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Label Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with label formatter.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
84
apps/www/registry/default/block/chart-tooltip-label-none.tsx
Normal file
84
apps/www/registry/default/block/chart-tooltip-label-none.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Label</CardTitle>
|
||||
<CardDescription>Tooltip with no label.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-0">
|
||||
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
@@ -78,16 +78,8 @@ export default function Component() {
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
fillOpacity={0.6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-03" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card className="flex flex-col" x-chunk="charts-01-chunk-1">
|
||||
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
<CardDescription>Resting HR</CardDescription>
|
||||
|
||||
@@ -13,7 +13,7 @@ import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
@@ -13,7 +13,7 @@ import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -81,14 +81,8 @@ export default function Component() {
|
||||
fill="var(--color-steps)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-07" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Separator } from "@/registry/default/ui/separator"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
|
||||
@@ -7,7 +7,7 @@ import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-5">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
|
||||
<CardContent className="flex gap-4 p-4">
|
||||
<div className="grid items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
|
||||
@@ -13,7 +13,7 @@ import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -80,14 +80,8 @@ export default function Component() {
|
||||
fill="var(--color-calories)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-07" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-7">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
|
||||
@@ -42,16 +42,12 @@ export const containerClassName = "min-h-screen py-12"
|
||||
|
||||
export default function Charts() {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--gap": "1.4rem",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-[--gap] p-6 sm:flex-row sm:p-8"
|
||||
>
|
||||
<div className="grid w-full gap-[--gap] sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card x-chunk="A bar chart showing the number of steps you have walked in the past 7 days.">
|
||||
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
|
||||
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card
|
||||
x-chunk="A bar chart showing the number of steps you have walked in the past 7 days."
|
||||
className="lg:max-w-md"
|
||||
>
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
@@ -111,18 +107,8 @@ export default function Charts() {
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
fillOpacity={0.6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -189,7 +175,7 @@ export default function Charts() {
|
||||
</Card>
|
||||
<Card
|
||||
x-chunk="A line chart showing the resting heart rate for the past 7 days."
|
||||
className="flex flex-col"
|
||||
className="flex flex-col lg:max-w-md"
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
@@ -310,8 +296,11 @@ export default function Charts() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap] lg:max-w-[20rem]">
|
||||
<Card x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year.">
|
||||
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
|
||||
<Card
|
||||
x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -423,7 +412,10 @@ export default function Charts() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing the walking and running distance for the past 7 days.">
|
||||
<Card
|
||||
x-chunk="A bar chart showing the walking and running distance for the past 7 days."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -491,16 +483,8 @@ export default function Charts() {
|
||||
fill="var(--color-steps)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -513,7 +497,10 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing move, exercise, and stand progress.">
|
||||
<Card
|
||||
x-chunk="A bar chart showing move, exercise, and stand progress."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
@@ -619,8 +606,11 @@ export default function Charts() {
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap]">
|
||||
<Card x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing.">
|
||||
<div className="grid w-full flex-1 gap-6">
|
||||
<Card
|
||||
x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardContent className="flex gap-4 p-4">
|
||||
<div className="grid items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
@@ -708,7 +698,10 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing active energy in the past 7 days.">
|
||||
<Card
|
||||
x-chunk="A bar chart showing active energy in the past 7 days."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -775,16 +768,8 @@ export default function Charts() {
|
||||
fill="var(--color-calories)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -797,7 +782,10 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="An area chart showing the time spent in bed for the past 7 days.">
|
||||
<Card
|
||||
x-chunk="An area chart showing the time spent in bed for the past 7 days."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
|
||||
@@ -194,7 +194,7 @@ const ChartTooltipContent = React.forwardRef<
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center"
|
||||
)}
|
||||
>
|
||||
|
||||
123
apps/www/registry/new-york/block/chart-tooltip-advanced.tsx
Normal file
123
apps/www/registry/new-york/block/chart-tooltip-advanced.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Advanced</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom formatter and total.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
className="w-[180px]"
|
||||
formatter={(value, name, item, index) => (
|
||||
<>
|
||||
<div
|
||||
className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
|
||||
style={
|
||||
{
|
||||
"--color-bg": `var(--color-${name})`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
{/* Add this after the last item */}
|
||||
{index === 1 && (
|
||||
<div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
|
||||
Total
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{item.payload.running + item.payload.swimming}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
86
apps/www/registry/new-york/block/chart-tooltip-default.tsx
Normal file
86
apps/www/registry/new-york/block/chart-tooltip-default.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Default</CardTitle>
|
||||
<CardDescription>
|
||||
Default tooltip with ChartTooltipContent.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
100
apps/www/registry/new-york/block/chart-tooltip-formatter.tsx
Normal file
100
apps/www/registry/new-york/block/chart-tooltip-formatter.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with custom formatter .</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
formatter={(value, name) => (
|
||||
<div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
|
||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
||||
name}
|
||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
||||
{value}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
87
apps/www/registry/new-york/block/chart-tooltip-icons.tsx
Normal file
87
apps/www/registry/new-york/block/chart-tooltip-icons.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client"
|
||||
|
||||
import { Footprints, Waves } from "lucide-react"
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
icon: Footprints,
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
icon: Waves,
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Icons</CardTitle>
|
||||
<CardDescription>Tooltip with icons.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Line Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with line indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Indicator</CardTitle>
|
||||
<CardDescription>Tooltip with no indicator.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
activities: {
|
||||
label: "Activities",
|
||||
},
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Custom label</CardTitle>
|
||||
<CardDescription>
|
||||
Tooltip with custom label from chartConfig.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent labelKey="activities" indicator="line" />
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - Label Formatter</CardTitle>
|
||||
<CardDescription>Tooltip with label formatter.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export const description = "A stacked bar chart with a legend"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
running: {
|
||||
label: "Running",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
swimming: {
|
||||
label: "Swimming",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tooltip - No Label</CardTitle>
|
||||
<CardDescription>Tooltip with no label.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="running"
|
||||
stackId="a"
|
||||
fill="var(--color-running)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="swimming"
|
||||
stackId="a"
|
||||
fill="var(--color-swimming)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent hideIndicator hideLabel />}
|
||||
cursor={false}
|
||||
defaultIndex={1}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -9,16 +9,16 @@ import {
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
} from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-0">
|
||||
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
@@ -78,16 +78,8 @@ export default function Component() {
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
fillOpacity={0.6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-03" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
|
||||
@@ -8,16 +8,16 @@ import {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
} from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card className="flex flex-col" x-chunk="charts-01-chunk-1">
|
||||
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
<CardDescription>Resting HR</CardDescription>
|
||||
|
||||
@@ -8,12 +8,12 @@ import {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york/ui/chart"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
@@ -8,12 +8,12 @@ import {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york/ui/chart"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -81,14 +81,8 @@ export default function Component() {
|
||||
fill="var(--color-steps)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-07" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
|
||||
|
||||
import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york/ui/chart"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
import { Card, CardContent, CardFooter } from "@/registry/new-york//ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york//ui/chart"
|
||||
import { Separator } from "@/registry/new-york//ui/separator"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
|
||||
import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"
|
||||
|
||||
import { Card, CardContent } from "@/registry/new-york/ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york/ui/chart"
|
||||
import { Card, CardContent } from "@/registry/new-york//ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-5">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
|
||||
<CardContent className="flex gap-4 p-4">
|
||||
<div className="grid items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
|
||||
@@ -8,12 +8,12 @@ import {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york/ui/chart"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import { ChartContainer } from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -80,14 +80,8 @@ export default function Component() {
|
||||
fill="var(--color-calories)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-07" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
|
||||
@@ -8,16 +8,16 @@ import {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
} from "@/registry/new-york//ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-7">
|
||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
|
||||
@@ -26,13 +26,13 @@ import {
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
} from "@/registry/new-york//ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
} from "@/registry/new-york//ui/chart"
|
||||
import { Separator } from "@/registry/new-york//ui/separator"
|
||||
|
||||
export const description = "A collection of health charts."
|
||||
|
||||
@@ -42,16 +42,12 @@ export const containerClassName = "min-h-screen py-12"
|
||||
|
||||
export default function Charts() {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--gap": "1.4rem",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-[--gap] p-6 sm:flex-row sm:p-8"
|
||||
>
|
||||
<div className="grid w-full gap-[--gap] sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card x-chunk="A bar chart showing the number of steps you have walked in the past 7 days.">
|
||||
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
|
||||
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
||||
<Card
|
||||
x-chunk="A bar chart showing the number of steps you have walked in the past 7 days."
|
||||
className="lg:max-w-md"
|
||||
>
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
@@ -111,18 +107,8 @@ export default function Charts() {
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
fillOpacity={0.6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -189,7 +175,7 @@ export default function Charts() {
|
||||
</Card>
|
||||
<Card
|
||||
x-chunk="A line chart showing the resting heart rate for the past 7 days."
|
||||
className="flex flex-col"
|
||||
className="flex flex-col lg:max-w-md"
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
@@ -310,8 +296,11 @@ export default function Charts() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap] lg:max-w-[20rem]">
|
||||
<Card x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year.">
|
||||
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
|
||||
<Card
|
||||
x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -423,7 +412,10 @@ export default function Charts() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing the walking and running distance for the past 7 days.">
|
||||
<Card
|
||||
x-chunk="A bar chart showing the walking and running distance for the past 7 days."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -491,16 +483,8 @@ export default function Charts() {
|
||||
fill="var(--color-steps)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -513,7 +497,10 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing move, exercise, and stand progress.">
|
||||
<Card
|
||||
x-chunk="A bar chart showing move, exercise, and stand progress."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
@@ -619,8 +606,11 @@ export default function Charts() {
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap]">
|
||||
<Card x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing.">
|
||||
<div className="grid w-full flex-1 gap-6">
|
||||
<Card
|
||||
x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardContent className="flex gap-4 p-4">
|
||||
<div className="grid items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
@@ -708,7 +698,10 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing active energy in the past 7 days.">
|
||||
<Card
|
||||
x-chunk="A bar chart showing active energy in the past 7 days."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -775,16 +768,8 @@ export default function Charts() {
|
||||
fill="var(--color-calories)"
|
||||
radius={2}
|
||||
fillOpacity={0.2}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-07" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
activeIndex={6}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
@@ -797,7 +782,10 @@ export default function Charts() {
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="An area chart showing the time spent in bed for the past 7 days.">
|
||||
<Card
|
||||
x-chunk="An area chart showing the time spent in bed for the past 7 days."
|
||||
className="max-w-xs"
|
||||
>
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
|
||||
@@ -199,7 +199,7 @@ const ChartTooltipContent = React.forwardRef<
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center"
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user