|
@@ -1,96 +1,81 @@
|
|
|
import React, { Component } from "react";
|
|
import React, { Component } from "react";
|
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
|
|
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
|
|
|
-
|
|
|
|
|
|
|
+import { connect } from "react-redux";
|
|
|
|
|
+import { jumlahLaporan } from "@/actions/pelaporan";
|
|
|
import dynamic from "next/dynamic";
|
|
import dynamic from "next/dynamic";
|
|
|
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
|
|
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
|
|
|
|
|
|
|
|
class ChartDataBar extends React.Component {
|
|
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);
|