|
|
@@ -0,0 +1,78 @@
|
|
|
+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);
|
