mediahub-fe/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx

85 lines
2.2 KiB
TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import BasicAreaChart from "./basic-area-chart";
import StackedRechartArea from "./stacked-rechart-area";
import TinyRechartArea from "./tiny-rechart-area";
import PercentReAreaChart from "./percent-area";
import CardinalAreaChart from "./cardinal-area";
import AreaChartConnectNulls from "./area-connect-nulls";
import ReSynchronizedAreaChart from "./synchronized-area";
import AreaChartFillByValue from "./areachart-fillby-value";
const RechartAreaPage = () => {
return (
<div className="grid xl:grid-cols-2 grid-cols-1 gap-6">
<Card>
<CardHeader>
<CardTitle>Basic Area Chart</CardTitle>
</CardHeader>
<CardContent>
<BasicAreaChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Stacked Area Chart</CardTitle>
</CardHeader>
<CardContent>
<StackedRechartArea />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Tiny Area Chart</CardTitle>
</CardHeader>
<CardContent>
<TinyRechartArea />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Percent Area Chart</CardTitle>
</CardHeader>
<CardContent>
<PercentReAreaChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Cardinal Area Chart</CardTitle>
</CardHeader>
<CardContent>
<CardinalAreaChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Area Chart Fill By Value</CardTitle>
</CardHeader>
<CardContent>
<AreaChartFillByValue />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Area Chart Connect Nulls</CardTitle>
</CardHeader>
<CardContent>
<AreaChartConnectNulls />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Synchronized Area Chart</CardTitle>
</CardHeader>
<CardContent>
<ReSynchronizedAreaChart />
</CardContent>
</Card>
</div>
);
};
export default RechartAreaPage;