feat: charts support intervallic axes for truncated dates

packages/malloy-render/src/component/vega/date-interval-utils.ts

@@ -0,0 +1,168 @@
+/**
+ * Utilities for generating date intervals for ordinal scales
+ */
+
+export type DateInterval =
+  | 'day'
+  | 'week'
+  | 'month'
+  | 'quarter'
+  | 'year'
+  | 'hour'
+  | 'minute'
+  | 'second';
+
+/**
+ * Generate an array of dates for a given interval between start and end
+ * This creates a complete range of interval values, filling in gaps
+ */
+export function generateDateRange(
+  start: Date | number,
+  end: Date | number,
+  interval: DateInterval
+): number[] {
+  const startDate = new Date(start);
+  const endDate = new Date(end);
+  const dates: number[] = [];
+
+  // Floor the start date to the interval
+  const current = floorDate(startDate, interval);
+
+  // Generate dates until we pass the end date
+  while (current <= endDate) {
+    dates.push(current.valueOf());
+    offsetDate(current, interval, 1);
+  }
+
+  return dates;
+}
+
+/**
+ * Floor a date to the given interval
+ */
+function floorDate(date: Date, interval: DateInterval): Date {
+  const d = new Date(date);
+
+  switch (interval) {
+    case 'second':
+      d.setUTCMilliseconds(0);
+      break;
+    case 'minute':
+      d.setUTCSeconds(0, 0);
+      break;
+    case 'hour':
+      d.setUTCMinutes(0, 0, 0);
+      break;
+    case 'day':
+      d.setUTCHours(0, 0, 0, 0);
+      break;
+    case 'week': {
+      d.setUTCHours(0, 0, 0, 0);
+      // Adjust to start of week (Sunday)
+      const day = d.getUTCDay();
+      d.setUTCDate(d.getUTCDate() - day);
+      break;
+    }
+    case 'month': {
+      d.setUTCDate(1);
+      d.setUTCHours(0, 0, 0, 0);
+      break;
+    }
+    case 'quarter': {
+      const month = d.getUTCMonth();
+      const quarterMonth = Math.floor(month / 3) * 3;
+      d.setUTCMonth(quarterMonth, 1);
+      d.setUTCHours(0, 0, 0, 0);
+      break;
+    }
+    case 'year':
+      d.setUTCMonth(0, 1);
+      d.setUTCHours(0, 0, 0, 0);
+      break;
+  }
+
+  return d;
+}
+
+/**
+ * Offset a date by the given interval and amount
+ */
+function offsetDate(date: Date, interval: DateInterval, amount: number): Date {
+  switch (interval) {
+    case 'second':
+      date.setUTCSeconds(date.getUTCSeconds() + amount);
+      break;
+    case 'minute':
+      date.setUTCMinutes(date.getUTCMinutes() + amount);
+      break;
+    case 'hour':
+      date.setUTCHours(date.getUTCHours() + amount);
+      break;
+    case 'day':
+      date.setUTCDate(date.getUTCDate() + amount);
+      break;
+    case 'week':
+      date.setUTCDate(date.getUTCDate() + amount * 7);
+      break;
+    case 'month':
+      date.setUTCMonth(date.getUTCMonth() + amount);
+      break;
+    case 'quarter':
+      date.setUTCMonth(date.getUTCMonth() + amount * 3);
+      break;
+    case 'year':
+      date.setUTCFullYear(date.getUTCFullYear() + amount);
+      break;
+  }
+
+  return date;
+}
+
+/**
+ * Determine if a date/time field should use an ordinal scale
+ */
+export function shouldUseOrdinalScale(field: {
+  timeframe?: string;
+  isDate(): boolean;
+  isTime(): boolean;
+}): boolean {
+  // If it's a date field (no timestamp), use ordinal scale
+  if (field.isDate()) {
+    return true;
+  }
+
+  // If it has a timeframe extraction, use ordinal scale
+  if (field.timeframe) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Get the interval for a field based on its properties
+ */
+export function getFieldInterval(field: {
+  timeframe?: string;
+  isDate(): boolean;
+}): DateInterval | null {
+  // If it has a timeframe, use that
+  if (field.timeframe) {
+    // Handle all possible timeframe values
+    if (field.timeframe.includes('second')) return 'second';
+    if (field.timeframe.includes('minute')) return 'minute';
+    if (field.timeframe.includes('hour')) return 'hour';
+    if (field.timeframe.includes('day')) return 'day';
+    if (field.timeframe.includes('week')) return 'week';
+    if (field.timeframe.includes('month')) return 'month';
+    if (field.timeframe.includes('quarter')) return 'quarter';
+    if (field.timeframe.includes('year')) return 'year';
+  }
+
+  // If it's a date field without timeframe, default to day
+  if (field.isDate()) {
+    return 'day';
+  }
+
+  return null;
+}

packages/malloy-render/src/plugins/bar-chart/generate-bar_chart-vega-spec.ts

@@ -45,6 +45,11 @@ import {convertLegacyToVizTag} from '@/component/tag-utils';
 import type {RenderMetadata} from '@/component/render-result-metadata';
 import type {Tag} from '@malloydata/malloy-tag';
 import type {BarChartPluginInstance} from './bar-chart-plugin';
+import {
+  shouldUseOrdinalScale,
+  getFieldInterval,
+  generateDateRange,
+} from '@/component/vega/date-interval-utils';
 
 type BarDataRecord = {
   x: string | number;
@@ -648,6 +653,21 @@ export function generateBarChartVegaSpecV2(
     });
   }
 
