Initial commit
This commit is contained in:
221
src/views/Pages/Charts.js
Normal file
221
src/views/Pages/Charts.js
Normal file
@@ -0,0 +1,221 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
// Chakra imports
|
||||
import { Box, Grid, Text, useColorModeValue } from "@chakra-ui/react";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import BarChart from "components/Charts/BarChart";
|
||||
import BubbleChart from "components/Charts/BubbleChart";
|
||||
import DonutChart from "components/Charts/DonutChart";
|
||||
import LineBarChart from "components/Charts/LineBarChart";
|
||||
import LineChart from "components/Charts/LineChart";
|
||||
import PieChart from "components/Charts/PieChart";
|
||||
import PolarChart from "components/Charts/PolarChart";
|
||||
import RadarChart from "components/Charts/RadarChart";
|
||||
// Assets
|
||||
import React from "react";
|
||||
import {
|
||||
barChartDataCharts1,
|
||||
barChartDataCharts2,
|
||||
barChartOptionsCharts1,
|
||||
barChartOptionsCharts2,
|
||||
bubbleChartData,
|
||||
bubbleChartOptions,
|
||||
donutChartDataCharts1,
|
||||
donutChartOptionsCharts1,
|
||||
lineBarChartData,
|
||||
lineBarChartOptions,
|
||||
lineChartDataCharts1,
|
||||
lineChartDataCharts2,
|
||||
lineChartOptionsCharts1,
|
||||
lineChartOptionsCharts2,
|
||||
pieChartDataCharts1,
|
||||
pieChartOptionsCharts1,
|
||||
polarChartDataCharts,
|
||||
polarChartOptionsCharts,
|
||||
radarChartDataCharts,
|
||||
radarChartOptionsCharts,
|
||||
} from "variables/charts";
|
||||
|
||||
function Charts() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
|
||||
return (
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
|
||||
templateRows={{ sm: "repeat(8, 1fr)", md: "repeat(4, 1fr)" }}
|
||||
gap="24px"
|
||||
pt={{ sm: "125px", lg: "75px" }}
|
||||
>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Line chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<LineChart
|
||||
chartData={lineChartDataCharts1}
|
||||
chartOptions={lineChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Line chart with gradient
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<LineChart
|
||||
chartData={lineChartDataCharts2}
|
||||
chartOptions={lineChartOptionsCharts2}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Bar chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<BarChart
|
||||
chartData={barChartDataCharts1}
|
||||
chartOptions={barChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Bar chart horizontal
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<BarChart
|
||||
chartData={barChartDataCharts2}
|
||||
chartOptions={barChartOptionsCharts2}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Mixed chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<LineBarChart
|
||||
chartData={lineBarChartData}
|
||||
chartOptions={lineBarChartOptions}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Bubble chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<BubbleChart
|
||||
chartData={bubbleChartData}
|
||||
chartOptions={bubbleChartOptions}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Donut chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
|
||||
<DonutChart
|
||||
chartData={donutChartDataCharts1}
|
||||
chartOptions={donutChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Pie chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
|
||||
<PieChart
|
||||
chartData={pieChartDataCharts1}
|
||||
chartOptions={pieChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Radar chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
|
||||
<RadarChart
|
||||
chartData={radarChartDataCharts}
|
||||
chartOptions={radarChartOptionsCharts}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Polar chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
|
||||
<PolarChart
|
||||
chartData={polarChartDataCharts}
|
||||
chartOptions={polarChartOptionsCharts}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default Charts;
|
||||
Reference in New Issue
Block a user