[Lens] Chart switch redesign

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*.
 

packages/kbn-chart-icons/index.ts

@@ -38,10 +38,19 @@ export {
   EuiIconLegend,
   IconRegionMap,
   IconChartHeatmap,
+  IconChartGauge,
   IconChartHorizontalBullet,
+  IconChartHorizontalBulletSimple,
+  IconDonutHoleLarge,
+  IconDonutHoleMedium,
+  IconDonutHoleSmall,
   IconChartVerticalBullet,
+  IconChartVerticalBulletSimple,
   IconChartGaugeSemiCircle,
+  IconChartGaugeSemiCircleSimple,
   IconChartGaugeArc,
+  IconChartGaugeArcSimple,
   IconChartGaugeCircle,
+  IconChartGaugeCircleSimple,
   IconChartTagcloud,
 } from './src/assets';

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 {

packages/kbn-chart-icons/src/assets/chart_gauge.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
+
+export const IconChartGauge = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <svg
+      width="30"
+      height="22"
+      viewBox="0 0 30 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        className={colors.subdued}
+        d="M1 13a1 1 0 00-1 1v2a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-2a1 1 0 00-1-1H1z"
+      />
+      <path
+        className={colors.accent}
+        d="M0 6a1 1 0 011-1h24a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V6z"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/chart_gauge_arc_simple.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconChartGaugeArcSimple = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.0962 3.90381C9.55779 1.3654 5.44221 1.3654 2.90381 3.90381C0.484359 6.32325 0.370973 10.1755 2.56365 12.7292L3.61091 11.682C3.80617 11.4867 4.12276 11.4867 4.31802 11.682C4.51328 11.8772 4.51328 12.1938 4.31802 12.3891L2.90381 13.8033C2.70854 13.9986 2.39196 13.9986 2.1967 13.8033C-0.732233 10.8744 -0.732233 6.12563 2.1967 3.1967C5.12563 0.267767 9.87437 0.267767 12.8033 3.1967C15.7322 6.12563 15.7322 10.8744 12.8033 13.8033C12.608 13.9986 12.2915 13.9986 12.0962 13.8033L10.682 12.3891C10.4867 12.1938 10.4867 11.8772 10.682 11.682C10.8772 11.4867 11.1938 11.4867 11.3891 11.682L12.4364 12.7292C14.629 10.1755 14.5156 6.32325 12.0962 3.90381Z"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/chart_gauge_circle_simple.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconChartGaugeCircleSimple = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 1C3.91015 1 1 3.91015 1 7.5C1 11.0899 3.91015 14 7.5 14C11.0899 14 14 11.0899 14 7.5C14 3.91015 11.0899 1 7.5 1ZM0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5Z"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/chart_gauge_semi_circle_simple.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconChartGaugeSemiCircleSimple = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.01894 11H2.5C2.77614 11 3 11.2239 3 11.5C3 11.7761 2.77614 12 2.5 12H0.5C0.223858 12 0 11.7761 0 11.5C0 7.35786 3.35786 4 7.5 4C11.6421 4 15 7.35786 15 11.5C15 11.7761 14.7761 12 14.5 12H12.5C12.2239 12 12 11.7761 12 11.5C12 11.2239 12.2239 11 12.5 11H13.9811C13.7257 7.64378 10.9216 5 7.5 5C4.07839 5 1.27426 7.64378 1.01894 11Z"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/chart_horizontal_bullet_simple.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconChartHorizontalBulletSimple = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 7.5C0 7.22386 0.223858 7 0.5 7H15.5C15.7761 7 16 7.22386 16 7.5V9.5C16 9.77614 15.7761 10 15.5 10C15.2239 10 15 9.77614 15 9.5V8H1V9.5C1 9.77614 0.776142 10 0.5 10C0.223858 10 0 9.77614 0 9.5V7.5Z"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/chart_vertical_bullet_simple.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconChartVerticalBulletSimple = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 7.5C0 7.22386 0.223858 7 0.5 7H15.5C15.7761 7 16 7.22386 16 7.5V9.5C16 9.77614 15.7761 10 15.5 10C15.2239 10 15 9.77614 15 9.5V8H1V9.5C1 9.77614 0.776142 10 0.5 10C0.223858 10 0 9.77614 0 9.5V7.5Z"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/donut_hole_large.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconDonutHoleLarge = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 3C5.01472 3 3 5.01472 3 7.5C3 9.98528 5.01472 12 7.5 12C9.98528 12 12 9.98528 12 7.5C12 5.01472 9.98528 3 7.5 3ZM4 7.5C4 5.567 5.567 4 7.5 4C9.433 4 11 5.567 11 7.5C11 9.433 9.433 11 7.5 11C5.567 11 4 9.433 4 7.5Z"
+        fill="#343741"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0ZM1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5Z"
+        fill="#343741"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/donut_hole_medium.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconDonutHoleMedium = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4ZM5 7.5C5 6.11929 6.11929 5 7.5 5C8.88071 5 10 6.11929 10 7.5C10 8.88071 8.88071 10 7.5 10C6.11929 10 5 8.88071 5 7.5Z"
+        fill="#343741"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0ZM1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5Z"
+        fill="#343741"
+      />
+    </svg>
+  );
+};

packages/kbn-chart-icons/src/assets/donut_hole_small.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const IconDonutHoleSmall = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
+  return (
+    <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}
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 5C6.11929 5 5 6.11929 5 7.5C5 8.88071 6.11929 10 7.5 10C8.88071 10 10 8.88071 10 7.5C10 6.11929 8.88071 5 7.5 5ZM6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5C9 8.32843 8.32843 9 7.5 9C6.67157 9 6 8.32843 6 7.5Z"
+        fill="#343741"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0ZM1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5Z"
+        fill="#343741"
+      />
+    </svg>
+  );
+};