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) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const [data, setData] = useState<AsalDaerahBeasiswaData[]>([]);
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";

19
components/charts/AsalDaerahChart.tsx
View File

@@ -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<string | null>(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);

38
components/charts/AsalDaerahLulusChart.tsx
View File

@@ -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<ChartData[]>([]);
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);

19
components/charts/AsalDaerahPerAngkatanChart.tsx
View File

@@ -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<string | null>(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);

18
components/charts/AsalDaerahPrestasiChart.tsx
View File

@@ -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<AsalDaerahPrestasiData[]>([]);
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";

18
components/charts/AsalDaerahStatusChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
}
export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<AsalDaerahStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -77,7 +77,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
toolbar: {
show: true,
},
background: theme === 'dark' || 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";

52
components/charts/IPKBeasiswaChart.tsx
View File

@@ -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<string | null>(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);

54
components/charts/IPKChart.tsx
View File

@@ -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<string | null>(null);
const [data, setData] = useState<IPKData[]>([]);
const [series, setSeries] = useState<ApexAxisChartSeries>([{
name: 'Rata-rata IPK',
data: []
data: []
}]);
const [options, setOptions] = useState<ApexOptions>({
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);

30
components/charts/IPKJenisKelaminChart.tsx
View File

@@ -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<any[]>([]);
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'],
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);

52
components/charts/IPKLulusTepatChart.tsx
View File

@@ -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<string | null>(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);

52
components/charts/IPKPrestasiChart.tsx
View File

@@ -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<string | null>(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);

28
components/charts/IpkStatusChart.tsx
View File

@@ -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<IpkStatusData[]>([]);
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'
}
}
};

26
components/charts/JenisPendaftaranBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
reset: true
}
},
background: theme === 'dark' || 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,

8
components/charts/JenisPendaftaranBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' || 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"

6
components/charts/JenisPendaftaranChart.tsx
View File

@@ -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<string | null>(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);

26
components/charts/JenisPendaftaranLulusChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -92,7 +92,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' || 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,

8
components/charts/JenisPendaftaranLulusPieChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -66,7 +66,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' || 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"

2
components/charts/JenisPendaftaranPerAngkatanChart.tsx
View File

@@ -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<string | null>(null);

26
components/charts/JenisPendaftaranPrestasiChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
reset: true
}
},
background: theme === 'dark' || 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,

8
components/charts/JenisPendaftaranPrestasiPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' || 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"

18
components/charts/JenisPendaftaranStatusChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
}
export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -81,7 +81,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
toolbar: {
show: true,
},
background: theme === 'dark' || 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";

8
components/charts/JenisPendaftaranStatusPieChart.tsx
View File

@@ -22,7 +22,7 @@ interface Props {
}
export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -68,7 +68,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
reset: true
}
},
background: theme === 'dark' || 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"

26
components/charts/LulusTepatWaktuChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function LulusTepatWaktuChart({ selectedYear }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<LulusTepatWaktuData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -110,7 +110,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' || 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,

8
components/charts/LulusTepatWaktuPieChart.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
}
export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<LulusTepatWaktuData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -66,7 +66,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
reset: true
}
},
background: theme === 'dark' || 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"

26
components/charts/NamaBeasiswaChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<NamaBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
reset: true
}
},
background: theme === 'dark' || 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,

8
components/charts/NamaBeasiswaPieChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
}
export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
const { theme, systemTheme } = useTheme();
const { theme } = useTheme();
const [data, setData] = useState<NamaBeasiswaData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' || 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"