mediahub-fe/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx

94 lines
2.9 KiB
TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import MultiSeriesPieChart from "./multi-series-pie";
import PolarAreaChart from "./polar-area";
import PolarAreaCenteredPointLabel from "./centeredpoint-labels";
import RadarChart from "./radar-chart";
import BubbleChart from "./bubble-chart";
import ComboChart from "./combo-chart";
import DoughnutChart from "./doughnut-chart";
import PieChart from "./pie-chart";
import ScatterChart from "./scatter-chart";
const ChartsChartJsOther = () => {
return (
<div className="grid xl:grid-cols-2 grid-cols-1 gap-6">
<Card>
<CardHeader>
<CardTitle>Bubble Chart</CardTitle>
</CardHeader>
<CardContent>
<BubbleChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Combo bar/line</CardTitle>
</CardHeader>
<CardContent>
<ComboChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Doughnut Chart</CardTitle>
</CardHeader>
<CardContent>
<DoughnutChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Multi Series Pie Chart</CardTitle>
</CardHeader>
<CardContent>
<MultiSeriesPieChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Pie Chart</CardTitle>
</CardHeader>
<CardContent>
<PieChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Polar Area</CardTitle>
</CardHeader>
<CardContent>
<PolarAreaChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Polar Area Centered Point Labels</CardTitle>
</CardHeader>
<CardContent>
<PolarAreaCenteredPointLabel />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Radar Chart</CardTitle>
</CardHeader>
<CardContent>
<RadarChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Scatter Chart</CardTitle>
</CardHeader>
<CardContent>
<ScatterChart />
</CardContent>
</Card>
</div>
);
};
export default ChartsChartJsOther;