[Lens] Dynamic threshold lines2

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx

@@ -7,8 +7,16 @@
 
 import './config_panel.scss';
 
-import React, { useMemo, memo } from 'react';
-import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui';
+import React, { useMemo, memo, useState } from 'react';
+import {
+  EuiFlexItem,
+  EuiToolTip,
+  EuiButton,
+  EuiForm,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiPopover,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Visualization } from '../../../types';
 import { LayerPanel } from './layer_panel';
@@ -99,6 +107,16 @@ export function LayerPanels(
 
   const datasourcePublicAPIs = props.framePublicAPI.datasourceLayers;
 
+  const appendableLayers =
+    activeVisualization.appendLayer && visualizationState
+      ? (activeVisualization.getLayerTypes &&
+          activeVisualization?.getLayerTypes(visualizationState)) || [
+          { name: 'default', label: '' },
+        ]
+      : [];
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
   return (
     <EuiForm className="lnsConfigPanel">
       {layerIds.map((layerId, layerIndex) =>
@@ -133,7 +151,7 @@ export function LayerPanels(
           />
         ) : null
       )}
-      {activeVisualization.appendLayer && visualizationState && (
+      {appendableLayers.length === 1 && (
         <EuiFlexItem grow={true}>
           <EuiToolTip
             className="eui-fullWidth"
@@ -166,15 +184,93 @@ export function LayerPanels(
                       trackUiEvent,
                       activeDatasource: datasourceMap[activeDatasourceId],
                       state,
+                      layerType: appendableLayers[0].name,
                     }),
                 });
                 setNextFocusedLayerId(id);
               }}
               iconType="plusInCircleFilled"
-            />
+            >
+              {i18n.translate('xpack.lens.xyChart.addLayerButton', {
+                defaultMessage: 'Add layer',
+              })}
+            </EuiButton>
           </EuiToolTip>
         </EuiFlexItem>
       )}
+      {appendableLayers.length > 1 && (
+        <EuiFlexItem grow={true}>
+          <EuiPopover
+            isOpen={popoverOpen}
+            panelPaddingSize="s"
+            closePopover={() => {
+              setPopoverOpen(false);
+            }}
+            button={
+              <EuiToolTip
+                className="eui-fullWidth"
+                title={i18n.translate('xpack.lens.xyChart.addLayer', {
+                  defaultMessage: 'Add a layer',
+                })}
+                content={i18n.translate('xpack.lens.xyChart.addLayerTooltip', {
+                  defaultMessage:
+                    'Use multiple layers to combine chart types or visualize different index patterns.',
+                })}
+                position="bottom"
+              >
+                <EuiButton
+                  className="lnsConfigPanel__addLayerBtn"
+                  fullWidth
+                  size="s"
+                  data-test-subj="lnsLayerAddButton"
+                  aria-label={i18n.translate('xpack.lens.xyChart.addLayerButton', {
+                    defaultMessage: 'Add layer',
+                  })}
+                  onClick={() => {
+                    setPopoverOpen(!popoverOpen);
+                  }}
+                  iconType="plusInCircleFilled"
+                >
+                  {i18n.translate('xpack.lens.xyChart.addLayerButton', {
+                    defaultMessage: 'Add layer',
+                  })}
+                </EuiButton>
+              </EuiToolTip>
+            }
+          >
+            <EuiContextMenuPanel
+              size="s"
+              items={appendableLayers.map((layerType) => {
+                return (
+                  <EuiContextMenuItem
+                    key={layerType.name}
+                    onClick={() => {
+                      setPopoverOpen(false);
+                      const id = generateId();
+                      dispatch({
+                        type: 'UPDATE_STATE',
+                        subType: 'ADD_LAYER',
+                        updater: (state) =>
+                          appendLayer({
+                            activeVisualization,
+                            generateId: () => id,
+                            trackUiEvent,
+                            activeDatasource: datasourceMap[activeDatasourceId],
+                            state,
+                            layerType: layerType.name,
+                          }),
+                      });
+                      setNextFocusedLayerId(id);
+                    }}
+                  >
+                    {layerType.label}
+                  </EuiContextMenuItem>
+                );
+              })}
+            />
+          </EuiPopover>
+        </EuiFlexItem>
+      )}
     </EuiForm>
   );
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts

