Change color
This commit is contained in:
@@ -20,7 +20,7 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [data, setData] = useState<TotalPrestasiData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -106,7 +106,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
@@ -122,7 +122,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
@@ -137,22 +137,22 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: theme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
color: theme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
@@ -161,18 +161,18 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: theme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
@@ -181,7 +181,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
},
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
@@ -198,11 +198,11 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
@@ -259,14 +259,14 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && series.length > 0 && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
width="100%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user