elastic · thompsongl · Aug 31, 2020 · Aug 14, 2020 · Aug 19, 2020 · Aug 20, 2020
diff --git a/package.json b/package.json
@@ -117,15 +117,18 @@
       "**/@types/*/**",
       "**/grunt-*",
       "**/grunt-*/**",
-      "x-pack/typescript"
+      "x-pack/typescript",
+      "@elastic/eui/rehype-react",
+      "@elastic/eui/remark-rehype",
+      "@elastic/eui/remark-rehype/**"
     ]
   },
   "dependencies": {
     "@babel/core": "^7.11.1",
     "@babel/register": "^7.10.5",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.0-rc.2",
-    "@elastic/eui": "27.4.1",
+    "@elastic/eui": "28.2.0",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",
     "@elastic/request-crypto": "1.1.4",
@@ -227,7 +230,7 @@
     "@babel/parser": "^7.11.2",
     "@babel/types": "^7.11.0",
     "@elastic/apm-rum": "^5.5.0",
-    "@elastic/charts": "19.8.1",
+    "@elastic/charts": "21.0.1",
     "@elastic/ems-client": "7.9.3",
     "@elastic/eslint-config-kibana": "0.15.0",
     "@elastic/eslint-plugin-eui": "0.0.2",

diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
@@ -9,8 +9,8 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "19.8.1",
-    "@elastic/eui": "27.4.1",
+    "@elastic/charts": "21.0.1",
+    "@elastic/eui": "28.2.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap b/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap
diff --git a/...tion/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap b/...tion/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
diff --git a/...ation/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap b/...ation/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
diff --git a/...imeseries/public/application/visualizations/views/timeseries/decorators/area_decorator.js b/...imeseries/public/application/visualizations/views/timeseries/decorators/area_decorator.js
@@ -32,7 +32,7 @@ export function AreaSeriesDecorator({
   lines,
   color,
   stackAccessors,
-  stackAsPercentage,
+  stackMode,
   points,
   xScaleType,
   yScaleType,
@@ -60,7 +60,7 @@ export function AreaSeriesDecorator({
     y1AccessorFormat,
     y0AccessorFormat,
     stackAccessors,
-    stackAsPercentage,
+    stackMode,
     xScaleType,
     yScaleType,
     timeZone,

diff --git a/...ries/public/application/visualizations/views/timeseries/decorators/area_decorator.test.js b/...ries/public/application/visualizations/views/timeseries/decorators/area_decorator.test.js
@@ -43,7 +43,7 @@ describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries
         [1557003600000, 9],
       ],
       hideInLegend: false,
-      stackAsPercentage: false,
+      stackMode: undefined,
       seriesId: '61ca57f1-469d-11e7-af02-69e470af7417:Rome',
       seriesGroupId: 'yaxis_main_group',
       name: 'Rome',

diff --git a/...timeseries/public/application/visualizations/views/timeseries/decorators/bar_decorator.js b/...timeseries/public/application/visualizations/views/timeseries/decorators/bar_decorator.js
@@ -32,7 +32,7 @@ export function BarSeriesDecorator({
   bars,
   color,
   stackAccessors,
-  stackAsPercentage,
+  stackMode,
   xScaleType,
   yScaleType,
   timeZone,
@@ -59,7 +59,7 @@ export function BarSeriesDecorator({
     y1AccessorFormat,
     y0AccessorFormat,
     stackAccessors,
-    stackAsPercentage,
+    stackMode,
     xScaleType,
     yScaleType,
     timeZone,

diff --git a/...eries/public/application/visualizations/views/timeseries/decorators/bar_decorator.test.js b/...eries/public/application/visualizations/views/timeseries/decorators/bar_decorator.test.js
@@ -33,7 +33,7 @@ describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries
         [1557003600000, 9],
       ],
       hideInLegend: false,
-      stackAsPercentage: false,
+      stackMode: undefined,
       seriesId: '61ca57f1-469d-11e7-af02-69e470af7417:Rome',
       seriesGroupId: 'yaxis_main_group',
       name: 'Rome',

diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -29,6 +29,7 @@ import {
   AnnotationDomainTypes,
   LineAnnotation,
   TooltipType,
+  StackMode,
 } from '@elastic/charts';
 import { EuiIcon } from '@elastic/eui';
 import { getTimezone } from '../../../lib/get_timezone';
@@ -197,7 +198,7 @@ export const TimeSeries = ({
                 bars={bars}
                 color={finalColor}
                 stackAccessors={stackAccessors}
-                stackAsPercentage={isPercentage}
+                stackMode={isPercentage ? StackMode.Percentage : undefined}
                 xScaleType={xScaleType}
                 yScaleType={yScaleType}
                 timeZone={timeZone}
@@ -222,7 +223,7 @@ export const TimeSeries = ({
                 lines={lines}
                 color={finalColor}
                 stackAccessors={stackAccessors}
-                stackAsPercentage={isPercentage}
+                stackMode={isPercentage ? StackMode.Percentage : undefined}
                 points={points}
                 xScaleType={xScaleType}
                 yScaleType={yScaleType}
@@ -248,8 +249,10 @@ export const TimeSeries = ({
           position={position}
           domain={domain}
           hide={hide}
-          showGridLines={showGrid}
-          gridLineStyle={GRID_LINE_CONFIG}
+          gridLine={{
+            ...GRID_LINE_CONFIG,
+            visible: showGrid,
+          }}
           tickFormat={tickFormatter}
         />
       ))}
@@ -259,8 +262,10 @@ export const TimeSeries = ({
         position={Position.Bottom}
         title={xAxisLabel}
         tickFormat={xAxisFormatter}
-        showGridLines={showGrid}
-        gridLineStyle={GRID_LINE_CONFIG}
+        gridLine={{
+          ...GRID_LINE_CONFIG,
+          visible: showGrid,
+        }}
       />
     </Chart>
   );

diff --git a/...ublic/application/visualizations/views/timeseries/model/__snapshots__/charts.test.js.snap b/...ublic/application/visualizations/views/timeseries/model/__snapshots__/charts.test.js.snap
diff --git a/...ns/vis_type_timeseries/public/application/visualizations/views/timeseries/model/charts.js b/...ns/vis_type_timeseries/public/application/visualizations/views/timeseries/model/charts.js
@@ -30,7 +30,7 @@ const Chart = {
   data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
   hideInLegend: PropTypes.bool.isRequired,
   color: PropTypes.string.isRequired,
-  stackAsPercentage: PropTypes.bool.isRequired,
+  stackMode: PropTypes.oneOf(['percentage', 'wiggle', 'silhouette']),
   stackAccessors: PropTypes.arrayOf(PropTypes.number),
   xScaleType: PropTypes.string,
   yScaleType: PropTypes.string,

diff --git a/...is_type_timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts b/...is_type_timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts
@@ -33,14 +33,12 @@ describe('TSVB theme', () => {
   });
   it('should return a highcontrast color theme for a different background', () => {
     // red use a near full-black color
-    expect(getBaseTheme(LIGHT_THEME, 'red').axes.axisTitleStyle.fill).toEqual('rgb(23,23,23)');
+    expect(getBaseTheme(LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)');
 
     // violet increased the text color to full white for higer contrast
-    expect(getBaseTheme(LIGHT_THEME, '#ba26ff').axes.axisTitleStyle.fill).toEqual(
-      'rgb(255,255,255)'
-    );
+    expect(getBaseTheme(LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)');
 
     // light yellow, prefer the LIGHT_THEME fill color because already with a good contrast
-    expect(getBaseTheme(LIGHT_THEME, '#fff49f').axes.axisTitleStyle.fill).toEqual('#333');
+    expect(getBaseTheme(LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333');
   });
 });
diff --git a/...ins/vis_type_timeseries/public/application/visualizations/views/timeseries/utils/theme.ts b/...ins/vis_type_timeseries/public/application/visualizations/views/timeseries/utils/theme.ts
@@ -109,27 +109,27 @@ export function getBaseTheme(baseTheme: Theme, bgColor?: string | null): Theme {
   const mainTheme = bgLuminosity <= 0.179 ? DARK_THEME : LIGHT_THEME;
   const color = findBestContrastColor(
     bgColor,
-    LIGHT_THEME.axes.axisTitleStyle.fill,
-    DARK_THEME.axes.axisTitleStyle.fill
+    LIGHT_THEME.axes.axisTitle.fill,
+    DARK_THEME.axes.axisTitle.fill
   );
   return {
     ...mainTheme,
     axes: {
       ...mainTheme.axes,
-      axisTitleStyle: {
-        ...mainTheme.axes.axisTitleStyle,
+      axisTitle: {
+        ...mainTheme.axes.axisTitle,
         fill: color,
       },
-      tickLabelStyle: {
-        ...mainTheme.axes.tickLabelStyle,
+      tickLabel: {
+        ...mainTheme.axes.tickLabel,
         fill: color,
       },
-      axisLineStyle: {
-        ...mainTheme.axes.axisLineStyle,
+      axisLine: {
+        ...mainTheme.axes.axisLine,
         stroke: color,
       },
-      tickLineStyle: {
-        ...mainTheme.axes.tickLineStyle,
+      tickLine: {
+        ...mainTheme.axes.tickLine,
         stroke: color,
       },
     },

diff --git a/...islib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/...islib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
diff --git a/...lib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap b/...lib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "27.4.1",
+    "@elastic/eui": "28.2.0",
     "@kbn/plugin-helpers": "1.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "27.4.1",
+    "@elastic/eui": "28.2.0",
     "react": "^16.12.0",
     "typescript": "4.0.2"
   }

diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "27.4.1",
+    "@elastic/eui": "28.2.0",
     "@kbn/plugin-helpers": "1.0.0",
     "react": "^16.12.0",
     "typescript": "4.0.2"

diff --git a/x-pack/package.json b/x-pack/package.json
@@ -276,7 +276,7 @@
     "@babel/runtime": "^7.11.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "27.4.1",
+    "@elastic/eui": "28.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.0",

diff --git a/...s/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/...s/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap