diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml index d40e83057b..714b8dce73 100644 --- a/.github/workflows/code-check.yml +++ b/.github/workflows/code-check.yml @@ -18,11 +18,11 @@ jobs: with: node-version: 18 - - uses: pnpm/action-setup@v2.2.4 + - uses: pnpm/action-setup@v4 name: Install pnpm id: pnpm-install with: - version: 8.6.1 + version: 9.0.6 run_install: false - name: Get pnpm store directory @@ -54,11 +54,11 @@ jobs: with: node-version: 18 - - uses: pnpm/action-setup@v2.2.4 + - uses: pnpm/action-setup@v4 name: Install pnpm id: pnpm-install with: - version: 8.6.1 + version: 9.0.6 run_install: false - name: Get pnpm store directory @@ -92,11 +92,11 @@ jobs: with: node-version: 18 - - uses: pnpm/action-setup@v2.2.4 + - uses: pnpm/action-setup@v4 name: Install pnpm id: pnpm-install with: - version: 8.6.1 + version: 9.0.6 run_install: false - name: Get pnpm store directory diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml index ea414857c6..8c7be9fe99 100644 --- a/.github/workflows/prerelease.yml +++ b/.github/workflows/prerelease.yml @@ -23,9 +23,9 @@ jobs: fetch-depth: 0 - name: Use PNPM - uses: pnpm/action-setup@v2.2.4 + uses: pnpm/action-setup@v4 with: - version: 8.6.1 + version: 9.0.6 - name: Use Node.js 18 uses: actions/setup-node@v3 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 7ec48407d9..050a17e605 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -19,14 +19,14 @@ jobs: fetch-depth: 0 - name: Use PNPM - uses: pnpm/action-setup@v2.2.4 + uses: pnpm/action-setup@v4 with: - version: 8.6.1 + version: 9.0.6 - name: Use Node.js 18 uses: actions/setup-node@v3 with: - version: 8.6.1 + version: 9.0.6 node-version: 18 cache: "pnpm" diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index c350ce1b04..5cce791f41 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -18,11 +18,11 @@ jobs: with: node-version: 18 - - uses: pnpm/action-setup@v2.2.4 + - uses: pnpm/action-setup@v4 name: Install pnpm id: pnpm-install with: - version: 8.6.1 + version: 9.0.6 run_install: false - name: Get pnpm store directory diff --git a/apps/www/__registry__/default/block/chart-area-axes.tsx b/apps/www/__registry__/default/block/chart-area-axes.tsx new file mode 100644 index 0000000000..e6c173dcb5 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-axes.tsx @@ -0,0 +1,110 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "An area chart with axes" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Axes + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-default.tsx b/apps/www/__registry__/default/block/chart-area-default.tsx new file mode 100644 index 0000000000..925eb60367 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-default.tsx @@ -0,0 +1,94 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A simple area chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-gradient.tsx b/apps/www/__registry__/default/block/chart-area-gradient.tsx new file mode 100644 index 0000000000..0314f690fc --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-gradient.tsx @@ -0,0 +1,130 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "An area chart with gradient fill" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Gradient + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + + + + + + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-icons.tsx b/apps/www/__registry__/default/block/chart-area-icons.tsx new file mode 100644 index 0000000000..05d2e4ef0b --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-icons.tsx @@ -0,0 +1,112 @@ +"use client" + +import { TrendingDown, TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "An area chart with icons" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: TrendingDown, + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + icon: TrendingUp, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Icons + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + } /> + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-interactive.tsx b/apps/www/__registry__/default/block/chart-area-interactive.tsx new file mode 100644 index 0000000000..3044b7357a --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-interactive.tsx @@ -0,0 +1,265 @@ +"use client" + +import * as React from "react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" + +export const description = "An interactive area chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const [timeRange, setTimeRange] = React.useState("90d") + + const filteredData = chartData.filter((item) => { + const date = new Date(item.date) + const now = new Date() + let daysToSubtract = 90 + if (timeRange === "30d") { + daysToSubtract = 30 + } else if (timeRange === "7d") { + daysToSubtract = 7 + } + now.setDate(now.getDate() - daysToSubtract) + return date >= now + }) + + return ( + + +
+ Area Chart - Interactive + + Showing total visitors for the last 3 months + +
+ + + + + + + + + + + + + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + indicator="dot" + /> + } + /> + + + } /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-legend.tsx b/apps/www/__registry__/default/block/chart-area-legend.tsx new file mode 100644 index 0000000000..9d7cfe3d1e --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-legend.tsx @@ -0,0 +1,110 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "An area chart with a legend" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Legend + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + } /> + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-linear.tsx b/apps/www/__registry__/default/block/chart-area-linear.tsx new file mode 100644 index 0000000000..4e58417994 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-linear.tsx @@ -0,0 +1,94 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A linear area chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Linear + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/default/block/chart-area-stacked-expand.tsx new file mode 100644 index 0000000000..ab66f89565 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-stacked-expand.tsx @@ -0,0 +1,121 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked area chart with expand stacking" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80, other: 45 }, + { month: "February", desktop: 305, mobile: 200, other: 100 }, + { month: "March", desktop: 237, mobile: 120, other: 150 }, + { month: "April", desktop: 73, mobile: 190, other: 50 }, + { month: "May", desktop: 209, mobile: 130, other: 100 }, + { month: "June", desktop: 214, mobile: 140, other: 160 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-3))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Stacked Expanded + + Showing total visitors for the last 6months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-stacked.tsx b/apps/www/__registry__/default/block/chart-area-stacked.tsx new file mode 100644 index 0000000000..3820dd7a7b --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-stacked.tsx @@ -0,0 +1,107 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked area chart" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Stacked + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-area-step.tsx b/apps/www/__registry__/default/block/chart-area-step.tsx new file mode 100644 index 0000000000..4ca6623d26 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-area-step.tsx @@ -0,0 +1,95 @@ +"use client" + +import { Activity, TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A step area chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: Activity, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Step + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-active.tsx b/apps/www/__registry__/default/block/chart-bar-active.tsx new file mode 100644 index 0000000000..f1be5c7718 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-active.tsx @@ -0,0 +1,111 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A bar chart with an active bar" + +const chartData = [ + { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Active + January - June 2024 + + + + + + + chartConfig[value as keyof typeof chartConfig]?.label + } + /> + } + /> + { + return ( + + ) + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-default.tsx b/apps/www/__registry__/default/block/chart-bar-default.tsx new file mode 100644 index 0000000000..9fc5f15a15 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-default.tsx @@ -0,0 +1,75 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A bar chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-horizontal.tsx b/apps/www/__registry__/default/block/chart-bar-horizontal.tsx new file mode 100644 index 0000000000..ac74114cee --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-horizontal.tsx @@ -0,0 +1,83 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A horizontal bar chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Horizontal + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-interactive.tsx b/apps/www/__registry__/default/block/chart-bar-interactive.tsx new file mode 100644 index 0000000000..84bcc6a28c --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-interactive.tsx @@ -0,0 +1,221 @@ +"use client" + +import * as React from "react" +import { Bar, BarChart, CartesianGrid, 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 = "An interactive bar chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + views: { + label: "Page Views", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const [activeChart, setActiveChart] = + React.useState("desktop") + + const total = React.useMemo( + () => ({ + desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), + mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), + }), + [] + ) + + return ( + + +
+ Bar Chart - Interactive + + Showing total visitors for the last 3 months + +
+
+ {["desktop", "mobile"].map((key) => { + const chart = key as keyof typeof chartConfig + return ( + + ) + })} +
+ + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }) + }} + /> + } + /> + + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-label-custom.tsx b/apps/www/__registry__/default/block/chart-bar-label-custom.tsx new file mode 100644 index 0000000000..bd16655bc7 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-label-custom.tsx @@ -0,0 +1,112 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A bar chart with a custom label" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + label: { + color: "hsl(var(--background))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Custom Label + January - June 2024 + + + + + + value.slice(0, 3)} + hide + /> + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-label.tsx b/apps/www/__registry__/default/block/chart-bar-label.tsx new file mode 100644 index 0000000000..c7ebea70e0 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-label.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A bar chart with a label" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Label + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-mixed.tsx b/apps/www/__registry__/default/block/chart-bar-mixed.tsx new file mode 100644 index 0000000000..fa3beea6fc --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-mixed.tsx @@ -0,0 +1,103 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A mixed bar chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Mixed + January - June 2024 + + + + + + chartConfig[value as keyof typeof chartConfig]?.label + } + /> + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-multiple.tsx b/apps/www/__registry__/default/block/chart-bar-multiple.tsx new file mode 100644 index 0000000000..39b80fa76f --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-multiple.tsx @@ -0,0 +1,80 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A multiple bar chart" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-negative.tsx b/apps/www/__registry__/default/block/chart-bar-negative.tsx new file mode 100644 index 0000000000..f9e3b3e360 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-negative.tsx @@ -0,0 +1,79 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A bar chart with negative values" + +const chartData = [ + { month: "January", visitors: 186 }, + { month: "February", visitors: 205 }, + { month: "March", visitors: -207 }, + { month: "April", visitors: 173 }, + { month: "May", visitors: -209 }, + { month: "June", visitors: 214 }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Negative + January - June 2024 + + + + + + } + /> + + + {chartData.map((item) => ( + 0 + ? "hsl(var(--chart-1))" + : "hsl(var(--chart-2))" + } + /> + ))} + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-bar-stacked.tsx b/apps/www/__registry__/default/block/chart-bar-stacked.tsx new file mode 100644 index 0000000000..211bfe6aef --- /dev/null +++ b/apps/www/__registry__/default/block/chart-bar-stacked.tsx @@ -0,0 +1,90 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Stacked + Legend + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + } /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-default.tsx b/apps/www/__registry__/default/block/chart-line-default.tsx new file mode 100644 index 0000000000..24972697fc --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-default.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-dots-colors.tsx b/apps/www/__registry__/default/block/chart-line-dots-colors.tsx new file mode 100644 index 0000000000..e568ddd990 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-dots-colors.tsx @@ -0,0 +1,118 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Dot, Line, LineChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart with dots and colors" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + color: "hsl(var(--chart-2))", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Dots Colors + January - June 2024 + + + + + + + } + /> + { + return ( + + ) + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-dots-custom.tsx b/apps/www/__registry__/default/block/chart-line-dots-custom.tsx new file mode 100644 index 0000000000..4eae4da575 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-dots-custom.tsx @@ -0,0 +1,105 @@ +"use client" + +import { GitCommitVertical, TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart with custom dots" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Custom Dots + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + { + const r = 24 + return ( + + ) + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-dots.tsx b/apps/www/__registry__/default/block/chart-line-dots.tsx new file mode 100644 index 0000000000..d52f09148e --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-dots.tsx @@ -0,0 +1,97 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart with dots" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Dots + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-interactive.tsx b/apps/www/__registry__/default/block/chart-line-interactive.tsx new file mode 100644 index 0000000000..6f61820071 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-interactive.tsx @@ -0,0 +1,227 @@ +"use client" + +import * as React from "react" +import { CartesianGrid, Line, LineChart, 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 = "An interactive line chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + views: { + label: "Page Views", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const [activeChart, setActiveChart] = + React.useState("desktop") + + const total = React.useMemo( + () => ({ + desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), + mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), + }), + [] + ) + + return ( + + +
+ Line Chart - Interactive + + Showing total visitors for the last 3 months + +
+
+ {["desktop", "mobile"].map((key) => { + const chart = key as keyof typeof chartConfig + return ( + + ) + })} +
+ + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }) + }} + /> + } + /> + + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-label-custom.tsx b/apps/www/__registry__/default/block/chart-line-label-custom.tsx new file mode 100644 index 0000000000..e6976bd892 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-label-custom.tsx @@ -0,0 +1,123 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, LabelList, Line, LineChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart with a custom label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + color: "hsl(var(--chart-2))", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Custom Label + January - June 2024 + + + + + + + } + /> + + + chartConfig[value]?.label + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-label.tsx b/apps/www/__registry__/default/block/chart-line-label.tsx new file mode 100644 index 0000000000..159e103176 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-label.tsx @@ -0,0 +1,105 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart with a label" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Label + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-linear.tsx b/apps/www/__registry__/default/block/chart-line-linear.tsx new file mode 100644 index 0000000000..9d3e06f5e9 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-linear.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A linear line chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Linear + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-multiple.tsx b/apps/www/__registry__/default/block/chart-line-multiple.tsx new file mode 100644 index 0000000000..61ea1d960f --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-multiple.tsx @@ -0,0 +1,100 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A multiple line chart" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-line-step.tsx b/apps/www/__registry__/default/block/chart-line-step.tsx new file mode 100644 index 0000000000..608bd5f628 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-line-step.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A line chart with step" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Step + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-donut-active.tsx b/apps/www/__registry__/default/block/chart-pie-donut-active.tsx new file mode 100644 index 0000000000..5a39041919 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-donut-active.tsx @@ -0,0 +1,102 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Label, Pie, PieChart, Sector } from "recharts" +import { PieSectorDataItem } from "recharts/types/polar/Pie" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A donut chart with an active sector" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Donut Active + January - June 2024 + + + + + } + /> + ( + + )} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-donut-text.tsx b/apps/www/__registry__/default/block/chart-pie-donut-text.tsx new file mode 100644 index 0000000000..ff5391ab1d --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-donut-text.tsx @@ -0,0 +1,129 @@ +"use client" + +import * as React from "react" +import { TrendingUp } from "lucide-react" +import { Label, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A donut chart with text" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 190, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + const totalVisitors = React.useMemo(() => { + return chartData.reduce((acc, curr) => acc + curr.visitors, 0) + }, []) + + return ( + + + Pie Chart - Donut with Text + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-donut.tsx b/apps/www/__registry__/default/block/chart-pie-donut.tsx new file mode 100644 index 0000000000..45d17ecdd2 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-donut.tsx @@ -0,0 +1,93 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A donut chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Donut + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-interactive.tsx b/apps/www/__registry__/default/block/chart-pie-interactive.tsx new file mode 100644 index 0000000000..e1abb04262 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-interactive.tsx @@ -0,0 +1,192 @@ +"use client" + +import * as React from "react" +import { Label, Pie, PieChart, Sector } from "recharts" +import { PieSectorDataItem } from "recharts/types/polar/Pie" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartStyle, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" + +export const description = "An interactive pie chart" + +const desktopData = [ + { month: "january", desktop: 186, fill: "var(--color-january)" }, + { month: "february", desktop: 305, fill: "var(--color-february)" }, + { month: "march", desktop: 237, fill: "var(--color-march)" }, + { month: "april", desktop: 173, fill: "var(--color-april)" }, + { month: "may", desktop: 209, fill: "var(--color-may)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + }, + mobile: { + label: "Mobile", + }, + january: { + label: "January", + color: "hsl(var(--chart-1))", + }, + february: { + label: "February", + color: "hsl(var(--chart-2))", + }, + march: { + label: "March", + color: "hsl(var(--chart-3))", + }, + april: { + label: "April", + color: "hsl(var(--chart-4))", + }, + may: { + label: "May", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + const id = "pie-interactive" + const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month) + + const activeIndex = React.useMemo( + () => desktopData.findIndex((item) => item.month === activeMonth), + [activeMonth] + ) + const months = React.useMemo(() => desktopData.map((item) => item.month), []) + + return ( + + + +
+ Pie Chart - Interactive + January - June 2024 +
+ + + + + + } + /> + ( + + + + + )} + > + + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-label-custom.tsx b/apps/www/__registry__/default/block/chart-pie-label-custom.tsx new file mode 100644 index 0000000000..647712d505 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-label-custom.tsx @@ -0,0 +1,110 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A pie chart with a custom label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Custom Label + January - June 2024 + + + + + } + /> + { + return ( + + {`${ + chartConfig[payload.browser as keyof typeof chartConfig] + ?.label + } (${payload.visitors})`} + + ) + }} + nameKey="browser" + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-label-list.tsx b/apps/www/__registry__/default/block/chart-pie-label-list.tsx new file mode 100644 index 0000000000..fa5f0038ce --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-label-list.tsx @@ -0,0 +1,97 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { LabelList, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A pie chart with a label list" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Label List + January - June 2024 + + + + + } + /> + + + chartConfig[value]?.label + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/block/chart-pie-label.tsx new file mode 100644 index 0000000000..54914a2547 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-label.tsx @@ -0,0 +1,85 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A pie chart with a label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Label + January - June 2024 + + + + + } /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/block/chart-pie-legend.tsx new file mode 100644 index 0000000000..aca8cac60f --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-legend.tsx @@ -0,0 +1,85 @@ +"use client" + +import { LabelList, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, +} from "@/registry/default/ui/chart" + +export const description = "A pie chart with a legend" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Legend + January - June 2024 + + + + + + + + } + className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" + /> + + + + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-separator-none.tsx b/apps/www/__registry__/default/block/chart-pie-separator-none.tsx new file mode 100644 index 0000000000..08ec2b5633 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-separator-none.tsx @@ -0,0 +1,93 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A pie chart with no separator" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Separator None + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-simple.tsx b/apps/www/__registry__/default/block/chart-pie-simple.tsx new file mode 100644 index 0000000000..5108126f71 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-simple.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A simple pie chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-pie-stacked.tsx b/apps/www/__registry__/default/block/chart-pie-stacked.tsx new file mode 100644 index 0000000000..db8b0efbbc --- /dev/null +++ b/apps/www/__registry__/default/block/chart-pie-stacked.tsx @@ -0,0 +1,119 @@ +"use client" + +import * as React from "react" +import { TrendingUp } from "lucide-react" +import { Label, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A pie chart with stacked sections" + +const desktopData = [ + { month: "january", desktop: 186, fill: "var(--color-january)" }, + { month: "february", desktop: 305, fill: "var(--color-february)" }, + { month: "march", desktop: 237, fill: "var(--color-march)" }, + { month: "april", desktop: 173, fill: "var(--color-april)" }, + { month: "may", desktop: 209, fill: "var(--color-may)" }, +] + +const mobileData = [ + { month: "january", mobile: 80, fill: "var(--color-january)" }, + { month: "february", mobile: 200, fill: "var(--color-february)" }, + { month: "march", mobile: 120, fill: "var(--color-march)" }, + { month: "april", mobile: 190, fill: "var(--color-april)" }, + { month: "may", mobile: 130, fill: "var(--color-may)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + }, + mobile: { + label: "Mobile", + }, + january: { + label: "January", + color: "hsl(var(--chart-1))", + }, + february: { + label: "February", + color: "hsl(var(--chart-2))", + }, + march: { + label: "March", + color: "hsl(var(--chart-3))", + }, + april: { + label: "April", + color: "hsl(var(--chart-4))", + }, + may: { + label: "May", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Stacked + January - June 2024 + + + + + { + return chartConfig[ + payload?.[0].dataKey as keyof typeof chartConfig + ].label + }} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-default.tsx b/apps/www/__registry__/default/block/chart-radar-default.tsx new file mode 100644 index 0000000000..e4b4185684 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-default.tsx @@ -0,0 +1,75 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-dots.tsx b/apps/www/__registry__/default/block/chart-radar-dots.tsx new file mode 100644 index 0000000000..461a229540 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-dots.tsx @@ -0,0 +1,79 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with dots" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Dots + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx new file mode 100644 index 0000000000..0bed543195 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx @@ -0,0 +1,78 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a grid and circle fill" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 285 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 264 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Circle Filled + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx new file mode 100644 index 0000000000..332a86b3cb --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx @@ -0,0 +1,82 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a grid and circle fill" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Circle - No lines + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/default/block/chart-radar-grid-circle.tsx new file mode 100644 index 0000000000..e6b3a569c4 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-grid-circle.tsx @@ -0,0 +1,82 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a grid and circle" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Circle + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/default/block/chart-radar-grid-custom.tsx new file mode 100644 index 0000000000..738d9f7c2a --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-grid-custom.tsx @@ -0,0 +1,78 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a custom grid" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Custom + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/default/block/chart-radar-grid-fill.tsx new file mode 100644 index 0000000000..182b08f51a --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-grid-fill.tsx @@ -0,0 +1,78 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a grid filled" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 285 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 264 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Filled + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-grid-none.tsx b/apps/www/__registry__/default/block/chart-radar-grid-none.tsx new file mode 100644 index 0000000000..348075e832 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-grid-none.tsx @@ -0,0 +1,81 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with no grid" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid None + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-icons.tsx b/apps/www/__registry__/default/block/chart-radar-icons.tsx new file mode 100644 index 0000000000..efbbf89c8b --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-icons.tsx @@ -0,0 +1,94 @@ +"use client" + +import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with icons" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: ArrowDownFromLine, + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + icon: ArrowUpFromLine, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Icons + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + } /> + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-label-custom.tsx b/apps/www/__registry__/default/block/chart-radar-label-custom.tsx new file mode 100644 index 0000000000..4e65b8996d --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-label-custom.tsx @@ -0,0 +1,120 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a custom label" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Custom Label + + Showing total visitors for the last 6 months + + + + + + } + /> + { + const data = chartData[index] + + return ( + + {data.desktop} + / + {data.mobile} + + {data.month} + + + ) + }} + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-legend.tsx b/apps/www/__registry__/default/block/chart-radar-legend.tsx new file mode 100644 index 0000000000..535bc82c07 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-legend.tsx @@ -0,0 +1,92 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a legend" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Legend + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + } /> + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-lines-only.tsx b/apps/www/__registry__/default/block/chart-radar-lines-only.tsx new file mode 100644 index 0000000000..c6e0c52525 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-lines-only.tsx @@ -0,0 +1,91 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with lines only" + +const chartData = [ + { month: "January", desktop: 186, mobile: 160 }, + { month: "February", desktop: 185, mobile: 170 }, + { month: "March", desktop: 207, mobile: 180 }, + { month: "April", desktop: 173, mobile: 160 }, + { month: "May", desktop: 160, mobile: 190 }, + { month: "June", desktop: 174, mobile: 204 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Lines Only + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-multiple.tsx b/apps/www/__registry__/default/block/chart-radar-multiple.tsx new file mode 100644 index 0000000000..2463d7ae31 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-multiple.tsx @@ -0,0 +1,83 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with multiple data" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Multiple + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radar-radius.tsx b/apps/www/__registry__/default/block/chart-radar-radius.tsx new file mode 100644 index 0000000000..22cbe8e197 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radar-radius.tsx @@ -0,0 +1,96 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { + PolarAngleAxis, + PolarGrid, + PolarRadiusAxis, + Radar, + RadarChart, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radar chart with a radius axis" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Radius Axis + + Showing total visitors for the last 6 months + + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radial-grid.tsx b/apps/www/__registry__/default/block/chart-radial-grid.tsx new file mode 100644 index 0000000000..cc91ba2c8b --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radial-grid.tsx @@ -0,0 +1,89 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarGrid, RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radial chart with a grid" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Grid + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radial-label.tsx b/apps/www/__registry__/default/block/chart-radial-label.tsx new file mode 100644 index 0000000000..179a919f6c --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radial-label.tsx @@ -0,0 +1,101 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { LabelList, RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radial chart with a label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Label + January - June 2024 + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radial-shape.tsx b/apps/www/__registry__/default/block/chart-radial-shape.tsx new file mode 100644 index 0000000000..bd3754e986 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radial-shape.tsx @@ -0,0 +1,108 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { ChartConfig, ChartContainer } from "@/registry/default/ui/chart" + +export const description = "A radial chart with a custom shape" + +const chartData = [ + { browser: "safari", visitors: 1260, fill: "var(--color-safari)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Shape + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radial-simple.tsx b/apps/www/__registry__/default/block/chart-radial-simple.tsx new file mode 100644 index 0000000000..57a8030230 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radial-simple.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radial chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radial-stacked.tsx b/apps/www/__registry__/default/block/chart-radial-stacked.tsx new file mode 100644 index 0000000000..a5b78f27fe --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radial-stacked.tsx @@ -0,0 +1,113 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/default/ui/chart" + +export const description = "A radial chart with stacked sections" + +const chartData = [{ month: "january", desktop: 1260, mobile: 570 }] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const totalVisitors = chartData[0].desktop + chartData[0].mobile + + return ( + + + Radial Chart - Stacked + January - June 2024 + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/default/block/chart-radial-text.tsx b/apps/www/__registry__/default/block/chart-radial-text.tsx new file mode 100644 index 0000000000..a798f66121 --- /dev/null +++ b/apps/www/__registry__/default/block/chart-radial-text.tsx @@ -0,0 +1,109 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { ChartConfig, ChartContainer } from "@/registry/default/ui/chart" + +export const description = "A radial chart with text" + +const chartData = [ + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Text + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 2c60878c1d..89a82b57c2 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -126,6 +126,17 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "chart": { + name: "chart", + type: "components:ui", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/ui/chart")), + source: "", + files: ["registry/default/ui/chart.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "checkbox": { name: "checkbox", type: "components:ui", @@ -2073,6 +2084,72 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "chart-bar-demo": { + name: "chart-bar-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/chart-bar-demo")), + source: "", + files: ["registry/default/example/chart-bar-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-grid": { + name: "chart-bar-demo-grid", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-grid")), + source: "", + files: ["registry/default/example/chart-bar-demo-grid.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-axis": { + name: "chart-bar-demo-axis", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-axis")), + source: "", + files: ["registry/default/example/chart-bar-demo-axis.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-tooltip": { + name: "chart-bar-demo-tooltip", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-tooltip")), + source: "", + files: ["registry/default/example/chart-bar-demo-tooltip.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-legend": { + name: "chart-bar-demo-legend", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-legend")), + source: "", + files: ["registry/default/example/chart-bar-demo-legend.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-tooltip-demo": { + name: "chart-tooltip-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/chart-tooltip-demo")), + source: "", + files: ["registry/default/example/chart-tooltip-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "dashboard-05": { name: "dashboard-05", type: "components:block", @@ -2394,6 +2471,677 @@ export const Index: Record = { subcategory: "Login", chunks: [] }, + "chart-area-axes": { + name: "chart-area-axes", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-axes")), + source: "__registry__/default/block/chart-area-axes.tsx", + files: ["registry/default/block/chart-area-axes.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-default": { + name: "chart-area-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-default")), + source: "__registry__/default/block/chart-area-default.tsx", + files: ["registry/default/block/chart-area-default.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-gradient": { + name: "chart-area-gradient", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-gradient")), + source: "__registry__/default/block/chart-area-gradient.tsx", + files: ["registry/default/block/chart-area-gradient.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-icons": { + name: "chart-area-icons", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-icons")), + source: "__registry__/default/block/chart-area-icons.tsx", + files: ["registry/default/block/chart-area-icons.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-interactive": { + name: "chart-area-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-interactive")), + source: "__registry__/default/block/chart-area-interactive.tsx", + files: ["registry/default/block/chart-area-interactive.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-legend": { + name: "chart-area-legend", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-legend")), + source: "__registry__/default/block/chart-area-legend.tsx", + files: ["registry/default/block/chart-area-legend.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-linear": { + name: "chart-area-linear", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-linear")), + source: "__registry__/default/block/chart-area-linear.tsx", + files: ["registry/default/block/chart-area-linear.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-stacked-expand": { + name: "chart-area-stacked-expand", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-stacked-expand")), + source: "__registry__/default/block/chart-area-stacked-expand.tsx", + files: ["registry/default/block/chart-area-stacked-expand.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-stacked": { + name: "chart-area-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-stacked")), + source: "__registry__/default/block/chart-area-stacked.tsx", + files: ["registry/default/block/chart-area-stacked.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-step": { + name: "chart-area-step", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-area-step")), + source: "__registry__/default/block/chart-area-step.tsx", + files: ["registry/default/block/chart-area-step.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-bar-active": { + name: "chart-bar-active", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-active")), + source: "__registry__/default/block/chart-bar-active.tsx", + files: ["registry/default/block/chart-bar-active.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-default": { + name: "chart-bar-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-default")), + source: "__registry__/default/block/chart-bar-default.tsx", + files: ["registry/default/block/chart-bar-default.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-horizontal": { + name: "chart-bar-horizontal", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-horizontal")), + source: "__registry__/default/block/chart-bar-horizontal.tsx", + files: ["registry/default/block/chart-bar-horizontal.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-interactive": { + name: "chart-bar-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-interactive")), + source: "__registry__/default/block/chart-bar-interactive.tsx", + files: ["registry/default/block/chart-bar-interactive.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-label-custom": { + name: "chart-bar-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-label-custom")), + source: "__registry__/default/block/chart-bar-label-custom.tsx", + files: ["registry/default/block/chart-bar-label-custom.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-label": { + name: "chart-bar-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-label")), + source: "__registry__/default/block/chart-bar-label.tsx", + files: ["registry/default/block/chart-bar-label.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-mixed": { + name: "chart-bar-mixed", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-mixed")), + source: "__registry__/default/block/chart-bar-mixed.tsx", + files: ["registry/default/block/chart-bar-mixed.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-multiple": { + name: "chart-bar-multiple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-multiple")), + source: "__registry__/default/block/chart-bar-multiple.tsx", + files: ["registry/default/block/chart-bar-multiple.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-negative": { + name: "chart-bar-negative", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-negative")), + source: "__registry__/default/block/chart-bar-negative.tsx", + files: ["registry/default/block/chart-bar-negative.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-stacked": { + name: "chart-bar-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-bar-stacked")), + source: "__registry__/default/block/chart-bar-stacked.tsx", + files: ["registry/default/block/chart-bar-stacked.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-line-default": { + name: "chart-line-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-default")), + source: "__registry__/default/block/chart-line-default.tsx", + files: ["registry/default/block/chart-line-default.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-dots-colors": { + name: "chart-line-dots-colors", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-dots-colors")), + source: "__registry__/default/block/chart-line-dots-colors.tsx", + files: ["registry/default/block/chart-line-dots-colors.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-dots-custom": { + name: "chart-line-dots-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-dots-custom")), + source: "__registry__/default/block/chart-line-dots-custom.tsx", + files: ["registry/default/block/chart-line-dots-custom.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-dots": { + name: "chart-line-dots", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-dots")), + source: "__registry__/default/block/chart-line-dots.tsx", + files: ["registry/default/block/chart-line-dots.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-interactive": { + name: "chart-line-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-interactive")), + source: "__registry__/default/block/chart-line-interactive.tsx", + files: ["registry/default/block/chart-line-interactive.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-label-custom": { + name: "chart-line-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-label-custom")), + source: "__registry__/default/block/chart-line-label-custom.tsx", + files: ["registry/default/block/chart-line-label-custom.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-label": { + name: "chart-line-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-label")), + source: "__registry__/default/block/chart-line-label.tsx", + files: ["registry/default/block/chart-line-label.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-linear": { + name: "chart-line-linear", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-linear")), + source: "__registry__/default/block/chart-line-linear.tsx", + files: ["registry/default/block/chart-line-linear.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-multiple": { + name: "chart-line-multiple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-multiple")), + source: "__registry__/default/block/chart-line-multiple.tsx", + files: ["registry/default/block/chart-line-multiple.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-step": { + name: "chart-line-step", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-line-step")), + source: "__registry__/default/block/chart-line-step.tsx", + files: ["registry/default/block/chart-line-step.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-pie-donut-active": { + name: "chart-pie-donut-active", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-donut-active")), + source: "__registry__/default/block/chart-pie-donut-active.tsx", + files: ["registry/default/block/chart-pie-donut-active.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-donut-text": { + name: "chart-pie-donut-text", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-donut-text")), + source: "__registry__/default/block/chart-pie-donut-text.tsx", + files: ["registry/default/block/chart-pie-donut-text.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-donut": { + name: "chart-pie-donut", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-donut")), + source: "__registry__/default/block/chart-pie-donut.tsx", + files: ["registry/default/block/chart-pie-donut.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-interactive": { + name: "chart-pie-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-interactive")), + source: "__registry__/default/block/chart-pie-interactive.tsx", + files: ["registry/default/block/chart-pie-interactive.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-label-custom": { + name: "chart-pie-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-label-custom")), + source: "__registry__/default/block/chart-pie-label-custom.tsx", + files: ["registry/default/block/chart-pie-label-custom.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-label-list": { + name: "chart-pie-label-list", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-label-list")), + source: "__registry__/default/block/chart-pie-label-list.tsx", + files: ["registry/default/block/chart-pie-label-list.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-label": { + name: "chart-pie-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-label")), + source: "__registry__/default/block/chart-pie-label.tsx", + files: ["registry/default/block/chart-pie-label.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-legend": { + name: "chart-pie-legend", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-legend")), + source: "__registry__/default/block/chart-pie-legend.tsx", + files: ["registry/default/block/chart-pie-legend.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-separator-none": { + name: "chart-pie-separator-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-separator-none")), + source: "__registry__/default/block/chart-pie-separator-none.tsx", + files: ["registry/default/block/chart-pie-separator-none.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-simple": { + name: "chart-pie-simple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-simple")), + source: "__registry__/default/block/chart-pie-simple.tsx", + files: ["registry/default/block/chart-pie-simple.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-stacked": { + name: "chart-pie-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-pie-stacked")), + source: "__registry__/default/block/chart-pie-stacked.tsx", + files: ["registry/default/block/chart-pie-stacked.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-radar-default": { + name: "chart-radar-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-default")), + source: "__registry__/default/block/chart-radar-default.tsx", + files: ["registry/default/block/chart-radar-default.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-dots": { + name: "chart-radar-dots", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-dots")), + source: "__registry__/default/block/chart-radar-dots.tsx", + files: ["registry/default/block/chart-radar-dots.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-circle-fill": { + name: "chart-radar-grid-circle-fill", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle-fill")), + source: "__registry__/default/block/chart-radar-grid-circle-fill.tsx", + files: ["registry/default/block/chart-radar-grid-circle-fill.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-circle-no-lines": { + name: "chart-radar-grid-circle-no-lines", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle-no-lines")), + source: "__registry__/default/block/chart-radar-grid-circle-no-lines.tsx", + files: ["registry/default/block/chart-radar-grid-circle-no-lines.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-circle": { + name: "chart-radar-grid-circle", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle")), + source: "__registry__/default/block/chart-radar-grid-circle.tsx", + files: ["registry/default/block/chart-radar-grid-circle.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-custom": { + name: "chart-radar-grid-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-custom")), + source: "__registry__/default/block/chart-radar-grid-custom.tsx", + files: ["registry/default/block/chart-radar-grid-custom.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-fill": { + name: "chart-radar-grid-fill", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-fill")), + source: "__registry__/default/block/chart-radar-grid-fill.tsx", + files: ["registry/default/block/chart-radar-grid-fill.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-none": { + name: "chart-radar-grid-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-none")), + source: "__registry__/default/block/chart-radar-grid-none.tsx", + files: ["registry/default/block/chart-radar-grid-none.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-icons": { + name: "chart-radar-icons", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-icons")), + source: "__registry__/default/block/chart-radar-icons.tsx", + files: ["registry/default/block/chart-radar-icons.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-label-custom": { + name: "chart-radar-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-label-custom")), + source: "__registry__/default/block/chart-radar-label-custom.tsx", + files: ["registry/default/block/chart-radar-label-custom.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-legend": { + name: "chart-radar-legend", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-legend")), + source: "__registry__/default/block/chart-radar-legend.tsx", + files: ["registry/default/block/chart-radar-legend.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-lines-only": { + name: "chart-radar-lines-only", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-lines-only")), + source: "__registry__/default/block/chart-radar-lines-only.tsx", + files: ["registry/default/block/chart-radar-lines-only.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-multiple": { + name: "chart-radar-multiple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-multiple")), + source: "__registry__/default/block/chart-radar-multiple.tsx", + files: ["registry/default/block/chart-radar-multiple.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-radius": { + name: "chart-radar-radius", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radar-radius")), + source: "__registry__/default/block/chart-radar-radius.tsx", + files: ["registry/default/block/chart-radar-radius.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radial-grid": { + name: "chart-radial-grid", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radial-grid")), + source: "__registry__/default/block/chart-radial-grid.tsx", + files: ["registry/default/block/chart-radial-grid.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-label": { + name: "chart-radial-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radial-label")), + source: "__registry__/default/block/chart-radial-label.tsx", + files: ["registry/default/block/chart-radial-label.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-shape": { + name: "chart-radial-shape", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radial-shape")), + source: "__registry__/default/block/chart-radial-shape.tsx", + files: ["registry/default/block/chart-radial-shape.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-simple": { + name: "chart-radial-simple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radial-simple")), + source: "__registry__/default/block/chart-radial-simple.tsx", + files: ["registry/default/block/chart-radial-simple.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-stacked": { + name: "chart-radial-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radial-stacked")), + source: "__registry__/default/block/chart-radial-stacked.tsx", + files: ["registry/default/block/chart-radial-stacked.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-text": { + name: "chart-radial-text", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/default/block/chart-radial-text")), + source: "__registry__/default/block/chart-radial-text.tsx", + files: ["registry/default/block/chart-radial-text.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, }, "new-york": { "accordion": { name: "accordion", @@ -2516,6 +3264,17 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "chart": { + name: "chart", + type: "components:ui", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/ui/chart")), + source: "", + files: ["registry/new-york/ui/chart.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "checkbox": { name: "checkbox", type: "components:ui", @@ -4463,6 +5222,72 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "chart-bar-demo": { + name: "chart-bar-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo")), + source: "", + files: ["registry/new-york/example/chart-bar-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-grid": { + name: "chart-bar-demo-grid", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-grid")), + source: "", + files: ["registry/new-york/example/chart-bar-demo-grid.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-axis": { + name: "chart-bar-demo-axis", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-axis")), + source: "", + files: ["registry/new-york/example/chart-bar-demo-axis.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-tooltip": { + name: "chart-bar-demo-tooltip", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-tooltip")), + source: "", + files: ["registry/new-york/example/chart-bar-demo-tooltip.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-bar-demo-legend": { + name: "chart-bar-demo-legend", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-legend")), + source: "", + files: ["registry/new-york/example/chart-bar-demo-legend.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "chart-tooltip-demo": { + name: "chart-tooltip-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/chart-tooltip-demo")), + source: "", + files: ["registry/new-york/example/chart-tooltip-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "dashboard-05": { name: "dashboard-05", type: "components:block", @@ -4525,20 +5350,12 @@ export const Index: Record = { subcategory: "Dashboard", chunks: [{ name: "dashboard-06-chunk-0", - description: "A breadcrumb with two links and a page indicator.", + description: "A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.", component: React.lazy(() => import("@/registry/new-york/block/dashboard-06-chunk-0")), file: "registry/new-york/block/dashboard-06-chunk-0.tsx", container: { className: "undefined" } - },{ - name: "dashboard-06-chunk-1", - description: "A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.", - component: React.lazy(() => import("@/registry/new-york/block/dashboard-06-chunk-1")), - file: "registry/new-york/block/dashboard-06-chunk-1.tsx", - container: { - className: "undefined" - } }] }, "dashboard-07": { @@ -4792,5 +5609,676 @@ export const Index: Record = { subcategory: "Login", chunks: [] }, + "chart-area-axes": { + name: "chart-area-axes", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-axes")), + source: "__registry__/new-york/block/chart-area-axes.tsx", + files: ["registry/new-york/block/chart-area-axes.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-default": { + name: "chart-area-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-default")), + source: "__registry__/new-york/block/chart-area-default.tsx", + files: ["registry/new-york/block/chart-area-default.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-gradient": { + name: "chart-area-gradient", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-gradient")), + source: "__registry__/new-york/block/chart-area-gradient.tsx", + files: ["registry/new-york/block/chart-area-gradient.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-icons": { + name: "chart-area-icons", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-icons")), + source: "__registry__/new-york/block/chart-area-icons.tsx", + files: ["registry/new-york/block/chart-area-icons.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-interactive": { + name: "chart-area-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-interactive")), + source: "__registry__/new-york/block/chart-area-interactive.tsx", + files: ["registry/new-york/block/chart-area-interactive.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-legend": { + name: "chart-area-legend", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-legend")), + source: "__registry__/new-york/block/chart-area-legend.tsx", + files: ["registry/new-york/block/chart-area-legend.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-linear": { + name: "chart-area-linear", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-linear")), + source: "__registry__/new-york/block/chart-area-linear.tsx", + files: ["registry/new-york/block/chart-area-linear.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-stacked-expand": { + name: "chart-area-stacked-expand", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked-expand")), + source: "__registry__/new-york/block/chart-area-stacked-expand.tsx", + files: ["registry/new-york/block/chart-area-stacked-expand.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-stacked": { + name: "chart-area-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked")), + source: "__registry__/new-york/block/chart-area-stacked.tsx", + files: ["registry/new-york/block/chart-area-stacked.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-area-step": { + name: "chart-area-step", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-area-step")), + source: "__registry__/new-york/block/chart-area-step.tsx", + files: ["registry/new-york/block/chart-area-step.tsx"], + category: "Charts", + subcategory: "Area", + chunks: [] + }, + "chart-bar-active": { + name: "chart-bar-active", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-active")), + source: "__registry__/new-york/block/chart-bar-active.tsx", + files: ["registry/new-york/block/chart-bar-active.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-default": { + name: "chart-bar-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-default")), + source: "__registry__/new-york/block/chart-bar-default.tsx", + files: ["registry/new-york/block/chart-bar-default.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-horizontal": { + name: "chart-bar-horizontal", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-horizontal")), + source: "__registry__/new-york/block/chart-bar-horizontal.tsx", + files: ["registry/new-york/block/chart-bar-horizontal.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-interactive": { + name: "chart-bar-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-interactive")), + source: "__registry__/new-york/block/chart-bar-interactive.tsx", + files: ["registry/new-york/block/chart-bar-interactive.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-label-custom": { + name: "chart-bar-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label-custom")), + source: "__registry__/new-york/block/chart-bar-label-custom.tsx", + files: ["registry/new-york/block/chart-bar-label-custom.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-label": { + name: "chart-bar-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label")), + source: "__registry__/new-york/block/chart-bar-label.tsx", + files: ["registry/new-york/block/chart-bar-label.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-mixed": { + name: "chart-bar-mixed", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-mixed")), + source: "__registry__/new-york/block/chart-bar-mixed.tsx", + files: ["registry/new-york/block/chart-bar-mixed.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-multiple": { + name: "chart-bar-multiple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-multiple")), + source: "__registry__/new-york/block/chart-bar-multiple.tsx", + files: ["registry/new-york/block/chart-bar-multiple.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-negative": { + name: "chart-bar-negative", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-negative")), + source: "__registry__/new-york/block/chart-bar-negative.tsx", + files: ["registry/new-york/block/chart-bar-negative.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-bar-stacked": { + name: "chart-bar-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-bar-stacked")), + source: "__registry__/new-york/block/chart-bar-stacked.tsx", + files: ["registry/new-york/block/chart-bar-stacked.tsx"], + category: "Charts", + subcategory: "Bar", + chunks: [] + }, + "chart-line-default": { + name: "chart-line-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-default")), + source: "__registry__/new-york/block/chart-line-default.tsx", + files: ["registry/new-york/block/chart-line-default.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-dots-colors": { + name: "chart-line-dots-colors", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-colors")), + source: "__registry__/new-york/block/chart-line-dots-colors.tsx", + files: ["registry/new-york/block/chart-line-dots-colors.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-dots-custom": { + name: "chart-line-dots-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-custom")), + source: "__registry__/new-york/block/chart-line-dots-custom.tsx", + files: ["registry/new-york/block/chart-line-dots-custom.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-dots": { + name: "chart-line-dots", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots")), + source: "__registry__/new-york/block/chart-line-dots.tsx", + files: ["registry/new-york/block/chart-line-dots.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-interactive": { + name: "chart-line-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-interactive")), + source: "__registry__/new-york/block/chart-line-interactive.tsx", + files: ["registry/new-york/block/chart-line-interactive.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-label-custom": { + name: "chart-line-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-label-custom")), + source: "__registry__/new-york/block/chart-line-label-custom.tsx", + files: ["registry/new-york/block/chart-line-label-custom.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-label": { + name: "chart-line-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-label")), + source: "__registry__/new-york/block/chart-line-label.tsx", + files: ["registry/new-york/block/chart-line-label.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-linear": { + name: "chart-line-linear", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-linear")), + source: "__registry__/new-york/block/chart-line-linear.tsx", + files: ["registry/new-york/block/chart-line-linear.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-multiple": { + name: "chart-line-multiple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-multiple")), + source: "__registry__/new-york/block/chart-line-multiple.tsx", + files: ["registry/new-york/block/chart-line-multiple.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-line-step": { + name: "chart-line-step", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-line-step")), + source: "__registry__/new-york/block/chart-line-step.tsx", + files: ["registry/new-york/block/chart-line-step.tsx"], + category: "Charts", + subcategory: "Line", + chunks: [] + }, + "chart-pie-donut-active": { + name: "chart-pie-donut-active", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-active")), + source: "__registry__/new-york/block/chart-pie-donut-active.tsx", + files: ["registry/new-york/block/chart-pie-donut-active.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-donut-text": { + name: "chart-pie-donut-text", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-text")), + source: "__registry__/new-york/block/chart-pie-donut-text.tsx", + files: ["registry/new-york/block/chart-pie-donut-text.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-donut": { + name: "chart-pie-donut", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut")), + source: "__registry__/new-york/block/chart-pie-donut.tsx", + files: ["registry/new-york/block/chart-pie-donut.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-interactive": { + name: "chart-pie-interactive", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-interactive")), + source: "__registry__/new-york/block/chart-pie-interactive.tsx", + files: ["registry/new-york/block/chart-pie-interactive.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-label-custom": { + name: "chart-pie-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-custom")), + source: "__registry__/new-york/block/chart-pie-label-custom.tsx", + files: ["registry/new-york/block/chart-pie-label-custom.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-label-list": { + name: "chart-pie-label-list", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-list")), + source: "__registry__/new-york/block/chart-pie-label-list.tsx", + files: ["registry/new-york/block/chart-pie-label-list.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-label": { + name: "chart-pie-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label")), + source: "__registry__/new-york/block/chart-pie-label.tsx", + files: ["registry/new-york/block/chart-pie-label.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-legend": { + name: "chart-pie-legend", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-legend")), + source: "__registry__/new-york/block/chart-pie-legend.tsx", + files: ["registry/new-york/block/chart-pie-legend.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-separator-none": { + name: "chart-pie-separator-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-separator-none")), + source: "__registry__/new-york/block/chart-pie-separator-none.tsx", + files: ["registry/new-york/block/chart-pie-separator-none.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-simple": { + name: "chart-pie-simple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-simple")), + source: "__registry__/new-york/block/chart-pie-simple.tsx", + files: ["registry/new-york/block/chart-pie-simple.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-pie-stacked": { + name: "chart-pie-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-pie-stacked")), + source: "__registry__/new-york/block/chart-pie-stacked.tsx", + files: ["registry/new-york/block/chart-pie-stacked.tsx"], + category: "Charts", + subcategory: "Pie", + chunks: [] + }, + "chart-radar-default": { + name: "chart-radar-default", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-default")), + source: "__registry__/new-york/block/chart-radar-default.tsx", + files: ["registry/new-york/block/chart-radar-default.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-dots": { + name: "chart-radar-dots", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-dots")), + source: "__registry__/new-york/block/chart-radar-dots.tsx", + files: ["registry/new-york/block/chart-radar-dots.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-circle-fill": { + name: "chart-radar-grid-circle-fill", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-fill")), + source: "__registry__/new-york/block/chart-radar-grid-circle-fill.tsx", + files: ["registry/new-york/block/chart-radar-grid-circle-fill.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-circle-no-lines": { + name: "chart-radar-grid-circle-no-lines", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-no-lines")), + source: "__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx", + files: ["registry/new-york/block/chart-radar-grid-circle-no-lines.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-circle": { + name: "chart-radar-grid-circle", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle")), + source: "__registry__/new-york/block/chart-radar-grid-circle.tsx", + files: ["registry/new-york/block/chart-radar-grid-circle.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-custom": { + name: "chart-radar-grid-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-custom")), + source: "__registry__/new-york/block/chart-radar-grid-custom.tsx", + files: ["registry/new-york/block/chart-radar-grid-custom.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-fill": { + name: "chart-radar-grid-fill", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-fill")), + source: "__registry__/new-york/block/chart-radar-grid-fill.tsx", + files: ["registry/new-york/block/chart-radar-grid-fill.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-grid-none": { + name: "chart-radar-grid-none", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-none")), + source: "__registry__/new-york/block/chart-radar-grid-none.tsx", + files: ["registry/new-york/block/chart-radar-grid-none.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-icons": { + name: "chart-radar-icons", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-icons")), + source: "__registry__/new-york/block/chart-radar-icons.tsx", + files: ["registry/new-york/block/chart-radar-icons.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-label-custom": { + name: "chart-radar-label-custom", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-label-custom")), + source: "__registry__/new-york/block/chart-radar-label-custom.tsx", + files: ["registry/new-york/block/chart-radar-label-custom.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-legend": { + name: "chart-radar-legend", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-legend")), + source: "__registry__/new-york/block/chart-radar-legend.tsx", + files: ["registry/new-york/block/chart-radar-legend.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-lines-only": { + name: "chart-radar-lines-only", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-lines-only")), + source: "__registry__/new-york/block/chart-radar-lines-only.tsx", + files: ["registry/new-york/block/chart-radar-lines-only.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-multiple": { + name: "chart-radar-multiple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-multiple")), + source: "__registry__/new-york/block/chart-radar-multiple.tsx", + files: ["registry/new-york/block/chart-radar-multiple.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radar-radius": { + name: "chart-radar-radius", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radar-radius")), + source: "__registry__/new-york/block/chart-radar-radius.tsx", + files: ["registry/new-york/block/chart-radar-radius.tsx"], + category: "Charts", + subcategory: "Radar", + chunks: [] + }, + "chart-radial-grid": { + name: "chart-radial-grid", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radial-grid")), + source: "__registry__/new-york/block/chart-radial-grid.tsx", + files: ["registry/new-york/block/chart-radial-grid.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-label": { + name: "chart-radial-label", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radial-label")), + source: "__registry__/new-york/block/chart-radial-label.tsx", + files: ["registry/new-york/block/chart-radial-label.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-shape": { + name: "chart-radial-shape", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radial-shape")), + source: "__registry__/new-york/block/chart-radial-shape.tsx", + files: ["registry/new-york/block/chart-radial-shape.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-simple": { + name: "chart-radial-simple", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radial-simple")), + source: "__registry__/new-york/block/chart-radial-simple.tsx", + files: ["registry/new-york/block/chart-radial-simple.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-stacked": { + name: "chart-radial-stacked", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radial-stacked")), + source: "__registry__/new-york/block/chart-radial-stacked.tsx", + files: ["registry/new-york/block/chart-radial-stacked.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, + "chart-radial-text": { + name: "chart-radial-text", + type: "components:block", + registryDependencies: ["card","chart"], + component: React.lazy(() => import("@/registry/new-york/block/chart-radial-text")), + source: "__registry__/new-york/block/chart-radial-text.tsx", + files: ["registry/new-york/block/chart-radial-text.tsx"], + category: "Charts", + subcategory: "Radial", + chunks: [] + }, }, } diff --git a/apps/www/__registry__/new-york/block/chart-area-axes.tsx b/apps/www/__registry__/new-york/block/chart-area-axes.tsx new file mode 100644 index 0000000000..8efb8a382d --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-axes.tsx @@ -0,0 +1,110 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "An area chart with axes" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Axes + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-default.tsx b/apps/www/__registry__/new-york/block/chart-area-default.tsx new file mode 100644 index 0000000000..95e9ca5a73 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-default.tsx @@ -0,0 +1,94 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A simple area chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-gradient.tsx b/apps/www/__registry__/new-york/block/chart-area-gradient.tsx new file mode 100644 index 0000000000..de6eada513 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-gradient.tsx @@ -0,0 +1,130 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "An area chart with gradient fill" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Gradient + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + + + + + + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-icons.tsx b/apps/www/__registry__/new-york/block/chart-area-icons.tsx new file mode 100644 index 0000000000..5d136dfd07 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-icons.tsx @@ -0,0 +1,112 @@ +"use client" + +import { TrendingDown, TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "An area chart with icons" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: TrendingDown, + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + icon: TrendingUp, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Icons + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + } /> + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-interactive.tsx b/apps/www/__registry__/new-york/block/chart-area-interactive.tsx new file mode 100644 index 0000000000..1cd672af11 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-interactive.tsx @@ -0,0 +1,265 @@ +"use client" + +import * as React from "react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/new-york/ui/select" + +export const description = "An interactive area chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const [timeRange, setTimeRange] = React.useState("90d") + + const filteredData = chartData.filter((item) => { + const date = new Date(item.date) + const now = new Date() + let daysToSubtract = 90 + if (timeRange === "30d") { + daysToSubtract = 30 + } else if (timeRange === "7d") { + daysToSubtract = 7 + } + now.setDate(now.getDate() - daysToSubtract) + return date >= now + }) + + return ( + + +
+ Area Chart - Interactive + + Showing total visitors for the last 3 months + +
+ + + + + + + + + + + + + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + indicator="dot" + /> + } + /> + + + } /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-legend.tsx b/apps/www/__registry__/new-york/block/chart-area-legend.tsx new file mode 100644 index 0000000000..13ba0ba54a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-legend.tsx @@ -0,0 +1,110 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "An area chart with a legend" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Legend + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + } /> + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-linear.tsx b/apps/www/__registry__/new-york/block/chart-area-linear.tsx new file mode 100644 index 0000000000..2b88f333fd --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-linear.tsx @@ -0,0 +1,94 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A linear area chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Linear + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx new file mode 100644 index 0000000000..f7662c0f71 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx @@ -0,0 +1,121 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked area chart with expand stacking" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80, other: 45 }, + { month: "February", desktop: 305, mobile: 200, other: 100 }, + { month: "March", desktop: 237, mobile: 120, other: 150 }, + { month: "April", desktop: 73, mobile: 190, other: 50 }, + { month: "May", desktop: 209, mobile: 130, other: 100 }, + { month: "June", desktop: 214, mobile: 140, other: 160 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-3))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Stacked Expanded + + Showing total visitors for the last 6months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-stacked.tsx b/apps/www/__registry__/new-york/block/chart-area-stacked.tsx new file mode 100644 index 0000000000..d0c1b6eee8 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-stacked.tsx @@ -0,0 +1,107 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked area chart" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Stacked + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-area-step.tsx b/apps/www/__registry__/new-york/block/chart-area-step.tsx new file mode 100644 index 0000000000..be43a89d3c --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-area-step.tsx @@ -0,0 +1,95 @@ +"use client" + +import { Activity, TrendingUp } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A step area chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: Activity, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Area Chart - Step + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-active.tsx b/apps/www/__registry__/new-york/block/chart-bar-active.tsx new file mode 100644 index 0000000000..b913609d92 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-active.tsx @@ -0,0 +1,111 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A bar chart with an active bar" + +const chartData = [ + { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Active + January - June 2024 + + + + + + + chartConfig[value as keyof typeof chartConfig]?.label + } + /> + } + /> + { + return ( + + ) + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-default.tsx b/apps/www/__registry__/new-york/block/chart-bar-default.tsx new file mode 100644 index 0000000000..5aec111e67 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-default.tsx @@ -0,0 +1,75 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A bar chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx b/apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx new file mode 100644 index 0000000000..b8b1014517 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx @@ -0,0 +1,83 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A horizontal bar chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Horizontal + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx new file mode 100644 index 0000000000..84bcc6a28c --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx @@ -0,0 +1,221 @@ +"use client" + +import * as React from "react" +import { Bar, BarChart, CartesianGrid, 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 = "An interactive bar chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + views: { + label: "Page Views", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const [activeChart, setActiveChart] = + React.useState("desktop") + + const total = React.useMemo( + () => ({ + desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), + mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), + }), + [] + ) + + return ( + + +
+ Bar Chart - Interactive + + Showing total visitors for the last 3 months + +
+
+ {["desktop", "mobile"].map((key) => { + const chart = key as keyof typeof chartConfig + return ( + + ) + })} +
+ + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }) + }} + /> + } + /> + + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx new file mode 100644 index 0000000000..bba630a900 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx @@ -0,0 +1,112 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A bar chart with a custom label" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + label: { + color: "hsl(var(--background))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Custom Label + January - June 2024 + + + + + + value.slice(0, 3)} + hide + /> + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-label.tsx b/apps/www/__registry__/new-york/block/chart-bar-label.tsx new file mode 100644 index 0000000000..1a06e05e00 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-label.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A bar chart with a label" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Label + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-mixed.tsx b/apps/www/__registry__/new-york/block/chart-bar-mixed.tsx new file mode 100644 index 0000000000..f839877833 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-mixed.tsx @@ -0,0 +1,103 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, XAxis, YAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A mixed bar chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Mixed + January - June 2024 + + + + + + chartConfig[value as keyof typeof chartConfig]?.label + } + /> + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-multiple.tsx b/apps/www/__registry__/new-york/block/chart-bar-multiple.tsx new file mode 100644 index 0000000000..b570638ce6 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-multiple.tsx @@ -0,0 +1,80 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A multiple bar chart" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-negative.tsx b/apps/www/__registry__/new-york/block/chart-bar-negative.tsx new file mode 100644 index 0000000000..c735fc6fff --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-negative.tsx @@ -0,0 +1,79 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A bar chart with negative values" + +const chartData = [ + { month: "January", visitors: 186 }, + { month: "February", visitors: 205 }, + { month: "March", visitors: -207 }, + { month: "April", visitors: 173 }, + { month: "May", visitors: -209 }, + { month: "June", visitors: 214 }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Negative + January - June 2024 + + + + + + } + /> + + + {chartData.map((item) => ( + 0 + ? "hsl(var(--chart-1))" + : "hsl(var(--chart-2))" + } + /> + ))} + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-bar-stacked.tsx b/apps/www/__registry__/new-york/block/chart-bar-stacked.tsx new file mode 100644 index 0000000000..ddfa81e47e --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-bar-stacked.tsx @@ -0,0 +1,90 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A stacked bar chart with a legend" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Bar Chart - Stacked + Legend + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + } /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-default.tsx b/apps/www/__registry__/new-york/block/chart-line-default.tsx new file mode 100644 index 0000000000..ccc36bc5b6 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-default.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx b/apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx new file mode 100644 index 0000000000..5176281cc2 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx @@ -0,0 +1,118 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Dot, Line, LineChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart with dots and colors" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + color: "hsl(var(--chart-2))", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Dots Colors + January - June 2024 + + + + + + + } + /> + { + return ( + + ) + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx b/apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx new file mode 100644 index 0000000000..9b7e86ca36 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx @@ -0,0 +1,105 @@ +"use client" + +import { GitCommitVertical, TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart with custom dots" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Custom Dots + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + { + const r = 24 + return ( + + ) + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-dots.tsx b/apps/www/__registry__/new-york/block/chart-line-dots.tsx new file mode 100644 index 0000000000..54fb10ed80 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-dots.tsx @@ -0,0 +1,97 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart with dots" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Dots + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-interactive.tsx b/apps/www/__registry__/new-york/block/chart-line-interactive.tsx new file mode 100644 index 0000000000..4432eb89c2 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-interactive.tsx @@ -0,0 +1,227 @@ +"use client" + +import * as React from "react" +import { CartesianGrid, Line, LineChart, 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 = "An interactive line chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + views: { + label: "Page Views", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const [activeChart, setActiveChart] = + React.useState("desktop") + + const total = React.useMemo( + () => ({ + desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), + mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), + }), + [] + ) + + return ( + + +
+ Line Chart - Interactive + + Showing total visitors for the last 3 months + +
+
+ {["desktop", "mobile"].map((key) => { + const chart = key as keyof typeof chartConfig + return ( + + ) + })} +
+ + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }) + }} + /> + } + /> + + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-line-label-custom.tsx new file mode 100644 index 0000000000..f7972946fc --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-label-custom.tsx @@ -0,0 +1,123 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, LabelList, Line, LineChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart with a custom label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + color: "hsl(var(--chart-2))", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Custom Label + January - June 2024 + + + + + + + } + /> + + + chartConfig[value]?.label + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-label.tsx b/apps/www/__registry__/new-york/block/chart-line-label.tsx new file mode 100644 index 0000000000..c6b832d6a6 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-label.tsx @@ -0,0 +1,105 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart with a label" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Label + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-linear.tsx b/apps/www/__registry__/new-york/block/chart-line-linear.tsx new file mode 100644 index 0000000000..7225a5f79c --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-linear.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A linear line chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Linear + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-multiple.tsx b/apps/www/__registry__/new-york/block/chart-line-multiple.tsx new file mode 100644 index 0000000000..f972819f5b --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-multiple.tsx @@ -0,0 +1,100 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A multiple line chart" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+
+
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-line-step.tsx b/apps/www/__registry__/new-york/block/chart-line-step.tsx new file mode 100644 index 0000000000..4531051867 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-line-step.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A line chart with step" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Line Chart - Step + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx b/apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx new file mode 100644 index 0000000000..7d7a82eca8 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx @@ -0,0 +1,102 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Label, Pie, PieChart, Sector } from "recharts" +import { PieSectorDataItem } from "recharts/types/polar/Pie" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A donut chart with an active sector" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Donut Active + January - June 2024 + + + + + } + /> + ( + + )} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx b/apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx new file mode 100644 index 0000000000..1fb6bc74d1 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx @@ -0,0 +1,129 @@ +"use client" + +import * as React from "react" +import { TrendingUp } from "lucide-react" +import { Label, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A donut chart with text" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 190, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + const totalVisitors = React.useMemo(() => { + return chartData.reduce((acc, curr) => acc + curr.visitors, 0) + }, []) + + return ( + + + Pie Chart - Donut with Text + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut.tsx b/apps/www/__registry__/new-york/block/chart-pie-donut.tsx new file mode 100644 index 0000000000..42965dac6a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-donut.tsx @@ -0,0 +1,93 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A donut chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Donut + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-interactive.tsx b/apps/www/__registry__/new-york/block/chart-pie-interactive.tsx new file mode 100644 index 0000000000..8da797d079 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-interactive.tsx @@ -0,0 +1,192 @@ +"use client" + +import * as React from "react" +import { Label, Pie, PieChart, Sector } from "recharts" +import { PieSectorDataItem } from "recharts/types/polar/Pie" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartStyle, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/new-york/ui/select" + +export const description = "An interactive pie chart" + +const desktopData = [ + { month: "january", desktop: 186, fill: "var(--color-january)" }, + { month: "february", desktop: 305, fill: "var(--color-february)" }, + { month: "march", desktop: 237, fill: "var(--color-march)" }, + { month: "april", desktop: 173, fill: "var(--color-april)" }, + { month: "may", desktop: 209, fill: "var(--color-may)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + }, + mobile: { + label: "Mobile", + }, + january: { + label: "January", + color: "hsl(var(--chart-1))", + }, + february: { + label: "February", + color: "hsl(var(--chart-2))", + }, + march: { + label: "March", + color: "hsl(var(--chart-3))", + }, + april: { + label: "April", + color: "hsl(var(--chart-4))", + }, + may: { + label: "May", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + const id = "pie-interactive" + const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month) + + const activeIndex = React.useMemo( + () => desktopData.findIndex((item) => item.month === activeMonth), + [activeMonth] + ) + const months = React.useMemo(() => desktopData.map((item) => item.month), []) + + return ( + + + +
+ Pie Chart - Interactive + January - June 2024 +
+ + + + + + } + /> + ( + + + + + )} + > + + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx new file mode 100644 index 0000000000..5d31328d3a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx @@ -0,0 +1,110 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A pie chart with a custom label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Custom Label + January - June 2024 + + + + + } + /> + { + return ( + + {`${ + chartConfig[payload.browser as keyof typeof chartConfig] + ?.label + } (${payload.visitors})`} + + ) + }} + nameKey="browser" + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx new file mode 100644 index 0000000000..8c0841d27a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx @@ -0,0 +1,97 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { LabelList, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A pie chart with a label list" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Label List + January - June 2024 + + + + + } + /> + + + chartConfig[value]?.label + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-label.tsx b/apps/www/__registry__/new-york/block/chart-pie-label.tsx new file mode 100644 index 0000000000..e125077413 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-label.tsx @@ -0,0 +1,85 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A pie chart with a label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Label + January - June 2024 + + + + + } /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/block/chart-pie-legend.tsx new file mode 100644 index 0000000000..c5a280bfb0 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-legend.tsx @@ -0,0 +1,85 @@ +"use client" + +import { LabelList, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A pie chart with a legend" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Legend + January - June 2024 + + + + + + + + } + className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" + /> + + + + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx b/apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx new file mode 100644 index 0000000000..cf191f1615 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx @@ -0,0 +1,93 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A pie chart with no separator" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Separator None + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-simple.tsx b/apps/www/__registry__/new-york/block/chart-pie-simple.tsx new file mode 100644 index 0000000000..c529f52bb1 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-simple.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A simple pie chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-pie-stacked.tsx b/apps/www/__registry__/new-york/block/chart-pie-stacked.tsx new file mode 100644 index 0000000000..b4be18a47d --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-pie-stacked.tsx @@ -0,0 +1,119 @@ +"use client" + +import * as React from "react" +import { TrendingUp } from "lucide-react" +import { Label, Pie, PieChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A pie chart with stacked sections" + +const desktopData = [ + { month: "january", desktop: 186, fill: "var(--color-january)" }, + { month: "february", desktop: 305, fill: "var(--color-february)" }, + { month: "march", desktop: 237, fill: "var(--color-march)" }, + { month: "april", desktop: 173, fill: "var(--color-april)" }, + { month: "may", desktop: 209, fill: "var(--color-may)" }, +] + +const mobileData = [ + { month: "january", mobile: 80, fill: "var(--color-january)" }, + { month: "february", mobile: 200, fill: "var(--color-february)" }, + { month: "march", mobile: 120, fill: "var(--color-march)" }, + { month: "april", mobile: 190, fill: "var(--color-april)" }, + { month: "may", mobile: 130, fill: "var(--color-may)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + }, + mobile: { + label: "Mobile", + }, + january: { + label: "January", + color: "hsl(var(--chart-1))", + }, + february: { + label: "February", + color: "hsl(var(--chart-2))", + }, + march: { + label: "March", + color: "hsl(var(--chart-3))", + }, + april: { + label: "April", + color: "hsl(var(--chart-4))", + }, + may: { + label: "May", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Pie Chart - Stacked + January - June 2024 + + + + + { + return chartConfig[ + payload?.[0].dataKey as keyof typeof chartConfig + ].label + }} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-default.tsx b/apps/www/__registry__/new-york/block/chart-radar-default.tsx new file mode 100644 index 0000000000..7d258514cd --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-default.tsx @@ -0,0 +1,75 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-dots.tsx b/apps/www/__registry__/new-york/block/chart-radar-dots.tsx new file mode 100644 index 0000000000..385734eae7 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-dots.tsx @@ -0,0 +1,79 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with dots" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Dots + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx new file mode 100644 index 0000000000..f3c62bbe86 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx @@ -0,0 +1,78 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a grid and circle fill" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 285 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 264 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Circle Filled + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx new file mode 100644 index 0000000000..5164314998 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx @@ -0,0 +1,82 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a grid and circle fill" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Circle - No lines + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx new file mode 100644 index 0000000000..0cfb63f0e1 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx @@ -0,0 +1,82 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a grid and circle" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Circle + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx new file mode 100644 index 0000000000..c48dfcd641 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx @@ -0,0 +1,78 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a custom grid" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Custom + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx new file mode 100644 index 0000000000..69e2a9e06f --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx @@ -0,0 +1,78 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a grid filled" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 285 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 264 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid Filled + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx b/apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx new file mode 100644 index 0000000000..bdd774945a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx @@ -0,0 +1,81 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with no grid" + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Grid None + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-icons.tsx b/apps/www/__registry__/new-york/block/chart-radar-icons.tsx new file mode 100644 index 0000000000..d6e5b9ad9b --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-icons.tsx @@ -0,0 +1,94 @@ +"use client" + +import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with icons" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: ArrowDownFromLine, + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + icon: ArrowUpFromLine, + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Icons + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + } /> + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx new file mode 100644 index 0000000000..7d693b2eda --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx @@ -0,0 +1,120 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a custom label" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Custom Label + + Showing total visitors for the last 6 months + + + + + + } + /> + { + const data = chartData[index] + + return ( + + {data.desktop} + / + {data.mobile} + + {data.month} + + + ) + }} + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-legend.tsx b/apps/www/__registry__/new-york/block/chart-radar-legend.tsx new file mode 100644 index 0000000000..4000465449 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-legend.tsx @@ -0,0 +1,92 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a legend" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Legend + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + } /> + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx b/apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx new file mode 100644 index 0000000000..abaf967363 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx @@ -0,0 +1,91 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with lines only" + +const chartData = [ + { month: "January", desktop: 186, mobile: 160 }, + { month: "February", desktop: 185, mobile: 170 }, + { month: "March", desktop: 207, mobile: 180 }, + { month: "April", desktop: 173, mobile: 160 }, + { month: "May", desktop: 160, mobile: 190 }, + { month: "June", desktop: 174, mobile: 204 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Lines Only + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-multiple.tsx b/apps/www/__registry__/new-york/block/chart-radar-multiple.tsx new file mode 100644 index 0000000000..d8786f8b4a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-multiple.tsx @@ -0,0 +1,83 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with multiple data" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Multiple + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radar-radius.tsx b/apps/www/__registry__/new-york/block/chart-radar-radius.tsx new file mode 100644 index 0000000000..aa82f8f024 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radar-radius.tsx @@ -0,0 +1,96 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { + PolarAngleAxis, + PolarGrid, + PolarRadiusAxis, + Radar, + RadarChart, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radar chart with a radius axis" + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radar Chart - Radius Axis + + Showing total visitors for the last 6 months + + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radial-grid.tsx b/apps/www/__registry__/new-york/block/chart-radial-grid.tsx new file mode 100644 index 0000000000..69a1a3a603 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radial-grid.tsx @@ -0,0 +1,89 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { PolarGrid, RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radial chart with a grid" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Grid + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radial-label.tsx b/apps/www/__registry__/new-york/block/chart-radial-label.tsx new file mode 100644 index 0000000000..25c1bc41bf --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radial-label.tsx @@ -0,0 +1,101 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { LabelList, RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radial chart with a label" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Label + January - June 2024 + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radial-shape.tsx b/apps/www/__registry__/new-york/block/chart-radial-shape.tsx new file mode 100644 index 0000000000..592e225c4a --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radial-shape.tsx @@ -0,0 +1,108 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart" + +export const description = "A radial chart with a custom shape" + +const chartData = [ + { browser: "safari", visitors: 1260, fill: "var(--color-safari)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Shape + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radial-simple.tsx b/apps/www/__registry__/new-york/block/chart-radial-simple.tsx new file mode 100644 index 0000000000..4033acb323 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radial-simple.tsx @@ -0,0 +1,88 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radial chart" + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radial-stacked.tsx b/apps/www/__registry__/new-york/block/chart-radial-stacked.tsx new file mode 100644 index 0000000000..38d35670e5 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radial-stacked.tsx @@ -0,0 +1,113 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" + +export const description = "A radial chart with stacked sections" + +const chartData = [{ month: "january", desktop: 1260, mobile: 570 }] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + const totalVisitors = chartData[0].desktop + chartData[0].mobile + + return ( + + + Radial Chart - Stacked + January - June 2024 + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/chart-radial-text.tsx b/apps/www/__registry__/new-york/block/chart-radial-text.tsx new file mode 100644 index 0000000000..b88623e6e2 --- /dev/null +++ b/apps/www/__registry__/new-york/block/chart-radial-text.tsx @@ -0,0 +1,109 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart" + +export const description = "A radial chart with text" + +const chartData = [ + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export default function Component() { + return ( + + + Radial Chart - Text + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/www/__registry__/new-york/block/dashboard-06.tsx b/apps/www/__registry__/new-york/block/dashboard-06.tsx index 3936919dd9..0311c178a8 100644 --- a/apps/www/__registry__/new-york/block/dashboard-06.tsx +++ b/apps/www/__registry__/new-york/block/dashboard-06.tsx @@ -216,7 +216,7 @@ export default function Dashboard() { - + @@ -317,7 +317,7 @@ export default function Dashboard() { - + Products diff --git a/apps/www/actions/edit-in-v0.ts b/apps/www/actions/edit-in-v0.ts index 82d19ced06..9a16420284 100644 --- a/apps/www/actions/edit-in-v0.ts +++ b/apps/www/actions/edit-in-v0.ts @@ -41,7 +41,12 @@ export async function editInV0({ throw new Error("Something went wrong. Please try again later.") } - return await response.json() + const result = await response.json() + + return { + ...result, + url: `${process.env.V0_URL}/edit/${result.id}`, + } } catch (error) { if (error instanceof Error) { return { error: error.message } diff --git a/apps/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx index c2d55f412c..03e7147bb3 100644 --- a/apps/www/app/(app)/blocks/layout.tsx +++ b/apps/www/app/(app)/blocks/layout.tsx @@ -22,19 +22,17 @@ export default function BlocksLayout({ }) { return (
- + - - Building Blocks for the Web - + Building Blocks for the Web Beautifully designed. Copy and paste into your apps. Open Source. - - + + + +
+ {children} +
+
+ ) +} diff --git a/apps/www/app/(app)/charts/page.tsx b/apps/www/app/(app)/charts/page.tsx new file mode 100644 index 0000000000..a8c80b23e5 --- /dev/null +++ b/apps/www/app/(app)/charts/page.tsx @@ -0,0 +1,278 @@ +import { SWRConfig } from "swr" + +import { getChartThemes } from "@/lib/chart-themes" +import { ChartDisplay } from "@/components/chart-display" +import { ChartsNav } from "@/components/charts-nav" +import { ChartsThemeSwitcher } from "@/components/charts-theme-switcher" +import { Separator } from "@/registry/new-york/ui/separator" +import * as Charts from "@/app/(app)/charts/charts" + +const chartThemes = getChartThemes() + +export default function ChartsPage() { + return ( + +
+
+ +
+

Examples

+
+ + + + + + + + + +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ + ) +} diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index 8d91f69835..d33ce0523c 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx @@ -89,19 +89,17 @@ export default async function DocPage({ params }: DocPageProps) { return (
-
-
- Docs -
- -
{doc.title}
+
+
Docs
+ +
{doc.title}
-

+

{doc.title}

{doc.description && ( -

+

{doc.description}

)} diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx index e131e23367..f16dc0c35b 100644 --- a/apps/www/app/(app)/docs/layout.tsx +++ b/apps/www/app/(app)/docs/layout.tsx @@ -12,7 +12,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
{children} diff --git a/apps/www/app/(app)/examples/authentication/page.tsx b/apps/www/app/(app)/examples/authentication/page.tsx index c21e87f332..5dfe156882 100644 --- a/apps/www/app/(app)/examples/authentication/page.tsx +++ b/apps/www/app/(app)/examples/authentication/page.tsx @@ -40,7 +40,7 @@ export default function AuthenticationPage() { > Login -
+
{model.name} Build your component library Beautifully designed components that you can copy and paste into your - apps. Accessible. Customizable. Open Source. + apps. - - Get Started - - - - GitHub - + + diff --git a/apps/www/app/(app)/themes/page.tsx b/apps/www/app/(app)/themes/page.tsx index 920aac8493..39d3436da2 100644 --- a/apps/www/app/(app)/themes/page.tsx +++ b/apps/www/app/(app)/themes/page.tsx @@ -22,9 +22,9 @@ export default function ThemesPage() {
- + Add colors. Make it yours. diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx index 49b0d964d8..5d9862ce10 100644 --- a/apps/www/components/announcement.tsx +++ b/apps/www/components/announcement.tsx @@ -1,18 +1,20 @@ import Link from "next/link" import { ArrowRightIcon } from "@radix-ui/react-icons" -import { Blocks } from "lucide-react" +import { Blocks, PieChart } from "lucide-react" import { Separator } from "@/registry/new-york/ui/separator" export function Announcement() { return ( - {" "} + {" "} {" "} - Introducing Lift Mode + + Introducing Charts + ) diff --git a/apps/www/components/block-copy-button.tsx b/apps/www/components/block-copy-button.tsx index 4a509db8be..4c13b0636f 100644 --- a/apps/www/components/block-copy-button.tsx +++ b/apps/www/components/block-copy-button.tsx @@ -4,6 +4,7 @@ import * as React from "react" import { CheckIcon, ClipboardIcon } from "lucide-react" import { Event, trackEvent } from "@/lib/events" +import { cn } from "@/lib/utils" import { Button, ButtonProps } from "@/registry/new-york/ui/button" import { Tooltip, @@ -15,6 +16,7 @@ export function BlockCopyButton({ event, name, code, + className, ...props }: { event: Event["name"] @@ -35,7 +37,10 @@ export function BlockCopyButton({ - Copy code + Copy code ) } diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx index 1b3d756783..ecfc21393f 100644 --- a/apps/www/components/block-preview.tsx +++ b/apps/www/components/block-preview.tsx @@ -64,7 +64,7 @@ export function BlockPreview({ ) : null}