initial commit
This commit is contained in:
ferdiansyah783
@@ -0,0 +1,133 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const areaColors = {
|
||||
series1: '#ab7efd',
|
||||
series2: '#b992fe',
|
||||
series3: '#e0cffe'
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Visits',
|
||||
data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180, 270, 280, 375]
|
||||
},
|
||||
{
|
||||
name: 'Clicks',
|
||||
data: [60, 80, 70, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275]
|
||||
},
|
||||
{
|
||||
name: 'Sales',
|
||||
data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100, 140, 180, 220]
|
||||
}
|
||||
]
|
||||
|
||||
const ApexAreaChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const textDisabled = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
tooltip: { shared: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
show: false,
|
||||
curve: 'straight'
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
labels: { colors: 'var(--mui-palette-text-secondary)' },
|
||||
fontSize: '13px',
|
||||
markers: {
|
||||
offsetY: 2,
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4
|
||||
},
|
||||
itemMargin: { horizontal: 9 }
|
||||
},
|
||||
colors: [areaColors.series3, areaColors.series2, areaColors.series1],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
type: 'solid'
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: divider,
|
||||
xaxis: {
|
||||
lines: { show: true }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: textDisabled, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: divider },
|
||||
crosshairs: {
|
||||
stroke: { color: divider }
|
||||
},
|
||||
labels: {
|
||||
style: { colors: textDisabled, fontSize: '13px' }
|
||||
},
|
||||
categories: [
|
||||
'7/12',
|
||||
'8/12',
|
||||
'9/12',
|
||||
'10/12',
|
||||
'11/12',
|
||||
'12/12',
|
||||
'13/12',
|
||||
'14/12',
|
||||
'15/12',
|
||||
'16/12',
|
||||
'17/12',
|
||||
'18/12',
|
||||
'19/12'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Line Chart'
|
||||
subheader='Commercial networks'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='area' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexAreaChart
|
||||
@@ -0,0 +1,85 @@
|
||||
// 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'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
const ApexBarChart = () => {
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const disabledText = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
colors: ['#00cfe8'],
|
||||
dataLabels: { enabled: false },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
barHeight: '30%',
|
||||
horizontal: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: divider,
|
||||
xaxis: {
|
||||
lines: { show: false }
|
||||
},
|
||||
padding: {
|
||||
top: -10
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: disabledText, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: divider },
|
||||
categories: ['MON, 11', 'THU, 14', 'FRI, 15', 'MON, 18', 'WED, 20', 'FRI, 21', 'MON, 23'],
|
||||
labels: {
|
||||
style: { colors: disabledText, fontSize: '13px' }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Data Science'
|
||||
subheader='$74,382.72'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts
|
||||
type='bar'
|
||||
width='100%'
|
||||
height={400}
|
||||
options={options}
|
||||
series={[{ data: [700, 350, 480, 600, 210, 550, 150] }]}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexBarChart
|
||||
@@ -0,0 +1,158 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const candlestickColors = {
|
||||
series1: '#28c76f',
|
||||
series2: '#ea5455'
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: `7/12/${new Date().getFullYear()}`,
|
||||
y: [150, 170, 50, 100]
|
||||
},
|
||||
{
|
||||
x: `8/12/${new Date().getFullYear()}`,
|
||||
y: [200, 400, 170, 330]
|
||||
},
|
||||
{
|
||||
x: `9/12/${new Date().getFullYear()}`,
|
||||
y: [330, 340, 250, 280]
|
||||
},
|
||||
{
|
||||
x: `10/12/${new Date().getFullYear()}`,
|
||||
y: [300, 330, 200, 320]
|
||||
},
|
||||
{
|
||||
x: `11/12/${new Date().getFullYear()}`,
|
||||
y: [320, 450, 280, 350]
|
||||
},
|
||||
{
|
||||
x: `12/12/${new Date().getFullYear()}`,
|
||||
y: [300, 350, 80, 250]
|
||||
},
|
||||
{
|
||||
x: `13/12/${new Date().getFullYear()}`,
|
||||
y: [200, 330, 170, 300]
|
||||
},
|
||||
{
|
||||
x: `14/12/${new Date().getFullYear()}`,
|
||||
y: [200, 220, 70, 130]
|
||||
},
|
||||
{
|
||||
x: `15/12/${new Date().getFullYear()}`,
|
||||
y: [220, 270, 180, 250]
|
||||
},
|
||||
{
|
||||
x: `16/12/${new Date().getFullYear()}`,
|
||||
y: [200, 250, 80, 100]
|
||||
},
|
||||
{
|
||||
x: `17/12/${new Date().getFullYear()}`,
|
||||
y: [150, 170, 50, 120]
|
||||
},
|
||||
{
|
||||
x: `18/12/${new Date().getFullYear()}`,
|
||||
y: [110, 450, 10, 420]
|
||||
},
|
||||
{
|
||||
x: `19/12/${new Date().getFullYear()}`,
|
||||
y: [400, 480, 300, 320]
|
||||
},
|
||||
{
|
||||
x: `20/12/${new Date().getFullYear()}`,
|
||||
y: [380, 480, 350, 450]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const ApexCandlestickChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const disabledText = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
offsetX: theme.direction === 'rtl' ? 10 : -10
|
||||
},
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '40%' },
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: candlestickColors.series1,
|
||||
downward: candlestickColors.series2
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: { top: -10 },
|
||||
borderColor: divider,
|
||||
xaxis: {
|
||||
lines: { show: true }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: { enabled: true },
|
||||
crosshairs: {
|
||||
stroke: { color: divider }
|
||||
},
|
||||
labels: {
|
||||
style: { colors: disabledText, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: divider },
|
||||
crosshairs: {
|
||||
stroke: { color: divider }
|
||||
},
|
||||
labels: {
|
||||
style: { colors: disabledText, fontSize: '13px' }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Stocks Prices'
|
||||
subheader='$50,863.98'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='candlestick' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexCandlestickChart
|
||||
@@ -0,0 +1,135 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const columnColors = {
|
||||
bg: '#f8d3ff',
|
||||
series1: '#826af9',
|
||||
series2: '#d2b0ff'
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Apple',
|
||||
data: [90, 120, 55, 100, 80, 125, 175, 70, 88]
|
||||
},
|
||||
{
|
||||
name: 'Samsung',
|
||||
data: [85, 100, 30, 40, 95, 90, 30, 110, 62]
|
||||
}
|
||||
]
|
||||
|
||||
const ApexColumnChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const textDisabled = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
offsetX: -10,
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
fill: { opacity: 1 },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [columnColors.series1, columnColors.series2],
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
fontSize: '13px',
|
||||
labels: { colors: 'var(--mui-palette-text-secondary)' },
|
||||
markers: {
|
||||
offsetY: 2,
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4,
|
||||
radius: 12
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 9
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
colors: ['transparent']
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
colors: {
|
||||
backgroundBarRadius: 10,
|
||||
backgroundBarColors: [columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg]
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: divider,
|
||||
xaxis: {
|
||||
lines: { show: true }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: textDisabled, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: divider },
|
||||
categories: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12'],
|
||||
crosshairs: {
|
||||
stroke: { color: divider }
|
||||
},
|
||||
labels: {
|
||||
style: { colors: textDisabled, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Data Science'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='bar' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexColumnChart
|
||||
@@ -0,0 +1,128 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const donutColors = {
|
||||
series1: '#fdd835',
|
||||
series2: '#00d4bd',
|
||||
series3: '#826bf8',
|
||||
series4: '#32baff',
|
||||
series5: '#ffa1a1'
|
||||
}
|
||||
|
||||
const ApexDonutChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const textSecondary = 'var(--mui-palette-text-secondary)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
stroke: { width: 0 },
|
||||
labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
|
||||
colors: [donutColors.series1, donutColors.series5, donutColors.series3, donutColors.series2],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val: string) => `${parseInt(val, 10)}%`
|
||||
},
|
||||
legend: {
|
||||
fontSize: '13px',
|
||||
position: 'bottom',
|
||||
markers: {
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4
|
||||
},
|
||||
labels: { colors: textSecondary },
|
||||
itemMargin: {
|
||||
horizontal: 9
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
fontSize: '1.2rem'
|
||||
},
|
||||
value: {
|
||||
fontSize: '1.2rem',
|
||||
color: textSecondary,
|
||||
formatter: (val: string) => `${parseInt(val, 10)}`
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '1.2rem',
|
||||
label: 'Operational',
|
||||
formatter: () => '31%',
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
chart: {
|
||||
height: 380
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
chart: {
|
||||
height: 320
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
fontSize: '1rem'
|
||||
},
|
||||
value: {
|
||||
fontSize: '1rem'
|
||||
},
|
||||
total: {
|
||||
fontSize: '1rem'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Expense Ratio' subheader='Spending on various categories' />
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='donut' width='100%' height={400} options={options} series={[85, 16, 50, 50]} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexDonutChart
|
||||
@@ -0,0 +1,140 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
type YRange = {
|
||||
min: number
|
||||
max: number
|
||||
}
|
||||
|
||||
const generateDataHeat = (count: number, yrange: YRange) => {
|
||||
let i = 0
|
||||
const series = []
|
||||
|
||||
while (i < count) {
|
||||
const x = `w${(i + 1).toString()}`
|
||||
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
|
||||
|
||||
series.push({
|
||||
x,
|
||||
y
|
||||
})
|
||||
i += 1
|
||||
}
|
||||
|
||||
return series
|
||||
}
|
||||
|
||||
// Vars
|
||||
const series = [
|
||||
{
|
||||
name: 'SUN',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
},
|
||||
{
|
||||
name: 'MON',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
},
|
||||
{
|
||||
name: 'TUE',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
},
|
||||
{
|
||||
name: 'WED',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
},
|
||||
{
|
||||
name: 'THU',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
},
|
||||
{
|
||||
name: 'FRI',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
},
|
||||
{
|
||||
name: 'SAT',
|
||||
data: generateDataHeat(24, { min: 0, max: 60 })
|
||||
}
|
||||
]
|
||||
|
||||
const ApexHeatmapChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
colors: 'var(--mui-palette-text-secondary)'
|
||||
},
|
||||
markers: {
|
||||
offsetY: 0,
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 9
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
enableShades: false,
|
||||
colorScale: {
|
||||
ranges: [
|
||||
{ to: 10, from: 0, name: '0-10', color: '#b9b3f8' },
|
||||
{ to: 20, from: 11, name: '10-20', color: '#aba4f6' },
|
||||
{ to: 30, from: 21, name: '20-30', color: '#9d95f5' },
|
||||
{ to: 40, from: 31, name: '30-40', color: '#8f85f3' },
|
||||
{ to: 50, from: 41, name: '40-50', color: '#8176f2' },
|
||||
{ to: 60, from: 51, name: '50-60', color: '#7367f0' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: { top: -20 }
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: 'var(--mui-palette-text-disabled)',
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false }
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Daily Sales States' />
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='heatmap' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexHeatmapChart
|
||||
@@ -0,0 +1,111 @@
|
||||
'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'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const series = [
|
||||
{
|
||||
data: [280, 200, 220, 180, 270, 250, 70, 90, 200, 150, 160, 100, 150, 100, 50]
|
||||
}
|
||||
]
|
||||
|
||||
const ApexLineChart = () => {
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const disabledText = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
zoom: { enabled: false },
|
||||
toolbar: { show: false }
|
||||
},
|
||||
colors: ['#ff9f43'],
|
||||
stroke: { curve: 'straight' },
|
||||
dataLabels: { enabled: false },
|
||||
markers: {
|
||||
strokeWidth: 7,
|
||||
strokeOpacity: 1,
|
||||
colors: ['#ff9f43'],
|
||||
strokeColors: ['#fff']
|
||||
},
|
||||
grid: {
|
||||
padding: { top: -10 },
|
||||
borderColor: divider,
|
||||
xaxis: {
|
||||
lines: { show: true }
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
custom(data: any) {
|
||||
return `<div class='bar-chart'>
|
||||
<span>${data.series[data.seriesIndex][data.dataPointIndex]}%</span>
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: disabledText, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: divider },
|
||||
crosshairs: {
|
||||
stroke: { color: divider }
|
||||
},
|
||||
labels: {
|
||||
style: { colors: disabledText, fontSize: '13px' }
|
||||
},
|
||||
categories: [
|
||||
'7/12',
|
||||
'8/12',
|
||||
'9/12',
|
||||
'10/12',
|
||||
'11/12',
|
||||
'12/12',
|
||||
'13/12',
|
||||
'14/12',
|
||||
'15/12',
|
||||
'16/12',
|
||||
'17/12',
|
||||
'18/12',
|
||||
'19/12',
|
||||
'20/12',
|
||||
'21/12'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Balance'
|
||||
subheader='Commercial networks & enterprises'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='line' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexLineChart
|
||||
@@ -0,0 +1,120 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const radarColors = {
|
||||
series1: '#9b88fa',
|
||||
series2: '#ffa1a1'
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'iPhone 12',
|
||||
data: [41, 64, 81, 60, 42, 42, 33, 23]
|
||||
},
|
||||
{
|
||||
name: 'Samsung s20',
|
||||
data: [65, 46, 42, 25, 58, 63, 76, 43]
|
||||
}
|
||||
]
|
||||
|
||||
const ApexRadarChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const textDisabled = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
dropShadow: {
|
||||
top: 1,
|
||||
blur: 8,
|
||||
left: 1,
|
||||
opacity: 0.2,
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
markers: { size: 0 },
|
||||
fill: { opacity: [1, 0.8] },
|
||||
colors: [radarColors.series1, radarColors.series2],
|
||||
stroke: {
|
||||
width: 0,
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
fontSize: '13px',
|
||||
labels: {
|
||||
colors: 'var(--mui-palette-text-secondary)'
|
||||
},
|
||||
markers: {
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 9
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: divider,
|
||||
connectorColors: divider
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -20
|
||||
}
|
||||
},
|
||||
yaxis: { show: false },
|
||||
xaxis: {
|
||||
categories: ['Battery', 'Brand', 'Camera', 'Memory', 'Storage', 'Display', 'OS', 'Price'],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: [
|
||||
textDisabled,
|
||||
textDisabled,
|
||||
textDisabled,
|
||||
textDisabled,
|
||||
textDisabled,
|
||||
textDisabled,
|
||||
textDisabled,
|
||||
textDisabled
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Mobile Comparison' />
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='radar' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexRadarChart
|
||||
@@ -0,0 +1,108 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const radialBarColors = {
|
||||
series1: '#fdd835',
|
||||
series2: '#32baff',
|
||||
series3: '#00d4bd',
|
||||
series4: '#7367f0',
|
||||
series5: '#FFA1A1'
|
||||
}
|
||||
|
||||
const ApexRadialBarChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const textSecondary = 'var(--mui-palette-text-secondary)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
stroke: { lineCap: 'round' },
|
||||
labels: ['Comments', 'Replies', 'Shares'],
|
||||
legend: {
|
||||
show: true,
|
||||
fontSize: '13px',
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
colors: textSecondary
|
||||
},
|
||||
markers: {
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 9
|
||||
}
|
||||
},
|
||||
colors: [radialBarColors.series1, radialBarColors.series2, radialBarColors.series4],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: { size: '30%' },
|
||||
track: {
|
||||
margin: 15,
|
||||
background: 'var(--mui-palette-customColors-trackBg)'
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '2rem'
|
||||
},
|
||||
value: {
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
color: textSecondary
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontWeight: 500,
|
||||
label: 'Comments',
|
||||
fontSize: '1.125rem',
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
formatter: function (w) {
|
||||
const totalValue =
|
||||
w.globals.seriesTotals.reduce((a: any, b: any) => {
|
||||
return a + b
|
||||
}, 0) / w.globals.series.length
|
||||
|
||||
if (totalValue % 1 === 0) {
|
||||
return totalValue + '%'
|
||||
} else {
|
||||
return totalValue.toFixed(2) + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -35,
|
||||
bottom: -30
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Statistics' />
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='radialBar' width='100%' height={400} options={options} series={[80, 50, 35]} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexRadialBarChart
|
||||
@@ -0,0 +1,154 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third-party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const scatterColors = {
|
||||
series1: '#ff9f43',
|
||||
series2: '#7367f0',
|
||||
series3: '#28c76f'
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Angular',
|
||||
data: [
|
||||
{ x: 5.4, y: 170 },
|
||||
{ x: 5.4, y: 100 },
|
||||
{ x: 6.3, y: 170 },
|
||||
{ x: 5.7, y: 140 },
|
||||
{ x: 5.9, y: 130 },
|
||||
{ x: 7.0, y: 150 },
|
||||
{ x: 8.0, y: 120 },
|
||||
{ x: 9.0, y: 170 },
|
||||
{ x: 10.0, y: 190 },
|
||||
{ x: 11.0, y: 220 },
|
||||
{ x: 12.0, y: 170 },
|
||||
{ x: 13.0, y: 230 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Vue',
|
||||
data: [
|
||||
{ x: 14.0, y: 220 },
|
||||
{ x: 15.0, y: 280 },
|
||||
{ x: 16.0, y: 230 },
|
||||
{ x: 18.0, y: 320 },
|
||||
{ x: 17.5, y: 280 },
|
||||
{ x: 19.0, y: 250 },
|
||||
{ x: 20.0, y: 350 },
|
||||
{ x: 20.5, y: 320 },
|
||||
{ x: 20.0, y: 320 },
|
||||
{ x: 19.0, y: 280 },
|
||||
{ x: 17.0, y: 280 },
|
||||
{ x: 22.0, y: 300 },
|
||||
{ x: 18.0, y: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'React',
|
||||
data: [
|
||||
{ x: 14.0, y: 290 },
|
||||
{ x: 13.0, y: 190 },
|
||||
{ x: 20.0, y: 220 },
|
||||
{ x: 21.0, y: 350 },
|
||||
{ x: 21.5, y: 290 },
|
||||
{ x: 22.0, y: 220 },
|
||||
{ x: 23.0, y: 140 },
|
||||
{ x: 19.0, y: 400 },
|
||||
{ x: 20.0, y: 200 },
|
||||
{ x: 22.0, y: 90 },
|
||||
{ x: 20.0, y: 120 }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const ApexScatterChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const divider = 'var(--mui-palette-divider)'
|
||||
const textDisabled = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
zoom: {
|
||||
type: 'xy',
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
markers: {
|
||||
offsetY: 2,
|
||||
offsetX: theme.direction === 'rtl' ? 7 : -4
|
||||
},
|
||||
fontSize: '13px',
|
||||
labels: { colors: 'var(--mui-palette-text-secondary)' },
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10
|
||||
}
|
||||
},
|
||||
colors: [scatterColors.series1, scatterColors.series2, scatterColors.series3],
|
||||
grid: {
|
||||
borderColor: divider,
|
||||
xaxis: {
|
||||
lines: { show: true }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: textDisabled, fontSize: '13px' }
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: divider },
|
||||
crosshairs: {
|
||||
stroke: { color: divider }
|
||||
},
|
||||
labels: {
|
||||
style: { colors: textDisabled, fontSize: '13px' },
|
||||
formatter: (val: string) => parseFloat(val).toFixed(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='New Technologies Data'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts type='scatter' width='100%' height={400} options={options} series={series} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApexScatterChart
|
||||
@@ -0,0 +1,180 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Box from '@mui/material/Box'
|
||||
import Card from '@mui/material/Card'
|
||||
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 { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Component Imports
|
||||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from '@/libs/Recharts'
|
||||
import type { TooltipProps } from '@/libs/Recharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppRecharts = dynamic(() => import('@/libs/styles/AppRecharts'))
|
||||
|
||||
// Vars
|
||||
const data = [
|
||||
{
|
||||
name: '7/12',
|
||||
Sales: 20,
|
||||
Clicks: 60,
|
||||
Visits: 100
|
||||
},
|
||||
{
|
||||
name: '8/12',
|
||||
Sales: 40,
|
||||
Clicks: 80,
|
||||
Visits: 120
|
||||
},
|
||||
{
|
||||
name: '9/12',
|
||||
Sales: 30,
|
||||
Clicks: 70,
|
||||
Visits: 90
|
||||
},
|
||||
{
|
||||
name: '10/12',
|
||||
Sales: 70,
|
||||
Clicks: 110,
|
||||
Visits: 170
|
||||
},
|
||||
{
|
||||
name: '11/12',
|
||||
Sales: 40,
|
||||
Clicks: 80,
|
||||
Visits: 130
|
||||
},
|
||||
{
|
||||
name: '12/12',
|
||||
Sales: 60,
|
||||
Clicks: 80,
|
||||
Visits: 160
|
||||
},
|
||||
{
|
||||
name: '13/12',
|
||||
Sales: 50,
|
||||
Clicks: 100,
|
||||
Visits: 140
|
||||
},
|
||||
{
|
||||
name: '14/12',
|
||||
Sales: 140,
|
||||
Clicks: 90,
|
||||
Visits: 240
|
||||
},
|
||||
{
|
||||
name: '15/12',
|
||||
Sales: 120,
|
||||
Clicks: 180,
|
||||
Visits: 220
|
||||
},
|
||||
{
|
||||
name: '16/12',
|
||||
Sales: 100,
|
||||
Clicks: 160,
|
||||
Visits: 180
|
||||
},
|
||||
{
|
||||
name: '17/12',
|
||||
Sales: 140,
|
||||
Clicks: 140,
|
||||
Visits: 270
|
||||
},
|
||||
{
|
||||
name: '18/12',
|
||||
Sales: 180,
|
||||
Clicks: 200,
|
||||
Visits: 280
|
||||
},
|
||||
{
|
||||
name: '19/12',
|
||||
Sales: 220,
|
||||
Clicks: 220,
|
||||
Visits: 375
|
||||
}
|
||||
]
|
||||
|
||||
const CustomTooltip = (props: TooltipProps<any, any>) => {
|
||||
// Props
|
||||
const { active, payload } = props
|
||||
|
||||
if (active && payload) {
|
||||
return (
|
||||
<div className='recharts-custom-tooltip'>
|
||||
<Typography color='text.primary'>{props.label}</Typography>
|
||||
<Divider />
|
||||
{props &&
|
||||
props.payload &&
|
||||
props.payload.map((i: any) => {
|
||||
return (
|
||||
<Box key={i.dataKey} className='flex items-center gap-2.5' sx={{ '& i': { color: i.fill } }}>
|
||||
<i className='tabler-circle-filled text-[10px]' />
|
||||
<Typography variant='body2'>{`${i.dataKey} : ${i.payload[i.dataKey]}`}</Typography>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const RechartsAreaChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Website Data'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<div className='flex mbe-4 gap-6'>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: 'rgb(115, 103, 240)' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Click</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: 'rgba(115, 103, 240, .5)' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Sales</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: 'rgba(115, 103, 240, .2)' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Visits</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
<AppRecharts>
|
||||
<div className='bs-[350px]'>
|
||||
<ResponsiveContainer>
|
||||
<AreaChart height={350} data={data} style={{ direction: theme.direction }} margin={{ left: -20 }}>
|
||||
<CartesianGrid />
|
||||
<XAxis dataKey='name' reversed={theme.direction === 'rtl'} />
|
||||
<YAxis orientation={theme.direction === 'rtl' ? 'right' : 'left'} />
|
||||
<Tooltip content={CustomTooltip} />
|
||||
<Area dataKey='Clicks' stackId='Clicks' stroke='0' fill='rgb(115, 103, 240)' />
|
||||
<Area dataKey='Sales' stackId='Sales' stroke='0' fill='rgba(115, 103, 240, .5)' />
|
||||
<Area dataKey='Visits' stackId='Visits' stroke='0' fill='rgba(115, 103, 240, .2)' />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</AppRecharts>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RechartsAreaChart
|
||||
@@ -0,0 +1,183 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Box from '@mui/material/Box'
|
||||
import Card from '@mui/material/Card'
|
||||
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 { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Component Imports
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from '@/libs/Recharts'
|
||||
import type { TooltipProps } from '@/libs/Recharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppRecharts = dynamic(() => import('@/libs/styles/AppRecharts'))
|
||||
|
||||
// Vars
|
||||
const data = [
|
||||
{
|
||||
name: '7/12',
|
||||
Apple: 80,
|
||||
Samsung: 130,
|
||||
Oneplus: 150,
|
||||
Motorola: 210
|
||||
},
|
||||
{
|
||||
name: '8/12',
|
||||
Apple: 100,
|
||||
Samsung: 150,
|
||||
Oneplus: 170,
|
||||
Motorola: 380
|
||||
},
|
||||
{
|
||||
name: '9/12',
|
||||
Apple: 80,
|
||||
Samsung: 140,
|
||||
Oneplus: 160,
|
||||
Motorola: 220
|
||||
},
|
||||
{
|
||||
name: '10/12',
|
||||
Apple: 100,
|
||||
Samsung: 150,
|
||||
Oneplus: 170,
|
||||
Motorola: 380
|
||||
},
|
||||
{
|
||||
name: '11/12',
|
||||
Apple: 50,
|
||||
Samsung: 90,
|
||||
Oneplus: 110,
|
||||
Motorola: 150
|
||||
},
|
||||
{
|
||||
name: '12/12',
|
||||
Apple: 125,
|
||||
Samsung: 90,
|
||||
Oneplus: 100,
|
||||
Motorola: 65
|
||||
},
|
||||
{
|
||||
name: '13/12',
|
||||
Apple: 70,
|
||||
Samsung: 110,
|
||||
Oneplus: 130,
|
||||
Motorola: 210
|
||||
},
|
||||
{
|
||||
name: '14/12',
|
||||
Apple: 100,
|
||||
Samsung: 150,
|
||||
Oneplus: 170,
|
||||
Motorola: 380
|
||||
},
|
||||
{
|
||||
name: '15/12',
|
||||
Apple: 80,
|
||||
Samsung: 100,
|
||||
Oneplus: 120,
|
||||
Motorola: 180
|
||||
},
|
||||
{
|
||||
name: '16/12',
|
||||
Apple: 30,
|
||||
Samsung: 60,
|
||||
Oneplus: 70,
|
||||
Motorola: 110
|
||||
}
|
||||
]
|
||||
|
||||
const CustomTooltip = (props: TooltipProps<any, any>) => {
|
||||
// Props
|
||||
const { active, payload } = props
|
||||
|
||||
if (active && payload) {
|
||||
return (
|
||||
<div className='recharts-custom-tooltip'>
|
||||
<Typography color='text.primary'>{props.label}</Typography>
|
||||
<Divider />
|
||||
{props &&
|
||||
props.payload &&
|
||||
props.payload.map((i: any) => {
|
||||
return (
|
||||
<Box key={i.dataKey} className='flex items-center gap-2.5' sx={{ '& i': { color: i.fill } }}>
|
||||
<i className='tabler-circle-filled text-[10px]' />
|
||||
<Typography variant='body2'>{`${i.dataKey} : ${i.payload[i.dataKey]}`}</Typography>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const RechartsBarChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Brand Turnover'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<div className='flex flex-wrap mbe-4 gap-6'>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#826af9' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Apple</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#9f87ff' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Samsung</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#d2b0ff' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Oneplus</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#f8d3ff' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Motorola</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
<AppRecharts>
|
||||
<div className='bs-[350px]'>
|
||||
<ResponsiveContainer>
|
||||
<BarChart
|
||||
height={350}
|
||||
data={data}
|
||||
barSize={15}
|
||||
style={{ direction: theme.direction }}
|
||||
margin={{ left: -20 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray='3 3' />
|
||||
<XAxis dataKey='name' reversed={theme.direction === 'rtl'} />
|
||||
<YAxis orientation={theme.direction === 'rtl' ? 'right' : 'left'} />
|
||||
<Tooltip content={CustomTooltip} />
|
||||
<Bar dataKey='Apple' stackId='a' fill='#826af9' />
|
||||
<Bar dataKey='Samsung' stackId='a' fill='#9f87ff' />
|
||||
<Bar dataKey='Oneplus' stackId='a' fill='#d2b0ff' />
|
||||
<Bar dataKey='Motorola' stackId='a' fill='#f8d3ff' radius={[15, 15, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</AppRecharts>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RechartsBarChart
|
||||
@@ -0,0 +1,89 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Component Imports
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from '@/libs/Recharts'
|
||||
import type { TooltipProps } from '@/libs/Recharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppRecharts = dynamic(() => import('@/libs/styles/AppRecharts'))
|
||||
|
||||
// Vars
|
||||
const data = [
|
||||
{ pv: 280, name: '7/12' },
|
||||
{ pv: 200, name: '8/12' },
|
||||
{ pv: 220, name: '9/12' },
|
||||
{ pv: 180, name: '10/12' },
|
||||
{ pv: 270, name: '11/12' },
|
||||
{ pv: 250, name: '12/12' },
|
||||
{ pv: 70, name: '13/12' },
|
||||
{ pv: 90, name: '14/12' },
|
||||
{ pv: 200, name: '15/12' },
|
||||
{ pv: 150, name: '16/12' },
|
||||
{ pv: 160, name: '17/12' },
|
||||
{ pv: 100, name: '18/12' },
|
||||
{ pv: 150, name: '19/12' },
|
||||
{ pv: 100, name: '20/12' },
|
||||
{ pv: 50, name: '21/12' }
|
||||
]
|
||||
|
||||
const CustomTooltip = (props: TooltipProps<any, any>) => {
|
||||
// Props
|
||||
const { active, payload } = props
|
||||
|
||||
if (active && payload) {
|
||||
return (
|
||||
<div className='recharts-custom-tooltip'>
|
||||
<Typography fontSize='0.875rem' color='text.primary'>{`${payload[0].value}%`}</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const RechartsLineChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Balance'
|
||||
subheader='Commercial networks & enterprises'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppRecharts>
|
||||
<div className='bs-[350px]'>
|
||||
<ResponsiveContainer>
|
||||
<LineChart height={350} data={data} style={{ direction: theme.direction }} margin={{ left: -20 }}>
|
||||
<CartesianGrid />
|
||||
<XAxis dataKey='name' reversed={theme.direction === 'rtl'} />
|
||||
<YAxis orientation={theme.direction === 'rtl' ? 'right' : 'left'} />
|
||||
<Tooltip content={CustomTooltip} />
|
||||
<Line dataKey='pv' stroke='#ff9f43' strokeWidth={3} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</AppRecharts>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RechartsLineChart
|
||||
@@ -0,0 +1,103 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Box from '@mui/material/Box'
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Component Imports
|
||||
import { Tooltip, PieChart, Pie, Cell, ResponsiveContainer } from '@/libs/Recharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppRecharts = dynamic(() => import('@/libs/styles/AppRecharts'))
|
||||
|
||||
type LabelProp = {
|
||||
cx: number
|
||||
cy: number
|
||||
percent: number
|
||||
midAngle: number
|
||||
innerRadius: number
|
||||
outerRadius: number
|
||||
}
|
||||
|
||||
// Vars
|
||||
const data = [
|
||||
{ name: 'R&D', value: 50, color: '#00d4bd' },
|
||||
{ name: 'Operational', value: 85, color: '#ffe700' },
|
||||
{ name: 'Networking', value: 16, color: '#FFA1A1' },
|
||||
{ name: 'Hiring', value: 50, color: '#826bf8' }
|
||||
]
|
||||
|
||||
const RADIAN = Math.PI / 180
|
||||
|
||||
const renderCustomizedLabel = (props: LabelProp) => {
|
||||
// Props
|
||||
const { cx, cy, midAngle, innerRadius, outerRadius, percent } = props
|
||||
|
||||
// Vars
|
||||
const radius = innerRadius + (outerRadius - innerRadius) * 0.5
|
||||
const x = cx + radius * Math.cos(-midAngle * RADIAN)
|
||||
const y = cy + radius * Math.sin(-midAngle * RADIAN)
|
||||
|
||||
return (
|
||||
<text x={x} y={y} fill='#fff' textAnchor='middle' dominantBaseline='central' className='max-[400px]:text-xs'>
|
||||
{`${(percent * 100).toFixed(0)}%`}
|
||||
</text>
|
||||
)
|
||||
}
|
||||
|
||||
const RechartsPieChart = () => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Expense Ratio' subheader='Spending on various categories' />
|
||||
<CardContent>
|
||||
<AppRecharts>
|
||||
<div className='bs-[350px]'>
|
||||
<ResponsiveContainer>
|
||||
<PieChart height={350} style={{ direction: 'ltr' }}>
|
||||
<Pie
|
||||
data={data}
|
||||
innerRadius={80}
|
||||
dataKey='value'
|
||||
label={renderCustomizedLabel}
|
||||
labelLine={false}
|
||||
stroke='none'
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</AppRecharts>
|
||||
<div className='flex justify-center flex-wrap gap-6'>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#00d4bd' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>R&D</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#ffe700' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Operational</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#FFA1A1' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Networking</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#826bf8' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Hiring</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RechartsPieChart
|
||||
@@ -0,0 +1,133 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Box from '@mui/material/Box'
|
||||
import Card from '@mui/material/Card'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Component Imports
|
||||
import {
|
||||
Radar,
|
||||
Tooltip,
|
||||
PolarGrid,
|
||||
RadarChart,
|
||||
PolarAngleAxis,
|
||||
PolarRadiusAxis,
|
||||
ResponsiveContainer
|
||||
} from '@/libs/Recharts'
|
||||
import type { TooltipProps } from '@/libs/Recharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppRecharts = dynamic(() => import('@/libs/styles/AppRecharts'))
|
||||
|
||||
// Vars
|
||||
const data = [
|
||||
{
|
||||
subject: 'Battery',
|
||||
'iPhone 11': 41,
|
||||
'Samsung s20': 65
|
||||
},
|
||||
{
|
||||
subject: 'Brand',
|
||||
'iPhone 11': 64,
|
||||
'Samsung s20': 46
|
||||
},
|
||||
{
|
||||
subject: 'Camera',
|
||||
'iPhone 11': 81,
|
||||
'Samsung s20': 42
|
||||
},
|
||||
{
|
||||
subject: 'Memory',
|
||||
'iPhone 11': 60,
|
||||
'Samsung s20': 25
|
||||
},
|
||||
{
|
||||
subject: 'Storage',
|
||||
'iPhone 11': 42,
|
||||
'Samsung s20': 58
|
||||
},
|
||||
{
|
||||
subject: 'Display',
|
||||
'iPhone 11': 42,
|
||||
'Samsung s20': 63
|
||||
},
|
||||
{
|
||||
subject: 'OS',
|
||||
'iPhone 11': 33,
|
||||
'Samsung s20': 76
|
||||
},
|
||||
{
|
||||
subject: 'Price',
|
||||
'iPhone 11': 23,
|
||||
'Samsung s20': 43
|
||||
}
|
||||
]
|
||||
|
||||
const CustomTooltip = (props: TooltipProps<any, any>) => {
|
||||
// Props
|
||||
const { active, payload } = props
|
||||
|
||||
if (active && payload) {
|
||||
return (
|
||||
<div className='recharts-custom-tooltip'>
|
||||
<Typography color='text.primary'>{props.label}</Typography>
|
||||
<Divider />
|
||||
{props &&
|
||||
props.payload &&
|
||||
props.payload.map((i: any) => {
|
||||
return (
|
||||
<Box key={i.dataKey} className='flex items-center gap-2.5' sx={{ '& i': { color: i.fill } }}>
|
||||
<i className='tabler-circle-filled text-[10px]' />
|
||||
<Typography variant='body2'>{`${i.dataKey} : ${i.payload[i.dataKey]}`}</Typography>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const RechartsRadarChart = () => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Mobile Comparison' />
|
||||
<CardContent>
|
||||
<AppRecharts>
|
||||
<div className='bs-[350px]'>
|
||||
<ResponsiveContainer>
|
||||
<RadarChart cx='50%' cy='50%' height={350} data={data} style={{ direction: 'ltr' }}>
|
||||
<PolarGrid />
|
||||
<PolarAngleAxis dataKey='subject' />
|
||||
<PolarRadiusAxis />
|
||||
<Tooltip content={CustomTooltip} />
|
||||
<Radar dataKey='iPhone 11' stroke='#fde802' fill='#fde802' fillOpacity={1} />
|
||||
<Radar dataKey='Samsung s20' stroke='#9b88fa' fill='#9b88fa' fillOpacity={0.8} />
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</AppRecharts>
|
||||
<div className='flex justify-center gap-6'>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#fde802' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>iPhone 11</Typography>
|
||||
</Box>
|
||||
<Box className='flex items-center gap-1.5' sx={{ '& i': { color: '#9b88fa' } }}>
|
||||
<i className='tabler-circle-filled text-xs' />
|
||||
<Typography variant='body2'>Samsung s20</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RechartsRadarChart
|
||||
@@ -0,0 +1,117 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Component Imports
|
||||
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from '@/libs/Recharts'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppRecharts = dynamic(() => import('@/libs/styles/AppRecharts'))
|
||||
|
||||
// Vars
|
||||
const angularData = [
|
||||
{ x: 5.4, y: 170 },
|
||||
{ x: 5.4, y: 100 },
|
||||
{ x: 5.7, y: 110 },
|
||||
{ x: 5.9, y: 150 },
|
||||
{ x: 6.0, y: 200 },
|
||||
{ x: 6.3, y: 170 },
|
||||
{ x: 5.7, y: 140 },
|
||||
{ x: 5.9, y: 130 },
|
||||
{ x: 7.0, y: 150 },
|
||||
{ x: 8.0, y: 120 },
|
||||
{ x: 9.0, y: 170 },
|
||||
{ x: 10.0, y: 190 },
|
||||
{ x: 11.0, y: 220 },
|
||||
{ x: 12.0, y: 170 },
|
||||
{ x: 13.0, y: 230 }
|
||||
]
|
||||
|
||||
const vueData = [
|
||||
{ x: 14.0, y: 220 },
|
||||
{ x: 15.0, y: 280 },
|
||||
{ x: 16.0, y: 230 },
|
||||
{ x: 18.0, y: 320 },
|
||||
{ x: 17.5, y: 280 },
|
||||
{ x: 19.0, y: 250 },
|
||||
{ x: 20.0, y: 350 },
|
||||
{ x: 20.5, y: 320 },
|
||||
{ x: 20.0, y: 320 },
|
||||
{ x: 19.0, y: 280 },
|
||||
{ x: 17.0, y: 280 },
|
||||
{ x: 22.0, y: 300 },
|
||||
{ x: 18.0, y: 120 }
|
||||
]
|
||||
|
||||
const reactData = [
|
||||
{ x: 14.0, y: 290 },
|
||||
{ x: 13.0, y: 190 },
|
||||
{ x: 20.0, y: 220 },
|
||||
{ x: 21.0, y: 350 },
|
||||
{ x: 21.5, y: 290 },
|
||||
{ x: 22.0, y: 220 },
|
||||
{ x: 23.0, y: 140 },
|
||||
{ x: 19.0, y: 400 },
|
||||
{ x: 20.0, y: 200 },
|
||||
{ x: 22.0, y: 90 },
|
||||
{ x: 20.0, y: 120 }
|
||||
]
|
||||
|
||||
const RechartsScatterChart = () => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Framework Usage'
|
||||
sx={{
|
||||
flexDirection: ['column', 'row'],
|
||||
alignItems: ['flex-start', 'center'],
|
||||
'& .MuiCardHeader-action': { mb: 0 },
|
||||
'& .MuiCardHeader-content': { mb: [2, 0] }
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<div className='flex mbe-4 gap-6'>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<i className='tabler-circle-filled text-xs text-primary' />
|
||||
<Typography variant='body2'>React</Typography>
|
||||
</div>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<i className='tabler-circle-filled text-xs text-success' />
|
||||
<Typography variant='body2'>Vue</Typography>
|
||||
</div>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<i className='tabler-circle-filled text-xs text-error' />
|
||||
<Typography variant='body2'>Angular</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<AppRecharts>
|
||||
<div className='bs-[350px]'>
|
||||
<ResponsiveContainer>
|
||||
<ScatterChart height={350} style={{ direction: theme.direction }} margin={{ left: -20 }}>
|
||||
<CartesianGrid />
|
||||
<XAxis type='number' dataKey='x' reversed={theme.direction === 'rtl'} />
|
||||
<YAxis type='number' dataKey='y' orientation={theme.direction === 'rtl' ? 'right' : 'left'} />
|
||||
<Scatter name='Angular' data={angularData} fill='var(--mui-palette-error-main)' />
|
||||
<Scatter name='Vue' data={vueData} fill='var(--mui-palette-success-main)' />
|
||||
<Scatter name='React' data={reactData} fill='var(--mui-palette-primary-main)' />
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</AppRecharts>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RechartsScatterChart
|
||||
Reference in New Issue
Block a user