Update dependency @elastic/charts to v16.0.2 (#52619) (#53978)

Author: markov00

package.json

@@ -86,6 +86,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"
@@ -110,7 +111,7 @@
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/register": "^7.7.0",
-    "@elastic/charts": "^14.0.0",
+    "@elastic/charts": "^16.0.2",
     "@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/__snapshots__/area_decorator.test.js.snap

@@ -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/__snapshots__/bar_decorator.test.js.snap

@@ -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/decorators/area_decorator.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/decorators/bar_decorator.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;
-};