Upgrade elastic/charts to 8.1.6

package.json

@@ -104,7 +104,7 @@
     "@babel/core": "7.4.5",
     "@babel/polyfill": "7.4.4",
     "@babel/register": "7.4.4",
-    "@elastic/charts": "^7.2.1",
+    "@elastic/charts": "^8.1.4",
     "@elastic/datemath": "5.0.2",
     "@elastic/eui": "13.0.0",
     "@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,25 +31,21 @@ export const defaultChartSettings: ChartSettings = {
 
 export const seriesStyle = {
   line: {
-    stroke: '',
     strokeWidth: 2,
     visible: true,
     opacity: 1,
   },
   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 {
@@ -28,33 +30,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
@@ -87,7 +79,7 @@ export const AreaChartBaseComponent = React.memo<{
               timeZone={browserTimezone}
               xAccessor="x"
               yAccessors={['y']}
-              areaSeriesStyle={getSeriesLineStyle(series.color)}
+              areaSeriesStyle={getSeriesLineStyle()}
               customSeriesColors={getSeriesStyle(seriesKey, series.color)}
             />
           ) : null;

yarn.lock

@@ -1584,10 +1584,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@elastic/charts@^7.2.1":
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-7.2.1.tgz#75e6ed23ebb4014ea1df8ee232905352525ddfca"
-  integrity sha512-cRvuRkZkMIYFjEJ3igPb3Uqv+aYJnoC+ZYkPdoCHHoiw4Dlwdl3xQVuzJECWoE1oZDcFq/MKjOFFTtFDjm57Ug==
+"@elastic/charts@^8.1.4":
+  version "8.1.4"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-8.1.4.tgz#61e368bea6c4e562bce7683e0b3ac010bcca6b15"
+  integrity sha512-T++Z+m52vclyyPWjqbytr0CEWKcn6D8RU80K/it+Qwc2cbeg/wfirMUV6AFHj3C9E4HADZOWC4ryH2gc6n6TVg==
   dependencies:
     "@types/d3-shape" "^1.3.1"
     "@types/luxon" "^1.11.1"