[7.9] Fix float percentiles line chart (#71902) (#72394)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: dej611

src/plugins/vis_type_vislib/public/vislib/lib/types/point_series.js

@@ -21,7 +21,23 @@ import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 
 function getSeriId(seri) {
-  return seri.id && seri.id.indexOf('.') !== -1 ? seri.id.split('.')[0] : seri.id;
+  if (!seri.id) {
+    return;
+  }
+  // Ideally the format should be either ID or "ID.SERIES"
+  // but for some values the SERIES components gets a bit more complex
+
+  // Float values are serialized as strings tuples (i.e. ['99.1']) rather than regular numbers (99.1)
+  // so the complete ids are in the format ID.['SERIES']: hence the specific brackets handler
+  const bracketsMarker = seri.id.indexOf('[');
+  if (bracketsMarker > -1) {
+    return seri.id.substring(0, bracketsMarker);
+  }
+  // Here's the dot check is enough
+  if (seri.id.indexOf('.') > -1) {
+    return seri.id.split('.')[0];
+  }
+  return seri.id;
 }
 
 const createSeriesFromParams = (cfg, seri) => {

src/plugins/vis_type_vislib/public/vislib/lib/types/point_series.test.js

@@ -20,6 +20,8 @@ import stackedSeries from '../../../fixtures/mock_data/date_histogram/_stacked_s
 import { vislibPointSeriesTypes } from './point_series';
 import percentileTestdata from './testdata_linechart_percentile.json';
 import percentileTestdataResult from './testdata_linechart_percentile_result.json';
+import percentileTestdataFloatValue from './testdata_linechart_percentile_float_value.json';
+import percentileTestdataFloatValueResult from './testdata_linechart_percentile_float_value_result.json';
 
 const maxBucketData = {
   get: (prop) => {
@@ -215,18 +217,26 @@ describe('Point Series Config Type Class Test Suite', function () {
   });
 
   describe('line chart', function () {
-    beforeEach(function () {
+    function prepareData({ cfg, data }) {
       const percentileDataObj = {
         get: (prop) => {
           return maxBucketData[prop] || maxBucketData.data[prop] || null;
         },
         getLabels: () => [],
-        data: percentileTestdata.data,
+        data: data,
       };
-      parsedConfig = vislibPointSeriesTypes.line(percentileTestdata.cfg, percentileDataObj);
-    });
+      const parsedConfig = vislibPointSeriesTypes.line(cfg, percentileDataObj);
+      return parsedConfig;
+    }
+
     it('should render a percentile line chart', function () {
-      expect(JSON.stringify(parsedConfig)).toEqual(JSON.stringify(percentileTestdataResult));
+      const parsedConfig = prepareData(percentileTestdata);
+      expect(parsedConfig).toMatchObject(percentileTestdataResult);
+    });
+
+    it('should render a percentile line chart when value is float', function () {
+      const parsedConfig = prepareData(percentileTestdataFloatValue);
+      expect(parsedConfig).toMatchObject(percentileTestdataFloatValueResult);
     });
   });
 });