text: import React, { Fragment, useContext } from 'react';
  import PropTypes from 'prop-types';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { Badge, Card, CardBody, Col, Row, UncontrolledTooltip } from 'reactstrap';
  import FalconCardHeader from '../common/FalconCardHeader';
  import Flex from '../common/Flex';
  import ReactEchartsCore from 'echarts-for-react/lib/core';
  import * as echarts from 'echarts/lib/echarts';
  import { themeColors, getPosition, numberFormatter, getGrays } from '../../helpers/utils';
  
  import { BarChart } from 'echarts/charts';
  import { TooltipComponent } from 'echarts/components';
  import AppContext from '../../context/Context';
  
  echarts.use([BarChart, TooltipComponent]);
  const getOption = (data, dataBackground, isDark) => {
    const grays = getGrays(isDark);
    return {
      tooltip: {
        trigger: 'axis',
        padding: [7, 10],
        formatter: '{b1}: {c1}',
        backgroundColor: grays.white,
        borderColor: grays['300'],
        borderWidth: 1,
        textStyle: { color: themeColors.dark },
        transitionDuration: 0,
        position(pos, params, dom, rect, size) {
          return getPosition(pos, params, dom, rect, size);
        }
      },
      xAxis: {
        type: 'category',
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        boundaryGap: false,
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisPointer: { type: 'none' }
      },
      yAxis: {
        type: 'value',
        splitLine: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisPointer: { type: 'none' }
      },
      series: [
        {
          type: 'bar',
          barWidth: '5px',
          barGap: '-100%',
          itemStyle: {
            color: grays['200'],
            barBorderRadius: 10
          },
          data: dataBackground,
          animation: false,
          emphasis: { itemStyle: { color: grays['200'] } }
        },
        {
          type: 'bar',
          barWidth: '5px',
          itemStyle: {
            color: themeColors.primary,
            barBorderRadius: 10
          },
          data: data,
          emphasis: { itemStyle: { color: themeColors.primary } },
          z: 10
        }
      ],
      grid: { right: 5, left: 10, top: 0, bottom: 0 }
    };
  };
  
  const WeeklySales = ({ data }) => {
    const { currency, isDark } = useContext(AppContext);
    const total = data.reduce((total, currentValue) => total + currentValue, 0);
    // Max value of data
    const yMax = Math.max(...data);
    const dataBackground = data.map(() => yMax);
  
    return (
      <Card className="h-md-100">
        <FalconCardHeader
          className="pb-0"
          title={
            <Fragment>
              Weekly Sales{' '}
              <FontAwesomeIcon
                icon={['far', 'question-circle']}
                transform="shrink-1"
                className="text-400"
                id="weeklySalesTooltip"
              />
              <UncontrolledTooltip placement="bottom" target="weeklySalesTooltip">
                Calculated according to last week's sales
              </UncontrolledTooltip>
            </Fragment>
          }
          light={false}
          titleTag="h6"
        />
        <CardBody tag={Flex} align="end">
          <Row className="flex-grow-1">
            <Col>
              <div className="fs-4 font-weight-normal text-sans-serif text-700 line-height-1 mb-1">
                {currency}
                {numberFormatter(total, 0)}
              </div>
              <Badge pill color="soft-success" className="fs--2">
                +3.5%
              </Badge>
            </Col>
            <Col xs="auto" className="pl-0">
              <ReactEchartsCore
                echarts={echarts}
                option={getOption(data, dataBackground, isDark)}
                style={{ width: '8.5rem', height: '100%' }}
              />
            </Col>
          </Row>
        </CardBody>
      </Card>
    );
  };
  
  WeeklySales.propTypes = { data: PropTypes.array.isRequired };
  
  export default WeeklySales;
  