add graph and consume api

actions/graph.js

@@ -0,0 +1,41 @@
+import axiosAPI from "../config/axios";
+
+export const getGraph = async (token, query = {}) => {
+	try {
+		let url = "/graph";
+		if (query != null) {
+			const { listJadwal, newLaporan, jumlahLaporan, evaluasi, jadwal, sanksi, laporanTahun } = query;
+			url += "?";
+			const parseURL = [];
+			if (listJadwal) {
+				parseURL.push(`listJadwal=true`);
+			}
+			if (newLaporan) {
+				parseURL.push(`newLaporan=true`);
+			}
+			if (jumlahLaporan) {
+				parseURL.push(`jumlahLaporan=true`);
+			}
+			if (evaluasi) {
+				parseURL.push(`evaluasi=true`);
+			}
+			if (jadwal) {
+				parseURL.push(`jadwal=true`);
+			}
+			if (sanksi) {
+				parseURL.push(`sanksi=true`);
+			}
+			if (laporanTahun) {
+				parseURL.push(`laporanTahun=true`);
+			}
+
+			url += parseURL.join("&");
+		}
+
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

components/Delegasi/CaseProgress.js

@@ -1,145 +1,122 @@
-import React, { Component, useState, useEffect } from 'react';
-import { Progress } from "reactstrap";
-import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
-import FlotChart from '@/components/Charts/Flot.js';
-import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
-import Datatable from "@/components/Tables/Datatable";
-import MorrisChart from '@/components/Charts//Morris';
+import FlotChart from "@/components/Charts/Flot.js";
 
-const ChartPie = {
+function CaseProgress({ data, user }) {
+	console.log(data);
+	const ChartPie = {
+		data: [
+			{
+				label: "Ditindaklanjuti DIKTI",
+				color: "#287DAD",
+				data: data.jumlah_laporan.dikti,
+			},
+			{
+				label: "Ditindaklanjuti LLDIKTI",
+				color: "#52D489",
+				data: data.jumlah_laporan.lldikti,
+			},
+			{
+				label: "Ditutup",
+				color: "#FD4233",
+				data: data.jumlah_laporan.ditutup,
+			},
+		],
 
-    data: [{
-        "label": "Ditindaklanjuti DIKTI",
-        "color": "#287DAD",
-        "data": 70
-    }, {
-        "label": "Ditindaklanjuti DIKTI",
-        "color": "#52D489",
-        "data": 40
-    }, {
-        "label": "Ditutup",
-        "color": "#FD4233",
-        "data": 40
-    }],
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
 
-    options: {
-        series: {
-            pie: {
-                show: true,
-                innerRadius: 0,
-                label: {
-                    show: true,
-                    radius: 0.8,
-                    formatter: function (label, series) {
-                        return '<div class="flot-pie-label">' +
-                            //label + ' : ' +
-                            Math.round(series.percent) +
-                            '%</div>';
-                    },
-                    background: {
-                        opacity: 0.8,
-                        color: '#222'
-                    }
-                }
-            }
-        }
-    }
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Ditindaklanjuti DIKTI", data.jumlah_laporan.dikti]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#f5994e",
+				data: [["Ditindaklanjuti LLDIKTI", data.jumlah_laporan.lldikti]],
+			},
+			{
+				// "label": "Cancelled",
+				color: "#d87a80",
+				data: [["Ditutup", data.jumlah_laporan.ditutup]],
+			},
+		],
 
-}
-
-const ChartBar = {
-    data: [{
-        // "label": "Complete",
-        "color": "#5ab1ef",
-        "data": [
-            ["Ditindaklanjuti DIKTI", 111]
-        ]
-    }, {
-        // "label": "In Progress",
-        "color": "#f5994e",
-        "data": [
-            ["Ditindaklanjuti LLDIKTI", 79]
-        ]
-    }, {
-        // "label": "Cancelled",
-        "color": "#d87a80",
-        "data": [
-            ["Ditutup", 41]
-        ]
-    }],
-
-
-    options: {
-        series: {
-            bars: {
-                align: 'center',
-                lineWidth: 0,
-                show: true,
-                barWidth: 0.2,
-                fill: 0.9
-            }
-        },
-        grid: {
-            borderColor: '#eee',
-            borderWidth: 1,
-            hoverable: true,
-            backgroundColor: '#fcfcfc'
-        },
-        tooltip: true,
-        tooltipOpts: {
-            content: (label, x, y) => x + ' : ' + y
-        },
-        xaxis: {
-            tickColor: '#fcfcfc',
-            mode: 'categories'
-        },
-        yaxis: {
-            // position: 'right' or 'left'
-            tickColor: '#eee'
-        },
-        shadowSize: 0
-    }
-}
-
-function CaseProgress() {
-
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
+		options: {
+			series: {
+				bars: {
+					align: "center",
+					lineWidth: 0,
+					show: true,
+					barWidth: 0.2,
+					fill: 0.9,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				// position: 'right' or 'left'
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
 
-    return (
-        <div className="card b">
-            <div className="card-body bb">
-                <div className="header-1">
-                    <h2 className="card-title-1">Perkembangan</h2>
-                </div >
-                <div className="w-401">
-                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
-                    {/* <MorrisChart type={'Bar'} id="morris-bar" data={chartdata} options={barOptions} /> */}
-                </div>
-            </div>
-            <div className="card-body">
-                <div className="header-1">
-                    <h2 className="card-title-1">Rekapitulasi</h2>
-                </div>
-                <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
-            </div>
-        </div >
-    );
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-401">
+					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+					{/* <MorrisChart type={'Bar'} id="morris-bar" data={chartdata} options={barOptions} /> */}
+				</div>
+			</div>
+			<div className="card-body">
+				<div className="header-1">
+					<h2 className="card-title-1">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div>
+		</div>
+	);
 }
 
 export default CaseProgress;

components/Main/Login.js

@@ -76,7 +76,7 @@ class Login extends Component {
 				}
 			}
 		} catch (error) {
-			this.setState({ error: error.response.data.message || error.response });
+			this.setState({ error: error.response?.data.message || error.response });
 		}
 	};
 

components/Pelaporan/CaseProgress.js

@@ -1,65 +1,98 @@
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
-import FlotChart from '@/components/Charts/Flot.js';
-import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLine, ChartPie } from '@/components/Config/flot.setup.js';
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLine, ChartPie } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
+import { useState, useEffect } from "react";
 
