mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-27 06:34:12 +00:00
more chart examples (#4304)
* feat(www): more chart 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
This commit is contained in:
shadcn
GitHub
904
apps/www/__registry__/default/block/charts-01.tsx
Normal file
904
apps/www/__registry__/default/block/charts-01.tsx
Normal file
@@ -0,0 +1,904 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Label,
|
||||
LabelList,
|
||||
Line,
|
||||
LineChart,
|
||||
PolarAngleAxis,
|
||||
RadialBar,
|
||||
RadialBarChart,
|
||||
Rectangle,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
|
||||
export const description = "A collection of health charts."
|
||||
|
||||
export const iframeHeight = "900px"
|
||||
|
||||
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">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
12,584{" "}
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
steps
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: -4,
|
||||
right: -4,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
defaultIndex={2}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideIndicator
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={1200}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
>
|
||||
<Label
|
||||
position="insideBottomLeft"
|
||||
value="Average Steps"
|
||||
offset={10}
|
||||
fill="hsl(var(--foreground))"
|
||||
/>
|
||||
<Label
|
||||
position="insideTopLeft"
|
||||
value="12,343"
|
||||
className="text-lg"
|
||||
fill="hsl(var(--foreground))"
|
||||
offset={10}
|
||||
startOffset={100}
|
||||
/>
|
||||
</ReferenceLine>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex-col items-start gap-1">
|
||||
<CardDescription>
|
||||
Over the past 7 days, you have walked{" "}
|
||||
<span className="font-medium text-foreground">53,305</span> steps.
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
You need{" "}
|
||||
<span className="font-medium text-foreground">12,584</span> more
|
||||
steps to reach your goal.
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="flex flex-col" 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>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
62
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
bpm
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div>
|
||||
<CardDescription>Variability</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
35
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
ms
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 items-center">
|
||||
<ChartContainer
|
||||
config={{
|
||||
resting: {
|
||||
label: "Resting",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 14,
|
||||
right: 14,
|
||||
top: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
resting: 72,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
resting: 35,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
resting: 52,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
resting: 70,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="4 4"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
dataKey="resting"
|
||||
type="natural"
|
||||
fill="var(--color-resting)"
|
||||
stroke="var(--color-resting)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
fill: "var(--color-resting)",
|
||||
stroke: "var(--color-resting)",
|
||||
r: 4,
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap] lg:max-w-[20rem]">
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
You're average more steps a day this year than last year.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
12,453
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024",
|
||||
steps: 12435,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="white"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
10,103
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--muted))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2023",
|
||||
steps: 10103,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="hsl(var(--muted-foreground))"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
Over the last 7 days, your distance walked and run was 12.5 miles
|
||||
per day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
||||
12.5
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
miles/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[72px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="h-[140px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
label: "8/12 hr",
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
label: "46/60 min",
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
label: "245/360 kcal",
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
barSize={32}
|
||||
barGap={2}
|
||||
>
|
||||
<XAxis type="number" dataKey="value" hide />
|
||||
<YAxis
|
||||
dataKey="activity"
|
||||
type="category"
|
||||
tickLine={false}
|
||||
tickMargin={4}
|
||||
axisLine={false}
|
||||
className="capitalize"
|
||||
/>
|
||||
<Bar dataKey="value" radius={5}>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="label"
|
||||
fill="white"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-row border-t p-4">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
562
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
73
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
14
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap]">
|
||||
<Card 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">
|
||||
<div className="text-sm text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
562/600
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
73/120
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
8/12
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
||||
>
|
||||
<RadialBarChart
|
||||
margin={{
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: -10,
|
||||
bottom: -10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
innerRadius="20%"
|
||||
barSize={24}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<PolarAngleAxis
|
||||
type="number"
|
||||
domain={[0, 100]}
|
||||
dataKey="value"
|
||||
tick={false}
|
||||
/>
|
||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
You're burning an average of 754 calories per day. Good job!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
||||
1,254
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
calories: {
|
||||
label: "Calories",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[64px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
calories: 354,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
calories: 514,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
calories: 345,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
calories: 734,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
calories: 645,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
calories: 456,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
calories: 345,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="calories"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card 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">
|
||||
8
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
35
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<ChartContainer
|
||||
config={{
|
||||
time: {
|
||||
label: "Time",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
time: 8.5,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
time: 7.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
time: 6.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
time: 5.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
time: 7.0,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="date" hide />
|
||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
||||
<defs>
|
||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
dataKey="time"
|
||||
type="natural"
|
||||
fill="url(#fillTime)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-time)"
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
formatter={(value) => (
|
||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
||||
Time in bed
|
||||
<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">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2150,6 +2150,81 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"charts-01": {
|
||||
name: "charts-01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["chart"],
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01")),
|
||||
source: "__registry__/default/block/charts-01.tsx",
|
||||
files: ["registry/default/block/charts-01.tsx"],
|
||||
category: "Application",
|
||||
subcategory: "Charts",
|
||||
chunks: [{
|
||||
name: "charts-01-chunk-0",
|
||||
description: "A bar chart showing the number of steps you have walked in the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-0")),
|
||||
file: "registry/default/block/charts-01-chunk-0.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-1",
|
||||
description: "A line chart showing the resting heart rate for the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-1")),
|
||||
file: "registry/default/block/charts-01-chunk-1.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-2",
|
||||
description: "Two horizontal bar charts showing total steps taken during the current year and last year.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-2")),
|
||||
file: "registry/default/block/charts-01-chunk-2.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-3",
|
||||
description: "A bar chart showing the walking and running distance for the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-3")),
|
||||
file: "registry/default/block/charts-01-chunk-3.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-4",
|
||||
description: "A bar chart showing move, exercise, and stand progress.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-4")),
|
||||
file: "registry/default/block/charts-01-chunk-4.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-5",
|
||||
description: "A radial bar chart showing the percentage of time spent moving, exercising, and standing.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-5")),
|
||||
file: "registry/default/block/charts-01-chunk-5.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-6",
|
||||
description: "A bar chart showing active energy in the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-6")),
|
||||
file: "registry/default/block/charts-01-chunk-6.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-7",
|
||||
description: "An area chart showing the time spent in bed for the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-7")),
|
||||
file: "registry/default/block/charts-01-chunk-7.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
}]
|
||||
},
|
||||
"dashboard-05": {
|
||||
name: "dashboard-05",
|
||||
type: "components:block",
|
||||
@@ -5288,6 +5363,81 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"charts-01": {
|
||||
name: "charts-01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["chart"],
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01")),
|
||||
source: "__registry__/new-york/block/charts-01.tsx",
|
||||
files: ["registry/new-york/block/charts-01.tsx"],
|
||||
category: "Application",
|
||||
subcategory: "Charts",
|
||||
chunks: [{
|
||||
name: "charts-01-chunk-0",
|
||||
description: "A bar chart showing the number of steps you have walked in the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-0")),
|
||||
file: "registry/new-york/block/charts-01-chunk-0.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-1",
|
||||
description: "A line chart showing the resting heart rate for the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-1")),
|
||||
file: "registry/new-york/block/charts-01-chunk-1.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-2",
|
||||
description: "Two horizontal bar charts showing total steps taken during the current year and last year.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-2")),
|
||||
file: "registry/new-york/block/charts-01-chunk-2.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-3",
|
||||
description: "A bar chart showing the walking and running distance for the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-3")),
|
||||
file: "registry/new-york/block/charts-01-chunk-3.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-4",
|
||||
description: "A bar chart showing move, exercise, and stand progress.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-4")),
|
||||
file: "registry/new-york/block/charts-01-chunk-4.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-5",
|
||||
description: "A radial bar chart showing the percentage of time spent moving, exercising, and standing.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-5")),
|
||||
file: "registry/new-york/block/charts-01-chunk-5.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-6",
|
||||
description: "A bar chart showing active energy in the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-6")),
|
||||
file: "registry/new-york/block/charts-01-chunk-6.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
},{
|
||||
name: "charts-01-chunk-7",
|
||||
description: "An area chart showing the time spent in bed for the past 7 days.",
|
||||
component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-7")),
|
||||
file: "registry/new-york/block/charts-01-chunk-7.tsx",
|
||||
container: {
|
||||
className: "undefined"
|
||||
}
|
||||
}]
|
||||
},
|
||||
"dashboard-05": {
|
||||
name: "dashboard-05",
|
||||
type: "components:block",
|
||||
|
||||
904
apps/www/__registry__/new-york/block/charts-01.tsx
Normal file
904
apps/www/__registry__/new-york/block/charts-01.tsx
Normal file
@@ -0,0 +1,904 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Label,
|
||||
LabelList,
|
||||
Line,
|
||||
LineChart,
|
||||
PolarAngleAxis,
|
||||
RadialBar,
|
||||
RadialBarChart,
|
||||
Rectangle,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
|
||||
export const description = "A collection of health charts."
|
||||
|
||||
export const iframeHeight = "900px"
|
||||
|
||||
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">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
12,584{" "}
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
steps
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: -4,
|
||||
right: -4,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
defaultIndex={2}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideIndicator
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={1200}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
>
|
||||
<Label
|
||||
position="insideBottomLeft"
|
||||
value="Average Steps"
|
||||
offset={10}
|
||||
fill="hsl(var(--foreground))"
|
||||
/>
|
||||
<Label
|
||||
position="insideTopLeft"
|
||||
value="12,343"
|
||||
className="text-lg"
|
||||
fill="hsl(var(--foreground))"
|
||||
offset={10}
|
||||
startOffset={100}
|
||||
/>
|
||||
</ReferenceLine>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex-col items-start gap-1">
|
||||
<CardDescription>
|
||||
Over the past 7 days, you have walked{" "}
|
||||
<span className="font-medium text-foreground">53,305</span> steps.
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
You need{" "}
|
||||
<span className="font-medium text-foreground">12,584</span> more
|
||||
steps to reach your goal.
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="flex flex-col" 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>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
62
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
bpm
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div>
|
||||
<CardDescription>Variability</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
35
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
ms
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 items-center">
|
||||
<ChartContainer
|
||||
config={{
|
||||
resting: {
|
||||
label: "Resting",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 14,
|
||||
right: 14,
|
||||
top: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
resting: 72,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
resting: 35,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
resting: 52,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
resting: 70,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="4 4"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
dataKey="resting"
|
||||
type="natural"
|
||||
fill="var(--color-resting)"
|
||||
stroke="var(--color-resting)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
fill: "var(--color-resting)",
|
||||
stroke: "var(--color-resting)",
|
||||
r: 4,
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap] lg:max-w-[20rem]">
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
You're average more steps a day this year than last year.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
12,453
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024",
|
||||
steps: 12435,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="white"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
10,103
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--muted))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2023",
|
||||
steps: 10103,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="hsl(var(--muted-foreground))"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
Over the last 7 days, your distance walked and run was 12.5 miles
|
||||
per day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
||||
12.5
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
miles/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[72px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="h-[140px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
label: "8/12 hr",
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
label: "46/60 min",
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
label: "245/360 kcal",
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
barSize={32}
|
||||
barGap={2}
|
||||
>
|
||||
<XAxis type="number" dataKey="value" hide />
|
||||
<YAxis
|
||||
dataKey="activity"
|
||||
type="category"
|
||||
tickLine={false}
|
||||
tickMargin={4}
|
||||
axisLine={false}
|
||||
className="capitalize"
|
||||
/>
|
||||
<Bar dataKey="value" radius={5}>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="label"
|
||||
fill="white"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-row border-t p-4">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
562
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
73
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
14
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid w-full flex-1 gap-[--gap]">
|
||||
<Card 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">
|
||||
<div className="text-sm text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
562/600
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
73/120
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
8/12
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
||||
>
|
||||
<RadialBarChart
|
||||
margin={{
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: -10,
|
||||
bottom: -10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
innerRadius="20%"
|
||||
barSize={24}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<PolarAngleAxis
|
||||
type="number"
|
||||
domain={[0, 100]}
|
||||
dataKey="value"
|
||||
tick={false}
|
||||
/>
|
||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
You're burning an average of 754 calories per day. Good job!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
||||
1,254
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
calories: {
|
||||
label: "Calories",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[64px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
calories: 354,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
calories: 514,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
calories: 345,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
calories: 734,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
calories: 645,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
calories: 456,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
calories: 345,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="calories"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card 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">
|
||||
8
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
35
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<ChartContainer
|
||||
config={{
|
||||
time: {
|
||||
label: "Time",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
time: 8.5,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
time: 7.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
time: 6.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
time: 5.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
time: 7.0,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="date" hide />
|
||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
||||
<defs>
|
||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
dataKey="time"
|
||||
type="natural"
|
||||
fill="url(#fillTime)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-time)"
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
formatter={(value) => (
|
||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
||||
Time in bed
|
||||
<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">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -287,7 +287,7 @@ export default function Dashboard() {
|
||||
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>Your Orders</CardTitle>
|
||||
<CardDescription className="max-w-lg text-balance leading-relaxed">
|
||||
<CardDescription className="text-balance max-w-lg leading-relaxed">
|
||||
Introducing Our Dynamic Orders Dashboard for Seamless
|
||||
Management and Insightful Analysis.
|
||||
</CardDescription>
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function BlocksLayout({
|
||||
</PageHeaderDescription>
|
||||
<PageActions>
|
||||
<Button asChild size="sm">
|
||||
<a href="#blocks">Browse</a>
|
||||
<a href="#blocks">Browse Blocks</a>
|
||||
</Button>
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<a
|
||||
@@ -42,7 +42,7 @@ export default function BlocksLayout({
|
||||
</Button>
|
||||
</PageActions>
|
||||
</PageHeader>
|
||||
<section id="blocks" className="grid scroll-mt-24 gap-24 lg:gap-48">
|
||||
<section id="blocks" className="scroll-mt-24">
|
||||
{children}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,29 @@
|
||||
import { getAllBlockIds } from "@/lib/blocks"
|
||||
import { THEMES } from "@/lib/themes"
|
||||
import { BlockDisplay } from "@/components/block-display"
|
||||
import { ThemesSwitcher } from "@/components/themes-selector"
|
||||
|
||||
export default async function BlocksPage() {
|
||||
const blocks = (await getAllBlockIds()).filter(
|
||||
(name) => !name.startsWith("chart")
|
||||
(name) => !name.startsWith("chart-")
|
||||
)
|
||||
|
||||
return blocks.map((name, index) => (
|
||||
<BlockDisplay key={`${name}-${index}`} name={name} />
|
||||
))
|
||||
// These themes are not compatible with the blocks yet.
|
||||
const themes = THEMES.filter(
|
||||
(theme) => !["default-daylight", "default-midnight"].includes(theme.id)
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="gap-3 md:flex md:flex-row-reverse md:items-start">
|
||||
<ThemesSwitcher
|
||||
themes={themes}
|
||||
className="fixed inset-x-0 bottom-0 z-40 mt-12 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
|
||||
/>
|
||||
<div className="grid flex-1 gap-24 lg:gap-48">
|
||||
{blocks.map((name, index) => (
|
||||
<BlockDisplay key={`${name}-${index}`} name={name} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,278 +1,266 @@
|
||||
import { SWRConfig } from "swr"
|
||||
|
||||
import { getChartThemes } from "@/lib/chart-themes"
|
||||
import { THEMES } from "@/lib/themes"
|
||||
import { ChartDisplay } from "@/components/chart-display"
|
||||
import { ChartsNav } from "@/components/charts-nav"
|
||||
import { ChartsThemeSwitcher } from "@/components/charts-theme-switcher"
|
||||
import { ThemesSwitcher } from "@/components/themes-selector"
|
||||
import { ThemesStyle } from "@/components/themes-styles"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
import * as Charts from "@/app/(app)/charts/charts"
|
||||
|
||||
const chartThemes = getChartThemes()
|
||||
|
||||
export default function ChartsPage() {
|
||||
return (
|
||||
<SWRConfig
|
||||
value={{
|
||||
fallback: {
|
||||
"chart:config": {
|
||||
theme: chartThemes[0],
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div className="gap-6 md:flex md:flex-row-reverse md:items-start">
|
||||
<ChartsThemeSwitcher
|
||||
themes={chartThemes}
|
||||
className="fixed inset-x-0 bottom-0 z-40 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
|
||||
/>
|
||||
<div className="grid flex-1 gap-12">
|
||||
<h2 className="sr-only">Examples</h2>
|
||||
<div 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-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay
|
||||
name="chart-pie-donut-text"
|
||||
className="[&_[data-chart]]:xl:max-h-[243px]"
|
||||
>
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<div className="hidden gap-4 md:grid">
|
||||
<ChartsNav />
|
||||
<Separator />
|
||||
</div>
|
||||
<div
|
||||
id="area-chart"
|
||||
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"
|
||||
<>
|
||||
<ThemesStyle />
|
||||
<div className="gap-6 md:flex md:flex-row-reverse md:items-start">
|
||||
<ThemesSwitcher
|
||||
themes={THEMES}
|
||||
className="fixed inset-x-0 bottom-0 z-40 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
|
||||
/>
|
||||
<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">
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay
|
||||
name="chart-pie-donut-text"
|
||||
className="[&_[data-chart]]:xl:max-h-[243px]"
|
||||
>
|
||||
<ChartDisplay name="chart-area-default">
|
||||
<Charts.ChartAreaDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-linear">
|
||||
<Charts.ChartAreaLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-step">
|
||||
<Charts.ChartAreaStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked-expand">
|
||||
<Charts.ChartAreaStackedExpand />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-legend">
|
||||
<Charts.ChartAreaLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-icons">
|
||||
<Charts.ChartAreaIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-gradient">
|
||||
<Charts.ChartAreaGradient />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-axes">
|
||||
<Charts.ChartAreaAxes />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-area-interactive">
|
||||
<Charts.ChartAreaInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<div className="hidden gap-4 md:grid">
|
||||
<ChartsNav />
|
||||
<Separator />
|
||||
<div
|
||||
id="bar-chart"
|
||||
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-bar-default">
|
||||
<Charts.ChartBarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-horizontal">
|
||||
<Charts.ChartBarHorizontal />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label">
|
||||
<Charts.ChartBarLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label-custom">
|
||||
<Charts.ChartBarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-mixed">
|
||||
<Charts.ChartBarMixed />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-stacked">
|
||||
<Charts.ChartBarStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-active">
|
||||
<Charts.ChartBarActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-negative">
|
||||
<Charts.ChartBarNegative />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-bar-interactive">
|
||||
<Charts.ChartBarInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="line-chart"
|
||||
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-line-default">
|
||||
<Charts.ChartLineDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-linear">
|
||||
<Charts.ChartLineLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-step">
|
||||
<Charts.ChartLineStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-multiple">
|
||||
<Charts.ChartLineMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots">
|
||||
<Charts.ChartLineDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-custom">
|
||||
<Charts.ChartLineDotsCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-colors">
|
||||
<Charts.ChartLineDotsColors />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label">
|
||||
<Charts.ChartLineLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label-custom">
|
||||
<Charts.ChartLineLabelCustom />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-line-interactive">
|
||||
<Charts.ChartLineInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="pie-chart"
|
||||
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-pie-simple">
|
||||
<Charts.ChartPieSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-separator-none">
|
||||
<Charts.ChartPieSeparatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label">
|
||||
<Charts.ChartPieLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-custom">
|
||||
<Charts.ChartPieLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-list">
|
||||
<Charts.ChartPieLabelList />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-legend">
|
||||
<Charts.ChartPieLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut">
|
||||
<Charts.ChartPieDonut />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-active">
|
||||
<Charts.ChartPieDonutActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-text">
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-stacked">
|
||||
<Charts.ChartPieStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-interactive">
|
||||
<Charts.ChartPieInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radar-chart"
|
||||
className="chart-wrapper grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radar-default">
|
||||
<Charts.ChartRadarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-dots">
|
||||
<Charts.ChartRadarDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-multiple">
|
||||
<Charts.ChartRadarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-lines-only">
|
||||
<Charts.ChartRadarLinesOnly />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-label-custom">
|
||||
<Charts.ChartRadarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-radius">
|
||||
<Charts.ChartRadarRadius />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-custom">
|
||||
<Charts.ChartRadarGridCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-fill">
|
||||
<Charts.ChartRadarGridFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-none">
|
||||
<Charts.ChartRadarGridNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle">
|
||||
<Charts.ChartRadarGridCircle />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-no-lines">
|
||||
<Charts.ChartRadarGridCircleNoLines />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-fill">
|
||||
<Charts.ChartRadarGridCircleFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-legend">
|
||||
<Charts.ChartRadarLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-icons">
|
||||
<Charts.ChartRadarIcons />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radial-chart"
|
||||
className="chart-wrapper grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radial-simple">
|
||||
<Charts.ChartRadialSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-label">
|
||||
<Charts.ChartRadialLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-grid">
|
||||
<Charts.ChartRadialGrid />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-text">
|
||||
<Charts.ChartRadialText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-shape">
|
||||
<Charts.ChartRadialShape />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-stacked">
|
||||
<Charts.ChartRadialStacked />
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<ChartDisplay name="chart-area-default">
|
||||
<Charts.ChartAreaDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-linear">
|
||||
<Charts.ChartAreaLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-step">
|
||||
<Charts.ChartAreaStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked-expand">
|
||||
<Charts.ChartAreaStackedExpand />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-legend">
|
||||
<Charts.ChartAreaLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-icons">
|
||||
<Charts.ChartAreaIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-gradient">
|
||||
<Charts.ChartAreaGradient />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-axes">
|
||||
<Charts.ChartAreaAxes />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-area-interactive">
|
||||
<Charts.ChartAreaInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="bar-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"
|
||||
>
|
||||
<ChartDisplay name="chart-bar-default">
|
||||
<Charts.ChartBarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-horizontal">
|
||||
<Charts.ChartBarHorizontal />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label">
|
||||
<Charts.ChartBarLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label-custom">
|
||||
<Charts.ChartBarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-mixed">
|
||||
<Charts.ChartBarMixed />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-stacked">
|
||||
<Charts.ChartBarStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-active">
|
||||
<Charts.ChartBarActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-negative">
|
||||
<Charts.ChartBarNegative />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-bar-interactive">
|
||||
<Charts.ChartBarInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="line-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"
|
||||
>
|
||||
<ChartDisplay name="chart-line-default">
|
||||
<Charts.ChartLineDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-linear">
|
||||
<Charts.ChartLineLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-step">
|
||||
<Charts.ChartLineStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-multiple">
|
||||
<Charts.ChartLineMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots">
|
||||
<Charts.ChartLineDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-custom">
|
||||
<Charts.ChartLineDotsCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-colors">
|
||||
<Charts.ChartLineDotsColors />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label">
|
||||
<Charts.ChartLineLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label-custom">
|
||||
<Charts.ChartLineLabelCustom />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-line-interactive">
|
||||
<Charts.ChartLineInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="pie-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"
|
||||
>
|
||||
<ChartDisplay name="chart-pie-simple">
|
||||
<Charts.ChartPieSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-separator-none">
|
||||
<Charts.ChartPieSeparatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label">
|
||||
<Charts.ChartPieLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-custom">
|
||||
<Charts.ChartPieLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-list">
|
||||
<Charts.ChartPieLabelList />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-legend">
|
||||
<Charts.ChartPieLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut">
|
||||
<Charts.ChartPieDonut />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-active">
|
||||
<Charts.ChartPieDonutActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-text">
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-stacked">
|
||||
<Charts.ChartPieStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-interactive">
|
||||
<Charts.ChartPieInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radar-chart"
|
||||
className="grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radar-default">
|
||||
<Charts.ChartRadarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-dots">
|
||||
<Charts.ChartRadarDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-multiple">
|
||||
<Charts.ChartRadarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-lines-only">
|
||||
<Charts.ChartRadarLinesOnly />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-label-custom">
|
||||
<Charts.ChartRadarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-radius">
|
||||
<Charts.ChartRadarRadius />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-custom">
|
||||
<Charts.ChartRadarGridCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-fill">
|
||||
<Charts.ChartRadarGridFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-none">
|
||||
<Charts.ChartRadarGridNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle">
|
||||
<Charts.ChartRadarGridCircle />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-no-lines">
|
||||
<Charts.ChartRadarGridCircleNoLines />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-fill">
|
||||
<Charts.ChartRadarGridCircleFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-legend">
|
||||
<Charts.ChartRadarLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-icons">
|
||||
<Charts.ChartRadarIcons />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radial-chart"
|
||||
className="grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radial-simple">
|
||||
<Charts.ChartRadialSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-label">
|
||||
<Charts.ChartRadialLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-grid">
|
||||
<Charts.ChartRadialGrid />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-text">
|
||||
<Charts.ChartRadialText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-shape">
|
||||
<Charts.ChartRadialShape />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-stacked">
|
||||
<Charts.ChartRadialStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SWRConfig>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,14 +4,12 @@ import { notFound } from "next/navigation"
|
||||
import { siteConfig } from "@/config/site"
|
||||
import { getAllBlockIds, getBlock } from "@/lib/blocks"
|
||||
import { absoluteUrl, cn } from "@/lib/utils"
|
||||
import { BlockChunk } from "@/components/block-chunk"
|
||||
import { BlockWrapper } from "@/components/block-wrapper"
|
||||
import { ThemesStyle } from "@/components/themes-styles"
|
||||
import { Style, styles } from "@/registry/styles"
|
||||
|
||||
import "@/styles/mdx.css"
|
||||
import "public/registry/themes.css"
|
||||
import { AnimatePresence } from "framer-motion"
|
||||
|
||||
import { BlockChunk } from "@/components/block-chunk"
|
||||
import { BlockWrapper } from "@/components/block-wrapper"
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
@@ -89,19 +87,27 @@ export default async function BlockPage({
|
||||
block.chunks?.map((chunk) => delete chunk.component)
|
||||
|
||||
return (
|
||||
<div className={cn(block.container?.className || "", "theme-zinc")}>
|
||||
<BlockWrapper block={block}>
|
||||
<Component />
|
||||
{chunks?.map((chunk, index) => (
|
||||
<BlockChunk
|
||||
key={chunk.name}
|
||||
block={block}
|
||||
chunk={block.chunks?.[index]}
|
||||
>
|
||||
<chunk.component />
|
||||
</BlockChunk>
|
||||
))}
|
||||
</BlockWrapper>
|
||||
</div>
|
||||
<>
|
||||
<ThemesStyle />
|
||||
<div
|
||||
className={cn(
|
||||
"themes-wrapper bg-background",
|
||||
block.container?.className
|
||||
)}
|
||||
>
|
||||
<BlockWrapper block={block}>
|
||||
<Component />
|
||||
{chunks?.map((chunk, index) => (
|
||||
<BlockChunk
|
||||
key={chunk.name}
|
||||
block={block}
|
||||
chunk={block.chunks?.[index]}
|
||||
>
|
||||
<chunk.component />
|
||||
</BlockChunk>
|
||||
))}
|
||||
</BlockWrapper>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ export function BlockChunk({
|
||||
>
|
||||
<div className="relative z-30">{children}</div>
|
||||
{chunk.code && (
|
||||
<div className="absolute inset-x-0 top-0 z-20 flex px-4 py-3 opacity-0 transition-all duration-200 ease-in group-hover:-translate-y-12 group-hover:opacity-100">
|
||||
<div className="absolute inset-x-0 top-0 z-30 flex px-4 py-3 opacity-0 transition-all duration-200 ease-in group-hover:-translate-y-12 group-hover:opacity-100">
|
||||
<div className="flex w-full items-center justify-end gap-2">
|
||||
<BlockCopyButton
|
||||
event="copy_chunk_code"
|
||||
|
||||
@@ -57,7 +57,7 @@ export function BlockPreview({
|
||||
minSize={30}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="absolute inset-0 z-10 flex h-[--container-height] w-full items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<div className="absolute inset-0 z-10 flex h-[--container-height] w-full items-center justify-center gap-2 bg-background text-sm text-muted-foreground">
|
||||
<Icons.spinner className="h-4 w-4 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
@@ -69,6 +69,7 @@ export function BlockPreview({
|
||||
onLoad={() => {
|
||||
setIsLoading(false)
|
||||
}}
|
||||
allowTransparency
|
||||
/>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useChartConfig } from "@/hooks/use-chart-config"
|
||||
import { useMediaQuery } from "@/hooks/use-media-query"
|
||||
import { useThemesConfig } from "@/hooks/use-themes-config"
|
||||
import { BlockCopyButton } from "@/components/block-copy-button"
|
||||
import { V0Button } from "@/components/v0-button"
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
@@ -26,26 +26,26 @@ export function ChartCodeViewer({
|
||||
children,
|
||||
}: { chart: Block } & React.ComponentProps<"div">) {
|
||||
const [tab, setTab] = React.useState("code")
|
||||
const { chartConfig } = useChartConfig()
|
||||
const { themesConfig } = useThemesConfig()
|
||||
const isDesktop = useMediaQuery("(min-width: 768px)")
|
||||
|
||||
const themeCode = React.useMemo(() => {
|
||||
return `\
|
||||
@layer base {
|
||||
:root {
|
||||
${Object.entries(chartConfig.theme.cssVars.light)
|
||||
${Object.entries(themesConfig?.activeTheme.cssVars.light || {})
|
||||
.map(([key, value]) => ` ${key}: ${value};`)
|
||||
.join("\n")}
|
||||
}
|
||||
|
||||
.dark {
|
||||
${Object.entries(chartConfig.theme.cssVars.dark)
|
||||
${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
|
||||
.map(([key, value]) => ` ${key}: ${value};`)
|
||||
.join("\n")}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
}, [chartConfig])
|
||||
}, [themesConfig])
|
||||
|
||||
const button = (
|
||||
<Button
|
||||
@@ -135,7 +135,7 @@ ${Object.entries(chartConfig.theme.cssVars.dark)
|
||||
>
|
||||
<pre className="bg-black font-mono text-sm leading-relaxed">
|
||||
<code data-line-numbers="">
|
||||
<span className="line text-zinc-700">{`/* ${chartConfig.theme.name} */`}</span>
|
||||
<span className="line text-zinc-700">{`/* ${themesConfig?.activeTheme.name} */`}</span>
|
||||
{themeCode.split("\n").map((line, index) => (
|
||||
<span key={index} className="line">
|
||||
{line}
|
||||
|
||||
@@ -20,7 +20,7 @@ export async function ChartDisplay({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
|
||||
"themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { getChartThemes } from "@/lib/chart-themes"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useChartConfig } from "@/hooks/use-chart-config"
|
||||
import { Skeleton } from "@/registry/new-york/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/registry/new-york/ui/tooltip"
|
||||
|
||||
type Themes = ReturnType<typeof getChartThemes>
|
||||
|
||||
export function ChartsThemeSwitcher({
|
||||
themes,
|
||||
className,
|
||||
}: { themes: Themes } & React.ComponentProps<"div">) {
|
||||
const { theme } = useTheme()
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
const { chartConfig, setChartConfig } = useChartConfig()
|
||||
const activeChartTheme = chartConfig?.theme || themes[0]
|
||||
|
||||
React.useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{themes.map((theme) => (
|
||||
<div
|
||||
key={theme.id}
|
||||
className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-transparent"
|
||||
>
|
||||
<Skeleton className="h-6 w-6 rounded-sm" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{themes.map((chartTheme) => {
|
||||
const isActive = chartTheme.name === activeChartTheme.name
|
||||
const isDarkTheme = ["Midnight"].includes(chartTheme.name)
|
||||
const cssVars =
|
||||
mounted && theme === "dark"
|
||||
? chartTheme.cssVars.dark
|
||||
: chartTheme.cssVars.light
|
||||
return (
|
||||
<Tooltip key={chartTheme.name}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={() =>
|
||||
setChartConfig({ ...chartConfig, theme: chartTheme })
|
||||
}
|
||||
className={cn(
|
||||
"group flex h-10 w-10 items-center justify-center rounded-lg border-2",
|
||||
isActive ? "border-[--color-1]" : "border-transparent",
|
||||
mounted && isDarkTheme && theme !== "dark"
|
||||
? "invert-[1]"
|
||||
: ""
|
||||
)}
|
||||
style={
|
||||
{
|
||||
...cssVars,
|
||||
"--color-1": "hsl(var(--chart-1))",
|
||||
"--color-2": "hsl(var(--chart-2))",
|
||||
"--color-3": "hsl(var(--chart-3))",
|
||||
"--color-4": "hsl(var(--chart-4))",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="h-6 w-6 overflow-hidden rounded-sm">
|
||||
<div
|
||||
className={cn(
|
||||
"grid h-12 w-12 -translate-x-1/4 -translate-y-1/4 grid-cols-2 overflow-hidden rounded-md transition-all ease-in-out group-hover:rotate-45",
|
||||
isActive ? "rotate-45 group-hover:rotate-0" : "rotate-0"
|
||||
)}
|
||||
>
|
||||
<span className="flex h-6 w-6 bg-[--color-1]" />
|
||||
<span className="flex h-6 w-6 bg-[--color-2]" />
|
||||
<span className="flex h-6 w-6 bg-[--color-3]" />
|
||||
<span className="flex h-6 w-6 bg-[--color-4]" />
|
||||
<span className="sr-only">{chartTheme.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left" className="bg-black text-white">
|
||||
{chartTheme.name}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<style>
|
||||
{`
|
||||
.chart-wrapper,
|
||||
[data-chart] {
|
||||
${Object.entries(activeChartTheme.cssVars.light)
|
||||
.map(([key, value]) => `${key}: ${value};`)
|
||||
.join("\n")}
|
||||
}
|
||||
|
||||
.dark .chart-wrapper,
|
||||
.dark [data-chart] {
|
||||
${Object.entries(activeChartTheme.cssVars.dark)
|
||||
.map(([key, value]) => `${key}: ${value};`)
|
||||
.join("\n")}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import * as React from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { DialogProps } from "@radix-ui/react-alert-dialog"
|
||||
import { type DialogProps } from "@radix-ui/react-dialog"
|
||||
import {
|
||||
CircleIcon,
|
||||
FileIcon,
|
||||
|
||||
124
apps/www/components/themes-selector.tsx
Normal file
124
apps/www/components/themes-selector.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { THEMES, Theme } from "@/lib/themes"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useMediaQuery } from "@/hooks/use-media-query"
|
||||
import { useThemesConfig } from "@/hooks/use-themes-config"
|
||||
import { Skeleton } from "@/registry/new-york/ui/skeleton"
|
||||
import {
|
||||
ToggleGroup,
|
||||
ToggleGroupItem,
|
||||
} from "@/registry/new-york/ui/toggle-group"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/registry/new-york/ui/tooltip"
|
||||
|
||||
export function ThemesSwitcher({
|
||||
themes = THEMES,
|
||||
className,
|
||||
}: React.ComponentProps<"div"> & { themes?: Theme[] }) {
|
||||
const { theme: mode } = useTheme()
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
const { themesConfig, setThemesConfig } = useThemesConfig()
|
||||
const activeTheme = themesConfig.activeTheme
|
||||
const isDesktop = useMediaQuery("(min-width: 1024px)")
|
||||
|
||||
React.useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{themes.map((theme) => (
|
||||
<div
|
||||
key={theme.id}
|
||||
className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-transparent"
|
||||
>
|
||||
<Skeleton className="h-6 w-6 rounded-sm" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={activeTheme.name}
|
||||
onValueChange={(value) => {
|
||||
const theme = themes.find((theme) => theme.name === value)
|
||||
if (!theme) {
|
||||
return
|
||||
}
|
||||
|
||||
setThemesConfig({ ...themesConfig, activeTheme: theme })
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-0.5 py-4 lg:flex-col lg:justify-start lg:gap-1",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{themes.map((theme) => {
|
||||
const isActive = theme.name === activeTheme.name
|
||||
const isDarkTheme = ["Midnight"].includes(theme.name)
|
||||
const cssVars =
|
||||
mounted && mode === "dark" ? theme.cssVars.dark : theme.cssVars.light
|
||||
|
||||
return (
|
||||
<Tooltip key={theme.name}>
|
||||
<TooltipTrigger asChild>
|
||||
<ToggleGroupItem
|
||||
value={theme.name}
|
||||
className={cn(
|
||||
"group flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border-2 border-transparent p-0 hover:bg-transparent focus-visible:bg-transparent aria-checked:border-[--color-1]",
|
||||
mounted && isDarkTheme && mode !== "dark" ? "invert-[1]" : ""
|
||||
)}
|
||||
style={
|
||||
{
|
||||
...cssVars,
|
||||
"--color-1": "hsl(var(--chart-1))",
|
||||
"--color-2": "hsl(var(--chart-2))",
|
||||
"--color-3": "hsl(var(--chart-3))",
|
||||
"--color-4": "hsl(var(--chart-4))",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="h-6 w-6 overflow-hidden rounded-sm">
|
||||
<div
|
||||
className={cn(
|
||||
"grid h-12 w-12 -translate-x-1/4 -translate-y-1/4 grid-cols-2 overflow-hidden rounded-md transition-all ease-in-out group-hover:rotate-45",
|
||||
isActive ? "rotate-45 group-hover:rotate-0" : "rotate-0"
|
||||
)}
|
||||
>
|
||||
<span className="flex h-6 w-6 bg-[--color-1]" />
|
||||
<span className="flex h-6 w-6 bg-[--color-2]" />
|
||||
<span className="flex h-6 w-6 bg-[--color-3]" />
|
||||
<span className="flex h-6 w-6 bg-[--color-4]" />
|
||||
<span className="sr-only">{theme.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ToggleGroupItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side={isDesktop ? "left" : "top"}
|
||||
className="bg-black text-white"
|
||||
>
|
||||
{theme.name}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
</ToggleGroup>
|
||||
)
|
||||
}
|
||||
31
apps/www/components/themes-styles.tsx
Normal file
31
apps/www/components/themes-styles.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import { useThemesConfig } from "@/hooks/use-themes-config"
|
||||
|
||||
export function ThemesStyle() {
|
||||
const { themesConfig } = useThemesConfig()
|
||||
|
||||
if (!themesConfig.activeTheme) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<style>
|
||||
{`
|
||||
.themes-wrapper,
|
||||
[data-chart] {
|
||||
${Object.entries(themesConfig.activeTheme.cssVars.light)
|
||||
.map(([key, value]) => `${key}: ${value};`)
|
||||
.join("\n")}
|
||||
}
|
||||
|
||||
.dark .themes-wrapper,
|
||||
.dark [data-chart] {
|
||||
${Object.entries(themesConfig.activeTheme.cssVars.dark)
|
||||
.map(([key, value]) => `${key}: ${value};`)
|
||||
.join("\n")}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
)
|
||||
}
|
||||
@@ -116,7 +116,7 @@ export default makeSource({
|
||||
{
|
||||
getHighlighter: async () => {
|
||||
const theme = await loadTheme(
|
||||
path.join(process.cwd(), "/lib/themes/dark.json")
|
||||
path.join(process.cwd(), "/lib/highlighter-theme.json")
|
||||
)
|
||||
return await getHighlighter({ theme })
|
||||
},
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import useSWR from "swr"
|
||||
|
||||
export function useChartConfig() {
|
||||
const { data, mutate } = useSWR("chart:config", null)
|
||||
|
||||
return { chartConfig: data, setChartConfig: mutate }
|
||||
}
|
||||
18
apps/www/hooks/use-themes-config.ts
Normal file
18
apps/www/hooks/use-themes-config.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { useAtom } from "jotai"
|
||||
import { atomWithStorage } from "jotai/utils"
|
||||
|
||||
import { THEMES, Theme } from "@/lib/themes"
|
||||
|
||||
type ThemesConfig = {
|
||||
activeTheme: Theme
|
||||
}
|
||||
|
||||
const configAtom = atomWithStorage<ThemesConfig>("themes:config", {
|
||||
activeTheme: THEMES[0],
|
||||
})
|
||||
|
||||
export function useThemesConfig() {
|
||||
const [themesConfig, setThemesConfig] = useAtom(configAtom)
|
||||
|
||||
return { themesConfig, setThemesConfig }
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { themeColorsToCssVariables } from "@/lib/charts"
|
||||
|
||||
export const CHART_THEMES = [
|
||||
const _THEMES = [
|
||||
{
|
||||
name: "Default",
|
||||
id: "default-shadcn",
|
||||
@@ -177,8 +177,8 @@ export const CHART_THEMES = [
|
||||
secondaryForeground: "222.2 47.4% 11.2%",
|
||||
muted: "240 3.7% 15.9%",
|
||||
"muted-foreground": "240 5% 64.9%",
|
||||
accent: "210 40% 96.1%",
|
||||
accentForeground: "222.2 47.4% 11.2%",
|
||||
accent: "240 3.7% 15.9%",
|
||||
"accent-foreground": "0 0% 98%",
|
||||
destructive: "0 72% 51%",
|
||||
destructiveForeground: "210 40% 98%",
|
||||
border: "240 3.7% 15.9%",
|
||||
@@ -244,8 +244,8 @@ export const CHART_THEMES = [
|
||||
secondaryForeground: "240 5.9% 10%",
|
||||
muted: "240 3.7% 15.9%",
|
||||
"muted-foreground": "240 5% 64.9%",
|
||||
accent: "240 4.8% 95.9%",
|
||||
accentForeground: "240 5.9% 10%",
|
||||
accent: "240 3.7% 15.9%",
|
||||
"accent-foreground": "0 0% 98%",
|
||||
destructive: "0 72% 51%",
|
||||
destructiveForeground: "0 0% 98%",
|
||||
border: "240 3.7% 15.9%",
|
||||
@@ -311,8 +311,8 @@ export const CHART_THEMES = [
|
||||
secondaryForeground: "240 5.9% 10%",
|
||||
muted: "240 3.7% 15.9%",
|
||||
"muted-foreground": "240 5% 64.9%",
|
||||
accent: "240 4.8% 95.9%",
|
||||
accentForeground: "240 5.9% 10%",
|
||||
accent: "240 3.7% 15.9%",
|
||||
"accent-foreground": "0 0% 98%",
|
||||
destructive: "0 72% 51%",
|
||||
destructiveForeground: "0 0% 98%",
|
||||
border: "240 3.7% 15.9%",
|
||||
@@ -471,14 +471,12 @@ export const CHART_THEMES = [
|
||||
},
|
||||
] as const
|
||||
|
||||
export type ChartTheme = ReturnType<typeof getChartThemes>[number]
|
||||
export const THEMES = _THEMES.map((theme) => ({
|
||||
...theme,
|
||||
cssVars: {
|
||||
light: themeColorsToCssVariables(theme.colors),
|
||||
dark: themeColorsToCssVariables(theme.colorsDark),
|
||||
},
|
||||
}))
|
||||
|
||||
export function getChartThemes() {
|
||||
return CHART_THEMES.map((theme) => ({
|
||||
...theme,
|
||||
cssVars: {
|
||||
light: themeColorsToCssVariables(theme.colors),
|
||||
dark: themeColorsToCssVariables(theme.colorsDark),
|
||||
},
|
||||
}))
|
||||
}
|
||||
export type Theme = (typeof THEMES)[number]
|
||||
@@ -1,380 +0,0 @@
|
||||
{
|
||||
"name": "Lambda Studio — Whiteout",
|
||||
"semanticHighlighting": true,
|
||||
"colors": {
|
||||
"editorLink.activeForeground": "#ca8a0488",
|
||||
"foreground": "#0008",
|
||||
"button.background": "#000",
|
||||
"button.foreground": "#fff",
|
||||
"button.hoverBackground": "#000b",
|
||||
"list.highlightForeground": "#000",
|
||||
"textLink.foreground": "#000",
|
||||
"scrollbar.shadow": "#fff",
|
||||
"textLink.activeForeground": "#0008",
|
||||
"editor.lineHighlightBackground": "#8881",
|
||||
"editor.lineHighlightBorder": "#8882",
|
||||
"editorCursor.foreground": "#000",
|
||||
"editor.findMatchBackground": "#0008",
|
||||
"editor.findMatchHighlightBackground": "#0002",
|
||||
"list.activeSelectionForeground": "#000",
|
||||
"list.focusForeground": "#000",
|
||||
"list.hoverForeground": "#000",
|
||||
"list.inactiveSelectionForeground": "#000",
|
||||
"list.inactiveSelectionBackground": "#fff",
|
||||
"list.focusBackground": "#fff",
|
||||
"list.focusAndSelectionOutline": "#fff",
|
||||
"list.focusHighlightForeground": "#000",
|
||||
"list.hoverBackground": "#fff",
|
||||
"list.focusOutline": "#fff",
|
||||
"list.activeSelectionBackground": "#fff",
|
||||
"editorIndentGuide.background": "#0002",
|
||||
"editor.background": "#fff",
|
||||
"editor.foreground": "#000",
|
||||
"editor.foldBackground": "#fff",
|
||||
"editor.hoverHighlightBackground": "#fff",
|
||||
"editor.selectionBackground": "#8888",
|
||||
"editor.inactiveSelectionBackground": "#8882",
|
||||
"gitDecoration.modifiedResourceForeground": "#000",
|
||||
"gitDecoration.untrackedResourceForeground": "#a7cb7b",
|
||||
"gitDecoration.conflictingResourceForeground": "#ca8a04",
|
||||
"gitDecoration.deletedResourceForeground": "#c97b89",
|
||||
"listFilterWidget.background": "#fff",
|
||||
"input.background": "#0001",
|
||||
"titleBar.activeForeground": "#000",
|
||||
"editorWidget.background": "#fff",
|
||||
"editorGutter.background": "#fff",
|
||||
"debugToolBar.background": "#fff",
|
||||
"commandCenter.background": "#fff",
|
||||
"sideBarSectionHeader.background": "#fff",
|
||||
"focusBorder": "#0008",
|
||||
"titleBar.activeBackground": "#fff",
|
||||
"titleBar.inactiveBackground": "#fff",
|
||||
"breadcrumb.background": "#fff",
|
||||
"activityBar.background": "#fff",
|
||||
"activityBar.foreground": "#0008",
|
||||
"panel.background": "#fff",
|
||||
"sideBar.background": "#fff",
|
||||
"sideBarTitle.foreground": "#0008",
|
||||
"tab.hoverBackground": "#fff",
|
||||
"terminal.background": "#fff",
|
||||
"statusBar.background": "#fff",
|
||||
"statusBar.foreground": "#0008",
|
||||
"selection.background": "#0002",
|
||||
"editorPane.background": "#fff",
|
||||
"badge.background": "#fff",
|
||||
"banner.background": "#fff",
|
||||
"menu.background": "#fff",
|
||||
"activityBarBadge.background": "#fff",
|
||||
"activityBarBadge.foreground": "#0008",
|
||||
"editorLineNumber.foreground": "#0002",
|
||||
"editorLineNumber.activeForeground": "#0008",
|
||||
"statusBarItem.errorBackground": "#f43f5e"
|
||||
},
|
||||
"semanticTokenColors": {
|
||||
"comment": {
|
||||
"foreground": "#0004"
|
||||
},
|
||||
"keyword": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"string": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"selfKeyword": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"method.declaration": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"method.definition": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"method": {
|
||||
"foreground": "#000",
|
||||
"bold": false
|
||||
},
|
||||
"function.declaration": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"function.definition": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"function": {
|
||||
"foreground": "#000",
|
||||
"bold": false
|
||||
},
|
||||
"property": {
|
||||
"foreground": "#000"
|
||||
},
|
||||
"enumMember": {
|
||||
"foreground": "#0008",
|
||||
"bold": false
|
||||
},
|
||||
"enum": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"boolean": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"number": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"type": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"typeAlias": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"class": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"selfTypeKeyword": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"builtinType": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"interface": {
|
||||
"foreground": "#0008",
|
||||
"bold": false
|
||||
},
|
||||
"typeParameter": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
},
|
||||
"lifetime": {
|
||||
"foreground": "#0008",
|
||||
"italic": false,
|
||||
"bold": false
|
||||
},
|
||||
"namespace": {
|
||||
"foreground": "#000"
|
||||
},
|
||||
"macro": {
|
||||
"foreground": "#000",
|
||||
"bold": false
|
||||
},
|
||||
"decorator": {
|
||||
"foreground": "#000",
|
||||
"bold": false
|
||||
},
|
||||
"builtinAttribute": {
|
||||
"foreground": "#000",
|
||||
"bold": false
|
||||
},
|
||||
"generic.attribute": {
|
||||
"foreground": "#000"
|
||||
},
|
||||
"derive": {
|
||||
"foreground": "#000"
|
||||
},
|
||||
"operator": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"variable": {
|
||||
"foreground": "#000"
|
||||
},
|
||||
"variable.readonly": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"parameter": {
|
||||
"foreground": "#000"
|
||||
},
|
||||
"variable.mutable": {
|
||||
"underline": true
|
||||
},
|
||||
"parameter.mutable": {
|
||||
"underline": true
|
||||
},
|
||||
"selfKeyword.mutable": {
|
||||
"underline": true
|
||||
},
|
||||
"variable.constant": {
|
||||
"foreground": "#0008"
|
||||
},
|
||||
"struct": {
|
||||
"foreground": "#000",
|
||||
"bold": true
|
||||
}
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"name": "Fallback Operator",
|
||||
"scope": ["keyword.operator"],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback keywords",
|
||||
"scope": [
|
||||
"storage.type.ts",
|
||||
"keyword",
|
||||
"keyword.other",
|
||||
"keyword.control",
|
||||
"storage.type",
|
||||
"storage.modifier"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback strings",
|
||||
"scope": ["string"],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback JSON Properties",
|
||||
"scope": ["support.type.property-name.json"],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback string variables",
|
||||
"scope": ["string variable", "string meta.interpolation"],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback comments",
|
||||
"scope": ["comment"],
|
||||
"settings": {
|
||||
"foreground": "#0004"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback constants",
|
||||
"scope": ["constant"],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback self/this",
|
||||
"scope": ["variable.language.this"],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback types",
|
||||
"scope": [
|
||||
"entity.other.alias",
|
||||
"source.php support.class",
|
||||
"entity.name.type",
|
||||
"meta.function-call support.class",
|
||||
"keyword.other.type",
|
||||
"entity.other.inherited-class"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback method calls",
|
||||
"scope": ["meta.method-call entity.name.function"],
|
||||
"settings": {
|
||||
"foreground": "#000",
|
||||
"fontStyle": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback function calls",
|
||||
"scope": [
|
||||
"meta.function-call entity.name.function",
|
||||
"meta.function-call support.function",
|
||||
"meta.function.call entity.name.function"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000",
|
||||
"fontStyle": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback enums & constants",
|
||||
"scope": ["constant.enum", "constant.other"],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback Properties & func arguments",
|
||||
"scope": [
|
||||
"variable.other.property",
|
||||
"entity.name.goto-label",
|
||||
"entity.name.variable.parameter"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fallback functions & methods declarations",
|
||||
"scope": [
|
||||
"entity.name.function",
|
||||
"support.function",
|
||||
"support.function.constructor",
|
||||
"entity.name.function meta.function-call meta.method-call"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "HTML Tags",
|
||||
"scope": [
|
||||
"meta.tag entity.name.tag.html",
|
||||
"entity.name.tag.template.html"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "HTML Attributes",
|
||||
"scope": ["entity.other.attribute-name.html"],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "HTML Custom Tag",
|
||||
"scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "HTML Keywords",
|
||||
"scope": ["text.html keyword"],
|
||||
"settings": {
|
||||
"foreground": "#000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Punctuations",
|
||||
"scope": ["punctuation", "meta.brace"],
|
||||
"settings": {
|
||||
"foreground": "#0008"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,6 +1,14 @@
|
||||
import { Registry } from "@/registry/schema"
|
||||
|
||||
export const blocks: Registry = [
|
||||
{
|
||||
name: "charts-01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["chart"],
|
||||
files: ["block/charts-01.tsx"],
|
||||
category: "Application",
|
||||
subcategory: "Charts",
|
||||
},
|
||||
{
|
||||
name: "dashboard-05",
|
||||
type: "components:block",
|
||||
|
||||
155
apps/www/registry/default/block/charts-01-chunk-0.tsx
Normal file
155
apps/www/registry/default/block/charts-01-chunk-0.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-0">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
12,584{" "}
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
steps
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: -4,
|
||||
right: -4,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-03" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
defaultIndex={2}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideIndicator
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={1200}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
>
|
||||
<Label
|
||||
position="insideBottomLeft"
|
||||
value="Average Steps"
|
||||
offset={10}
|
||||
fill="hsl(var(--foreground))"
|
||||
/>
|
||||
<Label
|
||||
position="insideTopLeft"
|
||||
value="12,343"
|
||||
className="text-lg"
|
||||
fill="hsl(var(--foreground))"
|
||||
offset={10}
|
||||
startOffset={100}
|
||||
/>
|
||||
</ReferenceLine>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex-col items-start gap-1">
|
||||
<CardDescription>
|
||||
Over the past 7 days, you have walked{" "}
|
||||
<span className="font-medium text-foreground">53,305</span> steps.
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
You need <span className="font-medium text-foreground">12,584</span>{" "}
|
||||
more steps to reach your goal.
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
140
apps/www/registry/default/block/charts-01-chunk-1.tsx
Normal file
140
apps/www/registry/default/block/charts-01-chunk-1.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card className="flex flex-col" 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>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
62
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
bpm
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div>
|
||||
<CardDescription>Variability</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
35
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
ms
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 items-center">
|
||||
<ChartContainer
|
||||
config={{
|
||||
resting: {
|
||||
label: "Resting",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 14,
|
||||
right: 14,
|
||||
top: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
resting: 72,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
resting: 35,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
resting: 52,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
resting: 70,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="4 4"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
dataKey="resting"
|
||||
type="natural"
|
||||
fill="var(--color-resting)"
|
||||
stroke="var(--color-resting)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
fill: "var(--color-resting)",
|
||||
stroke: "var(--color-resting)",
|
||||
r: 4,
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
129
apps/www/registry/default/block/charts-01-chunk-2.tsx
Normal file
129
apps/www/registry/default/block/charts-01-chunk-2.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
You're average more steps a day this year than last year.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
12,453
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024",
|
||||
steps: 12435,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="white"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
10,103
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--muted))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2023",
|
||||
steps: 10103,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="hsl(var(--muted-foreground))"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
105
apps/www/registry/default/block/charts-01-chunk-3.tsx
Normal file
105
apps/www/registry/default/block/charts-01-chunk-3.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, Rectangle, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-3">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
Over the last 7 days, your distance walked and run was 12.5 miles per
|
||||
day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
||||
12.5
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
miles/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[72px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
117
apps/www/registry/default/block/charts-01-chunk-4.tsx
Normal file
117
apps/www/registry/default/block/charts-01-chunk-4.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
|
||||
|
||||
import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
|
||||
import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="h-[140px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
label: "8/12 hr",
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
label: "46/60 min",
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
label: "245/360 kcal",
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
barSize={32}
|
||||
barGap={2}
|
||||
>
|
||||
<XAxis type="number" dataKey="value" hide />
|
||||
<YAxis
|
||||
dataKey="activity"
|
||||
type="category"
|
||||
tickLine={false}
|
||||
tickMargin={4}
|
||||
axisLine={false}
|
||||
className="capitalize"
|
||||
/>
|
||||
<Bar dataKey="value" radius={5}>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="label"
|
||||
fill="white"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-row border-t p-4">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
562
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
73
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
14
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
99
apps/www/registry/default/block/charts-01-chunk-5.tsx
Normal file
99
apps/www/registry/default/block/charts-01-chunk-5.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
"use client"
|
||||
|
||||
import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"
|
||||
|
||||
import { Card, CardContent } from "@/registry/default/ui/card"
|
||||
import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card 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">
|
||||
<div className="text-sm text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
562/600
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
73/120
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
8/12
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
||||
>
|
||||
<RadialBarChart
|
||||
margin={{
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: -10,
|
||||
bottom: -10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
innerRadius="20%"
|
||||
barSize={24}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<PolarAngleAxis
|
||||
type="number"
|
||||
domain={[0, 100]}
|
||||
dataKey="value"
|
||||
tick={false}
|
||||
/>
|
||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
104
apps/www/registry/default/block/charts-01-chunk-6.tsx
Normal file
104
apps/www/registry/default/block/charts-01-chunk-6.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, Rectangle, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { ChartContainer } from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-6">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
You're burning an average of 754 calories per day. Good job!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
||||
1,254
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
calories: {
|
||||
label: "Calories",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[64px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
calories: 354,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
calories: 514,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
calories: 345,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
calories: 734,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
calories: 645,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
calories: 456,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
calories: 345,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="calories"
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
125
apps/www/registry/default/block/charts-01-chunk-7.tsx
Normal file
125
apps/www/registry/default/block/charts-01-chunk-7.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client"
|
||||
|
||||
import { Area, AreaChart, XAxis, YAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card 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">
|
||||
8
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
35
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<ChartContainer
|
||||
config={{
|
||||
time: {
|
||||
label: "Time",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
time: 8.5,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
time: 7.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
time: 6.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
time: 5.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
time: 7.0,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="date" hide />
|
||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
||||
<defs>
|
||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
dataKey="time"
|
||||
type="natural"
|
||||
fill="url(#fillTime)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-time)"
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
formatter={(value) => (
|
||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
||||
Time in bed
|
||||
<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">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
907
apps/www/registry/default/block/charts-01.tsx
Normal file
907
apps/www/registry/default/block/charts-01.tsx
Normal file
@@ -0,0 +1,907 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Label,
|
||||
LabelList,
|
||||
Line,
|
||||
LineChart,
|
||||
PolarAngleAxis,
|
||||
RadialBar,
|
||||
RadialBarChart,
|
||||
Rectangle,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/default/ui/chart"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
|
||||
export const description = "A collection of health charts."
|
||||
|
||||
export const iframeHeight = "900px"
|
||||
|
||||
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.">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
12,584{" "}
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
steps
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: -4,
|
||||
right: -4,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
defaultIndex={2}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideIndicator
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={1200}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
>
|
||||
<Label
|
||||
position="insideBottomLeft"
|
||||
value="Average Steps"
|
||||
offset={10}
|
||||
fill="hsl(var(--foreground))"
|
||||
/>
|
||||
<Label
|
||||
position="insideTopLeft"
|
||||
value="12,343"
|
||||
className="text-lg"
|
||||
fill="hsl(var(--foreground))"
|
||||
offset={10}
|
||||
startOffset={100}
|
||||
/>
|
||||
</ReferenceLine>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex-col items-start gap-1">
|
||||
<CardDescription>
|
||||
Over the past 7 days, you have walked{" "}
|
||||
<span className="font-medium text-foreground">53,305</span> steps.
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
You need{" "}
|
||||
<span className="font-medium text-foreground">12,584</span> more
|
||||
steps to reach your goal.
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card
|
||||
x-chunk="A line chart showing the resting heart rate for the past 7 days."
|
||||
className="flex flex-col"
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
<CardDescription>Resting HR</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
62
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
bpm
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div>
|
||||
<CardDescription>Variability</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
35
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
ms
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 items-center">
|
||||
<ChartContainer
|
||||
config={{
|
||||
resting: {
|
||||
label: "Resting",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 14,
|
||||
right: 14,
|
||||
top: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
resting: 72,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
resting: 35,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
resting: 52,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
resting: 70,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="4 4"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
dataKey="resting"
|
||||
type="natural"
|
||||
fill="var(--color-resting)"
|
||||
stroke="var(--color-resting)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
fill: "var(--color-resting)",
|
||||
stroke: "var(--color-resting)",
|
||||
r: 4,
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</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.">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
You're average more steps a day this year than last year.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
12,453
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024",
|
||||
steps: 12435,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="white"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
10,103
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--muted))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2023",
|
||||
steps: 10103,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="hsl(var(--muted-foreground))"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing the walking and running distance for the past 7 days.">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
Over the last 7 days, your distance walked and run was 12.5 miles
|
||||
per day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
||||
12.5
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
miles/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[72px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing move, exercise, and stand progress.">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="h-[140px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
label: "8/12 hr",
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
label: "46/60 min",
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
label: "245/360 kcal",
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
barSize={32}
|
||||
barGap={2}
|
||||
>
|
||||
<XAxis type="number" dataKey="value" hide />
|
||||
<YAxis
|
||||
dataKey="activity"
|
||||
type="category"
|
||||
tickLine={false}
|
||||
tickMargin={4}
|
||||
axisLine={false}
|
||||
className="capitalize"
|
||||
/>
|
||||
<Bar dataKey="value" radius={5}>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="label"
|
||||
fill="white"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-row border-t p-4">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
562
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
73
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
14
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.">
|
||||
<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">
|
||||
<div className="text-sm text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
562/600
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
73/120
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
8/12
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
||||
>
|
||||
<RadialBarChart
|
||||
margin={{
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: -10,
|
||||
bottom: -10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
innerRadius="20%"
|
||||
barSize={24}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<PolarAngleAxis
|
||||
type="number"
|
||||
domain={[0, 100]}
|
||||
dataKey="value"
|
||||
tick={false}
|
||||
/>
|
||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing active energy in the past 7 days.">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
You're burning an average of 754 calories per day. Good job!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
||||
1,254
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
calories: {
|
||||
label: "Calories",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[64px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
calories: 354,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
calories: 514,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
calories: 345,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
calories: 734,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
calories: 645,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
calories: 456,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
calories: 345,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="calories"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="An area chart showing the time spent in bed for the past 7 days.">
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
8
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
35
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<ChartContainer
|
||||
config={{
|
||||
time: {
|
||||
label: "Time",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
time: 8.5,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
time: 7.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
time: 6.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
time: 5.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
time: 7.0,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="date" hide />
|
||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
||||
<defs>
|
||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
dataKey="time"
|
||||
type="natural"
|
||||
fill="url(#fillTime)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-time)"
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
formatter={(value) => (
|
||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
||||
Time in bed
|
||||
<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">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { DollarSign } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Users } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { CreditCard } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Activity } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { ArrowUpRight } from "lucide-react"
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
|
||||
export default function Component() {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Bird, Rabbit, Turtle } from "lucide-react"
|
||||
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { CornerDownLeft, Mic, Paperclip } from "lucide-react"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
|
||||
export default function Component() {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/registry/default/ui/badge"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { MoreHorizontal } from "lucide-react"
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { PlusCircle } from "lucide-react"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { Upload } from "lucide-react"
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
155
apps/www/registry/new-york/block/charts-01-chunk-0.tsx
Normal file
155
apps/www/registry/new-york/block/charts-01-chunk-0.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-0">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
12,584{" "}
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
steps
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: -4,
|
||||
right: -4,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={props.payload.date === "2024-01-03" ? 1 : 0.2}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
defaultIndex={2}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideIndicator
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={1200}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
>
|
||||
<Label
|
||||
position="insideBottomLeft"
|
||||
value="Average Steps"
|
||||
offset={10}
|
||||
fill="hsl(var(--foreground))"
|
||||
/>
|
||||
<Label
|
||||
position="insideTopLeft"
|
||||
value="12,343"
|
||||
className="text-lg"
|
||||
fill="hsl(var(--foreground))"
|
||||
offset={10}
|
||||
startOffset={100}
|
||||
/>
|
||||
</ReferenceLine>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex-col items-start gap-1">
|
||||
<CardDescription>
|
||||
Over the past 7 days, you have walked{" "}
|
||||
<span className="font-medium text-foreground">53,305</span> steps.
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
You need <span className="font-medium text-foreground">12,584</span>{" "}
|
||||
more steps to reach your goal.
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
140
apps/www/registry/new-york/block/charts-01-chunk-1.tsx
Normal file
140
apps/www/registry/new-york/block/charts-01-chunk-1.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card className="flex flex-col" 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>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
62
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
bpm
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div>
|
||||
<CardDescription>Variability</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
35
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
ms
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 items-center">
|
||||
<ChartContainer
|
||||
config={{
|
||||
resting: {
|
||||
label: "Resting",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 14,
|
||||
right: 14,
|
||||
top: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
resting: 72,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
resting: 35,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
resting: 52,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
resting: 70,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="4 4"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
dataKey="resting"
|
||||
type="natural"
|
||||
fill="var(--color-resting)"
|
||||
stroke="var(--color-resting)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
fill: "var(--color-resting)",
|
||||
stroke: "var(--color-resting)",
|
||||
r: 4,
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
129
apps/www/registry/new-york/block/charts-01-chunk-2.tsx
Normal file
129
apps/www/registry/new-york/block/charts-01-chunk-2.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} 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">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
You're average more steps a day this year than last year.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
12,453
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024",
|
||||
steps: 12435,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="white"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
10,103
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--muted))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2023",
|
||||
steps: 10103,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="hsl(var(--muted-foreground))"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
105
apps/www/registry/new-york/block/charts-01-chunk-3.tsx
Normal file
105
apps/www/registry/new-york/block/charts-01-chunk-3.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, Rectangle, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} 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">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
Over the last 7 days, your distance walked and run was 12.5 miles per
|
||||
day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
||||
12.5
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
miles/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[72px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
117
apps/www/registry/new-york/block/charts-01-chunk-4.tsx
Normal file
117
apps/www/registry/new-york/block/charts-01-chunk-4.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client"
|
||||
|
||||
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"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card x-chunk="charts-01-chunk-4">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="h-[140px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
label: "8/12 hr",
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
label: "46/60 min",
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
label: "245/360 kcal",
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
barSize={32}
|
||||
barGap={2}
|
||||
>
|
||||
<XAxis type="number" dataKey="value" hide />
|
||||
<YAxis
|
||||
dataKey="activity"
|
||||
type="category"
|
||||
tickLine={false}
|
||||
tickMargin={4}
|
||||
axisLine={false}
|
||||
className="capitalize"
|
||||
/>
|
||||
<Bar dataKey="value" radius={5}>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="label"
|
||||
fill="white"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-row border-t p-4">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
562
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
73
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
14
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
99
apps/www/registry/new-york/block/charts-01-chunk-5.tsx
Normal file
99
apps/www/registry/new-york/block/charts-01-chunk-5.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
"use client"
|
||||
|
||||
import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"
|
||||
|
||||
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">
|
||||
<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">
|
||||
<div className="text-sm text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
562/600
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
73/120
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
8/12
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
||||
>
|
||||
<RadialBarChart
|
||||
margin={{
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: -10,
|
||||
bottom: -10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
innerRadius="20%"
|
||||
barSize={24}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<PolarAngleAxis
|
||||
type="number"
|
||||
domain={[0, 100]}
|
||||
dataKey="value"
|
||||
tick={false}
|
||||
/>
|
||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
104
apps/www/registry/new-york/block/charts-01-chunk-6.tsx
Normal file
104
apps/www/registry/new-york/block/charts-01-chunk-6.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
"use client"
|
||||
|
||||
import { Bar, BarChart, Rectangle, XAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} 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">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
You're burning an average of 754 calories per day. Good job!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
||||
1,254
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
calories: {
|
||||
label: "Calories",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[64px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
calories: 354,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
calories: 514,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
calories: 345,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
calories: 734,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
calories: 645,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
calories: 456,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
calories: 345,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="calories"
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
125
apps/www/registry/new-york/block/charts-01-chunk-7.tsx
Normal file
125
apps/www/registry/new-york/block/charts-01-chunk-7.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client"
|
||||
|
||||
import { Area, AreaChart, XAxis, YAxis } from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<Card 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">
|
||||
8
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
35
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<ChartContainer
|
||||
config={{
|
||||
time: {
|
||||
label: "Time",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
time: 8.5,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
time: 7.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
time: 6.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
time: 5.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
time: 7.0,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="date" hide />
|
||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
||||
<defs>
|
||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
dataKey="time"
|
||||
type="natural"
|
||||
fill="url(#fillTime)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-time)"
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
formatter={(value) => (
|
||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
||||
Time in bed
|
||||
<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">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
907
apps/www/registry/new-york/block/charts-01.tsx
Normal file
907
apps/www/registry/new-york/block/charts-01.tsx
Normal file
@@ -0,0 +1,907 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Label,
|
||||
LabelList,
|
||||
Line,
|
||||
LineChart,
|
||||
PolarAngleAxis,
|
||||
RadialBar,
|
||||
RadialBarChart,
|
||||
Rectangle,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/new-york/ui/card"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/registry/new-york/ui/chart"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
|
||||
export const description = "A collection of health charts."
|
||||
|
||||
export const iframeHeight = "900px"
|
||||
|
||||
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.">
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<CardDescription>Today</CardDescription>
|
||||
<CardTitle className="text-4xl tabular-nums">
|
||||
12,584{" "}
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
steps
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: -4,
|
||||
right: -4,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={5}
|
||||
fillOpacity={0.4}
|
||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
||||
shape={(props: any) => {
|
||||
return (
|
||||
<Rectangle
|
||||
{...props}
|
||||
fillOpacity={
|
||||
props.payload.date === "2024-01-03" ? 1 : 0.2
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
defaultIndex={2}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideIndicator
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={1200}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth={1}
|
||||
>
|
||||
<Label
|
||||
position="insideBottomLeft"
|
||||
value="Average Steps"
|
||||
offset={10}
|
||||
fill="hsl(var(--foreground))"
|
||||
/>
|
||||
<Label
|
||||
position="insideTopLeft"
|
||||
value="12,343"
|
||||
className="text-lg"
|
||||
fill="hsl(var(--foreground))"
|
||||
offset={10}
|
||||
startOffset={100}
|
||||
/>
|
||||
</ReferenceLine>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex-col items-start gap-1">
|
||||
<CardDescription>
|
||||
Over the past 7 days, you have walked{" "}
|
||||
<span className="font-medium text-foreground">53,305</span> steps.
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
You need{" "}
|
||||
<span className="font-medium text-foreground">12,584</span> more
|
||||
steps to reach your goal.
|
||||
</CardDescription>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card
|
||||
x-chunk="A line chart showing the resting heart rate for the past 7 days."
|
||||
className="flex flex-col"
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
||||
<div>
|
||||
<CardDescription>Resting HR</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
62
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
bpm
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div>
|
||||
<CardDescription>Variability</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
35
|
||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
||||
ms
|
||||
</span>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 items-center">
|
||||
<ChartContainer
|
||||
config={{
|
||||
resting: {
|
||||
label: "Resting",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 14,
|
||||
right: 14,
|
||||
top: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
resting: 72,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
resting: 35,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
resting: 52,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
resting: 62,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
resting: 70,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="4 4"
|
||||
vertical={false}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
strokeOpacity={0.5}
|
||||
/>
|
||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
dataKey="resting"
|
||||
type="natural"
|
||||
fill="var(--color-resting)"
|
||||
stroke="var(--color-resting)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
fill: "var(--color-resting)",
|
||||
stroke: "var(--color-resting)",
|
||||
r: 4,
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelFormatter={(value) => {
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
cursor={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</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.">
|
||||
<CardHeader>
|
||||
<CardTitle>Progress</CardTitle>
|
||||
<CardDescription>
|
||||
You're average more steps a day this year than last year.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
12,453
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024",
|
||||
steps: 12435,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="white"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div className="grid auto-rows-min gap-2">
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
10,103
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
steps/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--muted))",
|
||||
},
|
||||
}}
|
||||
className="aspect-auto h-[32px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
layout="vertical"
|
||||
margin={{
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2023",
|
||||
steps: 10103,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
fill="var(--color-steps)"
|
||||
radius={4}
|
||||
barSize={32}
|
||||
>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="date"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
fill="hsl(var(--muted-foreground))"
|
||||
/>
|
||||
</Bar>
|
||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
||||
<XAxis dataKey="steps" type="number" hide />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing the walking and running distance for the past 7 days.">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Walking Distance</CardTitle>
|
||||
<CardDescription>
|
||||
Over the last 7 days, your distance walked and run was 12.5 miles
|
||||
per day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
||||
12.5
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
miles/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
steps: {
|
||||
label: "Steps",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[72px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
steps: 2000,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
steps: 2100,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
steps: 2200,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
steps: 1300,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
steps: 1400,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
steps: 2500,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
steps: 1600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="steps"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing move, exercise, and stand progress.">
|
||||
<CardContent className="flex gap-4 p-4 pb-2">
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="h-[140px] w-full"
|
||||
>
|
||||
<BarChart
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
label: "8/12 hr",
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
label: "46/60 min",
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
label: "245/360 kcal",
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
barSize={32}
|
||||
barGap={2}
|
||||
>
|
||||
<XAxis type="number" dataKey="value" hide />
|
||||
<YAxis
|
||||
dataKey="activity"
|
||||
type="category"
|
||||
tickLine={false}
|
||||
tickMargin={4}
|
||||
axisLine={false}
|
||||
className="capitalize"
|
||||
/>
|
||||
<Bar dataKey="value" radius={5}>
|
||||
<LabelList
|
||||
position="insideLeft"
|
||||
dataKey="label"
|
||||
fill="white"
|
||||
offset={8}
|
||||
fontSize={12}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-row border-t p-4">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
562
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
73
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-xs text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
||||
14
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.">
|
||||
<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">
|
||||
<div className="text-sm text-muted-foreground">Move</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
562/600
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
73/120
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
||||
<div className="text-sm text-muted-foreground">Stand</div>
|
||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
||||
8/12
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
move: {
|
||||
label: "Move",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
exercise: {
|
||||
label: "Exercise",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
stand: {
|
||||
label: "Stand",
|
||||
color: "hsl(var(--chart-3))",
|
||||
},
|
||||
}}
|
||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
||||
>
|
||||
<RadialBarChart
|
||||
margin={{
|
||||
left: -10,
|
||||
right: -10,
|
||||
top: -10,
|
||||
bottom: -10,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
activity: "stand",
|
||||
value: (8 / 12) * 100,
|
||||
fill: "var(--color-stand)",
|
||||
},
|
||||
{
|
||||
activity: "exercise",
|
||||
value: (46 / 60) * 100,
|
||||
fill: "var(--color-exercise)",
|
||||
},
|
||||
{
|
||||
activity: "move",
|
||||
value: (245 / 360) * 100,
|
||||
fill: "var(--color-move)",
|
||||
},
|
||||
]}
|
||||
innerRadius="20%"
|
||||
barSize={24}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
>
|
||||
<PolarAngleAxis
|
||||
type="number"
|
||||
domain={[0, 100]}
|
||||
dataKey="value"
|
||||
tick={false}
|
||||
/>
|
||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="A bar chart showing active energy in the past 7 days.">
|
||||
<CardHeader className="p-4 pb-0">
|
||||
<CardTitle>Active Energy</CardTitle>
|
||||
<CardDescription>
|
||||
You're burning an average of 754 calories per day. Good job!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
||||
1,254
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
kcal/day
|
||||
</span>
|
||||
</div>
|
||||
<ChartContainer
|
||||
config={{
|
||||
calories: {
|
||||
label: "Calories",
|
||||
color: "hsl(var(--chart-1))",
|
||||
},
|
||||
}}
|
||||
className="ml-auto w-[64px]"
|
||||
>
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
calories: 354,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
calories: 514,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
calories: 345,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
calories: 734,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
calories: 645,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
calories: 456,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
calories: 345,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Bar
|
||||
dataKey="calories"
|
||||
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
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={4}
|
||||
hide
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card x-chunk="An area chart showing the time spent in bed for the past 7 days.">
|
||||
<CardHeader className="space-y-0 pb-0">
|
||||
<CardDescription>Time in Bed</CardDescription>
|
||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
||||
8
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
hr
|
||||
</span>
|
||||
35
|
||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
||||
min
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<ChartContainer
|
||||
config={{
|
||||
time: {
|
||||
label: "Time",
|
||||
color: "hsl(var(--chart-2))",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={[
|
||||
{
|
||||
date: "2024-01-01",
|
||||
time: 8.5,
|
||||
},
|
||||
{
|
||||
date: "2024-01-02",
|
||||
time: 7.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-03",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-04",
|
||||
time: 6.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-05",
|
||||
time: 5.2,
|
||||
},
|
||||
{
|
||||
date: "2024-01-06",
|
||||
time: 8.1,
|
||||
},
|
||||
{
|
||||
date: "2024-01-07",
|
||||
time: 7.0,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="date" hide />
|
||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
||||
<defs>
|
||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-time)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
dataKey="time"
|
||||
type="natural"
|
||||
fill="url(#fillTime)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-time)"
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
formatter={(value) => (
|
||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
||||
Time in bed
|
||||
<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">
|
||||
hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { DollarSign } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Users } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { CreditCard } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Activity } from "lucide-react"
|
||||
|
||||
import {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { ArrowUpRight } from "lucide-react"
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
|
||||
export default function Component() {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Bird, Rabbit, Turtle } from "lucide-react"
|
||||
|
||||
import { Input } from "@/registry/new-york/ui/input"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { CornerDownLeft, Mic, Paperclip } from "lucide-react"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
|
||||
export default function Component() {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
import {
|
||||
Card,
|
||||
@@ -12,7 +14,7 @@ export default function Component() {
|
||||
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>Your Orders</CardTitle>
|
||||
<CardDescription className="max-w-lg text-balance leading-relaxed">
|
||||
<CardDescription className="text-balance max-w-lg leading-relaxed">
|
||||
Introducing Our Dynamic Orders Dashboard for Seamless Management and
|
||||
Insightful Analysis.
|
||||
</CardDescription>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/registry/new-york/ui/badge"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
|
||||
@@ -290,7 +290,7 @@ export default function Dashboard() {
|
||||
>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>Your Orders</CardTitle>
|
||||
<CardDescription className="max-w-lg text-balance leading-relaxed">
|
||||
<CardDescription className="text-balance max-w-lg leading-relaxed">
|
||||
Introducing Our Dynamic Orders Dashboard for Seamless
|
||||
Management and Insightful Analysis.
|
||||
</CardDescription>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { MoreHorizontal } from "lucide-react"
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { PlusCircle } from "lucide-react"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { Upload } from "lucide-react"
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
import {
|
||||
Card,
|
||||
|
||||
@@ -2,6 +2,11 @@
|
||||
|
||||
import * as React from "react"
|
||||
import * as RechartsPrimitive from "recharts"
|
||||
import {
|
||||
NameType,
|
||||
Payload,
|
||||
ValueType,
|
||||
} from "recharts/types/component/DefaultTooltipContent"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
@@ -52,7 +57,7 @@ const ChartContainer = React.forwardRef<
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -180,6 +180,8 @@ export const Index: Record<string, any> = {
|
||||
})
|
||||
|
||||
const code = `
|
||||
'use client'
|
||||
|
||||
${componnetImportLines.join("\n")}
|
||||
|
||||
export default function Component() {
|
||||
|
||||
Reference in New Issue
Block a user