refactor: update ErrorRateChart to handle missing data and improve rate calculation logic

Author: moonrailgun

src/client/components/aiGateway/AIGatewayAnalytics.tsx

@@ -690,18 +690,26 @@ const ErrorRateChart: React.FC<ErrorRateChartProps> = React.memo((props) => {
     });
 
     const arr = Array.from(dateMap.entries()).map(
-      ([date, { success, failed }]) => {
-        const total = success + failed;
-        const rate = total > 0 ? (failed / total) * 100 : 0;
-        return { date, value: Math.max(0, Math.min(100, rate)) };
-      }
+      ([date, { success, failed }]) => ({ date, success, failed })
     );
 
     if (arr.length === 0) {
       return [];
     }
 
-    return getDateArray(arr, time.startAt, time.endAt, time.unit);
+    // Fill missing date buckets with success=0/failed=0,
+    // then compute rate. Buckets with no traffic at all (total === 0)
+    // are emitted as null so the line is left blank instead of pinned to 0.
+    return getDateArray(arr, time.startAt, time.endAt, time.unit).map(
+      ({ date, success, failed }) => {
+        const total = success + failed;
+        if (total === 0) {
+          return { date, value: null as unknown as number };
+        }
+        const rate = (failed / total) * 100;
+        return { date, value: Math.max(0, Math.min(100, rate)) };
+      }
+    );
   }, [rawData, time.startAt, time.endAt, time.unit]);
 
   const chartConfig: ChartConfig = useMemo(

src/client/components/chart/TimeEventChart.tsx

@@ -86,6 +86,11 @@ export const TimeEventChart: React.FC<TimeEventChartProps> = React.memo(
       Object.keys(chartConfig)
     );
 
+    // Use unique gradient id per chart instance to avoid SVG id collisions
+    // when multiple charts coexist on the same page (e.g. all using `value` key).
+    const reactId = React.useId();
+    const gradientIdPrefix = `gradient-${reactId.replace(/:/g, '')}`;
+
     const stacked = chartType === 'stack';
 
     // Render pie chart
@@ -137,7 +142,7 @@ export const TimeEventChart: React.FC<TimeEventChartProps> = React.memo(
                 return (
                   <linearGradient
                     key={key}
-                    id={`color-${key}`}
+                    id={`${gradientIdPrefix}-${key}`}
                     x1="0"
                     y1="0"
                     x2="0"
@@ -258,7 +263,9 @@ export const TimeEventChart: React.FC<TimeEventChartProps> = React.memo(
                 stackId={stacked ? '1' : undefined}
                 stroke={color}
                 fillOpacity={chartType === 'line' ? 0 : 1}
-                fill={drawGradientArea ? `url(#color-${key})` : color}
+                fill={
+                  drawGradientArea ? `url(#${gradientIdPrefix}-${key})` : color
+                }
                 strokeWidth={2}
                 strokeDasharray={getStrokeDasharray(key)}
                 onAnimationEnd={handleAnimationEnd}