CaseProgress (chartbar-chartpie)

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,145 @@
+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';
+
+const ChartPie = {
+
+    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'
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+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
+    // }
+
+    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/Pelaporan/CaseProgress.js

@@ -0,0 +1,65 @@
+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 Datatable from "@/components/Tables/Datatable";
+
+
+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 >
+    );
+}
+
+export default CaseProgress;

components/Pemeriksaan/CaseProgress.js

@@ -0,0 +1,134 @@
+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';
+
+const ChartPie = {
+
+    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'
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+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
+    }
+}
+
+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
+    // }
+
+    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/Penjadwalan/CaseProgress.js

@@ -0,0 +1,134 @@
+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';
+
+const ChartPie = {
+
+    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'
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+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
+    // }
+
+    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

@@ -0,0 +1,134 @@
+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';
+
+const ChartPie = {
+
+    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'
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+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() {
+
+
+    // 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">
+                <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,7 @@ 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 CaseProgress from "@/components/Delegasi/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";

pages/app/pelaporan/index.js

@@ -3,7 +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 CaseProgress from "@/components/Main/CaseProgress";
+import CaseProgress from "@/components/Pelaporan/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";

pages/app/pemeriksaan/index.js

@@ -2,7 +2,7 @@ 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 CaseProgress from "@/components/Pemeriksaan/CaseProgress";
 import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";

pages/app/penjadwalan/index.js

@@ -2,7 +2,7 @@ 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 CaseProgress from "@/components/Penjadwalan/CaseProgress";
 import TableLaporan from "@/components/Penjadwalan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";

pages/app/sanksi/index.js

@@ -2,7 +2,7 @@ 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 CaseProgress from "@/components/Sanksi/CaseProgress";
 import TableLaporan from "@/components/Sanksi/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";

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>