Add a new default format for yAxis labels in monitor charts

app/assets/javascripts/lib/utils/unit_format/index.js

+import { engineeringNotation } from '@gitlab/ui/src/utils/number_utils';
 import { s__ } from '~/locale';
 
 import {
@@ -39,15 +40,18 @@ export const SUPPORTED_FORMATS = {
   gibibytes: 'gibibytes',
   tebibytes: 'tebibytes',
   pebibytes: 'pebibytes',
+
+  // Engineering Notation
+  engineering: 'engineering',
 };
 
 /**
  * Returns a function that formats number to different units
- * @param {String} format - Format to use, must be one of the SUPPORTED_FORMATS. Defaults to number.
+ * @param {String} format - Format to use, must be one of the SUPPORTED_FORMATS. Defaults to engineering notation.
  *
  *
  */
-export const getFormatter = (format = SUPPORTED_FORMATS.number) => {
+export const getFormatter = (format = SUPPORTED_FORMATS.engineering) => {
   // Number
 
   if (format === SUPPORTED_FORMATS.number) {
@@ -252,6 +256,17 @@ export const getFormatter = (format = SUPPORTED_FORMATS.number) => {
     return scaledBinaryFormatter('B', 5);
   }
 
+  if (format === SUPPORTED_FORMATS.engineering) {
+    /**
+     * Formats via engineering notation
+     *
+     * @function
+     * @param {Number} value - Value to format
+     * @param {Number} fractionDigits - precision decimals - Defaults to 2
+     */
+    return engineeringNotation;
+  }
+
   // Fail so client library addresses issue
   throw TypeError(`${format} is not a valid number format`);
 };

app/assets/javascripts/monitoring/components/charts/options.js

@@ -6,9 +6,8 @@ const yAxisBoundaryGap = [0.1, 0.1];
  * Max string length of formatted axis tick
  */
 const maxDataAxisTickLength = 8;
-
 //  Defaults
-const defaultFormat = SUPPORTED_FORMATS.number;
+const defaultFormat = SUPPORTED_FORMATS.engineering;
 
 const defaultYAxisFormat = defaultFormat;
 const defaultYAxisPrecision = 2;
@@ -26,8 +25,7 @@ const chartGridLeft = 75;
  * @param {Object} param - Dashboard .yml definition options
  */
 const getDataAxisOptions = ({ format, precision, name }) => {
-  const formatter = getFormatter(format);
-
+  const formatter = getFormatter(format); // default to engineeringNotation, same as gitlab-ui
   return {
     name,
     nameLocation: 'center', // same as gitlab-ui's default

app/assets/javascripts/monitoring/stores/utils.js

@@ -95,15 +95,19 @@ const mapXAxisToViewModel = ({ name = '' }) => ({ name });
 /**
  * Maps Y-axis view model
  *
- * Defaults to a 2 digit precision and `number` format. It only allows
+ * Defaults to a 2 digit precision and `engineering` format. It only allows
  * formats in the SUPPORTED_FORMATS array.
  *
  * @param {Object} axis
  */
-const mapYAxisToViewModel = ({ name = '', format = SUPPORTED_FORMATS.number, precision = 2 }) => {
+const mapYAxisToViewModel = ({
+  name = '',
+  format = SUPPORTED_FORMATS.engineering,
+  precision = 2,
+}) => {
   return {
     name,
-    format: SUPPORTED_FORMATS[format] || SUPPORTED_FORMATS.number,
+    format: SUPPORTED_FORMATS[format] || SUPPORTED_FORMATS.engineering,
     precision,
   };
 };

changelogs/unreleased/2084831.yml

+---
+title: Add a new default format(engineering notation) for yAxis labels in monitor charts
+merge_request: 28953
+author:
+type: added

spec/frontend/monitoring/components/charts/options_spec.js

@@ -31,7 +31,32 @@ describe('options spec', () => {
       });
     });
 
-    it('formatter options', () => {
+    it('formatter options defaults to engineering notation', () => {
+      const options = getYAxisOptions();
+
+      expect(options.axisLabel.formatter).toEqual(expect.any(Function));
+      expect(options.axisLabel.formatter('3,002.10')).toBe('3k');
+    });
+
+    it('formatter options allows for precision to be set explicitly', () => {
+      const options = getYAxisOptions({
+        precision: 4,
+      });
+
+      expect(options.axisLabel.formatter).toEqual(expect.any(Function));
+      expect(options.axisLabel.formatter(5002.1)).toBe('5.0021k');
+    });
+
+    it('formatter options allows for overrides in milliseconds', () => {
+      const options = getYAxisOptions({
+        format: SUPPORTED_FORMATS.milliseconds,
+      });
+
+      expect(options.axisLabel.formatter).toEqual(expect.any(Function));
+      expect(options.axisLabel.formatter(1.1234)).toBe('1.12ms');
+    });
+
+    it('formatter options allows for overrides in bytes', () => {
       const options = getYAxisOptions({
         format: SUPPORTED_FORMATS.bytes,
       });
@@ -46,7 +71,7 @@ describe('options spec', () => {
       const formatter = getTooltipFormatter();
 
       expect(formatter).toEqual(expect.any(Function));
-      expect(formatter(1)).toBe('1.000');
+      expect(formatter(0.11111)).toBe('111.1m');
     });
 
     it('defined format', () => {

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -442,8 +442,8 @@ describe('Time series component', () => {
               deploymentFormatter = getChartOptions().yAxis[1].axisLabel.formatter;
             });
 
-            it('formats and rounds to 2 decimal places', () => {
-              expect(dataFormatter(0.88888)).toBe('0.89');
+            it('formats by default to precision notation', () => {
+              expect(dataFormatter(0.88888)).toBe('889m');
             });
 
             it('deployment formatter is set as is required to display a tooltip', () => {

spec/frontend/monitoring/store/utils_spec.js

@@ -56,7 +56,7 @@ describe('mapToDashboardViewModel', () => {
               y_label: 'Y Label A',
               yAxis: {
                 name: 'Y Label A',
-                format: 'number',
+                format: 'engineering',
                 precision: 2,
               },
               metrics: [],
@@ -138,7 +138,7 @@ describe('mapToDashboardViewModel', () => {
         y_label: '',
         yAxis: {
           name: '',
-          format: SUPPORTED_FORMATS.number,
+          format: SUPPORTED_FORMATS.engineering,
           precision: 2,
         },
         metrics: [],
@@ -159,7 +159,7 @@ describe('mapToDashboardViewModel', () => {
         },
         yAxis: {
           name: '',
-          format: SUPPORTED_FORMATS.number,
+          format: SUPPORTED_FORMATS.engineering,
           precision: 2,
         },
         metrics: [],
@@ -219,7 +219,7 @@ describe('mapToDashboardViewModel', () => {
         },
       });
 
-      expect(getMappedPanel().yAxis.format).toBe(SUPPORTED_FORMATS.number);
+      expect(getMappedPanel().yAxis.format).toBe(SUPPORTED_FORMATS.engineering);
     });
 
     // This property allows single_stat panels to render percentile values