Upgrade elastic/charts to 8.1.6 (#42518) (#43024)

package.json

@@ -103,7 +103,7 @@
     "@babel/core": "7.4.5",
     "@babel/polyfill": "7.4.4",
     "@babel/register": "7.4.4",
-    "@elastic/charts": "^7.0.1",
+    "@elastic/charts": "^8.1.6",
     "@elastic/datemath": "5.0.2",
     "@elastic/eui": "13.1.1",
     "@elastic/filesaver": "1.1.2",

x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx

@@ -12,6 +12,9 @@ import {
   getSpecId,
   DataSeriesColorsValues,
   CustomSeriesColorsMap,
+  RecursivePartial,
+  BarSeriesStyle,
+  AreaSeriesStyle,
 } from '@elastic/charts';
 import { InfraMetricLayoutVisualizationType } from '../../../pages/metrics/layouts/types';
 import { InfraDataSeries } from '../../../graphql/types';
@@ -33,26 +36,18 @@ export const SeriesChart = (props: Props) => {
 };
 
 export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
-  const style = {
+  const style: RecursivePartial<AreaSeriesStyle> = {
     area: {
-      fill: color,
       opacity: 1,
       visible: InfraMetricLayoutVisualizationType.area === type,
     },
     line: {
-      stroke: color,
       strokeWidth: InfraMetricLayoutVisualizationType.area === type ? 1 : 2,
       visible: true,
     },
-    border: {
-      visible: false,
-      strokeWidth: 2,
-      stroke: color,
-    },
     point: {
       visible: false,
       radius: 0.2,
-      stroke: color,
       strokeWidth: 2,
       opacity: 1,
     },
@@ -80,19 +75,13 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
 };
 
 export const BarChart = ({ id, color, series, name, type, stack }: Props) => {
-  const style = {
+  const style: RecursivePartial<BarSeriesStyle> = {
     rectBorder: {
       stroke: color,
       strokeWidth: 1,
       visible: true,
     },
-    border: {
-      visible: false,
-      strokeWidth: 2,
-      stroke: color,
-    },
     rect: {
-      fill: color,
       opacity: 1,
     },
   };

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

@@ -11,6 +11,8 @@ import {
   DataSeriesColorsValues,
   CustomSeriesColorsMap,
   AreaSeries,
+  RecursivePartial,
+  AreaSeriesStyle,
 } from '@elastic/charts';
 import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
 import { colorTransformer, MetricsExplorerColor } from '../../../common/color_palette';
@@ -43,26 +45,18 @@ export const MetricExplorerSeriesChart = ({ metric, id, series, type, stack }: P
   customColors.set(colors, color);
   const chartId = `series-${series.id}-${yAccessor}`;
 
-  const seriesAreaStyle = {
+  const seriesAreaStyle: RecursivePartial<AreaSeriesStyle> = {
     line: {
-      stroke: color,
       strokeWidth: 2,
       visible: true,
     },
     area: {
-      fill: color,
       opacity: 0.5,
       visible: type === MetricsExplorerChartType.area,
     },
-    border: {
-      visible: false,
-      strokeWidth: 2,
-      stroke: color,
-    },
     point: {
       visible: false,
       radius: 0.2,
-      stroke: color,
       strokeWidth: 2,
       opacity: 1,
     },

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/settings.ts

@@ -31,7 +31,6 @@ export const defaultChartSettings: ChartSettings = {
 
 export const seriesStyle = {
   line: {
-    stroke: '',
     strokeWidth: 2,
     visible: true,
     opacity: 1,
@@ -39,17 +38,14 @@ export const seriesStyle = {
   border: {
     visible: false,
     strokeWidth: 0,
-    stroke: '',
   },
   point: {
     visible: false,
     radius: 2,
-    stroke: '',
     strokeWidth: 4,
     opacity: 0.5,
   },
   area: {
-    fill: '',
     opacity: 0.25,
     visible: false,
   },

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -14,6 +14,8 @@ import {
   Position,
   ScaleType,
   Settings,
+  AreaSeriesStyle,
+  RecursivePartial,
 } from '@elastic/charts';
 import { getOr, get } from 'lodash/fp';
 import {
@@ -29,33 +31,23 @@ import {
 import { AutoSizer } from '../auto_sizer';
 
 // custom series styles: https://ela.st/areachart-styling
-const getSeriesLineStyle = (color: string | undefined) => {
-  return color
-    ? {
-        area: {
-          fill: color,
-          opacity: 0.04,
-          visible: true,
-        },
-        line: {
-          stroke: color,
-          strokeWidth: 1,
-          visible: true,
-        },
-        border: {
-          visible: false,
-          strokeWidth: 1,
-          stroke: color,
-        },
-        point: {
-          visible: false,
-          radius: 0.2,
-          stroke: color,
-          strokeWidth: 1,
-          opacity: 1,
-        },
-      }
-    : undefined;
+const getSeriesLineStyle = (): RecursivePartial<AreaSeriesStyle> => {
+  return {
+    area: {
+      opacity: 0.04,
+      visible: true,
+    },
+    line: {
+      strokeWidth: 1,
+      visible: true,
+    },
+    point: {
+      visible: false,
+      radius: 0.2,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+  };
 };
 
 // https://ela.st/multi-areaseries
@@ -91,7 +83,7 @@ export const AreaChartBaseComponent = React.memo<{
               timeZone={browserTimezone}
               xAccessor="x"
               yAccessors={['y']}
-              areaSeriesStyle={getSeriesLineStyle(series.color)}
+              areaSeriesStyle={getSeriesLineStyle()}
               customSeriesColors={getSeriesStyle(seriesKey, series.color)}
             />
           ) : null;

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -15,12 +15,14 @@ import {
   LIGHT_THEME,
   DARK_THEME,
   ScaleType,
+  TickFormatter,
+  SettingSpecProps,
+  Rotation,
+  Rendering,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { TickFormatter, Rotation, Rendering } from '@elastic/charts/dist/lib/series/specs';
 import chrome from 'ui/chrome';
 import moment from 'moment-timezone';
-import { SettingSpecProps } from '@elastic/charts/dist/specs/settings';
 
 const chartHeight = 74;
 const chartDefaultRotation: Rotation = 0;

x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx

@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ScaleType, niceTimeFormatter, Rotation } from '@elastic/charts';
+import {
+  ScaleType,
+  niceTimeFormatter,
+  Rotation,
+  BrushEndListener,
+  ElementClickListener,
+} from '@elastic/charts';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -18,7 +24,6 @@ import { get, getOr } from 'lodash/fp';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { BrushEndListener, ElementClickListener } from '@elastic/charts/dist/state/chart_state';
 import { KpiHostsData, KpiNetworkData } from '../../graphql/types';
 import { AreaChart } from '../charts/areachart';
 import { BarChart } from '../charts/barchart';

x-pack/legacy/plugins/uptime/public/components/functional/charts/get_colors_map.ts

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DataSeriesColorsValues } from '@elastic/charts';
-import { SpecId } from '@elastic/charts/dist/lib/utils/ids';
+import { DataSeriesColorsValues, SpecId } from '@elastic/charts';
 
 /**
  * This is a helper function used to more easily define a basic map

yarn.lock

@@ -1569,10 +1569,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@elastic/charts@^7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-7.0.1.tgz#0ddc6d5444def8ed5d45c4113359c311e1e15fb7"
-  integrity sha512-cscQcKB1nxPNipdPeMi14fi5ALdSywz2MYOn1UHmStiFBeaFuwt3Ncog/HJhtJG1Dgjqs0yvqpB92lkja+UmQQ==
+"@elastic/charts@^8.1.6":
+  version "8.1.6"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-8.1.6.tgz#d8d0d2c16f21126293dd35979f6405de2ba2d95f"
+  integrity sha512-1Kd3GlIlwK39tbkgZe+Wtk4FWJjMBV5cnlClgmUfgzTUxF6we8syTLh6vqZQJ8eyGKZamfyLr23wtdt9MCx1HA==
   dependencies:
     "@types/d3-shape" "^1.3.1"
     "@types/luxon" "^1.11.1"