Add percent tick formatter to timelion (#10917)

src/core_plugins/timelion/public/__tests__/services/tick_formatters.js

@@ -91,7 +91,7 @@ describe('Tick Formatters', function () {
       expect(currencyFormatter).to.be.a('function');
     });
 
-    it('formats with $ by defalt', function () {
+    it('formats with $ by default', function () {
       const axis = {
         options: {
           units: {}
@@ -113,6 +113,26 @@ describe('Tick Formatters', function () {
     });
   });
 
+  describe('Percent mode', function () {
+    let percentFormatter;
+    beforeEach(function () {
+      percentFormatter = tickFormatters.percent;
+    });
+
+    it('is a function', function () {
+      expect(percentFormatter).to.be.a('function');
+    });
+
+    it('formats with %', function () {
+      const axis = {
+        options: {
+          units: {}
+        }
+      };
+      expect(percentFormatter(0.1234, axis)).to.equal('12.34%');
+    });
+  });
+
   describe('Custom mode', function () {
     let customFormatter;
     beforeEach(function () {

src/core_plugins/timelion/public/services/tick_formatters.js

@@ -59,6 +59,9 @@ define(function () {
       'currency': function (val, axis) {
         return val.toLocaleString('en', { style: 'currency', currency: axis.options.units.prefix || 'USD' });
       },
+      'percent': function (val) {
+        return val * 100 + '%';
+      },
       'custom': function (val, axis) {
         const formattedVal = baseTickFormatter(val, axis);
         const prefix = axis.options.units.prefix;

src/core_plugins/timelion/server/series_functions/yaxis.js

@@ -7,6 +7,7 @@ const tickFormatters = {
   'bytes':'bytes',
   'bytes/s':'bytes/s',
   'currency':'currency(:ISO 4217 currency code)',
+  'percent':'percent',
   'custom':'custom(:prefix:suffix)'
 };
 module.exports = new Chainable('yaxis', {