From 724e7c38b98203f40f379b2c40c1f862b34e23d4 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 20 Nov 2020 15:05:23 +0100
Subject: [PATCH] add window param

---
 .../calculations/moving_average.tsx           | 65 +++++++++++++++++--
 .../definitions/calculations/utils.ts         |  4 +-
 .../operations/definitions/column_types.ts    |  2 +-
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx
index 76e0ee0e4481e..8727cdaf22d10 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx
@@ -5,10 +5,16 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { useState } from 'react';
+import React from 'react';
+import { EuiFormRow } from '@elastic/eui';
+import { EuiFieldNumber } from '@elastic/eui';
 import { FormattedIndexPatternColumn, ReferenceBasedIndexPatternColumn } from '../column_types';
 import { IndexPatternLayer } from '../../../types';
 import { checkForDateHistogram, dateBasedOperationToExpression, hasDateField } from './utils';
-import { OperationDefinition } from '..';
+import { updateColumnParam } from '../..';
+import { useDebounceWithOptions } from '../helpers';
+import { OperationDefinition, ParamEditorProps } from '..';
 
 const ofName = (name: string) => {
   return i18n.translate('xpack.lens.indexPattern.movingAverageOf', {
@@ -20,6 +26,9 @@ const ofName = (name: string) => {
 export type MovingAverageIndexPatternColumn = FormattedIndexPatternColumn &
   ReferenceBasedIndexPatternColumn & {
     operationType: 'moving_average';
+    params: {
+      window: number;
+    };
   };
 
 export const movingAverageOperation: OperationDefinition<
@@ -53,7 +62,9 @@ export const movingAverageOperation: OperationDefinition<
     });
   },
   toExpression: (layer, columnId) => {
-    return dateBasedOperationToExpression(layer, columnId, 'moving_average');
+    return dateBasedOperationToExpression(layer, columnId, 'moving_average', {
+      window: [(layer.columns[columnId] as MovingAverageIndexPatternColumn).params.window],
+    });
   },
   buildColumn: ({ referenceIds, previousColumn, layer }) => {
     const metric = layer.columns[referenceIds[0]];
@@ -69,10 +80,11 @@ export const movingAverageOperation: OperationDefinition<
         previousColumn.params &&
         'format' in previousColumn.params &&
         previousColumn.params.format
-          ? { format: previousColumn.params.format }
-          : undefined,
+          ? { format: previousColumn.params.format, window: 5 }
+          : { window: 5 },
     };
   },
+  paramEditor: MovingAverageParamEditor,
   isTransferable: (column, newIndexPattern) => {
     return hasDateField(newIndexPattern);
   },
@@ -80,3 +92,48 @@ export const movingAverageOperation: OperationDefinition<
     return checkForDateHistogram(layer);
   },
 };
+
+function MovingAverageParamEditor({
+  state,
+  setState,
+  currentColumn,
+  layerId,
+}: ParamEditorProps<MovingAverageIndexPatternColumn>) {
+  const [inputValue, setInputValue] = useState(String(currentColumn.params.window));
+
+  useDebounceWithOptions(
+    () => {
+      if (inputValue === '') {
+        return;
+      }
+      const inputNumber = Number(inputValue);
+      setState(
+        updateColumnParam({
+          state,
+          layerId,
+          currentColumn,
+          paramName: 'window',
+          value: inputNumber,
+        })
+      );
+    },
+    { skipFirstRender: true },
+    256,
+    [inputValue]
+  );
+  return (
+    <EuiFormRow
+      label={i18n.translate('xpack.lens.indexPattern.movingAverage.window', {
+        defaultMessage: 'Window size',
+      })}
+      display="columnCompressed"
+      fullWidth
+    >
+      <EuiFieldNumber
+        compressed
+        value={inputValue}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
+      />
+    </EuiFormRow>
+  );
+}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/utils.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/utils.ts
index cbad98acedd9a..afdcf06aa43fc 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/utils.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/utils.ts
@@ -37,7 +37,8 @@ export function hasDateField(indexPattern: IndexPattern) {
 export function dateBasedOperationToExpression(
   layer: IndexPatternLayer,
   columnId: string,
-  functionName: string
+  functionName: string,
+  additionalArgs: Record<string, unknown[]> = {}
 ): ExpressionFunctionAST[] {
   const currentColumn = (layer.columns[columnId] as unknown) as ReferenceBasedIndexPatternColumn;
   const buckets = layer.columnOrder.filter((colId) => layer.columns[colId].isBucketed);
@@ -54,6 +55,7 @@ export function dateBasedOperationToExpression(
         by: buckets,
         inputColumnId: [currentColumn.references[0]],
         outputColumnId: [columnId],
+        ...additionalArgs,
       },
     },
   ];
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/column_types.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/column_types.ts
index 13bddc0c2ec26..aef9bb7731d4c 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/column_types.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/column_types.ts
@@ -16,7 +16,7 @@ export interface BaseIndexPatternColumn extends Operation {
 // export interface FormattedIndexPatternColumn extends BaseIndexPatternColumn {
 export type FormattedIndexPatternColumn = BaseIndexPatternColumn & {
   params?: {
-    format: {
+    format?: {
       id: string;
       params?: {
         decimals: number;