add trendline support to the metric vis

x-pack/plugins/lens/common/constants.ts

@@ -46,6 +46,7 @@ export const layerTypes = {
   DATA: 'data',
   REFERENCELINE: 'referenceLine',
   ANNOTATIONS: 'annotations',
+  METRIC_TRENDLINE: 'metricTrendline',
 } as const;
 
 // might collide with user-supplied field names, try to make as unique as possible

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

@@ -44,10 +44,12 @@ export function AddLayerButton({
     if (!visualization.appendLayer || !visualizationState) {
       return null;
     }
-    return visualization.getSupportedLayers?.(visualizationState, layersMeta);
+    return visualization
+      .getSupportedLayers?.(visualizationState, layersMeta)
+      ?.filter(({ hideFromMenu }) => !hideFromMenu);
   }, [visualization, visualizationState, layersMeta]);
 
-  if (supportedLayers == null) {
+  if (supportedLayers == null || !supportedLayers.length) {
     return null;
   }
   if (supportedLayers.length === 1) {

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

@@ -12,6 +12,7 @@ import {
   UPDATE_FILTER_REFERENCES_ACTION,
   UPDATE_FILTER_REFERENCES_TRIGGER,
 } from '@kbn/unified-search-plugin/public';
+import { LayerType } from '../../../../common';
 import { changeIndexPattern } from '../../../state_management/lens_slice';
 import { Visualization } from '../../../types';
 import { LayerPanel } from './layer_panel';
@@ -23,7 +24,7 @@ import {
   useLensDispatch,
   removeOrClearLayer,
   cloneLayer,
-  addLayer,
+  addLayer as addLayerAction,
   updateState,
   updateDatasourceState,
   updateVisualizationState,
@@ -185,6 +186,12 @@ export function LayerPanels(
     [dispatchLens, props.framePublicAPI.dataViews, props.indexPatternService]
   );
 
+  const addLayer = (layerType: LayerType) => {
+    const layerId = generateId();
+    dispatchLens(addLayerAction({ layerId, layerType }));
+    setNextFocusedLayerId(layerId);
+  };
+
   return (
     <EuiForm className="lnsConfigPanel">
       {layerIds.map((layerId, layerIndex) => (
@@ -201,6 +208,7 @@ export function LayerPanels(
           updateDatasourceAsync={updateDatasourceAsync}
           onChangeIndexPattern={onChangeIndexPattern}
           updateAll={updateAll}
+          addLayer={addLayer}
           isOnlyLayer={
             getRemoveOperation(
               activeVisualization,
@@ -268,11 +276,7 @@ export function LayerPanels(
         visualization={activeVisualization}
         visualizationState={visualization.state}
         layersMeta={props.framePublicAPI}
-        onAddLayerClick={(layerType) => {
-          const layerId = generateId();
-          dispatchLens(addLayer({ layerId, layerType }));
-          setNextFocusedLayerId(layerId);
-        }}
+        onAddLayerClick={(layerType) => addLayer(layerType)}
       />
     </EuiForm>
   );

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

@@ -99,6 +99,7 @@ describe('LayerPanel', () => {
       updateAll: jest.fn(),
       framePublicAPI: frame,
       isOnlyLayer: true,
+      addLayer: jest.fn(),
       onRemoveLayer: jest.fn(),
       onCloneLayer: jest.fn(),
       dispatch: jest.fn(),

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

@@ -18,6 +18,7 @@ import {
   EuiIconTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { LayerType } from '../../../../common';
 import { LayerActions } from './layer_actions';
 import { IndexPatternServiceAPI } from '../../../data_views_service/service';
 import { NativeRenderer } from '../../../native_renderer';
@@ -54,6 +55,7 @@ export function LayerPanel(
     layerId: string;
     layerIndex: number;
     isOnlyLayer: boolean;
+    addLayer: (layerType: LayerType) => void;
     updateVisualization: StateSetter<unknown>;
     updateDatasource: (datasourceId: string | undefined, newState: unknown) => void;
     updateDatasourceAsync: (datasourceId: string | undefined, newState: unknown) => void;
@@ -334,6 +336,7 @@ export function LayerPanel(
                   layerIndex={layerIndex}
                   isOnlyLayer={isOnlyLayer}
                   activeVisualization={activeVisualization}
+                  // TODO - figure out the layerType types
                   layerType={activeVisualization.getLayerType(layerId, visualizationState)}
                   onRemoveLayer={onRemoveLayer}
                   onCloneLayer={onCloneLayer}
@@ -658,6 +661,8 @@ export function LayerPanel(
                         groupId: activeGroup.groupId,
                         accessor: activeId,
                         setState: props.updateVisualization,
+                        addLayer: props.addLayer,
+                        removeLayer: props.onRemoveLayer,
                         panelRef,
                       }}
                     />
@@ -670,6 +675,8 @@ export function LayerPanel(
                         groupId: activeGroup.groupId,
                         accessor: activeId,
                         setState: props.updateVisualization,
+                        addLayer: props.addLayer,
+                        removeLayer: props.onRemoveLayer,
                         panelRef,
                       }}
                     />

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

@@ -677,6 +677,8 @@ export type VisualizationDimensionEditorProps<T = unknown> = VisualizationConfig
   groupId: string;
   accessor: string;
   setState(newState: T | ((currState: T) => T)): void;
+  addLayer: (layerType: LayerType) => void;
+  removeLayer: (layerId: string) => void;
   panelRef: MutableRefObject<HTMLDivElement | null>;
 };
 
@@ -955,6 +957,7 @@ export interface Visualization<T = unknown, P = unknown> {
       groupId: string;
       staticValue?: unknown;
     }>;
+    hideFromMenu?: boolean;
   }>;
   getLayerType: (layerId: string, state?: T) => LayerType | undefined;
   /* returns the type of removal operation to perform for the specific layer in the current state */

x-pack/plugins/lens/public/visualizations/metric/constants.ts

@@ -12,4 +12,7 @@ export const GROUP_ID = {
   SECONDARY_METRIC: 'secondaryMetric',
   MAX: 'max',
   BREAKDOWN_BY: 'breakdownBy',
+  TREND_METRIC: 'trendMetric',
+  TREND_TIME: 'trendTime',
+  TREND_BREAKDOWN_BY: 'trendBreakdownBy',
 } as const;

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

@@ -17,6 +17,7 @@ import {
   EuiColorPicker,
   euiPaletteColorBlind,
   EuiSpacer,
+  EuiSwitch,
 } from '@elastic/eui';
 import { LayoutDirection } from '@elastic/charts';
 import React, { useCallback, useState } from 'react';
@@ -301,6 +302,33 @@ function PrimaryMetricEditor(props: SubProps) {
 
   return (
     <>
+      <EuiFormRow
+        display="columnCompressed"
+        fullWidth
+        label={i18n.translate('xpack.lens.metric.enableTrendline.label', {
+          defaultMessage: 'Enable trendline',
+        })}
+        css={css`
+          align-items: center;
+        `}
+      >
+        {/* // TODO - find a way to disable this if the dataview doesn't have a time field! */}
+        <EuiSwitch
+          label={i18n.translate('xpack.lens.metric.enableTrendline.label', {
+            defaultMessage: 'Enable trendline',
+          })}
+          showLabel={false}
+          compressed
+          checked={Boolean(state.trendlineLayerId)}
+          onChange={() => {
+            if (!state.trendlineLayerId) {
+              props.addLayer('metricTrendline');
+            } else {
+              props.removeLayer(state.trendlineLayerId);
+            }
+          }}
+        />
+      </EuiFormRow>
       <EuiFormRow
         display="columnCompressed"
         fullWidth