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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user