133 lines
3.9 KiB
Python
133 lines
3.9 KiB
Python
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;
|