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

Change color

Browse Source
This commit is contained in:
Randa Firman Putra
2025-07-15 16:03:11 +07:00
parent ef630ef0d5
commit fb1ddecc37
32 changed files with 362 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/charts/AsalDaerahLulusChart.tsx
View File

@@ -38,7 +38,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -56,14 +56,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
},
style: {
fontSize: '14px',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
offsetX: 10,
},
stroke: {
show: true,
width: 1,
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
},
xaxis: {
categories: [],
@@ -72,13 +72,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -88,13 +88,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '14px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === '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' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
@@ -128,13 +128,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
colors: [currentTheme === 'dark' || systemTheme === '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' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -160,20 +160,20 @@ 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' ? '#fff' : '#000'
color: currentTheme === 'dark' || systemTheme === '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: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light'
theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
}
}));
}, [theme, systemTheme]);
@@ -267,13 +267,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[600px] w-full">
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}
type="bar"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>