d1041211043_randa/portaldata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change color

Browse Source
This commit is contained in:
Randa Firman Putra
2025-07-15 16:03:11 +07:00
parent ef630ef0d5
commit fb1ddecc37
32 changed files with 362 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/charts/AsalDaerahBeasiswaChart.tsx
View File

@@ -79,7 +79,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -99,14 +99,14 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
},
style: {
fontSize: '14px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
offsetX: 10,
},
stroke: {
show: true,
width: 1,
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
},
xaxis: {
categories: [...new Set(data.map(item => item.kabupaten))].sort(),
@@ -115,13 +115,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -131,13 +131,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '14px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
maxWidth: 200,
},
@@ -155,7 +155,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -221,13 +221,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[600px] w-full">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

4
components/charts/AsalDaerahChart.tsx
View File

@@ -262,13 +262,13 @@ export default function AsalDaerahChart() {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

34
components/charts/AsalDaerahLulusChart.tsx
View File

@@ -38,7 +38,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -56,14 +56,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
},
style: {
fontSize: '14px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
offsetX: 10,
},
stroke: {
show: true,
width: 1,
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
},
xaxis: {
categories: [],
@@ -72,13 +72,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -88,13 +88,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '14px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
maxWidth: 200,
},
@@ -112,7 +112,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
},
colors: ['#3B82F6'], // Blue color for bars
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -128,13 +128,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
xaxis: {
@@ -143,14 +143,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -160,20 +160,20 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);
@@ -267,13 +267,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[600px] w-full">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

2
components/charts/AsalDaerahPerAngkatanChart.tsx
View File

@@ -308,7 +308,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}

20
components/charts/AsalDaerahPrestasiChart.tsx
View File

@@ -79,7 +79,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -99,14 +99,14 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
},
style: {
fontSize: '14px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
offsetX: 10,
},
stroke: {
show: true,
width: 1,
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
},
xaxis: {
categories: [...new Set(data.map(item => item.kabupaten))].sort(),
@@ -115,13 +115,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -131,13 +131,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '14px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
maxWidth: 200,
},
@@ -155,7 +155,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -221,13 +221,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[600px] w-full">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

20
components/charts/AsalDaerahStatusChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
}
export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<AsalDaerahStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -77,7 +77,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -95,7 +95,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
offsetX: 10,
},
@@ -111,13 +111,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
},
@@ -127,13 +127,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -150,12 +150,12 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
colors: ['#008FFB'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -224,7 +224,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}

50
components/charts/IPKBeasiswaChart.tsx
View File

@@ -44,7 +44,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
@@ -59,7 +59,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
@@ -86,22 +86,22 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -110,13 +110,13 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(2);
@@ -126,11 +126,11 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
max: 4,
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -141,7 +141,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2);
@@ -156,7 +156,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
});
@@ -168,18 +168,18 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
background: {
...prev.dataLabels?.background,
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
}
},
xaxis: {
@@ -188,23 +188,23 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
...prev.xaxis?.axisBorder,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
...prev.xaxis?.axisTicks,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -213,20 +213,20 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);
@@ -329,13 +329,13 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}
type="line"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

46
components/charts/IPKChart.tsx
View File

