Chart

1"use client";
2 
3import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
4import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
5import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
6import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
7 
8const barChartData = [
9  {
10    month: "January",
11    desktop: 186,
12    mobile: 80,
13  },
14  {
15    month: "February",
16    desktop: 305,
17    mobile: 200,
18  },
19  {
20    month: "March",
21    desktop: 237,
22    mobile: 120,
23  },
24  {
25    month: "April",
26    desktop: 273,
27    mobile: 190,
28  },
29  {
30    month: "May",
31    desktop: 209,
32    mobile: 130,
33  },
34  {
35    month: "June",
36    desktop: 214,
37    mobile: 140,
38  },
39];
40 
41const lineChartData = [
42  {
43    month: "Jan",
44    revenue: 186,
45    profit: 80,
46  },
47  {
48    month: "Feb",
49    revenue: 305,
50    profit: 200,
51  },
52  {
53    month: "Mar",
54    revenue: 237,
55    profit: 120,
56  },
57  {
58    month: "Apr",
59    revenue: 273,
60    profit: 190,
61  },
62  {
63    month: "May",
64    revenue: 209,
65    profit: 130,
66  },
67  {
68    month: "Jun",
69    revenue: 214,
70    profit: 140,
71  },
72];
73 
74const areaChartData = [
75  {
76    month: "Jan",
77    sales: 186,
78    returns: 20,
79  },
80  {
81    month: "Feb",
82    sales: 305,
83    returns: 45,
84  },
85  {
86    month: "Mar",
87    sales: 237,
88    returns: 30,
89  },
90  {
91    month: "Apr",
92    sales: 273,
93    returns: 50,
94  },
95  {
96    month: "May",
97    sales: 209,
98    returns: 35,
99  },
100  {
101    month: "Jun",
102    sales: 214,
103    returns: 40,
104  },
105];
106 
107export function ChartBlock() {
108  return (
109    <div className="p-6 space-y-6">
110      <div>
111        <h2 className="text-3xl font-bold text-foreground">Charts</h2>
112        <p className="text-muted-foreground">Visualize your data with beautiful charts</p>
113      </div>
114 
115      <Tabs defaultValue="bar" className="w-full">
116        <TabsList className="mb-6">
117          <TabsTrigger value="bar">Bar Chart</TabsTrigger>
118          <TabsTrigger value="line">Line Chart</TabsTrigger>
119          <TabsTrigger value="area">Area Chart</TabsTrigger>
120        </TabsList>
121 
122        <TabsContent value="bar">
123          <Card>
124            <CardHeader>
125              <CardTitle className="text-foreground">Bar Chart</CardTitle>
126              <CardDescription className="text-muted-foreground">Desktop vs Mobile traffic comparison</CardDescription>
127            </CardHeader>
128// … truncated