[Lens] Heatmap / Swim lane integration

x-pack/plugins/lens/public/assets/chart_heatmap.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiIconProps } from '@elastic/eui';
+import React from 'react';
+
+export const LensIconChartHeatmap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+  <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="lensChartIcon__accent"
+      d="M16 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V1zM0 17a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4zm17-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V9a1 1 0 00-1-1h-4zm-1 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4zm9-17a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1h-4z"
+    />
+    <path
+      className="lensChartIcon__subdued"
+      d="M0 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1zm0 8a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9zm9-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1H9zM8 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zm15-7a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"
+    />
+  </svg>
+);

x-pack/plugins/lens/public/async_services.ts

@@ -18,6 +18,7 @@ export * from './datatable_visualization/datatable_visualization';
 export * from './metric_visualization/metric_visualization';
 export * from './pie_visualization/pie_visualization';
 export * from './xy_visualization/xy_visualization';
+export * from './heatmap_visualization/heatmap_visualization';
 
 export * from './indexpattern_datasource/indexpattern';
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss

@@ -5,6 +5,14 @@
   }
 }
 
+.lnsChartSwitch__options {
+  .euiSelectableListItem__append {
+    flex-grow: 1;
+    display: flex;
+    align-items: baseline;
+  }
+}
+
 .lnsChartSwitch__summaryIcon {
   margin-right: $euiSizeS;
   transform: translateY(-1px);
@@ -19,4 +27,4 @@ img.lnsChartSwitch__chartIcon { // stylelint-disable-line selector-no-qualifying
 
 .lnsChartSwitch__search {
   width: 7 * $euiSizeXXL;
-}
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx

@@ -16,6 +16,7 @@ import {
   EuiSelectable,
   EuiIconTip,
   EuiSelectableOption,
+  EuiBetaBadge,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -294,24 +295,53 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
                     prepend: (
                       <EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} />
                     ),
-                    append:
-                      v.selection.dataLoss !== 'nothing' ? (
-                        <EuiIconTip
-                          aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
-                            defaultMessage: 'Warning',
-                          })}
-                          type="alert"
-                          color="warning"
-                          content={i18n.translate('xpack.lens.chartSwitch.dataLossDescription', {
-                            defaultMessage:
-                              'Selecting this chart type will result in a partial loss of currently applied configuration selections.',
-                          })}
-                          iconProps={{
-                            className: 'lnsChartSwitch__chartIcon',
-                            'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
-                          }}
-                        />
-                      ) : null,
+                    append: (
+                      <EuiFlexGroup gutterSize="xs">
+                        {v.showBetaBadge ? (
+                          <EuiFlexItem grow={false}>
+                            <EuiBetaBadge
+                              label={
+                                <FormattedMessage
+                                  id="xpack.lens.chartSwitch.betaLabel"
+                                  defaultMessage="Beta"
+                                />
+                              }
+                              title={i18n.translate('xpack.lens.chartSwitch.betaLabel', {
+                                defaultMessage: 'Beta',
+                              })}
+                              tooltipContent={
+                                <FormattedMessage
+                                  id="xpack.lens.chartSwitch.betaTooltipContent"
+                                  defaultMessage="This chart type is not GA."
+                                />
+                              }
+                            />
+                          </EuiFlexItem>
+                        ) : null}
+                        {v.selection.dataLoss !== 'nothing' ? (
+                          <EuiFlexItem grow={false}>
+                            <EuiIconTip
+                              aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
+                                defaultMessage: 'Warning',
+                              })}
+                              type="alert"
+                              color="warning"
+                              content={i18n.translate(
+                                'xpack.lens.chartSwitch.dataLossDescription',
+                                {
+                                  defaultMessage:
+                                    'Selecting this chart type will result in a partial loss of currently applied configuration selections.',
+                                }
+                              )}
+                              iconProps={{
+                                className: 'lnsChartSwitch__chartIcon',
+                                'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
+                              }}
+                            />
+                          </EuiFlexItem>
+                        ) : null}
+                      </EuiFlexGroup>
+                    ),
                     // Apparently checked: null is not valid for TS
                     ...(subVisualizationId === v.id && { checked: 'on' }),
                   })
@@ -363,6 +393,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
           </EuiFlexGroup>
         </EuiPopoverTitle>
         <EuiSelectable
+          className="lnsChartSwitch__options"
           height={computeListHeight(visualizationTypes, MAX_LIST_HEIGHT)}
           searchable
           singleSelection