Fix Bug
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user