[Lens] Heatmap / Swim lane integration (elastic#97978)

* heatmap wip * format values on X axis * format values for cells * show labels * support legend configuration * render preview * add icon * [ML] update visualization * [ML] init suggestions * [ML] fix preview * [ML] fix groupPosition for the legend control * [ML] add formatter for Y-axis * [ML] filterOperations for cell value * [ML] fill all available height * [ML] delete unused file * [ML] fix suggestion state * [ML] update suggestion, add hiding logic * [ML] suggestions unit tests * [ML] rename legend interface * [ML] unit tests for visualization, add error messages * [ML] fix typos in xy visualization tests * [ML] support click event * [ML] add xDomain for time series data * [ML] support empty Y axis * [ML] change legend default position * [ML] getTimeZone util * [ML] hide suggestions for reorder * [ML] support brush event * [ML] update unit tests * [ML] render grid lines in preview * [ML] don't display errors on init * [ML] utilize chartsThemeService * [ML] support histogram for the vertical axis * [ML] fix clearLayer * [ML] show empty placeholder on no data * [ML] fix X domain min * [ML] reject suggestions for 3 or more buckets * [ML] suggestions for histograms and histogram for Y-axis * [ML] fix unit tests * [ML] update suggestions for active heatmap * [ML] chart data test for heatmap * [ML] test for transitioning from heatmap to barchart * [ML] disable xDomain * [ML] support intervals in axes configurations * [ML] hide label on the vertical axis when there is only a horizontal dimension * [ML] set min cell height for better suggestions preview rendering * [ML] fix tooltip for empty vertical axis config * [ML] fix click and brushing for empty Y axis * [ML] update functional test * [ML] show beta label * [ML] fix legend control * [ML] dataIndex sort by default for the X axis * [ML] use euiPaletteForTemperature with quantize color scale * [ML] hide all suggestions * [ML] fix chart data extension issue * [ML] fix the caret symbol positioning * [ML] update unit tests for the heatmap suggestions * [ML] replace EuiBetaBadge with EuiBadge * [ML] update functional test * [ML] fix chart switch styles * [ML] fix functional test * [ML] return null instead of expression with a missing value accessor * [ML] use table id as a chart id * [ML] fix scale type for a single row of data * [ML] filter out undefined values * [ML] fix isXAxisLabelVisible * [ML] update chart_switch styles * show warning message for the array values * remove unused code * replace ts-ignore with manual type casting * add unit tests for error and warning messages * add css class for append, conditional flex group
kibanamachine · Jun 4, 2021 · 57f23ea · 57f23ea
1 parent 8cc984d
commit 57f23ea
Show file tree

Hide file tree

Showing 25 changed files with 2,355 additions and 35 deletions.
diff --git a/x-pack/plugins/lens/public/assets/chart_heatmap.tsx b/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>
+);
diff --git a/x-pack/plugins/lens/public/async_services.ts b/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';
 

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
@@ -11,6 +11,10 @@
   color: $euiTextSubduedColor;
 }
 
+.lnsChartSwitch__append {
+  display: inline-flex;
+}
+
 // Targeting img as this won't target normal EuiIcon's only the custom svgs's
 img.lnsChartSwitch__chartIcon { // stylelint-disable-line selector-no-qualifying-type
   // The large icons aren't square so max out the width to fill the height
@@ -19,4 +23,4 @@ img.lnsChartSwitch__chartIcon { // stylelint-disable-line selector-no-qualifying
 
 .lnsChartSwitch__search {
   width: 7 * $euiSizeXXL;
-}
+}
diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -16,6 +16,7 @@ import {
   EuiSelectable,
   EuiIconTip,
   EuiSelectableOption,
+  EuiBadge,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -286,6 +287,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
                 .map(
                   (v): SelectableEntry => ({
                     'aria-label': v.fullLabel || v.label,
+                    className: 'lnsChartSwitch__option',
                     isGroupLabel: false,
                     key: `${v.visualizationId}:${v.id}`,
                     value: `${v.visualizationId}:${v.id}`,
@@ -295,22 +297,45 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
                       <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}`,
-                          }}
-                        />
+                      v.selection.dataLoss !== 'nothing' || v.showBetaBadge ? (
+                        <EuiFlexGroup
+                          gutterSize="xs"
+                          responsive={false}
+                          className="lnsChartSwitch__append"
+                        >
+                          {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}
+                          {v.showBetaBadge ? (
+                            <EuiFlexItem grow={false}>
+                              <EuiBadge color="hollow">
+                                <FormattedMessage
+                                  id="xpack.lens.chartSwitch.betaLabel"
+                                  defaultMessage="Beta"
+                                />
+                              </EuiBadge>
+                            </EuiFlexItem>
+                          ) : null}
+                        </EuiFlexGroup>
                       ) : null,
                     // Apparently checked: null is not valid for TS
                     ...(subVisualizationId === v.id && { checked: 'on' }),
@@ -363,6 +388,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
           </EuiFlexGroup>
         </EuiPopoverTitle>
         <EuiSelectable
+          className="lnsChartSwitch__options"
           height={computeListHeight(visualizationTypes, MAX_LIST_HEIGHT)}
           searchable
           singleSelection