text: import React from "react";
  import { Bar } from "react-chartjs-2";
  import { connect } from "react-redux";
  
  import {
    Card,
    CardBody,
    CardHeader,
    CardTitle,
    DropdownItem,
    DropdownMenu,
    DropdownToggle,
    UncontrolledDropdown
  } from "reactstrap";
  
  import { MoreHorizontal } from "react-feather";
  
  const BarChart = ({ theme }) => {
    const data = {
      labels: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      datasets: [
        {
          label: "Last year",
          backgroundColor: theme.primary,
          borderColor: theme.primary,
          hoverBackgroundColor: theme.primary,
          hoverBorderColor: theme.primary,
          data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79]
        },
        {
          label: "This year",
          backgroundColor: "#E8EAED",
          borderColor: "#E8EAED",
          hoverBackgroundColor: "#E8EAED",
          hoverBorderColor: "#E8EAED",
          data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68]
        }
      ]
    };
  
    const options = {
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        yAxes: [
          {
            gridLines: {
              display: false
            },
            stacked: false,
            ticks: {
              stepSize: 20
            }
          }
        ],
        xAxes: [
          {
            barPercentage: 0.75,
            categoryPercentage: 0.5,
            stacked: false,
            gridLines: {
              color: "transparent"
            }
          }
        ]
      }
    };
  
    return (
      <Card className="flex-fill w-100">
        <CardHeader>
          <div className="card-actions float-right">
            <UncontrolledDropdown>
              <DropdownToggle tag="a">
                <MoreHorizontal />
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>Action</DropdownItem>
                <DropdownItem>Another Action</DropdownItem>
                <DropdownItem>Something else here</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </div>
          <CardTitle tag="h5" className="mb-0">
            Mobile / Desktop
          </CardTitle>
        </CardHeader>
        <CardBody className="d-flex">
          <div className="align-self-center w-100">
            <div className="chart">
              <Bar data={data} options={options} />
            </div>
          </div>
        </CardBody>
      </Card>
    );
  };
  
  export default connect(store => ({
    theme: store.theme.currentTheme
  }))(BarChart);
  