[heatmap] Fix x time scale with calendar intervals (elastic#117619)

The commit fixes the Lens heatmap time axis when used with calendars time intervals in date_histogram aggs
nickofthyme · Dec 20, 2021 · a41ba67 · a41ba67
1 parent e38a606
commit a41ba67
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx b/x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx
@@ -16,6 +16,8 @@ import {
   HeatmapSpec,
   ScaleType,
   Settings,
+  ESFixedIntervalUnit,
+  ESCalendarIntervalUnit,
 } from '@elastic/charts';
 import type { CustomPaletteState } from 'src/plugins/charts/public';
 import { VisualizationContainer } from '../visualization_container';
@@ -30,6 +32,7 @@ import {
 } from '../shared_components';
 import { LensIconChartHeatmap } from '../assets/chart_heatmap';
 import { DEFAULT_PALETTE_NAME } from './constants';
+import { search } from '../../../../../src/plugins/data/public';
 
 declare global {
   interface Window {
@@ -162,8 +165,30 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
 
   // Fallback to the ordinal scale type when a single row of data is provided.
   // Related issue https://github.com/elastic/elastic-charts/issues/1184
-  const xScaleType =
-    isTimeBasedSwimLane && chartData.length > 1 ? ScaleType.Time : ScaleType.Ordinal;
+
+  let xScale: HeatmapSpec['xScale'] = { type: ScaleType.Ordinal };
+  if (isTimeBasedSwimLane && chartData.length > 1) {
+    const dateInterval =
+      search.aggs.getDateHistogramMetaDataByDatatableColumn(xAxisColumn)?.interval;
+    const esInterval = dateInterval ? search.aggs.parseEsInterval(dateInterval) : undefined;
+    if (esInterval) {
+      xScale = {
+        type: ScaleType.Time,
+        interval:
+          esInterval.type === 'fixed'
+            ? {
+                type: 'fixed',
+                unit: esInterval.unit as ESFixedIntervalUnit,
+                value: esInterval.value,
+              }
+            : {
+                type: 'calendar',
+                unit: esInterval.unit as ESCalendarIntervalUnit,
+                value: esInterval.value,
+              },
+      };
+    }
+  }
 
   const xValuesFormatter = formatFactory(xAxisMeta.params);
   const valueFormatter = formatFactory(valueColumn.meta.params);
@@ -338,6 +363,10 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
             labelOptions: { maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0 },
           },
         }}
+        xDomain={{
+          min: data.dateRange?.fromDate.getTime() ?? NaN,
+          max: data.dateRange?.toDate.getTime() ?? NaN,
+        }}
         onBrushEnd={onBrushEnd as BrushEndListener}
       />
       <Heatmap
@@ -352,7 +381,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
         yAccessor={args.yAccessor || 'unifiedY'}
         valueAccessor={args.valueAccessor}
         valueFormatter={(v: number) => valueFormatter.convert(v)}
-        xScaleType={xScaleType}
+        xScale={xScale}
         ySortPredicate="dataIndex"
         config={config}
         xSortPredicate="dataIndex"

diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@@ -470,7 +470,16 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
                         valueAccessor="value"
                         highlightedData={highlightedData}
                         valueFormatter={getFormattedSeverityScore}
-                        xScaleType={ScaleType.Time}
+                        xScale={{
+                          type: ScaleType.Time,
+                          interval: {
+                            type: 'fixed',
+                            unit: 'ms',
+                            // the xDomain.minInterval should always be available at rendering time
+                            // adding a fallback to 1m bucket
+                            value: xDomain?.minInterval ?? 1000 * 60,
+                          },
+                        }}
                         ySortPredicate="dataIndex"
                         config={swimLaneConfig}
                       />