138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import TinyBar from "./tiny-bar";
|
|
import SimpleBar from "./simple-bar";
|
|
import StackedBar from "./stacked-bar";
|
|
import MixBar from "./mix-bar";
|
|
import CustomShape from "./custom-shape";
|
|
import PositiveAndNegative from "./positive-negative-bar";
|
|
import BrushBar from "./brush-bar";
|
|
import CustomizedEventBar from "./customized-event-bar";
|
|
import BarWithMinHeight from "./barwith-minheight";
|
|
import StackedBarWithSign from "./stacked-barwith-sign";
|
|
import BiAxialBar from "./bi-axxial-bar";
|
|
import BackgroundBar from "./background-bar";
|
|
import BarChartWithMultiAxis from "./barchart-with-multixaxis";
|
|
import NoPaddingBar from "./no-padding-bar";
|
|
|
|
const ChartJsRechartBarPage = () => {
|
|
return (
|
|
<div className="grid xl:grid-cols-2 grid-cols-1 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tiny Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<TinyBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Simple Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<SimpleBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Stacked Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StackedBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Mix Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<MixBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Custom Shape Bar</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CustomShape />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Positive And Negative Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PositiveAndNegative />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Brush Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BrushBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart With Customized Event</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CustomizedEventBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart With Min Height</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BarWithMinHeight />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart Stacked By Sign</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StackedBarWithSign />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bi Axial Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BiAxialBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart Has Background</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BackgroundBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart With Multi XAxis</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BarChartWithMultiAxis />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart No Padding</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<NoPaddingBar />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChartJsRechartBarPage;
|