From 1b23612b8412e498f9bf031958524b32c94de664 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 16 Jul 2024 14:14:37 +0400 Subject: [PATCH 01/13] feat(www): more chart examples --- .../__registry__/default/block/charts-01.tsx | 903 +++++++++++++++++ apps/www/__registry__/index.tsx | 150 +++ .../__registry__/new-york/block/charts-01.tsx | 915 +++++++++++++++++ apps/www/app/(app)/blocks/page.tsx | 2 +- apps/www/components/block-chunk.tsx | 2 +- .../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 | 154 +++ .../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 | 114 +++ apps/www/registry/default/block/charts-01.tsx | 906 +++++++++++++++++ .../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 | 918 ++++++++++++++++++ .../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 | 2 + .../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 + .../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 + 79 files changed, 5849 insertions(+), 6 deletions(-) create mode 100644 apps/www/__registry__/default/block/charts-01.tsx create mode 100644 apps/www/__registry__/new-york/block/charts-01.tsx 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..71cfe4f34d9 --- /dev/null +++ b/apps/www/__registry__/default/block/charts-01.tsx @@ -0,0 +1,903 @@ +"use client" + +import { + Area, + AreaChart, + Bar, + BarChart, + CartesianGrid, + Label, + LabelList, + Line, + LineChart, + PolarAngleAxis, + RadialBar, + RadialBarChart, + Rectangle, + ReferenceLine, + XAxis, + YAxis, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" +import { Separator } from "@/registry/default/ui/separator" + +export const description = "A collection of health charts." + +export const iframeHeight = "900px" + +export const containerClassName = "min-h-screen py-12" + +export default function Charts() { + return ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + /> + + + + +
+
+ + ) +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 0039dcc7b8d..e4b165938fc 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -2150,6 +2150,81 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "charts-01": { + name: "charts-01", + type: "components:block", + registryDependencies: ["chart"], + component: React.lazy(() => import("@/registry/default/block/charts-01")), + source: "__registry__/default/block/charts-01.tsx", + files: ["registry/default/block/charts-01.tsx"], + category: "Application", + subcategory: "Charts", + chunks: [{ + name: "charts-01-chunk-0", + description: "A bar chart showing the number of steps you have walked in the past 7 days.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-0")), + file: "registry/default/block/charts-01-chunk-0.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-1", + description: "A line chart showing the resting heart rate for the past 7 days.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-1")), + file: "registry/default/block/charts-01-chunk-1.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-2", + description: "Two horizontal bar charts showing total steps taken during the current year and last year.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-2")), + file: "registry/default/block/charts-01-chunk-2.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-3", + description: "A bar chart showing the walking and running distance for the past 7 days.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-3")), + file: "registry/default/block/charts-01-chunk-3.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-4", + description: "A bar chart showing move, exercise, and stand progress.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-4")), + file: "registry/default/block/charts-01-chunk-4.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-5", + description: "A radial bar chart showing the percentage of time spent moving, exercising, and standing.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-5")), + file: "registry/default/block/charts-01-chunk-5.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-6", + description: "A bar chart showing active energy in the past 7 days.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-6")), + file: "registry/default/block/charts-01-chunk-6.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-7", + description: "An area chart showing the time spent in bed for the past 7 days.", + component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-7")), + file: "registry/default/block/charts-01-chunk-7.tsx", + container: { + className: "undefined" + } + }] + }, "dashboard-05": { name: "dashboard-05", type: "components:block", @@ -5288,6 +5363,81 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "charts-01": { + name: "charts-01", + type: "components:block", + registryDependencies: ["chart"], + component: React.lazy(() => import("@/registry/new-york/block/charts-01")), + source: "__registry__/new-york/block/charts-01.tsx", + files: ["registry/new-york/block/charts-01.tsx"], + category: "Application", + subcategory: "Charts", + chunks: [{ + name: "charts-01-chunk-0", + description: "A bar chart showing the number of steps you have walked in the past 7 days.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-0")), + file: "registry/new-york/block/charts-01-chunk-0.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-1", + description: "A line chart showing the resting heart rate for the past 7 days.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-1")), + file: "registry/new-york/block/charts-01-chunk-1.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-2", + description: "Two horizontal bar charts showing total steps taken during the current year and last year.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-2")), + file: "registry/new-york/block/charts-01-chunk-2.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-3", + description: "A bar chart showing the walking and running distance for the past 7 days.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-3")), + file: "registry/new-york/block/charts-01-chunk-3.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-4", + description: "A bar chart showing move, exercise, and stand progress.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-4")), + file: "registry/new-york/block/charts-01-chunk-4.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-5", + description: "A radial bar chart showing the percentage of time spent moving, exercising, and standing.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-5")), + file: "registry/new-york/block/charts-01-chunk-5.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-6", + description: "A bar chart showing active energy in the past 7 days.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-6")), + file: "registry/new-york/block/charts-01-chunk-6.tsx", + container: { + className: "undefined" + } + },{ + name: "charts-01-chunk-7", + description: "An area chart showing the time spent in bed for the past 7 days.", + component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-7")), + file: "registry/new-york/block/charts-01-chunk-7.tsx", + container: { + className: "undefined" + } + }] + }, "dashboard-05": { name: "dashboard-05", type: "components:block", diff --git a/apps/www/__registry__/new-york/block/charts-01.tsx b/apps/www/__registry__/new-york/block/charts-01.tsx new file mode 100644 index 00000000000..7e14a277318 --- /dev/null +++ b/apps/www/__registry__/new-york/block/charts-01.tsx @@ -0,0 +1,915 @@ +"use client" + +import { + Area, + AreaChart, + Bar, + BarChart, + CartesianGrid, + Label, + LabelList, + Line, + LineChart, + PolarAngleAxis, + RadialBar, + RadialBarChart, + Rectangle, + ReferenceLine, + XAxis, + YAxis, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" +import { Separator } from "@/registry/new-york/ui/separator" + +export const description = "A collection of health charts." + +export const iframeHeight = "900px" + +export const containerClassName = "min-h-screen py-12" + +export default function Charts() { + return ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + +
+
+ + ) +} diff --git a/apps/www/app/(app)/blocks/page.tsx b/apps/www/app/(app)/blocks/page.tsx index f1b2e297dbb..371313e9642 100644 --- a/apps/www/app/(app)/blocks/page.tsx +++ b/apps/www/app/(app)/blocks/page.tsx @@ -3,7 +3,7 @@ import { BlockDisplay } from "@/components/block-display" export default async function BlocksPage() { const blocks = (await getAllBlockIds()).filter( - (name) => !name.startsWith("chart") + (name) => !name.startsWith("chart-") ) return blocks.map((name, index) => ( diff --git a/apps/www/components/block-chunk.tsx b/apps/www/components/block-chunk.tsx index 41046b6eebc..2ee0902f3df 100644 --- a/apps/www/components/block-chunk.tsx +++ b/apps/www/components/block-chunk.tsx @@ -39,7 +39,7 @@ export function BlockChunk({ >
{children}
{chunk.code && ( -
+
}\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n
\n )\n })}\n
\n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/chart.json b/apps/www/public/registry/styles/new-york/chart.json index a558fc918d1..f299bee0b0d 100644 --- a/apps/www/public/registry/styles/new-york/chart.json +++ b/apps/www/public/registry/styles/new-york/chart.json @@ -10,7 +10,7 @@ "files": [ { "name": "chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport {\n NameType,\n Payload,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([_, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/registry/blocks.ts b/apps/www/registry/blocks.ts index cf7c57c4f7f..9818ae592d7 100644 --- a/apps/www/registry/blocks.ts +++ b/apps/www/registry/blocks.ts @@ -1,6 +1,14 @@ import { Registry } from "@/registry/schema" export const blocks: Registry = [ + { + name: "charts-01", + type: "components:block", + registryDependencies: ["chart"], + files: ["block/charts-01.tsx"], + category: "Application", + subcategory: "Charts", + }, { name: "dashboard-05", type: "components:block", diff --git a/apps/www/registry/default/block/charts-01-chunk-0.tsx b/apps/www/registry/default/block/charts-01-chunk-0.tsx new file mode 100644 index 00000000000..8ccd890a45c --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-0.tsx @@ -0,0 +1,154 @@ +"use client" + +import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305 steps. + + + You need 12,584{" "} + more steps to reach your goal. + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-1.tsx b/apps/www/registry/default/block/charts-01-chunk-1.tsx new file mode 100644 index 00000000000..0c2c319bf1d --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-1.tsx @@ -0,0 +1,140 @@ +"use client" + +import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-2.tsx b/apps/www/registry/default/block/charts-01-chunk-2.tsx new file mode 100644 index 00000000000..6c2a9e5aca0 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-2.tsx @@ -0,0 +1,129 @@ +"use client" + +import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { ChartContainer } from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-3.tsx b/apps/www/registry/default/block/charts-01-chunk-3.tsx new file mode 100644 index 00000000000..6a79cbd20a0 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-3.tsx @@ -0,0 +1,105 @@ +"use client" + +import { Bar, BarChart, Rectangle, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { ChartContainer } from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 miles per + day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-4.tsx b/apps/www/registry/default/block/charts-01-chunk-4.tsx new file mode 100644 index 00000000000..3d4221bba54 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-4.tsx @@ -0,0 +1,117 @@ +"use client" + +import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts" + +import { Card, CardContent, CardFooter } from "@/registry/default/ui/card" +import { ChartContainer } from "@/registry/default/ui/chart" +import { Separator } from "@/registry/default/ui/separator" + +export default function Component() { + return ( + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-5.tsx b/apps/www/registry/default/block/charts-01-chunk-5.tsx new file mode 100644 index 00000000000..f593f193e20 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-5.tsx @@ -0,0 +1,99 @@ +"use client" + +import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts" + +import { Card, CardContent } from "@/registry/default/ui/card" +import { ChartContainer } from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-6.tsx b/apps/www/registry/default/block/charts-01-chunk-6.tsx new file mode 100644 index 00000000000..41b71c03461 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-6.tsx @@ -0,0 +1,104 @@ +"use client" + +import { Bar, BarChart, Rectangle, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { ChartContainer } from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01-chunk-7.tsx b/apps/www/registry/default/block/charts-01-chunk-7.tsx new file mode 100644 index 00000000000..3eda94aa737 --- /dev/null +++ b/apps/www/registry/default/block/charts-01-chunk-7.tsx @@ -0,0 +1,114 @@ +"use client" + +import { Area, AreaChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export default function Component() { + return ( + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx new file mode 100644 index 00000000000..4dab9f328bb --- /dev/null +++ b/apps/www/registry/default/block/charts-01.tsx @@ -0,0 +1,906 @@ +"use client" + +import { + Area, + AreaChart, + Bar, + BarChart, + CartesianGrid, + Label, + LabelList, + Line, + LineChart, + PolarAngleAxis, + RadialBar, + RadialBarChart, + Rectangle, + ReferenceLine, + XAxis, + YAxis, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" +import { Separator } from "@/registry/default/ui/separator" + +export const description = "A collection of health charts." + +export const iframeHeight = "900px" + +export const containerClassName = "min-h-screen py-12" + +export default function Charts() { + return ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + /> + + + + +
+
+ + ) +} diff --git a/apps/www/registry/default/block/dashboard-01-chunk-0.tsx b/apps/www/registry/default/block/dashboard-01-chunk-0.tsx index 5e44cbbb630..4fe27e7c82f 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { DollarSign } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx b/apps/www/registry/default/block/dashboard-01-chunk-1.tsx index e15cc01b060..ec3ac821535 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Users } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx b/apps/www/registry/default/block/dashboard-01-chunk-2.tsx index a81d58c8714..312104c53f2 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { CreditCard } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx b/apps/www/registry/default/block/dashboard-01-chunk-3.tsx index 1b7b3d202cb..43252bbc4dd 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Activity } from "lucide-react" import { diff --git a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx b/apps/www/registry/default/block/dashboard-01-chunk-4.tsx index e0350aca14e..59b3088227a 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" import { ArrowUpRight } from "lucide-react" diff --git a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx b/apps/www/registry/default/block/dashboard-01-chunk-5.tsx index c33a1e3357d..af5efea9b7b 100644 --- a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx +++ b/apps/www/registry/default/block/dashboard-01-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Avatar, AvatarFallback, diff --git a/apps/www/registry/default/block/dashboard-02-chunk-0.tsx b/apps/www/registry/default/block/dashboard-02-chunk-0.tsx index 07bb20aaa66..de9cf4fa936 100644 --- a/apps/www/registry/default/block/dashboard-02-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-02-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-02-chunk-1.tsx b/apps/www/registry/default/block/dashboard-02-chunk-1.tsx index 119152ea2c4..63cf0f308b8 100644 --- a/apps/www/registry/default/block/dashboard-02-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-02-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" export default function Component() { diff --git a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx b/apps/www/registry/default/block/dashboard-03-chunk-0.tsx index 1ff4631b9bb..54bf64ef1b3 100644 --- a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-03-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Bird, Rabbit, Turtle } from "lucide-react" import { Input } from "@/registry/default/ui/input" diff --git a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx b/apps/www/registry/default/block/dashboard-03-chunk-1.tsx index d623ff7b939..d6fb596f282 100644 --- a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-03-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { CornerDownLeft, Mic, Paperclip } from "lucide-react" import { Button } from "@/registry/default/ui/button" diff --git a/apps/www/registry/default/block/dashboard-04-chunk-0.tsx b/apps/www/registry/default/block/dashboard-04-chunk-0.tsx index 5e31d48fc7d..406f27e0896 100644 --- a/apps/www/registry/default/block/dashboard-04-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-04-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" export default function Component() { diff --git a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx b/apps/www/registry/default/block/dashboard-04-chunk-1.tsx index af35b3ca64c..1572ff5d51d 100644 --- a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-04-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-04-chunk-2.tsx b/apps/www/registry/default/block/dashboard-04-chunk-2.tsx index 828f040fd5c..e3011466e0a 100644 --- a/apps/www/registry/default/block/dashboard-04-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-04-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-0.tsx b/apps/www/registry/default/block/dashboard-05-chunk-0.tsx index 226b87db3cb..2fd31e9eab7 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-1.tsx b/apps/www/registry/default/block/dashboard-05-chunk-1.tsx index 8736df7db99..32589143461 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx b/apps/www/registry/default/block/dashboard-05-chunk-2.tsx index c391f355e38..7fdf1ccbd29 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx b/apps/www/registry/default/block/dashboard-05-chunk-3.tsx index f0b41b7c044..91cb414544b 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Badge } from "@/registry/default/ui/badge" import { Card, diff --git a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx b/apps/www/registry/default/block/dashboard-05-chunk-4.tsx index b42b344bca4..14236a63a1c 100644 --- a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx +++ b/apps/www/registry/default/block/dashboard-05-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import { ChevronLeft, ChevronRight, diff --git a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx b/apps/www/registry/default/block/dashboard-06-chunk-0.tsx index 7c90e90d5c6..810e0505a64 100644 --- a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-06-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { MoreHorizontal } from "lucide-react" diff --git a/apps/www/registry/default/block/dashboard-07-chunk-0.tsx b/apps/www/registry/default/block/dashboard-07-chunk-0.tsx index d5eab225f82..7722f9d0437 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-0.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-07-chunk-1.tsx b/apps/www/registry/default/block/dashboard-07-chunk-1.tsx index 7f101866af0..c9999aeebba 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-1.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { PlusCircle } from "lucide-react" import { Button } from "@/registry/default/ui/button" diff --git a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx b/apps/www/registry/default/block/dashboard-07-chunk-2.tsx index 5e932c96207..09283164fe4 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-07-chunk-3.tsx b/apps/www/registry/default/block/dashboard-07-chunk-3.tsx index 1bebd5f6140..33e68377a1f 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-3.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/default/block/dashboard-07-chunk-4.tsx b/apps/www/registry/default/block/dashboard-07-chunk-4.tsx index 7f3f7a6748e..824ecd44628 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-4.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { Upload } from "lucide-react" diff --git a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx b/apps/www/registry/default/block/dashboard-07-chunk-5.tsx index 9af1101aca6..0a83a596346 100644 --- a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx +++ b/apps/www/registry/default/block/dashboard-07-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/default/ui/button" import { Card, diff --git a/apps/www/registry/default/ui/chart.tsx b/apps/www/registry/default/ui/chart.tsx index 24568764004..346e1525f1d 100644 --- a/apps/www/registry/default/ui/chart.tsx +++ b/apps/www/registry/default/ui/chart.tsx @@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef< data-chart={chartId} ref={ref} className={cn( - "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className )} {...props} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-0.tsx b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx new file mode 100644 index 00000000000..e6d2eefd0f2 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx @@ -0,0 +1,155 @@ +"use client" + +import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305 steps. + + + You need 12,584{" "} + more steps to reach your goal. + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-1.tsx b/apps/www/registry/new-york/block/charts-01-chunk-1.tsx new file mode 100644 index 00000000000..20f41b147e2 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-1.tsx @@ -0,0 +1,140 @@ +"use client" + +import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-2.tsx b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx new file mode 100644 index 00000000000..6aac5c6d3e7 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx @@ -0,0 +1,129 @@ +"use client" + +import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { ChartContainer } from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-3.tsx b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx new file mode 100644 index 00000000000..f922f376457 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx @@ -0,0 +1,105 @@ +"use client" + +import { Bar, BarChart, Rectangle, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { ChartContainer } from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 miles per + day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-4.tsx b/apps/www/registry/new-york/block/charts-01-chunk-4.tsx new file mode 100644 index 00000000000..d04414c073b --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-4.tsx @@ -0,0 +1,117 @@ +"use client" + +import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts" + +import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card" +import { ChartContainer } from "@/registry/new-york/ui/chart" +import { Separator } from "@/registry/new-york/ui/separator" + +export default function Component() { + return ( + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-5.tsx b/apps/www/registry/new-york/block/charts-01-chunk-5.tsx new file mode 100644 index 00000000000..5f36657660b --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-5.tsx @@ -0,0 +1,99 @@ +"use client" + +import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts" + +import { Card, CardContent } from "@/registry/new-york/ui/card" +import { ChartContainer } from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-6.tsx b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx new file mode 100644 index 00000000000..feff7315987 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx @@ -0,0 +1,104 @@ +"use client" + +import { Bar, BarChart, Rectangle, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { ChartContainer } from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01-chunk-7.tsx b/apps/www/registry/new-york/block/charts-01-chunk-7.tsx new file mode 100644 index 00000000000..100c2b3a3c0 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01-chunk-7.tsx @@ -0,0 +1,125 @@ +"use client" + +import { Area, AreaChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export default function Component() { + return ( + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/charts-01.tsx b/apps/www/registry/new-york/block/charts-01.tsx new file mode 100644 index 00000000000..2f59c336525 --- /dev/null +++ b/apps/www/registry/new-york/block/charts-01.tsx @@ -0,0 +1,918 @@ +"use client" + +import { + Area, + AreaChart, + Bar, + BarChart, + CartesianGrid, + Label, + LabelList, + Line, + LineChart, + PolarAngleAxis, + RadialBar, + RadialBarChart, + Rectangle, + ReferenceLine, + XAxis, + YAxis, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" +import { Separator } from "@/registry/new-york/ui/separator" + +export const description = "A collection of health charts." + +export const iframeHeight = "900px" + +export const containerClassName = "min-h-screen py-12" + +export default function Charts() { + return ( + <> + +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + shape={(props: any) => { + return ( + + ) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305{" "} + steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 + miles per day. + + + +
+ 12.5 + + miles/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + { + return ( + + ) + }} + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + +
+
+ + ) +} diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx index 7cb58559d0e..cbb1464e379 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { DollarSign } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx index bf8fbb39a32..0e090f523ce 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Users } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx index 71d2b14edcd..ac121ea09cb 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { CreditCard } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx index 9a2628ee9bd..3dab661eef5 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Activity } from "lucide-react" import { diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx index 91000c60a08..f24999e4b12 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" import { ArrowUpRight } from "lucide-react" diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx index e9fe93452d9..a9d904348fa 100644 --- a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx +++ b/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Avatar, AvatarFallback, diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx index cebced7074f..86cb08dda79 100644 --- a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx index 47ab92fb02e..0fd5cd0b94d 100644 --- a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" export default function Component() { diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx index 79d0fb2899f..735ffc053be 100644 --- a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Bird, Rabbit, Turtle } from "lucide-react" import { Input } from "@/registry/new-york/ui/input" diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx index 115f6360f5f..709b45c689b 100644 --- a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { CornerDownLeft, Mic, Paperclip } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx index 5e31d48fc7d..406f27e0896 100644 --- a/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Link from "next/link" export default function Component() { diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx index 28cd68c9c5e..289544ec759 100644 --- a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx index 56b227a9205..a3f20b79be4 100644 --- a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx index 3b3eade1da5..fe50d860afc 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx index 3f3d07f1266..bd780f90c92 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx index 457b696be64..3ea1caea2f8 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx index 99c32e43351..626b1bf3d33 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Badge } from "@/registry/new-york/ui/badge" import { Card, diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx index 9570e3df9cd..5fa654e8f62 100644 --- a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx +++ b/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import { ChevronLeft, ChevronRight, diff --git a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx index 544dea9b2f2..1604e4bf728 100644 --- a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { MoreHorizontal } from "lucide-react" diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx index a1a262ba4ea..f97e3902c5a 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx index 5325cfe2088..1e6535fe946 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx @@ -1,3 +1,5 @@ +"use client" + import { PlusCircle } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx index b8301b5a6ae..c391a2c2bee 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx index e180498f220..7b4a53495fb 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx @@ -1,3 +1,5 @@ +"use client" + import { Card, CardContent, diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx index 33816c51a16..06c58d33037 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx @@ -1,3 +1,5 @@ +"use client" + import Image from "next/image" import { Upload } from "lucide-react" diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx index 39af47fbeea..a2279c13bd5 100644 --- a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx +++ b/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx @@ -1,3 +1,5 @@ +"use client" + import { Button } from "@/registry/new-york/ui/button" import { Card, diff --git a/apps/www/registry/new-york/ui/chart.tsx b/apps/www/registry/new-york/ui/chart.tsx index 24568764004..5cff3d8e8e7 100644 --- a/apps/www/registry/new-york/ui/chart.tsx +++ b/apps/www/registry/new-york/ui/chart.tsx @@ -2,6 +2,11 @@ import * as React from "react" import * as RechartsPrimitive from "recharts" +import { + NameType, + Payload, + ValueType, +} from "recharts/types/component/DefaultTooltipContent" import { cn } from "@/lib/utils" @@ -52,7 +57,7 @@ const ChartContainer = React.forwardRef< data-chart={chartId} ref={ref} className={cn( - "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className )} {...props} diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 976e6e4c36d..7b37944d615 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -180,6 +180,8 @@ export const Index: Record = { }) const code = ` + 'use client' + ${componnetImportLines.join("\n")} export default function Component() { From 3ca0bc9704b207bb09336f50bed6a5d61783851f Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 16 Jul 2024 20:23:18 +0400 Subject: [PATCH 02/13] feat(www): add tooltip examples --- .../default/block/chart-tooltip-advanced.tsx | 123 +++++++++++ .../default/block/chart-tooltip-default.tsx | 86 ++++++++ .../default/block/chart-tooltip-formatter.tsx | 100 +++++++++ .../default/block/chart-tooltip-icons.tsx | 87 ++++++++ .../block/chart-tooltip-indicator-line.tsx | 84 ++++++++ .../block/chart-tooltip-indicator-none.tsx | 84 ++++++++ .../block/chart-tooltip-label-custom.tsx | 91 ++++++++ .../block/chart-tooltip-label-formatter.tsx | 94 +++++++++ .../block/chart-tooltip-label-none.tsx | 84 ++++++++ apps/www/__registry__/index.tsx | 198 ++++++++++++++++++ .../new-york/block/chart-tooltip-advanced.tsx | 123 +++++++++++ .../new-york/block/chart-tooltip-default.tsx | 86 ++++++++ .../block/chart-tooltip-formatter.tsx | 100 +++++++++ .../new-york/block/chart-tooltip-icons.tsx | 87 ++++++++ .../block/chart-tooltip-indicator-line.tsx | 84 ++++++++ .../block/chart-tooltip-indicator-none.tsx | 84 ++++++++ .../block/chart-tooltip-label-custom.tsx | 91 ++++++++ .../block/chart-tooltip-label-formatter.tsx | 94 +++++++++ .../block/chart-tooltip-label-none.tsx | 84 ++++++++ apps/www/app/(app)/charts/charts.tsx | 10 + apps/www/app/(app)/charts/page.tsx | 33 +++ apps/www/components/chart-toolbar.tsx | 76 ++++++- apps/www/components/charts-nav.tsx | 4 + .../public/registry/styles/default/chart.json | 2 +- .../registry/styles/new-york/chart.json | 2 +- apps/www/registry/charts.ts | 72 +++++++ .../default/block/chart-tooltip-advanced.tsx | 123 +++++++++++ .../default/block/chart-tooltip-default.tsx | 86 ++++++++ .../default/block/chart-tooltip-formatter.tsx | 100 +++++++++ .../default/block/chart-tooltip-icons.tsx | 87 ++++++++ .../block/chart-tooltip-indicator-line.tsx | 84 ++++++++ .../block/chart-tooltip-indicator-none.tsx | 84 ++++++++ .../block/chart-tooltip-label-custom.tsx | 91 ++++++++ .../block/chart-tooltip-label-formatter.tsx | 94 +++++++++ .../block/chart-tooltip-label-none.tsx | 84 ++++++++ apps/www/registry/default/ui/chart.tsx | 2 +- .../new-york/block/chart-tooltip-advanced.tsx | 123 +++++++++++ .../new-york/block/chart-tooltip-default.tsx | 86 ++++++++ .../block/chart-tooltip-formatter.tsx | 100 +++++++++ .../new-york/block/chart-tooltip-icons.tsx | 87 ++++++++ .../block/chart-tooltip-indicator-line.tsx | 84 ++++++++ .../block/chart-tooltip-indicator-none.tsx | 84 ++++++++ .../block/chart-tooltip-label-custom.tsx | 91 ++++++++ .../block/chart-tooltip-label-formatter.tsx | 94 +++++++++ .../block/chart-tooltip-label-none.tsx | 84 ++++++++ apps/www/registry/new-york/ui/chart.tsx | 2 +- 46 files changed, 3722 insertions(+), 11 deletions(-) create mode 100644 apps/www/__registry__/default/block/chart-tooltip-advanced.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-default.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-formatter.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-icons.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx create mode 100644 apps/www/__registry__/default/block/chart-tooltip-label-none.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-default.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx create mode 100644 apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-advanced.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-default.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-formatter.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-icons.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-indicator-line.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-indicator-none.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-label-custom.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-label-formatter.tsx create mode 100644 apps/www/registry/default/block/chart-tooltip-label-none.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-advanced.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-default.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-formatter.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-icons.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx create mode 100644 apps/www/registry/new-york/block/chart-tooltip-label-none.tsx diff --git a/apps/www/__registry__/default/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/default/block/chart-tooltip-advanced.tsx new file mode 100644 index 00000000000..7a700798212 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-advanced.tsx @@ -0,0 +1,123 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Advanced + + Tooltip with custom formatter and total. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( + <> +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+ {/* Add this after the last item */} + {index === 1 && ( +
+ Total +
+ {item.payload.running + item.payload.swimming} + + kcal + +
+
+ )} + + )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-default.tsx b/apps/www/__registry__/default/block/chart-tooltip-default.tsx new file mode 100644 index 00000000000..a4951569374 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-default.tsx @@ -0,0 +1,86 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Default + + Default tooltip with ChartTooltipContent. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/default/block/chart-tooltip-formatter.tsx new file mode 100644 index 00000000000..8c1b6d7009a --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-formatter.tsx @@ -0,0 +1,100 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Formatter + Tooltip with custom formatter . + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+
+ )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-icons.tsx b/apps/www/__registry__/default/block/chart-tooltip-icons.tsx new file mode 100644 index 00000000000..a95db7a7b5f --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-icons.tsx @@ -0,0 +1,87 @@ +"use client" + +import { Footprints, Waves } from "lucide-react" +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + icon: Footprints, + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + icon: Waves, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Icons + Tooltip with icons. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx new file mode 100644 index 00000000000..c5cc9a676dc --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Line Indicator + Tooltip with line indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx new file mode 100644 index 00000000000..52c3790224f --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Indicator + Tooltip with no indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx new file mode 100644 index 00000000000..ebd735e0753 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx @@ -0,0 +1,91 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + activities: { + label: "Activities", + }, + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Custom label + + Tooltip with custom label from chartConfig. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx new file mode 100644 index 00000000000..ed1173c5b7b --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx @@ -0,0 +1,94 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Label Formatter + Tooltip with label formatter. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/default/block/chart-tooltip-label-none.tsx new file mode 100644 index 00000000000..4aadf3fc795 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-tooltip-label-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Label + Tooltip with no label. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index e4b165938fc..fdcf817bb1e 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -3217,6 +3217,105 @@ export const Index: Record = { subcategory: "Radial", chunks: [] }, + "chart-tooltip-default": { + name: "chart-tooltip-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-default")), + source: "__registry__/default/block/chart-tooltip-default.tsx", + files: ["registry/default/block/chart-tooltip-default.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-indicator-line": { + name: "chart-tooltip-indicator-line", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-line")), + source: "__registry__/default/block/chart-tooltip-indicator-line.tsx", + files: ["registry/default/block/chart-tooltip-indicator-line.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-indicator-none": { + name: "chart-tooltip-indicator-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-none")), + source: "__registry__/default/block/chart-tooltip-indicator-none.tsx", + files: ["registry/default/block/chart-tooltip-indicator-none.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-label-none": { + name: "chart-tooltip-label-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-none")), + source: "__registry__/default/block/chart-tooltip-label-none.tsx", + files: ["registry/default/block/chart-tooltip-label-none.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-label-custom": { + name: "chart-tooltip-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-custom")), + source: "__registry__/default/block/chart-tooltip-label-custom.tsx", + files: ["registry/default/block/chart-tooltip-label-custom.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-label-formatter": { + name: "chart-tooltip-label-formatter", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-formatter")), + source: "__registry__/default/block/chart-tooltip-label-formatter.tsx", + files: ["registry/default/block/chart-tooltip-label-formatter.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-formatter": { + name: "chart-tooltip-formatter", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-formatter")), + source: "__registry__/default/block/chart-tooltip-formatter.tsx", + files: ["registry/default/block/chart-tooltip-formatter.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-icons": { + name: "chart-tooltip-icons", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-icons")), + source: "__registry__/default/block/chart-tooltip-icons.tsx", + files: ["registry/default/block/chart-tooltip-icons.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-advanced": { + name: "chart-tooltip-advanced", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-tooltip-advanced")), + source: "__registry__/default/block/chart-tooltip-advanced.tsx", + files: ["registry/default/block/chart-tooltip-advanced.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, }, "new-york": { "accordion": { name: "accordion", @@ -6430,5 +6529,104 @@ export const Index: Record = { subcategory: "Radial", chunks: [] }, + "chart-tooltip-default": { + name: "chart-tooltip-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-default")), + source: "__registry__/new-york/block/chart-tooltip-default.tsx", + files: ["registry/new-york/block/chart-tooltip-default.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-indicator-line": { + name: "chart-tooltip-indicator-line", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-line")), + source: "__registry__/new-york/block/chart-tooltip-indicator-line.tsx", + files: ["registry/new-york/block/chart-tooltip-indicator-line.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-indicator-none": { + name: "chart-tooltip-indicator-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-none")), + source: "__registry__/new-york/block/chart-tooltip-indicator-none.tsx", + files: ["registry/new-york/block/chart-tooltip-indicator-none.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-label-none": { + name: "chart-tooltip-label-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-none")), + source: "__registry__/new-york/block/chart-tooltip-label-none.tsx", + files: ["registry/new-york/block/chart-tooltip-label-none.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-label-custom": { + name: "chart-tooltip-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-custom")), + source: "__registry__/new-york/block/chart-tooltip-label-custom.tsx", + files: ["registry/new-york/block/chart-tooltip-label-custom.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-label-formatter": { + name: "chart-tooltip-label-formatter", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-formatter")), + source: "__registry__/new-york/block/chart-tooltip-label-formatter.tsx", + files: ["registry/new-york/block/chart-tooltip-label-formatter.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-formatter": { + name: "chart-tooltip-formatter", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-formatter")), + source: "__registry__/new-york/block/chart-tooltip-formatter.tsx", + files: ["registry/new-york/block/chart-tooltip-formatter.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-icons": { + name: "chart-tooltip-icons", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-icons")), + source: "__registry__/new-york/block/chart-tooltip-icons.tsx", + files: ["registry/new-york/block/chart-tooltip-icons.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, + "chart-tooltip-advanced": { + name: "chart-tooltip-advanced", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-advanced")), + source: "__registry__/new-york/block/chart-tooltip-advanced.tsx", + files: ["registry/new-york/block/chart-tooltip-advanced.tsx"], + category: "Charts", + subcategory: "Tooltip", + chunks: [] + }, }, } diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx new file mode 100644 index 00000000000..bbc9f115dd6 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx @@ -0,0 +1,123 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Advanced + + Tooltip with custom formatter and total. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( + <> +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+ {/* Add this after the last item */} + {index === 1 && ( +
+ Total +
+ {item.payload.running + item.payload.swimming} + + kcal + +
+
+ )} + + )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx new file mode 100644 index 00000000000..93fe696fa43 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx @@ -0,0 +1,86 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Default + + Default tooltip with ChartTooltipContent. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx new file mode 100644 index 00000000000..e67f266f270 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx @@ -0,0 +1,100 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Formatter + Tooltip with custom formatter . + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+
+ )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx new file mode 100644 index 00000000000..f2bf0719230 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx @@ -0,0 +1,87 @@ +"use client" + +import { Footprints, Waves } from "lucide-react" +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + icon: Footprints, + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + icon: Waves, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Icons + Tooltip with icons. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx new file mode 100644 index 00000000000..431dbf6719d --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Line Indicator + Tooltip with line indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx new file mode 100644 index 00000000000..29c898a861c --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Indicator + Tooltip with no indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx new file mode 100644 index 00000000000..f632510879e --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx @@ -0,0 +1,91 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + activities: { + label: "Activities", + }, + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Custom label + + Tooltip with custom label from chartConfig. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx new file mode 100644 index 00000000000..220a445b0c1 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx @@ -0,0 +1,94 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Label Formatter + Tooltip with label formatter. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx new file mode 100644 index 00000000000..a655168dff2 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Label + Tooltip with no label. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/app/(app)/charts/charts.tsx b/apps/www/app/(app)/charts/charts.tsx index 0f24f6828ed..1ff2ca3ee1a 100644 --- a/apps/www/app/(app)/charts/charts.tsx +++ b/apps/www/app/(app)/charts/charts.tsx @@ -64,3 +64,13 @@ export { default as ChartRadialGrid } from "@/registry/new-york/block/chart-radi export { default as ChartRadialText } from "@/registry/new-york/block/chart-radial-text" export { default as ChartRadialShape } from "@/registry/new-york/block/chart-radial-shape" export { default as ChartRadialStacked } from "@/registry/new-york/block/chart-radial-stacked" + +export { default as ChartTooltipDefault } from "@/registry/new-york/block/chart-tooltip-default" +export { default as ChartTooltipIndicatorLine } from "@/registry/new-york/block/chart-tooltip-indicator-line" +export { default as ChartTooltipIndicatorNone } from "@/registry/new-york/block/chart-tooltip-indicator-none" +export { default as ChartTooltipLabelCustom } from "@/registry/new-york/block/chart-tooltip-label-custom" +export { default as ChartTooltipLabelFormatter } from "@/registry/new-york/block/chart-tooltip-label-formatter" +export { default as ChartTooltipLabelNone } from "@/registry/new-york/block/chart-tooltip-label-none" +export { default as ChartTooltipFormatter } from "@/registry/new-york/block/chart-tooltip-formatter" +export { default as ChartTooltipIcons } from "@/registry/new-york/block/chart-tooltip-icons" +export { default as ChartTooltipAdvanced } from "@/registry/new-york/block/chart-tooltip-advanced" diff --git a/apps/www/app/(app)/charts/page.tsx b/apps/www/app/(app)/charts/page.tsx index a8c80b23e5d..9d0c899ef47 100644 --- a/apps/www/app/(app)/charts/page.tsx +++ b/apps/www/app/(app)/charts/page.tsx @@ -270,6 +270,39 @@ export default function ChartsPage() {
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/apps/www/components/chart-toolbar.tsx b/apps/www/components/chart-toolbar.tsx index d7ebd9d2e46..bd7b07b4c45 100644 --- a/apps/www/components/chart-toolbar.tsx +++ b/apps/www/components/chart-toolbar.tsx @@ -12,6 +12,7 @@ import { BarChartBig, Hexagon, LineChart, + MousePointer2, PieChart, Radar, } from "lucide-react" @@ -24,13 +25,7 @@ export function ChartToolbar({ return (
- {chart.subcategory === "Line" && } - {chart.subcategory === "Bar" && } - {chart.subcategory === "Pie" && } - {chart.subcategory === "Area" && } - {chart.subcategory === "Radar" && } - {chart.subcategory === "Radial" && } - {chart.subcategory} Chart +
) } + +function ChartTitle({ chart }: { chart: Block }) { + const { subcategory } = chart + + if (!subcategory) { + return null + } + + if (subcategory === "Line") { + return ( + <> + Chart + + ) + } + + if (subcategory === "Bar") { + return ( + <> + Chart + + ) + } + + if (subcategory === "Pie") { + return ( + <> + Chart + + ) + } + + if (subcategory === "Area") { + return ( + <> + Chart + + ) + } + + if (subcategory === "Radar") { + return ( + <> + Chart + + ) + } + + if (subcategory === "Radial") { + return ( + <> + Chart + + ) + } + + if (subcategory === "Tooltip") { + return ( + <> + + Tooltip + + ) + } + + return subcategory +} diff --git a/apps/www/components/charts-nav.tsx b/apps/www/components/charts-nav.tsx index c17bcd64736..63e7279db19 100644 --- a/apps/www/components/charts-nav.tsx +++ b/apps/www/components/charts-nav.tsx @@ -31,6 +31,10 @@ const examples = [ name: "Radial Chart", href: "/charts#radial-chart", }, + { + name: "Tooltip", + href: "/charts#tooltip", + }, ] export function ChartsNav({ diff --git a/apps/www/public/registry/styles/default/chart.json b/apps/www/public/registry/styles/default/chart.json index a334a7f3d49..c2e98bb3f86 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 f299bee0b0d..66393d502af 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\"\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" + "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/charts.ts b/apps/www/registry/charts.ts index d65e69f133b..7b3a87b38c0 100644 --- a/apps/www/registry/charts.ts +++ b/apps/www/registry/charts.ts @@ -500,4 +500,76 @@ export const charts: Registry = [ category: "Charts", subcategory: "Radial", }, + { + name: "chart-tooltip-default", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-default.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-indicator-line", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-indicator-line.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-indicator-none", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-indicator-none.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-label-none", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-label-none.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-label-custom", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-label-custom.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-label-formatter", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-label-formatter.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-formatter", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-formatter.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-icons", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-icons.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, + { + name: "chart-tooltip-advanced", + type: "components:block", + registryDependencies: ["card", "chart"], + files: ["block/chart-tooltip-advanced.tsx"], + category: "Charts", + subcategory: "Tooltip", + }, ] diff --git a/apps/www/registry/default/block/chart-tooltip-advanced.tsx b/apps/www/registry/default/block/chart-tooltip-advanced.tsx new file mode 100644 index 00000000000..7a700798212 --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-advanced.tsx @@ -0,0 +1,123 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Advanced + + Tooltip with custom formatter and total. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( + <> +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+ {/* Add this after the last item */} + {index === 1 && ( +
+ Total +
+ {item.payload.running + item.payload.swimming} + + kcal + +
+
+ )} + + )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-default.tsx b/apps/www/registry/default/block/chart-tooltip-default.tsx new file mode 100644 index 00000000000..a4951569374 --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-default.tsx @@ -0,0 +1,86 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Default + + Default tooltip with ChartTooltipContent. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-formatter.tsx b/apps/www/registry/default/block/chart-tooltip-formatter.tsx new file mode 100644 index 00000000000..8c1b6d7009a --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-formatter.tsx @@ -0,0 +1,100 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Formatter + Tooltip with custom formatter . + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+
+ )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-icons.tsx b/apps/www/registry/default/block/chart-tooltip-icons.tsx new file mode 100644 index 00000000000..a95db7a7b5f --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-icons.tsx @@ -0,0 +1,87 @@ +"use client" + +import { Footprints, Waves } from "lucide-react" +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + icon: Footprints, + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + icon: Waves, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Icons + Tooltip with icons. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx b/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx new file mode 100644 index 00000000000..c5cc9a676dc --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Line Indicator + Tooltip with line indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-indicator-none.tsx b/apps/www/registry/default/block/chart-tooltip-indicator-none.tsx new file mode 100644 index 00000000000..52c3790224f --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-indicator-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Indicator + Tooltip with no indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-label-custom.tsx b/apps/www/registry/default/block/chart-tooltip-label-custom.tsx new file mode 100644 index 00000000000..ebd735e0753 --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-label-custom.tsx @@ -0,0 +1,91 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + activities: { + label: "Activities", + }, + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Custom label + + Tooltip with custom label from chartConfig. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-label-formatter.tsx b/apps/www/registry/default/block/chart-tooltip-label-formatter.tsx new file mode 100644 index 00000000000..ed1173c5b7b --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-label-formatter.tsx @@ -0,0 +1,94 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Label Formatter + Tooltip with label formatter. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/block/chart-tooltip-label-none.tsx b/apps/www/registry/default/block/chart-tooltip-label-none.tsx new file mode 100644 index 00000000000..4aadf3fc795 --- /dev/null +++ b/apps/www/registry/default/block/chart-tooltip-label-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Label + Tooltip with no label. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/default/ui/chart.tsx b/apps/www/registry/default/ui/chart.tsx index 346e1525f1d..8620baa3b32 100644 --- a/apps/www/registry/default/ui/chart.tsx +++ b/apps/www/registry/default/ui/chart.tsx @@ -194,7 +194,7 @@ const ChartTooltipContent = React.forwardRef<
svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", + "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center" )} > diff --git a/apps/www/registry/new-york/block/chart-tooltip-advanced.tsx b/apps/www/registry/new-york/block/chart-tooltip-advanced.tsx new file mode 100644 index 00000000000..bbc9f115dd6 --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-advanced.tsx @@ -0,0 +1,123 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Advanced + + Tooltip with custom formatter and total. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( + <> +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+ {/* Add this after the last item */} + {index === 1 && ( +
+ Total +
+ {item.payload.running + item.payload.swimming} + + kcal + +
+
+ )} + + )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-default.tsx b/apps/www/registry/new-york/block/chart-tooltip-default.tsx new file mode 100644 index 00000000000..93fe696fa43 --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-default.tsx @@ -0,0 +1,86 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Default + + Default tooltip with ChartTooltipContent. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-formatter.tsx b/apps/www/registry/new-york/block/chart-tooltip-formatter.tsx new file mode 100644 index 00000000000..e67f266f270 --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-formatter.tsx @@ -0,0 +1,100 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Formatter + Tooltip with custom formatter . + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + ( +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+
+ )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-icons.tsx b/apps/www/registry/new-york/block/chart-tooltip-icons.tsx new file mode 100644 index 00000000000..f2bf0719230 --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-icons.tsx @@ -0,0 +1,87 @@ +"use client" + +import { Footprints, Waves } from "lucide-react" +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + icon: Footprints, + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + icon: Waves, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Icons + Tooltip with icons. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx b/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx new file mode 100644 index 00000000000..431dbf6719d --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Line Indicator + Tooltip with line indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx b/apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx new file mode 100644 index 00000000000..29c898a861c --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Indicator + Tooltip with no indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx b/apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx new file mode 100644 index 00000000000..f632510879e --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx @@ -0,0 +1,91 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + activities: { + label: "Activities", + }, + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Custom label + + Tooltip with custom label from chartConfig. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx b/apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx new file mode 100644 index 00000000000..220a445b0c1 --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx @@ -0,0 +1,94 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - Label Formatter + Tooltip with label formatter. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-none.tsx b/apps/www/registry/new-york/block/chart-tooltip-label-none.tsx new file mode 100644 index 00000000000..a655168dff2 --- /dev/null +++ b/apps/www/registry/new-york/block/chart-tooltip-label-none.tsx @@ -0,0 +1,84 @@ +"use client" + +import { Bar, BarChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +] + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Tooltip - No Label + Tooltip with no label. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ) +} diff --git a/apps/www/registry/new-york/ui/chart.tsx b/apps/www/registry/new-york/ui/chart.tsx index 5cff3d8e8e7..0510f5bea54 100644 --- a/apps/www/registry/new-york/ui/chart.tsx +++ b/apps/www/registry/new-york/ui/chart.tsx @@ -199,7 +199,7 @@ const ChartTooltipContent = React.forwardRef<
svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", + "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center" )} > From 88c2d23c893a54a3a9a5d7c527302a0279e549c7 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 16 Jul 2024 21:58:45 +0400 Subject: [PATCH 03/13] feat: add themes support on blocks page --- apps/www/app/(app)/blocks/layout.tsx | 4 +- apps/www/app/(app)/blocks/page.tsx | 23 +- apps/www/app/(app)/charts/page.tsx | 504 +++--- .../(blocks)/blocks/[style]/[name]/page.tsx | 44 +- apps/www/components/block-preview.tsx | 2 +- 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/themes-selector.tsx | 111 ++ 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 ---- apps/www/package.json | 2 +- apps/www/registry/default/block/charts-01.tsx | 1561 ++++++++-------- .../www/registry/new-york/block/charts-01.tsx | 1571 ++++++++--------- .../registry/new-york/block/dashboard-05.tsx | 2 +- pnpm-lock.yaml | 86 +- 21 files changed, 2081 insertions(+), 2447 deletions(-) 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 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({
diff --git a/apps/www/app/(app)/blocks/page.tsx b/apps/www/app/(app)/blocks/page.tsx index 371313e9642..f9ce3d06c57 100644 --- a/apps/www/app/(app)/blocks/page.tsx +++ b/apps/www/app/(app)/blocks/page.tsx @@ -1,12 +1,29 @@ import { getAllBlockIds } from "@/lib/blocks" +import { THEMES } from "@/lib/themes" import { BlockDisplay } from "@/components/block-display" +import { ThemesSwitcher } from "@/components/themes-selector" export default async function BlocksPage() { const blocks = (await getAllBlockIds()).filter( (name) => !name.startsWith("chart-") ) - return blocks.map((name, index) => ( - - )) + // These themes are not compatible with the blocks yet. + const themes = THEMES.filter( + (theme) => !["default-daylight", "default-midnight"].includes(theme.id) + ) + + return ( +
+ +
+ {blocks.map((name, index) => ( + + ))} +
+
+ ) } diff --git a/apps/www/app/(app)/charts/page.tsx b/apps/www/app/(app)/charts/page.tsx index a8c80b23e5d..c3af68fcf87 100644 --- a/apps/www/app/(app)/charts/page.tsx +++ b/apps/www/app/(app)/charts/page.tsx @@ -1,278 +1,266 @@ -import { SWRConfig } from "swr" - -import { getChartThemes } from "@/lib/chart-themes" +import { THEMES } from "@/lib/themes" import { ChartDisplay } from "@/components/chart-display" import { ChartsNav } from "@/components/charts-nav" -import { ChartsThemeSwitcher } from "@/components/charts-theme-switcher" +import { ThemesSwitcher } from "@/components/themes-selector" +import { ThemesStyle } from "@/components/themes-styles" import { Separator } from "@/registry/new-york/ui/separator" import * as Charts from "@/app/(app)/charts/charts" -const chartThemes = getChartThemes() - export default function ChartsPage() { return ( - -
-
- -
-

Examples

-
- - - - - - - - - -
-
- - -
-
+ +
+ +
+

Examples

+
+ + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-
+ + +
+
+ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
- -
- - - - - - - - - - - - - - - - - +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + +
- + ) } diff --git a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx index 9a6b084f378..cb1c321ef60 100644 --- a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx +++ b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx @@ -4,14 +4,12 @@ import { notFound } from "next/navigation" import { siteConfig } from "@/config/site" import { getAllBlockIds, getBlock } from "@/lib/blocks" import { absoluteUrl, cn } from "@/lib/utils" +import { BlockChunk } from "@/components/block-chunk" +import { BlockWrapper } from "@/components/block-wrapper" +import { ThemesStyle } from "@/components/themes-styles" import { Style, styles } from "@/registry/styles" import "@/styles/mdx.css" -import "public/registry/themes.css" -import { AnimatePresence } from "framer-motion" - -import { BlockChunk } from "@/components/block-chunk" -import { BlockWrapper } from "@/components/block-wrapper" export async function generateMetadata({ params, @@ -89,19 +87,27 @@ export default async function BlockPage({ block.chunks?.map((chunk) => delete chunk.component) return ( -
- - - {chunks?.map((chunk, index) => ( - - - - ))} - -
+ <> + +
+ + + {chunks?.map((chunk, index) => ( + + + + ))} + +
+ ) } diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx index ecfc21393fd..2331eb445fe 100644 --- a/apps/www/components/block-preview.tsx +++ b/apps/www/components/block-preview.tsx @@ -57,7 +57,7 @@ export function BlockPreview({ minSize={30} > {isLoading ? ( -
+
Loading...
diff --git a/apps/www/components/chart-code-viewer.tsx b/apps/www/components/chart-code-viewer.tsx index eb9b6c53cd8..5806fe265af 100644 --- a/apps/www/components/chart-code-viewer.tsx +++ b/apps/www/components/chart-code-viewer.tsx @@ -1,8 +1,8 @@ import * as React from "react" import { cn } from "@/lib/utils" -import { useChartConfig } from "@/hooks/use-chart-config" import { useMediaQuery } from "@/hooks/use-media-query" +import { useThemesConfig } from "@/hooks/use-themes-config" import { BlockCopyButton } from "@/components/block-copy-button" import { V0Button } from "@/components/v0-button" import { Button } from "@/registry/new-york/ui/button" @@ -26,26 +26,26 @@ export function ChartCodeViewer({ children, }: { chart: Block } & React.ComponentProps<"div">) { const [tab, setTab] = React.useState("code") - const { chartConfig } = useChartConfig() + const { themesConfig } = useThemesConfig() const isDesktop = useMediaQuery("(min-width: 768px)") const themeCode = React.useMemo(() => { return `\ @layer base { :root { -${Object.entries(chartConfig.theme.cssVars.light) +${Object.entries(themesConfig?.activeTheme.cssVars.light || {}) .map(([key, value]) => ` ${key}: ${value};`) .join("\n")} } .dark { -${Object.entries(chartConfig.theme.cssVars.dark) +${Object.entries(themesConfig?.activeTheme.cssVars.dark || {}) .map(([key, value]) => ` ${key}: ${value};`) .join("\n")} - } + } } ` - }, [chartConfig]) + }, [themesConfig]) const button = ( - - - {chartTheme.name} - - - ) - })} -
- - - ) -} diff --git a/apps/www/components/themes-selector.tsx b/apps/www/components/themes-selector.tsx new file mode 100644 index 00000000000..bcaeb0aaf34 --- /dev/null +++ b/apps/www/components/themes-selector.tsx @@ -0,0 +1,111 @@ +"use client" + +import * as React from "react" +import { useTheme } from "next-themes" + +import { THEMES, Theme } from "@/lib/themes" +import { cn } from "@/lib/utils" +import { useThemesConfig } from "@/hooks/use-themes-config" +import { Skeleton } from "@/registry/new-york/ui/skeleton" +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 + + React.useEffect(() => { + setMounted(true) + }, []) + + if (!mounted) { + return ( +
+ {THEMES.map((theme) => ( +
+ +
+ ))} +
+ ) + } + + return ( +
+ {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} + + + ) + })} +
+ ) +} 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/package.json b/apps/www/package.json index 91aea689ec4..d63cc9a15ec 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -98,7 +98,7 @@ "postcss": "^8.4.24", "rehype": "^12.0.1", "rehype-autolink-headings": "^6.1.1", - "rehype-pretty-code": "^0.6.0", + "rehype-pretty-code": "^0.13.2", "rehype-slug": "^5.1.0", "remark": "^14.0.3", "remark-code-import": "^1.2.0", diff --git a/apps/www/registry/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx index 4dab9f328bb..1af18d1b819 100644 --- a/apps/www/registry/default/block/charts-01.tsx +++ b/apps/www/registry/default/block/charts-01.tsx @@ -42,409 +42,288 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( - <> - -
-
- - - Today - - 12,584{" "} - - steps - - - - - +
+ + + Today + + 12,584{" "} + + steps + + + + + + - } + shape={(props: any) => { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - steps: 2000, - }, - { - date: "2024-01-02", - steps: 2100, - }, - { - date: "2024-01-03", - steps: 2200, - }, - { - date: "2024-01-04", - steps: 1300, - }, - { - date: "2024-01-05", - steps: 1400, - }, - { - date: "2024-01-06", - steps: 2500, - }, - { - date: "2024-01-07", - steps: 1600, - }, - ]} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + - } - shape={(props: any) => { - return ( - - ) - }} - /> - { - return new Date(value).toLocaleDateString("en-US", { - weekday: "short", - }) - }} + - - - - - 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 - - -
- - - + + + + + + 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 - -
- + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) }} - className="aspect-auto h-[32px] w-full" - > - - - - - - - - -
-
-
- 10,103 - - steps/day - -
- + - - - - - - - - -
- - - - - Walking Distance - - Over the last 7 days, your distance walked and run was 12.5 - miles per day. - - - -
- 12.5 + /> + { + 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 - miles/day + steps/day
{ - return ( - - ) - }} - /> - + radius={4} + barSize={32} + > + + + + - - - - +
+
+
+ 10,103 + + steps/day + +
- - - + + + - - -
-
-
Move
-
- 562 - - kcal - -
+
+ + + + + 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 - -
+
+ +
+
Exercise
+
+ 73 + + min +
- -
-
Stand
-
- 14 - - hr - -
+
+ +
+
Stand
+
+ 14 + + hr +
- - -
-
- - -
-
-
Move
-
- 562/600 - - kcal - -
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal +
-
-
Exercise
-
- 73/120 - - min - -
+
+
+
Exercise
+
+ 73/120 + + min +
-
-
Stand
-
- 8/12 - - hr - -
+
+
+
Stand
+
+ 8/12 + + hr +
- + + - - - - - - - - - - Active Energy - - You're burning an average of 754 calories per day. Good job! - - - -
- 1,254 - - kcal/day - -
- + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + - { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - calories: 354, - }, - { - date: "2024-01-02", - calories: 514, - }, - { - date: "2024-01-03", - calories: 345, - }, - { - date: "2024-01-04", - calories: 734, - }, - { - date: "2024-01-05", - calories: 645, - }, - { - date: "2024-01-06", - calories: 456, - }, - { - date: "2024-01-07", - calories: 345, - }, - ]} - > - { - return ( - - ) - }} - /> - - - - - - - - Time in Bed - - 8 - - hr - - 35 - - min - - - - - + + + + + + + + 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 index 2f59c336525..840b25fa308 100644 --- a/apps/www/registry/new-york/block/charts-01.tsx +++ b/apps/www/registry/new-york/block/charts-01.tsx @@ -42,410 +42,288 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( - <> - -
-
- - - Today - - 12,584{" "} - - steps - - - - - +
+ + + Today + + 12,584{" "} + + steps + + + + + + - } + shape={(props: any) => { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - steps: 2000, - }, - { - date: "2024-01-02", - steps: 2100, - }, - { - date: "2024-01-03", - steps: 2200, - }, - { - date: "2024-01-04", - steps: 1300, - }, - { - date: "2024-01-05", - steps: 1400, - }, - { - date: "2024-01-06", - steps: 2500, - }, - { - date: "2024-01-07", - steps: 1600, - }, - ]} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + - } - shape={(props: any) => { - return ( - - ) - }} - /> - { - return new Date(value).toLocaleDateString("en-US", { - weekday: "short", - }) - }} + - - - - - 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 - - -
- - - + + + + + + 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", + }) }} - data={[ - { - date: "2024-01-01", - resting: 62, - }, - { - date: "2024-01-02", - resting: 72, - }, - { - date: "2024-01-03", - resting: 35, - }, - { - date: "2024-01-04", - resting: 62, - }, - { - date: "2024-01-05", - resting: 52, - }, - { - date: "2024-01-06", - resting: 62, - }, - { - date: "2024-01-07", - resting: 70, - }, - ]} - > - - - { - 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 + /> + { + 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 - miles/day + steps/day
{ - return ( - - ) - }} - /> - + radius={4} + barSize={32} + > + + + + - - - - +
+
+
+ 10,103 + + steps/day + +
- - - + + + - - -
-
-
Move
-
- 562 - - kcal - -
+
+ + + + + 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 - -
+
+ +
+
Exercise
+
+ 73 + + min +
- -
-
Stand
-
- 14 - - hr - -
+
+ +
+
Stand
+
+ 14 + + hr +
- - -
-
- - -
-
-
Move
-
- 562/600 - - kcal - -
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal +
-
-
Exercise
-
- 73/120 - - min - -
+
+
+
Exercise
+
+ 73/120 + + min +
-
-
Stand
-
- 8/12 - - hr - -
+
+
+
Stand
+
+ 8/12 + + hr +
- + + - - - - - - - - - - Active Energy - - You're burning an average of 754 calories per day. Good job! - - - -
- 1,254 - - kcal/day - -
- + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + - { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - calories: 354, - }, - { - date: "2024-01-02", - calories: 514, - }, - { - date: "2024-01-03", - calories: 345, - }, - { - date: "2024-01-04", - calories: 734, - }, - { - date: "2024-01-05", - calories: 645, - }, - { - date: "2024-01-06", - calories: 456, - }, - { - date: "2024-01-07", - calories: 345, - }, - ]} - > - { - return ( - - ) - }} - /> - - - - - - - - Time in Bed - - 8 - - hr - - 35 - - min - - - - - + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + - - - - - - - - - - - } - formatter={(value) => ( -
- Time in bed -
- {value} - - hr - -
+ + + + + + + + + + } + 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 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/pnpm-lock.yaml b/pnpm-lock.yaml index 276d0fc1dfa..20966f383d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -341,8 +341,8 @@ importers: specifier: ^6.1.1 version: 6.1.1 rehype-pretty-code: - specifier: ^0.6.0 - version: 0.6.0(shiki@1.10.3) + specifier: ^0.13.2 + version: 0.13.2(shiki@1.10.3) rehype-slug: specifier: ^5.1.0 version: 5.1.0 @@ -4228,10 +4228,6 @@ packages: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} - hash-obj@4.0.0: - resolution: {integrity: sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==} - engines: {node: '>=12'} - hash-wasm@4.11.0: resolution: {integrity: sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ==} @@ -4239,6 +4235,9 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + hast-util-from-html@2.0.1: + resolution: {integrity: sha512-RXQBLMl9kjKVNkJTIO6bZyb2n+cUH8LFaSSzo82jiLT6Tfc+Pt7VQCS+/h3YwG4jaNE2TA2sdJisGWR+aJrp0g==} + hast-util-from-parse5@7.1.2: resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==} @@ -4287,6 +4286,9 @@ packages: hast-util-to-string@2.0.0: resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==} + hast-util-to-string@3.0.0: + resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==} + hast-util-whitespace@2.0.1: resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} @@ -4523,10 +4525,6 @@ packages: resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==} engines: {node: '>=8'} - is-obj@3.0.0: - resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==} - engines: {node: '>=12'} - is-path-inside@3.0.3: resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} engines: {node: '>=8'} @@ -5242,11 +5240,6 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - nanoid@4.0.2: - resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==} - engines: {node: ^14 || ^16 || >=18} - hasBin: true - napi-build-utils@1.0.2: resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==} @@ -5867,11 +5860,14 @@ packages: rehype-parse@8.0.5: resolution: {integrity: sha512-Ds3RglaY/+clEX2U2mHflt7NlMA72KspZ0JLUJgBBLpRddBcEw3H8uYZQliQriku22NZpYMfjDdSgHcjxue24A==} - rehype-pretty-code@0.6.0: - resolution: {integrity: sha512-VfntYoWYOBVURXYDdB8p/E1sZTm2W5ry89fJyY94WJAo1jUH/5sVhDC7cX5PPnksMyW9PYMxRLNfjkBpSgJrzQ==} - engines: {node: ^12.16.0 || >=13.2.0} + rehype-parse@9.0.0: + resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==} + + rehype-pretty-code@0.13.2: + resolution: {integrity: sha512-F+PaFMscfJOcSHcR2b//+hk/0jT56hmGDqXcVD6VC9j0CUSGiqv8YxaWUyhR7qEIRRSbzAVxx+0uxzk+akXs+w==} + engines: {node: '>=18'} peerDependencies: - shiki: '*' + shiki: ^1.3.0 rehype-slug@5.1.0: resolution: {integrity: sha512-Gf91dJoXneiorNEnn+Phx97CO7oRMrpi+6r155tTxzGuLtm+QrI4cTwCa9e1rtePdL4i9tSO58PeSS6HWfgsiw==} @@ -6128,10 +6124,6 @@ packages: react: ^18.0.0 react-dom: ^18.0.0 - sort-keys@5.0.0: - resolution: {integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==} - engines: {node: '>=12'} - source-map-js@1.2.0: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} @@ -6583,10 +6575,6 @@ packages: resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==} engines: {node: '>=8'} - type-fest@1.4.0: - resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==} - engines: {node: '>=10'} - type-fest@3.8.0: resolution: {integrity: sha512-FVNSzGQz9Th+/9R6Lvv7WIAkstylfHN2/JYxkyhhmKFYh9At2DST8t6L6Lref9eYO8PXFTfG9Sg1Agg0K3vq3Q==} engines: {node: '>=14.16'} @@ -11265,18 +11253,21 @@ snapshots: dependencies: has-symbols: 1.0.3 - hash-obj@4.0.0: - dependencies: - is-obj: 3.0.0 - sort-keys: 5.0.0 - type-fest: 1.4.0 - hash-wasm@4.11.0: {} hasown@2.0.2: dependencies: function-bind: 1.1.2 + hast-util-from-html@2.0.1: + dependencies: + '@types/hast': 3.0.4 + devlop: 1.1.0 + hast-util-from-parse5: 8.0.1 + parse5: 7.1.2 + vfile: 6.0.1 + vfile-message: 4.0.2 + hast-util-from-parse5@7.1.2: dependencies: '@types/hast': 2.3.10 @@ -11440,6 +11431,10 @@ snapshots: dependencies: '@types/hast': 2.3.10 + hast-util-to-string@3.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-whitespace@2.0.1: {} hast-util-whitespace@3.0.0: @@ -11643,8 +11638,6 @@ snapshots: is-obj@2.0.0: {} - is-obj@3.0.0: {} - is-path-inside@3.0.3: {} is-plain-obj@1.1.0: {} @@ -12699,8 +12692,6 @@ snapshots: nanoid@3.3.7: {} - nanoid@4.0.2: {} - napi-build-utils@1.0.2: {} natural-compare@1.4.0: {} @@ -13419,12 +13410,21 @@ snapshots: parse5: 6.0.1 unified: 10.1.2 - rehype-pretty-code@0.6.0(shiki@1.10.3): + rehype-parse@9.0.0: dependencies: - hash-obj: 4.0.0 - nanoid: 4.0.2 + '@types/hast': 3.0.4 + hast-util-from-html: 2.0.1 + unified: 11.0.5 + + rehype-pretty-code@0.13.2(shiki@1.10.3): + dependencies: + '@types/hast': 3.0.4 + hast-util-to-string: 3.0.0 parse-numeric-range: 1.3.0 + rehype-parse: 9.0.0 shiki: 1.10.3 + unified: 11.0.5 + unist-util-visit: 5.0.0 rehype-slug@5.1.0: dependencies: @@ -13781,10 +13781,6 @@ snapshots: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - sort-keys@5.0.0: - dependencies: - is-plain-obj: 4.1.0 - source-map-js@1.2.0: {} source-map-support@0.5.21: @@ -14321,8 +14317,6 @@ snapshots: type-fest@0.8.1: {} - type-fest@1.4.0: {} - type-fest@3.8.0: {} type-fest@4.21.0: {} From f02e9fc9708760ef4d957b4299cdb700d7a313a4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 16 Jul 2024 22:02:05 +0400 Subject: [PATCH 04/13] chore: build registry --- .../__registry__/default/block/charts-01.tsx | 1555 ++++++++-------- .../__registry__/new-york/block/charts-01.tsx | 1565 ++++++++--------- .../new-york/block/dashboard-05.tsx | 2 +- apps/www/components/block-preview.tsx | 2 +- .../default/block/charts-01-chunk-0.tsx | 1 + .../default/block/charts-01-chunk-2.tsx | 2 +- .../default/block/charts-01-chunk-4.tsx | 6 +- .../default/block/charts-01-chunk-5.tsx | 4 +- .../default/block/charts-01-chunk-7.tsx | 13 +- .../new-york/block/charts-01-chunk-4.tsx | 4 +- .../new-york/block/charts-01-chunk-5.tsx | 4 +- .../new-york/block/charts-01-chunk-7.tsx | 2 +- .../new-york/block/dashboard-05-chunk-0.tsx | 2 +- 13 files changed, 1582 insertions(+), 1580 deletions(-) diff --git a/apps/www/__registry__/default/block/charts-01.tsx b/apps/www/__registry__/default/block/charts-01.tsx index 71cfe4f34d9..795987ecf46 100644 --- a/apps/www/__registry__/default/block/charts-01.tsx +++ b/apps/www/__registry__/default/block/charts-01.tsx @@ -42,406 +42,285 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( - <> - -
-
- - - Today - - 12,584{" "} - - steps - - - - - +
+ + + Today + + 12,584{" "} + + steps + + + + + + - } + shape={(props: any) => { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - steps: 2000, - }, - { - date: "2024-01-02", - steps: 2100, - }, - { - date: "2024-01-03", - steps: 2200, - }, - { - date: "2024-01-04", - steps: 1300, - }, - { - date: "2024-01-05", - steps: 1400, - }, - { - date: "2024-01-06", - steps: 2500, - }, - { - date: "2024-01-07", - steps: 1600, - }, - ]} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + - } - shape={(props: any) => { - return ( - - ) - }} - /> - { - return new Date(value).toLocaleDateString("en-US", { - weekday: "short", - }) - }} + - - - - - 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 - - -
- - - + + + + + + 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 - -
- + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) }} - className="aspect-auto h-[32px] w-full" - > - - - - - - - - -
-
-
- 10,103 - - steps/day - -
- + - - - - - - - - -
- - - - - Walking Distance - - Over the last 7 days, your distance walked and run was 12.5 - miles per day. - - - -
- 12.5 + /> + { + 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 - miles/day + steps/day
{ - return ( - - ) - }} - /> - + radius={4} + barSize={32} + > + + + + - - - - +
+
+
+ 10,103 + + steps/day + +
- - - + + + - - -
-
-
Move
-
- 562 - - kcal - -
+
+ + + + + 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 - -
+
+ +
+
Exercise
+
+ 73 + + min +
- -
-
Stand
-
- 14 - - hr - -
+
+ +
+
Stand
+
+ 14 + + hr +
- - -
-
- - -
-
-
Move
-
- 562/600 - - kcal - -
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal +
-
-
Exercise
-
- 73/120 - - min - -
+
+
+
Exercise
+
+ 73/120 + + min +
-
-
Stand
-
- 8/12 - - hr - -
+
+
+
Stand
+
+ 8/12 + + hr +
- + + - - - - - - - - - - Active Energy - - You're burning an average of 754 calories per day. Good job! - - - -
- 1,254 - - kcal/day - -
- + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + - { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - calories: 354, - }, - { - date: "2024-01-02", - calories: 514, - }, - { - date: "2024-01-03", - calories: 345, - }, - { - date: "2024-01-04", - calories: 734, - }, - { - date: "2024-01-05", - calories: 645, - }, - { - date: "2024-01-06", - calories: 456, - }, - { - date: "2024-01-07", - calories: 345, - }, - ]} - > - { - return ( - - ) - }} - /> - - - - - - - - Time in Bed - - 8 - - hr - - 35 - - min - - - - - + + + + + + + + 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 index 7e14a277318..a58176c9331 100644 --- a/apps/www/__registry__/new-york/block/charts-01.tsx +++ b/apps/www/__registry__/new-york/block/charts-01.tsx @@ -42,407 +42,285 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( - <> - -
-
- - - Today - - 12,584{" "} - - steps - - - - - +
+ + + Today + + 12,584{" "} + + steps + + + + + + - } + shape={(props: any) => { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - steps: 2000, - }, - { - date: "2024-01-02", - steps: 2100, - }, - { - date: "2024-01-03", - steps: 2200, - }, - { - date: "2024-01-04", - steps: 1300, - }, - { - date: "2024-01-05", - steps: 1400, - }, - { - date: "2024-01-06", - steps: 2500, - }, - { - date: "2024-01-07", - steps: 1600, - }, - ]} + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }) + }} + /> + } + cursor={false} + /> + - } - shape={(props: any) => { - return ( - - ) - }} - /> - { - return new Date(value).toLocaleDateString("en-US", { - weekday: "short", - }) - }} + - - - - - 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 - - -
- - - + + + + + + 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", + }) }} - data={[ - { - date: "2024-01-01", - resting: 62, - }, - { - date: "2024-01-02", - resting: 72, - }, - { - date: "2024-01-03", - resting: 35, - }, - { - date: "2024-01-04", - resting: 62, - }, - { - date: "2024-01-05", - resting: 52, - }, - { - date: "2024-01-06", - resting: 62, - }, - { - date: "2024-01-07", - resting: 70, - }, - ]} - > - - - { - 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 + /> + { + 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 - miles/day + steps/day
{ - return ( - - ) - }} - /> - + radius={4} + barSize={32} + > + + + + - - - - +
+
+
+ 10,103 + + steps/day + +
- - - + + + - - -
-
-
Move
-
- 562 - - kcal - -
+
+ + + + + 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 - -
+
+ +
+
Exercise
+
+ 73 + + min +
- -
-
Stand
-
- 14 - - hr - -
+
+ +
+
Stand
+
+ 14 + + hr +
- - -
-
- - -
-
-
Move
-
- 562/600 - - kcal - -
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal +
-
-
Exercise
-
- 73/120 - - min - -
+
+
+
Exercise
+
+ 73/120 + + min +
-
-
Stand
-
- 8/12 - - hr - -
+
+
+
Stand
+
+ 8/12 + + hr +
- + + - - - - - - - - - - Active Energy - - You're burning an average of 754 calories per day. Good job! - - - -
- 1,254 - - kcal/day - -
- + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + - { + return ( + + ) }} - data={[ - { - date: "2024-01-01", - calories: 354, - }, - { - date: "2024-01-02", - calories: 514, - }, - { - date: "2024-01-03", - calories: 345, - }, - { - date: "2024-01-04", - calories: 734, - }, - { - date: "2024-01-05", - calories: 645, - }, - { - date: "2024-01-06", - calories: 456, - }, - { - date: "2024-01-07", - calories: 345, - }, - ]} - > - { - return ( - - ) - }} - /> - - - - - - - - Time in Bed - - 8 - - hr - - 35 - - min - - - - - + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + - - - - - - - - - - - } - formatter={(value) => ( -
- Time in bed -
- {value} - - hr - -
+ + + + + + + + + + } + 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/components/block-preview.tsx b/apps/www/components/block-preview.tsx index 2331eb445fe..677cac19a7a 100644 --- a/apps/www/components/block-preview.tsx +++ b/apps/www/components/block-preview.tsx @@ -57,7 +57,7 @@ export function BlockPreview({ minSize={30} > {isLoading ? ( -
+
Loading...
diff --git a/apps/www/registry/default/block/charts-01-chunk-0.tsx b/apps/www/registry/default/block/charts-01-chunk-0.tsx index 8ccd890a45c..517a6efdac1 100644 --- a/apps/www/registry/default/block/charts-01-chunk-0.tsx +++ b/apps/www/registry/default/block/charts-01-chunk-0.tsx @@ -126,6 +126,7 @@ export default function Component() { position="insideBottomLeft" value="Average Steps" offset={10} + fill="hsl(var(--foreground))" />