From 210010f5ed0d5ac2196afaf30b28c5091bbc1ff4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 17 Jul 2024 18:58:40 +0400 Subject: [PATCH] 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 --- .../__registry__/default/block/charts-01.tsx | 904 +++++++++++++++++ apps/www/__registry__/index.tsx | 150 +++ .../__registry__/new-york/block/charts-01.tsx | 904 +++++++++++++++++ .../new-york/block/dashboard-05.tsx | 2 +- apps/www/app/(app)/blocks/layout.tsx | 4 +- apps/www/app/(app)/blocks/page.tsx | 25 +- apps/www/app/(app)/charts/page.tsx | 504 +++++----- .../(blocks)/blocks/[style]/[name]/page.tsx | 44 +- apps/www/components/block-chunk.tsx | 2 +- apps/www/components/block-preview.tsx | 3 +- apps/www/components/chart-code-viewer.tsx | 14 +- apps/www/components/chart-display.tsx | 2 +- apps/www/components/charts-theme-switcher.tsx | 132 --- apps/www/components/command-menu.tsx | 2 +- apps/www/components/themes-selector.tsx | 124 +++ apps/www/components/themes-styles.tsx | 31 + apps/www/contentlayer.config.js | 2 +- apps/www/hooks/use-chart-config.ts | 7 - apps/www/hooks/use-themes-config.ts | 18 + .../dark.json => highlighter-theme.json} | 0 apps/www/lib/{chart-themes.ts => themes.ts} | 32 +- apps/www/lib/themes/light.json | 380 -------- .../public/registry/styles/default/chart.json | 2 +- .../registry/styles/new-york/chart.json | 2 +- apps/www/registry/blocks.ts | 8 + .../default/block/charts-01-chunk-0.tsx | 155 +++ .../default/block/charts-01-chunk-1.tsx | 140 +++ .../default/block/charts-01-chunk-2.tsx | 129 +++ .../default/block/charts-01-chunk-3.tsx | 105 ++ .../default/block/charts-01-chunk-4.tsx | 117 +++ .../default/block/charts-01-chunk-5.tsx | 99 ++ .../default/block/charts-01-chunk-6.tsx | 104 ++ .../default/block/charts-01-chunk-7.tsx | 125 +++ apps/www/registry/default/block/charts-01.tsx | 907 ++++++++++++++++++ .../default/block/dashboard-01-chunk-0.tsx | 2 + .../default/block/dashboard-01-chunk-1.tsx | 2 + .../default/block/dashboard-01-chunk-2.tsx | 2 + .../default/block/dashboard-01-chunk-3.tsx | 2 + .../default/block/dashboard-01-chunk-4.tsx | 2 + .../default/block/dashboard-01-chunk-5.tsx | 2 + .../default/block/dashboard-02-chunk-0.tsx | 2 + .../default/block/dashboard-02-chunk-1.tsx | 2 + .../default/block/dashboard-03-chunk-0.tsx | 2 + .../default/block/dashboard-03-chunk-1.tsx | 2 + .../default/block/dashboard-04-chunk-0.tsx | 2 + .../default/block/dashboard-04-chunk-1.tsx | 2 + .../default/block/dashboard-04-chunk-2.tsx | 2 + .../default/block/dashboard-05-chunk-0.tsx | 2 + .../default/block/dashboard-05-chunk-1.tsx | 2 + .../default/block/dashboard-05-chunk-2.tsx | 2 + .../default/block/dashboard-05-chunk-3.tsx | 2 + .../default/block/dashboard-05-chunk-4.tsx | 2 + .../default/block/dashboard-06-chunk-0.tsx | 2 + .../default/block/dashboard-07-chunk-0.tsx | 2 + .../default/block/dashboard-07-chunk-1.tsx | 2 + .../default/block/dashboard-07-chunk-2.tsx | 2 + .../default/block/dashboard-07-chunk-3.tsx | 2 + .../default/block/dashboard-07-chunk-4.tsx | 2 + .../default/block/dashboard-07-chunk-5.tsx | 2 + apps/www/registry/default/ui/chart.tsx | 2 +- .../new-york/block/charts-01-chunk-0.tsx | 155 +++ .../new-york/block/charts-01-chunk-1.tsx | 140 +++ .../new-york/block/charts-01-chunk-2.tsx | 129 +++ .../new-york/block/charts-01-chunk-3.tsx | 105 ++ .../new-york/block/charts-01-chunk-4.tsx | 117 +++ .../new-york/block/charts-01-chunk-5.tsx | 99 ++ .../new-york/block/charts-01-chunk-6.tsx | 104 ++ .../new-york/block/charts-01-chunk-7.tsx | 125 +++ .../www/registry/new-york/block/charts-01.tsx | 907 ++++++++++++++++++ .../new-york/block/dashboard-01-chunk-0.tsx | 2 + .../new-york/block/dashboard-01-chunk-1.tsx | 2 + .../new-york/block/dashboard-01-chunk-2.tsx | 2 + .../new-york/block/dashboard-01-chunk-3.tsx | 2 + .../new-york/block/dashboard-01-chunk-4.tsx | 2 + .../new-york/block/dashboard-01-chunk-5.tsx | 2 + .../new-york/block/dashboard-02-chunk-0.tsx | 2 + .../new-york/block/dashboard-02-chunk-1.tsx | 2 + .../new-york/block/dashboard-03-chunk-0.tsx | 2 + .../new-york/block/dashboard-03-chunk-1.tsx | 2 + .../new-york/block/dashboard-04-chunk-0.tsx | 2 + .../new-york/block/dashboard-04-chunk-1.tsx | 2 + .../new-york/block/dashboard-04-chunk-2.tsx | 2 + .../new-york/block/dashboard-05-chunk-0.tsx | 4 +- .../new-york/block/dashboard-05-chunk-1.tsx | 2 + .../new-york/block/dashboard-05-chunk-2.tsx | 2 + .../new-york/block/dashboard-05-chunk-3.tsx | 2 + .../new-york/block/dashboard-05-chunk-4.tsx | 2 + .../registry/new-york/block/dashboard-05.tsx | 2 +- .../new-york/block/dashboard-06-chunk-0.tsx | 2 + .../new-york/block/dashboard-07-chunk-0.tsx | 2 + .../new-york/block/dashboard-07-chunk-1.tsx | 2 + .../new-york/block/dashboard-07-chunk-2.tsx | 2 + .../new-york/block/dashboard-07-chunk-3.tsx | 2 + .../new-york/block/dashboard-07-chunk-4.tsx | 2 + .../new-york/block/dashboard-07-chunk-5.tsx | 2 + apps/www/registry/new-york/ui/chart.tsx | 7 +- apps/www/scripts/build-registry.mts | 2 + 97 files changed, 6337 insertions(+), 838 deletions(-) create mode 100644 apps/www/__registry__/default/block/charts-01.tsx create mode 100644 apps/www/__registry__/new-york/block/charts-01.tsx delete mode 100644 apps/www/components/charts-theme-switcher.tsx create mode 100644 apps/www/components/themes-selector.tsx create mode 100644 apps/www/components/themes-styles.tsx delete mode 100644 apps/www/hooks/use-chart-config.ts create mode 100644 apps/www/hooks/use-themes-config.ts rename apps/www/lib/{themes/dark.json => highlighter-theme.json} (100%) rename apps/www/lib/{chart-themes.ts => themes.ts} (96%) delete mode 100644 apps/www/lib/themes/light.json create mode 100644 apps/www/registry/default/block/charts-01-chunk-0.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-1.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-2.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-3.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-4.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-5.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-6.tsx create mode 100644 apps/www/registry/default/block/charts-01-chunk-7.tsx create mode 100644 apps/www/registry/default/block/charts-01.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-0.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-1.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-2.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-3.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-4.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-5.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-6.tsx create mode 100644 apps/www/registry/new-york/block/charts-01-chunk-7.tsx create mode 100644 apps/www/registry/new-york/block/charts-01.tsx 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..795987ecf46 --- /dev/null +++ b/apps/www/__registry__/default/block/charts-01.tsx @@ -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 ( +
+
+ + + 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__/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..a58176c9331 --- /dev/null +++ b/apps/www/__registry__/new-york/block/charts-01.tsx @@ -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 ( +
+
+ + + 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-05.tsx b/apps/www/__registry__/new-york/block/dashboard-05.tsx index db41324a421..bb35ec41d0b 100644 --- a/apps/www/__registry__/new-york/block/dashboard-05.tsx +++ b/apps/www/__registry__/new-york/block/dashboard-05.tsx @@ -287,7 +287,7 @@ export default function Dashboard() { Your Orders - + Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful Analysis. diff --git a/apps/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx index 03e7147bb33..8b35b010986 100644 --- a/apps/www/app/(app)/blocks/layout.tsx +++ b/apps/www/app/(app)/blocks/layout.tsx @@ -30,7 +30,7 @@ export default function BlocksLayout({ - - - {chartTheme.name} - - - ) - })} - - - - ) -} diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx index cf6e5aed772..6ffed599821 100644 --- a/apps/www/components/command-menu.tsx +++ b/apps/www/components/command-menu.tsx @@ -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, diff --git a/apps/www/components/themes-selector.tsx b/apps/www/components/themes-selector.tsx new file mode 100644 index 00000000000..dd08eb27e78 --- /dev/null +++ b/apps/www/components/themes-selector.tsx @@ -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 ( +
+ {themes.map((theme) => ( +
+ +
+ ))} +
+ ) + } + + return ( + { + 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 ( + + + +
+
+ + + + + {theme.name} +
+
+ + + + {theme.name} + + + ) + })} + + ) +} diff --git a/apps/www/components/themes-styles.tsx b/apps/www/components/themes-styles.tsx new file mode 100644 index 00000000000..890f454776a --- /dev/null +++ b/apps/www/components/themes-styles.tsx @@ -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 ( + + ) +} diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js index a609110cac8..f86f4f8f261 100644 --- a/apps/www/contentlayer.config.js +++ b/apps/www/contentlayer.config.js @@ -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 }) }, diff --git a/apps/www/hooks/use-chart-config.ts b/apps/www/hooks/use-chart-config.ts deleted file mode 100644 index 18c9bd47687..00000000000 --- a/apps/www/hooks/use-chart-config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import useSWR from "swr" - -export function useChartConfig() { - const { data, mutate } = useSWR("chart:config", null) - - return { chartConfig: data, setChartConfig: mutate } -} diff --git a/apps/www/hooks/use-themes-config.ts b/apps/www/hooks/use-themes-config.ts new file mode 100644 index 00000000000..9df09eb021b --- /dev/null +++ b/apps/www/hooks/use-themes-config.ts @@ -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("themes:config", { + activeTheme: THEMES[0], +}) + +export function useThemesConfig() { + const [themesConfig, setThemesConfig] = useAtom(configAtom) + + return { themesConfig, setThemesConfig } +} diff --git a/apps/www/lib/themes/dark.json b/apps/www/lib/highlighter-theme.json similarity index 100% rename from apps/www/lib/themes/dark.json rename to apps/www/lib/highlighter-theme.json diff --git a/apps/www/lib/chart-themes.ts b/apps/www/lib/themes.ts similarity index 96% rename from apps/www/lib/chart-themes.ts rename to apps/www/lib/themes.ts index bc7097ac065..44398f11b7b 100644 --- a/apps/www/lib/chart-themes.ts +++ b/apps/www/lib/themes.ts @@ -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[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] diff --git a/apps/www/lib/themes/light.json b/apps/www/lib/themes/light.json deleted file mode 100644 index b146dd02061..00000000000 --- a/apps/www/lib/themes/light.json +++ /dev/null @@ -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" - } - } - ] -} diff --git a/apps/www/public/registry/styles/default/chart.json b/apps/www/public/registry/styles/default/chart.json index a558fc918d1..a334a7f3d49 100644 --- a/apps/www/public/registry/styles/default/chart.json +++ b/apps/www/public/registry/styles/default/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\"\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..517a6efdac1 --- /dev/null +++ b/apps/www/registry/default/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/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..db67a421320 --- /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..d45831c1c8d --- /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..4a59a4d134a --- /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..7cb78b7554d --- /dev/null +++ b/apps/www/registry/default/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/default/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/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/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx new file mode 100644 index 00000000000..1af18d1b819 --- /dev/null +++ b/apps/www/registry/default/block/charts-01.tsx @@ -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 ( +
+
+ + + 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/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..a8c035428c1 --- /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..ad1cb5b4293 --- /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..b03754dc38e --- /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..840b25fa308 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01.tsx @@ -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 ( +
+
+ + + 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..79f02a115cc 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, @@ -12,7 +14,7 @@ export default function Component() { Your Orders - + Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful Analysis. 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-05.tsx b/apps/www/registry/new-york/block/dashboard-05.tsx index b6f44e3200f..f188ad35baf 100644 --- a/apps/www/registry/new-york/block/dashboard-05.tsx +++ b/apps/www/registry/new-york/block/dashboard-05.tsx @@ -290,7 +290,7 @@ export default function Dashboard() { > Your Orders - + Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful Analysis. 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() {