PTB-fe/components/Main/ChartdataHome.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";

import Sparkline from "@/components/Common/Sparklines.js";
import FlotChart from "@/components/Charts/Flot.js";
import { connect } from "react-redux";
import { getPengunjung } from "@/actions/pengunjung";
class ChartdataHome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataPengunjung: [],
    };
  }

  ChartSpline = {
    data: [
      {
        // label: "Uniques",
        color: "#3e3a8e",
        data: [
          ["1", 20],
          ["10", 90],
          ["20", 40],
          ["30", 60],
        ],
      },
    ],

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

  render() {
    console.log(this.state.dataPengunjung);
    return (
      <Col lg={12}>
        <Card>
          <CardBody>
            <FlotChart
              options={this.ChartSpline.options}
              data={this.ChartSpline.data}
              className="flot-chart"
              height="150px"
              width="350px"
            />
          </CardBody>
          <div align="center">
            <h5 className="font-weight-bold">Data Statistik Pengunjung Bulan<span> Juli</span></h5>
          </div>
        </Card>
      </Col>
    );
  }
}

const mapStateToProps = (state) => ({ token: state.token });
export default connect(mapStateToProps)(ChartdataHome);