+function CaseProgress({ data }) {
+	const laporan_pertahun = data.laporan_perTahun;
+	const laporan_terbaru = data.newLaporan;
 
-function CaseProgress() {
-    return (
-        <div className="card b">
-            <div className="card-body bb">
-                <div className="header-1">
-                    <h2 className="card-title-1">Perkembangan</h2>
-                </div>
-                <div className="w-400">
-                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
-                </div>
-            </div>
-            <div className="card-body">
-                <div className="header-1">
-                    <h2 className="card-title-1">Rekapitulasi</h2>
-                </div>
-                <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
-            </div>
-            <div className="card-body">
-                <div className="header-1">
-                    <h2 className="card-title-1">Laporan Terbaru</h2>
-                </div>
-                <table className="table bb">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <strong></strong>
-                            </td>
-                            <td>80</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>Close Case</strong>
-                            </td>
-                            <td>20</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>Performance</strong>
-                            </td>
-                            <td>
-                                <em className="far fa-smile fa-lg text-warning"></em>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>Last Case Closed</strong>
-                            </td>
-                            <td>BI:1107 - 12/01/2016</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div >
-    );
+	const [chartData, setChartData] = useState([
+		{
+			// "label": "sales",
+			color: "#287DAD",
+			data: [],
+		},
+	]);
+
+	useEffect(() => {
+		laporan_pertahun.forEach((e) => {
+			chartData[0].data.push([convertMonth(e._id.bulan), e.jumlah_laporan]);
+		});
+	}, []);
+
+	const convertMonth = (int) => {
+		switch (int) {
+			case 1:
+				return "Januari";
+				break;
+			case 2:
+				return "Februari";
+				break;
+			case 3:
+				return "Maret";
+				break;
+			case 4:
+				return "April";
+				break;
+			case 5:
+				return "Mei";
+				break;
+			case 6:
+				return "Juni";
+				break;
+			case 7:
+				return "Juli";
+				break;
+			case 8:
+				return "Agustus";
+				break;
+			case 9:
+				return "September";
+				break;
+			case 10:
+				return "Oktober";
+				break;
+			case 11:
+				return "November";
+				break;
+			case 12:
+				return "Desember";
+				break;
+			default:
+				break;
+		}
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-400">
+					<FlotChart options={ChartBar.options} data={chartData} className="flot-chart" height="200px" />
+				</div>
+			</div>
+			{/* <div className="card-body">
+				<div className="header-1">
+					<h2 className="card-title-1">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div> */}
+			<div className="card-body">
+				<div className="header-1">
+					<h2 className="card-title-1">Laporan Terbaru</h2>
+				</div>
+				{laporan_terbaru.map((value) => (
+					<Card>{`${value.no_laporan} - ${value.pt.nama}`}</Card>
+				))}
+			</div>
+		</div>
+	);
 }
 
 export default CaseProgress;

components/Pemeriksaan/CaseProgress.js

@@ -1,134 +1,132 @@
-import React, { Component, useState, useEffect } from 'react';
+import React, { Component, useState, useEffect } from "react";
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
-import FlotChart from '@/components/Charts/Flot.js';
-import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
-import MorrisChart from '@/components/Charts//Morris';
+import MorrisChart from "@/components/Charts//Morris";
 
 const ChartPie = {
+	data: [
+		{
+			label: "Sudah diperiksa",
+			color: "#287DAD",
+			data: 70,
+		},
+		{
+			label: "Belum diperiksa",
+			color: "#52D489",
+			data: 40,
+		},
+	],
 
-    data: [{
-        "label": "Sudah diperiksa",
-        "color": "#287DAD",
-        "data": 70
-    }, {
-        "label": "Belum diperiksa",
-        "color": "#52D489",
-        "data": 40
-    }],
+	options: {
+		series: {
+			pie: {
+				show: true,
+				innerRadius: 0,
+				label: {
+					show: true,
+					radius: 0.8,
+					formatter: function (label, series) {
+						return (
+							'<div class="flot-pie-label">' +
+							//label + ' : ' +
+							Math.round(series.percent) +
+							"%</div>"
+						);
+					},
+					background: {
+						opacity: 0.8,
+						color: "#222",
+					},
+				},
+			},
+		},
+	},
+};
 
-    options: {
-        series: {
-            pie: {
-                show: true,
-                innerRadius: 0,
-                label: {
-                    show: true,
-                    radius: 0.8,
-                    formatter: function (label, series) {
-                        return '<div class="flot-pie-label">' +
-                            //label + ' : ' +
-                            Math.round(series.percent) +
-                            '%</div>';
-                    },
-                    background: {
-                        opacity: 0.8,
-                        color: '#222'
-                    }
-                }
-            }
-        }
-    }
+function CaseProgress({ data }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Sudah diperiksa", data.evaluasi.hasEvaluasi]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#f5994e",
+				data: [["Belum diperiksa", data.evaluasi.notHasEvaluasi]],
+			},
+		],
 
