Merge branch 'main' into ea-66-api-delete-risk-engine-installation-data

elastic · Sep 5, 2024 · a8b4d04 · a8b4d04
2 parents 0433147 + 1681a34
commit a8b4d04
Show file tree

Hide file tree

Showing 293 changed files with 6,136 additions and 3,656 deletions.
diff --git a/docs/developer/contributing/development-functional-tests.asciidoc b/docs/developer/contributing/development-functional-tests.asciidoc
@@ -203,7 +203,7 @@ Tests should run at the positive security boundary condition, meaning that they
 
 The functional UI tests now default to logging in with a user named `test_user` and the roles of this user can be changed dynamically without logging in and out.  
 
-In order to achieve this a new service was introduced called `createTestUserService` (see `test/common/services/security/test_user.ts`). The purpose of this test user service is to create roles defined in the test config files and setRoles() or restoreDefaults().
+In order to achieve this a new service was introduced called `createTestUserService` (see `packages/kbn-ftr-common-functional-ui-services/services/security/test_user.ts`). The purpose of this test user service is to create roles defined in the test config files and setRoles() or restoreDefaults().
 
 An example of how to set the role like how its defined below:
 
@@ -366,22 +366,22 @@ await testSubjects.click(‘containerButton’);
 ** `find.allByCssSelector()`
 
 **retry:**:::
-// * Source: {kibana-blob}test/common/services/retry/retry.ts[test/common/services/retry/retry.ts]
+// * Source: {kibana-blob}packages/kbn-ftr-common-functional-services/services/retry/retry.ts[packages/kbn-ftr-common-functional-services/services/retry/retry.ts]
 * Helpers for retrying operations
 * Popular methods:
 ** `retry.try(fn, onFailureBlock)` - Execute `fn` in a loop until it succeeds or the default timeout elapses. The optional `onFailureBlock` is executed before each retry attempt.
 ** `retry.tryForTime(ms, fn, onFailureBlock)` - Execute `fn` in a loop until it succeeds or `ms` milliseconds elapses. The optional `onFailureBlock` is executed before each retry attempt.
 
 **kibanaServer:**:::
-// * Source: {kibana-blob}test/common/services/kibana_server/kibana_server.js[test/common/services/kibana_server/kibana_server.js]
+// * Source: {kibana-blob}packages/kbn-ftr-common-functional-services/services/kibana_server/kibana_server.ts[packages/kbn-ftr-common-functional-services/services/kibana_server/kibana_server.ts]
 * Helpers for interacting with {kib}'s server
 * Commonly used methods:
 ** `kibanaServer.uiSettings.update()`
 ** `kibanaServer.version.get()`
 ** `kibanaServer.status.getOverallState()`
 
 **esArchiver:**:::
-// * Source: {kibana-blob}test/common/services/es_archiver.ts[test/common/services/es_archiver.ts]
+// * Source: {kibana-blob}packages/kbn-ftr-common-functional-services/services/es_archiver.ts[packages/kbn-ftr-common-functional-services/services/es_archiver.ts]
 * Load/unload archives created with the `esArchiver`
 * Popular methods:
 ** `esArchiver.load(path)`
