feat: add enhanced debugging for chart surat

- Added detailed console logging with response structure dump
- Added Array.isArray check for data validation
- Added test data fallback (commented out) for manual testing
- Added emoji indicators for easier debugging

Testing instructions:
1. Open browser DevTools console
2. Look for 📊 📈  ⚠️  emoji logs
3. If no data appears, check if API returns 401 (unauthorized)
4. To test chart rendering, uncomment the DEBUG useEffect block

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-03-27 14:59:16 +08:00
parent 3bed181805
commit 5058e2cc1c

View File

@@ -32,25 +32,41 @@ export function ChartSurat() {
const [data, setData] = useState<ChartData[]>([]);
const [loading, setLoading] = useState(true);
// DEBUG: Uncomment to test chart rendering with sample data
// useEffect(() => {
// setData([
// { month: "Oct", value: 1 },
// { month: "Nov", value: 1 },
// { month: "Dec", value: 1 },
// { month: "Feb", value: 1 },
// { month: "Mar", value: 1 },
// ]);
// setLoading(false);
// }, []);
useEffect(() => {
async function fetchTrends() {
try {
const res = await apiClient.GET("/api/complaint/service-trends");
console.log("📊 Service trends response:", res);
if (res.data?.data && res.data.data.length > 0) {
// Check if response has data
if (res.data?.data && Array.isArray(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("✅ Chart data count:", chartData.length);
setData(chartData);
} else {
console.log("⚠️ No data in response or empty data array");
console.warn("⚠️ No data in response or empty array");
console.log("Response structure:", JSON.stringify(res, null, 2));
setData([]);
}
} catch (error) {
console.error("❌ Failed to fetch service trends", error);
console.log("Error details:", error);
} finally {
setLoading(false);
}