Update dependency @elastic/charts to v16

package.json

@@ -88,6 +88,7 @@
     "**/isomorphic-git/**/base64-js": "^1.2.1",
     "**/image-diff/gm/debug": "^2.6.9",
     "**/react-dom": "^16.12.0",
+    "**/react": "^16.12.0",
     "**/react-test-renderer": "^16.12.0",
     "**/deepmerge": "^4.2.2",
     "**/serialize-javascript": "^2.1.1"
@@ -113,7 +114,7 @@
     "@babel/core": "^7.5.5",
     "@babel/register": "^7.7.0",
     "@elastic/apm-rum": "^4.6.0",
-    "@elastic/charts": "^14.0.0",
+    "@elastic/charts": "^16.0.1",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "1.0.5",
     "@elastic/eui": "17.3.1",

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx

@@ -30,9 +30,6 @@ import {
   Chart,
   HistogramBarSeries,
   GeometryValue,
-  getAnnotationId,
-  getAxisId,
-  getSpecId,
   LineAnnotation,
   Position,
   ScaleType,
@@ -237,34 +234,34 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
           theme={chartsTheme}
         />
         <Axis
-          id={getAxisId('discover-histogram-left-axis')}
+          id="discover-histogram-left-axis"
           position={Position.Left}
           ticks={5}
           title={chartData.yAxisLabel}
         />
         <Axis
-          id={getAxisId('discover-histogram-bottom-axis')}
+          id="discover-histogram-bottom-axis"
           position={Position.Bottom}
           title={chartData.xAxisLabel}
           tickFormat={this.formatXValue}
           ticks={10}
         />
         <LineAnnotation
-          annotationId={getAnnotationId('line-annotation')}
+          id="line-annotation"
           domainType={AnnotationDomainTypes.XDomain}
           dataValues={lineAnnotationData}
           hideTooltips={true}
           style={lineAnnotationStyle}
         />
         <RectAnnotation
           dataValues={rectAnnotations}
-          annotationId={getAnnotationId('rect-annotation')}
+          id="rect-annotation"
           zIndex={2}
           style={rectAnnotationStyle}
           hideTooltips={true}
         />
         <HistogramBarSeries
-          id={getSpecId('discover-histogram')}
+          id="discover-histogram"
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor="x"

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/__mocks__/@elastic/charts.js

@@ -38,8 +38,5 @@ export const ScaleType = {
   Time: 'time',
 };
 
-export const getSpecId = x => `id:${x}`;
-export const getGroupId = x => `groupId:${x}`;
-
 export const BarSeries = () => null;
 export const AreaSeries = () => null;

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js

@@ -18,8 +18,8 @@
  */
 
 import React from 'react';
-import { getSpecId, getGroupId, ScaleType, AreaSeries } from '@elastic/charts';
-import { getSeriesColors, getAreaStyles } from '../utils/series_styles';
+import { ScaleType, AreaSeries } from '@elastic/charts';
+import { getAreaStyles } from '../utils/series_styles';
 import { ChartsEntities } from '../model/charts';
 import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES } from '../../../constants';
 
@@ -41,9 +41,9 @@ export function AreaSeriesDecorator({
   useDefaultGroupDomain,
   sortIndex,
 }) {
-  const id = getSpecId(seriesId);
-  const groupId = getGroupId(seriesGroupId);
-  const customSeriesColors = getSeriesColors(color, id);
+  const id = seriesId;
+  const groupId = seriesGroupId;
+  const customSeriesColors = [color];
   const areaSeriesStyle = getAreaStyles({ points, lines, color });
 
   const seriesSettings = {

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js

@@ -18,8 +18,8 @@
  */
 
 import React from 'react';
-import { getSpecId, getGroupId, ScaleType, BarSeries } from '@elastic/charts';
-import { getSeriesColors, getBarStyles } from '../utils/series_styles';
+import { ScaleType, BarSeries } from '@elastic/charts';
+import { getBarStyles } from '../utils/series_styles';
 import { ChartsEntities } from '../model/charts';
 import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES } from '../../../constants';
 
@@ -40,9 +40,9 @@ export function BarSeriesDecorator({
   useDefaultGroupDomain,
   sortIndex,
 }) {
-  const id = getSpecId(seriesId);
-  const groupId = getGroupId(seriesGroupId);
-  const customSeriesColors = getSeriesColors(color, id);
+  const id = seriesId;
+  const groupId = seriesGroupId;
+  const customSeriesColors = [color];
   const barSeriesStyle = getBarStyles(bars, color);
 
   const seriesSettings = {

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js

@@ -25,11 +25,8 @@ import {
   Chart,
   Position,
   Settings,
-  getAxisId,
-  getGroupId,
   DARK_THEME,
   LIGHT_THEME,
-  getAnnotationId,
   AnnotationDomainTypes,
   LineAnnotation,
   TooltipType,
@@ -75,7 +72,7 @@ export const TimeSeries = ({
   const chartRef = useRef();
   const updateCursor = (_, cursor) => {
     if (chartRef.current) {
-      chartRef.current.dispatchExternalCursorEvent(cursor);
+      chartRef.current.dispatchExternalPointerEvent(cursor);
     }
   };
 
@@ -99,7 +96,7 @@ export const TimeSeries = ({
         legendPosition={legendPosition}
         onBrushEnd={onBrush}
         animateData={false}
-        onCursorUpdate={handleCursorUpdate}
+        onPointerUpdate={handleCursorUpdate}
         theme={
           hasBarChart
             ? {}
@@ -126,7 +123,7 @@ export const TimeSeries = ({
         return (
           <LineAnnotation
             key={id}
-            annotationId={getAnnotationId(id)}
+            id={id}
             domainType={AnnotationDomainTypes.XDomain}
             dataValues={dataValues}
             marker={<EuiIcon type={ICON_TYPES_MAP[icon] || 'asterisk'} />}
@@ -213,8 +210,8 @@ export const TimeSeries = ({
       {yAxis.map(({ id, groupId, position, tickFormatter, domain, hide }) => (
         <Axis
           key={groupId}
-          groupId={getGroupId(groupId)}
-          id={getAxisId(id)}
+          groupId={groupId}
+          id={id}
           position={position}
           domain={domain}
           hide={hide}
@@ -225,7 +222,7 @@ export const TimeSeries = ({
       ))}
 
       <Axis
-        id={getAxisId('bottom')}
+        id="bottom"
         position={Position.Bottom}
         title={xAxisLabel}
         tickFormat={xAxisFormatter}

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/utils/series_styles.js

@@ -56,12 +56,3 @@ export const getBarStyles = ({ show = true, lineWidth = 0, fill = 1 }, color) =>
     },
   },
 });
-
-export const getSeriesColors = (color, specId) => {
-  const map = new Map();
-  const seriesColorsValues = { specId, colorValues: [] };
-
-  map.set(seriesColorsValues, color);
-
-  return map;
-};

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/utils/series_styles.test.js

@@ -17,12 +17,11 @@
  * under the License.
  */
 
-import { getBarStyles, getSeriesColors, getAreaStyles } from './series_styles';
+import { getBarStyles, getAreaStyles } from './series_styles';
 
 describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/utils/series_styles.js', () => {
   let bars;
   let color;
-  let specId;
   let points;
   let lines;
 
@@ -33,7 +32,6 @@ describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries
       show: true,
     };
     color = 'rgb(224, 0, 221)';
-    specId = 'IT';
     points = {
       lineWidth: 1,
       show: true,
@@ -60,12 +58,6 @@ describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries
     });
   });
 
-  describe('getSeriesColors()', () => {
-    test('should match a snapshot', () => {
-      expect(getSeriesColors(color, specId)).toMatchSnapshot();
-    });
-  });
-
   describe('getAreaStyles()', () => {
     test('should match a snapshot', () => {
       expect(getAreaStyles({ points, lines, color })).toMatchSnapshot();

test/functional/services/elastic_chart.ts

@@ -37,7 +37,7 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
 
     public async getVisualizationRenderingCount(dataTestSubj: string) {
       const chart = await testSubjects.find(dataTestSubj);
-      const visContainer = await chart.findByCssSelector('.echChart');
+      const visContainer = await chart.findByCssSelector('.echChartStatus');
       const renderingCount = await visContainer.getAttribute('data-ech-render-count');
       return Number(renderingCount);
     }

x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart.tsx

@@ -7,15 +7,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import {
-  Axis,
-  Chart,
-  getAxisId,
-  niceTimeFormatter,
-  Position,
-  Settings,
-  TooltipValue,
-} from '@elastic/charts';
+import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
@@ -139,13 +131,13 @@ export const MetricsExplorerChart = ({
               />
             ))}
             <Axis
-              id={getAxisId('timestamp')}
+              id={'timestamp'}
               position={Position.Bottom}
               showOverlappingTicks={true}
               tickFormat={dateFormatter}
             />
             <Axis
-              id={getAxisId('values')}
+              id={'values'}
               position={Position.Left}
               tickFormat={yAxisFormater}
               domain={domain}