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

Fix Bug

Browse Source
This commit is contained in:
Randa Firman Putra
2025-07-15 21:41:39 +07:00
parent 01f773dfb0
commit efe371ce03
26 changed files with 300 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/charts/AsalDaerahBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) { export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [data, setData] = useState<AsalDaerahBeasiswaData[]>([]); const [data, setData] = useState<AsalDaerahBeasiswaData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -79,7 +79,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -99,14 +99,14 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
}, },
style: { style: {
fontSize: '14px', fontSize: '14px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
}, },
offsetX: 10, offsetX: 10,
}, },
stroke: { stroke: {
show: true, show: true,
width: 1, width: 1,
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'], colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
}, },
xaxis: { xaxis: {
categories: [...new Set(data.map(item => item.kabupaten))].sort(), categories: [...new Set(data.map(item => item.kabupaten))].sort(),
@@ -115,13 +115,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -131,13 +131,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '14px', fontSize: '14px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
}, },
maxWidth: 200, maxWidth: 200,
}, },
@@ -155,7 +155,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
}, },
colors: ['#3B82F6'], colors: ['#3B82F6'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";

19
components/charts/AsalDaerahChart.tsx
View File

@@ -15,7 +15,7 @@ interface AsalDaerahData {
} }
export default function AsalDaerahChart() { export default function AsalDaerahChart() {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -109,18 +109,17 @@ export default function AsalDaerahChart() {
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
...prev.chart, ...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
dataLabels: { dataLabels: {
...prev.dataLabels, ...prev.dataLabels,
style: { style: {
...prev.dataLabels?.style, ...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
xaxis: { xaxis: {
@@ -129,14 +128,14 @@ export default function AsalDaerahChart() {
...prev.xaxis?.title, ...prev.xaxis?.title,
style: { style: {
...prev.xaxis?.title?.style, ...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...prev.xaxis?.labels, ...prev.xaxis?.labels,
style: { style: {
...prev.xaxis?.labels?.style, ...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -146,23 +145,23 @@ export default function AsalDaerahChart() {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
...prev.tooltip, ...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light' theme: theme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

36
components/charts/AsalDaerahLulusChart.tsx
View File

@@ -20,7 +20,7 @@ interface ChartData {
} }
export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusChartProps) { export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusChartProps) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [chartData, setChartData] = useState<ChartData[]>([]); const [chartData, setChartData] = useState<ChartData[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -38,7 +38,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
toolbar: { toolbar: {
show: true, show: true,
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -56,14 +56,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
}, },
style: { style: {
fontSize: '14px', fontSize: '14px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
}, },
offsetX: 10, offsetX: 10,
}, },
stroke: { stroke: {
show: true, show: true,
width: 1, width: 1,
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'], colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
}, },
xaxis: { xaxis: {
categories: [], categories: [],
@@ -72,13 +72,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -88,13 +88,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '14px', fontSize: '14px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
}, },
maxWidth: 200, maxWidth: 200,
}, },
@@ -112,7 +112,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
}, },
colors: ['#3B82F6'], // Blue color for bars colors: ['#3B82F6'], // Blue color for bars
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";
@@ -123,18 +123,18 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
...prev.chart, ...prev.chart,
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: currentTheme === 'dark' ? '#0F172B' : '#fff',
}, },
dataLabels: { dataLabels: {
...prev.dataLabels, ...prev.dataLabels,
style: { style: {
...prev.dataLabels?.style, ...prev.dataLabels?.style,
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [currentTheme === 'dark' ? '#fff' : '#000']
} }
}, },
xaxis: { xaxis: {
@@ -143,14 +143,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
...prev.xaxis?.title, ...prev.xaxis?.title,
style: { style: {
...prev.xaxis?.title?.style, ...prev.xaxis?.title?.style,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...prev.xaxis?.labels, ...prev.xaxis?.labels,
style: { style: {
...prev.xaxis?.labels?.style, ...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -160,23 +160,23 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
...prev.tooltip, ...prev.tooltip,
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' theme: currentTheme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

19
components/charts/AsalDaerahPerAngkatanChart.tsx
View File

@@ -19,7 +19,7 @@ interface Props {
} }
export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) { export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -139,18 +139,17 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
...prev.chart, ...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
dataLabels: { dataLabels: {
...prev.dataLabels, ...prev.dataLabels,
style: { style: {
...prev.dataLabels?.style, ...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
xaxis: { xaxis: {
@@ -159,14 +158,14 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
...prev.xaxis?.title, ...prev.xaxis?.title,
style: { style: {
...prev.xaxis?.title?.style, ...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...prev.xaxis?.labels, ...prev.xaxis?.labels,
style: { style: {
...prev.xaxis?.labels?.style, ...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -176,23 +175,23 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
...prev.tooltip, ...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light' theme: theme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

18
components/charts/AsalDaerahPrestasiChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPrestasi }: Props) { export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPrestasi }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [data, setData] = useState<AsalDaerahPrestasiData[]>([]); const [data, setData] = useState<AsalDaerahPrestasiData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -79,7 +79,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -99,14 +99,14 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
}, },
style: { style: {
fontSize: '14px', fontSize: '14px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
}, },
offsetX: 10, offsetX: 10,
}, },
stroke: { stroke: {
show: true, show: true,
width: 1, width: 1,
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'], colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
}, },
xaxis: { xaxis: {
categories: [...new Set(data.map(item => item.kabupaten))].sort(), categories: [...new Set(data.map(item => item.kabupaten))].sort(),
@@ -115,13 +115,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -131,13 +131,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '14px', fontSize: '14px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
}, },
maxWidth: 200, maxWidth: 200,
}, },
@@ -155,7 +155,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
}, },
colors: ['#3B82F6'], colors: ['#3B82F6'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";

18
components/charts/AsalDaerahStatusChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
} }
export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) { export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<AsalDaerahStatusData[]>([]); const [data, setData] = useState<AsalDaerahStatusData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -77,7 +77,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
toolbar: { toolbar: {
show: true, show: true,
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -95,7 +95,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
}, },
offsetX: 10, offsetX: 10,
}, },
@@ -111,13 +111,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
}, },
@@ -127,13 +127,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -150,12 +150,12 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
colors: ['#008FFB'], colors: ['#008FFB'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";

52
components/charts/IPKBeasiswaChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
} }
export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -44,7 +44,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
zoom: { zoom: {
enabled: true, enabled: true,
type: 'x', type: 'x',
@@ -59,7 +59,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
markers: { markers: {
size: 5, size: 5,
strokeWidth: 2, strokeWidth: 2,
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'], colors: ['#3B82F6'],
hover: { hover: {
size: 7 size: 7
@@ -86,22 +86,22 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -110,13 +110,13 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
}, },
formatter: function (val: number) { formatter: function (val: number) {
return val.toFixed(2); return val.toFixed(2);
@@ -126,11 +126,11 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
max: 4, max: 4,
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,
@@ -141,7 +141,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
}, },
colors: ['#3B82F6'], colors: ['#3B82F6'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val.toFixed(2); return val.toFixed(2);
@@ -156,30 +156,30 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
position: 'top', position: 'top',
horizontalAlign: 'right', horizontalAlign: 'right',
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}); });
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
...prev.chart, ...prev.chart,
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: currentTheme === 'dark' ? '#0F172B' : '#fff',
}, },
dataLabels: { dataLabels: {
...prev.dataLabels, ...prev.dataLabels,
style: { style: {
...prev.dataLabels?.style, ...prev.dataLabels?.style,
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [currentTheme === 'dark' ? '#fff' : '#000']
}, },
background: { background: {
...prev.dataLabels?.background, ...prev.dataLabels?.background,
foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', foreColor: currentTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6' borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
} }
}, },
xaxis: { xaxis: {
@@ -188,23 +188,23 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
...prev.xaxis?.title, ...prev.xaxis?.title,
style: { style: {
...prev.xaxis?.title?.style, ...prev.xaxis?.title?.style,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...prev.xaxis?.labels, ...prev.xaxis?.labels,
style: { style: {
...prev.xaxis?.labels?.style, ...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
...prev.xaxis?.axisBorder, ...prev.xaxis?.axisBorder,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
...prev.xaxis?.axisTicks, ...prev.xaxis?.axisTicks,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -213,23 +213,23 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
...prev.tooltip, ...prev.tooltip,
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' theme: currentTheme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

52
components/charts/IPKChart.tsx
View File

@@ -15,7 +15,7 @@ interface IPKData {
} }
export default function IPKChart() { export default function IPKChart() {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -39,7 +39,7 @@ export default function IPKChart() {
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
zoom: { zoom: {
enabled: true, enabled: true,
type: 'x', type: 'x',
@@ -54,7 +54,7 @@ export default function IPKChart() {
markers: { markers: {
size: 5, size: 5,
strokeWidth: 2, strokeWidth: 2,
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'], colors: ['#3B82F6'],
hover: { hover: {
size: 7 size: 7
@@ -81,22 +81,22 @@ export default function IPKChart() {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -105,13 +105,13 @@ export default function IPKChart() {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
}, },
formatter: function (val: number) { formatter: function (val: number) {
return val.toFixed(2); return val.toFixed(2);
@@ -121,11 +121,11 @@ export default function IPKChart() {
max: 4, max: 4,
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,
@@ -136,7 +136,7 @@ export default function IPKChart() {
}, },
colors: ['#3B82F6'], // Blue color for line colors: ['#3B82F6'], // Blue color for line
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val.toFixed(2); return val.toFixed(2);
@@ -151,30 +151,30 @@ export default function IPKChart() {
position: 'top', position: 'top',
horizontalAlign: 'right', horizontalAlign: 'right',
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}); });
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
...prev.chart, ...prev.chart,
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: currentTheme === 'dark' ? '#0F172B' : '#fff',
}, },
dataLabels: { dataLabels: {
...prev.dataLabels, ...prev.dataLabels,
style: { style: {
...prev.dataLabels?.style, ...prev.dataLabels?.style,
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [currentTheme === 'dark' ? '#fff' : '#000']
}, },
background: { background: {
...prev.dataLabels?.background, ...prev.dataLabels?.background,
foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', foreColor: currentTheme === 'dark' ? '#fff' : '#000',
borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6' borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
} }
}, },
xaxis: { xaxis: {
@@ -183,23 +183,23 @@ export default function IPKChart() {
...prev.xaxis?.title, ...prev.xaxis?.title,
style: { style: {
...prev.xaxis?.title?.style, ...prev.xaxis?.title?.style,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...prev.xaxis?.labels, ...prev.xaxis?.labels,
style: { style: {
...prev.xaxis?.labels?.style, ...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
...prev.xaxis?.axisBorder, ...prev.xaxis?.axisBorder,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
...prev.xaxis?.axisTicks, ...prev.xaxis?.axisTicks,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -208,23 +208,23 @@ export default function IPKChart() {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: { style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
...prev.tooltip, ...prev.tooltip,
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' theme: currentTheme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

30
components/charts/IPKJenisKelaminChart.tsx
View File

@@ -13,7 +13,7 @@ interface Props {
} }
export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) { export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [series, setSeries] = useState<any[]>([]); const [series, setSeries] = useState<any[]>([]);
const [categories, setCategories] = useState<string[]>([]); const [categories, setCategories] = useState<string[]>([]);
@@ -42,7 +42,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
} }
}, },
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
colors: ['#3B82F6', '#EC4899'], colors: ['#3B82F6', '#EC4899'],
plotOptions: { plotOptions: {
@@ -77,7 +77,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
xaxis: { xaxis: {
@@ -87,7 +87,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -100,12 +100,12 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val.toFixed(2) + " IPK"; return val.toFixed(2) + " IPK";
@@ -119,18 +119,18 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
...prev.chart, ...prev.chart,
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: currentTheme === 'dark' ? '#0F172B' : '#fff',
}, },
dataLabels: { dataLabels: {
...prev.dataLabels, ...prev.dataLabels,
style: { style: {
...prev.dataLabels?.style, ...prev.dataLabels?.style,
colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [currentTheme === 'dark' ? '#fff' : '#000']
} }
}, },
xaxis: { xaxis: {
@@ -139,13 +139,13 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
...prev.xaxis?.title, ...prev.xaxis?.title,
style: { style: {
...prev.xaxis?.title?.style, ...prev.xaxis?.title?.style,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...prev.xaxis?.labels, ...prev.xaxis?.labels,
style: { style: {
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -155,22 +155,22 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
...(prev.yaxis as any)?.title, ...(prev.yaxis as any)?.title,
style: { style: {
...(prev.yaxis as any)?.title?.style, ...(prev.yaxis as any)?.title?.style,
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: currentTheme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
...(prev.yaxis as any)?.labels, ...(prev.yaxis as any)?.labels,
style: { style: {
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: currentTheme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
tooltip: { tooltip: {
...prev.tooltip, ...prev.tooltip,
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' theme: currentTheme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

52
components/charts/IPKLulusTepatChart.tsx
View File

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

52
components/charts/IPKPrestasiChart.tsx
View File

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

28
components/charts/IpkStatusChart.tsx
View File

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

26
components/charts/JenisPendaftaranBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) { export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]); const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -111,7 +111,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -126,22 +126,22 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -150,18 +150,18 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
tickAmount: 5, tickAmount: 5,
}, },
@@ -170,7 +170,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
}, },
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";
@@ -187,11 +187,11 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,

8
components/charts/JenisPendaftaranBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) { export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]); const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
const chartOptions: ApexOptions = { const chartOptions: ApexOptions = {
chart: { chart: {
type: 'pie', type: 'pie',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
toolbar: { toolbar: {
show: true, show: true,
tools: { tools: {
@@ -82,7 +82,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
horizontal: 10 horizontal: 10
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
dataLabels: { dataLabels: {
@@ -101,7 +101,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
} }
}, },
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa" return val + " mahasiswa"

6
components/charts/JenisPendaftaranChart.tsx
View File

@@ -15,7 +15,7 @@ interface JenisPendaftaranData {
} }
export default function JenisPendaftaranChart() { export default function JenisPendaftaranChart() {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -115,7 +115,7 @@ export default function JenisPendaftaranChart() {
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
setOptions(prev => ({ setOptions(prev => ({
...prev, ...prev,
chart: { chart: {
@@ -175,7 +175,7 @@ export default function JenisPendaftaranChart() {
theme: currentTheme === 'dark' ? 'dark' : 'light' theme: currentTheme === 'dark' ? 'dark' : 'light'
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);

26
components/charts/JenisPendaftaranLulusChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
} }
export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]); const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -92,7 +92,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -108,7 +108,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -123,22 +123,22 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -147,18 +147,18 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
tickAmount: 5, tickAmount: 5,
}, },
@@ -167,7 +167,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
}, },
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";
@@ -184,11 +184,11 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,

8
components/charts/JenisPendaftaranLulusPieChart.tsx
View File

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

2
components/charts/JenisPendaftaranPerAngkatanChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
} }
export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Props) { export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);

26
components/charts/JenisPendaftaranPrestasiChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
} }
export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) { export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]); const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -110,7 +110,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -125,22 +125,22 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -149,18 +149,18 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
}, },
fill: { fill: {
@@ -168,7 +168,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
}, },
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";
@@ -185,11 +185,11 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,

8
components/charts/JenisPendaftaranPrestasiPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) { export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]); const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
const chartOptions: ApexOptions = { const chartOptions: ApexOptions = {
chart: { chart: {
type: 'pie', type: 'pie',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
toolbar: { toolbar: {
show: true, show: true,
tools: { tools: {
@@ -82,7 +82,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
horizontal: 10 horizontal: 10
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
dataLabels: { dataLabels: {
@@ -101,7 +101,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
} }
}, },
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa" return val + " mahasiswa"

18
components/charts/JenisPendaftaranStatusChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
} }
export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) { export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]); const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -81,7 +81,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
toolbar: { toolbar: {
show: true, show: true,
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -96,7 +96,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -111,13 +111,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -127,13 +127,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
min:0, min:0,
@@ -152,12 +152,12 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";

8
components/charts/JenisPendaftaranStatusPieChart.tsx
View File

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

26
components/charts/LulusTepatWaktuChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
} }
export default function LulusTepatWaktuChart({ selectedYear }: Props) { export default function LulusTepatWaktuChart({ selectedYear }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<LulusTepatWaktuData[]>([]); const [data, setData] = useState<LulusTepatWaktuData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -110,7 +110,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -126,7 +126,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -141,22 +141,22 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
yaxis: { yaxis: {
@@ -165,18 +165,18 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
tickAmount: 5, tickAmount: 5,
}, },
@@ -185,7 +185,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
}, },
colors: ['#3B82F6', '#EC4899'], colors: ['#3B82F6', '#EC4899'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";
@@ -202,11 +202,11 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,

8
components/charts/LulusTepatWaktuPieChart.tsx
View File

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

26
components/charts/NamaBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) { export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<NamaBeasiswaData[]>([]); const [data, setData] = useState<NamaBeasiswaData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
reset: true reset: true
} }
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -111,7 +111,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -126,22 +126,22 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
axisTicks: { axisTicks: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
}, },
tickAmount: 5, tickAmount: 5,
}, },
@@ -151,18 +151,18 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
axisBorder: { axisBorder: {
show: true, show: true,
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' color: theme === 'dark' ? '#374151' : '#E5E7EB'
} }
}, },
fill: { fill: {
@@ -170,7 +170,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
}, },
colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'], colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";
@@ -187,11 +187,11 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
grid: { grid: {
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4, strokeDashArray: 4,
padding: { padding: {
top: 20, top: 20,

8
components/charts/NamaBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) { export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<NamaBeasiswaData[]>([]); const [data, setData] = useState<NamaBeasiswaData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
const chartOptions: ApexOptions = { const chartOptions: ApexOptions = {
chart: { chart: {
type: 'pie', type: 'pie',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
toolbar: { toolbar: {
show: true, show: true,
tools: { tools: {
@@ -82,7 +82,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
horizontal: 10 horizontal: 10
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', colors: theme === 'dark' ? '#fff' : '#000',
} }
}, },
dataLabels: { dataLabels: {
@@ -101,7 +101,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
} }
}, },
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa" return val + " mahasiswa"