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 0000000000..7a70079821 --- /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 0000000000..a495156937 --- /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 0000000000..8c1b6d7009 --- /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 0000000000..a95db7a7b5 --- /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 0000000000..c5cc9a676d --- /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 0000000000..52c3790224 --- /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 0000000000..ebd735e075 --- /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 0000000000..ed1173c5b7 --- /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 0000000000..4aadf3fc79 --- /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/block/charts-01.tsx b/apps/www/__registry__/default/block/charts-01.tsx index 795987ecf4..806272513b 100644 --- a/apps/www/__registry__/default/block/charts-01.tsx +++ b/apps/www/__registry__/default/block/charts-01.tsx @@ -42,16 +42,9 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( -
-
- +
+
+ Today @@ -111,18 +104,8 @@ export default function Charts() { dataKey="steps" fill="var(--color-steps)" radius={5} - fillOpacity={0.4} + fillOpacity={0.6} activeBar={} - shape={(props: any) => { - return ( - - ) - }} /> - +
Resting HR @@ -307,8 +290,8 @@ export default function Charts() {
-
- +
+ Progress @@ -420,7 +403,7 @@ export default function Charts() {
- + Walking Distance @@ -488,16 +471,8 @@ export default function Charts() { fill="var(--color-steps)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - +
-
- +
+
@@ -705,7 +680,7 @@ export default function Charts() { - + Active Energy @@ -772,16 +747,8 @@ export default function Charts() { fill="var(--color-calories)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - + Time in Bed diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index e4b165938f..fdcf817bb1 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 0000000000..bbc9f115dd --- /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 0000000000..93fe696fa4 --- /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 0000000000..e67f266f27 --- /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 0000000000..f2bf071923 --- /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 0000000000..431dbf6719 --- /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 0000000000..29c898a861 --- /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 0000000000..f632510879 --- /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 0000000000..220a445b0c --- /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 0000000000..a655168dff --- /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/block/charts-01.tsx b/apps/www/__registry__/new-york/block/charts-01.tsx index a58176c933..d9567003c4 100644 --- a/apps/www/__registry__/new-york/block/charts-01.tsx +++ b/apps/www/__registry__/new-york/block/charts-01.tsx @@ -26,13 +26,13 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/registry/new-york/ui/card" +} from "@/registry/new-york//ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent, -} from "@/registry/new-york/ui/chart" -import { Separator } from "@/registry/new-york/ui/separator" +} from "@/registry/new-york//ui/chart" +import { Separator } from "@/registry/new-york//ui/separator" export const description = "A collection of health charts." @@ -42,16 +42,9 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( -
-
- +
+
+ Today @@ -111,18 +104,8 @@ export default function Charts() { dataKey="steps" fill="var(--color-steps)" radius={5} - fillOpacity={0.4} + fillOpacity={0.6} activeBar={} - shape={(props: any) => { - return ( - - ) - }} /> - +
Resting HR @@ -307,8 +290,8 @@ export default function Charts() {
-
- +
+ Progress @@ -420,7 +403,7 @@ export default function Charts() {
- + Walking Distance @@ -488,16 +471,8 @@ export default function Charts() { fill="var(--color-steps)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - +
-
- +
+
@@ -705,7 +680,7 @@ export default function Charts() { - + Active Energy @@ -772,16 +747,8 @@ export default function Charts() { fill="var(--color-calories)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - + Time in Bed diff --git a/apps/www/actions/edit-in-v0.ts b/apps/www/actions/edit-in-v0.ts index 9a16420284..d7052d4640 100644 --- a/apps/www/actions/edit-in-v0.ts +++ b/apps/www/actions/edit-in-v0.ts @@ -22,6 +22,10 @@ export async function editInV0({ style, }) + // Replace "use client" in the code. + // v0 will handle this for us. + code = code.replace(`"use client"`, "") + const response = await fetch(`${process.env.V0_URL}/api/edit`, { method: "POST", body: JSON.stringify({ description, code, source: EDIT_IN_V0_SOURCE }), diff --git a/apps/www/app/(app)/charts/charts.tsx b/apps/www/app/(app)/charts/charts.tsx index 0f24f6828e..1ff2ca3ee1 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 c3af68fcf8..f368ff27df 100644 --- a/apps/www/app/(app)/charts/page.tsx +++ b/apps/www/app/(app)/charts/page.tsx @@ -8,7 +8,8 @@ import * as Charts from "@/app/(app)/charts/charts" export default function ChartsPage() { return ( - <> +
+

Examples

-
+
@@ -31,10 +35,7 @@ export default function ChartsPage() {
-
- - -
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
- +
) } diff --git a/apps/www/components/chart-toolbar.tsx b/apps/www/components/chart-toolbar.tsx index d7ebd9d2e4..bd7b07b4c4 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 c17bcd6473..b2cbd9f10a 100644 --- a/apps/www/components/charts-nav.tsx +++ b/apps/www/components/charts-nav.tsx @@ -6,7 +6,7 @@ import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" -const examples = [ +const links = [ { name: "Area Chart", href: "/charts#area-chart", @@ -31,6 +31,10 @@ const examples = [ name: "Radial Chart", href: "/charts#radial-chart", }, + { + name: "Tooltip", + href: "/charts#tooltip", + }, ] export function ChartsNav({ @@ -40,33 +44,25 @@ export function ChartsNav({ const pathname = usePathname() return ( -
- -
- {examples.map((example, index) => ( - - {example.name} - - ))} -
- - -
+ +
+ {links.map((example, index) => ( + + {example.name} + + ))} +
+ + ) } diff --git a/apps/www/public/registry/styles/default/chart.json b/apps/www/public/registry/styles/default/chart.json index a334a7f3d4..c2e98bb3f8 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 f299bee0b0..66393d502a 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 d65e69f133..7b3a87b38c 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 0000000000..7a70079821 --- /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 0000000000..a495156937 --- /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 0000000000..8c1b6d7009 --- /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 0000000000..a95db7a7b5 --- /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 0000000000..c5cc9a676d --- /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 0000000000..52c3790224 --- /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 0000000000..ebd735e075 --- /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 0000000000..ed1173c5b7 --- /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 0000000000..4aadf3fc79 --- /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/block/charts-01-chunk-0.tsx b/apps/www/registry/default/block/charts-01-chunk-0.tsx index 517a6efdac..f854ced977 100644 --- a/apps/www/registry/default/block/charts-01-chunk-0.tsx +++ b/apps/www/registry/default/block/charts-01-chunk-0.tsx @@ -18,7 +18,7 @@ import { export default function Component() { return ( - + Today @@ -78,16 +78,8 @@ export default function Component() { dataKey="steps" fill="var(--color-steps)" radius={5} - fillOpacity={0.4} + fillOpacity={0.6} activeBar={} - shape={(props: any) => { - return ( - - ) - }} /> +
Resting HR diff --git a/apps/www/registry/default/block/charts-01-chunk-2.tsx b/apps/www/registry/default/block/charts-01-chunk-2.tsx index db67a42132..f233b2facc 100644 --- a/apps/www/registry/default/block/charts-01-chunk-2.tsx +++ b/apps/www/registry/default/block/charts-01-chunk-2.tsx @@ -13,7 +13,7 @@ import { ChartContainer } from "@/registry/default/ui/chart" export default function Component() { return ( - + Progress diff --git a/apps/www/registry/default/block/charts-01-chunk-3.tsx b/apps/www/registry/default/block/charts-01-chunk-3.tsx index 6a79cbd20a..44d408b784 100644 --- a/apps/www/registry/default/block/charts-01-chunk-3.tsx +++ b/apps/www/registry/default/block/charts-01-chunk-3.tsx @@ -13,7 +13,7 @@ import { ChartContainer } from "@/registry/default/ui/chart" export default function Component() { return ( - + Walking Distance @@ -81,14 +81,8 @@ export default function Component() { fill="var(--color-steps)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> + +
diff --git a/apps/www/registry/default/block/charts-01-chunk-6.tsx b/apps/www/registry/default/block/charts-01-chunk-6.tsx index 41b71c0346..27fed222a5 100644 --- a/apps/www/registry/default/block/charts-01-chunk-6.tsx +++ b/apps/www/registry/default/block/charts-01-chunk-6.tsx @@ -13,7 +13,7 @@ import { ChartContainer } from "@/registry/default/ui/chart" export default function Component() { return ( - + Active Energy @@ -80,14 +80,8 @@ export default function Component() { fill="var(--color-calories)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> + Time in Bed diff --git a/apps/www/registry/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx index 1af18d1b81..cfad88650a 100644 --- a/apps/www/registry/default/block/charts-01.tsx +++ b/apps/www/registry/default/block/charts-01.tsx @@ -42,16 +42,12 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( -
-
- +
+
+ Today @@ -111,18 +107,8 @@ export default function Charts() { dataKey="steps" fill="var(--color-steps)" radius={5} - fillOpacity={0.4} + fillOpacity={0.6} activeBar={} - shape={(props: any) => { - return ( - - ) - }} />
@@ -310,8 +296,11 @@ export default function Charts() {
-
- +
+ Progress @@ -423,7 +412,10 @@ export default function Charts() {
- + Walking Distance @@ -491,16 +483,8 @@ export default function Charts() { fill="var(--color-steps)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - +
-
- +
+
@@ -708,7 +698,10 @@ export default function Charts() { - + Active Energy @@ -775,16 +768,8 @@ export default function Charts() { fill="var(--color-calories)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - + Time in Bed diff --git a/apps/www/registry/default/ui/chart.tsx b/apps/www/registry/default/ui/chart.tsx index 346e1525f1..8620baa3b3 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 0000000000..bbc9f115dd --- /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 0000000000..93fe696fa4 --- /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 0000000000..e67f266f27 --- /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 0000000000..f2bf071923 --- /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 0000000000..431dbf6719 --- /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 0000000000..29c898a861 --- /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 0000000000..f632510879 --- /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 0000000000..220a445b0c --- /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 0000000000..a655168dff --- /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/block/charts-01-chunk-0.tsx b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx index e6d2eefd0f..38d6559766 100644 --- a/apps/www/registry/new-york/block/charts-01-chunk-0.tsx +++ b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx @@ -9,16 +9,16 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/registry/new-york/ui/card" +} from "@/registry/new-york//ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent, -} from "@/registry/new-york/ui/chart" +} from "@/registry/new-york//ui/chart" export default function Component() { return ( - + Today @@ -78,16 +78,8 @@ export default function Component() { dataKey="steps" fill="var(--color-steps)" radius={5} - fillOpacity={0.4} + fillOpacity={0.6} activeBar={} - shape={(props: any) => { - return ( - - ) - }} /> +
Resting HR 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 index 6aac5c6d3e..e3043609a5 100644 --- a/apps/www/registry/new-york/block/charts-01-chunk-2.tsx +++ b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx @@ -8,12 +8,12 @@ import { CardDescription, CardHeader, CardTitle, -} from "@/registry/new-york/ui/card" -import { ChartContainer } from "@/registry/new-york/ui/chart" +} from "@/registry/new-york//ui/card" +import { ChartContainer } from "@/registry/new-york//ui/chart" export default function Component() { return ( - + Progress 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 index f922f37645..0e520f3838 100644 --- a/apps/www/registry/new-york/block/charts-01-chunk-3.tsx +++ b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx @@ -8,12 +8,12 @@ import { CardDescription, CardHeader, CardTitle, -} from "@/registry/new-york/ui/card" -import { ChartContainer } from "@/registry/new-york/ui/chart" +} from "@/registry/new-york//ui/card" +import { ChartContainer } from "@/registry/new-york//ui/chart" export default function Component() { return ( - + Walking Distance @@ -81,14 +81,8 @@ export default function Component() { fill="var(--color-steps)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> + +
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 index feff731598..8d88a3dcc2 100644 --- a/apps/www/registry/new-york/block/charts-01-chunk-6.tsx +++ b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx @@ -8,12 +8,12 @@ import { CardDescription, CardHeader, CardTitle, -} from "@/registry/new-york/ui/card" -import { ChartContainer } from "@/registry/new-york/ui/chart" +} from "@/registry/new-york//ui/card" +import { ChartContainer } from "@/registry/new-york//ui/chart" export default function Component() { return ( - + Active Energy @@ -80,14 +80,8 @@ export default function Component() { fill="var(--color-calories)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> + Time in Bed diff --git a/apps/www/registry/new-york/block/charts-01.tsx b/apps/www/registry/new-york/block/charts-01.tsx index 840b25fa30..deee281247 100644 --- a/apps/www/registry/new-york/block/charts-01.tsx +++ b/apps/www/registry/new-york/block/charts-01.tsx @@ -26,13 +26,13 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/registry/new-york/ui/card" +} from "@/registry/new-york//ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent, -} from "@/registry/new-york/ui/chart" -import { Separator } from "@/registry/new-york/ui/separator" +} from "@/registry/new-york//ui/chart" +import { Separator } from "@/registry/new-york//ui/separator" export const description = "A collection of health charts." @@ -42,16 +42,12 @@ export const containerClassName = "min-h-screen py-12" export default function Charts() { return ( -
-
- +
+
+ Today @@ -111,18 +107,8 @@ export default function Charts() { dataKey="steps" fill="var(--color-steps)" radius={5} - fillOpacity={0.4} + fillOpacity={0.6} activeBar={} - shape={(props: any) => { - return ( - - ) - }} />
@@ -310,8 +296,11 @@ export default function Charts() {
-
- +
+ Progress @@ -423,7 +412,10 @@ export default function Charts() {
- + Walking Distance @@ -491,16 +483,8 @@ export default function Charts() { fill="var(--color-steps)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - +
-
- +
+
@@ -708,7 +698,10 @@ export default function Charts() { - + Active Energy @@ -775,16 +768,8 @@ export default function Charts() { fill="var(--color-calories)" radius={2} fillOpacity={0.2} - shape={(props: any) => { - return ( - - ) - }} + activeIndex={6} + activeBar={} /> - + Time in Bed diff --git a/apps/www/registry/new-york/ui/chart.tsx b/apps/www/registry/new-york/ui/chart.tsx index 5cff3d8e8e..0510f5bea5 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" )} >