commit

components/Riwayat/ChartDataBar.js

@@ -84,12 +84,6 @@ class ChartDataBar extends React.Component {
 			},
 		}));
 	}
-	// async componentDidMount() {
-	// 	const { token } = this.props;
-	// 	const data = await getjumlahStatusLaporan(token);
-	// 	// console.log(data.data);
-	// }
-
 	render() {
 		return (
 			<Card className="card-default">

components/Riwayat/ChartRadarA.js

@@ -4,6 +4,7 @@ import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 import { connect } from "react-redux";
 import { jumlahLaporan } from "@/actions/pelaporan";
 import dynamic from "next/dynamic";
+import { getjumlahStatusLaporan } from "../../actions/graph";
 const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 
@@ -11,7 +12,7 @@ class ChartRadarA extends React.Component {
     constructor(props) {
         super(props);
 
-        this.radar = {
+        this.state = {
             series: [{
                 name: 'Penjadwalan Evaluasi',
                 data: [8, 5, 3, 4, 5, 1, 6, 8, 3, 9, 5, 2, 9, 6, 4, 2],
@@ -23,7 +24,6 @@ class ChartRadarA extends React.Component {
                 data: [4, 6, 8, 5, 7, 5, 6, 8, 9, 4, 3, 2, 4, 5, 6, 7],
             }
             ],
-            colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
             options: {
                 chart: {
                     height: 150,
@@ -48,12 +48,29 @@ class ChartRadarA extends React.Component {
 
         };
     }
+    async componentDidMount() {
+        const { token } = this.props;
+        const data = await getjumlahStatusLaporan(this.props.token);
+        this.setState((prevState) => ({
+            ...prevState,
+            series: [{ data: data.data.map((e) => e.jumlah_jadwal_evaluasi), name: "penjadwalan Evaluasi" }
+                , { data: data.data.map((e) => e.jumlah_pemeriksaan), name: "Pemeriksaan" },
+            { data: data.data.map((e) => e.jumlah_sanksi), name: "sanksi" }],
+            options: {
+                ...prevState,
+                xaxis: {
+                    categories: data.data.map((data) => data.pembina.name),
+                },
+            },
+        }));
+    }
+
     render() {
         return (
             <Card className="card-default">
                 <CardBody>
                     <div id="chart">
-                        <ReactApexChart options={this.radar.options} series={this.radar.series} type="radar" height={400} />
+                        <ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={400} />
                     </div>
                 </CardBody>
             </Card>

components/Riwayat/TableRadar.js

@@ -5,193 +5,191 @@ import { Row, Col, Card, CardHeader, CardBody, Table } from 'reactstrap';
 
 function TableRadar() {
     return (
-        <Col xl="12">
-            <Card className="card-default">
-                {/* <CardHeader>Context Classes</CardHeader> */}
-                <CardBody>
-                    <Table responsive bordered>
-                        <thead>
-                            <tr>
-                                <th>Menu\Wilayah LLDikti</th>
-                                <th>I</th>
-                                <th>II</th>
-                                <th>III</th>
-                                <th>IV</th>
-                                <th>V</th>
-                                <th>VI</th>
-                                <th>VII</th>
-                                <th>VIII</th>
-                                <th>IX</th>
-                                <th>X</th>
-                                <th>XI</th>
-                                <th>XII</th>
-                                <th>XIII</th>
-                                <th>XIV</th>
-                                <th>XV</th>
-                                <th>XVI</th>
-                            </tr>
-                        </thead>
-                        <thead>
-                            <tr style={{
-                                backgroundColor: '#80b1ff',
-                                color: "black",
-                            }}>
-                                <th>Penjadwalan Evaluasi</th>
-                                <td>8</td>
-                                <td>5</td>
-                                <td>3</td>
-                                <td>4</td>
-                                <td>5</td>
-                                <td>1</td>
-                                <td>6</td>
-                                <td>8</td>
-                                <td>3</td>
-                                <td>9</td>
-                                <td>5</td>
-                                <td>2</td>
-                                <td>9</td>
-                                <td>6</td>
-                                <td>4</td>
-                                <td>2</td>
-                            </tr>
-                            <tr style={{
-                                backgroundColor: '#de8383',
-                                color: "black",
-                            }}>
-                                <th>Pemeriksaan</th>
-                                <td>2</td>
-                                <td>3</td>
-                                <td>4</td>
-                                <td>2</td>
-                                <td>5</td>
-                                <td>4</td>
-                                <td>3</td>
-                                <td>6</td>
-                                <td>7</td>
-                                <td>8</td>
-                                <td>6</td>
-                                <td>5</td>
-                                <td>4</td>
-                                <td>3</td>
-                                <td>2</td>
-                                <td>1</td>
-                            </tr>
-                            <tr style={{
-                                backgroundColor: '#fdda80',
-                                color: "black",
-                            }}>
-                                <th>Sanksi</th>
-                                <td>4</td>
-                                <td>6</td>
-                                <td>8</td>
-                                <td>5</td>
-                                <td>7</td>
-                                <td>5</td>
-                                <td>6</td>
-                                <td>8</td>
-                                <td>9</td>
-                                <td>4</td>
-                                <td>3</td>
-                                <td>2</td>
-                                <td>4</td>
-                                <td>5</td>
-                                <td>6</td>
-                                <td>7</td>
+        <Card className="card-default">
+            {/* <CardHeader>Context Classes</CardHeader> */}
+            <CardBody>
+                <Table responsive bordered>
+                    <thead>
+                        <tr>
+                            <th>Menu\Wilayah LLDikti</th>
+                            <th>I</th>
+                            <th>II</th>
+                            <th>III</th>
+                            <th>IV</th>
+                            <th>V</th>
+                            <th>VI</th>
+                            <th>VII</th>
+                            <th>VIII</th>
+                            <th>IX</th>
+                            <th>X</th>
+                            <th>XI</th>
+                            <th>XII</th>
+                            <th>XIII</th>
+                            <th>XIV</th>
+                            <th>XV</th>
+                            <th>XVI</th>
+                        </tr>
+                    </thead>
+                    <thead>
+                        <tr style={{
+                            backgroundColor: '#80b1ff',
+                            color: "black",
+                        }}>
+                            <th>Penjadwalan Evaluasi</th>
+                            <td>8</td>
+                            <td>5</td>
+                            <td>3</td>
+                            <td>4</td>
+                            <td>5</td>
+                            <td>1</td>
+                            <td>6</td>
+                            <td>8</td>
+                            <td>3</td>
+                            <td>9</td>
+                            <td>5</td>
+                            <td>2</td>
+                            <td>9</td>
+                            <td>6</td>
+                            <td>4</td>
+                            <td>2</td>
+                        </tr>
+                        <tr style={{
+                            backgroundColor: '#de8383',
+                            color: "black",
+                        }}>
+                            <th>Pemeriksaan</th>
+                            <td>2</td>
+                            <td>3</td>
+                            <td>4</td>
+                            <td>2</td>
+                            <td>5</td>
+                            <td>4</td>
+                            <td>3</td>
+                            <td>6</td>
+                            <td>7</td>
+                            <td>8</td>
+                            <td>6</td>
+                            <td>5</td>
+                            <td>4</td>
+                            <td>3</td>
+                            <td>2</td>
+                            <td>1</td>
+                        </tr>
+                        <tr style={{
+                            backgroundColor: '#fdda80',
+                            color: "black",
+                        }}>
+                            <th>Sanksi</th>
+                            <td>4</td>
+                            <td>6</td>
+                            <td>8</td>
+                            <td>5</td>
+                            <td>7</td>
+                            <td>5</td>
+                            <td>6</td>
+                            <td>8</td>
+                            <td>9</td>
+                            <td>4</td>
+                            <td>3</td>
+                            <td>2</td>
+                            <td>4</td>
+                            <td>5</td>
+                            <td>6</td>
+                            <td>7</td>
 
-                            </tr>
-                            <tr style={{
-                                backgroundColor: '#cfab80',
-                                color: "black",
-                            }}>
-                                <th>Keberatan</th>
-                                <td>8</td>
-                                <td>6</td>
-                                <td>8</td>
-                                <td>1</td>
-                                <td>2</td>
-                                <td>3</td>
-                                <td>4</td>
-                                <td>5</td>
-                                <td>6</td>
-                                <td>7</td>
-                                <td>8</td>
-                                <td>8</td>
-                                <td>7</td>
-                                <td>6</td>
-                                <td>5</td>
-                                <td>3</td>
-                            </tr>
-                            <tr style={{
-                                backgroundColor: '#ef90df',
-                                color: "black",
-                            }}>
-                                <th>Banding</th>
-                                <td>4</td>
-                                <td>6</td>
-                                <td>8</td>
-                                <td>9</td>
-                                <td>8</td>
-                                <td>7</td>
-                                <td>6</td>
-                                <td>5</td>
-                                <td>4</td>
-                                <td>3</td>
-                                <td>2</td>
-                                <td>1</td>
-                                <td>2</td>
-                                <td>3</td>
-                                <td>4</td>
-                                <td>4</td>
-                            </tr>
-                            <tr style={{
-                                backgroundColor: '#80df89',
-                                color: "black",
-                            }}>
-                                <th>Pemantauan perbaikan</th>
-                                <td>4</td>
-                                <td>6</td>
-                                <td>8</td>
-                                <td>4</td>
-                                <td>5</td>
-                                <td>6</td>
-                                <td>7</td>
-                                <td>8</td>
-                                <td>8</td>
-                                <td>9</td>
-                                <td>3</td>
-                                <td>4</td>
-                                <td>5</td>
-                                <td>6</td>
-                                <td>7</td>
-                                <td>3</td>
-                            </tr>
-                            <tr style={{
-                                backgroundColor: '#a3d4d1',
-                                color: "black",
-                            }}>
-                                <th>Pencabutan Sanksi</th>
-                                <td>4</td>
-                                <td>6</td>
-                                <td>6</td>
-                                <td>9</td>
-                                <td>8</td>
-                                <td>7</td>
-                                <td>6</td>
-                                <td>3</td>
-                                <td>2-</td>
-                                <td>1</td>
-                                <td>8</td>
-                                <td>5</td>
-                                <td>4</td>
-                                <td>3</td>
-                                <td>6</td>
-                                <td>7</td>
-                            </tr>
-                        </thead>
-                    </Table>
-                </CardBody>
-            </Card>
-        </Col>
+                        </tr>
+                        <tr style={{
+                            backgroundColor: '#cfab80',
+                            color: "black",
+                        }}>
+                            <th>Keberatan</th>
+                            <td>8</td>
+                            <td>6</td>
+                            <td>8</td>
+                            <td>1</td>
+                            <td>2</td>
+                            <td>3</td>
+                            <td>4</td>
+                            <td>5</td>
+                            <td>6</td>
+                            <td>7</td>
+                            <td>8</td>
+                            <td>8</td>
+                            <td>7</td>
+                            <td>6</td>
+                            <td>5</td>
+                            <td>3</td>
+                        </tr>
+                        <tr style={{
+                            backgroundColor: '#ef90df',
+                            color: "black",
+                        }}>
+                            <th>Banding</th>
+                            <td>4</td>
+                            <td>6</td>
+                            <td>8</td>
+                            <td>9</td>
+                            <td>8</td>
+                            <td>7</td>
+                            <td>6</td>
+                            <td>5</td>
+                            <td>4</td>
+                            <td>3</td>
+                            <td>2</td>
+                            <td>1</td>
+                            <td>2</td>
+                            <td>3</td>
+                            <td>4</td>
+                            <td>4</td>
+                        </tr>
+                        <tr style={{
+                            backgroundColor: '#80df89',
+                            color: "black",
+                        }}>
+                            <th>Pemantauan perbaikan</th>
+                            <td>4</td>
+                            <td>6</td>
+                            <td>8</td>
+                            <td>4</td>
+                            <td>5</td>
+                            <td>6</td>
+                            <td>7</td>
+                            <td>8</td>
+                            <td>8</td>
+                            <td>9</td>
+                            <td>3</td>
+                            <td>4</td>
+                            <td>5</td>
+                            <td>6</td>
+                            <td>7</td>
+                            <td>3</td>
+                        </tr>
+                        <tr style={{
+                            backgroundColor: '#a3d4d1',
+                            color: "black",
+                        }}>
+                            <th>Pencabutan Sanksi</th>
+                            <td>4</td>
+                            <td>6</td>
+                            <td>6</td>
+                            <td>9</td>
+                            <td>8</td>
+                            <td>7</td>
+                            <td>6</td>
+                            <td>3</td>
+                            <td>2-</td>
+                            <td>1</td>
+                            <td>8</td>
+                            <td>5</td>
+                            <td>4</td>
+                            <td>3</td>
+                            <td>6</td>
+                            <td>7</td>
+                        </tr>
+                    </thead>
+                </Table>
+            </CardBody>
+        </Card>
     )
 }
 

components/Riwayat/TableRadarr.js

@@ -3,49 +3,88 @@ import ContentWrapper from '@/components/Layout/ContentWrapper';
 import { Row, Col, Card, CardHeader, CardBody, Table } from 'reactstrap';
 
 
-function TableRadarr() {
+function TableRadarr({ listData }) {
     return (
-        <Col xl="12">
-            <Card className="card-default">
-                <CardHeader>Bordered Table</CardHeader>
-                <CardBody>
-                    <Table bordered responsive>
-                        <thead>
-                            <tr>
-                                <th rowSpan={2}>Menu</th>
-                                <th colSpan={2}>Wilayah LLDIKTI</th>
-                            </tr>
-                            <tr>
-                                <th>I</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Penjawalan Evaluasi</td>
-                            </tr>
-                            <tr>
-                                <td>Pemeriksaan</td>
-                            </tr>
-                            <tr>
-                                <td>Sanksi</td>
-                            </tr>
-                            <tr>
-                                <td>Keberatan</td>
-                            </tr>
-                            <tr>
-                                <td>Banding</td>
-                            </tr>
-                            <tr>
-                                <td>Pemantauan perbaikan</td>
-                            </tr>
-                            <tr>
-                                <td>Pencabutan sanksi</td>
-                            </tr>
-                        </tbody>
-                    </Table>
-                </CardBody>
-            </Card>
-        </Col>
+        <Card className="card-default">
+            <CardBody>
+                <Table bordered responsive>
+                    <thead>
+                        <tr >
+                            <th>Wilayah LLDikti\Menu</th>
+                            <th style={{
+                                backgroundColor: '#80b1ff',
+                                color: "black",
+                            }}>Penjadwalan Evaluasi</th>
+                            <th style={{
+                                backgroundColor: '#de8383',
+                                color: "black",
+                            }}>Pemeriksaan</th>
+                            <th style={{
+                                backgroundColor: '#fdda80',
+                                color: "black",
+                            }}>Sanksi</th>
+                            <th style={{
+                                backgroundColor: '#cfab80',
+                                color: "black",
+                            }}>Keberatan</th>
+                            <th style={{
+                                backgroundColor: '#ef90df',
+                                color: "black",
+                            }}>Banding</th>
+                            <th style={{
+                                backgroundColor: '#80df89',
+                                color: "black",
+                            }}>Pemantauan perbaikan</th>
+                            <th style={{
+                                backgroundColor: '#a3d4d1',
+                                color: "black",
+                            }}>Pencabutan Sanksi</th>
+                        </tr>
+                    </thead>
+                    {listData.map((data) => {
+                        return (
+                            <tr key={data.id}>
+                                <td>{data.pembina.name}</td>
+                                <td style={{
+                                    backgroundColor: '#80b1ff',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_jadwal_evaluasi}</td>
+                                <td style={{
+                                    backgroundColor: '#de8383',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_pemeriksaan}</td>
+                                <td style={{
+                                    backgroundColor: '#fdda80',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_sanksi}</td>
+                                <td style={{
+                                    backgroundColor: '#cfab80',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_keberatan}</td>
+                                <td style={{
+                                    backgroundColor: '#ef90df',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_banding}</td>
+                                <td style={{
+                                    backgroundColor: '#80df89',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_pemantauan_perbaikan}</td>
+                                <td style={{
+                                    backgroundColor: '#a3d4d1',
+                                    color: "black",
+                                    textAlign: "center",
+                                }}>{data.jumlah_pencabutan_sanksi}</td>
+                            </tr>)
+                    })}
+                </Table>
+            </CardBody>
+        </Card>
     )
 }
 

pages/app/riwayat/index.js

@@ -22,18 +22,20 @@ class Riwayat extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      jumlahStatusLaporan: {}
     };
   }
 
-  // componentDidMount = async () => {
-  //   const { token } = this.props;
-  //   let jumlahStatusLaporan = await getjumlahStatusLaporan(token);
-  //   this.setState({ jumlahStatusLaporan });
-  //   console.log(jumlahStatusLaporan.data[1].jumlah_jadwal_evaluasi);
-  //   console.log(jumlahStatusLaporan);
-  // };
+
+  componentDidMount = async () => {
+    const { token } = this.props;
+    const jumlahStatusLaporan = await getjumlahStatusLaporan(this.props.token);
+    this.setState({ jumlahStatusLaporan });
+    // console.log(data)
+  };
 
   render() {
+    const { jumlahStatusLaporan } = this.state;
     return (
       <ContentWrapper>
         <div className="content-heading">
@@ -52,8 +54,12 @@ class Riwayat extends Component {
           <Col lg="6">
             <ChartRadarB />
           </Col>
-          {/* <TableRadarr /> */}
-          <TableRadar />
+          <Col lg="12">
+            {jumlahStatusLaporan?.data ? <TableRadarr listData={jumlahStatusLaporan.data} /> : <Loader />}
+          </Col>
+          {/* <Col lg="12">
+            {jumlahStatusLaporan?.data ? <TableRadar listData={jumlahStatusLaporan.data} /> : <Loader />}
+          </Col> */}
           <ChartData />
           {/* <TableRiwayat /> */}
           <Col lg="12">