Initial commit

src/components/Charts/BarChart.js

@@ -0,0 +1,50 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React, { Component } from "react";
+import Chart from "react-apexcharts";
+
+class BarChart extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <Chart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="bar"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default BarChart;

src/components/Charts/BubbleChart.js

@@ -0,0 +1,50 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React, { Component } from "react";
+import Chart from "react-apexcharts";
+
+class BubbleChart extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <Chart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="bubble"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default BubbleChart;

src/components/Charts/DonutChart.js

@@ -0,0 +1,51 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+class DonutChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <ReactApexChart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="donut"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default DonutChart;

src/components/Charts/LineBarChart.js

@@ -0,0 +1,50 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React, { Component } from "react";
+import Chart from "react-apexcharts";
+
+class LineBarChart extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <Chart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="line"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default LineBarChart;

src/components/Charts/LineChart.js

@@ -0,0 +1,51 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+class LineChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <ReactApexChart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="area"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default LineChart;

src/components/Charts/PieChart.js

@@ -0,0 +1,51 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+class PieChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <ReactApexChart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="pie"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default PieChart;

src/components/Charts/PolarChart.js

@@ -0,0 +1,51 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+class PolarChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <ReactApexChart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="polarArea"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default PolarChart;

src/components/Charts/RadarChart.js

@@ -0,0 +1,51 @@
+/*!
+
+=========================================================
+* 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.
+
+*/
+
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+class RadarChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      chartData: [],
+      chartOptions: {},
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      chartData: this.props.chartData,
+      chartOptions: this.props.chartOptions,
+    });
+  }
+
+  render() {
+    return (
+      <ReactApexChart
+        options={this.state.chartOptions}
+        series={this.state.chartData}
+        type="radar"
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+}
+
+export default RadarChart;