136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
// Next Imports
|
|
import dynamic from 'next/dynamic'
|
|
|
|
// MUI Imports
|
|
import Card from '@mui/material/Card'
|
|
import CardHeader from '@mui/material/CardHeader'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Typography from '@mui/material/Typography'
|
|
import { useTheme } from '@mui/material/styles'
|
|
|
|
// Third Party Imports
|
|
import classnames from 'classnames'
|
|
import type { ApexOptions } from 'apexcharts'
|
|
|
|
// Types Imports
|
|
import type { ThemeColor } from '@core/types'
|
|
|
|
// Components Imports
|
|
import OptionMenu from '@core/components/option-menu'
|
|
import CustomAvatar from '@core/components/mui/Avatar'
|
|
|
|
// Styled Component Imports
|
|
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
|
|
|
type AlertStatType = {
|
|
title: string
|
|
count: string
|
|
avatarIcon: string
|
|
avatarColor?: ThemeColor
|
|
}
|
|
|
|
interface FarmAlertsTrackerProps {
|
|
data?: Record<string, unknown>
|
|
}
|
|
|
|
const FarmAlertsTracker = ({ data }: FarmAlertsTrackerProps) => {
|
|
const alertStats = (data?.alertStats as AlertStatType[] | undefined) ?? []
|
|
const totalAlerts = (data?.totalAlerts as number | undefined) ?? 0
|
|
const radialBarValue = (data?.radialBarValue as number | undefined) ?? 30
|
|
const theme = useTheme()
|
|
const disabledText = 'var(--mui-palette-text-disabled)'
|
|
|
|
const options: ApexOptions = {
|
|
stroke: { dashArray: 10 },
|
|
labels: ['Active Alerts'],
|
|
colors: ['var(--mui-palette-warning-main)'],
|
|
states: {
|
|
hover: { filter: { type: 'none' } },
|
|
active: { filter: { type: 'none' } }
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
opacityTo: 0.5,
|
|
opacityFrom: 1,
|
|
shadeIntensity: 0.5,
|
|
stops: [30, 70, 100],
|
|
inverseColors: false,
|
|
gradientToColors: ['var(--mui-palette-warning-main)']
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
endAngle: 130,
|
|
startAngle: -140,
|
|
hollow: { size: '60%' },
|
|
track: { background: 'transparent' },
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: -24,
|
|
color: disabledText,
|
|
fontFamily: theme.typography.fontFamily,
|
|
fontSize: theme.typography.body2.fontSize as string
|
|
},
|
|
value: {
|
|
offsetY: 8,
|
|
fontWeight: 500,
|
|
formatter: () => String(totalAlerts),
|
|
color: 'var(--mui-palette-text-primary)',
|
|
fontFamily: theme.typography.fontFamily,
|
|
fontSize: theme.typography.h2.fontSize as string
|
|
}
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
padding: { top: -18, left: 0, right: 0, bottom: 14 }
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
title='Active Alerts'
|
|
subheader='Requires Attention'
|
|
action={<OptionMenu options={['View All', 'Dismiss', 'Settings']} />}
|
|
/>
|
|
<CardContent className='flex flex-col sm:flex-row items-center justify-between gap-7'>
|
|
<div className='flex flex-col gap-6 is-full sm:is-[unset]'>
|
|
<div className='flex flex-col'>
|
|
<Typography variant='h2'>{totalAlerts}</Typography>
|
|
<Typography>Total Alerts</Typography>
|
|
</div>
|
|
<div className='flex flex-col gap-4 is-full'>
|
|
{alertStats.map((item, index) => (
|
|
<div key={index} className='flex items-center gap-4'>
|
|
<CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
|
|
<i className={classnames(item.avatarIcon, 'text-[22px]')} />
|
|
</CustomAvatar>
|
|
<div className='flex flex-col'>
|
|
<Typography className='font-medium' color='text.primary'>
|
|
{item.title}
|
|
</Typography>
|
|
<Typography variant='body2'>{item.count}</Typography>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<AppReactApexCharts
|
|
type='radialBar'
|
|
height={350}
|
|
width='100%'
|
|
series={[radialBarValue]}
|
|
options={options}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default FarmAlertsTracker
|