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

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

The commit fixes the Lens heatmap time axis when used with calendars time intervals in date_histogram aggs
# Conflicts:
#	package.json
#	yarn.lock

* commit using @elastic.co

package.json

@@ -99,7 +99,7 @@
     "@elastic/apm-rum": "^5.9.1",
     "@elastic/apm-rum-react": "^1.3.1",
     "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace",
-    "@elastic/charts": "38.1.5",
+    "@elastic/charts": "39.0.0",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35",
     "@elastic/ems-client": "8.0.0",

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);
@@ -341,6 +366,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
@@ -355,7 +384,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"

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}
                       />

yarn.lock

@@ -2337,10 +2337,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@38.1.5":
-  version "38.1.5"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-38.1.5.tgz#c2e58b4167c95ce2a4d2b4479c177c866674e8e2"
-  integrity sha512-0O2gDyIzF58ykHCbw9xD9/igSfLFbIjzNp80J8EhnJOZf+PgkOXEFudDO4uLKOkTsX7q5D2816RkVaoA1+jGhQ==
+"@elastic/charts@39.0.0":
+  version "39.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-39.0.0.tgz#85e615f550d03d8fb880bf44e891452b4341706b"
+  integrity sha512-EnmOXFAN5u9rkcwM4L2AksxoWpOpZRXbjX2HYAxgj8WcBb14zYoYeyENMQyG/qu2Rm6PnUni0dgy+mPOTEnGmw==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"