Only render points on charts when there is data

Author: matt-aitken

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -244,17 +244,18 @@ function fillTimeGaps(
       }
       filledData.push(point);
     } else {
-      // Create a zero-filled data point
-      const zeroPoint: Record<string, unknown> = {
+      // Create a null-filled data point so gaps appear in line/bar charts
+      // and legend aggregations (avg/min/max) skip these slots
+      const gapPoint: Record<string, unknown> = {
         [xDataKey]: t,
         __rawDate: new Date(t),
         __granularity: granularity,
         __originalX: new Date(t).toISOString(),
       };
       for (const s of series) {
-        zeroPoint[s] = 0;
+        gapPoint[s] = null;
       }
-      filledData.push(zeroPoint);
+      filledData.push(gapPoint);
     }
   }
 

apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx

@@ -68,16 +68,22 @@ export function ChartLegendCompound({
     return aggregateValues(values, aggregation);
   }, [totals, dataKeys, aggregation]);
 
-  // Calculate current total based on hover state
-  const currentTotal = useMemo(() => {
+  // Calculate current total based on hover state (null when hovering a gap-filled point)
+  const currentTotal = useMemo((): number | null => {
     if (!highlight.activePayload?.length) return grandTotal;
 
-    // Collect all series values from the hovered data point
-    const values = highlight.activePayload
+    // Collect all series values from the hovered data point, preserving nulls
+    const rawValues = highlight.activePayload
       .filter((item) => item.value !== undefined && dataKeys.includes(item.dataKey as string))
-      .map((item) => Number(item.value) || 0);
+      .map((item) => item.value);
 
-    if (values.length === 0) return 0;
+    // Filter to non-null values only
+    const values = rawValues
+      .filter((v): v is number => v != null)
+      .map((v) => Number(v) || 0);
+
+    // All null → gap-filled point, return null to show dash
+    if (values.length === 0) return null;
 
     if (!aggregation) {
       // Default: sum
@@ -101,17 +107,21 @@ export function ChartLegendCompound({
     return labelFormatter ? labelFormatter(stringValue) : stringValue;
   }, [highlight.activePayload, dataKey, effectiveTotalLabel, labelFormatter]);
 
-  // Get current data for the legend based on hover state
-  const currentData = useMemo(() => {
+  // Get current data for the legend based on hover state (values may be null for gap-filled points)
+  const currentData = useMemo((): Record<string, number | null> => {
     if (!highlight.activePayload?.length) return totals;
 
-    // If we have activePayload data from hovering over a bar
-    const hoverData = highlight.activePayload.reduce((acc, item) => {
-      if (item.dataKey && item.value !== undefined) {
-        acc[item.dataKey] = Number(item.value) || 0;
-      }
-      return acc;
-    }, {} as Record<string, number>);
+    // If we have activePayload data from hovering over a bar/line
+    const hoverData = highlight.activePayload.reduce(
+      (acc, item) => {
+        if (item.dataKey && item.value !== undefined) {
+          // Preserve null for gap-filled points instead of coercing to 0
+          acc[item.dataKey] = item.value != null ? Number(item.value) || 0 : null;
+        }
+        return acc;
+      },
+      {} as Record<string, number | null>
+    );
 
     // Return a merged object - totals for keys not in the hover data
     return {
@@ -167,7 +177,11 @@ export function ChartLegendCompound({
       >
         <span className="font-medium">{currentTotalLabel}</span>
         <span className="font-medium tabular-nums">
-          <AnimatedNumber value={currentTotal} duration={0.25} />
+          {currentTotal != null ? (
+            <AnimatedNumber value={currentTotal} duration={0.25} />
+          ) : (
+            "\u2013"
+          )}
         </span>
       </div>
 
@@ -183,15 +197,15 @@ export function ChartLegendCompound({
         )}
       >
         {legendItems.visible.map((item) => {
-          const total = currentData[item.dataKey] ?? 0;
+          const total = currentData[item.dataKey] ?? null;
           const isActive = highlight.activeBarKey === item.dataKey;
 
           return (
             <div
               key={item.dataKey}
               className={cn(
                 "relative flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 transition",
-                total === 0 && "opacity-50"
+                (total == null || total === 0) && "opacity-50"
               )}
               onMouseEnter={() => highlight.setHoveredLegendItem(item.dataKey)}
               onMouseLeave={() => highlight.reset()}
@@ -221,7 +235,11 @@ export function ChartLegendCompound({
                     isActive ? "text-text-bright" : "text-text-dimmed"
                   )}
                 >
-                  <AnimatedNumber value={total} duration={0.25} />
+                  {total != null ? (
+                    <AnimatedNumber value={total} duration={0.25} />
+                  ) : (
+                    "\u2013"
+                  )}
                 </span>
               </div>
             </div>
@@ -233,7 +251,7 @@ export function ChartLegendCompound({
           (legendItems.hoveredHiddenItem ? (
             <HoveredHiddenItemRow
               item={legendItems.hoveredHiddenItem}
-              value={currentData[legendItems.hoveredHiddenItem.dataKey] ?? 0}
+              value={currentData[legendItems.hoveredHiddenItem.dataKey] ?? null}
               remainingCount={legendItems.remaining - 1}
             />
           ) : (
@@ -279,7 +297,7 @@ function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
 
 type HoveredHiddenItemRowProps = {
   item: { dataKey: string; color?: string; label: React.ReactNode };
-  value: number;
+  value: number | null;
   remainingCount: number;
 };
 
@@ -305,7 +323,7 @@ function HoveredHiddenItemRow({ item, value, remainingCount }: HoveredHiddenItem
           {remainingCount > 0 && <span className="text-text-dimmed">+{remainingCount} more</span>}
         </div>
         <span className="tabular-nums text-text-bright">
-          <AnimatedNumber value={value} duration={0.25} />
+          {value != null ? <AnimatedNumber value={value} duration={0.25} /> : "\u2013"}
         </span>
       </div>
     </div>

apps/webapp/app/components/primitives/charts/ChartRoot.tsx

@@ -228,7 +228,9 @@ export function useSeriesTotal(aggregation?: AggregationType): Record<string, nu
       const counts: Record<string, number> = {};
       for (const item of data) {
         for (const seriesKey of dataKeys) {
-          const val = Number(item[seriesKey] || 0);
+          const rawVal = item[seriesKey];
+          if (rawVal == null) continue; // skip gap-filled nulls
+          const val = Number(rawVal);
           sums[seriesKey] = (sums[seriesKey] || 0) + val;
           counts[seriesKey] = (counts[seriesKey] || 0) + 1;
         }
@@ -244,7 +246,8 @@ export function useSeriesTotal(aggregation?: AggregationType): Record<string, nu
       const result: Record<string, number> = {};
       for (const item of data) {
         for (const seriesKey of dataKeys) {
-          const val = Number(item[seriesKey] || 0);
+          if (item[seriesKey] == null) continue; // skip gap-filled nulls
+          const val = Number(item[seriesKey]);
           if (result[seriesKey] === undefined || val < result[seriesKey]) {
             result[seriesKey] = val;
           }
@@ -261,7 +264,8 @@ export function useSeriesTotal(aggregation?: AggregationType): Record<string, nu
     const result: Record<string, number> = {};
     for (const item of data) {
       for (const seriesKey of dataKeys) {
-        const val = Number(item[seriesKey] || 0);
+        if (item[seriesKey] == null) continue; // skip gap-filled nulls
+        const val = Number(item[seriesKey]);
         if (result[seriesKey] === undefined || val > result[seriesKey]) {
           result[seriesKey] = val;
         }