From 3bed181805ed6ddee62b48d56375145a47e202b0 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 27 Mar 2026 14:55:10 +0800
Subject: [PATCH] fix: chart surat barchart not rendering - fix multiple issues

1. ResponsiveContainer Layout Issue:
   - Wrapped in Box with explicit height (300px)
   - Changed ResponsiveContainer height to "100%" (relative to parent)
   - Fixes chart not rendering due to height constraint issue

2. Bar Fill Color:
   - Changed from CSS variable "var(--mantine-color-blue-filled)"
   - To direct hex colors: #3B82F6 (light) / #60A5FA (dark)
   - Fixes bar color not resolving

3. Empty Data Handling:
   - Added check for data.length > 0
   - Shows friendly message when no data available
   - Prevents rendering empty chart

4. YAxis Improvement:
   - Added allowDecimals={false} for cleaner integer display

5. Enhanced Debug Logging:
   - Added emoji icons for easier console scanning
   - Better error messages

Files changed:
- dashboard/chart-surat.tsx: Fixed all chart rendering issues

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 src/components/dashboard/chart-surat.tsx | 89 +++++++++++++-----------
 1 file changed, 50 insertions(+), 39 deletions(-)

diff --git a/src/components/dashboard/chart-surat.tsx b/src/components/dashboard/chart-surat.tsx
index 18b1535..e8c759c 100644
--- a/src/components/dashboard/chart-surat.tsx
+++ b/src/components/dashboard/chart-surat.tsx
@@ -36,19 +36,21 @@ export function ChartSurat() {
 		async function fetchTrends() {
 			try {
 				const res = await apiClient.GET("/api/complaint/service-trends");
-				console.log("Service trends response:", res);
-				if (res.data?.data) {
+				console.log("📊 Service trends response:", res);
+				
+				if (res.data?.data && res.data.data.length > 0) {
 					const chartData = (res.data.data as { month: string; count: number }[]).map((d) => ({
 						month: d.month,
 						value: Number(d.count),
 					}));
-					console.log("Mapped chart data:", chartData);
+					console.log("📈 Mapped chart data:", chartData);
 					setData(chartData);
 				} else {
-					console.log("No data in response");
+					console.log("⚠️ No data in response or empty data array");
+					setData([]);
 				}
 			} catch (error) {
-				console.error("Failed to fetch service trends", error);
+				console.error("❌ Failed to fetch service trends", error);
 			} finally {
 				setLoading(false);
 			}
@@ -101,46 +103,55 @@ export function ChartSurat() {
 					</svg>
 				</ActionIcon>
 			</Group>
-			<ResponsiveContainer width="100%" height={300}>
+			<Box style={{ width: "100%", height: 300 }}>
 				{loading ? (
 					<Group justify="center" align="center" h="100%">
 						<Loader />
 					</Group>
+				) : data.length > 0 ? (
+					<ResponsiveContainer width="100%" height="100%">
+						<BarChart data={data}>
+							<CartesianGrid
+								strokeDasharray="3 3"
+								vertical={false}
+								stroke={dark ? "#334155" : "#e5e7eb"}
+							/>
+							<XAxis
+								dataKey="month"
+								axisLine={false}
+								tickLine={false}
+								tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+							/>
+							<YAxis
+								axisLine={false}
+								tickLine={false}
+								tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+								allowDecimals={false}
+							/>
+							<Tooltip
+								contentStyle={{
+									backgroundColor: dark ? "#1E293B" : "white",
+									borderColor: dark ? "#334155" : "#e5e7eb",
+									borderRadius: "8px",
+									boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+								}}
+								labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+							/>
+							<Bar
+								dataKey="value"
+								fill={dark ? "#60A5FA" : "#3B82F6"}
+								radius={[4, 4, 0, 0]}
+							/>
+						</BarChart>
+					</ResponsiveContainer>
 				) : (
-					<BarChart data={data}>
-						<CartesianGrid
-							strokeDasharray="3 3"
-							vertical={false}
-							stroke={dark ? "#334155" : "#e5e7eb"}
-						/>
-						<XAxis
-							dataKey="month"
-							axisLine={false}
-							tickLine={false}
-							tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
-						/>
-						<YAxis
-							axisLine={false}
-							tickLine={false}
-							tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
-						/>
-						<Tooltip
-							contentStyle={{
-								backgroundColor: dark ? "#1E293B" : "white",
-								borderColor: dark ? "#334155" : "#e5e7eb",
-								borderRadius: "8px",
-								boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
-							}}
-							labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
-						/>
-						<Bar
-							dataKey="value"
-							fill="var(--mantine-color-blue-filled)"
-							radius={[4, 4, 0, 0]}
-						/>
-					</BarChart>
+					<Group justify="center" align="center" h="100%">
+						<Text size="sm" c="dimmed">
+							Tidak ada data pengajuan surat 6 bulan terakhir
+						</Text>
+					</Group>
 				)}
-			</ResponsiveContainer>
+			</Box>
 		</Card>
 	);
 }