@@ -39,7 +39,7 @@ export default function IPKChart() {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
@@ -54,7 +54,7 @@ export default function IPKChart() {
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
@@ -81,22 +81,22 @@ export default function IPKChart() {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -105,13 +105,13 @@ export default function IPKChart() {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(2);
@@ -121,11 +121,11 @@ export default function IPKChart() {
max: 4,
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -136,7 +136,7 @@ export default function IPKChart() {
},
colors: ['#3B82F6'], // Blue color for line
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2);
@@ -151,7 +151,7 @@ export default function IPKChart() {
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
});
@@ -163,18 +163,18 @@ export default function IPKChart() {
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
background: {
...prev.dataLabels?.background,
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
}
},
xaxis: {
@@ -183,23 +183,23 @@ export default function IPKChart() {
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
...prev.xaxis?.axisBorder,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
...prev.xaxis?.axisTicks,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -208,20 +208,20 @@ export default function IPKChart() {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);

24
components/charts/IPKJenisKelaminChart.tsx
View File

@@ -42,7 +42,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
}
},
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
colors: ['#3B82F6', '#EC4899'],
plotOptions: {
@@ -77,7 +77,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
xaxis: {
@@ -87,7 +87,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -100,12 +100,12 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2) + " IPK";
@@ -124,13 +124,13 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
xaxis: {
@@ -139,13 +139,13 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -155,19 +155,19 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
...(prev.yaxis as any)?.title,
style: {
...(prev.yaxis as any)?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(prev.yaxis as any)?.labels,
style: {
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);

46
components/charts/IPKLulusTepatChart.tsx
View File

@@ -43,7 +43,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
@@ -58,7 +58,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
@@ -85,22 +85,22 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -109,13 +109,13 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(2);
@@ -125,11 +125,11 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
max: 4,
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -140,7 +140,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
},
colors: ['#3B82F6'], // Blue color for line
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2);
@@ -155,7 +155,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
});
@@ -167,18 +167,18 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
background: {
...prev.dataLabels?.background,
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
}
},
xaxis: {
@@ -187,23 +187,23 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
...prev.xaxis?.axisBorder,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
...prev.xaxis?.axisTicks,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -212,20 +212,20 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);

46
components/charts/IPKPrestasiChart.tsx
View File

@@ -44,7 +44,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
@@ -59,7 +59,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
@@ -86,22 +86,22 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -110,13 +110,13 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(2);
@@ -126,11 +126,11 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
max: 4,
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -141,7 +141,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2);
@@ -156,7 +156,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
});
@@ -168,18 +168,18 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
background: {
...prev.dataLabels?.background,
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
}
},
xaxis: {
@@ -188,23 +188,23 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
...prev.xaxis?.axisBorder,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
...prev.xaxis?.axisTicks,
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -213,20 +213,20 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);

30
components/charts/IpkStatusChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
selectedStatus: string;
}
export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) {
export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const [data, setData] = useState<IpkStatusData[]>([]);
@@ -94,7 +94,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
@@ -116,7 +116,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
@@ -130,7 +130,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
background: {
enabled: false
@@ -144,22 +144,22 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -168,7 +168,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
min: 0,
@@ -176,7 +176,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(2);
@@ -184,11 +184,11 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -199,7 +199,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2);
@@ -214,7 +214,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
};

