From b26bc02f4b2981ed2b58c0897100129b7c53c1f5 Mon Sep 17 00:00:00 2001
From: Diana Derevyankina
 <54894989+DziyanaDzeraviankina@users.noreply.github.com>
Date: Tue, 29 Sep 2020 11:07:06 +0300
Subject: [PATCH] [TSVB] Different field format on different series is ignored
 (#78138)

* [TSVB] Different field format on different series is ignored

Closes #74951

* Replace formatter of Y axis with simple value instead of formatter of the first series

* Add a condition to Y-axis tickFormatter to display formatted value if there's only one series

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../application/components/vis_types/timeseries/vis.js   | 9 ++-------
 .../views/timeseries/decorators/area_decorator.js        | 2 ++
 .../views/timeseries/decorators/bar_decorator.js         | 2 ++
 .../application/visualizations/views/timeseries/index.js | 3 +++
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
index c14148d4a020f..2434285bd94c6 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -163,14 +163,9 @@ export class TimeseriesVisualization extends Component {
     const mainAxisGroupId = yAxisIdGenerator('main_group');
 
     const seriesModel = model.series.filter((s) => !s.hidden).map((s) => cloneDeep(s));
-    const firstSeries = seriesModel.find((s) => s.formatter && !s.separate_axis);
 
     const mainAxisScaleType = TimeseriesVisualization.getAxisScaleType(model);
     const mainAxisDomain = TimeseriesVisualization.getYAxisDomain(model);
-    const tickFormatter = TimeseriesVisualization.getTickFormatter(
-      firstSeries,
-      this.props.getConfig
-    );
     const yAxis = [];
     let mainDomainAdded = false;
 
@@ -203,7 +198,7 @@ export class TimeseriesVisualization extends Component {
       series
         .filter((r) => startsWith(r.id, seriesGroup.id))
         .forEach((seriesDataRow) => {
-          seriesDataRow.tickFormatter = seriesGroupTickFormatter;
+          seriesDataRow.tickFormat = seriesGroupTickFormatter;
           seriesDataRow.groupId = groupId;
           seriesDataRow.yScaleType = yScaleType;
           seriesDataRow.hideInLegend = Boolean(seriesGroup.hide_in_legend);
@@ -224,7 +219,7 @@ export class TimeseriesVisualization extends Component {
         });
       } else if (!mainDomainAdded) {
         TimeseriesVisualization.addYAxis(yAxis, {
-          tickFormatter,
+          tickFormatter: series.length === 1 ? undefined : (val) => val,
           id: yAxisIdGenerator('main'),
           groupId: mainAxisGroupId,
           position: model.axis_position,
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/area_decorator.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/area_decorator.js
index 300af551e5020..561c985b3b5c3 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/area_decorator.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/area_decorator.js
@@ -42,6 +42,7 @@ export function AreaSeriesDecorator({
   sortIndex,
   y1AccessorFormat,
   y0AccessorFormat,
+  tickFormat,
 }) {
   const id = seriesId;
   const groupId = seriesGroupId;
@@ -67,6 +68,7 @@ export function AreaSeriesDecorator({
     enableHistogramMode,
     useDefaultGroupDomain,
     sortIndex,
+    tickFormat,
     ...areaSeriesStyle,
   };
 
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/bar_decorator.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/bar_decorator.js
index 239f1d4f1838e..2d6c54de41431 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/bar_decorator.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/bar_decorator.js
@@ -41,6 +41,7 @@ export function BarSeriesDecorator({
   sortIndex,
   y1AccessorFormat,
   y0AccessorFormat,
+  tickFormat,
 }) {
   const id = seriesId;
   const groupId = seriesGroupId;
@@ -66,6 +67,7 @@ export function BarSeriesDecorator({
     enableHistogramMode,
     useDefaultGroupDomain,
     sortIndex,
+    tickFormat,
     ...barSeriesStyle,
   };
 
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
index 5f0cc5188b1fd..1209a105af805 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -176,6 +176,7 @@ export const TimeSeries = ({
             useDefaultGroupDomain,
             y1AccessorFormat,
             y0AccessorFormat,
+            tickFormat,
           },
           sortIndex
         ) => {
@@ -207,6 +208,7 @@ export const TimeSeries = ({
                 sortIndex={sortIndex}
                 y1AccessorFormat={y1AccessorFormat}
                 y0AccessorFormat={y0AccessorFormat}
+                tickFormat={tickFormat}
               />
             );
           }
@@ -233,6 +235,7 @@ export const TimeSeries = ({
                 sortIndex={sortIndex}
                 y1AccessorFormat={y1AccessorFormat}
                 y0AccessorFormat={y0AccessorFormat}
+                tickFormat={tickFormat}
               />
             );
           }