// ** MUI Imports import Card from '@mui/material/Card' import Button from '@mui/material/Button' import Divider from '@mui/material/Divider' import CardHeader from '@mui/material/CardHeader' import Typography from '@mui/material/Typography' import CardContent from '@mui/material/CardContent' import Grid, { GridProps } from '@mui/material/Grid' import { styled, useTheme } from '@mui/material/styles' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Third Party Imports import { ApexOptions } from 'apexcharts' // ** Custom Components Imports import CustomAvatar from 'src/@core/components/mui/avatar' import OptionsMenu from 'src/@core/components/option-menu' import ReactApexcharts from 'src/@core/components/react-apexcharts' // ** Util Import import { hexToRGBA } from 'src/@core/utils/hex-to-rgba' const series = [ { name: 'Last Week', data: [83, 153, 213, 279, 213, 153, 83] }, { name: 'This Week', data: [-84, -156, -216, -282, -216, -156, -84] } ] // Styled Grid component const StyledGrid = styled(Grid)(({ theme }) => ({ [theme.breakpoints.down('sm')]: { borderBottom: `1px solid ${theme.palette.divider}` }, [theme.breakpoints.up('sm')]: { borderRight: `1px solid ${theme.palette.divider}` } })) const AnalyticsTotalTransactions = () => { // ** Hook const theme = useTheme() const options: ApexOptions = { chart: { stacked: true, parentHeightOffset: 0, toolbar: { show: false } }, plotOptions: { bar: { borderRadius: 5, barHeight: '30%', horizontal: true, endingShape: 'flat', startingShape: 'rounded' } }, tooltip: { y: { formatter: val => `${Math.abs(val)}` } }, xaxis: { position: 'top', axisTicks: { show: false }, axisBorder: { show: false }, categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], labels: { formatter: val => `${Math.abs(Number(val))}`, style: { colors: theme.palette.text.disabled } } }, yaxis: { labels: { show: false } }, colors: [hexToRGBA(theme.palette.primary.main, 1), hexToRGBA(theme.palette.success.main, 1)], grid: { borderColor: theme.palette.divider, xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } }, padding: { top: 5, bottom: -25 } }, legend: { show: false }, dataLabels: { enabled: false }, states: { hover: { filter: { type: 'none' } }, active: { filter: { type: 'none' } } } } return ( } /> `${theme.spacing(6)} !important` }}> `1px solid ${theme.palette.divider}` }} > This Week +82.45% Last Week -24.86% `${theme.spacing(10)} !important`, mb: theme => `${theme.spacing(7.5)} !important` }} /> Performance +94.15% ) } export default AnalyticsTotalTransactions