graph v0.1

actions/graph.js

@@ -0,0 +1,44 @@
+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, tahun } = 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`);
+			}
+			if (tahun) {
+				parseURL.push(`tahun=${tahun}`);
+			}
+
+			url += parseURL.join("&");
+		}
+
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

components/Charts/chart-flot.scss

@@ -2,10 +2,40 @@
      Component: chart-flot
  ======================================================================== */
 
+ .flot-chart-delegasi {
+    display: block;
+    width: 150%;
+    height: 250px;
+    .legend {
+        >table tr td {
+            padding: 3px;
+            display: none;
+        }
+        >table tr td:first-child {
+            padding-left: 3px;
+            display: none;
+        }
+        >table tr td:last-child {
+            padding-right: 3px;
+            display: none;
+        }
+        >table tr+tr td {
+            padding-top: 0;
+        }
 
+        >div:first-child {
+            border-color: rgba(0, 0, 0, .1) !important;
+        }
+
+        .legendColorBox>div,
+        .legendColorBox>div>div {
+            border-radius: 400px;
+        }
+    }
+}
 .flot-chart {
     display: block;
-    width: 100%;
+    width: 150%;
     height: 250px;
     .legend {
         >table tr td {
@@ -61,3 +91,12 @@
     color: #f1f1f1;
     z-index: 5;
 }
+// .w-400{
+// //     width: 300px;
+//     margin: -5px;
+// //     height: 200px;
+// }
+// .w-401{
+// margin-right: -50px;
+// }
+

components/Config/chartist.setup.js

@@ -0,0 +1,226 @@
+// import Chartist from 'chartist';
+
+// Bar bipolar
+// -----------------------------------
+export const BarBipolar = {
+    data: {
+        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
+        series: [
+            [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
+        ]
+    },
+
+    options: {
+        high: 10,
+        low: -10,
+        height: 280,
+        axisX: {
+            labelInterpolationFnc: function(value, index) {
+                return index % 2 === 0 ? value : null;
+            }
+        }
+    }
+}
+
+// Bar Horizontal
+// -----------------------------------
+export const BarHorizontal = {
+    data: {
+        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+        series: [
+            [5, 4, 3, 7, 5, 10, 3],
+            [3, 2, 9, 5, 4, 6, 4]
+        ]
+    },
+    options: {
+        seriesBarDistance: 10,
+        reverseData: true,
+        horizontalBars: true,
+        height: 280,
+        axisY: {
+            offset: 70
+        }
+    }
+}
+
+// Line
+// -----------------------------------
+export const Line = {
+    data: {
+        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
+        series: [
+            [12, 9, 7, 8, 5],
+            [2, 1, 3.5, 7, 3],
+            [1, 3, 4, 5, 6]
+        ]
+    },
+    options: {
+        fullWidth: true,
+        height: 280,
+        chartPadding: {
+            right: 40
+        }
+    }
+}
+
+
+// SVG Animation
+// -----------------------------------
+export const SVGAnimation = {
+    data: {
+        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        series: [
+            [1, 5, 2, 5, 4, 3],
+            [2, 3, 4, 8, 1, 2],
+            [5, 4, 3, 2, 1, 0.5]
+        ]
+    },
+    options: {
+        low: 0,
+        showArea: true,
+        showPoint: false,
+        fullWidth: true,
+        height: 300
+    },
+
+    events: {
+        draw: function(data) {
+            if (data.type === 'line' || data.type === 'area') {
+                data.element.animate({
+                    d: {
+                        begin: 2000 * data.index,
+                        dur: 2000,
+                        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+                        to: data.path.clone().stringify(),
+                        // easing: Chartist.Svg.Easing.easeOutQuint
+                    }
+                });
+            }
+        }
+    }
+}
+
+
+// Slim animation
+// -----------------------------------
+
+// Let's put a sequence number aside so we can use it in the event callbacks
+var seq = 0,
+    delays = 80,
+    durations = 500;
+export const SlimAnimation = {
+    data: {
+        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+        series: [
+            [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
+            [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
+            [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
+            [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
+        ]
+    },
+    options: {
+        low: 0,
+        height: 300
+    },
+    events: {
+        // Once the chart is fully created we reset the sequence
+        created: function() {
+            seq = 0;
+        },
+        // On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
+        draw: function(data) {
+            seq++;
+
+            if (data.type === 'line') {
+                // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
+                data.element.animate({
+                    opacity: {
+                        // The delay when we like to start the animation
+                        begin: seq * delays + 1000,
+                        // Duration of the animation
+                        dur: durations,
+                        // The value where the animation should start
+                        from: 0,
+                        // The value where it should end
+                        to: 1
+                    }
+                });
+            } else if (data.type === 'label' && data.axis === 'x') {
+                data.element.animate({
+                    y: {
+                        begin: seq * delays,
+                        dur: durations,
+                        from: data.y + 100,
+                        to: data.y,
+                        // We can specify an easing function from Chartist.Svg.Easing
+                        easing: 'easeOutQuart'
+                    }
+                });
+            } else if (data.type === 'label' && data.axis === 'y') {
+                data.element.animate({
+                    x: {
+                        begin: seq * delays,
+                        dur: durations,
+                        from: data.x - 100,
+                        to: data.x,
+                        easing: 'easeOutQuart'
+                    }
+                });
+            } else if (data.type === 'point') {
+                data.element.animate({
+                    x1: {
+                        begin: seq * delays,
+                        dur: durations,
+                        from: data.x - 10,
+                        to: data.x,
+                        easing: 'easeOutQuart'
+                    },
+                    x2: {
+                        begin: seq * delays,
+                        dur: durations,
+                        from: data.x - 10,
+                        to: data.x,
+                        easing: 'easeOutQuart'
+                    },
+                    opacity: {
+                        begin: seq * delays,
+                        dur: durations,
+                        from: 0,
+                        to: 1,
+                        easing: 'easeOutQuart'
+                    }
+                });
+            } else if (data.type === 'grid') {
+                // Using data.axis we get x or y which we can use to construct our animation definition objects
+                var pos1Animation = {
+                    begin: seq * delays,
+                    dur: durations,
+                    from: data[data.axis.units.pos + '1'] - 30,
+                    to: data[data.axis.units.pos + '1'],
+                    easing: 'easeOutQuart'
+                };
+
+                var pos2Animation = {
+                    begin: seq * delays,
+                    dur: durations,
+                    from: data[data.axis.units.pos + '2'] - 100,
+                    to: data[data.axis.units.pos + '2'],
+                    easing: 'easeOutQuart'
+                };
+
+                var animations = {};
+                animations[data.axis.units.pos + '1'] = pos1Animation;
+                animations[data.axis.units.pos + '2'] = pos2Animation;
+                animations['opacity'] = {
+                    begin: seq * delays,
+                    dur: durations,
+                    from: 0,
+                    to: 1,
+                    easing: 'easeOutQuart'
+                };
+
+                data.element.animate(animations);
+            }
+        }
+    }
+}

components/Config/chartjs.setup.js

@@ -0,0 +1,169 @@
+
+// random values for demo
+const rFactor = () => Math.round(Math.random() * 100)
+
+// Line chart
+// -----------------------------------
+export const Line = {
+    data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+            label: 'My First dataset',
+            backgroundColor: 'rgba(114,102,186,0.2)',
+            borderColor: 'rgba(114,102,186,1)',
+            pointBorderColor: '#fff',
+            data: [rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor()]
+        }, {
+            label: 'My Second dataset',
+            backgroundColor: 'rgba(35,183,229,0.2)',
+            borderColor: 'rgba(35,183,229,1)',
+            pointBorderColor: '#fff',
+            data: [rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor()]
+        }]
+    },
+    options: {
+        legend: {
+            display: false
+        }
+    }
+}
+
+// Bar chart
+// -----------------------------------
+export const Bar = {
+    data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+            backgroundColor: '#23b7e5',
+            borderColor: '#23b7e5',
+            data: [rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor()]
+        }, {
+            backgroundColor: '#5d9cec',
+            borderColor: '#5d9cec',
+            data: [rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor(), rFactor()]
+        }]
+    },
+    options: {
+        legend: {
+            display: true
+        }
+    }
+}
+
+//  Doughnut chart
+// -----------------------------------
+
+export const Doughnut = {
+    data: {
+        labels: [
+            'Purple',
+            'Yellow',
+            'Blue'
+        ],
+        datasets: [{
+            data: [300, 50, 100],
+            backgroundColor: [
+                '#7266ba',
+                '#fad732',
+                '#23b7e5'
+            ],
+            hoverBackgroundColor: [
+                '#7266ba',
+                '#fad732',
+                '#23b7e5'
+            ]
+        }]
+    },
+    options: {
+        legend: {
+            display: false
+        }
+    }
+}
+
+// Pie chart
+// -----------------------------------
+export const Pie = {
+    data: {
+        labels: [
+            'Purple',
+            'Yellow',
+            'Blue'
+        ],
+        datasets: [{
+            data: [300, 50, 100],
+            backgroundColor: [
+                '#7266ba',
+                '#fad732',
+                '#23b7e5'
+            ],
+            hoverBackgroundColor: [
+                '#7266ba',
+                '#fad732',
+                '#23b7e5'
+            ]
+        }]
+    },
+    options: {
+        legend: {
+            display: false
+        }
+    }
+}
+
+// Polar chart
+// -----------------------------------
+export const Polar = {
+    data: {
+        datasets: [{
+            data: [
+                11,
+                16,
+                7,
+                3
+            ],
+            backgroundColor: [
+                '#f532e5',
+                '#7266ba',
+                '#f532e5',
+                '#7266ba'
+            ],
+            label: 'My dataset' // for legend
+        }],
+        labels: [
+            'Label 1',
+            'Label 2',
+            'Label 3',
+            'Label 4'
+        ]
+    },
+    options: {
+        legend: {
+            display: false
+        }
+    }
+}
+
+// Radar chart
+// -----------------------------------
+export const Radar = {
+    data: {
+        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+        datasets: [{
+            label: 'My First dataset',
+            backgroundColor: 'rgba(114,102,186,0.2)',
+            borderColor: 'rgba(114,102,186,1)',
+            data: [65, 59, 90, 81, 56, 55, 40]
+        }, {
+            label: 'My Second dataset',
+            backgroundColor: 'rgba(151,187,205,0.2)',
+            borderColor: 'rgba(151,187,205,1)',
+            data: [28, 48, 40, 19, 96, 27, 100]
+        }]
+    },
+    options: {
+        legend: {
+            display: false
+        }
+    }
+}

components/Config/flot.setup.js

@@ -0,0 +1,457 @@
+// CHART SPLINE
+// -----------------------------------
+export const ChartSpline = {
+    data: [{
+        "label": "Uniques",
+        "color": "#768294",
+        "data": [
+            ["Mar", 70],
+            ["Apr", 85],
+            ["May", 59],
+            ["Jun", 93],
+            ["Jul", 66],
+            ["Aug", 86],
+            ["Sep", 60]
+        ]
+    }, {
+        "label": "Recurrent",
+        "color": "#1f92fe",
+        "data": [
+            ["Mar", 21],
+            ["Apr", 12],
+            ["May", 27],
+            ["Jun", 24],
+            ["Jul", 16],
+            ["Aug", 39],
+            ["Sep", 15]
+        ]
+    }],
+
+    options: {
+        series: {
+            lines: {
+                show: false
+            },
+            points: {
+                show: true,
+                radius: 4
+            },
+            splines: {
+                show: true,
+                tension: 0.4,
+                lineWidth: 1,
+                fill: 0.5
+            }
+        },
+        grid: {
+            borderColor: '#eee',
+            borderWidth: 1,
+            hoverable: true,
+            backgroundColor: '#fcfcfc'
+        },
+        tooltip: true,
+        tooltipOpts: {
+            content: (label, x, y) => x + ' : ' + y
+        },
+        xaxis: {
+            tickColor: '#fcfcfc',
+            mode: 'categories'
+        },
+        yaxis: {
+            min: 0,
+            max: 150, // optional: use it for a clear represetation
+            tickColor: '#eee',
+            //position: 'right' or 'left',
+            tickFormatter: v => v /* + ' visitors'*/
+        },
+        shadowSize: 0
+    }
+
+}
+
+// CHART AREA
+// -----------------------------------
+export const ChartArea = {
+    data: [{
+        "label": "Uniques",
+        "color": "#aad874",
+        "data": [
+            ["Mar", 50],
+            ["Apr", 84],
+            ["May", 52],
+            ["Jun", 88],
+            ["Jul", 69],
+            ["Aug", 92],
+            ["Sep", 58]
+        ]
+    }, {
+        "label": "Recurrent",
+        "color": "#7dc7df",
+        "data": [
+            ["Mar", 13],
+            ["Apr", 44],
+            ["May", 44],
+            ["Jun", 27],
+            ["Jul", 38],
+            ["Aug", 11],
+            ["Sep", 39]
+        ]
+    }],
+    options: {
+        series: {
+            lines: {
+                show: true,
+                fill: 0.8
+            },
+            points: {
+                show: true,
+                radius: 4
+            }
+        },
+        grid: {
+            borderColor: '#eee',
+            borderWidth: 1,
+            hoverable: true,
+            backgroundColor: '#fcfcfc'
+        },
+        tooltip: true,
+        tooltipOpts: {
+            content: (label, x, y) => x + ' : ' + y
+        },
+        xaxis: {
+            tickColor: '#fcfcfc',
+            mode: 'categories'
+        },
+        yaxis: {
+            min: 0,
+            tickColor: '#eee',
+            // position: 'right' or 'left'
+            tickFormatter: v => v + ' visitors'
+        },
+        shadowSize: 0
+    }
+}
+
+// CHART BAR
+// -----------------------------------
+export const ChartBar = {
+
+    data: [{
+        // "label": "sales",
+        "color": "#287DAD",
+        "data": [
+            ["Jan", 27],
+            ["Feb", 82],
+            ["Mar", 56],
+            ["Apr", 14],
+            ["May", 28],
+            ["Jun", 77],
+            ["Jul", 23],
+            ["Aug", 49],
+            ["Sep", 81],
+            ["Oct", 20],
+            ["Nov", 50],
+            ["Des", 14]
+        ]
+    }],
+    // data: [{
+    //     "label": "Complete",
+    //     "color": "#5ab1ef",
+    //     "data": [
+    //         ["Ditindaklanjuti LLDIKTI", 74]
+    //     ]
+    // }, {
+    //     "label": "In Progress",
+    //     "color": "#f5994e",
+    //     "data": [
+    //         ["Ditindaklanjuti DIKTI", 59]
+    //     ]
+    // }, {
+    //     "label": "Cancelled",
+    //     "color": "#d87a80",
+    //     "data": [
+    //         ["Ditutup", 111]
+    //     ]
+    // }],
+
+
+    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
+    }
+}
+
+// CHART BAR STACKED
+// -----------------------------------
+export const ChartBarStacked = {
+
+    data: [{
+        "label": "Tweets",
+        "color": "#51bff2",
+        "data": [
+            ["Jan", 56],
+            ["Feb", 81],
+            ["Mar", 97],
+            ["Apr", 44],
+            ["May", 24],
+            ["Jun", 85],
+            ["Jul", 94],
+            ["Aug", 78],
+            ["Sep", 52],
+            ["Oct", 17],
+            ["Nov", 90],
+            ["Dec", 62]
+        ]
+    }, {
+        "label": "Likes",
+        "color": "#4a8ef1",
+        "data": [
+            ["Jan", 69],
+            ["Feb", 135],
+            ["Mar", 14],
+            ["Apr", 100],
+            ["May", 100],
+            ["Jun", 62],
+            ["Jul", 115],
+            ["Aug", 22],
+            ["Sep", 104],
+            ["Oct", 132],
+            ["Nov", 72],
+            ["Dec", 61]
+        ]
+    }, {
+        "label": "+1",
+        "color": "#f0693a",
+        "data": [
+            ["Jan", 29],
+            ["Feb", 36],
+            ["Mar", 47],
+            ["Apr", 21],
+            ["May", 5],
+            ["Jun", 49],
+            ["Jul", 37],
+            ["Aug", 44],
+            ["Sep", 28],
+            ["Oct", 9],
+            ["Nov", 12],
+            ["Dec", 35]
+        ]
+    }],
+
+    options: {
+        series: {
+            stack: true,
+            bars: {
+                align: 'center',
+                lineWidth: 0,
+                show: true,
+                barWidth: 0.6,
+                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
+    }
+
+}
+
+// CHART DONUT
+// -----------------------------------
+export const ChartDonut = {
+
+    data: [{
+        "color": "#39C558",
+        "data": 60,
+        "label": "Coffee"
+    }, {
+        "color": "#00b4ff",
+        "data": 90,
+        "label": "CSS"
+    }, {
+        "color": "#FFBE41",
+        "data": 50,
+        "label": "LESS"
+    }, {
+        "color": "#ff3e43",
+        "data": 80,
+        "label": "Jade"
+    }, {
+        "color": "#937fc7",
+        "data": 116,
+        "label": "AngularJS"
+    }],
+
+    options: {
+        series: {
+            pie: {
+                show: true,
+                innerRadius: 0.5 // This makes the donut shape
+            }
+        }
+    }
+
+}
+
+// CHART LINE
+// -----------------------------------
+export const ChartLine = {
+
+    data: [{
+        "label": "Complete",
+        "color": "#5ab1ef",
+        "data": [
+            ["Jan", 188],
+            ["Feb", 183],
+            ["Mar", 185],
+            ["Apr", 199],
+            ["May", 190],
+            ["Jun", 194],
+            ["Jul", 194],
+            ["Aug", 184],
+            ["Sep", 74]
+        ]
+    }, {
+        "label": "In Progress",
+        "color": "#f5994e",
+        "data": [
+            ["Jan", 153],
+            ["Feb", 116],
+            ["Mar", 136],
+            ["Apr", 119],
+            ["May", 148],
+            ["Jun", 133],
+            ["Jul", 118],
+            ["Aug", 161],
+            ["Sep", 59]
+        ]
+    }, {
+        "label": "Cancelled",
+        "color": "#d87a80",
+        "data": [
+            ["Jan", 111],
+            ["Feb", 97],
+            ["Mar", 93],
+            ["Apr", 110],
+            ["May", 102],
+            ["Jun", 93],
+            ["Jul", 92],
+            ["Aug", 92],
+            ["Sep", 44]
+        ]
+    }],
+
+    options: {
+        series: {
+            lines: {
+                show: true,
+                fill: 0.01
+            },
+            points: {
+                show: true,
+                radius: 4
+            }
+        },
+        grid: {
+            borderColor: '#eee',
+            borderWidth: 1,
+            hoverable: true,
+            backgroundColor: '#fcfcfc'
+        },
+        tooltip: true,
+        tooltipOpts: {
+            content: (label, x, y) => x + ' : ' + y
+        },
+        xaxis: {
+            tickColor: '#eee',
+            mode: 'categories'
+        },
+        yaxis: {
+            // position: 'right' or 'left'
+            tickColor: '#eee'
+        },
+        shadowSize: 0
+    }
+
+}
+
+// CHART PIE
+// -----------------------------------
+export const ChartPie = {
+
+    data: [{
+        "label": "Pelaporan masuk",
+        "color": "#287DAD",
+        "data": 70
+    }, {
+        "label": "Pelaporan selesai",
+        "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'
+                    }
+                }
+            }
+        }
+    }
+
+}

components/Delegasi/CaseProgress.js

@@ -0,0 +1,141 @@
+import React, { Component, useState, useEffect } from "react";
+import { Button } from "reactstrap";
+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";
+
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
+	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],
+			},
+		],
+
+		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]],
+			},
+		],
+
+		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="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
+				<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

@@ -0,0 +1,151 @@
+import { Pagination, Progress, PaginationItem, PaginationLink, Button } 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 Datatable from "@/components/Tables/Datatable";
+import { useState, useEffect } from "react";
+
+function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan }) {
+	const laporan_pertahun = data.laporan_perTahun;
+
+	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;
+		}
+	};
+
+	const ChartPie = {
+		data: [
+			{
+				label: "Pelaporan masuk",
+				color: "#287DAD",
+				data: 40,
+			},
+			{
+				label: "Pelaporan selesai",
+				color: "#52D489",
+				data: 70,
+			},
+		],
+
+		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",
+						},
+					},
+				},
+			},
+		},
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
+				<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>
+				{newLaporan.map((value) => (
+					<h5 className="card-title text-left py-2 bg-gray border-radius-login">
+						<b className="f-size">{`${value.no_laporan} - ${value.pt.nama}`}</b>
+					</h5>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default CaseProgress;

components/Pemeriksaan/CaseProgress.js

@@ -0,0 +1,130 @@
+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 { Button } from "reactstrap";
+
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Sudah diperiksa", data.evaluasi.hasEvaluasi]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#52D489",
+				data: [["Belum diperiksa", data.evaluasi.notHasEvaluasi]],
+			},
+		],
+
+		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 ChartPie = {
+		data: [
+			{
+				label: "Sudah diperiksa",
+				color: "#287DAD",
+				data: [data.evaluasi.hasEvaluasi],
+			},
+			{
+				label: "Belum diperiksa",
+				color: "#52D489",
+				data: [data.evaluasi.notHasEvaluasi],
+			},
+		],
+
+		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",
+						},
+					},
+				},
+			},
+		},
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
+				<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/Penjadwalan/CaseProgress.js

@@ -0,0 +1,130 @@
+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 { Button } from "reactstrap";
+
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Sudah ada jadwal", data.jadwal.hasJadwal]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#52D489",
+				data: [["Belum ada jadwal", data.jadwal.notHasJadwal]],
+			},
+		],
+
+		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 ChartPie = {
+		data: [
+			{
+				label: "Sudah ada jadwal",
+				color: "#287DAD",
+				data: [data.jadwal.hasJadwal],
+			},
+			{
+				label: "Belum ada jadwal",
+				color: "#52D489",
+				data: [data.jadwal.notHasJadwal],
+			},
+		],
+
+		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",
+						},
+					},
+				},
+			},
+		},
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
+				<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

@@ -0,0 +1,129 @@
+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 { Button } from "reactstrap";
+
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#5ab1ef",
+				data: [["Sudah ditetapkan", data.sanksi.hasSanksi]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#52D489",
+				data: [["Belum ditetapkan", data.sanksi.notHasSanksi]],
+			},
+		],
+
+		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 ChartPie = {
+		data: [
+			{
+				label: "Sudah ada jadwal",
+				color: "#287DAD",
+				data: [data.sanksi.hasSanksi],
+			},
+			{
+				label: "Belum ada jadwal",
+				color: "#52D489",
+				data: [data.sanksi.notHasSanksi],
+			},
+		],
+
+		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",
+						},
+					},
+				},
+			},
+		},
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
+				<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;

pages/app/laporan-delegasi/index.js

@@ -3,7 +3,8 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
 import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
+import { getGraph } from "@/actions/graph";
+import CaseProgress from "@/components/Delegasi/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
@@ -13,16 +14,35 @@ class Pelaporan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
 	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 });
+	};
+
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { jumlahLaporan: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { jumlahLaporan: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -30,9 +50,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} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <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,7 +3,8 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
 import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
+import { getGraph } from "@/actions/graph";
+import CaseProgress from "@/components/Pelaporan/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
@@ -13,16 +14,38 @@ class Pelaporan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
+			newLaporan: [],
 		};
 	}
 
 	componentDidMount = async () => {
 		const pelaporan = await getPelaporan(this.props.token);
-		this.setState({ pelaporan });
+		const graph = await getGraph(this.props.token, { laporanTahun: true, newLaporan: true });
+		const newLaporan = graph.data.newLaporan;
+		this.setState({ pelaporan, graph, newLaporan });
+	};
+
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { laporanTahun: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { laporanTahun: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph, newLaporan } = this.state;
+
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -35,9 +58,7 @@ class Pelaporan extends Component {
 					</Link>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} /> : <Loader />}</Col>
 					<Col lg="8">
 						<div className="mb-3 d-flex">
 							<div>

pages/app/pemeriksaan/index.js

@@ -2,7 +2,8 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
+import { getGraph } from "@/actions/graph";
+import CaseProgress from "@/components/Pemeriksaan/CaseProgress";
 import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
@@ -14,17 +15,36 @@ class Pemeriksaan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
 	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 });
+	};
+
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -46,9 +66,7 @@ class Pemeriksaan extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <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,7 +2,8 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
+import { getGraph } from "@/actions/graph";
+import CaseProgress from "@/components/Penjadwalan/CaseProgress";
 import TableLaporan from "@/components/Penjadwalan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
@@ -14,17 +15,36 @@ class Penjadwalan extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
 	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 });
+	};
+
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { jadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { jadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -46,9 +66,7 @@ class Penjadwalan extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <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,7 +2,8 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
+import { getGraph } from "@/actions/graph";
+import CaseProgress from "@/components/Sanksi/CaseProgress";
 import TableLaporan from "@/components/Sanksi/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
@@ -14,17 +15,36 @@ class Sanksi extends Component {
 		super(props);
 		this.state = {
 			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
 	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 });
+	};
+
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { sanksi: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { sanksi: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
 	};
 
 	render() {
-		const { pelaporan } = this.state;
+		const { pelaporan, graph } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -38,9 +58,7 @@ class Sanksi extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan.data ? <TableLaporan listData={pelaporan.data} /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

public/static/img/bag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M864 158.704H672.815V97.328c0-52.944-43.056-96-96-96H449.183c-52.944 0-96 43.056-96 96v61.376H159.999c-35.344 0-64 28.656-64 64v735.968c0 35.344 28.656 64 64 64h704c35.344 0 64-28.656 64-64V222.704c0-35.344-28.656-64-64-64H864zM417.184 97.328c0-17.664 14.336-32 32-32h127.632c17.664 0 32 14.336 32 32v61.376H417.184V97.328zM864 958.672H160V222.704h193.184v65.84s-.848 31.967 31.809 31.967c36 0 32.192-31.967 32.192-31.967v-65.84h191.632v65.84s-2.128 32.128 31.872 32.128c32 0 32.128-32.128 32.128-32.128v-65.84h191.184v735.968z"/></svg>

styles/bootstrap/_buttons.scss

@@ -255,4 +255,9 @@ input[type="button"] {
 }
 .btn-radius .button-lihatpemantauan{
 	border: 0;
-}
+}
+.button-hidden{
+	border: 0;
+	padding: 0;
+	
+}

styles/bootstrap/_card.scss

@@ -339,4 +339,18 @@
 	.card-over{
 		overflow: auto;
 	}
+	.f-size{
+		margin-left: 10px;
+	}
+	.w-40{
+		width: 100px;
+	}
+	.margin-botton-20{
+		margin-bottom: 20px;
+	}
+	.text-tahun{
+		font-size: 20px;
+		text-align: center;
+	}
+
 

styles/bootstrap/_images.scss

@@ -116,4 +116,17 @@
     width: 97%;
     margin-left: auto;
     margin-right: auto;
+  }
+  .icon-next{
+    margin-right: 15px;
+    margin-top: 5px;
+  }
+  .float-rigt{
+    float: right;
+  }
+  .float-left{
+    float: left;
+  }
+  .icon-eksport{
+    margin-top: 5px;
   }