[TSVB] Format the label with the right default formatter (#136934)

* format the label with the right default formatter * Update convert_series_to_vars.js * fix test Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
elastic · Jul 27, 2022 · 2348f56 · 2348f56
1 parent 9c349a3
commit 2348f56
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/src/plugins/vis_types/timeseries/public/application/components/lib/convert_series_to_vars.js b/src/plugins/vis_types/timeseries/public/application/components/lib/convert_series_to_vars.js
@@ -17,7 +17,7 @@ import { createFieldFormatter } from './create_field_formatter';
 import moment from 'moment';
 import { getFieldsForTerms } from '../../../../common/fields_utils';
 
-export const convertSeriesToVars = (series, model, getConfig = null, fieldFormatMap) => {
+export const convertSeriesToVars = (series, model, getConfig = null, fieldFormatMap, dataView) => {
   const variables = {};
   const dateFormat = getConfig?.('dateFormat') ?? 'lll';
   model.series.forEach((seriesModel) => {
@@ -57,13 +57,21 @@ export const convertSeriesToVars = (series, model, getConfig = null, fieldFormat
           const fieldsForTerms = getFieldsForTerms(seriesModel.terms_field);
 
           if (fieldsForTerms.length === 1) {
-            rowLabel = createFieldFormatter(fieldsForTerms[0], fieldFormatMap)(row.label);
+            rowLabel = createFieldFormatter(
+              fieldsForTerms[0],
+              fieldFormatMap,
+              undefined,
+              false,
+              dataView
+            )(row.label);
           }
         }
 
         set(variables, varName, data);
         // label might be not purely alphanumeric, wrap in brackets to map sure it's resolved correctly
         set(variables, `[${label}].label`, rowLabel);
+        // compatibility
+        set(variables, `[${label}].formatted`, rowLabel);
       });
   });
   return variables;

diff --git a/src/plugins/vis_types/timeseries/public/application/components/lib/create_field_formatter.ts b/src/plugins/vis_types/timeseries/public/application/components/lib/create_field_formatter.ts
@@ -8,18 +8,17 @@
 
 import { isNumber } from 'lodash';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
-import type { FieldFormatMap } from '@kbn/data-views-plugin/common';
+import type { FieldFormatMap, DataView } from '@kbn/data-views-plugin/common';
 import type { FieldFormatsContentType } from '@kbn/field-formats-plugin/common';
 import { isEmptyValue, DISPLAY_EMPTY_VALUE } from '../../../../common/last_value_utils';
 import { getFieldFormats } from '../../../services';
 
-const DEFAULT_FIELD_FORMAT = { id: 'number' };
-
 export const createFieldFormatter = (
   fieldName: string = '',
   fieldFormatMap?: FieldFormatMap,
   contextType?: FieldFormatsContentType,
-  hasColorRules: boolean = false
+  hasColorRules: boolean = false,
+  dataView?: DataView
 ) => {
   const serializedFieldFormat = fieldFormatMap?.[fieldName];
   // field formatting should be skipped either there's no such field format in fieldFormatMap
@@ -28,15 +27,23 @@ export const createFieldFormatter = (
     !serializedFieldFormat ||
     (hasColorRules && serializedFieldFormat?.id === FIELD_FORMAT_IDS.COLOR);
 
+  const fieldType = dataView?.getFieldByName(fieldName)?.type || 'number';
+  const defaultFieldFormat =
+    fieldType === 'date'
+      ? { id: 'date' }
+      : fieldType === 'string'
+      ? { id: 'string' }
+      : { id: 'number' };
+
   const fieldFormat = getFieldFormats().deserialize(
-    shouldSkipFormatting ? DEFAULT_FIELD_FORMAT : serializedFieldFormat
+    shouldSkipFormatting ? defaultFieldFormat : serializedFieldFormat
   );
 
   return (value: unknown) => {
     if (isEmptyValue(value)) {
       return DISPLAY_EMPTY_VALUE;
     }
-    return isNumber(value) || !shouldSkipFormatting
+    return fieldType !== 'number' || isNumber(value) || !shouldSkipFormatting
       ? fieldFormat.convert(value, contextType)
       : value;
   };

diff --git a/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js b/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
@@ -50,7 +50,7 @@ export class MarkdownEditor extends Component {
   async componentDidMount() {
     const dataViews = getDataViewsStart();
     const { indexPattern } = await fetchIndexPattern(this.props.model.index_pattern, dataViews);
-    this.setState({ fieldFormatMap: indexPattern?.fieldFormatMap });
+    this.setState({ fieldFormatMap: indexPattern?.fieldFormatMap, indexPattern });
   }
 
   render() {
@@ -60,7 +60,13 @@ export class MarkdownEditor extends Component {
       return null;
     }
     const series = _.get(visData, `${model.id}.series`, []);
-    const variables = convertSeriesToVars(series, model, getConfig, this.state.fieldFormatMap);
+    const variables = convertSeriesToVars(
+      series,
+      model,
+      getConfig,
+      this.state.fieldFormatMap,
+      this.state.indexPattern
+    );
     const rows = [];
     const rawFormatter = createTickFormatter('0.[0000]', null, getConfig);
 

diff --git a/src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js b/src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
@@ -21,9 +21,17 @@ import { isBackgroundInverted } from '../../../lib/set_is_reversed';
 import './_markdown.scss';
 
 function MarkdownVisualization(props) {
-  const { backgroundColor, model, visData, getConfig, fieldFormatMap, initialRender } = props;
+  const {
+    backgroundColor,
+    model,
+    visData,
+    getConfig,
+    fieldFormatMap,
+    initialRender,
+    indexPattern,
+  } = props;
   const series = get(visData, `${model.id}.series`, []);
-  const variables = convertSeriesToVars(series, model, getConfig, fieldFormatMap);
+  const variables = convertSeriesToVars(series, model, getConfig, fieldFormatMap, indexPattern);
 
   const panelBackgroundColor = model.background_color || backgroundColor;
   const style = { backgroundColor: panelBackgroundColor };

diff --git a/test/functional/apps/visualize/group6/_tsvb_markdown.ts b/test/functional/apps/visualize/group6/_tsvb_markdown.ts
@@ -55,7 +55,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
         const variables = await visualBuilder.getMarkdownTableVariables();
         expect(variables).not.to.be.empty();
-        expect(variables).to.have.length(5);
+        expect(variables).to.have.length(6);
       });
 
       it('should allow printing raw timestamp of data', async () => {
@@ -117,7 +117,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
         table.forEach((row, index) => {
           // exception: last index for variable is always: {{count.label}}
-          if (index === table.length - 1) {
+          if (index >= table.length - 2) {
             expect(row.key).to.not.include.string(VARIABLE);
           } else {
             expect(row.key).to.include.string(VARIABLE);