[Lens] Normalize values by time unit

src/plugins/expressions/common/expression_functions/series_calculation_helpers.ts

@@ -39,16 +39,17 @@ export function getBucketIdentifier(row: DatatableRow, groupColumns?: string[])
  * @param outputColumnId Id of the output column
  * @param inputColumnId Id of the input column
  * @param outputColumnName Optional name of the output column
+ * @param options Optional options, set `allowColumnOverwrite` to true to not raise an exception if the output column exists already
  */
 export function buildResultColumns(
   input: Datatable,
   outputColumnId: string,
   inputColumnId: string,
   outputColumnName: string | undefined,
-  options: { allowColumnOverride: boolean } = { allowColumnOverride: false }
+  options: { allowColumnOverwrite: boolean } = { allowColumnOverwrite: false }
 ) {
   if (
-    !options.allowColumnOverride &&
+    !options.allowColumnOverwrite &&
     input.columns.some((column) => column.id === outputColumnId)
   ) {
     throw new Error(

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

@@ -338,9 +338,10 @@ export function DimensionEditor(props: DimensionEditorProps) {
           <TimeScaling
             selectedColumn={selectedColumn}
             columnId={columnId}
-            layerId={layerId}
-            state={state}
-            setState={setState}
+            layer={state.layers[layerId]}
+            updateLayer={(newLayer: IndexPatternLayer) =>
+              setState(mergeLayer({ layerId, state, newLayer }))
+            }
           />
         )}
 

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

@@ -810,7 +810,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
           col2: {
             dataType: 'number',
             isBucketed: false,
-            label: '',
+            label: 'Count of records',
             operationType: 'count',
             sourceField: 'Records',
             ...colOverrides,
@@ -869,7 +869,8 @@ describe('IndexPatternDimensionEditorPanel', () => {
             columns: {
               ...props.state.layers.first.columns,
               col2: expect.objectContaining({
-                timeScale: 'm',
+                timeScale: 's',
+                label: 'Count of records per second',
               }),
             },
           },
@@ -878,7 +879,33 @@ describe('IndexPatternDimensionEditorPanel', () => {
     });
 
     it('should allow to change time scaling', () => {
-      const props = getProps({ timeScale: 's' });
+      const props = getProps({ timeScale: 's', label: 'Count of records per second' });
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper
+        .find('[data-test-subj="indexPattern-time-scaling-unit"]')
+        .find(EuiSelect)
+        .prop('onChange')!(({
+        target: { value: 'h' },
+      } as unknown) as ChangeEvent<HTMLSelectElement>);
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: 'h',
+                label: 'Count of records per hour',
+              }),
+            },
+          },
+        },
+      });
+    });
+
+    it('should not adjust label if it is custom', () => {
+      const props = getProps({ timeScale: 's', customLabel: true, label: 'My label' });
       wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
       wrapper
         .find('[data-test-subj="indexPattern-time-scaling-unit"]')
@@ -895,6 +922,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
               ...props.state.layers.first.columns,
               col2: expect.objectContaining({
                 timeScale: 'h',
+                label: 'My label',
               }),
             },
           },
