|  | @@ -1,96 +1,81 @@
 | 
	
		
			
				|  |  |  import React, { Component } from "react";
 | 
	
		
			
				|  |  |  import ContentWrapper from "@/components/Layout/ContentWrapper";
 | 
	
		
			
				|  |  |  import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +import { connect } from "react-redux";
 | 
	
		
			
				|  |  | +import { jumlahLaporan } from "@/actions/pelaporan";
 | 
	
		
			
				|  |  |  import dynamic from "next/dynamic";
 | 
	
		
			
				|  |  |  const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  class ChartDataBar extends React.Component {
 | 
	
		
			
				|  |  | -  constructor(props) {
 | 
	
		
			
				|  |  | -    super(props);
 | 
	
		
			
				|  |  | +	constructor(props) {
 | 
	
		
			
				|  |  | +		super(props);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		this.state = {
 | 
	
		
			
				|  |  | +			series: [
 | 
	
		
			
				|  |  | +				{
 | 
	
		
			
				|  |  | +					data: [44, 55, 41, 64, 22, 43, 21, 44, 42, 67, 43, 86, 42, 99, 131, 313],
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +			],
 | 
	
		
			
				|  |  | +			options: {
 | 
	
		
			
				|  |  | +				chart: {
 | 
	
		
			
				|  |  | +					type: "bar",
 | 
	
		
			
				|  |  | +					height: 430,
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				plotOptions: {
 | 
	
		
			
				|  |  | +					bar: {
 | 
	
		
			
				|  |  | +						horizontal: true,
 | 
	
		
			
				|  |  | +						dataLabels: {
 | 
	
		
			
				|  |  | +							position: "top",
 | 
	
		
			
				|  |  | +						},
 | 
	
		
			
				|  |  | +					},
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				chart: {
 | 
	
		
			
				|  |  | +					toolbar: {
 | 
	
		
			
				|  |  | +						show: true,
 | 
	
		
			
				|  |  | +						tools: {
 | 
	
		
			
				|  |  | +							download: false,
 | 
	
		
			
				|  |  | +						},
 | 
	
		
			
				|  |  | +					},
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				colors: ["#B2B0D2"],
 | 
	
		
			
				|  |  | +				dataLabels: {
 | 
	
		
			
				|  |  | +					enabled: true,
 | 
	
		
			
				|  |  | +					offsetX: -6,
 | 
	
		
			
				|  |  | +					style: {
 | 
	
		
			
				|  |  | +						fontSize: "12px",
 | 
	
		
			
				|  |  | +						colors: ["#333333"],
 | 
	
		
			
				|  |  | +					},
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				stroke: {
 | 
	
		
			
				|  |  | +					show: true,
 | 
	
		
			
				|  |  | +					width: 1,
 | 
	
		
			
				|  |  | +					colors: ["#fff"],
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				tooltip: {
 | 
	
		
			
				|  |  | +					shared: true,
 | 
	
		
			
				|  |  | +					intersect: false,
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				xaxis: {
 | 
	
		
			
				|  |  | +					categories: ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"],
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +		};
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    this.state = {
 | 
	
		
			
				|  |  | -      series: [
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          data: [
 | 
	
		
			
				|  |  | -            44, 55, 41, 64, 22, 43, 21, 44, 42, 67, 43, 86, 42, 99, 131, 313,
 | 
	
		
			
				|  |  | -          ],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -      ],
 | 
	
		
			
				|  |  | -      options: {
 | 
	
		
			
				|  |  | -        chart: {
 | 
	
		
			
				|  |  | -          type: "bar",
 | 
	
		
			
				|  |  | -          height: 430,
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        plotOptions: {
 | 
	
		
			
				|  |  | -          bar: {
 | 
	
		
			
				|  |  | -            horizontal: true,
 | 
	
		
			
				|  |  | -            dataLabels: {
 | 
	
		
			
				|  |  | -              position: "top",
 | 
	
		
			
				|  |  | -            },
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        chart: {
 | 
	
		
			
				|  |  | -          toolbar: {
 | 
	
		
			
				|  |  | -            show: true,
 | 
	
		
			
				|  |  | -            tools: {
 | 
	
		
			
				|  |  | -              download: false,
 | 
	
		
			
				|  |  | -            },
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        colors: ["#B2B0D2"],
 | 
	
		
			
				|  |  | -        dataLabels: {
 | 
	
		
			
				|  |  | -          enabled: true,
 | 
	
		
			
				|  |  | -          offsetX: -6,
 | 
	
		
			
				|  |  | -          style: {
 | 
	
		
			
				|  |  | -            fontSize: "12px",
 | 
	
		
			
				|  |  | -            colors: ["#333333"],
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        stroke: {
 | 
	
		
			
				|  |  | -          show: true,
 | 
	
		
			
				|  |  | -          width: 1,
 | 
	
		
			
				|  |  | -          colors: ["#fff"],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        tooltip: {
 | 
	
		
			
				|  |  | -          shared: true,
 | 
	
		
			
				|  |  | -          intersect: false,
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        xaxis: {
 | 
	
		
			
				|  |  | -          categories: [
 | 
	
		
			
				|  |  | -            "I",
 | 
	
		
			
				|  |  | -            "II",
 | 
	
		
			
				|  |  | -            "III",
 | 
	
		
			
				|  |  | -            "IV",
 | 
	
		
			
				|  |  | -            "V",
 | 
	
		
			
				|  |  | -            "VI",
 | 
	
		
			
				|  |  | -            "VII",
 | 
	
		
			
				|  |  | -            "VIII",
 | 
	
		
			
				|  |  | -            "IX",
 | 
	
		
			
				|  |  | -            "X",
 | 
	
		
			
				|  |  | -            "XI",
 | 
	
		
			
				|  |  | -            "XII",
 | 
	
		
			
				|  |  | -            "XIII",
 | 
	
		
			
				|  |  | -            "XIV",
 | 
	
		
			
				|  |  | -            "XV",
 | 
	
		
			
				|  |  | -            "XVI",
 | 
	
		
			
				|  |  | -          ],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | +	async componentDidMount() {
 | 
	
		
			
				|  |  | +		const { token } = this.props;
 | 
	
		
			
				|  |  | +		const data = await jumlahLaporan(token);
 | 
	
		
			
				|  |  | +		console.log(data.data);
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  render() {
 | 
	
		
			
				|  |  | -    return (
 | 
	
		
			
				|  |  | -      <div id="chart">
 | 
	
		
			
				|  |  | -        <ReactApexChart
 | 
	
		
			
				|  |  | -          options={this.state.options}
 | 
	
		
			
				|  |  | -          series={this.state.series}
 | 
	
		
			
				|  |  | -          type="bar"
 | 
	
		
			
				|  |  | -          height={430}
 | 
	
		
			
				|  |  | -        />
 | 
	
		
			
				|  |  | -      </div>
 | 
	
		
			
				|  |  | -    );
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | +	render() {
 | 
	
		
			
				|  |  | +		return (
 | 
	
		
			
				|  |  | +			<div id="chart">
 | 
	
		
			
				|  |  | +				<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430} />
 | 
	
		
			
				|  |  | +			</div>
 | 
	
		
			
				|  |  | +		);
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | -export default ChartDataBar;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const MapStateToProps = (state) => ({ token: state.token });
 | 
	
		
			
				|  |  | +export default connect(MapStateToProps)(ChartDataBar);
 |