consume api graph

components/Delegasi/CaseProgress.js

@@ -1,7 +1,14 @@
+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, user }) {
-	console.log(data);
 	const ChartPie = {
 		data: [
 			{
@@ -21,30 +28,23 @@ function CaseProgress({ data, user }) {
 			},
 		],
 
-		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",
-						},
-					},
-				},
+		data: [
+			{
+				label: "Ditindaklanjuti DIKTI",
+				color: "#287DAD",
+				data: 70,
 			},
-		},
+			{
+				label: "Ditindaklanjuti DIKTI",
+				color: "#52D489",
+				data: 40,
+			},
+			{
+				label: "Ditutup",
+				color: "#FD4233",
+				data: 40,
+			},
+		],
 	};
 
 	const ChartBar = {

components/Pelaporan/CaseProgress.js

@@ -1,4 +1,4 @@
-import { Progress } from "reactstrap";
+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";

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,21 @@
 	.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;
+	}
+	.fl{
+		display: inline;
+	}
+
 

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;
   }