@@ -903,7 +931,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
     });
 
     it('should allow to remove time scaling', () => {
-      const props = getProps({ timeScale: 's' });
+      const props = getProps({ timeScale: 's', label: 'Count of records per second' });
       wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
       wrapper
         .find('[data-test-subj="indexPattern-time-scaling-remove"]')
@@ -921,6 +949,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
               ...props.state.layers.first.columns,
               col2: expect.objectContaining({
                 timeScale: undefined,
+                label: 'Count of records',
               }),
             },
           },

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiToolTip } from '@elastic/eui';
 import {
   EuiLink,
   EuiFormRow,
@@ -18,30 +19,50 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
-import { StateSetter } from '../../types';
-import { IndexPatternColumn, operationDefinitionMap } from '../operations';
-import { mergeLayer } from '../state_helpers';
+import {
+  adjustTimeScaleLabelSuffix,
+  DEFAULT_TIME_SCALE,
+  IndexPatternColumn,
+  operationDefinitionMap,
+} from '../operations';
 import { unitSuffixesLong } from '../suffix_formatter';
 import { TimeScaleUnit } from '../time_scale';
-import { IndexPatternPrivateState } from '../types';
+import { IndexPatternLayer } from '../types';
 
-const DEFAULT_TIME_SCALE = 'm' as const;
+export function setTimeScaling(
+  columnId: string,
+  layer: IndexPatternLayer,
+  timeScale: TimeScaleUnit | undefined
+) {
+  const currentColumn = layer.columns[columnId];
+  const label = currentColumn.customLabel
+    ? currentColumn.label
+    : adjustTimeScaleLabelSuffix(currentColumn.label, currentColumn.timeScale, timeScale);
+  return {
+    ...layer,
+    columns: {
+      ...layer.columns,
+      [columnId]: {
+        ...layer.columns[columnId],
+        label,
+        timeScale,
+      },
+    },
+  };
+}
 
 export function TimeScaling({
   selectedColumn,
   columnId,
-  layerId,
-  state,
-  setState,
+  layer,
+  updateLayer,
 }: {
   selectedColumn: IndexPatternColumn;
   columnId: string;
-  layerId: string;
-  state: IndexPatternPrivateState;
-  setState: StateSetter<IndexPatternPrivateState>;
+  layer: IndexPatternLayer;
+  updateLayer: (newLayer: IndexPatternLayer) => void;
 }) {
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const layer = state.layers[layerId];
   const hasDateHistogram = layer.columnOrder.some(
     (colId) => layer.columns[colId].operationType === 'date_histogram'
   );
@@ -85,26 +106,11 @@ export function TimeScaling({
               data-test-subj="indexPattern-time-scaling-enable"
               color="text"
               onClick={() => {
-                setState(
-                  mergeLayer({
-                    state,
-                    layerId,
-                    newLayer: {
-                      ...state.layers[layerId],
-                      columns: {
-                        ...state.layers[layerId].columns,
-                        [columnId]: {
-                          ...selectedColumn,
-                          timeScale: DEFAULT_TIME_SCALE,
-                        },
-                      },
-                    },
-                  })
-                );
+                updateLayer(setTimeScaling(columnId, layer, DEFAULT_TIME_SCALE));
               }}
             >
               {i18n.translate('xpack.lens.indexPattern.timeScale.enableTimeScale', {
-                defaultMessage: 'Show as rate',
+                defaultMessage: 'Show with normalized time units',
               })}
             </EuiLink>
           </EuiText>
@@ -117,9 +123,20 @@ export function TimeScaling({
     <EuiFormRow
       display="columnCompressed"
       fullWidth
-      label={i18n.translate('xpack.lens.indexPattern.timeScale.label', {
-        defaultMessage: 'Normalize by unit',
-      })}
+      label={
+        <EuiToolTip
+          content={i18n.translate('xpack.lens.indexPattern.timeScale.tooltip', {
+            defaultMessage:
+              'Normalized values are displayed as a rate, calculated from the date histogram interval. Values can scale down from a larger interval or scale up from a smaller interval. Partial intervals are handled correctly.',
+          })}
+        >
+          <span>
+            {i18n.translate('xpack.lens.indexPattern.timeScale.label', {
+              defaultMessage: 'Normalize by time unit',
+            })}
+          </span>
+        </EuiToolTip>
+      }
     >
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem>
@@ -132,22 +149,7 @@ export function TimeScaling({
             data-test-subj="indexPattern-time-scaling-unit"
             value={selectedColumn.timeScale}
             onChange={(e) => {
-              setState(
-                mergeLayer({
-                  state,
-                  layerId,
-                  newLayer: {
-                    ...state.layers[layerId],
-                    columns: {
-                      ...state.layers[layerId].columns,
-                      [columnId]: {
-                        ...selectedColumn,
-                        timeScale: e.target.value as TimeScaleUnit,
-                      },
-                    },
-                  },
-                })
-              );
+              updateLayer(setTimeScaling(columnId, layer, e.target.value as TimeScaleUnit));
             }}
           />
         </EuiFlexItem>
@@ -157,25 +159,10 @@ export function TimeScaling({
               data-test-subj="indexPattern-time-scaling-remove"
               color="danger"
               aria-label={i18n.translate('xpack.lens.timeScale.removeLabel', {
-                defaultMessage: 'Remove normalizing by unit',
+                defaultMessage: 'Remove normalizing by time unit',
               })}
               onClick={() => {
-                setState(
-                  mergeLayer({
-                    state,
-                    layerId,
-                    newLayer: {
-                      ...state.layers[layerId],
-                      columns: {
-                        ...state.layers[layerId].columns,
-                        [columnId]: {
-                          ...selectedColumn,
-                          timeScale: undefined,
-                        },
-                      },
-                    },
-                  })
-                );
+                updateLayer(setTimeScaling(columnId, layer, undefined));
               }}
               iconType="cross"
             />

x-pack/plugins/lens/public/indexpattern_datasource/operations/__mocks__/index.ts

@@ -39,6 +39,8 @@ export const {
   isColumnTransferable,
   getErrorMessages,
   isReferenced,
+  adjustTimeScaleLabelSuffix,
+  DEFAULT_TIME_SCALE,
 } = actualHelpers;
 
 export const { createMockedReferenceOperation } = actualMocks;