[7.x] Look up axis format from series instead of using default formatter (#47696)

src/legacy/ui/public/vislib/lib/types/point_series.js

@@ -20,12 +20,16 @@
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 
+function getSeriId(seri) {
+  return seri.id && seri.id.indexOf('.') !== -1
+    ? seri.id.split('.')[0]
+    : seri.id;
+}
+
 const createSeriesFromParams = (cfg, seri) => {
   //percentile data id format is {mainId}.{percentileValue}, this has to be cleaned
   //up to match with ids in cfg.seriesParams entry that contain only {mainId}
-  const seriId = seri.id && seri.id.indexOf('.') !== -1
-    ? seri.id.split('.')[0]
-    : seri.id;
+  const seriId = getSeriId(seri);
   const matchingSeriesParams = cfg.seriesParams ? cfg.seriesParams.find(seriConfig => {
     return seriId === seriConfig.data.id;
   }) : null;
@@ -128,6 +132,16 @@ function create(opts) {
       config.valueAxes.forEach(axis => {
         if (axis.labels) {
           axis.labels.axisFormatter = data.data.yAxisFormatter || data.get('yAxisFormatter');
+          const seriesParams = config.seriesParams && config.seriesParams.find(seriesParams => seriesParams.valueAxis === axis.id);
+          // if there are series assigned to this axis, get the format from the first one
+          if (seriesParams) {
+            const seriesDataId = seriesParams.data.id;
+            const series = (data.data.series || data.get('series'))
+              .find(series => getSeriId(series) === seriesDataId);
+            if (series) {
+              axis.labels.axisFormatter = series.yAxisFormatter;
+            }
+          }
         }
       });
     }

src/legacy/ui/public/vislib/lib/types/point_series.test.js

@@ -30,7 +30,7 @@ describe('vislibPointSeriesTypes', () => {
     percentageMode: true,
     invertColors: false,
     colorsRange: [],
-    heatmapMaxBuckets: 20
+    heatmapMaxBuckets: 20,
   };
 
   const stackedData = {
@@ -88,6 +88,73 @@ describe('vislibPointSeriesTypes', () => {
     },
   };
 
+  describe('axis formatters', () => {
+    it('should create a value axis config with the default y axis formatter', () => {
+      const parsedConfig = vislibPointSeriesTypes.line({}, maxBucketData);
+      expect(parsedConfig.valueAxes.length).toEqual(1);
+      expect(parsedConfig.valueAxes[0].labels.axisFormatter).toBe(
+        maxBucketData.data.yAxisFormatter
+      );
+    });
+
+    it('should use the formatter of the first series matching the axis if there is a descriptor', () => {
+      const axisFormatter1 = jest.fn();
+      const axisFormatter2 = jest.fn();
+      const axisFormatter3 = jest.fn();
+      const parsedConfig = vislibPointSeriesTypes.line(
+        {
+          valueAxes: [
+            {
+              id: 'ValueAxis-1',
+              labels: {},
+            },
+            {
+              id: 'ValueAxis-2',
+              labels: {},
+            },
+          ],
+          seriesParams: [
+            {
+              valueAxis: 'ValueAxis-1',
+              data: {
+                id: '2',
+              },
+            },
+            {
+              valueAxis: 'ValueAxis-2',
+              data: {
+                id: '3',
+              },
+            },
+            {
+              valueAxis: 'ValueAxis-2',
+              data: {
+                id: '4',
+              },
+            },
+          ],
+        },
+        {
+          ...maxBucketData,
+          data: {
+            ...maxBucketData.data,
+            series: [
+              { id: '2.1', label: 's1', values: [], yAxisFormatter: axisFormatter1 },
+              { id: '2.2', label: 's2', values: [], yAxisFormatter: axisFormatter1 },
+              { id: '3.1', label: 's3', values: [], yAxisFormatter: axisFormatter2 },
+              { id: '3.2', label: 's4', values: [], yAxisFormatter: axisFormatter2 },
+              { id: '4.1', label: 's5', values: [], yAxisFormatter: axisFormatter3 },
+              { id: '4.2', label: 's6', values: [], yAxisFormatter: axisFormatter3 },
+            ],
+          },
+        }
+      );
+      expect(parsedConfig.valueAxes.length).toEqual(2);
+      expect(parsedConfig.valueAxes[0].labels.axisFormatter).toBe(axisFormatter1);
+      expect(parsedConfig.valueAxes[1].labels.axisFormatter).toBe(axisFormatter2);
+    });
+  });
+
   describe('heatmap()', () => {
     it('should return an error when more than 20 series are provided', () => {
       const parsedConfig = vislibPointSeriesTypes.heatmap(heatmapConfig, maxBucketData);
@@ -103,6 +170,5 @@ describe('vislibPointSeriesTypes', () => {
       expect(parsedConfig.categoryAxes.length).toBe(2);
       expect(parsedConfig.error).toBeUndefined();
     });
-
   });
 });