From efe371ce034e7934b2040ce2b61b3b602d252de4 Mon Sep 17 00:00:00 2001 From: Randa Firman Putra Date: Tue, 15 Jul 2025 21:41:39 +0700 Subject: [PATCH] Fix Bug --- components/charts/AsalDaerahBeasiswaChart.tsx | 18 +++---- components/charts/AsalDaerahChart.tsx | 19 ++++--- components/charts/AsalDaerahLulusChart.tsx | 38 ++++++------- .../charts/AsalDaerahPerAngkatanChart.tsx | 19 ++++--- components/charts/AsalDaerahPrestasiChart.tsx | 18 +++---- components/charts/AsalDaerahStatusChart.tsx | 18 +++---- components/charts/IPKBeasiswaChart.tsx | 52 +++++++++--------- components/charts/IPKChart.tsx | 54 +++++++++---------- components/charts/IPKJenisKelaminChart.tsx | 30 +++++------ components/charts/IPKLulusTepatChart.tsx | 52 +++++++++--------- components/charts/IPKPrestasiChart.tsx | 52 +++++++++--------- components/charts/IpkStatusChart.tsx | 28 +++++----- .../charts/JenisPendaftaranBeasiswaChart.tsx | 26 ++++----- .../JenisPendaftaranBeasiswaPieChart.tsx | 8 +-- components/charts/JenisPendaftaranChart.tsx | 6 +-- .../charts/JenisPendaftaranLulusChart.tsx | 26 ++++----- .../charts/JenisPendaftaranLulusPieChart.tsx | 8 +-- .../JenisPendaftaranPerAngkatanChart.tsx | 2 +- .../charts/JenisPendaftaranPrestasiChart.tsx | 26 ++++----- .../JenisPendaftaranPrestasiPieChart.tsx | 8 +-- .../charts/JenisPendaftaranStatusChart.tsx | 18 +++---- .../charts/JenisPendaftaranStatusPieChart.tsx | 8 +-- components/charts/LulusTepatWaktuChart.tsx | 26 ++++----- components/charts/LulusTepatWaktuPieChart.tsx | 8 +-- components/charts/NamaBeasiswaChart.tsx | 26 ++++----- components/charts/NamaBeasiswaPieChart.tsx | 8 +-- 26 files changed, 300 insertions(+), 302 deletions(-) diff --git a/components/charts/AsalDaerahBeasiswaChart.tsx b/components/charts/AsalDaerahBeasiswaChart.tsx index 0ce40a7..6cc1c34 100644 --- a/components/charts/AsalDaerahBeasiswaChart.tsx +++ b/components/charts/AsalDaerahBeasiswaChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -79,7 +79,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -99,14 +99,14 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea }, style: { fontSize: '14px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] }, offsetX: 10, }, stroke: { show: true, width: 1, - colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'], + colors: [theme === 'dark' ? '#374151' : '#E5E7EB'], }, xaxis: { categories: [...new Set(data.map(item => item.kabupaten))].sort(), @@ -115,13 +115,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { 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: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '14px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, maxWidth: 200, }, @@ -155,7 +155,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea }, colors: ['#3B82F6'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; diff --git a/components/charts/AsalDaerahChart.tsx b/components/charts/AsalDaerahChart.tsx index 1fe2894..fdf1562 100644 --- a/components/charts/AsalDaerahChart.tsx +++ b/components/charts/AsalDaerahChart.tsx @@ -15,7 +15,7 @@ interface AsalDaerahData { } export default function AsalDaerahChart() { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -109,18 +109,17 @@ export default function AsalDaerahChart() { // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, xaxis: { @@ -129,14 +128,14 @@ export default function AsalDaerahChart() { ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { ...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), 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: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' ? 'dark' : 'light' + theme: theme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/AsalDaerahLulusChart.tsx b/components/charts/AsalDaerahLulusChart.tsx index c31f02f..1938828 100644 --- a/components/charts/AsalDaerahLulusChart.tsx +++ b/components/charts/AsalDaerahLulusChart.tsx @@ -20,7 +20,7 @@ interface ChartData { } export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusChartProps) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [chartData, setChartData] = useState([]); const [isLoading, setIsLoading] = useState(true); @@ -38,7 +38,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh toolbar: { show: true, }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -56,14 +56,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh }, style: { fontSize: '14px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] }, offsetX: 10, }, stroke: { show: true, width: 1, - colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'], + colors: [theme === 'dark' ? '#374151' : '#E5E7EB'], }, xaxis: { categories: [], @@ -72,13 +72,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { 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: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '14px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, maxWidth: 200, }, @@ -112,7 +112,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh }, colors: ['#3B82F6'], // Blue color for bars tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; @@ -123,18 +123,18 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; - setOptions(prev => ({ + const currentTheme = theme; + setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: currentTheme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [currentTheme === 'dark' ? '#fff' : '#000'] } }, xaxis: { @@ -143,14 +143,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...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), 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: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' + theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/AsalDaerahPerAngkatanChart.tsx b/components/charts/AsalDaerahPerAngkatanChart.tsx index d69ed9e..1b8fcb4 100644 --- a/components/charts/AsalDaerahPerAngkatanChart.tsx +++ b/components/charts/AsalDaerahPerAngkatanChart.tsx @@ -19,7 +19,7 @@ interface Props { } export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -139,18 +139,17 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) { // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, xaxis: { @@ -159,14 +158,14 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) { ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { ...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), 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: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' ? 'dark' : 'light' + theme: theme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/AsalDaerahPrestasiChart.tsx b/components/charts/AsalDaerahPrestasiChart.tsx index 8dd5533..861b1de 100644 --- a/components/charts/AsalDaerahPrestasiChart.tsx +++ b/components/charts/AsalDaerahPrestasiChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPrestasi }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -79,7 +79,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -99,14 +99,14 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre }, style: { fontSize: '14px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] }, offsetX: 10, }, stroke: { show: true, width: 1, - colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'], + colors: [theme === 'dark' ? '#374151' : '#E5E7EB'], }, xaxis: { categories: [...new Set(data.map(item => item.kabupaten))].sort(), @@ -115,13 +115,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { 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: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '14px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, maxWidth: 200, }, @@ -155,7 +155,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre }, colors: ['#3B82F6'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; diff --git a/components/charts/AsalDaerahStatusChart.tsx b/components/charts/AsalDaerahStatusChart.tsx index 0527254..ec41394 100644 --- a/components/charts/AsalDaerahStatusChart.tsx +++ b/components/charts/AsalDaerahStatusChart.tsx @@ -22,7 +22,7 @@ interface Props { } export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -77,7 +77,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: toolbar: { show: true, }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -95,7 +95,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] }, offsetX: 10, }, @@ -111,13 +111,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { 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: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { 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, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, colors: ['#008FFB'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; diff --git a/components/charts/IPKBeasiswaChart.tsx b/components/charts/IPKBeasiswaChart.tsx index 247f87e..478fe1d 100644 --- a/components/charts/IPKBeasiswaChart.tsx +++ b/components/charts/IPKBeasiswaChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -44,7 +44,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', zoom: { enabled: true, type: 'x', @@ -59,7 +59,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { markers: { size: 5, strokeWidth: 2, - strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], + strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'], colors: ['#3B82F6'], hover: { size: 7 @@ -86,22 +86,22 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -110,13 +110,13 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, formatter: function (val: number) { return val.toFixed(2); @@ -126,11 +126,11 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { max: 4, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, @@ -141,7 +141,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { }, colors: ['#3B82F6'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val.toFixed(2); @@ -156,30 +156,30 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { position: 'top', horizontalAlign: 'right', labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }); // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; + const currentTheme = theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: currentTheme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [currentTheme === 'dark' ? '#fff' : '#000'] }, background: { ...prev.dataLabels?.background, - foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', - borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6' + foreColor: currentTheme === 'dark' ? '#fff' : '#000', + borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6' } }, xaxis: { @@ -188,23 +188,23 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...prev.xaxis?.labels, style: { ...prev.xaxis?.labels?.style, - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } }, axisBorder: { ...prev.xaxis?.axisBorder, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { ...prev.xaxis?.axisTicks, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -213,23 +213,23 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' + theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/IPKChart.tsx b/components/charts/IPKChart.tsx index c993155..6e2c207 100644 --- a/components/charts/IPKChart.tsx +++ b/components/charts/IPKChart.tsx @@ -15,14 +15,14 @@ interface IPKData { } export default function IPKChart() { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [data, setData] = useState([]); const [series, setSeries] = useState([{ name: 'Rata-rata IPK', - data: [] + data: [] }]); const [options, setOptions] = useState({ chart: { @@ -39,7 +39,7 @@ export default function IPKChart() { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', zoom: { enabled: true, type: 'x', @@ -54,7 +54,7 @@ export default function IPKChart() { markers: { size: 5, strokeWidth: 2, - strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], + strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'], colors: ['#3B82F6'], hover: { size: 7 @@ -81,22 +81,22 @@ export default function IPKChart() { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -105,13 +105,13 @@ export default function IPKChart() { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, formatter: function (val: number) { return val.toFixed(2); @@ -121,11 +121,11 @@ export default function IPKChart() { max: 4, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, @@ -136,7 +136,7 @@ export default function IPKChart() { }, colors: ['#3B82F6'], // Blue color for line tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val.toFixed(2); @@ -151,30 +151,30 @@ export default function IPKChart() { position: 'top', horizontalAlign: 'right', labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }); // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; + const currentTheme = theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: currentTheme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [currentTheme === 'dark' ? '#fff' : '#000'] }, background: { ...prev.dataLabels?.background, - foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', - borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6' + foreColor: currentTheme === 'dark' ? '#fff' : '#000', + borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6' } }, xaxis: { @@ -183,23 +183,23 @@ export default function IPKChart() { ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...prev.xaxis?.labels, style: { ...prev.xaxis?.labels?.style, - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } }, axisBorder: { ...prev.xaxis?.axisBorder, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { ...prev.xaxis?.axisTicks, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -208,23 +208,23 @@ export default function IPKChart() { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' + theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/IPKJenisKelaminChart.tsx b/components/charts/IPKJenisKelaminChart.tsx index f124afc..e74b5bf 100644 --- a/components/charts/IPKJenisKelaminChart.tsx +++ b/components/charts/IPKJenisKelaminChart.tsx @@ -13,7 +13,7 @@ interface Props { } export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [series, setSeries] = useState([]); const [categories, setCategories] = useState([]); @@ -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'], plotOptions: { @@ -77,7 +77,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, xaxis: { @@ -87,7 +87,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) { style: { fontSize: '14px', 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: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val.toFixed(2) + " IPK"; @@ -119,18 +119,18 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) { // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; + const currentTheme = theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: currentTheme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [currentTheme === 'dark' ? '#fff' : '#000'] } }, xaxis: { @@ -139,13 +139,13 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) { ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...prev.xaxis?.labels, 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, style: { ...(prev.yaxis as any)?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...(prev.yaxis as any)?.labels, style: { - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' + theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/IPKLulusTepatChart.tsx b/components/charts/IPKLulusTepatChart.tsx index 31f9d69..fbfbf14 100644 --- a/components/charts/IPKLulusTepatChart.tsx +++ b/components/charts/IPKLulusTepatChart.tsx @@ -19,7 +19,7 @@ interface IPKLulusTepatChartProps { } export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartProps) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -43,7 +43,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', zoom: { enabled: true, type: 'x', @@ -58,7 +58,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP markers: { size: 5, strokeWidth: 2, - strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], + strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'], colors: ['#3B82F6'], hover: { size: 7 @@ -85,22 +85,22 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -109,13 +109,13 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, formatter: function (val: number) { return val.toFixed(2); @@ -125,11 +125,11 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP max: 4, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, @@ -140,7 +140,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP }, colors: ['#3B82F6'], // Blue color for line tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val.toFixed(2); @@ -155,30 +155,30 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP position: 'top', horizontalAlign: 'right', labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }); // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; + const currentTheme = theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: currentTheme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [currentTheme === 'dark' ? '#fff' : '#000'] }, background: { ...prev.dataLabels?.background, - foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', - borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6' + foreColor: currentTheme === 'dark' ? '#fff' : '#000', + borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6' } }, xaxis: { @@ -187,23 +187,23 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...prev.xaxis?.labels, style: { ...prev.xaxis?.labels?.style, - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } }, axisBorder: { ...prev.xaxis?.axisBorder, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { ...prev.xaxis?.axisTicks, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -212,23 +212,23 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' + theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/IPKPrestasiChart.tsx b/components/charts/IPKPrestasiChart.tsx index c0c5130..192e0df 100644 --- a/components/charts/IPKPrestasiChart.tsx +++ b/components/charts/IPKPrestasiChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -44,7 +44,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', zoom: { enabled: true, type: 'x', @@ -59,7 +59,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { markers: { size: 5, strokeWidth: 2, - strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], + strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'], colors: ['#3B82F6'], hover: { size: 7 @@ -86,22 +86,22 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -110,13 +110,13 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, formatter: function (val: number) { return val.toFixed(2); @@ -126,11 +126,11 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { max: 4, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, @@ -141,7 +141,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { }, colors: ['#3B82F6'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val.toFixed(2); @@ -156,30 +156,30 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { position: 'top', horizontalAlign: 'right', labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }); // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; + const currentTheme = theme; setOptions(prev => ({ ...prev, chart: { ...prev.chart, - background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: currentTheme === 'dark' ? '#0F172B' : '#fff', }, dataLabels: { ...prev.dataLabels, style: { ...prev.dataLabels?.style, - colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [currentTheme === 'dark' ? '#fff' : '#000'] }, background: { ...prev.dataLabels?.background, - foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', - borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6' + foreColor: currentTheme === 'dark' ? '#fff' : '#000', + borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6' } }, xaxis: { @@ -188,23 +188,23 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { ...prev.xaxis?.title, style: { ...prev.xaxis?.title?.style, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...prev.xaxis?.labels, style: { ...prev.xaxis?.labels?.style, - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } }, axisBorder: { ...prev.xaxis?.axisBorder, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { ...prev.xaxis?.axisTicks, - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: currentTheme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -213,23 +213,23 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style), - color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: currentTheme === 'dark' ? '#fff' : '#000' } }, labels: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels), style: { ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style), - colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: currentTheme === 'dark' ? '#fff' : '#000' } } }, tooltip: { ...prev.tooltip, - theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light' + theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/IpkStatusChart.tsx b/components/charts/IpkStatusChart.tsx index 82e6ade..84f9f10 100644 --- a/components/charts/IpkStatusChart.tsx +++ b/components/charts/IpkStatusChart.tsx @@ -22,7 +22,7 @@ interface Props { } export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -94,7 +94,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', zoom: { enabled: true, type: 'x', @@ -116,7 +116,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) markers: { size: 5, strokeWidth: 2, - strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'], + strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'], colors: ['#3B82F6'], hover: { size: 7 @@ -130,7 +130,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) style: { fontSize: '14px', fontWeight: 'bold', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] }, background: { enabled: false @@ -144,22 +144,22 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -168,7 +168,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, min: 0, @@ -176,7 +176,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' }, formatter: function (val: number) { return val.toFixed(2); @@ -184,11 +184,11 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, @@ -199,7 +199,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) }, colors: ['#3B82F6'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val.toFixed(2); @@ -214,7 +214,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) position: 'top', horizontalAlign: 'right', labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } } }; diff --git a/components/charts/JenisPendaftaranBeasiswaChart.tsx b/components/charts/JenisPendaftaranBeasiswaChart.tsx index aa961a2..03820b2 100644 --- a/components/charts/JenisPendaftaranBeasiswaChart.tsx +++ b/components/charts/JenisPendaftaranBeasiswaChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -95,7 +95,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -111,7 +111,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, stroke: { @@ -126,22 +126,22 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -150,18 +150,18 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, tickAmount: 5, }, @@ -170,7 +170,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe }, colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; @@ -187,11 +187,11 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe horizontal: 10, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, diff --git a/components/charts/JenisPendaftaranBeasiswaPieChart.tsx b/components/charts/JenisPendaftaranBeasiswaPieChart.tsx index 1484531..7846493 100644 --- a/components/charts/JenisPendaftaranBeasiswaPieChart.tsx +++ b/components/charts/JenisPendaftaranBeasiswaPieChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -55,7 +55,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte const chartOptions: ApexOptions = { chart: { type: 'pie', - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', toolbar: { show: true, tools: { @@ -82,7 +82,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte horizontal: 10 }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, dataLabels: { @@ -101,7 +101,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa" diff --git a/components/charts/JenisPendaftaranChart.tsx b/components/charts/JenisPendaftaranChart.tsx index 11918b5..d86be71 100644 --- a/components/charts/JenisPendaftaranChart.tsx +++ b/components/charts/JenisPendaftaranChart.tsx @@ -15,7 +15,7 @@ interface JenisPendaftaranData { } export default function JenisPendaftaranChart() { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -115,7 +115,7 @@ export default function JenisPendaftaranChart() { // Update theme when it changes useEffect(() => { - const currentTheme = theme === 'system' ? systemTheme : theme; + const currentTheme = theme; setOptions(prev => ({ ...prev, chart: { @@ -175,7 +175,7 @@ export default function JenisPendaftaranChart() { theme: currentTheme === 'dark' ? 'dark' : 'light' } })); - }, [theme, systemTheme]); + }, [theme]); useEffect(() => { setMounted(true); diff --git a/components/charts/JenisPendaftaranLulusChart.tsx b/components/charts/JenisPendaftaranLulusChart.tsx index 33e5333..7b8aa6c 100644 --- a/components/charts/JenisPendaftaranLulusChart.tsx +++ b/components/charts/JenisPendaftaranLulusChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -92,7 +92,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -108,7 +108,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, stroke: { @@ -123,22 +123,22 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -147,18 +147,18 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, tickAmount: 5, }, @@ -167,7 +167,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { }, colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; @@ -184,11 +184,11 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) { horizontal: 10, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, diff --git a/components/charts/JenisPendaftaranLulusPieChart.tsx b/components/charts/JenisPendaftaranLulusPieChart.tsx index 16c1e64..05b6e0b 100644 --- a/components/charts/JenisPendaftaranLulusPieChart.tsx +++ b/components/charts/JenisPendaftaranLulusPieChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -66,7 +66,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, labels: [], colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], @@ -81,7 +81,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) { horizontal: 10 }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', + colors: theme === 'dark' ? '#fff' : '#000', } }, dataLabels: { @@ -100,7 +100,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) { } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa" diff --git a/components/charts/JenisPendaftaranPerAngkatanChart.tsx b/components/charts/JenisPendaftaranPerAngkatanChart.tsx index 8fd00a5..8bbfc63 100644 --- a/components/charts/JenisPendaftaranPerAngkatanChart.tsx +++ b/components/charts/JenisPendaftaranPerAngkatanChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); diff --git a/components/charts/JenisPendaftaranPrestasiChart.tsx b/components/charts/JenisPendaftaranPrestasiChart.tsx index 11d9518..747f01e 100644 --- a/components/charts/JenisPendaftaranPrestasiChart.tsx +++ b/components/charts/JenisPendaftaranPrestasiChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -94,7 +94,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -110,7 +110,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, stroke: { @@ -125,22 +125,22 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -149,18 +149,18 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, }, fill: { @@ -168,7 +168,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: }, colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; @@ -185,11 +185,11 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: horizontal: 10, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, diff --git a/components/charts/JenisPendaftaranPrestasiPieChart.tsx b/components/charts/JenisPendaftaranPrestasiPieChart.tsx index 653b4fd..b6f3422 100644 --- a/components/charts/JenisPendaftaranPrestasiPieChart.tsx +++ b/components/charts/JenisPendaftaranPrestasiPieChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -55,7 +55,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte const chartOptions: ApexOptions = { chart: { type: 'pie', - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', toolbar: { show: true, tools: { @@ -82,7 +82,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte horizontal: 10 }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, dataLabels: { @@ -101,7 +101,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa" diff --git a/components/charts/JenisPendaftaranStatusChart.tsx b/components/charts/JenisPendaftaranStatusChart.tsx index e4938d2..6639010 100644 --- a/components/charts/JenisPendaftaranStatusChart.tsx +++ b/components/charts/JenisPendaftaranStatusChart.tsx @@ -22,7 +22,7 @@ interface Props { } export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -81,7 +81,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat toolbar: { show: true, }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -96,7 +96,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, stroke: { @@ -111,13 +111,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { 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: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, min:0, @@ -152,12 +152,12 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat horizontal: 10, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; diff --git a/components/charts/JenisPendaftaranStatusPieChart.tsx b/components/charts/JenisPendaftaranStatusPieChart.tsx index c092e6c..aadb7a1 100644 --- a/components/charts/JenisPendaftaranStatusPieChart.tsx +++ b/components/charts/JenisPendaftaranStatusPieChart.tsx @@ -22,7 +22,7 @@ interface Props { } export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedStatus }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -68,7 +68,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, labels: [], colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'], @@ -83,7 +83,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS horizontal: 10 }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', + colors: theme === 'dark' ? '#fff' : '#000', } }, dataLabels: { @@ -102,7 +102,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa" diff --git a/components/charts/LulusTepatWaktuChart.tsx b/components/charts/LulusTepatWaktuChart.tsx index 1275843..88edc91 100644 --- a/components/charts/LulusTepatWaktuChart.tsx +++ b/components/charts/LulusTepatWaktuChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function LulusTepatWaktuChart({ selectedYear }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -110,7 +110,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -126,7 +126,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, stroke: { @@ -141,22 +141,22 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, yaxis: { @@ -165,18 +165,18 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, tickAmount: 5, }, @@ -185,7 +185,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { }, colors: ['#3B82F6', '#EC4899'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; @@ -202,11 +202,11 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { horizontal: 10, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, diff --git a/components/charts/LulusTepatWaktuPieChart.tsx b/components/charts/LulusTepatWaktuPieChart.tsx index 71af2db..d0d6971 100644 --- a/components/charts/LulusTepatWaktuPieChart.tsx +++ b/components/charts/LulusTepatWaktuPieChart.tsx @@ -20,7 +20,7 @@ interface Props { } export default function LulusTepatWaktuPieChart({ selectedYear }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -66,7 +66,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) { reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, labels: ['Laki-laki', 'Perempuan'], colors: ['#3B82F6', '#EC4899'], @@ -81,7 +81,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) { horizontal: 10 }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', + colors: theme === 'dark' ? '#fff' : '#000', } }, dataLabels: { @@ -100,7 +100,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) { } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa" diff --git a/components/charts/NamaBeasiswaChart.tsx b/components/charts/NamaBeasiswaChart.tsx index 4bb3304..1af5e47 100644 --- a/components/charts/NamaBeasiswaChart.tsx +++ b/components/charts/NamaBeasiswaChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -95,7 +95,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa reset: true } }, - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', }, plotOptions: { bar: { @@ -111,7 +111,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }, style: { fontSize: '12px', - colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] + colors: [theme === 'dark' ? '#fff' : '#000'] } }, stroke: { @@ -126,22 +126,22 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, axisTicks: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' }, tickAmount: 5, }, @@ -151,18 +151,18 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa style: { fontSize: '14px', fontWeight: 'bold', - color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + color: theme === 'dark' ? '#fff' : '#000' } }, labels: { style: { fontSize: '12px', - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, axisBorder: { show: true, - color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB' + color: theme === 'dark' ? '#374151' : '#E5E7EB' } }, fill: { @@ -170,7 +170,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }, colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'], tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"; @@ -187,11 +187,11 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa horizontal: 10, }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' + colors: theme === 'dark' ? '#fff' : '#000' } }, grid: { - borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB', + borderColor: theme === 'dark' ? '#374151' : '#E5E7EB', strokeDashArray: 4, padding: { top: 20, diff --git a/components/charts/NamaBeasiswaPieChart.tsx b/components/charts/NamaBeasiswaPieChart.tsx index ded5274..a9b58f9 100644 --- a/components/charts/NamaBeasiswaPieChart.tsx +++ b/components/charts/NamaBeasiswaPieChart.tsx @@ -21,7 +21,7 @@ interface Props { } export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) { - const { theme, systemTheme } = useTheme(); + const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -55,7 +55,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis const chartOptions: ApexOptions = { chart: { type: 'pie', - background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', + background: theme === 'dark' ? '#0F172B' : '#fff', toolbar: { show: true, tools: { @@ -82,7 +82,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis horizontal: 10 }, labels: { - colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000', + colors: theme === 'dark' ? '#fff' : '#000', } }, dataLabels: { @@ -101,7 +101,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis } }, tooltip: { - theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', + theme: theme === 'dark' ? 'dark' : 'light', y: { formatter: function (val: number) { return val + " mahasiswa"