Commit 8f4563a8 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '2084831' into 'master'

Add a new default format for yAxis labels in monitor charts

See merge request gitlab-org/gitlab!28953
parents ff1bd087 e0a878e1
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`);
};
......@@ -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
......
......@@ -120,15 +120,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,
};
};
......
---
title: Add a new default format(engineering notation) for yAxis labels in monitor charts
merge_request: 28953
author:
type: added
......@@ -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', () => {
......
......@@ -471,8 +471,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', () => {
......
......@@ -58,7 +58,7 @@ describe('mapToDashboardViewModel', () => {
y_label: 'Y Label A',
yAxis: {
name: 'Y Label A',
format: 'number',
format: 'engineering',
precision: 2,
},
metrics: [],
......@@ -140,7 +140,7 @@ describe('mapToDashboardViewModel', () => {
y_label: '',
yAxis: {
name: '',
format: SUPPORTED_FORMATS.number,
format: SUPPORTED_FORMATS.engineering,
precision: 2,
},
metrics: [],
......@@ -161,7 +161,7 @@ describe('mapToDashboardViewModel', () => {
},
yAxis: {
name: '',
format: SUPPORTED_FORMATS.number,
format: SUPPORTED_FORMATS.engineering,
precision: 2,
},
metrics: [],
......@@ -221,7 +221,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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment