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

First Commit

Browse Source
This commit is contained in:
Randa Firman Putra
2025-09-06 20:55:57 +07:00
parent 87986da7ee
commit bf248459f8
6 changed files with 63 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/dashboard/page.tsx
View File

@@ -104,7 +104,7 @@ export default function TotalMahasiswaPage() {
</div>
{/* Demographics Section */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-1 gap-4">
<AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
</div>
</div>

2
app/page.tsx
View File

@@ -203,7 +203,7 @@ export default function DashboardPage() {
<div className="col-span-1">
<JenisPendaftaranChart />
</div>
<div className="col-span-1">
<div className="col-span-2">
<AsalDaerahChart />
</div>
</div>

14
components/charts/AsalDaerahChart.tsx
View File

@@ -253,6 +253,15 @@ export default function AsalDaerahChart() {
);
}
// Calculate dynamic height based on number of kabupaten
const calculateHeight = () => {
const minHeight = 200;
const barHeight = 25; // Height per bar in pixels
const padding = 100; // Extra space for title, legend, etc.
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
return `${dynamicHeight}px`;
};
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
@@ -261,7 +270,10 @@ export default function AsalDaerahChart() {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[400px] sm:h-[400px] md:h-[400px] w-full max-w-5xl mx-auto">
<div
className="w-full max-w-5xl mx-auto"
style={{ height: calculateHeight() }}
>
<Chart
options={options}
series={series}

14
components/charts/AsalDaerahPerAngkatanChart.tsx
View File

@@ -299,6 +299,15 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
);
}
// Calculate dynamic height based on number of kabupaten
const calculateHeight = () => {
const minHeight = 200;
const barHeight = 25; // Height per bar in pixels
const padding = 100; // Extra space for title, legend, etc.
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
return `${dynamicHeight}px`;
};
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
@@ -307,7 +316,10 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
<div
className="w-full max-w-5xl mx-auto"
style={{ height: calculateHeight() }}
>
<Chart
options={options}
series={series}

33
package-lock.json generated
View File

@@ -30,6 +30,7 @@
"cmdk": "^1.1.1",
"jose": "^6.0.11",
"jsonwebtoken": "^9.0.2",
"leaflet": "^1.9.4",
"lucide-react": "^0.488.0",
"next": "15.3.0",
"next-auth": "^4.24.11",
@@ -38,6 +39,7 @@
"react-apexcharts": "^1.7.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.60.0",
"react-leaflet": "^5.0.0",
"recharts": "^2.15.2",
"tailwind-merge": "^3.2.0",
"tw-animate-css": "^1.2.5",
@@ -2500,6 +2502,17 @@
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
"license": "MIT"
},
"node_modules/@react-leaflet/core": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
"integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
"license": "Hippocratic-2.1",
"peerDependencies": {
"leaflet": "^1.9.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
},
"node_modules/@standard-schema/utils": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -3572,6 +3585,12 @@
"safe-buffer": "^5.0.1"
}
},
"node_modules/leaflet": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
"license": "BSD-2-Clause"
},
"node_modules/lightningcss": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
@@ -4258,6 +4277,20 @@
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
"license": "MIT"
},
"node_modules/react-leaflet": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
"integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
"license": "Hippocratic-2.1",
"dependencies": {
"@react-leaflet/core": "^3.0.0"
},
"peerDependencies": {
"leaflet": "^1.9.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
},
"node_modules/react-remove-scroll": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",

2
package.json
View File

@@ -32,6 +32,7 @@
"cmdk": "^1.1.1",
"jose": "^6.0.11",
"jsonwebtoken": "^9.0.2",
"leaflet": "^1.9.4",
"lucide-react": "^0.488.0",
"next": "15.3.0",
"next-auth": "^4.24.11",
@@ -40,6 +41,7 @@
"react-apexcharts": "^1.7.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.60.0",
"react-leaflet": "^5.0.0",
"recharts": "^2.15.2",
"tailwind-merge": "^3.2.0",
"tw-animate-css": "^1.2.5",