[7.x] Ensure visualizations in percentage mode respect the advanced settings percent format (#39044)

src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js

@@ -119,11 +119,9 @@ export class MetricVisComponent extends Component {
         const color = this._getColor(value, labels, colors);
 
         if (isPercentageMode) {
-          const percentage = Math.round(100 * (value - min) / (max - min));
-          value = `${percentage}%`;
-        } else {
-          value = this._getFormattedValue(formatter, value, 'html');
+          value = (value - min) / (max - min);
         }
+        value = this._getFormattedValue(formatter, value, 'html');
 
         if (bucketColumnId) {
           const bucketValue = this._getFormattedValue(bucketFormatter, row[bucketColumnId]);

src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip_formatter.js

@@ -49,12 +49,7 @@ export function PointSeriesTooltipFormatterProvider($compile, $rootScope) {
       }
       if (datum.y) {
         const value = datum.yScale ? datum.yScale * datum.y : datum.y;
-        if(event.isPercentageMode) {
-          const valueInPercent = Math.round(value * 10000) / 100;
-          addDetail(currentSeries.label, `${valueInPercent.toFixed(2)} %`);
-        } else {
-          addDetail(currentSeries.label, currentSeries.yAxisFormatter(value));
-        }
+        addDetail(currentSeries.label, currentSeries.yAxisFormatter(value));
       }
       if (datum.z) {
         addDetail(currentSeries.zLabel, currentSeries.zAxisFormatter(datum.z));

src/legacy/ui/public/vislib/__tests__/lib/y_axis.js

@@ -342,16 +342,6 @@ describe('Vislib yAxis Class Test Suite', function () {
       yAxis = buildYAxis();
     });
 
-    it('should use percentage format for percentages', function () {
-      yAxis = buildYAxis({
-        scale: {
-          mode: 'percentage'
-        }
-      });
-      const tickFormat = yAxis.getAxis().tickFormat();
-      expect(tickFormat(1)).to.be('100%');
-    });
-
     it('should use decimal format for small values', function () {
       yAxis.yMax = 1;
       const tickFormat = yAxis.getAxis().tickFormat();

src/legacy/ui/public/vislib/__tests__/visualizations/gauge_chart.js

@@ -113,15 +113,6 @@ describe('Vislib Gauge Chart Test Suite', function () {
     expect($(chartEl).find('svg').length).to.equal(5);
   });
 
-  it('creates gauge with percentage mode', function () {
-    generateVis({
-      gauge: {
-        percentageMode: true
-      }
-    });
-    expect($(chartEl).find('svg > g > g > text').text()).to.equal('94%77%61%24%45%');
-  });
-
   it('creates gauge with automatic mode', function () {
     generateVis({
       gauge: {

src/legacy/ui/public/vislib/lib/axis/axis_config.js

@@ -136,11 +136,6 @@ export class AxisConfig {
         }
       }
 
-      // override axisFormatter (to replicate current behaviour)
-      if (this.isPercentage()) {
-        this._values.labels.axisFormatter = d3.format('%');
-      }
-
       if (this.isLogScale()) {
         this._values.labels.filter = true;
       }

src/legacy/ui/public/vislib/visualizations/gauges/meter.js

@@ -264,8 +264,8 @@ export class MeterGauge {
       .attr('y', -5)
       .text(d => {
         if (this.gaugeConfig.percentageMode) {
-          const percentage = Math.round(100 * (d.y - min) / (max - min));
-          return `${percentage}%`;
+          const percentage = (d.y - min) / (max - min);
+          return data.yAxisFormatter(percentage);
         }
         return data.yAxisFormatter(d.y);
       })