Skip to content

Commit 576868e

Browse files
mickasmtmickasmt
committed
feat: add charts
1 parent 8e8c8de commit 576868e

15 files changed

+1685
-28
lines changed

‎app/(protected)/dashboard/charts/loading.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
import { DashboardHeader } from "@/components/dashboard/header";
3+
4+
export default function ChartsLoading() {
5+
return (
6+
<>
7+
<DashboardHeader heading="Charts" text="List of charts by shadcn-ui." />
8+
<Skeleton className="size-full rounded-lg" />
9+
</>
10+
);
11+
}

‎app/(protected)/dashboard/charts/page.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { constructMetadata } from "@/lib/utils";
2+
import { AreaChartStacked } from "@/components/charts/area-chart-stacked";
3+
import { BarChartMixed } from "@/components/charts/bar-chart-mixed";
4+
import { InteractiveBarChart } from "@/components/charts/interactive-bar-chart";
5+
import { LineChartMultiple } from "@/components/charts/line-chart-multiple";
6+
import { RadarChartSimple } from "@/components/charts/radar-chart-simple";
7+
import { RadialChartGrid } from "@/components/charts/radial-chart-grid";
8+
import { RadialShapeChart } from "@/components/charts/radial-shape-chart";
9+
import { RadialStackedChart } from "@/components/charts/radial-stacked-chart";
10+
import { RadialTextChart } from "@/components/charts/radial-text-chart";
11+
import { DashboardHeader } from "@/components/dashboard/header";
12+
13+
export const metadata = constructMetadata({
14+
title: "Charts – Next Template",
15+
description: "List of charts by shadcn-ui",
16+
});
17+
18+
export default function ChartsPage() {
19+
return (
20+
<>
21+
<DashboardHeader heading="Charts" text="List of charts by shadcn-ui." />
22+
<div className="flex flex-col gap-5">
23+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 2xl:grid-cols-4">
24+
<RadialTextChart />
25+
<AreaChartStacked />
26+
<BarChartMixed />
27+
<RadarChartSimple />
28+
</div>
29+
30+
<InteractiveBarChart />
31+
32+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 2xl:grid-cols-4">
33+
<RadialChartGrid />
34+
<RadialShapeChart />
35+
<LineChartMultiple />
36+
<RadialStackedChart />
37+
</div>
38+
</div>
39+
</>
40+
);
41+
}

‎components/charts/area-chart-stacked.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
"use client";
2+
3+
import { TrendingUp } from "lucide-react";
4+
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from "@/components/ui/card";
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from "@/components/ui/chart";
20+
21+
const chartData = [
22+
{ month: "January", desktop: 186, mobile: 80 },
23+
{ month: "February", desktop: 305, mobile: 200 },
24+
{ month: "March", desktop: 237, mobile: 120 },
25+
{ month: "April", desktop: 73, mobile: 190 },
26+
{ month: "May", desktop: 209, mobile: 130 },
27+
{ month: "June", desktop: 214, mobile: 140 },
28+
];
29+
30+
const chartConfig = {
31+
desktop: {
32+
label: "Desktop",
33+
color: "hsl(var(--chart-1))",
34+
},
35+
mobile: {
36+
label: "Mobile",
37+
color: "hsl(var(--chart-2))",
38+
},
39+
} satisfies ChartConfig;
40+
41+
export function AreaChartStacked() {
42+
return (
43+
<Card className="flex flex-col">
44+
<CardHeader>
45+
{/* <CardTitle>Area Chart - Stacked</CardTitle>
46+
<CardDescription>
47+
Showing total visitors for the last 6 months
48+
</CardDescription> */}
49+
</CardHeader>
50+
<CardContent className="flex-1">
51+
<ChartContainer config={chartConfig}>
52+
<AreaChart
53+
accessibilityLayer
54+
data={chartData}
55+
margin={{
56+
left: 12,
57+
right: 12,
58+
}}
59+
>
60+
<CartesianGrid vertical={false} />
61+
<XAxis
62+
dataKey="month"
63+
tickLine={false}
64+
axisLine={false}
65+
tickMargin={8}
66+
tickFormatter={(value) => value.slice(0, 3)}
67+
/>
68+
<ChartTooltip
69+
cursor={false}
70+
content={<ChartTooltipContent indicator="dot" />}
71+
/>
72+
<Area
73+
dataKey="mobile"
74+
type="natural"
75+
fill="var(--color-mobile)"
76+
fillOpacity={0.4}
77+
stroke="var(--color-mobile)"
78+
stackId="a"
79+
/>
80+
<Area
81+
dataKey="desktop"
82+
type="natural"
83+
fill="var(--color-desktop)"
84+
fillOpacity={0.4}
85+
stroke="var(--color-desktop)"
86+
stackId="a"
87+
/>
88+
</AreaChart>
89+
</ChartContainer>
90+
</CardContent>
91+
<CardFooter className="flex-col gap-2 text-pretty text-center text-sm">
92+
<div className="flex items-center gap-2 font-medium leading-none">
93+
Trending up by 5.2% this month <TrendingUp className="size-4" />
94+
</div>
95+
<div className="leading-none text-muted-foreground">
96+
January - June 2024
97+
</div>
98+
</CardFooter>
99+
</Card>
100+
);
101+
}

