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

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);