+  // Determine if we should generate a complete interval domain for dates
+  const useOrdinalDateScale = xIsDateorTime && shouldUseOrdinalScale(xField);
+  const dateInterval = useOrdinalDateScale ? getFieldInterval(xField) : null;
+
+  // Generate ordinal domain for date intervals if needed
+  let ordinalDateDomain: (string | number)[] | undefined;
+  if (useOrdinalDateScale && dateInterval && shouldShareXDomain) {
+    // Generate all interval values between min and max
+    const minValue = xField.minValue;
+    const maxValue = xField.maxValue;
+    if (minValue !== undefined && maxValue !== undefined) {
+      ordinalDateDomain = generateDateRange(minValue, maxValue, dateInterval);
+    }
+  }
+
   /**************************************
    *
    * Chart spec
@@ -672,7 +692,7 @@ export function generateBarChartVegaSpecV2(
         name: 'xscale',
         type: 'band',
         domain: shouldShareXDomain
-          ? [...dataLimits.barValuesToPlot]
+          ? ordinalDateDomain ?? [...dataLimits.barValuesToPlot]
           : {data: 'values', field: 'x'},
         range: 'width',
         paddingOuter: 0.05,

packages/malloy-render/src/plugins/line-chart/generate-line_chart-vega-spec.ts

@@ -40,6 +40,11 @@ import {NULL_SYMBOL, type RenderTimeStringOptions} from '@/util';
 import {convertLegacyToVizTag} from '@/component/tag-utils';
 import type {RenderMetadata} from '@/component/render-result-metadata';
 import type {LineChartPluginInstance} from '@/plugins/line-chart/line-chart-plugin';
+import {
+  shouldUseOrdinalScale,
+  getFieldInterval,
+  generateDateRange,
+} from '@/component/vega/date-interval-utils';
 
 type LineDataRecord = {
   x: string | number;
@@ -501,7 +506,7 @@ export function generateLineChartVegaSpecV2(
     transform: [
       {
         type: 'filter',
-        expr: `datum.x != null && datum.x != "${NULL_SYMBOL}"`,
+        expr: '!datum.isNull',
       },
     ],
   };
@@ -513,8 +518,30 @@ export function generateLineChartVegaSpecV2(
       {
         type: 'aggregate',
         groupby: ['x'],
+        fields: hasNullXValues ? ['isNull'] : [],
+        ops: hasNullXValues ? ['min'] : [],
+        as: hasNullXValues ? ['isNull'] : [],
+      },
+      ...(hasNullTimeValues
+        ? [
+            {
+              type: 'collect',
+              sort: {field: 'isNull', order: 'ascending'},
+            },
+          ]
+        : []),
+      {
+        type: 'collect',
+        sort: xIsDateorTime
+          ? {field: 'x', order: 'ascending'}
+          : ({} as {field: string; order: 'ascending' | 'descending'}),
+      },
+      {
+        type: 'lookup',
+        from: 'values',
+        key: 'x',
+        values: ['x'],
         fields: ['x'],
-        ops: ['values'],
         as: ['v'],
       },
     ],
@@ -714,6 +741,21 @@ export function generateLineChartVegaSpecV2(
     );
   }
 
+  // Determine if we should use ordinal scale for dates
+  const useOrdinalDateScale = xIsDateorTime && shouldUseOrdinalScale(xField);
+  const dateInterval = useOrdinalDateScale ? getFieldInterval(xField) : null;
+
+  // Generate ordinal domain for date intervals if needed
+  let ordinalDateDomain: number[] | undefined;
+  if (useOrdinalDateScale && dateInterval && shouldShareXDomain) {
+    // Generate all interval values between min and max
+    const minValue = xField.minValue;
+    const maxValue = xField.maxValue;
+    if (minValue !== undefined && maxValue !== undefined) {
+      ordinalDateDomain = generateDateRange(minValue, maxValue, dateInterval);
+    }
+  }
+
   /**************************************
    *
    * Chart spec
@@ -736,13 +778,15 @@ export function generateLineChartVegaSpecV2(
     scales: [
       {
         name: 'xscale',
-        type: xIsDateorTime ? 'utc' : 'point',
+        type: useOrdinalDateScale ? 'point' : xIsDateorTime ? 'utc' : 'point',
         domain:
           settings.mode === 'yoy'
             ? // For YoY mode, calculate domain from actual data
               {data: 'values', field: 'x'}
             : shouldShareXDomain
-            ? xIsDateorTime
+            ? useOrdinalDateScale && ordinalDateDomain
+              ? ordinalDateDomain
+              : xIsDateorTime
               ? [Number(xField.minValue), Number(xField.maxValue)]
               : xIsBoolean
               ? [true, false]