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

Ayo Commit

Browse Source
This commit is contained in:
Randa Firman Putra
2025-07-15 21:15:45 +07:00
parent 2f3ea8c9d4
commit 01f773dfb0
12 changed files with 82 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/ClientLayout.tsx
View File

@@ -12,8 +12,8 @@ export default function ClientLayout({ children }: ClientLayoutProps) {
return ( return (
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" themes={["light", "dark"]}
enableSystem enableSystem={false}
disableTransitionOnChange disableTransitionOnChange
> >
<div className="min-h-screen"> <div className="min-h-screen">

6
components/charts/StatistikMahasiswaChart.tsx
View File

@@ -16,7 +16,7 @@ interface MahasiswaStatistik {
} }
export default function StatistikMahasiswaChart() { export default function StatistikMahasiswaChart() {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [statistikData, setStatistikData] = useState<MahasiswaStatistik[]>([]); const [statistikData, setStatistikData] = useState<MahasiswaStatistik[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -175,7 +175,7 @@ export default function StatistikMahasiswaChart() {
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
const textColor = currentTheme === 'dark' ? '#fff' : '#000'; const textColor = currentTheme === 'dark' ? '#fff' : '#000';
const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light'; const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
@@ -240,7 +240,7 @@ export default function StatistikMahasiswaChart() {
theme: tooltipTheme theme: tooltipTheme
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
// Update categories when data changes // Update categories when data changes
useEffect(() => { useEffect(() => {

6
components/charts/StatistikPerAngkatanChart.tsx
View File

@@ -18,7 +18,7 @@ interface Props {
} }
export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) { export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [statistikData, setStatistikData] = useState<GenderStatistik[]>([]); const [statistikData, setStatistikData] = useState<GenderStatistik[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -121,7 +121,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
// Update theme when it changes // Update theme when it changes
useEffect(() => { useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme;
const textColor = currentTheme === 'dark' ? '#fff' : '#000'; const textColor = currentTheme === 'dark' ? '#fff' : '#000';
const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light'; const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
@@ -150,7 +150,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
theme: tooltipTheme theme: tooltipTheme
} }
})); }));
}, [theme, systemTheme]); }, [theme]);
// Update dataLabels formatter when data changes // Update dataLabels formatter when data changes
useEffect(() => { useEffect(() => {

18
components/charts/StatusMahasiswaChart.tsx
View File

@@ -16,7 +16,7 @@ interface StatusData {
} }
export default function StatusMahasiswaChart() { export default function StatusMahasiswaChart() {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [data, setData] = useState<StatusData[]>([]); const [data, setData] = useState<StatusData[]>([]);
@@ -29,7 +29,7 @@ export default function StatusMahasiswaChart() {
toolbar: { toolbar: {
show: true, show: true,
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -44,7 +44,7 @@ export default function StatusMahasiswaChart() {
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -59,13 +59,13 @@ export default function StatusMahasiswaChart() {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -75,13 +75,13 @@ export default function StatusMahasiswaChart() {
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
min:0, min:0,
@@ -100,12 +100,12 @@ export default function StatusMahasiswaChart() {
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'], colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";

18
components/charts/StatusMahasiswaFilterChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
} }
export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatus }: Props) { export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme(); const { theme } = useTheme();
const [data, setData] = useState<StatusMahasiswaData[]>([]); const [data, setData] = useState<StatusMahasiswaData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -76,7 +76,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
toolbar: { toolbar: {
show: true, show: true,
}, },
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff', background: theme === 'dark' ? '#0F172B' : '#fff',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
@@ -91,7 +91,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
}, },
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'] colors: [theme === 'dark' ? '#fff' : '#000']
} }
}, },
stroke: { stroke: {
@@ -106,13 +106,13 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
} }
}, },
@@ -122,13 +122,13 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
style: { style: {
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold', fontWeight: 'bold',
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' color: theme === 'dark' ? '#fff' : '#000'
} }
}, },
labels: { labels: {
style: { style: {
fontSize: '12px', fontSize: '12px',
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
min:0, min:0,
@@ -147,12 +147,12 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
horizontal: 10, horizontal: 10,
}, },
labels: { labels: {
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000' colors: theme === 'dark' ? '#fff' : '#000'
} }
}, },
colors: ['#3B82F6', '#EC4899'], colors: ['#3B82F6', '#EC4899'],
tooltip: { tooltip: {
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light', theme: theme === 'dark' ? 'dark' : 'light',
y: { y: {
formatter: function (val: number) { formatter: function (val: number) {
return val + " mahasiswa"; return val + " mahasiswa";

8
components/charts/StatusMahasiswaFilterPieChart.tsx
View File

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

26
components/charts/TingkatPrestasiChart.tsx
View File

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

8
components/charts/TingkatPrestasiPieChart.tsx
View File

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

26
components/charts/TotalBeasiswaChart.tsx
View File

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

8
components/charts/TotalBeasiswaPieChart.tsx
View File

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

28
components/charts/TotalPrestasiChart.tsx
View File

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

8
components/charts/TotalPrestasiPieChart.tsx
View File

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