Fixes & Improvements

1. Robust Chart Configuration: Added generic keys like "value", "count", and "Requests" to the chartConfig in secondary-charts.tsx. This ensures that even if recharts defaults to these keys for tooltips (especially in Scatter/Pie charts), the configuration lookup will succeed and not return undefined.

2. Tooltip Safety:

   • Added hideLabel to the Pie Chart and Scatter Chart tooltips. These charts typically show individual data points where a general "header label" is redundant or error-prone to resolve.
   • Explicitly passed nameKey to the Pie Chart tooltip to ensure it looks up the correct segment name.
3. Main Chart: Added "value" to the main chart config as a fallback safeguard, ensuring consistent behavior across the dashboard.
4. Formatting: Added formatter to the Scatter chart tooltip to properly display latency values (e.g., "120 ms") instead of raw numbers, improving readability.

Changes Summary

1. Secondary Charts:

   • Added fallback value and count keys to chartConfig to handle potential undefined lookups.
   • Updated Scatter Chart tooltip to use hideLabel. Scatter points often trigger lookups for "x" or "y" coordinates as labels, which can fail if not explicitly defined. Hiding the header label is cleaner for this chart type.
   • Updated Pie Chart tooltip to use hideLabel and explicitly passed nameKey="name". This ensures the tooltip looks up the segment name (e.g., "500 Internal Error") in the config instead of failing on a generic label lookup.
2. Main Chart: Added a value key to chartConfig as a safeguard for consistent behavior across components.

These changes directly address the Cannot read properties of undefined (reading 'label') error by ensuring all potential lookup keys exist or are skipped via hideLabel.

Fix Explanation

The error Cannot read properties of undefined (reading 'label') was caused by a mismatch between the lookup keys used by the chart components and the keys defined in chartConfig.

In shadcn/ui charts (built on Recharts), the ChartTooltipContent determines which config entry to use based on the following priority: nameKey → item.name → item.dataKey.

1. Issue: I was manually setting name="Avg Latency" (and similar props) on <Bar> and <Area> components. This forced the tooltip to look for a config key named "Avg Latency", which did not exist (the config key was "responseTime").
2. Solution: I removed the explicit name props from the chart components (Bar, Area, Line). Now, the components default to using their dataKey (e.g., "responseTime", "errorRate", "status200").
3. Result: The tooltip now correctly looks up the config using the dataKey, finds the entry (e.g., chartConfig.responseTime), and displays the correct label ("Avg Latency") and color defined in the configuration. This resolves the undefined lookup error.