30
components/charts/JenisPendaftaranBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -111,7 +111,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -126,22 +126,22 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -150,18 +150,18 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -170,7 +170,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
},
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -187,11 +187,11 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -249,14 +249,14 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/JenisPendaftaranBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
toolbar: {
show: true,
tools: {
@@ -82,7 +82,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
@@ -101,7 +101,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -175,14 +175,14 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
</div>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={{...chartOptions, labels}}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

30
components/charts/JenisPendaftaranLulusChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -92,7 +92,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -108,7 +108,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -123,22 +123,22 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -147,18 +147,18 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -167,7 +167,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -184,11 +184,11 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -246,14 +246,14 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/JenisPendaftaranLulusPieChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -66,7 +66,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
labels: [],
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
@@ -81,7 +81,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
}
},
dataLabels: {
@@ -100,7 +100,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -174,14 +174,14 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
</div>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={{...chartOptions, labels}}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

10
components/charts/JenisPendaftaranPerAngkatanChart.tsx
View File

@@ -55,7 +55,7 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
@@ -74,7 +74,7 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -90,18 +90,18 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
legend: {
...prev.legend,
labels: {
...prev.legend?.labels,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);

30
components/charts/JenisPendaftaranPrestasiChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -110,7 +110,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -125,22 +125,22 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -149,18 +149,18 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
},
fill: {
@@ -168,7 +168,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
},
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -185,11 +185,11 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -246,14 +246,14 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/JenisPendaftaranPrestasiPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
toolbar: {
show: true,
tools: {
@@ -82,7 +82,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
@@ -101,7 +101,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={{...chartOptions, labels}}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

20
components/charts/JenisPendaftaranStatusChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
}
export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -81,7 +81,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -96,7 +96,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -111,13 +111,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -127,13 +127,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
min:0,
@@ -152,12 +152,12 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -235,7 +235,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}

8
components/charts/JenisPendaftaranStatusPieChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
}
export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -68,7 +68,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
labels: [],
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
@@ -83,7 +83,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
}
},
dataLabels: {
@@ -102,7 +102,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"

30
components/charts/LulusTepatWaktuChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function LulusTepatWaktuChart({ selectedYear }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<LulusTepatWaktuData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -110,7 +110,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -126,7 +126,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -141,22 +141,22 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -165,18 +165,18 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -185,7 +185,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
},
colors: ['#3B82F6', '#EC4899'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -202,11 +202,11 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -264,14 +264,14 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/LulusTepatWaktuPieChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<LulusTepatWaktuData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -66,7 +66,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
labels: ['Laki-laki', 'Perempuan'],
colors: ['#3B82F6', '#EC4899'],
@@ -81,7 +81,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
}
},
dataLabels: {
@@ -100,7 +100,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -167,14 +167,14 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
</div>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

30
components/charts/NamaBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<NamaBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -111,7 +111,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -126,22 +126,22 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -151,18 +151,18 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
fill: {
@@ -170,7 +170,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
},
colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -187,11 +187,11 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -249,14 +249,14 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/NamaBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<NamaBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
toolbar: {
show: true,
tools: {
@@ -82,7 +82,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
}
},
dataLabels: {
@@ -101,7 +101,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -175,14 +175,14 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
</div>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={{...chartOptions, labels}}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

8
components/charts/StatusMahasiswaFilterPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<StatusMahasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -67,7 +67,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
labels: ['Laki-laki', 'Perempuan'],
colors: ['#3B82F6', '#EC4899'],
@@ -82,7 +82,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
}
},
dataLabels: {
@@ -101,7 +101,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"

30
components/charts/TingkatPrestasiChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<TingkatPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -110,7 +110,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -125,22 +125,22 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
},
yaxis: {
@@ -149,18 +149,18 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -169,7 +169,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
},
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -186,11 +186,11 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -247,14 +247,14 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/TingkatPrestasiPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<TingkatPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -72,7 +72,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
toolbar: {
show: true,
tools: {
@@ -99,7 +99,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
@@ -118,7 +118,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

30
components/charts/TotalBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<TotalBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -107,7 +107,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -123,7 +123,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -138,22 +138,22 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -162,18 +162,18 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -182,7 +182,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
},
colors: ['#3B82F6', '#EC4899'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -199,11 +199,11 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -261,14 +261,14 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/TotalBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<TotalBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
toolbar: {
show: true,
tools: {
@@ -85,7 +85,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
return legendName;
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
@@ -104,7 +104,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
</div>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

30
components/charts/TotalPrestasiChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<TotalPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -106,7 +106,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -122,7 +122,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -137,22 +137,22 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
@@ -161,18 +161,18 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
},
tickAmount: 5,
},
@@ -181,7 +181,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
},
colors: ['#3B82F6', '#EC4899'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -198,11 +198,11 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -259,14 +259,14 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
)}
</div>

12
components/charts/TotalPrestasiPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
const { theme } = useTheme();
const { theme, systemTheme } = useTheme();
const [data, setData] = useState<TotalPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
toolbar: {
show: true,
tools: {
@@ -82,7 +82,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
horizontal: 10
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
@@ -101,7 +101,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
</div>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="pie"
height="100%"
width="90%"
width="100%"
/>
)}
</div>