commit

actions/graph.js

@@ -4,7 +4,7 @@ export const getGraph = async (token, query = {}) => {
 	try {
 		let url = "/graph";
 		if (query != null) {
-			const { listJadwal, newLaporan, jumlahLaporan, evaluasi, jadwal, sanksi, laporanTahun } = query;
+			const { listJadwal, newLaporan, jumlahLaporan, evaluasi, jadwal, sanksi, laporanTahun, tahun } = query;
 			url += "?";
 			const parseURL = [];
 			if (listJadwal) {
@@ -28,6 +28,9 @@ export const getGraph = async (token, query = {}) => {
 			if (laporanTahun) {
 				parseURL.push(`laporanTahun=true`);
 			}
+			if (tahun) {
+				parseURL.push(`tahun=${tahun}`);
+			}
 
 			url += parseURL.join("&");
 		}

components/Sanksi/CaseProgress.js

@@ -8,8 +8,7 @@ import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
-
-function CaseProgress({ data }) {
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
 	const ChartBar = {
 		data: [
 			{
@@ -99,13 +98,13 @@ function CaseProgress({ data }) {
 		<div className="card b">
 			<div className="card-body bb">
 				<div className="margin-botton-20 text-tahun">
-					<Button className="float-left button-hidden icon-next">
+					<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">
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
 						<img src="/static/img/next.png"></img>
 					</Button>
-					<b className="text-tahun">Mei 2022 </b>
+					<b className="text-tahun">Tahun {tahun} </b>
 					<Button className="float-right button-hidden icon-eksport">
 						<img src="/static/img/Eksport.png"></img>
 					</Button>

pages/app/sanksi/index.js

@@ -16,6 +16,7 @@ class Sanksi extends Component {
 		this.state = {
 			pelaporan: {},
 			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
@@ -26,6 +27,22 @@ class Sanksi extends Component {
 		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, graph } = this.state;
 		return (
@@ -41,7 +58,7 @@ class Sanksi extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</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>