chartradar dummy

components/Riwayat/ChartDataBar.js

@@ -86,9 +86,14 @@ class ChartDataBar extends React.Component {
 
 	render() {
 		return (
-			<div id="chart">
-				<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430} />
-			</div>
+			<Card className="card-default">
+				<CardBody>
+					<div id="chart">
+						<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={400} />
+					</div>
+				</CardBody>
+			</Card>
+
 		);
 	}
 }

components/Riwayat/ChartRadarBelum.js

@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import { connect } from "react-redux";
+import { jumlahLaporan } from "@/actions/pelaporan";
+import dynamic from "next/dynamic";
+const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+
+class ChartRadarBelum extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.radar = {
+            series: [{
+                name: 'Penjadwalan Evaluasi',
+                data: [8, 5, 3, 4, 5, 1, 6, 8, 3, 9, 5, 2, 9, 6, 4, 2],
+            }, {
+                name: 'Pemeriksaan',
+                data: [2, 3, 4, 2, 5, 4, 3, 6, 7, 8, 6, 5, 4, 3, 2, 1],
+            }, {
+                name: 'Sanksi',
+                data: [4, 6, 8, 5, 7, 5, 6, 8, 9, 4, 3, 2, 4, 5, 6, 7],
+            }
+                , {
+                name: 'Keberatan',
+                data: [8, 6, 8, 1, 2, 3, 4, 5, 6, 7, 8, 8, 7, 6, 5, 3],
+            }
+                , {
+                name: 'Banding',
+                data: [4, 6, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 4],
+            }
+                , {
+                name: 'Pemantauan Perbaikan',
+                data: [4, 6, 8, 4, 5, 6, 7, 8, 8, 9, 3, 4, 5, 6, 7, 3],
+            }
+                , {
+                name: 'Pencabutan Sanksi',
+                data: [4, 6, 6, 9, 8, 7, 6, 3, 2, 1, 8, 5, 4, 3, 6, 7],
+                colors: "#B2B0D2",
+            }],
+            options: {
+                chart: {
+                    height: 150,
+                    type: 'radar',
+                },
+                xaxis: {
+                    categories: ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"]
+                },
+                chart: {
+                    toolbar: {
+                        show: true,
+                        tools: {
+                            download: false,
+                        },
+                    },
+                },
+                // legend: {
+                //     show: false,
+                // }
+            },
+        };
+
+    }
+
+
+
+
+    render() {
+        return (
+            <Card className="card-default">
+                <CardBody>
+                    <div id="chart">
+                        <ReactApexChart options={this.radar.options} series={this.radar.series} type="radar" height={400} />
+                    </div>
+                </CardBody>
+            </Card>
+
+
+        );
+    }
+}
+
+const MapStateToProps = (state) => ({ token: state.token });
+export default connect(MapStateToProps)(ChartRadarBelum);

components/Riwayat/ChartRadarSudah.js

@@ -0,0 +1,83 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import { connect } from "react-redux";
+import { jumlahLaporan } from "@/actions/pelaporan";
+import dynamic from "next/dynamic";
+const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+
+class ChartRadarSudah extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.radar = {
+            series: [{
+                name: 'Penjadwalan Evaluasi',
+                data: [8, 5, 3, 4, 5, 1, 6, 8, 3, 9, 5, 2, 9, 6, 4, 2],
+            }, {
+                name: 'Pemeriksaan',
+                data: [2, 3, 4, 2, 5, 4, 3, 6, 7, 8, 6, 5, 4, 3, 2, 1],
+            }, {
+                name: 'Sanksi',
+                data: [4, 6, 8, 5, 7, 5, 6, 8, 9, 4, 3, 2, 4, 5, 6, 7],
+            }
+                , {
+                name: 'Keberatan',
+                data: [8, 6, 8, 1, 2, 3, 4, 5, 6, 7, 8, 8, 7, 6, 5, 3],
+            }
+                , {
+                name: 'Banding',
+                data: [4, 6, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 4],
+            }
+                , {
+                name: 'Pemantauan Perbaikan',
+                data: [4, 6, 8, 4, 5, 6, 7, 8, 8, 9, 3, 4, 5, 6, 7, 3],
+            }
+                , {
+                name: 'Pencabutan Sanksi',
+                data: [4, 6, 6, 9, 8, 7, 6, 3, 2, 1, 8, 5, 4, 3, 6, 7],
+                colors: "#B2B0D2",
+            }],
+            options: {
+                chart: {
+                    height: 150,
+                    type: 'radar',
+                },
+                xaxis: {
+                    categories: ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"]
+                },
+                chart: {
+                    toolbar: {
+                        show: true,
+                        tools: {
+                            download: false,
+                        },
+                    },
+                },
+                // legend: {
+                //     show: false,
+                // }
+            },
+        };
+
+    }
+
+
+
+
+    render() {
+        return (
+            <Card className="card-default">
+                <CardBody>
+                    <div id="chart">
+                        <ReactApexChart options={this.radar.options} series={this.radar.series} type="radar" height={400} />
+                    </div>
+                </CardBody>
+            </Card>
+        );
+    }
+}
+
+const MapStateToProps = (state) => ({ token: state.token });
+export default connect(MapStateToProps)(ChartRadarSudah);

components/Riwayat/Maps.js

@@ -156,7 +156,7 @@ class Maps extends Component {
         return (
             <Card className="card-default">
                 <CardBody>
-                    <VectorMap height="370px" options={this.state.options} series={this.state.series} markers={this.state.markers} />
+                    <VectorMap height="395px" options={this.state.options} series={this.state.series} markers={this.state.markers} />
                 </CardBody>
                 <div align="center">
                     <span>Peta Geografis Wilayah LLDikti</span>

pages/app/riwayat/index.js

@@ -13,6 +13,9 @@ import TableRiwayat from "@/components/Riwayat/TableRiwayat";
 import ChartData from "@/components/Riwayat/ChartData";
 import ChartDataBar from "@/components/Riwayat/ChartDataBar";
 import Maps from "@/components/Riwayat/Maps"
+import ChartRadar from "../../../components/Riwayat/ChartRadarBelum";
+import ChartRadarBelum from "../../../components/Riwayat/ChartRadarBelum";
+import ChartRadarSudah from "../../../components/Riwayat/ChartRadarSudah";
 
 
 class Riwayat extends Component {
@@ -29,6 +32,12 @@ class Riwayat extends Component {
           <Col lg="6">
             <Maps />
           </Col>
+          <Col lg="6">
+            <ChartRadarBelum />
+          </Col>
+          <Col lg="6">
+            <ChartRadarSudah />
+          </Col>
           <Col lg="12">
             <ChartData />
             <TableRiwayat />