112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import BasicColumn from "./basic-column";
|
|
import ColumnWithLabel from "./column-label";
|
|
import StackedColumn from "./stacked-column";
|
|
import StackedColumn2 from "./stacked-column2";
|
|
import GroupStacked from "./group-stacked";
|
|
import DumbbellChart from "./dumbbell";
|
|
import ColumnMarker from "./column-marker";
|
|
import GroupLabelColumn from "./group-label-column";
|
|
import ColumnRotateLabels from "./column-rotate-labels";
|
|
import ColumnNegativeValues from "./column-negative-values";
|
|
import DistributedChart from "./distributed-chart";
|
|
|
|
const ColumnChartPage = () => {
|
|
return (
|
|
<div className="grid xl:grid-cols-2 grid-cols-1 gap-6 ">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Basic Column Charts</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BasicColumn />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Column with Data Labels</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ColumnWithLabel />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Stacked Columns</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StackedColumn />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Stacked Column 100</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StackedColumn2 />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Grouped Stacked Columns</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<GroupStacked />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dumbbell Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DumbbellChart />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Column with Markers</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ColumnMarker />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Column with Group Label</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<GroupLabelColumn />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Column with Rotated Labels</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ColumnRotateLabels />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Column with Nagetive Values</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ColumnNegativeValues />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Distributed Columns Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DistributedChart />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ColumnChartPage;
|