[TSVB] Different field format on different series is ignored (elastic…

…#78138)

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

Closes elastic#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>

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,

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,
   };
 

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,
   };
 

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}
               />
             );
           }