158 lines
3.2 KiB
TypeScript
158 lines
3.2 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'
|
|
|
|
// Third Party Imports
|
|
import type { ApexOptions } from 'apexcharts'
|
|
|
|
// Components Imports
|
|
import OptionMenu from '@core/components/option-menu'
|
|
|
|
// Styled Component Imports
|
|
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
|
|
|
// Styles Imports
|
|
import './styles.css'
|
|
|
|
// Vars
|
|
const colors = {
|
|
tagihan: '#28C76F',
|
|
pembayaran: '#EA5455'
|
|
}
|
|
|
|
const labelColor = 'var(--mui-palette-text-disabled)'
|
|
const bodyColor = 'var(--mui-palette-text-secondary)'
|
|
const borderColor = 'var(--mui-palette-divider)'
|
|
|
|
const series = [
|
|
{
|
|
name: 'Tagihan',
|
|
type: 'column',
|
|
data: [1250, 1180, 1350, 1450, 1200, 1520, 1380, 1150, 1650, 1400, 1290, 1700]
|
|
},
|
|
{
|
|
name: 'Pembayaran',
|
|
type: 'column',
|
|
data: [950, 880, 1050, 1150, 900, 1220, 1080, 850, 1350, 1100, 990, 1400]
|
|
}
|
|
]
|
|
|
|
const SalesBillPaymentChart = () => {
|
|
const options: ApexOptions = {
|
|
chart: {
|
|
parentHeightOffset: 0,
|
|
stacked: false,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
y: {
|
|
formatter: function (val) {
|
|
return 'Rp ' + val.toLocaleString('id-ID') + '.000'
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '60%',
|
|
borderRadius: 4
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickAmount: 5,
|
|
max: 1800,
|
|
min: 0,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400
|
|
},
|
|
formatter(val: number) {
|
|
return 'Rp ' + val + 'rb'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
markers: {
|
|
width: 8,
|
|
height: 8,
|
|
offsetX: -3,
|
|
radius: 12
|
|
},
|
|
height: 33,
|
|
offsetY: 10,
|
|
itemMargin: {
|
|
horizontal: 10,
|
|
vertical: 0
|
|
},
|
|
fontSize: '13px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400,
|
|
labels: {
|
|
colors: bodyColor,
|
|
useSeriesColors: false
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor,
|
|
strokeDashArray: 6
|
|
},
|
|
colors: [colors.tagihan, colors.pembayaran],
|
|
fill: {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className='mt-5'>
|
|
<CardHeader title='Tagihan & Pembayaran' action={<OptionMenu options={['View More', 'Delete']} />} />
|
|
<CardContent>
|
|
<AppReactApexCharts
|
|
id='tagihan-pembayaran'
|
|
type='bar'
|
|
height={360}
|
|
width='100%'
|
|
series={series}
|
|
options={options}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default SalesBillPaymentChart
|