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

30
components/charts/IpkStatusChart.tsx
View File

@@ -21,7 +21,7 @@ interface Props {
selectedStatus: string;
}
export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) {
export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme, systemTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const [data, setData] = useState<IpkStatusData[]>([]);
@@ -94,7 +94,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
@@ -116,7 +116,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
@@ -130,7 +130,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: [theme === 'dark' ? '#fff' : '#000']
colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
},
background: {
enabled: false
@@ -144,22 +144,22 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: 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: {
@@ -168,7 +168,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
},
min: 0,
@@ -176,7 +176,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(2);
@@ -184,11 +184,11 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
@@ -199,7 +199,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(2);
@@ -214,7 +214,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
}
}
};