@@ -393,7 +393,7 @@ Full list of services that are used in functional tests can be found here: {kiba
 
 **Low-level utilities:**:::
 * es
-// ** Source: {kibana-blob}test/common/services/es.ts[test/common/services/es.ts]
+// ** Source: {kibana-blob}packages/kbn-ftr-common-functional-services/services/es.ts[packages/kbn-ftr-common-functional-services/services/es.ts]
 ** {es} client
 ** Higher level options: `kibanaServer.uiSettings` or `esArchiver`
 * remote

diff --git a/docs/management/rollups/create_and_manage_rollups.asciidoc b/docs/management/rollups/create_and_manage_rollups.asciidoc
@@ -165,7 +165,7 @@ as your source to see both the raw and rolled up data.
 [role="screenshot"]
 image::images/management-create-rollup-bar-chart.png[Create visualization of rolled up data]
 
-. Select *Bar vertical stacked* in the chart type dropdown.
+. Select *Bar* in the chart type dropdown.
 
 . Add the `@timestamp` field to the *Horizontal axis*.
 

diff --git a/packages/kbn-chart-icons/index.ts b/packages/kbn-chart-icons/index.ts
@@ -38,10 +38,18 @@ export {
   EuiIconLegend,
   IconRegionMap,
   IconChartHeatmap,
+  IconChartGauge,
   IconChartHorizontalBullet,
+  IconDonutHoleLarge,
+  IconDonutHoleMedium,
+  IconDonutHoleSmall,
   IconChartVerticalBullet,
+  IconChartLinearSimple,
   IconChartGaugeSemiCircle,
+  IconChartGaugeSemiCircleSimple,
   IconChartGaugeArc,
+  IconChartGaugeArcSimple,
   IconChartGaugeCircle,
+  IconChartGaugeCircleSimple,
   IconChartTagcloud,
 } from './src/assets';
diff --git a/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx b/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx
@@ -42,8 +42,12 @@ import {
   EuiIconLegend,
   IconRegionMap,
   IconChartHeatmap,
+  IconChartGauge,
   IconChartHorizontalBullet,
   IconChartVerticalBullet,
+  IconDonutHoleLarge,
+  IconDonutHoleMedium,
+  IconDonutHoleSmall,
 } from '../..';
 
 export default {
@@ -183,10 +187,17 @@ const IconsArray: Array<{
     title: 'IconChartHorizontalBullet',
     Component: IconChartHorizontalBullet,
   },
+  {
+    title: 'IconChartGauge',
+    Component: IconChartGauge,
+  },
   {
     title: 'IconChartVerticalBullet',
     Component: IconChartVerticalBullet,
   },
+  { title: 'IconDonutHoleLarge', Component: IconDonutHoleLarge },
+  { title: 'IconDonutHoleMedium', Component: IconDonutHoleMedium },
+  { title: 'IconDonutHoleSmall', Component: IconDonutHoleSmall },
 ];
 
 interface RootComponentProps {

diff --git a/packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
@@ -8,17 +8,10 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { IconSimpleWrapper } from '../icon_simple_wrapper';
 
-export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconCircle = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M7.427.522c-.813.081-1.398.21-2.039.45a7.318 7.318 0 0 0-2.67 1.72A7.045 7.045 0 0 0 1.28 4.68 7.241 7.241 0 0 0 .507 8c0 1.196.243 2.24.773 3.32a7.047 7.047 0 0 0 1.425 1.975A7.047 7.047 0 0 0 4.68 14.72a7.254 7.254 0 0 0 3.32.773 7.254 7.254 0 0 0 3.32-.773 7.047 7.047 0 0 0 1.975-1.425 7.047 7.047 0 0 0 1.425-1.975A7.254 7.254 0 0 0 15.493 8a7.254 7.254 0 0 0-.773-3.32 7.045 7.045 0 0 0-1.438-1.988C12.111 1.524 10.695.818 9.027.571 8.773.533 7.659.499 7.427.522m1.426 1.041a6.519 6.519 0 0 1 3.091 1.271c.329.246.976.893 1.222 1.222.561.751.976 1.634 1.164 2.479a6.766 6.766 0 0 1 0 2.93c-.414 1.861-1.725 3.513-3.463 4.363a6.76 6.76 0 0 1-1.987.616c-.424.065-1.336.065-1.76 0-1.948-.296-3.592-1.359-4.627-2.993a7.502 7.502 0 0 1-.634-1.332A6.158 6.158 0 0 1 1.514 8c0-1.039.201-1.925.646-2.84.34-.698.686-1.18 1.253-1.747A5.956 5.956 0 0 1 5.16 2.16a6.452 6.452 0 0 1 3.693-.597" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
@@ -8,18 +8,10 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { IconSimpleWrapper } from '../icon_simple_wrapper';
 
-export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width="16"
-    height="16"
-    fill="none"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />
-  </svg>
+export const IconTriangle = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
+    <path d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />{' '}
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_bottom.tsx b/packages/kbn-chart-icons/src/assets/axis_bottom.tsx
@@ -7,26 +7,12 @@
  */
 
 import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisBottom = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisBottom = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M5 1.5a.5.5 0 111 0v7a.5.5 0 01-1 0v-7zM15.39 11.39a1.5 1.5 0 010 2.12l-2.122 2.122a.5.5 0 11-.707-.707l2.121-2.122a.5.5 0 000-.707l-2.121-2.12a.5.5 0 11.707-.708l2.121 2.121zM3.439 9.269a.5.5 0 010 .707l-2.122 2.121a.5.5 0 000 .707l2.122 2.121a.5.5 0 01-.707.708L.61 13.51a1.5 1.5 0 010-2.121l2.122-2.121a.5.5 0 01.707 0zM8 3a.5.5 0 01.5.5v5a.5.5 0 01-1 0v-5A.5.5 0 018 3zM11 5.5a.5.5 0 00-1 0v3a.5.5 0 001 0v-3z" />
     <path d="M3.5 12a.5.5 0 000 1h9a.5.5 0 000-1h-9z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_left.tsx b/packages/kbn-chart-icons/src/assets/axis_left.tsx
@@ -6,28 +6,14 @@
  * Side Public License, v 1.
  */
 
+import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisLeft = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisLeft = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M7.378 3.585a.5.5 0 00.353-.854L5.61.611a1.5 1.5 0 00-2.121 0L1.367 2.73a.5.5 0 00.708.707l2.12-2.12a.5.5 0 01.708 0l2.121 2.12a.5.5 0 00.354.147z" />
     <path d="M5.046 3.088v4.129l.005.04v5.658a.5.5 0 01-.992.09l-.01-.09V8.786l-.004-.04V3.087a.5.5 0 01.992-.09l.01.09z" />
     <path d="M4.55 15.829a1.5 1.5 0 001.06-.44l2.122-2.121a.5.5 0 10-.707-.707l-2.121 2.121a.5.5 0 01-.708 0l-2.12-2.121a.5.5 0 00-.708.707l2.121 2.121a1.5 1.5 0 001.061.44zM13.5 4a.5.5 0 01.5.5v7a.5.5 0 11-1 0v-7a.5.5 0 01.5-.5zM10.5 6.5a.5.5 0 011 0v5a.5.5 0 11-1 0v-5zM8.5 8a.5.5 0 00-.5.5v3a.5.5 0 101 0v-3a.5.5 0 00-.5-.5z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_right.tsx b/packages/kbn-chart-icons/src/assets/axis_right.tsx
@@ -6,28 +6,14 @@
  * Side Public License, v 1.
  */
 
+import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisRight = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisRight = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M8.622 3.585a.5.5 0 01-.353-.854L10.39.611a1.5 1.5 0 012.121 0l2.122 2.12a.5.5 0 11-.707.707l-2.122-2.12a.5.5 0 00-.707 0l-2.121 2.12a.5.5 0 01-.354.147z" />
     <path d="M11.95 12.915V8.786l.005-.04V3.087a.5.5 0 00-.992-.09l-.01.09v4.129l-.004.04v5.658a.5.5 0 00.992.09l.01-.09z" />
     <path d="M11.45 15.829a1.5 1.5 0 01-1.06-.44l-2.122-2.121a.5.5 0 11.707-.707l2.121 2.121a.5.5 0 00.707 0l2.122-2.121a.5.5 0 01.707.707l-2.121 2.121a1.5 1.5 0 01-1.061.44zM2.5 4a.5.5 0 00-.5.5v7a.5.5 0 101 0v-7a.5.5 0 00-.5-.5zM5.5 6.5a.5.5 0 00-1 0v5a.5.5 0 101 0v-5zM7.5 8a.5.5 0 01.5.5v3a.5.5 0 11-1 0v-3a.5.5 0 01.5-.5z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_top.tsx b/packages/kbn-chart-icons/src/assets/axis_top.tsx
@@ -6,31 +6,17 @@
  * Side Public License, v 1.
  */
 
+import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisTop = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisTop = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M4.99991 7.49999C4.99991 7.22384 5.22376 6.99999 5.49991 6.99999C5.77605 6.99999 5.99991 7.22384 5.99991 7.49999V14.5C5.99991 14.7761 5.77605 15 5.49991 15C5.22376 15 4.99991 14.7761 4.99991 14.5V7.49999Z" />
     <path d="M15.3893 2.38929C15.6706 2.67059 15.8287 3.05212 15.8287 3.44995C15.8287 3.84777 15.6706 4.2293 15.3893 4.51061L13.268 6.63193C13.1742 6.7257 13.0471 6.77838 12.9145 6.77838C12.7818 6.77838 12.6547 6.7257 12.5609 6.63193C12.4671 6.53816 12.4145 6.41098 12.4145 6.27838C12.4145 6.14577 12.4671 6.01859 12.5609 5.92482L14.6822 3.8035C14.776 3.70973 14.8287 3.58256 14.8287 3.44995C14.8287 3.31734 14.776 3.19016 14.6822 3.09639L12.5609 0.975075C12.4671 0.881307 12.4145 0.754129 12.4145 0.621522C12.4145 0.488914 12.4671 0.361736 12.5609 0.267968C12.6547 0.1742 12.7819 0.121521 12.9145 0.121521C13.0471 0.121521 13.1742 0.1742 13.268 0.267968L15.3893 2.38929Z" />
     <path d="M3.43867 0.26864C3.53243 0.362408 3.58511 0.489585 3.58511 0.622193C3.58511 0.754801 3.53243 0.881978 3.43867 0.975746L1.31735 3.09707C1.22358 3.19083 1.1709 3.31801 1.1709 3.45062C1.1709 3.58323 1.22358 3.71041 1.31735 3.80417L3.43867 5.92549C3.53243 6.01926 3.58511 6.14644 3.58511 6.27905C3.58511 6.41166 3.53243 6.53883 3.43867 6.6326C3.3449 6.72637 3.21772 6.77905 3.08511 6.77905C2.9525 6.77905 2.82533 6.72637 2.73156 6.6326L0.610239 4.51128C0.328934 4.22998 0.170898 3.84844 0.170898 3.45062C0.170898 3.0528 0.328934 2.67126 0.610238 2.38996L2.73156 0.26864C2.82533 0.174871 2.9525 0.122192 3.08511 0.122192C3.21772 0.122192 3.3449 0.174871 3.43867 0.26864Z" />
     <path d="M7.99991 6.99999C8.27605 6.99999 8.49991 7.22384 8.49991 7.49999V12.5C8.49991 12.7761 8.27605 13 7.99991 13C7.72377 13 7.49991 12.7761 7.49991 12.5V7.49999C7.49991 7.22384 7.72377 6.99999 7.99991 6.99999Z" />
     <path d="M10.9999 7.49999C10.9999 7.22384 10.776 6.99999 10.4999 6.99999C10.2238 6.99999 9.99991 7.22384 9.99991 7.49999V10.5C9.99991 10.7761 10.2238 11 10.4999 11C10.776 11 10.9999 10.7761 10.9999 10.5V7.49999Z" />
     <path d="M3.50015 2.99999C3.22401 2.99999 3.00015 3.22384 3.00015 3.49999C3.00015 3.77613 3.22401 3.99999 3.50015 3.99999H12.5002C12.7763 3.99999 13.0002 3.77613 13.0002 3.49999C13.0002 3.22384 12.7763 2.99999 12.5002 2.99999H3.50015Z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_area.tsx b/packages/kbn-chart-icons/src/assets/chart_area.tsx
@@ -9,18 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartArea = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M30 6v15a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-6.994 5.865-6.997C20.5 11 23 11 24 11s3-5 6-5z"
       className={colors.accent}
@@ -29,5 +21,5 @@ export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, '
       d="M6 1c3 0 5 6 6 6s3.5-3 6-3c1.667 0 2.944 2.333 3.833 6.999l.309.001c-1.013 0-2.27 0-3.593.002h-.684C15.231 11.007 13 18 12 18s-3.5-3-6-3-5 4-6 4V7c1-1.5 3-6 6-6z"
       className={colors.subdued}
     />
-  </svg>
+  </ChartIconWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx b/packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
@@ -9,22 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartAreaPercentage = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartAreaPercentage = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M0 13v8a1 1 0 001 1h28a1 1 0 001-1V9.25c-1.251-.929-2.45-1.734-3.493-2.313a11.028 11.028 0 00-1.478-.703C24.592 6.072 24.25 6 24 6c-.262 0-.63.212-1.126.77-.472.53-.952 1.249-1.458 2.007l-.013.02c-.49.736-1.006 1.51-1.53 2.098C19.37 11.462 18.739 12 18 12c-1.062 0-2.112-.263-3.092-.508l-.03-.007C13.869 11.232 12.929 11 12 11c-.337 0-.729.171-1.2.525-.466.35-.94.822-1.446 1.329l-.015.015c-.49.489-1.01 1.01-1.539 1.406-.529.396-1.137.725-1.8.725-.657 0-1.57-.212-2.48-.424l-.058-.014C2.275 14.287 1.032 14 0 14v-1z"
       className={colors.accent}
@@ -33,5 +21,5 @@ export const IconChartAreaPercentage = ({
       d="M29 0a1 1 0 011 1v6.012c-1.06-.764-2.085-1.437-3.007-1.95a11.93 11.93 0 00-1.616-.765C24.887 4.115 24.418 4 24 4c-.738 0-1.369.538-1.874 1.105-.523.589-1.039 1.362-1.529 2.098l-.013.02c-.506.758-.985 1.476-1.458 2.007-.495.558-.864.77-1.126.77-.928 0-1.867-.232-2.879-.485l-.029-.007C14.112 9.263 13.062 9 12 9c-.663 0-1.271.328-1.8.725-.528.396-1.05.917-1.538 1.406l-.015.015c-.507.507-.98.98-1.447 1.329-.471.354-.863.525-1.2.525-.528 0-1.328-.183-2.311-.412l-.034-.007C2.507 12.314 1.159 12 .001 12V1a1 1 0 011-1h28z"
       className={colors.subdued}
     />
-  </svg>
+  </ChartIconWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx b/packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
@@ -9,18 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={31}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartAreaStacked = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M0 15.213l.484.091.813.146.762.129C3.779 15.859 5.09 16 6 16c.986 0 1.712-.25 3.166-.966l.281-.14C10.802 14.217 11.381 14 12 14c.507 0 .988.146 1.89.571l1.209.592c1.28.617 1.977.837 2.901.837 1.028 0 1.75-.349 3.119-1.344l.89-.659C23.034 13.252 23.535 13 24 13c.581 0 1.232.185 2.598.718l1.1.436.568.217c.72.27 1.256.438 1.736.532L30 21a1 1 0 01-1 1H1a1 1 0 01-1-1v-5.787z"
       className={colors.accent}
@@ -29,5 +21,5 @@ export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconP
       d="M24 1c1.334 0 3.334 1 6 3v8.842l-.324-.098c-.346-.11-.759-.262-1.273-.462l-1.101-.436-.568-.217-.536-.193C25.277 11.118 24.676 11 24 11c-1.028 0-1.75.349-3.119 1.344l-.89.659c-1.024.745-1.524.997-1.99.997-.508 0-.989-.146-1.89-.571l-1.21-.592c-1.28-.617-1.977-.837-2.9-.837-.987 0-1.713.25-3.167.966l-.281.14C7.198 13.783 6.619 14 6 14l-.334-.007c-1.182-.045-3.08-.317-5.665-.815V9c2 0 4.666 1 6 1 2 0 4-4 6-4s4 1 6 1 4-6 6-6z"
       className={colors.subdued}
     />
-  </svg>
+  </ChartIconWrapper>
 );