-}
-
-const ChartBar = {
-    data: [{
-        // "label": "Complete",
-        "color": "#5ab1ef",
-        "data": [
-            ["Sudah diperiksa", 70]
-        ]
-    }, {
-        // "label": "In Progress",
-        "color": "#f5994e",
-        "data": [
-            ["Belum diperiksa", 40]
-        ]
-    },],
-
-
-    options: {
-        series: {
-            bars: {
-                align: 'center',
-                lineWidth: 0,
-                show: true,
-                barWidth: 0.2,
-                fill: 0.9
-            }
-        },
-        grid: {
-            borderColor: '#eee',
-            borderWidth: 1,
-            hoverable: true,
-            backgroundColor: '#fcfcfc'
-        },
-        tooltip: true,
-        tooltipOpts: {
-            content: (label, x, y) => x + ' : ' + y
-        },
-        xaxis: {
-            tickColor: '#fcfcfc',
-            mode: 'categories'
-        },
-        yaxis: {
-            // position: 'right' or 'left'
-            tickColor: '#eee'
-        },
-        shadowSize: 0
-    }
-}
+		options: {
+			series: {
+				bars: {
+					align: "center",
+					lineWidth: 0,
+					show: true,
+					barWidth: 0.2,
+					fill: 0.9,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				// position: 'right' or 'left'
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
+	// const chartdata = [
+	//     { y: "Delegasi DIKTI", a: 100 },
+	//     { y: "Delegasi LLDIKTI", b: 70 },
+	//     { y: "Ditutup", c: 50 }
+	// ]
 
-function CaseProgress() {
+	// const barOptions = {
+	//     element: 'morris-bar',
+	//     xkey: 'y',
+	//     ykeys: ["a", "b", "c"],
+	//     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
+	//     xLabelMargin: 2,
+	//     barColors: ['#287DAD', '#52D489', '#FD4233'],
+	//     resize: true
+	// }
 
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
-
-    return (
-        <div className="card b">
-            <div className="card-body bb">
-                <div className="header-1">
-                    <h2 className="card-title-1">Perkembangan</h2>
-                </div >
-                <div className="w-401">
-                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
-                </div>
-            </div>
-            <div className="card-body">
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-401">
+					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+				</div>
+			</div>
+			{/* <div className="card-body">
                 <div className="header-1">
                     <h2 className="card-title-1">Rekapitulasi</h2>
                 </div>
                 <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
-            </div>
-        </div >
-    );
+            </div> */}
+		</div>
+	);
 }
 
 export default CaseProgress;

components/Penjadwalan/CaseProgress.js

@@ -1,134 +1,117 @@
-import React, { Component, useState, useEffect } from 'react';
+import React, { Component, useState, useEffect } from "react";
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
-import FlotChart from '@/components/Charts/Flot.js';
-import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
-import MorrisChart from '@/components/Charts//Morris';
+import MorrisChart from "@/components/Charts//Morris";
 
 const ChartPie = {
+	data: [
+		{
+			label: "Sudah ada jadwal",
+			color: "#287DAD",
+			data: 70,
+		},
+		{
+			label: "Belum ada jadwal",
+			color: "#52D489",
+			data: 40,
+		},
+	],
 
-    data: [{
-        "label": "Sudah ada jadwal",
-        "color": "#287DAD",
-        "data": 70
-    }, {
-        "label": "Belum ada jadwal",
-        "color": "#52D489",
-        "data": 40
-    }],
+	options: {
+		series: {
+			pie: {
+				show: true,
+				innerRadius: 0,
+				label: {
+					show: true,
+					radius: 0.8,
+					formatter: function (label, series) {
+						return (
+							'<div class="flot-pie-label">' +
+							//label + ' : ' +
+							Math.round(series.percent) +
+							"%</div>"
+						);
+					},
+					background: {
+						opacity: 0.8,
+						color: "#222",
+					},
+				},
+			},
+		},
+	},
+};
 
-    options: {
-        series: {
-            pie: {
-                show: true,
-                innerRadius: 0,
-                label: {
-                    show: true,
-                    radius: 0.8,
-                    formatter: function (label, series) {
-                        return '<div class="flot-pie-label">' +
-                            //label + ' : ' +
-                            Math.round(series.percent) +
-                            '%</div>';
-                    },
-                    background: {
-                        opacity: 0.8,
-                        color: '#222'
-                    }
-                }
-            }
-        }
-    }
+function CaseProgress({ data }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Sudah ada jadwal", data.jadwal.hasJadwal]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#f5994e",
+				data: [["Belum ada jadwal", data.jadwal.notHasJadwal]],
+			},
+		],
 
-}
-
-const ChartBar = {
-    data: [{
-        // "label": "Complete",
-        "color": "#5ab1ef",
-        "data": [
-            ["Sudah ada jadwal", 70]
-        ]
-    }, {
-        // "label": "In Progress",
-        "color": "#f5994e",
-        "data": [
-            ["Belum ada jadwal", 40]
-        ]
-    },],
-
-
-    options: {
-        series: {
-            bars: {
-                align: 'center',
-                lineWidth: 0,
-                show: true,
-                barWidth: 0.2,
-                fill: 0.9
-            }
-        },
-        grid: {
-            borderColor: '#eee',
-            borderWidth: 1,
-            hoverable: true,
-            backgroundColor: '#fcfcfc'
-        },
-        tooltip: true,
-        tooltipOpts: {
-            content: (label, x, y) => x + ' : ' + y
-        },
-        xaxis: {
-            tickColor: '#fcfcfc',
-            mode: 'categories'
-        },
-        yaxis: {
-            // position: 'right' or 'left'
-            tickColor: '#eee'
-        },
-        shadowSize: 0
-    }
-}
-
-function CaseProgress() {
-
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
+		options: {
+			series: {
+				bars: {
+					align: "center",
+					lineWidth: 0,
+					show: true,
+					barWidth: 0.2,
+					fill: 0.9,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				// position: 'right' or 'left'
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
 
-    return (
-        <div className="card b">
-            <div className="card-body bb">
-                <div className="header-1">
-                    <h2 className="card-title-1">Perkembangan</h2>
-                </div >
-                <div className="w-401">
-                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
-                </div>
-            </div>
-            <div className="card-body">
-                <div className="header-1">
-                    <h2 className="card-title-1">Rekapitulasi</h2>
-                </div>
-                <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
-            </div>
-        </div >
-    );
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-401">
+					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+				</div>
+			</div>
+			{/* <div className="card-body">
+				<div className="header-1">
+					<h2 className="card-title-1">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div> */}
+		</div>
+	);
 }
 
 export default CaseProgress;

components/Sanksi/CaseProgress.js

@@ -1,134 +1,117 @@
-import React, { Component, useState, useEffect } from 'react';
+import React, { Component, useState, useEffect } from "react";
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
-import FlotChart from '@/components/Charts/Flot.js';
-import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
-import MorrisChart from '@/components/Charts//Morris';
+import MorrisChart from "@/components/Charts//Morris";
 
 const ChartPie = {
+	data: [
+		{
+			label: "Sudah ada jadwal",
+			color: "#287DAD",
+			data: 70,
+		},
+		{
+			label: "Belum ada jadwal",
+			color: "#52D489",
+			data: 40,
+		},
+	],
 
-    data: [{
-        "label": "Sudah ada jadwal",
-        "color": "#287DAD",
-        "data": 70
-    }, {
-        "label": "Belum ada jadwal",
-        "color": "#52D489",
-        "data": 40
-    }],
+	options: {
+		series: {
+			pie: {
+				show: true,
+				innerRadius: 0,
+				label: {
+					show: true,
+					radius: 0.8,
+					formatter: function (label, series) {
+						return (
+							'<div class="flot-pie-label">' +
+							//label + ' : ' +
+							Math.round(series.percent) +
+							"%</div>"
+						);
+					},
+					background: {
+						opacity: 0.8,
+						color: "#222",
+					},
+				},
+			},
+		},
+	},
+};
 
-    options: {
-        series: {
-            pie: {
-                show: true,
-                innerRadius: 0,
-                label: {
-                    show: true,
-                    radius: 0.8,
-                    formatter: function (label, series) {
-                        return '<div class="flot-pie-label">' +
-                            //label + ' : ' +
-                            Math.round(series.percent) +
-                            '%</div>';
-                    },
-                    background: {
-                        opacity: 0.8,
-                        color: '#222'
-                    }
-                }
-            }
-        }
-    }
+function CaseProgress({ data }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Sudah ditetapkan", data.sanksi.hasSanksi]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#f5994e",
+				data: [["Belum ditetapkan", data.sanksi.notHasSanksi]],
+			},
+		],
 
-}
-
-const ChartBar = {
-    data: [{
-        // "label": "Complete",
-        "color": "#5ab1ef",
-        "data": [
-            ["Sudah ditetapkan", 70]
-        ]
-    }, {
-        // "label": "In Progress",
-        "color": "#f5994e",
-        "data": [
-            ["Belum ditetapkan", 40]
-        ]
-    },],
-
-
-    options: {
-        series: {
-            bars: {
-                align: 'center',
-                lineWidth: 0,
-                show: true,
-                barWidth: 0.2,
-                fill: 0.9
-            }
-        },
-        grid: {
-            borderColor: '#eee',
-            borderWidth: 1,
-            hoverable: true,
-            backgroundColor: '#fcfcfc'
-        },
-        tooltip: true,
-        tooltipOpts: {
-            content: (label, x, y) => x + ' : ' + y
-        },
-        xaxis: {
-            tickColor: '#fcfcfc',
-            mode: 'categories'
-        },
-        yaxis: {
-            // position: 'right' or 'left'
-            tickColor: '#eee'
-        },
-        shadowSize: 0
-    }
-}
-
-function CaseProgress() {
+		options: {
+			series: {
+				bars: {
+					align: "center",
+					lineWidth: 0,
+					show: true,
+					barWidth: 0.2,
+					fill: 0.9,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				// position: 'right' or 'left'
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
 
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
-
-    return (
-        <div className="card b">
-            <div className="card-body bb">
-                <div className="header-1">
-                    <h2 className="card-title-1">Perkembangan</h2>
-                </div >
-                <div className="w-401">
-                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
-                </div>
-            </div>
-            <div className="card-body">
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-401">
+					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+				</div>
+			</div>
+			{/* <div className="card-body">
                 <div className="header-1">
                     <h2 className="card-title-1">Rekapitulasi</h2>
                 </div>
                 <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
-            </div>
-        </div >
-    );
+            </div> */}
+		</div>
+	);
 }
 
 export default CaseProgress;

env.js

@@ -1,3 +1,3 @@
 // export const TOKEN=77aecfec-10ac-3b4f-ab59-3fbfbeed6324
 export const API_URL = "http://localhost:5000/v1";
-// export const API_URL = "https://api.sidali.sixsenz.net";
+// export const API_URL = "https://api.sidali.sixsenz.net/v1";

pages/app/laporan-delegasi/index.js

@@ -3,6 +3,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
 import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph } from "@/actions/graph";
 import CaseProgress from "@/components/Delegasi/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
@@ -13,16 +14,18 @@ class Pelaporan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
 		};
 	}
 
 	componentDidMount = async () => {
 		const pelaporan = await getPelaporan(this.props.token, { delegasi: true });
-		this.setState({ pelaporan });
+		const graph = await getGraph(this.props.token, { jumlahLaporan: true });
+		this.setState({ pelaporan, graph });
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -30,9 +33,7 @@ class Pelaporan extends Component {
 					<div className="ml-auto"></div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} user={this.props.user} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/laporan-delegasi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pelaporan/index.js

@@ -3,6 +3,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
 import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph } from "@/actions/graph";
 import CaseProgress from "@/components/Pelaporan/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
@@ -13,16 +14,18 @@ class Pelaporan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
 		};
 	}
 
 	componentDidMount = async () => {
 		const pelaporan = await getPelaporan(this.props.token);
-		this.setState({ pelaporan });
+		const graph = await getGraph(this.props.token, { laporanTahun: true, newLaporan: true });
+		this.setState({ pelaporan, graph });
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -35,9 +38,7 @@ class Pelaporan extends Component {
 					</Link>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
 					<Col lg="8">
 						<div className="mb-3 d-flex">
 							<div>

pages/app/pemeriksaan/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph } from "@/actions/graph";
 import CaseProgress from "@/components/Pemeriksaan/CaseProgress";
 import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
 import { connect } from "react-redux";
@@ -14,17 +15,19 @@ class Pemeriksaan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
 		};
 	}
 
 	componentDidMount = async () => {
 		const { token } = this.props;
 		const pelaporan = await getPelaporan(token, { jadwal: true });
-		this.setState({ pelaporan });
+		const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true });
+		this.setState({ pelaporan, graph });
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -46,9 +49,7 @@ class Pemeriksaan extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Evaluasi" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/penjadwalan/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph } from "@/actions/graph";
 import CaseProgress from "@/components/Penjadwalan/CaseProgress";
 import TableLaporan from "@/components/Penjadwalan/TableLaporan";
 import { connect } from "react-redux";
@@ -14,17 +15,19 @@ class Penjadwalan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
 		};
 	}
 
 	componentDidMount = async () => {
 		const { token } = this.props;
 		const pelaporan = await getPelaporan(token);
-		this.setState({ pelaporan });
+		const graph = await getGraph(this.props.token, { jadwal: true });
+		this.setState({ pelaporan, graph });
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -46,9 +49,7 @@ class Penjadwalan extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/sanksi/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph } from "@/actions/graph";
 import CaseProgress from "@/components/Sanksi/CaseProgress";
 import TableLaporan from "@/components/Sanksi/TableLaporan";
 import { connect } from "react-redux";
@@ -14,17 +15,19 @@ class Sanksi extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
 		};
 	}
 
 	componentDidMount = async () => {
 		const { token } = this.props;
 		const pelaporan = await getPelaporan(token, { evaluasi: true });
-		this.setState({ pelaporan });
+		const graph = await getGraph(this.props.token, { sanksi: true });
+		this.setState({ pelaporan, graph });
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -38,9 +41,7 @@ class Sanksi extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan.data ? <TableLaporan listData={pelaporan.data} /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>