71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
"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: "Genset", desktop: 186 },
|
|
{ month: "Boiler", desktop: 305 },
|
|
{ month: "Proses", desktop: 237 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: "Value",
|
|
color: "hsl(var(--chart-1))",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export function ChartCard() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Sumber Emisi</CardTitle>
|
|
{/* <CardDescription>January - June 2024</CardDescription> */}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig}>
|
|
<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 hideLabel />}
|
|
/>
|
|
<Bar dataKey="desktop" fill="#53a946" radius={8} />
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
{/* <CardFooter className="flex-col items-start gap-2 text-sm">
|
|
<div className="flex gap-2 font-medium leading-none">
|
|
Trending up by 5.2% this month{" "}
|
|
<TrendingUp className="h-4 w-4" />
|
|
</div>
|
|
<div className="leading-none text-muted-foreground">
|
|
Showing total visitors for the last 6 months
|
|
</div>
|
|
</CardFooter> */}
|
|
</Card>
|
|
);
|
|
}
|