[Lens] Formula time shift

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -400,6 +400,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
                 <ReferenceEditor
                   key={index}
                   layer={state.layers[layerId]}
+                  layerId={layerId}
+                  activeData={props.activeData}
                   columnId={referenceId}
                   updateLayer={(
                     setter:
@@ -494,6 +496,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
         {shouldDisplayExtraOptions && ParamEditor && (
           <ParamEditor
             layer={state.layers[layerId]}
+            layerId={layerId}
+            activeData={props.activeData}
             updateLayer={setStateWrapper}
             columnId={columnId}
             currentColumn={state.layers[layerId].columns[columnId]}
@@ -608,6 +612,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
   const formulaTab = ParamEditor ? (
     <ParamEditor
       layer={state.layers[layerId]}
+      layerId={layerId}
+      activeData={props.activeData}
       updateLayer={setStateWrapper}
       columnId={columnId}
       currentColumn={state.layers[layerId].columns[columnId]}

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/reference_editor.test.tsx

@@ -54,6 +54,7 @@ describe('reference editor', () => {
       isFullscreen: false,
       toggleFullscreen: jest.fn(),
       setIsCloseable: jest.fn(),
+      layerId: '1',
     };
   }
 

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/reference_editor.tsx

@@ -35,11 +35,14 @@ import { hasField } from '../utils';
 import type { IndexPattern, IndexPatternLayer, IndexPatternPrivateState } from '../types';
 import { trackUiEvent } from '../../lens_ui_telemetry';
 import { VisualizationDimensionGroupConfig } from '../../types';
+import { IndexPatternDimensionEditorProps } from './dimension_panel';
 
 const operationPanels = getOperationDisplay();
 
 export interface ReferenceEditorProps {
   layer: IndexPatternLayer;
+  layerId: string;
+  activeData?: IndexPatternDimensionEditorProps['activeData'];
   selectionStyle: 'full' | 'field' | 'hidden';
   validation: RequiredReference;
   columnId: string;
@@ -67,6 +70,8 @@ export interface ReferenceEditorProps {
 export function ReferenceEditor(props: ReferenceEditorProps) {
   const {
     layer,
+    layerId,
+    activeData,
     columnId,
     updateLayer,
     currentIndexPattern,
@@ -350,6 +355,8 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
               updateLayer={updateLayer}
               currentColumn={column}
               layer={layer}
+              layerId={layerId}
+              activeData={activeData}
               columnId={columnId}
               indexPattern={currentIndexPattern}
               dateRange={dateRange}

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/time_shift.tsx

@@ -8,21 +8,22 @@
 import { EuiButtonIcon } from '@elastic/eui';
 import { EuiFormRow, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { EuiComboBox } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { uniq } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useRef, useState } from 'react';
 import { Query } from 'src/plugins/data/public';
-import { search } from '../../../../../../src/plugins/data/public';
 import { parseTimeShift } from '../../../../../../src/plugins/data/common';
 import {
   adjustTimeScaleLabelSuffix,
   IndexPatternColumn,
   operationDefinitionMap,
 } from '../operations';
-import { IndexPattern, IndexPatternLayer, IndexPatternPrivateState } from '../types';
+import { IndexPattern, IndexPatternLayer } from '../types';
 import { IndexPatternDimensionEditorProps } from './dimension_panel';
-import { FramePublicAPI } from '../../types';
+import {
+  getDateHistogramInterval,
+  getLayerTimeShiftChecks,
+  timeShiftOptions,
+} from '../time_shift_utils';
 
 // to do: get the language from uiSettings
 export const defaultFilter: Query = {
@@ -59,75 +60,6 @@ export function setTimeShift(
   };
 }
 
-const timeShiftOptions = [
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.hour', {
-      defaultMessage: '1 hour (1h)',
-    }),
-    value: '1h',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.3hours', {
-      defaultMessage: '3 hours (3h)',
-    }),
-    value: '3h',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.6hours', {
-      defaultMessage: '6 hours (6h)',
-    }),
-    value: '6h',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.12hours', {
-      defaultMessage: '12 hours (12h)',
-    }),
-    value: '12h',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.day', {
-      defaultMessage: '1 day (1d)',
-    }),
-    value: '1d',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.week', {
-      defaultMessage: '1 week (1w)',
-    }),
-    value: '1w',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.month', {
-      defaultMessage: '1 month (1M)',
-    }),
-    value: '1M',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.3months', {
-      defaultMessage: '3 months (3M)',
-    }),
-    value: '3M',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.6months', {
-      defaultMessage: '6 months (6M)',
-    }),
-    value: '6M',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.year', {
-      defaultMessage: '1 year (1y)',
-    }),
-    value: '1y',
-  },
-  {
-    label: i18n.translate('xpack.lens.indexPattern.timeShift.previous', {
-      defaultMessage: 'Previous',
-    }),
-    value: 'previous',
-  },
-];
-
 export function TimeShift({
   selectedColumn,
   columnId,
@@ -157,38 +89,12 @@ export function TimeShift({
     return null;
   }
 
-  let dateHistogramInterval: null | moment.Duration = null;
-  const dateHistogramColumn = layer.columnOrder.find(
-    (colId) => layer.columns[colId].operationType === 'date_histogram'
+  const { isValueTooSmall, isValueNotMultiple, canShift } = getLayerTimeShiftChecks(
+    getDateHistogramInterval(layer, indexPattern, activeData, layerId)
   );
-  if (!dateHistogramColumn && !indexPattern.timeFieldName) {
-    return null;
-  }
-  if (dateHistogramColumn && activeData && activeData[layerId] && activeData[layerId]) {
-    const column = activeData[layerId].columns.find((col) => col.id === dateHistogramColumn);
-    if (column) {
-      dateHistogramInterval = search.aggs.parseInterval(
-        search.aggs.getDateHistogramMetaDataByDatatableColumn(column)?.interval || ''
-      );
-    }
-  }
-
-  function isValueTooSmall(parsedValue: ReturnType<typeof parseTimeShift>) {
-    return (
-      dateHistogramInterval &&
-      parsedValue &&
-      typeof parsedValue === 'object' &&
-      parsedValue.asMilliseconds() < dateHistogramInterval.asMilliseconds()
-    );
-  }
 
-  function isValueNotMultiple(parsedValue: ReturnType<typeof parseTimeShift>) {
-    return (
-      dateHistogramInterval &&
-      parsedValue &&
-      typeof parsedValue === 'object' &&
-      !Number.isInteger(parsedValue.asMilliseconds() / dateHistogramInterval.asMilliseconds())
-    );
+  if (!canShift) {
+    return null;
   }
 
   const parsedLocalValue = localValue && parseTimeShift(localValue);
@@ -305,90 +211,3 @@ export function TimeShift({
     </div>
   );
 }
-
-export function getTimeShiftWarningMessages(
-  state: IndexPatternPrivateState,
-  { activeData }: FramePublicAPI
-) {
-  if (!state) return;
-  const warningMessages: React.ReactNode[] = [];
-  Object.entries(state.layers).forEach(([layerId, layer]) => {
-    let dateHistogramInterval: null | string = null;
-    const dateHistogramColumn = layer.columnOrder.find(
-      (colId) => layer.columns[colId].operationType === 'date_histogram'
-    );
-    if (!dateHistogramColumn) {
-      return;
-    }
-    if (dateHistogramColumn && activeData && activeData[layerId]) {
-      const column = activeData[layerId].columns.find((col) => col.id === dateHistogramColumn);
-      if (column) {
-        dateHistogramInterval =
-          search.aggs.getDateHistogramMetaDataByDatatableColumn(column)?.interval || null;
-      }
-    }
-    if (dateHistogramInterval === null) {
-      return;
-    }
-    const shiftInterval = search.aggs.parseInterval(dateHistogramInterval)!.asMilliseconds();
-    let timeShifts: number[] = [];
-    const timeShiftMap: Record<number, string[]> = {};
-    Object.entries(layer.columns).forEach(([columnId, column]) => {
-      if (column.isBucketed) return;
-      let duration: number = 0;
-      if (column.timeShift) {
-        const parsedTimeShift = parseTimeShift(column.timeShift);
-        if (parsedTimeShift === 'previous' || parsedTimeShift === 'invalid') {
-          return;
-        }
-        duration = parsedTimeShift.asMilliseconds();
-      }
-      timeShifts.push(duration);
-      if (!timeShiftMap[duration]) {
-        timeShiftMap[duration] = [];
-      }
-      timeShiftMap[duration].push(columnId);
-    });
-    timeShifts = uniq(timeShifts);
-
-    if (timeShifts.length < 2) {
-      return;
-    }
-
-    timeShifts.forEach((timeShift) => {
-      if (timeShift === 0) return;
-      if (timeShift < shiftInterval) {
-        timeShiftMap[timeShift].forEach((columnId) => {
-          warningMessages.push(
-            <FormattedMessage
-              key={`small-${columnId}`}
-              id="xpack.lens.indexPattern.timeShiftSmallWarning"
-              defaultMessage="{label} uses a time shift of {columnTimeShift} which is smaller than the date histogram interval of {interval}. To prevent mismatched data, use a multiple of {interval} as time shift."
-              values={{
-                label: <strong>{layer.columns[columnId].label}</strong>,
-                interval: <strong>{dateHistogramInterval}</strong>,
-                columnTimeShift: <strong>{layer.columns[columnId].timeShift}</strong>,
-              }}
-            />
-          );
-        });
-      } else if (!Number.isInteger(timeShift / shiftInterval)) {
-        timeShiftMap[timeShift].forEach((columnId) => {
-          warningMessages.push(
-            <FormattedMessage
-              key={`multiple-${columnId}`}
-              id="xpack.lens.indexPattern.timeShiftMultipleWarning"
-              defaultMessage="{label} uses a time shift of {columnTimeShift} which is not a multiple of the date histogram interval of {interval}. To prevent mismatched data, use a multiple of {interval} as time shift."
-              values={{
-                label: <strong>{layer.columns[columnId].label}</strong>,
-                interval: dateHistogramInterval,
-                columnTimeShift: layer.columns[columnId].timeShift!,
-              }}
-            />
-          );
-        });
-      }
-    });
-  });
-  return warningMessages;
-}

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx

@@ -55,7 +55,7 @@ import { deleteColumn, isReferenced } from './operations';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { GeoFieldWorkspacePanel } from '../editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel';
 import { DraggingIdentifier } from '../drag_drop';
-import { getTimeShiftWarningMessages } from './dimension_panel/time_shift';
+import { getStateTimeShiftWarningMessages } from './time_shift_utils';
 
 export { OperationType, IndexPatternColumn, deleteColumn } from './operations';
 
@@ -462,7 +462,7 @@ export function getIndexPatternDatasource({
       });
       return messages.length ? messages : undefined;
     },
-    getWarningMessages: getTimeShiftWarningMessages,
+    getWarningMessages: getStateTimeShiftWarningMessages,
     checkIntegrity: (state) => {
       const ids = Object.values(state.layers || {}).map(({ indexPatternId }) => indexPatternId);
       return ids.filter((id) => !state.indexPatterns[id]);

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/counter_rate.tsx

@@ -94,7 +94,7 @@ export const counterRateOperation: OperationDefinition<
       scale: 'ratio',
       references: referenceIds,
       timeScale,
-      timeShift: previousColumn?.timeShift,
+      timeShift: columnParams?.shift || previousColumn?.timeShift,
       filter: getFilter(previousColumn, columnParams),
       params: getFormatFromPreviousColumn(previousColumn),
     };

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/cumulative_sum.tsx

@@ -90,7 +90,7 @@ export const cumulativeSumOperation: OperationDefinition<
       operationType: 'cumulative_sum',
       isBucketed: false,
       scale: 'ratio',
-      timeShift: previousColumn?.timeShift,
+      timeShift: columnParams?.shift || previousColumn?.timeShift,
       filter: getFilter(previousColumn, columnParams),
       references: referenceIds,
       params: getFormatFromPreviousColumn(previousColumn),

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/differences.tsx

@@ -82,7 +82,7 @@ export const derivativeOperation: OperationDefinition<
       references: referenceIds,
       timeScale: previousColumn?.timeScale,
       filter: getFilter(previousColumn, columnParams),
-      timeShift: previousColumn?.timeShift,
+      timeShift: columnParams?.shift || previousColumn?.timeShift,
       params: getFormatFromPreviousColumn(previousColumn),
     };
   },

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx

@@ -98,9 +98,9 @@ export const movingAverageOperation: OperationDefinition<
       isBucketed: false,
       scale: 'ratio',
       references: referenceIds,
-      timeScale: previousColumn?.timeScale,
+      timeShift: columnParams?.shift || previousColumn?.timeShift,
       filter: getFilter(previousColumn, columnParams),
-      timeShift: previousColumn?.timeShift,
+      timeScale: previousColumn?.timeScale,
       params: {
         window,
         ...getFormatFromPreviousColumn(previousColumn),

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx

@@ -95,7 +95,7 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
       sourceField: field.name,
       isBucketed: IS_BUCKETED,
       filter: getFilter(previousColumn, columnParams),
-      timeShift: previousColumn?.timeShift,
+      timeShift: columnParams?.shift || previousColumn?.timeShift,
       params: getFormatFromPreviousColumn(previousColumn),
     };
   },

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx

@@ -81,7 +81,7 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn, 'field
       sourceField: field.name,
       timeScale: previousColumn?.timeScale,
       filter: getFilter(previousColumn, columnParams),
-      timeShift: previousColumn?.timeShift,
+      timeShift: columnParams?.shift || previousColumn?.timeShift,
       params:
         previousColumn?.dataType === 'number' &&
         previousColumn.params &&
@@ -118,7 +118,7 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn, 'field
       defaultMessage: `
 Calculates the number of documents.
 
-Example: Calculate the number of documents: 
+Example: Calculate the number of documents:
 \`count()\`
 
 Example: Calculate the number of documents matching a certain filter:

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx

@@ -87,6 +87,7 @@ const indexPattern2: IndexPattern = {
 const uiSettingsMock = {} as IUiSettingsClient;
 
 const defaultOptions = {
+  layerId: '1',
   storage: {} as IStorageWrapper,
   uiSettings: uiSettingsMock,
   savedObjectsClient: {} as SavedObjectsClientContract,