For time-based graphs show the full time range from the filter

Author: matt-aitken

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

@@ -50,6 +50,8 @@ interface QueryResultsChartProps {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
   config: ChartConfiguration;
+  /** The effective time range from the query filter (used to show the full x-axis period) */
+  timeRange?: { from: string; to: string };
   fullLegend?: boolean;
   /** Callback when "View all" legend button is clicked */
   onViewAllLegendItems?: () => void;
@@ -159,7 +161,7 @@ function formatDateByGranularity(date: Date, granularity: TimeGranularity): stri
  * This helps us understand the natural granularity of the data
  */
 function detectDataInterval(timestamps: number[]): number {
-  if (timestamps.length < 2) return 60 * 1000; // Default to 1 minute
+  if (timestamps.length < 2) return 24 * 60 * 60 * 1000; // Default to 1 day
 
   const sorted = [...timestamps].sort((a, b) => a - b);
   const gaps: number[] = [];
@@ -464,7 +466,8 @@ function tryParseDate(value: unknown): Date | null {
  */
 function transformDataForChart(
   rows: Record<string, unknown>[],
-  config: ChartConfiguration
+  config: ChartConfiguration,
+  timeRange?: { from: string; to: string }
 ): TransformedData {
   const { xAxisColumn, yAxisColumns, groupByColumn, aggregation } = config;
 
@@ -490,24 +493,37 @@ function transformDataForChart(
   }
 
   // Determine if X-axis is date-based (most values should be parseable as dates)
-  const isDateBased = dateValues.length >= rows.length * 0.8; // At least 80% are dates
-  const granularity = isDateBased ? detectTimeGranularity(dateValues) : "days";
+  // When there are no results but a timeRange is provided, treat as date-based
+  const isDateBased =
+    rows.length === 0 && timeRange ? true : dateValues.length >= rows.length * 0.8; // At least 80% are dates
+
+  // Detect granularity from the full time range when available, otherwise from data
+  const granularity = isDateBased
+    ? timeRange
+      ? detectTimeGranularity([new Date(timeRange.from), new Date(timeRange.to)])
+      : detectTimeGranularity(dateValues)
+    : "days";
 
   // For date-based axes, use a special key for the timestamp
   const xDataKey = isDateBased ? "__timestamp" : xAxisColumn;
 
   // Calculate time domain and ticks for date-based axes
+  // When a timeRange is provided (from the query filter), use it so the chart
+  // shows the full requested period rather than just the range of returned data.
   let timeDomain: [number, number] | null = null;
   let timeTicks: number[] | null = null;
-  if (isDateBased && dateValues.length > 0) {
-    const timestamps = dateValues.map((d) => d.getTime());
-    const minTime = Math.min(...timestamps);
-    const maxTime = Math.max(...timestamps);
+  // Raw min/max used for gap filling (without padding)
+  let rawMinTime = 0;
+  let rawMaxTime = 0;
+  if (isDateBased && (dateValues.length > 0 || timeRange)) {
+    const dataTimestamps = dateValues.map((d) => d.getTime());
+    rawMinTime = timeRange ? new Date(timeRange.from).getTime() : Math.min(...dataTimestamps);
+    rawMaxTime = timeRange ? new Date(timeRange.to).getTime() : Math.max(...dataTimestamps);
     // Add a small padding (2% on each side) so points aren't at the very edge
-    const padding = (maxTime - minTime) * 0.02;
-    timeDomain = [minTime - padding, maxTime + padding];
+    const padding = (rawMaxTime - rawMinTime) * 0.02;
+    timeDomain = [rawMinTime - padding, rawMaxTime + padding];
     // Generate evenly-spaced ticks across the entire range using nice intervals
-    timeTicks = generateTimeTicks(minTime, maxTime);
+    timeTicks = generateTimeTicks(rawMinTime, rawMaxTime);
   }
 
   // Helper to format X value for categorical axes (non-date)
@@ -569,8 +585,8 @@ function transformDataForChart(
         data,
         xDataKey,
         yAxisColumns,
-        timeDomain[0],
-        timeDomain[1],
+        rawMinTime,
+        rawMaxTime,
         dataInterval,
         granularity,
         aggregation
@@ -638,8 +654,8 @@ function transformDataForChart(
       data,
       xDataKey,
       series,
-      timeDomain[0],
-      timeDomain[1],
+      rawMinTime,
+      rawMaxTime,
       dataInterval,
       granularity,
       aggregation
@@ -726,6 +742,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   rows,
   columns,
   config,
+  timeRange,
   fullLegend = false,
   onViewAllLegendItems,
   isLoading = false,
@@ -750,7 +767,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     xDataKey,
     timeDomain,
     timeTicks,
-  } = useMemo(() => transformDataForChart(rows, config), [rows, config]);
+  } = useMemo(() => transformDataForChart(rows, config, timeRange), [rows, config, timeRange]);
 
   // Apply sorting (for date-based, sort by timestamp to ensure correct order)
   const data = useMemo(() => {

apps/webapp/app/components/metrics/QueryWidget.tsx

@@ -137,6 +137,8 @@ export type QueryWidgetProps = {
   error?: string;
   data: QueryWidgetData;
   config: QueryWidgetConfig;
+  /** The effective time range for the query (used to show full x-axis on time-based charts) */
+  timeRange?: { from: string; to: string };
   accessory?: ReactNode;
   isResizing?: boolean;
   isDraggable?: boolean;
@@ -322,6 +324,7 @@ type QueryWidgetBodyProps = {
   title: ReactNode;
   data: QueryWidgetData;
   config: QueryWidgetConfig;
+  timeRange?: { from: string; to: string };
   isFullscreen: boolean;
   setIsFullscreen: (open: boolean) => void;
   isLoading: boolean;
@@ -331,6 +334,7 @@ function QueryWidgetBody({
   title,
   data,
   config,
+  timeRange,
   isFullscreen,
   setIsFullscreen,
   isLoading,
@@ -376,6 +380,7 @@ function QueryWidgetBody({
             rows={data.rows}
             columns={data.columns}
             config={config}
+            timeRange={timeRange}
             onViewAllLegendItems={() => setIsFullscreen(true)}
           />
           <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
@@ -386,6 +391,7 @@ function QueryWidgetBody({
                   rows={data.rows}
                   columns={data.columns}
                   config={config}
+                  timeRange={timeRange}
                   onViewAllLegendItems={() => setIsFullscreen(true)}
                   isLoading={showLoading}
                 />

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

@@ -132,11 +132,7 @@ export function ChartLegendCompound({
 
   return (
     <div
-      className={cn(
-        "flex flex-col pt-4 text-sm",
-        scrollable && "max-h-[50%] min-h-0",
-        className
-      )}
+      className={cn("flex flex-col pt-4 text-sm", scrollable && "max-h-[50%] min-h-0", className)}
     >
       {/* Total row */}
       <div
@@ -155,7 +151,13 @@ export function ChartLegendCompound({
       <div className="mx-2 my-1 shrink-0 border-t border-charcoal-750" />
 
       {/* Legend items - scrollable when scrollable prop is true */}
-      <div className={cn("flex flex-col", scrollable && "min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600")}>
+      <div
+        className={cn(
+          "flex flex-col",
+          scrollable &&
+            "min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        )}
+      >
         {legendItems.visible.map((item) => {
           const total = currentData[item.dataKey] ?? 0;
           const isActive = highlight.activeBarKey === item.dataKey;
@@ -211,7 +213,10 @@ export function ChartLegendCompound({
               remainingCount={legendItems.remaining - 1}
             />
           ) : (
-            <ViewAllDataRow remainingCount={legendItems.remaining} onViewAll={onViewAllLegendItems} />
+            <ViewAllDataRow
+              remainingCount={legendItems.remaining}
+              onViewAll={onViewAllLegendItems}
+            />
           ))}
       </div>
     </div>
@@ -234,11 +239,11 @@ function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
     >
       <div className="flex items-center gap-1.5 text-text-dimmed">
         <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
-        <Paragraph variant="extra-small" className="tabular-nums">
+        <Paragraph variant="small" className="tabular-nums">
           {remainingCount} more…
         </Paragraph>
       </div>
-      <Paragraph variant="extra-small" className="text-indigo-500">
+      <Paragraph variant="small" className="text-indigo-500">
         View all
       </Paragraph>
     </Button>

apps/webapp/app/routes/resources.metric.tsx

@@ -27,6 +27,7 @@ type MetricWidgetActionResponse =
         reachedMaxRows: boolean;
         periodClipped: number | null;
         maxQueryPeriod: number | undefined;
+        timeRange: { from: string; to: string };
       };
     };
 
@@ -128,6 +129,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       reachedMaxRows: queryResult.result.reachedMaxRows,
       periodClipped: queryResult.periodClipped,
       maxQueryPeriod: queryResult.maxQueryPeriod,
+      timeRange: {
+        from: queryResult.timeRange.from.toISOString(),
+        to: queryResult.timeRange.to.toISOString(),
+      },
     },
   });
 };
@@ -230,13 +235,16 @@ export function MetricWidget({
     ? { rows: response.data.rows, columns: response.data.columns }
     : { rows: [], columns: [] };
 
+  const timeRange = response?.success ? response.data.timeRange : undefined;
+
   return (
     <QueryWidget
       title={title}
       titleString={title}
       config={config}
       isLoading={isLoading}
       data={data}
+      timeRange={timeRange}
       error={response?.success === false ? response.error : undefined}
       isResizing={isResizing}
       isDraggable={isDraggable}

apps/webapp/app/services/queryService.server.ts

@@ -97,6 +97,7 @@ export type ExecuteQueryResult<T> =
       queryId: string | null;
       periodClipped: number | null;
       maxQueryPeriod: number;
+      timeRange: { from: Date; to: Date };
     }
   | { success: false; error: Error };
 
@@ -323,6 +324,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
       queryId,
       periodClipped: periodClipped ? maxQueryPeriod : null,
       maxQueryPeriod,
+      timeRange,
     };
   } finally {
     // Always release the concurrency slot