initial commit

2026-04-21 12:00:22 +00:00 · 2024-11-24 20:56:03 -05:00 · 2024-11-24 20:56:03 -05:00 · ef9ccf22d3
commit ef9ccf22d3
133 changed files with 20802 additions and 0 deletions
--- a/app/(root)/(routes)/customize/_components/bar-chart-mixed.tsx
+++ b/app/(root)/(routes)/customize/_components/bar-chart-mixed.tsx
@ -0,0 +1,84 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/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 function BarChartMixed() {
+  return (
+    <ChartContainer config={chartConfig} className="w-full h-[200px]">
+      <BarChart
+        accessibilityLayer
+        data={chartData}
+        layout="vertical"
+        margin={{
+          left: 0
+        }}
+      >
+        <YAxis
+          dataKey="browser"
+          type="category"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) =>
+            chartConfig[value as keyof typeof chartConfig]?.label
+          }
+        />
+        <XAxis dataKey="visitors" type="number" hide />
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel />}
+        />
+        <Bar dataKey="visitors" layout="vertical" radius={5} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
--- a/app/(root)/(routes)/customize/_components/bar-chart-multiple.tsx
+++ b/app/(root)/(routes)/customize/_components/bar-chart-multiple.tsx
@ -0,0 +1,61 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/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 function BarChartMultiple() {
+  return (
+    <ChartContainer config={chartConfig} className="w-full h-[200px]">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent indicator="dashed" />}
+        />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
--- a/app/(root)/(routes)/customize/_components/index.ts
+++ b/app/(root)/(routes)/customize/_components/index.ts
@ -0,0 +1,6 @@
+export { BarChartMixed } from './bar-chart-mixed'
+export { BarChartMultiple } from './bar-chart-multiple'
+export { LineChartMultiple } from './line-chart-multiple'
+export { PieChartDonut } from './pie-chart-donut'
+export { RadarChartLines } from './radar-chart-lines'
+export { RadialChartGrid } from './radial-chart-grid'
--- a/app/(root)/(routes)/customize/_components/line-chart-multiple.tsx
+++ b/app/(root)/(routes)/customize/_components/line-chart-multiple.tsx
@ -0,0 +1,77 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/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 function LineChartMultiple() {
+  return (
+    <ChartContainer config={chartConfig} className="w-full h-[200px]">
+      <LineChart
+        accessibilityLayer
+        data={chartData}
+        margin={{
+          left: 12,
+          right: 12
+        }}
+      >
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <Line
+          dataKey="desktop"
+          type="monotone"
+          stroke="var(--color-desktop)"
+          strokeWidth={2}
+          dot={false}
+        />
+        <Line
+          dataKey="mobile"
+          type="monotone"
+          stroke="var(--color-mobile)"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
+  )
+}
--- a/app/(root)/(routes)/customize/_components/pie-chart-donut.tsx
+++ b/app/(root)/(routes)/customize/_components/pie-chart-donut.tsx
@ -0,0 +1,110 @@
+'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 '@/components/ui/card'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/chart'
+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 function PieChartDonut() {
+  const totalVisitors = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+  }, [])
+
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="aspect-square w-full h-[200px]"
+    >
+      <PieChart>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel />}
+        />
+        <Pie
+          data={chartData}
+          dataKey="visitors"
+          nameKey="browser"
+          innerRadius={60}
+          strokeWidth={5}
+        >
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                return (
+                  <text
+                    x={viewBox.cx}
+                    y={viewBox.cy}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                  >
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-foreground text-3xl font-bold"
+                    >
+                      {totalVisitors.toLocaleString()}
+                    </tspan>
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy || 0) + 24}
+                      className="fill-muted-foreground"
+                    >
+                      Visitors
+                    </tspan>
+                  </text>
+                )
+              }
+            }}
+          />
+        </Pie>
+      </PieChart>
+    </ChartContainer>
+  )
+}
--- a/app/(root)/(routes)/customize/_components/radar-chart-lines.tsx
+++ b/app/(root)/(routes)/customize/_components/radar-chart-lines.tsx
@ -0,0 +1,47 @@
+'use client'
+
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/chart'
+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 function RadarChartLines() {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="w-full aspect-square h-[200px]"
+    >
+      <RadarChart data={chartData}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarGrid
+          className="fill-[--color-desktop] opacity-20"
+          gridType="circle"
+        />
+        <PolarAngleAxis dataKey="month" />
+        <Radar
+          dataKey="desktop"
+          fill="var(--color-desktop)"
+          fillOpacity={0.5}
+        />
+      </RadarChart>
+    </ChartContainer>
+  )
+}
--- a/app/(root)/(routes)/customize/_components/radial-chart-grid.tsx
+++ b/app/(root)/(routes)/customize/_components/radial-chart-grid.tsx
@ -0,0 +1,70 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/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 function RadialChartGrid() {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="aspect-square w-full h-[200px]"
+    >
+      <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel nameKey="browser" />}
+        />
+        <PolarGrid gridType="circle" />
+        <RadialBar dataKey="visitors" />
+      </RadialBarChart>
+    </ChartContainer>
+  )
+}
--- a/app/(root)/(routes)/customize/_components/radial-chart-shape.tsx
+++ b/app/(root)/(routes)/customize/_components/radial-chart-shape.tsx
@ -0,0 +1,89 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart
+} from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import { ChartConfig, ChartContainer } from '@/components/ui/chart'
+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 function RadialChartShape() {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="aspect-square w-full h-[200px]"
+    >
+      <RadialBarChart
+        data={chartData}
+        endAngle={100}
+        innerRadius={80}
+        outerRadius={140}
+      >
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-muted last:fill-background"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="visitors" background />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                return (
+                  <text
+                    x={viewBox.cx}
+                    y={viewBox.cy}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                  >
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-foreground text-4xl font-bold"
+                    >
+                      {chartData[0].visitors.toLocaleString()}
+                    </tspan>
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy || 0) + 24}
+                      className="fill-muted-foreground"
+                    >
+                      Visitors
+                    </tspan>
+                  </text>
+                )
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </ChartContainer>
+  )
+}