diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap index 58fb66eec..336dda04d 100644 --- a/src/common/__tests__/__snapshots__/helpers.test.js.snap +++ b/src/common/__tests__/__snapshots__/helpers.test.js.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Helpers should apply a number display function: number display function result 1`] = ` +t { + "_value": 11, +} +`; + exports[`Helpers should expose a window object: limited window object 1`] = ` Object { "DEV_MODE": false, @@ -35,6 +41,7 @@ Object { "noop": [Function], "noopPromise": Promise {}, "noopTranslate": [Function], + "numberDisplay": [Function], } `; @@ -73,6 +80,7 @@ Object { "noop": [Function], "noopPromise": Promise {}, "noopTranslate": [Function], + "numberDisplay": [Function], } `; @@ -110,5 +118,6 @@ Object { "noop": [Function], "noopPromise": Promise {}, "noopTranslate": [Function], + "numberDisplay": [Function], } `; diff --git a/src/common/__tests__/helpers.test.js b/src/common/__tests__/helpers.test.js index 42dd6c157..5c46a45a1 100644 --- a/src/common/__tests__/helpers.test.js +++ b/src/common/__tests__/helpers.test.js @@ -23,6 +23,13 @@ describe('Helpers', () => { expect(helpers.isPromise(() => 'lorem')).toBe(false); }); + it('should apply a number display function', () => { + expect(helpers.numberDisplay(null)).toBe(null); + expect(helpers.numberDisplay(undefined)).toBe(undefined); + expect(helpers.numberDisplay(NaN)).toBe(NaN); + expect(helpers.numberDisplay(11)).toMatchSnapshot('number display function result'); + }); + it('should expose a window object', () => { helpers.browserExpose({ lorem: 'ipsum' }); expect(window[helpers.UI_WINDOW_ID]).toMatchSnapshot('window object'); diff --git a/src/common/helpers.js b/src/common/helpers.js index d7086ed0d..fedbd2dad 100644 --- a/src/common/helpers.js +++ b/src/common/helpers.js @@ -1,3 +1,5 @@ +import numbro from 'numbro'; + /** * Generate a random'ish ID. * @@ -60,6 +62,23 @@ const noopTranslate = (key, value, components) => { })`; }; +/** + * ToDo: review adding "locale" for numbro + */ +/** + * Convenience wrapper for numbro. Numbro assumes all values passed to it conform as "number". + * This allows us to optional chain the function results. + * + * @param {*} value + * @returns {numbro.Numbro|*} + */ +const numberDisplay = value => { + if (typeof value !== 'number' || Number.isNaN(value)) { + return value; + } + return numbro(value); +}; + /** * Is dev mode active. * Associated with using the NPM script "start". See dotenv config files for activation. @@ -277,6 +296,7 @@ const helpers = { noop, noopPromise, noopTranslate, + numberDisplay, DEV_MODE, PROD_MODE, REVIEW_MODE, diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap index d6a703361..9d031c417 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap @@ -146,7 +146,7 @@ exports[`GraphCardMetricTotals Component should handle multiple display states: >
- t(curiosity-graph.cardBodyMetric_total, {"context":"","total":"NAN"}, [object Object]) + t(curiosity-graph.cardBodyMetric_total, {"context":""}, [object Object])
@@ -177,7 +177,7 @@ exports[`GraphCardMetricTotals Component should handle multiple display states: >
- t(curiosity-graph.cardBodyMetric_total, {"context":"","total":"NAN"}, [object Object]) + t(curiosity-graph.cardBodyMetric_total, {"context":""}, [object Object])
diff --git a/src/components/graphCard/graphCardChartTooltip.js b/src/components/graphCard/graphCardChartTooltip.js index acb607079..6b9a9bf2a 100644 --- a/src/components/graphCard/graphCardChartTooltip.js +++ b/src/components/graphCard/graphCardChartTooltip.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import numbro from 'numbro'; import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext'; import { getTooltipDate } from './graphCardHelpers'; import { translate } from '../i18n/i18n'; import { ChartIcon } from '../chart/chartIcon'; import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants'; +import { helpers } from '../../common'; /** * A custom chart tooltip. @@ -93,9 +93,10 @@ const GraphCardChartTooltip = ({ const updatedDataFacetValue = (typeof dataFacet.value === 'number' && !Number.isInteger(dataFacet.value) && - numbro(dataFacet.value) - .format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: true }) - .toUpperCase()) || + helpers + .numberDisplay(dataFacet.value) + ?.format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: true }) + ?.toUpperCase()) || dataFacet.value; return ( diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js index 1a71fdaee..c8d0f65f9 100644 --- a/src/components/graphCard/graphCardHelpers.js +++ b/src/components/graphCard/graphCardHelpers.js @@ -1,8 +1,7 @@ import moment from 'moment'; import { chart_color_green_300 as chartColorGreenDark } from '@patternfly/react-tokens'; -import numbro from 'numbro'; import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes'; -import { dateHelpers } from '../../common'; +import { dateHelpers, helpers } from '../../common'; /** * Update chart/graph filters with base settings with styling. @@ -156,10 +155,6 @@ const xAxisTickFormat = ({ callback, date, granularity, tick, previousDate } = { return formattedDate; }; -/** - * ToDo: review adding "locale" for numbro - * Original settings, numbro(tick).format({ average: true, mantissa: 1, optionalMantissa: true }); - */ /** * Format y axis ticks. * @@ -173,14 +168,15 @@ const yAxisTickFormat = ({ callback, tick } = {}) => { return callback({ tick }); } - return numbro(tick) - .format({ + return helpers + .numberDisplay(tick) + ?.format({ average: true, mantissa: 1, trimMantissa: true, lowPrecision: false }) - .toUpperCase(); + ?.toUpperCase(); }; /** diff --git a/src/components/graphCard/graphCardMetricTotals.js b/src/components/graphCard/graphCardMetricTotals.js index 51eeaf4bc..0587cd849 100644 --- a/src/components/graphCard/graphCardMetricTotals.js +++ b/src/components/graphCard/graphCardMetricTotals.js @@ -2,12 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Card, CardBody, CardFooter, CardTitle, Flex, FlexItem } from '@patternfly/react-core'; import moment from 'moment'; -import numbro from 'numbro'; import { useProductGraphTallyQuery } from '../productView/productViewContext'; import { useMetricsSelector } from './graphCardContext'; import { MinHeight } from '../minHeight/minHeight'; import { Loader, SkeletonSize } from '../loader/loader'; -import { dateHelpers } from '../../common'; +import { dateHelpers, helpers } from '../../common'; import { toolbarFieldOptions } from '../toolbar/toolbarFieldRangedMonthly'; import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants'; import { translate } from '../i18n/i18n'; @@ -66,9 +65,15 @@ const GraphCardMetricTotals = ({ 'curiosity-graph.cardBodyMetric_total', { context: (dailyHasData && metricId) || '', - total: numbro(dailyValue) - .format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: false }) - .toUpperCase() + total: helpers + .numberDisplay(dailyValue) + ?.format({ + average: true, + mantissa: 5, + trimMantissa: true, + lowPrecision: false + }) + ?.toUpperCase() }, [] )} @@ -103,9 +108,10 @@ const GraphCardMetricTotals = ({ 'curiosity-graph.cardBodyMetric_total', { context: (monthlyHasData && metricId) || '', - total: numbro(monthlyValue) - .format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: false }) - .toUpperCase() + total: helpers + .numberDisplay(monthlyValue) + ?.format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: false }) + ?.toUpperCase() }, [] )} diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index 19f223255..828c9ecad 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -554,7 +554,7 @@ Array [ "keys": Array [ Object { "key": "curiosity-graph.cardActionTotal", - "match": "translate('curiosity-graph.cardActionTotal', { context: 'coreHours', total: numbro(totalCoreHours)", + "match": "translate('curiosity-graph.cardActionTotal', { context: 'coreHours', total: helpers .numberDisplay(totalCoreHours)", }, Object { "key": "curiosity-inventory.label", @@ -567,7 +567,7 @@ Array [ "keys": Array [ Object { "key": "curiosity-graph.cardActionTotal", - "match": "translate('curiosity-graph.cardActionTotal', { context: 'coreHours', total: numbro(totalCoreHours)", + "match": "translate('curiosity-graph.cardActionTotal', { context: 'coreHours', total: helpers .numberDisplay(totalCoreHours)", }, Object { "key": "curiosity-inventory.label", diff --git a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap index 5e7396e0c..8511b7675 100644 --- a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap @@ -69,178 +69,223 @@ Object { "0.00017485": "0.00017", "0.0001883": "0.00019", "0.00020175": "0.0002", - "10.00030970249069": "10", - "100.0030970249069": "100", - "1000.0309702490689": "1K", - "1000.030970249069": "1K", - "10000.30970249069": "10K", - "100003.09702490689": "100K", - "1000030.9702490689": "1M", - "10000309.70249069": "10M", - "100003097.02490689": "100M", - "100003097.02490711": "100M", - "1000030970.249071": "1B", - "1000030970.2490711": "1B", - "10000309702.49071": "10B", - "10000309702.490711": "10B", - "100003097024.9071": "100B", - "1000030970249.071": "1T", - "10000309702490.71": "10T", - "110.00340672739759": "110", - "1100.0340672739758": "1.1K", - "11000.34067273976": "11K", - "110003.40672739758": "110K", - "1100034.0672739758": "1.1M", - "11000340.67273976": "11M", - "110003406.72739758": "110M", - "1100034067.2739782": "1.1B", - "11000340672.73978": "11B", - "110003406727.39783": "110B", - "1100034067273.978": "1.1T", - "11000340672739.781": "11T", - "120.00371642988827": "120", - "1200.0371642988828": "1.2K", - "12000.371642988828": "12K", - "120003.71642988827": "120K", - "1200037.1642988827": "1.2M", - "12000371.642988827": "12M", - "120003716.42988828": "120M", - "1200037164.2988853": "1.2B", - "12000371642.988852": "12B", - "120003716429.88853": "120B", - "1200037164298.8853": "1.2T", - "12000371642988.852": "12T", - "130.00402613237895": "130", - "1300.0402613237895": "1.3K", - "13000.402613237897": "13K", - "130004.02613237896": "130K", - "1300040.2613237896": "1.3M", - "13000402.613237895": "13M", - "130004026.13237897": "130M", - "1300040261.3237925": "1.3B", - "13000402613.237923": "13B", - "130004026132.37924": "130B", - "1300040261323.7925": "1.3T", - "13000402613237.924": "13T", - "140.00433583486966": "140", - "1400.0433583486965": "1.4K", - "14000.433583486967": "14K", - "140004.33583486965": "140K", - "1400043.3583486965": "1.4M", - "14000433.583486965": "14M", - "140004335.83486965": "140M", - "1400043358.3486996": "1.4B", - "14000433583.486994": "14B", - "140004335834.86996": "140B", - "1400043358348.6995": "1.4T", - "14000433583486.994": "14T", - "150.00464553736035": "150", - "1500.0464553736033": "1.5K", - "15000.464553736036": "15K", - "150004.64553736034": "150K", - "1500046.4553736034": "1.5M", - "15000464.553736035": "15M", - "150004645.53736034": "150M", - "1500046455.3736067": "1.5B", - "15000464553.736065": "15B", - "150004645537.36066": "150B", - "1500046455373.6064": "1.5T", - "15000464553736.066": "15T", - "20.00061940498138": "20", - "200.0061940498138": "200", - "2000.061940498138": "2K", - "20000.61940498138": "20K", - "200006.19404981378": "200K", - "2000061.9404981378": "2M", - "20000619.40498138": "20M", - "200006194.04981422": "200M", - "2000061940.498142": "2B", - "20000619404.981422": "20B", - "200006194049.8142": "200B", - "2000061940498.142": "2T", - "30.000929107472068": "30", - "300.0092910747207": "300", - "3000.092910747207": "3K", - "30000.929107472068": "30K", - "300009.2910747207": "300K", - "3000092.910747207": "3M", - "30000929.10747207": "30M", - "300009291.07472134": "300M", - "3000092910.747213": "3B", - "30000929107.472134": "30B", - "300009291074.7213": "300B", - "3000092910747.213": "3T", - "40.00123880996276": "40", - "400.0123880996276": "400", - "4000.123880996276": "4K", - "40001.23880996276": "40K", - "400012.38809962757": "400K", - "4000123.8809962757": "4M", - "40001238.80996276": "40M", - "400012388.09962845": "400M", - "4000123880.996284": "4B", - "40001238809.962845": "40B", - "400012388099.6284": "400B", - "4000123880996.284": "4T", - "50.00154851245345": "50", - "500.01548512453445": "500", - "5000.154851245345": "5K", - "50001.548512453446": "50K", - "500015.48512453446": "500K", - "5000154.851245345": "5M", - "50001548.512453444": "50M", - "500015485.12453556": "500M", - "5000154851.245355": "5B", - "50001548512.45355": "50B", - "500015485124.5355": "500B", - "5000154851245.355": "5T", - "60.001858214944136": "60", - "600.0185821494414": "600", - "6000.185821494414": "6K", - "60001.858214944135": "60K", - "600018.5821494414": "600K", - "6000185.821494414": "6M", - "60001858.21494414": "60M", - "600018582.1494427": "600M", - "6000185821.494426": "6B", - "60001858214.94427": "60B", - "600018582149.4426": "600B", - "6000185821494.426": "6T", - "70.00216791743483": "70", - "700.0216791743483": "700", - "7000.216791743484": "7K", - "70002.16791743482": "70K", - "700021.6791743482": "700K", - "7000216.791743482": "7M", - "70002167.91743483": "70M", - "700021679.1743498": "700M", - "7000216791.743497": "7B", - "70002167917.43498": "70B", - "700021679174.3497": "700B", - "7000216791743.497": "7T", - "80.00247761992551": "80", - "800.0247761992551": "800", - "8000.247761992552": "8K", - "80002.47761992551": "80K", - "800024.7761992551": "800K", - "8000247.761992551": "8M", - "80002477.61992551": "80M", - "800024776.1992569": "800M", - "8000247761.992568": "8B", - "80002477619.92569": "80B", - "800024776199.2568": "800B", - "8000247761992.568": "8T", - "90.0027873224162": "90", - "900.027873224162": "900", - "9000.27873224162": "9K", - "90002.7873224162": "90K", - "900027.873224162": "900K", - "9000278.73224162": "9M", - "90002787.3224162": "90M", - "900027873.224164": "900M", - "9000278732.241638": "9B", - "90002787322.4164": "90B", - "900027873224.164": "900B", - "9000278732241.639": "9T", + "0.0002152": "0.00022", + "0.00022865": "0.00023", + "0.0002421": "0.00024", + "0.00025555": "0.00026", + "0.000269": "0.00027", + "0.00028245": "0.00028", + "0.0002959": "0.0003", + "0.00030935": "0.00031", + "0.0003228": "0.00032", + "0.00033625": "0.00034", + "0.001": "0.001", + "0.002": "0.002", + "0.003": "0.003", + "0.004": "0.004", + "0.005": "0.005", + "0.006": "0.006", + "0.007": "0.007", + "0.008": "0.008", + "0.009000000000000001": "0.009", + "0.01": "0.01", + "0.011": "0.011", + "0.012": "0.012", + "0.013000000000000001": "0.013", + "0.014": "0.014", + "0.015": "0.015", + "0.016": "0.016", + "0.017": "0.017", + "0.018000000000000002": "0.018", + "0.019": "0.019", + "0.02": "0.02", + "0.021": "0.021", + "0.022": "0.022", + "0.023": "0.023", + "0.024": "0.024", + "0.025": "0.025", + "1": "1", + "10": "10", + "100": "100", + "1000": "1K", + "10000": "10K", + "100000": "100K", + "1000000": "1M", + "10000000": "10M", + "100000000": "100M", + "1000000000": "1B", + "10000000000": "10B", + "100000000000": "100B", + "1000000000000": "1T", + "10000000000000": "10T", + "11": "11", + "110": "110", + "1100": "1.1K", + "11000": "11K", + "110000": "110K", + "1100000": "1.1M", + "11000000": "11M", + "110000000": "110M", + "1100000000": "1.1B", + "11000000000": "11B", + "110000000000": "110B", + "1100000000000": "1.1T", + "11000000000000": "11T", + "12": "12", + "120": "120", + "1200": "1.2K", + "12000": "12K", + "120000": "120K", + "1200000": "1.2M", + "12000000": "12M", + "120000000": "120M", + "1200000000": "1.2B", + "12000000000": "12B", + "120000000000": "120B", + "1200000000000": "1.2T", + "12000000000000": "12T", + "13": "13", + "130": "130", + "1300": "1.3K", + "13000": "13K", + "130000": "130K", + "1300000": "1.3M", + "13000000": "13M", + "130000000": "130M", + "1300000000": "1.3B", + "13000000000": "13B", + "130000000000": "130B", + "1300000000000": "1.3T", + "13000000000000": "13T", + "14": "14", + "140": "140", + "1400": "1.4K", + "14000": "14K", + "140000": "140K", + "1400000": "1.4M", + "14000000": "14M", + "140000000": "140M", + "1400000000": "1.4B", + "14000000000": "14B", + "140000000000": "140B", + "1400000000000": "1.4T", + "14000000000000": "14T", + "15": "15", + "150": "150", + "1500": "1.5K", + "15000": "15K", + "150000": "150K", + "1500000": "1.5M", + "15000000": "15M", + "150000000": "150M", + "1500000000": "1.5B", + "15000000000": "15B", + "150000000000": "150B", + "1500000000000": "1.5T", + "15000000000000": "15T", + "2": "2", + "20": "20", + "200": "200", + "2000": "2K", + "20000": "20K", + "200000": "200K", + "2000000": "2M", + "20000000": "20M", + "200000000": "200M", + "2000000000": "2B", + "20000000000": "20B", + "200000000000": "200B", + "2000000000000": "2T", + "3": "3", + "30": "30", + "300": "300", + "3000": "3K", + "30000": "30K", + "300000": "300K", + "3000000": "3M", + "30000000": "30M", + "300000000": "300M", + "3000000000": "3B", + "30000000000": "30B", + "300000000000": "300B", + "3000000000000": "3T", + "4": "4", + "40": "40", + "400": "400", + "4000": "4K", + "40000": "40K", + "400000": "400K", + "4000000": "4M", + "40000000": "40M", + "400000000": "400M", + "4000000000": "4B", + "40000000000": "40B", + "400000000000": "400B", + "4000000000000": "4T", + "5": "5", + "50": "50", + "500": "500", + "5000": "5K", + "50000": "50K", + "500000": "500K", + "5000000": "5M", + "50000000": "50M", + "500000000": "500M", + "5000000000": "5B", + "50000000000": "50B", + "500000000000": "500B", + "5000000000000": "5T", + "6": "6", + "60": "60", + "600": "600", + "6000": "6K", + "60000": "60K", + "600000": "600K", + "6000000": "6M", + "60000000": "60M", + "600000000": "600M", + "6000000000": "6B", + "60000000000": "60B", + "600000000000": "600B", + "6000000000000": "6T", + "7": "7", + "70": "70", + "700": "700", + "7000": "7K", + "70000": "70K", + "700000": "700K", + "7000000": "7M", + "70000000": "70M", + "700000000": "700M", + "7000000000": "7B", + "70000000000": "70B", + "700000000000": "700B", + "7000000000000": "7T", + "8": "8", + "80": "80", + "800": "800", + "8000": "8K", + "80000": "80K", + "800000": "800K", + "8000000": "8M", + "80000000": "80M", + "800000000": "800M", + "8000000000": "8B", + "80000000000": "80B", + "800000000000": "800B", + "8000000000000": "8T", + "9": "9", + "90": "90", + "900": "900", + "9000": "9K", + "90000": "90K", + "900000": "900K", + "9000000": "9M", + "90000000": "90M", + "900000000": "900M", + "9000000000": "9B", + "90000000000": "90B", + "900000000000": "900B", + "9000000000000": "9T", } `; diff --git a/src/config/__tests__/product.rhosak.test.js b/src/config/__tests__/product.rhosak.test.js index ad76b5f96..b68dff146 100644 --- a/src/config/__tests__/product.rhosak.test.js +++ b/src/config/__tests__/product.rhosak.test.js @@ -12,8 +12,23 @@ describe('Product RHOSAK config', () => { it('should handle a custom yAxisTickFormat for floating points', () => { const generateTicks = (method = config.initialGraphSettings.yAxisTickFormat) => { const ticks = {}; - for (let i = 0.00001345; i < 13; i++) { - const multiplier = i < 1 ? i : Math.pow(10, i); + + for (let i = 0.00001345; i < 1; i++) { + for (let k = 1; k < 26; k++) { + const incrementMultiplier = k * i; + ticks[incrementMultiplier] = method({ tick: incrementMultiplier }); + } + } + + for (let i = 0.001; i < 1; i++) { + for (let k = 1; k < 26; k++) { + const incrementMultiplier = k * i; + ticks[incrementMultiplier] = method({ tick: incrementMultiplier }); + } + } + + for (let i = 0; i < 13; i++) { + const multiplier = Math.pow(10, i); for (let k = 1; k < 16; k++) { const incrementMultiplier = k * multiplier; ticks[incrementMultiplier] = method({ tick: incrementMultiplier }); diff --git a/src/config/product.openshiftDedicated.js b/src/config/product.openshiftDedicated.js index 02426847c..03c4b3a07 100644 --- a/src/config/product.openshiftDedicated.js +++ b/src/config/product.openshiftDedicated.js @@ -7,7 +7,6 @@ import { } from '@patternfly/react-tokens'; import { Label as PfLabel } from '@patternfly/react-core'; import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat'; -import numbro from 'numbro'; import { RHSM_API_QUERY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, @@ -15,7 +14,7 @@ import { RHSM_API_QUERY_SORT_TYPES, RHSM_API_PATH_ID_TYPES } from '../types/rhsmApiTypes'; -import { dateHelpers } from '../common'; +import { dateHelpers, helpers } from '../common'; import { translate } from '../components/i18n/i18n'; const productGroup = RHSM_API_PATH_ID_TYPES.OPENSHIFT_DEDICATED_METRICS; @@ -72,9 +71,10 @@ const config = { if (totalCoreHours) { displayContent = translate('curiosity-graph.cardActionTotal', { context: 'coreHours', - total: numbro(totalCoreHours) - .format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) - .toUpperCase() + total: helpers + .numberDisplay(totalCoreHours) + ?.format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) + ?.toUpperCase() }); } diff --git a/src/config/product.openshiftMetrics.js b/src/config/product.openshiftMetrics.js index 071c53630..499ce1225 100644 --- a/src/config/product.openshiftMetrics.js +++ b/src/config/product.openshiftMetrics.js @@ -5,7 +5,6 @@ import { } from '@patternfly/react-tokens'; import { Label as PfLabel } from '@patternfly/react-core'; import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat'; -import numbro from 'numbro'; import { RHSM_API_QUERY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, @@ -13,7 +12,7 @@ import { RHSM_API_QUERY_SORT_TYPES, RHSM_API_PATH_ID_TYPES } from '../types/rhsmApiTypes'; -import { dateHelpers } from '../common'; +import { dateHelpers, helpers } from '../common'; import { translate } from '../components/i18n/i18n'; // ToDo: evaluate the need for "productLabel" or using productId @@ -60,9 +59,10 @@ const config = { if (totalCoreHours) { displayContent = translate('curiosity-graph.cardActionTotal', { context: 'coreHours', - total: numbro(totalCoreHours) - .format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) - .toUpperCase() + total: helpers + .numberDisplay(totalCoreHours) + ?.format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) + ?.toUpperCase() }); } diff --git a/src/config/product.rhosak.js b/src/config/product.rhosak.js index 912cc7eaa..a2349be6c 100644 --- a/src/config/product.rhosak.js +++ b/src/config/product.rhosak.js @@ -6,7 +6,6 @@ import { chart_color_purple_100 as chartColorPurpleLight, chart_color_purple_300 as chartColorPurpleDark } from '@patternfly/react-tokens'; -import numbro from 'numbro'; import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_SET_TYPES, @@ -14,7 +13,7 @@ import { RHSM_API_PATH_METRIC_TYPES } from '../services/rhsm/rhsmConstants'; import { translate } from '../components/i18n/i18n'; -import { dateHelpers } from '../common'; +import { dateHelpers, helpers } from '../common'; /** * ToDo: evaluate separating products/product tags into individual configs... @@ -78,11 +77,15 @@ const config = { xAxisChartLabel: () => translate('curiosity-graph.label_axisX', { context: GRANULARITY_TYPES.DAILY }), yAxisTickFormat: ({ tick }) => { if (tick > 1) { - return numbro(tick) - .format({ average: true, mantissa: 1, trimMantissa: true, lowPrecision: false }) - .toUpperCase(); + return helpers + .numberDisplay(tick) + ?.format({ average: true, mantissa: 1, trimMantissa: true, lowPrecision: false }) + ?.toUpperCase(); } - return numbro(tick).format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: true }).toUpperCase(); + return helpers + .numberDisplay(tick) + ?.format({ average: true, mantissa: 5, trimMantissa: true, lowPrecision: true }) + ?.toUpperCase(); } }, initialToolbarFilters: [