[TSVB] Support custom field format

src/plugins/vis_type_timeseries/common/enums/index.ts

@@ -20,3 +20,12 @@ export enum TOOLTIP_MODES {
   SHOW_ALL = 'show_all',
   SHOW_FOCUSED = 'show_focused',
 }
+
+export enum DATA_FORMATTERS {
+  BYTES = 'bytes',
+  CUSTOM = 'custom',
+  DEFAULT = 'default',
+  DURATION = 'duration',
+  NUMBER = 'number',
+  PERCENT = 'percent',
+}

src/plugins/vis_type_timeseries/common/types/vis_data.ts

@@ -39,6 +39,7 @@ export interface PanelSeries {
 export interface PanelData {
   id: string;
   label: string;
+  labelFormatted?: string;
   data: PanelDataArray[];
   seriesId: string;
   splitByLabel: string;

src/plugins/vis_type_timeseries/public/application/components/aggs/agg.tsx

@@ -6,34 +6,38 @@
  * Side Public License, v 1.
  */
 
-import React, { HTMLAttributes } from 'react';
+import React, { useMemo, useEffect, HTMLAttributes } from 'react';
 // @ts-ignore
 import { aggToComponent } from '../lib/agg_to_component';
 // @ts-ignore
 import { isMetricEnabled } from '../../lib/check_ui_restrictions';
+// @ts-expect-error not typed yet
+import { seriesChangeHandler } from '../lib/series_change_handler';
+import { checkIfNumericMetric } from '../lib/check_if_numeric_metric';
 import { UnsupportedAgg } from './unsupported_agg';
 import { TemporaryUnsupportedAgg } from './temporary_unsupported_agg';
-import type { Metric, Panel, Series } from '../../../../common/types';
-import { DragHandleProps } from '../../../types';
-import { TimeseriesUIRestrictions } from '../../../../common/ui_restrictions';
-import { IFieldType } from '../../../../../data/common/index_patterns/fields';
+import { DATA_FORMATTERS } from '../../../../common/enums';
+import type { Metric, Panel, Series, SanitizedFieldType } from '../../../../common/types';
+import type { DragHandleProps } from '../../../types';
+import type { TimeseriesUIRestrictions } from '../../../../common/ui_restrictions';
 
 interface AggProps extends HTMLAttributes<HTMLElement> {
   disableDelete: boolean;
-  fields: IFieldType[];
+  fields: Record<string, SanitizedFieldType[]>;
+  name: string;
   model: Metric;
   panel: Panel;
   series: Series;
   siblings: Metric[];
   uiRestrictions: TimeseriesUIRestrictions;
   dragHandleProps: DragHandleProps;
+  onChange: (part: Partial<Series>) => void;
   onAdd: () => void;
-  onChange: () => void;
   onDelete: () => void;
 }
 
 export function Agg(props: AggProps) {
-  const { model, uiRestrictions } = props;
+  const { model, uiRestrictions, series, name, onChange, fields, siblings } = props;
 
   let Component = aggToComponent[model.type];
 
@@ -51,6 +55,30 @@ export function Agg(props: AggProps) {
   const indexPattern = props.series.override_index_pattern
     ? props.series.series_index_pattern
     : props.panel.index_pattern;
+  const isKibanaIndexPattern = props.panel.use_kibana_indexes || indexPattern === '';
+
+  const onAggChange = useMemo(
+    () => seriesChangeHandler({ name, model: series, onChange }, siblings),
+    [name, onChange, siblings, series]
+  );
+
+  useEffect(() => {
+    const isNumericMetric = checkIfNumericMetric(model, fields, indexPattern);
+    const isNumberFormatter = ![DATA_FORMATTERS.DEFAULT, DATA_FORMATTERS.CUSTOM].includes(
+      series.formatter as DATA_FORMATTERS
+    );
+
+    if (isNumberFormatter && !isNumericMetric) {
+      onChange({ formatter: DATA_FORMATTERS.DEFAULT });
+    }
+    // in case of string index pattern mode, change default formatter depending on metric type
+    // "number" formatter for numeric metric and "" as custom formatter for any other type
+    if (series.formatter === DATA_FORMATTERS.DEFAULT && !isKibanaIndexPattern) {
+      onChange({
+        formatter: isNumericMetric ? DATA_FORMATTERS.NUMBER : '',
+      });
+    }
+  }, [indexPattern, model, onChange, fields, series.formatter, isKibanaIndexPattern]);
 
   return (
     <div className={props.className} style={style}>
@@ -59,7 +87,7 @@ export function Agg(props: AggProps) {
         disableDelete={props.disableDelete}
         model={props.model}
         onAdd={props.onAdd}
-        onChange={props.onChange}
+        onChange={onAggChange}
         onDelete={props.onDelete}
         panel={props.panel}
         series={props.series}

src/plugins/vis_type_timeseries/public/application/components/aggs/aggs.tsx

@@ -12,31 +12,27 @@ import { EuiDraggable, EuiDroppable } from '@elastic/eui';
 
 import { Agg } from './agg';
 // @ts-ignore
-import { seriesChangeHandler } from '../lib/series_change_handler';
 import { handleAdd, handleDelete } from '../lib/collection_actions';
 import { newMetricAggFn } from '../lib/new_metric_agg_fn';
-import type { Panel, Series } from '../../../../common/types';
+import type { Panel, Series, SanitizedFieldType } from '../../../../common/types';
 import type { TimeseriesUIRestrictions } from '../../../../common/ui_restrictions';
-import { IFieldType } from '../../../../../data/common/index_patterns/fields';
 
 const DROPPABLE_ID = 'aggs_dnd';
 
 export interface AggsProps {
   name: keyof Series;
   panel: Panel;
   model: Series;
-  fields: IFieldType[];
+  fields: Record<string, SanitizedFieldType[]>;
   uiRestrictions: TimeseriesUIRestrictions;
-  onChange(): void;
+  onChange(part: Partial<Series>): void;
 }
 
 export class Aggs extends PureComponent<AggsProps> {
   render() {
-    const { panel, model, fields, uiRestrictions } = this.props;
+    const { panel, model, fields, name, uiRestrictions, onChange } = this.props;
     const list = model.metrics;
 
-    const onChange = seriesChangeHandler(this.props, list);
-
     return (
       <EuiDroppable droppableId={`${DROPPABLE_ID}:${model.id}`} type="MICRO" spacing="s">
         {list.map((row, idx) => (
@@ -52,6 +48,7 @@ export class Aggs extends PureComponent<AggsProps> {
                 key={row.id}
                 disableDelete={list.length < 2}
                 fields={fields}
+                name={name}
                 model={row}
                 onAdd={() => handleAdd(this.props, newMetricAggFn)}
                 onChange={onChange}