46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
// ** Custom Components
|
|
import Avatar from '@components/avatar'
|
|
|
|
// ** Third Party Components
|
|
import PropTypes from 'prop-types'
|
|
import Chart from 'react-apexcharts'
|
|
import { Card, CardHeader, CardText } from 'reactstrap'
|
|
|
|
// ** Default Options
|
|
import { lineChartOptions } from './ChartOptions'
|
|
|
|
const StatsWithLineChart = ({ icon, color, stats, statTitle, series, options, type, height, ...rest }) => {
|
|
return (
|
|
<Card {...rest}>
|
|
<CardHeader className='align-items-start pb-0'>
|
|
<div>
|
|
<h2 className='font-weight-bolder'>{stats}</h2>
|
|
<CardText>{statTitle}</CardText>
|
|
</div>
|
|
<Avatar className='avatar-stats p-50 m-0' color={`light-${color}`} icon={icon} />
|
|
</CardHeader>
|
|
<Chart options={options} series={series} type={type} height={height ? height : 100} />
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default StatsWithLineChart
|
|
|
|
// ** PropTypes
|
|
StatsWithLineChart.propTypes = {
|
|
icon: PropTypes.element.isRequired,
|
|
color: PropTypes.string.isRequired,
|
|
stats: PropTypes.string.isRequired,
|
|
statTitle: PropTypes.string.isRequired,
|
|
options: PropTypes.object,
|
|
series: PropTypes.array.isRequired,
|
|
type: PropTypes.string,
|
|
height: PropTypes.string
|
|
}
|
|
|
|
// ** Default Props
|
|
StatsWithLineChart.defaultProps = {
|
|
options: lineChartOptions,
|
|
color: 'primary'
|
|
}
|