[7.17] Update dependency @elastic/charts to v40.2.0 (main) (#120230)

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.0.5",
+    "@elastic/charts": "40.2.0",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^7.16.0-canary.7",
     "@elastic/ems-client": "7.16.0",

src/plugins/vis_types/timelion/public/components/series/area.tsx

@@ -9,7 +9,14 @@
 // @ts-ignore
 import chroma from 'chroma-js';
 import React from 'react';
-import { AreaSeries, ScaleType, CurveType, AreaSeriesStyle, PointShape } from '@elastic/charts';
+import {
+  AreaSeries,
+  ScaleType,
+  CurveType,
+  AreaSeriesStyle,
+  PointShape,
+  RecursivePartial,
+} from '@elastic/charts';
 import type { VisSeries } from '../../../common/vis_data';
 
 interface AreaSeriesComponentProps {
@@ -54,7 +61,7 @@ const getAreaSeriesStyle = ({ color, lines, points }: AreaSeriesComponentProps['
       shape: points?.symbol === 'cross' ? PointShape.X : points?.symbol,
     },
     curve: lines?.steps ? CurveType.CURVE_STEP : CurveType.LINEAR,
-  } as AreaSeriesStyle);
+  } as RecursivePartial<AreaSeriesStyle>);
 
 export const AreaSeriesComponent = ({ index, groupId, visData }: AreaSeriesComponentProps) => (
   <AreaSeries

test/functional/apps/visualize/_timelion.ts

@@ -168,7 +168,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       expect(firstAreaChartData).to.eql(firstAreaExpectedChartData);
       expect(secondAreaChartData).to.eql(secondAreaExpectedChartData);
       expect(thirdAreaChartData).to.eql(thirdAreaExpectedChartData);
-      expect(firstAxesLabels).to.eql(['12.19GB', '12.2GB', '12.21GB']);
+      expect(firstAxesLabels).to.eql(['12.2GB', '12.21GB']);
       expect(secondAxesLabels).to.eql(['5.59KB', '5.6KB']);
       expect(thirdAxesLabels.toString()).to.be(
         'BYTES_5721,BYTES_5722,BYTES_5723,BYTES_5724,BYTES_5725,BYTES_5726,BYTES_5727,BYTES_5728,BYTES_5729,BYTES_5730,BYTES_5731,BYTES_5732,BYTES_5733'

x-pack/plugins/apm/typings/timeseries.ts

@@ -11,8 +11,8 @@ import {
   Fit,
   FitConfig,
   LineSeriesStyle,
+  RecursivePartial,
 } from '@elastic/charts';
-import { DeepPartial } from 'utility-types';
 import { Maybe } from '../typings/common';
 
 export interface Coordinate {
@@ -46,8 +46,8 @@ export interface APMChartSpec<
   fit?: Exclude<Fit, 'explicit'> | FitConfig;
   stackAccessors?: Accessor;
   splitSeriesAccessors?: Accessor;
-  lineSeriesStyle?: DeepPartial<LineSeriesStyle>;
-  areaSeriesStyle?: DeepPartial<AreaSeriesStyle>;
+  lineSeriesStyle?: RecursivePartial<LineSeriesStyle>;
+  areaSeriesStyle?: RecursivePartial<AreaSeriesStyle>;
 }
 
 export type ChartType = 'area' | 'linemark';

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"

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

@@ -1520,10 +1520,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@38.0.5":
-  version "38.0.5"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-38.0.5.tgz#b6ca7a41903a5b31589294d141f84134daa590d5"
-  integrity sha512-Utr1n+j71qQbscCucO7frnMC1j1TgftzqSLoUE0CezFRcwgcy1i3KhSCtdnSthXtvLUvh341WpkKOqp7UyOuhw==
+"@elastic/charts@40.2.0":
+  version "40.2.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-40.2.0.tgz#2e329ce4f495731f478cbaf2f8f3b89b5167a65b"
+  integrity sha512-N0t7YK58Kce/s9LEgaocrD75NYuFMwrcI1QNIPcwZ9IAOHY8/9yRHD5Ipoz0caGibAgOE8OunGkpyPY/NHKB5Q==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"
@@ -1533,7 +1533,8 @@
     d3-collection "^1.0.7"
     d3-interpolate "^1.4.0"
     d3-scale "^1.0.7"
-    d3-shape "^1.3.4"
+    d3-shape "^2.0.0"
+    luxon "^1.25.0"
     prop-types "^15.7.2"
     re-reselect "^3.4.0"
     react-redux "^7.1.0"
@@ -11321,7 +11322,7 @@ d3-selection@^1.0.2, d3-selection@^1.1.0:
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.1.tgz#98eedbbe085fbda5bafa2f9e3f3a2f4d7d622a98"
   integrity sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA==
 
-d3-shape@^1.1.0, d3-shape@^1.2.0, d3-shape@^1.3.4:
+d3-shape@^1.1.0, d3-shape@^1.2.0:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
   integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
@@ -19089,6 +19090,11 @@ lru-queue@0.1:
   dependencies:
     es5-ext "~0.10.2"
 
+luxon@^1.25.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.28.0.tgz#e7f96daad3938c06a62de0fb027115d251251fbf"
+  integrity sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==
+
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"