fix: heatmap snap domain to interval

packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -16,7 +16,8 @@ import { ScaleContinuous } from '../../../../scales';
 import { ScaleType } from '../../../../scales/constants';
 import { SettingsSpec } from '../../../../specs';
 import { CanvasTextBBoxCalculator } from '../../../../utils/bbox/canvas_text_bbox_calculator';
-import { clamp } from '../../../../utils/common';
+import { snapDateToESInterval } from '../../../../utils/chrono/elasticsearch';
+import { clamp, range } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
 import { HeatmapSpec } from '../../specs';
@@ -101,9 +102,6 @@ export function shapeViewModel(
 
   const yInvertedScale = scaleQuantize<NonNullable<PrimitiveValue>>().domain([0, height]).range(yValues);
 
-  // TODO: Fix domain type to be `Array<number | string>`
-  let xValues = xDomain.domain as any[];
-
   const timeScale =
     xDomain.type === ScaleType.Time
       ? new ScaleContinuous(
@@ -120,17 +118,17 @@ export function shapeViewModel(
         )
       : null;
 
-  if (timeScale) {
-    const result = [];
-    let [timePoint] = xValues;
-    while (timePoint < xValues[1]) {
-      result.push(timePoint);
-      timePoint += xDomain.minInterval;
-    }
-
-    xValues = result;
-  }
-
+  const xValues = timeScale
+    ? range(
+        snapDateToESInterval(
+          xDomain.domain[0] as number,
+          { type: 'fixed', unit: 'ms', quantity: xDomain.minInterval },
+          'start',
+        ),
+        xDomain.domain[1] as number,
+        xDomain.minInterval,
+      )
+    : xDomain.domain;
   // compute the scale for the columns positions
   const xScale = scaleBand<NonNullable<PrimitiveValue>>().domain(xValues).range([0, chartDimensions.width]);
 
@@ -298,8 +296,12 @@ export function shapeViewModel(
     const endValue = x[x.length - 1];
 
     // find X coordinated based on the time range
-    const leftIndex = typeof startValue === 'number' ? bisectLeft(xValues, startValue) : xValues.indexOf(startValue);
-    const rightIndex = typeof endValue === 'number' ? bisectLeft(xValues, endValue) : xValues.indexOf(endValue) + 1;
+    // the xValues array is casted as any because the slight incompatible type of d3 bisect.
+    // it works anyway without problems also if the data is a mix of string and numbers
+    const leftIndex =
+      typeof startValue === 'number' ? bisectLeft(xValues as any, startValue) : xValues.indexOf(startValue);
+    const rightIndex =
+      typeof endValue === 'number' ? bisectLeft(xValues as any, endValue) : xValues.indexOf(endValue) + 1;
 
     const isRightOutOfRange = rightIndex > xValues.length - 1 || rightIndex < 0;
     const isLeftOutOfRange = leftIndex > xValues.length - 1 || leftIndex < 0;

packages/charts/src/utils/chrono/chrono.ts

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// NOTE: to switch implementation just change the imported file (moment,luxon)
+import {
+  addTimeToObj,
+  timeObjToUnixTimestamp,
+  startTimeOfObj,
+  endTimeOfObj,
+  timeObjFromAny,
+  timeObjToUTCOffset,
+  subtractTimeToObj,
+  formatTimeObj,
+  diffTimeObjs,
+} from './moment';
+import { CalendarIntervalUnit, CalendarObj, DateTime, FixedIntervalUnit, Minutes, UnixTimestamp } from './types';
+
+/** @internal */
+export function addTime(
+  dateTime: DateTime,
+  timeZone: string | undefined,
+  unit: keyof CalendarObj,
+  count: number,
+): UnixTimestamp {
+  return timeObjToUnixTimestamp(addTimeToObj(getTimeObj(dateTime, timeZone), unit, count));
+}
+
+/** @internal */
+export function subtractTime(
+  dateTime: DateTime,
+  timeZone: string | undefined,
+  unit: keyof CalendarObj,
+  count: number,
+): UnixTimestamp {
+  return timeObjToUnixTimestamp(subtractTimeToObj(getTimeObj(dateTime, timeZone), unit, count));
+}
+
+/** @internal */
+export function getUnixTimestamp(dateTime: DateTime, timeZone?: string): UnixTimestamp {
+  return timeObjToUnixTimestamp(getTimeObj(dateTime, timeZone));
+}
+
+/** @internal */
+export function startOf(
+  dateTime: DateTime,
+  timeZone: string | undefined,
+  unit: CalendarIntervalUnit | FixedIntervalUnit,
+): UnixTimestamp {
+  return timeObjToUnixTimestamp(startTimeOfObj(getTimeObj(dateTime, timeZone), unit));
+}
+
+/** @internal */
+export function endOf(
+  dateTime: DateTime,
+  timeZone: string | undefined,
+  unit: CalendarIntervalUnit | FixedIntervalUnit,
+): UnixTimestamp {
+  return timeObjToUnixTimestamp(endTimeOfObj(getTimeObj(dateTime, timeZone), unit));
+}
+
+function getTimeObj(dateTime: DateTime, timeZone?: string) {
+  return timeObjFromAny(dateTime, timeZone);
+}
+
+/** @internal */
+export function getUTCOffset(dateTime: DateTime, timeZone?: string): Minutes {
+  return timeObjToUTCOffset(getTimeObj(dateTime, timeZone));
+}
+
+/** @internal */
+export function formatTime(dateTime: DateTime, timeZone: string | undefined, format: string) {
+  return formatTimeObj(getTimeObj(dateTime, timeZone), format);
+}
+
+/** @internal */
+export function diff(
+  dateTime1: DateTime,
+  timeZone1: string | undefined,
+  dateTime2: DateTime,
+  timeZone2: string | undefined,
+  unit: CalendarIntervalUnit | FixedIntervalUnit,
+) {
+  return diffTimeObjs(getTimeObj(dateTime1, timeZone1), getTimeObj(dateTime2, timeZone2), unit);
+}

packages/charts/src/utils/chrono/elasticsearch.test.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { DateTime } from 'luxon';
+
+import { snapDateToESInterval } from './elasticsearch';
+
+describe('snap to interval', () => {
+  it('should snap to begin of calendar interval', () => {
+    const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z');
+    const snappedDate = snapDateToESInterval(
+      initialDate.toMillis(),
+      { type: 'calendar', unit: 'd', quantity: 1 },
+      'start',
+      'UTC',
+    );
+    expect(DateTime.fromMillis(snappedDate, { zone: 'utc' }).toISO()).toBe('2020-01-03T00:00:00.000Z');
+  });
+
+  it('should snap to end of calendar interval', () => {
+    const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z');
+    const snappedDate = snapDateToESInterval(
+      initialDate.toMillis(),
+      { type: 'calendar', unit: 'd', quantity: 1 },
+      'end',
+      'UTC',
+    );
+    expect(DateTime.fromMillis(snappedDate, { zone: 'utc' }).toISO()).toBe('2020-01-03T23:59:59.999Z');
+  });
+
+  it('should snap to begin of fixed interval', () => {
+    const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z');
+    const snappedDate = snapDateToESInterval(
+      initialDate.toMillis(),
+      { type: 'fixed', unit: 'm', quantity: 30 },
+      'start',
+      'UTC',
+    );
+    expect(DateTime.fromMillis(snappedDate, { zone: 'utc' }).toISO()).toBe('2020-01-03T07:00:00.000Z');
+  });
+
+  it('should snap to end of fixed interval', () => {
+    const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z');
+    const snappedDate = snapDateToESInterval(
+      initialDate.toMillis(),
+      { type: 'fixed', unit: 'm', quantity: 30 },
+      'end',
+      'UTC',
+    );
+    expect(DateTime.fromMillis(snappedDate, { zone: 'utc' }).toISO()).toBe('2020-01-03T07:29:59.999Z');
+  });
+});

packages/charts/src/utils/chrono/elasticsearch.ts

@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { TimeMs } from '../../common/geometry';
+import { endOf, getUnixTimestamp, startOf } from './chrono';
+import { CalendarIntervalUnit, FixedIntervalUnit, UnixTimestamp } from './types';
+
+/** @internal */
+export type ESCalendarIntervalUnit =
+  | 'minute'
+  | 'm'
+  | 'hour'
+  | 'h'
+  | 'day'
+  | 'd'
+  | 'week'
+  | 'w'
+  | 'month'
+  | 'M'
+  | 'quarter'
+  | 'q'
+  | 'year'
+  | 'y';
+
+type ESFixedIntervalUnit = 'ms' | 's' | 'm' | 'h' | 'd';
+
+/** @internal */
+export const ES_FIXED_INTERVAL_UNIT_TO_BASE: Record<ESFixedIntervalUnit, TimeMs> = {
+  ms: 1,
+  s: 1000,
+  m: 1000 * 60,
+  h: 1000 * 60 * 60,
+  d: 1000 * 60 * 60 * 24,
+};
+
+/** @internal */
+export type ESCalendarInterval = {
+  type: 'calendar';
+  unit: ESCalendarIntervalUnit;
+  quantity: number;
+};
+
+/** @internal */
+export interface ESFixedInterval {
+  type: 'fixed';
+  unit: ESFixedIntervalUnit;
+  quantity: number;
+}
+
+/** @internal */
+export function snapDateToESInterval(
+  date: number | Date,
+  interval: ESCalendarInterval | ESFixedInterval,
+  snapTo: 'start' | 'end',
+  timeZone?: string,
+): UnixTimestamp {
+  return isCalendarInterval(interval)
+    ? esCalendarIntervalSnap(date, interval, snapTo, timeZone)
+    : esFixedIntervalSnap(date, interval, snapTo, timeZone);
+}
+
+function isCalendarInterval(interval: ESCalendarInterval | ESFixedInterval): interval is ESCalendarInterval {
+  return interval.type === 'calendar';
+}
+
+function esCalendarIntervalSnap(
+  date: number | Date,
+  interval: ESCalendarInterval,
+  snapTo: 'start' | 'end',
+  timeZone?: string,
+) {
+  return snapTo === 'start'
+    ? startOf(date, timeZone, esCalendarIntervalToChronoInterval(interval.unit))
+    : endOf(date, timeZone, esCalendarIntervalToChronoInterval(interval.unit));
+}
+function esFixedIntervalSnap(
+  date: number | Date,
+  interval: ESFixedInterval,
+  snapTo: 'start' | 'end',
+  timeZone?: string,
+): UnixTimestamp {
+  const unitMultiplier = interval.quantity * ES_FIXED_INTERVAL_UNIT_TO_BASE[interval.unit];
+  const unixTimestamp = getUnixTimestamp(date, timeZone);
+  const roundedDate = Math.floor(unixTimestamp / unitMultiplier) * unitMultiplier;
+  return snapTo === 'start' ? roundedDate : roundedDate + unitMultiplier - 1;
+}
+
+function esCalendarIntervalToChronoInterval(unit: ESCalendarIntervalUnit): CalendarIntervalUnit | FixedIntervalUnit {
+  switch (unit) {
+    case 'minute':
+    case 'm':
+      return 'minute';
+    case 'hour':
+    case 'h':
+      return 'hour';
+    case 'day':
+    case 'd':
+      return 'day';
+    case 'week':
+    case 'w':
+      return 'week';
+    case 'month':
+    case 'M':
+      return 'month';
+    case 'quarter':
+    case 'q':
+      return 'quarter';
+    case 'year':
+    case 'y':
+      return 'year';
+    default:
+      return 'hour';
+  }
+}