diff --git a/apps/www/__registry__/default/block/charts-01.tsx b/apps/www/__registry__/default/block/charts-01.tsx new file mode 100644 index 00000000000..71cfe4f34d9 --- /dev/null +++ b/apps/www/__registry__/default/block/charts-01.tsx @@ -0,0 +1,903 @@ +"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 ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + /> + + + + +
+
+ + ) +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 0039dcc7b8d..e4b165938fc 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -2150,6 +2150,81 @@ export const Index: Record = { 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 = { 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", diff --git a/apps/www/__registry__/new-york/block/charts-01.tsx b/apps/www/__registry__/new-york/block/charts-01.tsx new file mode 100644 index 00000000000..7e14a277318 --- /dev/null +++ b/apps/www/__registry__/new-york/block/charts-01.tsx @@ -0,0 +1,915 @@ +"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 ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + +
+
+ + ) +} diff --git a/apps/www/app/(app)/blocks/page.tsx b/apps/www/app/(app)/blocks/page.tsx index f1b2e297dbb..371313e9642 100644 --- a/apps/www/app/(app)/blocks/page.tsx +++ b/apps/www/app/(app)/blocks/page.tsx @@ -3,7 +3,7 @@ import { BlockDisplay } from "@/components/block-display" export default async function BlocksPage() { const blocks = (await getAllBlockIds()).filter( - (name) => !name.startsWith("chart") + (name) => !name.startsWith("chart-") ) return blocks.map((name, index) => ( diff --git a/apps/www/components/block-chunk.tsx b/apps/www/components/block-chunk.tsx index 41046b6eebc..2ee0902f3df 100644 --- a/apps/www/components/block-chunk.tsx +++ b/apps/www/components/block-chunk.tsx @@ -39,7 +39,7 @@ export function BlockChunk({ >
{children}
{chunk.code && ( -
+
}\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n
\n )\n })}\n
\n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/chart.json b/apps/www/public/registry/styles/new-york/chart.json index a558fc918d1..f299bee0b0d 100644 --- a/apps/www/public/registry/styles/new-york/chart.json +++ b/apps/www/public/registry/styles/new-york/chart.json @@ -10,7 +10,7 @@ "files": [ { "name": "chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport {\n NameType,\n Payload,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/registry/blocks.ts b/apps/www/registry/blocks.ts index cf7c57c4f7f..9818ae592d7 100644 --- a/apps/www/registry/blocks.ts +++ b/apps/www/registry/blocks.ts @@ -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", diff --git a/apps/www/registry/default/block/charts-01-chunk-0.tsx b/apps/www/registry/default/block/charts-01-chunk-0.tsx new file mode 100644 index 00000000000..8ccd890a45c --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-0.tsx @@ -0,0 +1,154 @@ +"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 ( + + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305 steps. + + + You need 12,584{" "} + more steps to reach your goal. + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-1.tsx b/apps/www/registry/default/block/charts-01-chunk-1.tsx new file mode 100644 index 00000000000..0c2c319bf1d --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-1.tsx @@ -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 ( + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-2.tsx b/apps/www/registry/default/block/charts-01-chunk-2.tsx new file mode 100644 index 00000000000..6c2a9e5aca0 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-2.tsx @@ -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 ( + + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-3.tsx b/apps/www/registry/default/block/charts-01-chunk-3.tsx new file mode 100644 index 00000000000..6a79cbd20a0 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-3.tsx @@ -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 ( + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 miles per + day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-4.tsx b/apps/www/registry/default/block/charts-01-chunk-4.tsx new file mode 100644 index 00000000000..3d4221bba54 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-4.tsx @@ -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 ( + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-5.tsx b/apps/www/registry/default/block/charts-01-chunk-5.tsx new file mode 100644 index 00000000000..f593f193e20 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-5.tsx @@ -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 ( + + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-6.tsx b/apps/www/registry/default/block/charts-01-chunk-6.tsx new file mode 100644 index 00000000000..41b71c03461 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-6.tsx @@ -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 ( + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-7.tsx b/apps/www/registry/default/block/charts-01-chunk-7.tsx new file mode 100644 index 00000000000..3eda94aa737 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-7.tsx @@ -0,0 +1,114 @@ +"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 ( + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx new file mode 100644 index 00000000000..4dab9f328bb --- /dev/null +++ b/apps/www/registry/default/block/charts-01.tsx @@ -0,0 +1,906 @@ +"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 ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + /> + + + + +
+
+ + ) +} diff --git a/apps/www/registry/default/block/dashboard-01-chunk-0.tsx b/apps/www/registry/default/block/dashboard-01-chunk-0.tsx index 5e44cbbb630..4fe27e7c82f 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { DollarSign } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx b/apps/www/registry/default/block/dashboard-01-chunk-1.tsx index e15cc01b060..ec3ac821535 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Users } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx b/apps/www/registry/default/block/dashboard-01-chunk-2.tsx index a81d58c8714..312104c53f2 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { CreditCard } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx b/apps/www/registry/default/block/dashboard-01-chunk-3.tsx index 1b7b3d202cb..43252bbc4dd 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Activity } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx b/apps/www/registry/default/block/dashboard-01-chunk-4.tsx index e0350aca14e..59b3088227a 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" import { ArrowUpRight } from "lucide-react" diff --git a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx b/apps/www/registry/default/block/dashboard-01-chunk-5.tsx index c33a1e3357d..af5efea9b7b 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Avatar, AvatarFallback, diff --git a/apps/www/registry/default/block/dashboard-02-chunk-0.tsx b/apps/www/registry/default/block/dashboard-02-chunk-0.tsx index 07bb20aaa66..de9cf4fa936 100644 --- a/apps/www/registry/default/block/dashboard-02-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-02-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-02-chunk-1.tsx b/apps/www/registry/default/block/dashboard-02-chunk-1.tsx index 119152ea2c4..63cf0f308b8 100644 --- a/apps/www/registry/default/block/dashboard-02-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-02-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" export default function Component() { diff --git a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx b/apps/www/registry/default/block/dashboard-03-chunk-0.tsx index 1ff4631b9bb..54bf64ef1b3 100644 --- a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-03-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Bird, Rabbit, Turtle } from "lucide-react" import { Input } from "@/registry/default/ui/input" diff --git a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx b/apps/www/registry/default/block/dashboard-03-chunk-1.tsx index d623ff7b939..d6fb596f282 100644 --- a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-03-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { CornerDownLeft, Mic, Paperclip } from "lucide-react" import { Button } from "@/registry/default/ui/button" diff --git a/apps/www/registry/default/block/dashboard-04-chunk-0.tsx b/apps/www/registry/default/block/dashboard-04-chunk-0.tsx index 5e31d48fc7d..406f27e0896 100644 --- a/apps/www/registry/default/block/dashboard-04-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-04-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" export default function Component() { diff --git a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx b/apps/www/registry/default/block/dashboard-04-chunk-1.tsx index af35b3ca64c..1572ff5d51d 100644 --- a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-04-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-04-chunk-2.tsx b/apps/www/registry/default/block/dashboard-04-chunk-2.tsx index 828f040fd5c..e3011466e0a 100644 --- a/apps/www/registry/default/block/dashboard-04-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-04-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-0.tsx b/apps/www/registry/default/block/dashboard-05-chunk-0.tsx index 226b87db3cb..2fd31e9eab7 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-1.tsx b/apps/www/registry/default/block/dashboard-05-chunk-1.tsx index 8736df7db99..32589143461 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx b/apps/www/registry/default/block/dashboard-05-chunk-2.tsx index c391f355e38..7fdf1ccbd29 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx b/apps/www/registry/default/block/dashboard-05-chunk-3.tsx index f0b41b7c044..91cb414544b 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Badge } from "@/registry/default/ui/badge" import { Card, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx b/apps/www/registry/default/block/dashboard-05-chunk-4.tsx index b42b344bca4..14236a63a1c 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import { ChevronLeft, ChevronRight, diff --git a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx b/apps/www/registry/default/block/dashboard-06-chunk-0.tsx index 7c90e90d5c6..810e0505a64 100644 --- a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-06-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { MoreHorizontal } from "lucide-react" diff --git a/apps/www/registry/default/block/dashboard-07-chunk-0.tsx b/apps/www/registry/default/block/dashboard-07-chunk-0.tsx index d5eab225f82..7722f9d0437 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-07-chunk-1.tsx b/apps/www/registry/default/block/dashboard-07-chunk-1.tsx index 7f101866af0..c9999aeebba 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { PlusCircle } from "lucide-react" import { Button } from "@/registry/default/ui/button" diff --git a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx b/apps/www/registry/default/block/dashboard-07-chunk-2.tsx index 5e932c96207..09283164fe4 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-07-chunk-3.tsx b/apps/www/registry/default/block/dashboard-07-chunk-3.tsx index 1bebd5f6140..33e68377a1f 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-3.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-07-chunk-4.tsx b/apps/www/registry/default/block/dashboard-07-chunk-4.tsx index 7f3f7a6748e..824ecd44628 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-4.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { Upload } from "lucide-react" diff --git a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx b/apps/www/registry/default/block/dashboard-07-chunk-5.tsx index 9af1101aca6..0a83a596346 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/ui/chart.tsx b/apps/www/registry/default/ui/chart.tsx index 24568764004..346e1525f1d 100644 --- a/apps/www/registry/default/ui/chart.tsx +++ b/apps/www/registry/default/ui/chart.tsx @@ -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} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-0.tsx b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx new file mode 100644 index 00000000000..e6d2eefd0f2 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx @@ -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 ( + + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305 steps. + + + You need 12,584{" "} + more steps to reach your goal. + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-1.tsx b/apps/www/registry/new-york/block/charts-01-chunk-1.tsx new file mode 100644 index 00000000000..20f41b147e2 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-1.tsx @@ -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 ( + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-2.tsx b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx new file mode 100644 index 00000000000..6aac5c6d3e7 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx @@ -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 ( + + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-3.tsx b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx new file mode 100644 index 00000000000..f922f376457 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx @@ -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 ( + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 miles per + day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-4.tsx b/apps/www/registry/new-york/block/charts-01-chunk-4.tsx new file mode 100644 index 00000000000..d04414c073b --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-4.tsx @@ -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 ( + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-5.tsx b/apps/www/registry/new-york/block/charts-01-chunk-5.tsx new file mode 100644 index 00000000000..5f36657660b --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-5.tsx @@ -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 ( + + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-6.tsx b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx new file mode 100644 index 00000000000..feff7315987 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx @@ -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 ( + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-7.tsx b/apps/www/registry/new-york/block/charts-01-chunk-7.tsx new file mode 100644 index 00000000000..100c2b3a3c0 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-7.tsx @@ -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 ( + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01.tsx b/apps/www/registry/new-york/block/charts-01.tsx new file mode 100644 index 00000000000..2f59c336525 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01.tsx @@ -0,0 +1,918 @@ +"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 ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + +
+
+ + ) +} diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx index 7cb58559d0e..cbb1464e379 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { DollarSign } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx index bf8fbb39a32..0e090f523ce 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Users } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx index 71d2b14edcd..ac121ea09cb 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { CreditCard } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx index 9a2628ee9bd..3dab661eef5 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Activity } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx index 91000c60a08..f24999e4b12 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" import { ArrowUpRight } from "lucide-react" diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx index e9fe93452d9..a9d904348fa 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Avatar, AvatarFallback, diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx index cebced7074f..86cb08dda79 100644 --- a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx index 47ab92fb02e..0fd5cd0b94d 100644 --- a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" export default function Component() { diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx index 79d0fb2899f..735ffc053be 100644 --- a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Bird, Rabbit, Turtle } from "lucide-react" import { Input } from "@/registry/new-york/ui/input" diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx index 115f6360f5f..709b45c689b 100644 --- a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { CornerDownLeft, Mic, Paperclip } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx index 5e31d48fc7d..406f27e0896 100644 --- a/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" export default function Component() { diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx index 28cd68c9c5e..289544ec759 100644 --- a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx index 56b227a9205..a3f20b79be4 100644 --- a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx index 3b3eade1da5..fe50d860afc 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx index 3f3d07f1266..bd780f90c92 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx index 457b696be64..3ea1caea2f8 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx index 99c32e43351..626b1bf3d33 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Badge } from "@/registry/new-york/ui/badge" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx index 9570e3df9cd..5fa654e8f62 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import { ChevronLeft, ChevronRight, diff --git a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx index 544dea9b2f2..1604e4bf728 100644 --- a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { MoreHorizontal } from "lucide-react" diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx index a1a262ba4ea..f97e3902c5a 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx index 5325cfe2088..1e6535fe946 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { PlusCircle } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx index b8301b5a6ae..c391a2c2bee 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx index e180498f220..7b4a53495fb 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx index 33816c51a16..06c58d33037 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { Upload } from "lucide-react" diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx index 39af47fbeea..a2279c13bd5 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/ui/chart.tsx b/apps/www/registry/new-york/ui/chart.tsx index 24568764004..5cff3d8e8e7 100644 --- a/apps/www/registry/new-york/ui/chart.tsx +++ b/apps/www/registry/new-york/ui/chart.tsx @@ -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} diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 976e6e4c36d..7b37944d615 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -180,6 +180,8 @@ export const Index: Record = { }) const code = ` + 'use client' + ${componnetImportLines.join("\n")} export default function Component() {