@@ -23,6 +23,7 @@ interface AppendLayerOptions {
   generateId: () => string;
   activeDatasource: Pick<Datasource, 'insertLayer' | 'id'>;
   activeVisualization: Pick<Visualization, 'appendLayer'>;
+  layerType?: string;
 }
 
 export function removeLayer(opts: RemoveLayerOptions): EditorFrameState {
@@ -61,6 +62,7 @@ export function appendLayer({
   state,
   generateId,
   activeDatasource,
+  layerType,
 }: AppendLayerOptions): EditorFrameState {
   trackUiEvent('layer_added');
 
@@ -84,7 +86,7 @@ export function appendLayer({
     },
     visualization: {
       ...state.visualization,
-      state: activeVisualization.appendLayer(state.visualization.state, layerId),
+      state: activeVisualization.appendLayer(state.visualization.state, layerId, layerType),
     },
     stagedPreview: undefined,
   };

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -108,7 +108,9 @@ export function LayerPanel(
     activeData: props.framePublicAPI.activeData,
   };
 
-  const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps);
+  const { groups, isConstant } = activeVisualization.getConfiguration(
+    layerVisualizationConfigProps
+  );
   const isEmptyLayer = !groups.some((d) => d.accessors.length > 0);
   const { activeId, activeGroup } = activeDimension;
 

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

@@ -590,14 +590,16 @@ export interface Visualization<T = unknown> {
   /** Optional, if the visualization supports multiple layers */
   removeLayer?: (state: T, layerId: string) => T;
   /** Track added layers in internal state */
-  appendLayer?: (state: T, layerId: string) => T;
+  appendLayer?: (state: T, layerId: string, layerType?: string) => T;
+  /* if set, allows adding of multiple types of layers */
+  getLayerTypes?: (state: T) => Array<{ name: string; label: string }>;
 
   /**
    * For consistency across different visualizations, the dimension configuration UI is standardized
    */
   getConfiguration: (
     props: VisualizationConfigProps<T>
-  ) => { groups: VisualizationDimensionGroupConfig[] };
+  ) => { groups: VisualizationDimensionGroupConfig[]; isConstant?: boolean };
 
   /**
    * Popover contents that open when the user clicks the contextMenuIcon. This can be used

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -24,6 +24,8 @@ import {
   HorizontalAlignment,
   ElementClickListener,
   BrushEndListener,
+  LineAnnotation,
+  AnnotationDomainTypes,
   CurveType,
 } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
@@ -33,7 +35,7 @@ import {
   Datatable,
   DatatableRow,
 } from 'src/plugins/expressions/public';
-import { IconType } from '@elastic/eui';
+import { EuiIcon, IconType } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { RenderMode } from 'src/plugins/expressions';
 import {
@@ -334,6 +336,7 @@ export function XYChart({
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
   const filteredLayers = getFilteredLayers(layers, data);
+  const thresholdLayers = layers.filter((layer) => layer.layerType === 'threshold');
 
   if (filteredLayers.length === 0) {
     const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar';
@@ -828,13 +831,69 @@ export function XYChart({
           }
         })
       )}
+
+      {thresholdLayers.flatMap((thresholdLayer) => {
+        if (!thresholdLayer.yConfig) {
+          return [];
+        }
+        const columnToLabelMap: Record<string, string> = thresholdLayer.columnToLabel
+          ? JSON.parse(thresholdLayer.columnToLabel)
+          : {};
+        return thresholdLayer.yConfig.map((yConfig) => {
+          const table = data.tables[thresholdLayer.layerId];
+          const formatter = formatFactory(
+            table?.columns.find((column) => column.id === yConfig.forAccessor)?.meta?.params || {
+              id: 'number',
+            }
+          );
+          return (
+            <LineAnnotation
+              id={`${thresholdLayer.layerId}-${yConfig.forAccessor}`}
+              key={`${thresholdLayer.layerId}-${yConfig.forAccessor}`}
+              domainType={
+                yConfig.axisMode === 'bottom'
+                  ? AnnotationDomainTypes.XDomain
+                  : AnnotationDomainTypes.YDomain
+              }
+              dataValues={data.tables[thresholdLayer.layerId].rows.map((row) => ({
+                dataValue: row[yConfig.forAccessor],
+                header: columnToLabelMap[yConfig.forAccessor],
+                details: formatter.convert(row[yConfig.forAccessor]),
+              }))}
+              groupId={
+                yConfig.axisMode === 'bottom'
+                  ? undefined
+                  : yConfig.axisMode === 'right'
+                  ? 'right'
+                  : 'left'
+              }
+              style={{
+                line: {
+                  // TODO add line mode here
+                  strokeWidth: yConfig.lineWidth || 1,
+                  stroke: yConfig.color || '#f00',
+                  dash:
+                    yConfig.lineStyle === 'dashed'
+                      ? [(yConfig.lineWidth || 1) * 3, yConfig.lineWidth || 1]
+                      : yConfig.lineStyle === 'dotted'
+                      ? [yConfig.lineWidth || 1, yConfig.lineWidth || 1]
+                      : undefined,
+                  opacity: 1,
+                },
+              }}
+              marker={yConfig.icon ? <EuiIcon type={yConfig.icon} /> : undefined}
+            />
+          );
+        });
+      })}
     </Chart>
   );
 }
 
 function getFilteredLayers(layers: LayerArgs[], data: LensMultiTable) {
-  return layers.filter(({ layerId, xAccessor, accessors, splitAccessor }) => {
+  return layers.filter(({ layerId, layerType, xAccessor, accessors, splitAccessor }) => {
     return !(
+      layerType === 'threshold' ||
       !accessors.length ||
       !data.tables[layerId] ||
       data.tables[layerId].rows.length === 0 ||

x-pack/plugins/lens/public/xy_visualization/to_expression.ts

@@ -243,12 +243,16 @@ export const buildExpression = (
                                 forAccessor: [yConfig.forAccessor],
                                 axisMode: yConfig.axisMode ? [yConfig.axisMode] : [],
                                 color: yConfig.color ? [yConfig.color] : [],
+                                lineStyle: yConfig.lineStyle ? [yConfig.lineStyle] : [],
+                                lineWidth: yConfig.lineWidth ? [yConfig.lineWidth] : [],
+                                icon: yConfig.icon ? [yConfig.icon] : [],
                               },
                             },
                           ],
                         }))
                       : [],
                     seriesType: [layer.seriesType],
+                    layerType: [layer.layerType || 'data'],
                     accessors: layer.accessors,
                     columnToLabel: [JSON.stringify(columnToLabel)],
                     ...(layer.palette

x-pack/plugins/lens/public/xy_visualization/types.ts

@@ -257,6 +257,19 @@ export const yAxisConfig: ExpressionFunctionDefinition<
       types: ['string'],
       help: 'The color of the series',
     },
+    lineStyle: {
+      types: ['string'],
+      options: ['dashed', 'dotted', 'solid'],
+      help: '',
+    },
+    lineWidth: {
+      types: ['number'],
+      help: '',
+    },
+    icon: {
+      types: ['string'],
+      help: '',
+    },
   },
   fn: function fn(input: unknown, args: YConfig) {
     return {
@@ -302,6 +315,11 @@ export const layerConfig: ExpressionFunctionDefinition<
       ],
       help: 'The type of chart to display.',
     },
+    layerType: {
+      types: ['string'],
+      options: ['data', 'threshold'],
+      help: '',
+    },
     xScaleType: {
       options: ['ordinal', 'linear', 'time'],
       help: 'The scale type of the x axis',
@@ -363,14 +381,17 @@ export type SeriesType =
   | 'area_stacked'
   | 'area_percentage_stacked';
 
-export type YAxisMode = 'auto' | 'left' | 'right';
+export type YAxisMode = 'auto' | 'left' | 'right' | 'bottom';
 
 export type ValueLabelConfig = 'hide' | 'inside' | 'outside';
 
 export interface YConfig {
   forAccessor: string;
   axisMode?: YAxisMode;
   color?: string;
+  lineStyle?: 'solid' | 'dashed' | 'dotted';
+  lineWidth?: number;
+  icon?: string;
 }
 
 export interface XYLayerConfig {
@@ -382,6 +403,7 @@ export interface XYLayerConfig {
   seriesType: SeriesType;
   splitAccessor?: string;
   palette?: PaletteOutput;
+  layerType?: 'data' | 'threshold';
 }
 
 export interface ValidLayer extends XYLayerConfig {