PTB-fe/components/Riwayat/ChartData.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";

const ChartSpline = {
  data: [
    {
      // label: "Uniques",
      color: "#3e3a8e",
      data: [
        ["Jan", 20],
        ["Feb", 90],
        ["Mar", 40],
        ["Apr", 85],
        ["Mei", 59],
        ["Jun", 93],
        ["Jul", 66],
        ["Agu", 86],
        ["Sep", 60],
        ["Okt", 70],
        ["Nov", 60],
        ["Des", 30],
      ],
    },
  ],

  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,
  },
};
class ChartData extends Component {
  render() {
    return (
      <Col lg={12}>
        <Card className="card-default">
          <CardBody>
            <FlotChart
              options={ChartSpline.options}
              data={ChartSpline.data}
              className="flot-chart"
              height="250px"
            />
          </CardBody>
          <div align="center">
            <span>Data Statistik Pengunjung Tahun 2022</span>
          </div>
        </Card>
      </Col>
    );
  }
}
export default ChartData;