‎components/charts/bar-chart-mixed.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
"use client";
2+
3+
import { TrendingUp } from "lucide-react";
4+
import { Bar, BarChart, XAxis, YAxis } from "recharts";
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from "@/components/ui/card";
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from "@/components/ui/chart";
20+
21+
const chartData = [
22+
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
23+
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
24+
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
25+
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
26+
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
27+
];
28+
29+
const chartConfig = {
30+
visitors: {
31+
label: "Visitors",
32+
},
33+
chrome: {
34+
label: "Chrome",
35+
color: "hsl(var(--chart-1))",
36+
},
37+
safari: {
38+
label: "Safari",
39+
color: "hsl(var(--chart-2))",
40+
},
41+
firefox: {
42+
label: "Firefox",
43+
color: "hsl(var(--chart-3))",
44+
},
45+
edge: {
46+
label: "Edge",
47+
color: "hsl(var(--chart-4))",
48+
},
49+
other: {
50+
label: "Other",
51+
color: "hsl(var(--chart-5))",
52+
},
53+
} satisfies ChartConfig;
54+
55+
export function BarChartMixed() {
56+
return (
57+
<Card className="flex flex-col">
58+
<CardHeader>
59+
{/* <CardTitle>Bar Chart - Mixed</CardTitle>
60+
<CardDescription>January - June 2024</CardDescription> */}
61+
</CardHeader>
62+
<CardContent className="flex-1">
63+
<ChartContainer config={chartConfig}>
64+
<BarChart
65+
accessibilityLayer
66+
data={chartData}
67+
layout="vertical"
68+
margin={{
69+
left: 0,
70+
}}
71+
>
72+
<YAxis
73+
dataKey="browser"
74+
type="category"
75+
tickLine={false}
76+
tickMargin={10}
77+
axisLine={false}
78+
tickFormatter={(value) =>
79+
chartConfig[value as keyof typeof chartConfig]?.label
80+
}
81+
/>
82+
<XAxis dataKey="visitors" type="number" hide />
83+
<ChartTooltip
84+
cursor={false}
85+
content={<ChartTooltipContent hideLabel />}
86+
/>
87+
<Bar dataKey="visitors" layout="vertical" radius={5} />
88+
</BarChart>
89+
</ChartContainer>
90+
</CardContent>
91+
<CardFooter className="flex-col gap-2 text-pretty text-center text-sm">
92+
<div className="flex items-center gap-2 font-medium leading-none">
93+
Trending up by 5.2% this month <TrendingUp className="size-4" />
94+
</div>
95+
<div className="leading-none text-muted-foreground">
96+
Results for the top 5 browsers
97+
</div>
98+
</CardFooter>
99+
</Card>
100+
);
101+
}

0 commit comments

Comments
 (0)