mediahub-fe/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx

101 lines
2.7 KiB
TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import BasicLineChart from "./line-chart";
import LineChartWithDataLabels from "./line-with-datalabels";
import ZoomableTimeSeries from "./zoomable-timeseries";
import LineWithAnnonotations from "./line-with-annotations";
import DashedLineChart from "./dashed-linechart";
import StepLineChart from "./step-linechart";
import GradiantLineChart from "./gradiant-linechart";
import MissingDataLineChart from "./missingdata-linechart";
import BrushLineChart from "./brush-linechart";
import SynchronizedChart from "./synchronized-chart";
const LineChartPage = () => {
return (
<div className="grid xl:grid-cols-2 grid-cols-1 gap-6 ">
<Card>
<CardHeader>
<CardTitle>Basic Line Chart</CardTitle>
</CardHeader>
<CardContent>
<BasicLineChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Line with Data Labels</CardTitle>
</CardHeader>
<CardContent>
<LineChartWithDataLabels />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Zoomable Timeseries</CardTitle>
</CardHeader>
<CardContent>
<ZoomableTimeSeries />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Line with Annotations</CardTitle>
</CardHeader>
<CardContent>
<LineWithAnnonotations />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Dashed Line</CardTitle>
</CardHeader>
<CardContent>
<DashedLineChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Stepline Chart</CardTitle>
</CardHeader>
<CardContent>
<StepLineChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Gradient Chart</CardTitle>
</CardHeader>
<CardContent>
<GradiantLineChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Missing Data/ Null Value Charts</CardTitle>
</CardHeader>
<CardContent>
<MissingDataLineChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Brush Chart</CardTitle>
</CardHeader>
<CardContent>
<BrushLineChart />
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Syncing Charts</CardTitle>
</CardHeader>
<CardContent>
<SynchronizedChart />
</CardContent>
</Card>
</div>
);
};
export default LineChartPage;