diff --git a/package.json b/package.json index 93e08b6357..cf618a9eb6 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "material-design-iconic-font": "^2.2.0", "mousetrap": "^1.6.1", "mustache": "^2.3.0", - "numbro": "^2.3.6", + "numeral": "^2.0.6", "path-to-regexp": "^3.1.0", "prop-types": "^15.6.1", "query-string": "^6.9.0", diff --git a/viz-lib/package.json b/viz-lib/package.json index 55c9100b1b..c583df82d9 100644 --- a/viz-lib/package.json +++ b/viz-lib/package.json @@ -45,6 +45,7 @@ "@types/enzyme": "^3.10.8", "@types/jest": "^26.0.18", "@types/leaflet": "^1.5.19", + "@types/numeral": "0.0.28", "@types/plotly.js": "^1.54.22", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", @@ -89,7 +90,7 @@ "leaflet-fullscreen": "^1.0.2", "leaflet.markercluster": "^1.1.0", "lodash": "^4.17.10", - "numbro": "^2.3.6", + "numeral": "^2.0.6", "plotly.js": "1.58.5", "react-pivottable": "^0.9.0", "react-sortable-hoc": "^1.10.1", diff --git a/viz-lib/src/lib/value-format.tsx b/viz-lib/src/lib/value-format.tsx index 4754a37ea7..96693d2d3b 100644 --- a/viz-lib/src/lib/value-format.tsx +++ b/viz-lib/src/lib/value-format.tsx @@ -1,10 +1,12 @@ import React from "react"; import ReactDOMServer from "react-dom/server"; import moment from "moment/moment"; -import numbro from "numbro"; +import numeral from "numeral"; import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash"; import { visualizationsSettings } from "@/visualizations/visualizationsSettings"; +numeral.options.scalePercentBy100 = false; + // eslint-disable-next-line const urlPattern = /(^|[\s\n]|)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi; @@ -76,7 +78,7 @@ export function createBooleanFormatter(values: any) { export function createNumberFormatter(format: any) { if (isString(format) && format !== "") { - const n = numbro(0); // cache `numbro` instance + const n = numeral(0); // cache `numeral` instance return (value: any) => (value === null || value === "" ? "" : n.set(value).format(format)); } return (value: any) => toString(value); diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/normalized.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/normalized.json index 13bfeaf99f..3ab34e8e8c 100644 --- a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/normalized.json +++ b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/normalized.json @@ -52,7 +52,7 @@ "type": "bar", "name": "a", "x": ["x1", "x2", "x3", "x4"], - "y": [0.2, 0.4, 0.6, 0.8], + "y": [20, 40, 60, 80], "error_y": { "array": [0, 0, 0, 0], "color": "red" }, "hoverinfo": "text+x+name", "hover": [], @@ -68,7 +68,7 @@ "type": "bar", "name": "b", "x": ["x1", "x2", "x3", "x4"], - "y": [0.8, 0.6, 0.4, 0.2], + "y": [80, 60, 40, 20], "error_y": { "array": [0, 0, 0, 0], "color": "blue" }, "hoverinfo": "text+x+name", "hover": [], diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json index e4541dd0bc..17776da789 100644 --- a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json +++ b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json @@ -51,7 +51,7 @@ "name": "a", "mode": "lines+text", "x": ["x1", "x2", "x3", "x4"], - "y": [0.2, 0.4, 0.6, 0.8], + "y": [20, 40, 60, 80], "error_y": { "array": [0, 0, 0, 0], "color": "red" }, "hoverinfo": "text+x+name", "hover": [], @@ -65,7 +65,7 @@ "name": "b", "mode": "lines+text", "x": ["x1", "x2", "x3", "x4"], - "y": [1, 1, 1, 1], + "y": [100, 100, 100, 100], "error_y": { "array": [0, 0, 0, 0], "color": "blue" }, "hoverinfo": "text+x+name", "hover": [], diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json index 7db38a5334..40e8b03c28 100644 --- a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json +++ b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json @@ -51,7 +51,7 @@ "name": "a", "mode": "lines+text", "x": ["x1", "x2", "x3", "x4"], - "y": [0.2, 0.4, 0.6, 0.8], + "y": [20, 40, 60, 80], "error_y": { "array": [0, 0, 0, 0], "color": "red" }, "hoverinfo": "text+x+name", "hover": [], @@ -65,7 +65,7 @@ "name": "b", "mode": "lines+text", "x": ["x1", "x2", "x3", "x4"], - "y": [0.8, 0.6, 0.4, 0.2], + "y": [80, 60, 40, 20], "error_y": { "array": [0, 0, 0, 0], "color": "blue" }, "hoverinfo": "text+x+name", "hover": [], diff --git a/viz-lib/src/visualizations/chart/plotly/preparePieData.ts b/viz-lib/src/visualizations/chart/plotly/preparePieData.ts index 702b92b2f6..80101f0729 100644 --- a/viz-lib/src/visualizations/chart/plotly/preparePieData.ts +++ b/viz-lib/src/visualizations/chart/plotly/preparePieData.ts @@ -60,7 +60,7 @@ function prepareSeries(series: any, options: any, additionalOptions: any) { sourceData.set(x, { x, y, - yPercent: (y / seriesTotal), + yPercent: (y / seriesTotal) * 100, row, }); }); diff --git a/viz-lib/src/visualizations/chart/plotly/updateData.ts b/viz-lib/src/visualizations/chart/plotly/updateData.ts index 03557683dc..c9cc6b912e 100644 --- a/viz-lib/src/visualizations/chart/plotly/updateData.ts +++ b/viz-lib/src/visualizations/chart/plotly/updateData.ts @@ -119,7 +119,7 @@ function updatePercentValues(seriesList: any, options: any) { item.yPercent = null; } else { const sum = sumOfCorrespondingPoints.get(item.x); - item.yPercent = (item.y / sum); + item.yPercent = (item.y / sum) * 100; } yValues.push(item.yPercent); }); diff --git a/viz-lib/src/visualizations/cohort/Cornelius.tsx b/viz-lib/src/visualizations/cohort/Cornelius.tsx index dfc022ac71..7d5c8eb783 100644 --- a/viz-lib/src/visualizations/cohort/Cornelius.tsx +++ b/viz-lib/src/visualizations/cohort/Cornelius.tsx @@ -65,7 +65,7 @@ function prepareOptions(options: any) { getColorForValue: chroma .scale([options.colors.min, options.colors.max]) .mode("hsl") - .domain([0, 1]) + .domain([0, 100]) .classes(options.colors.steps), }); } @@ -117,7 +117,7 @@ function CorneliusRow({ options, data, index, maxRowLength }: any) { const cells = []; for (let i = 1; i < maxRowLength; i += 1) { const value = data[i]; - const percentageValue = isFinite(value / baseValue) ? (value / baseValue) : null; + const percentageValue = isFinite(value / baseValue) ? (value / baseValue) * 100 : null; const cellProps = { key: `col${i}` }; if (isNil(percentageValue)) { diff --git a/viz-lib/src/visualizations/counter/utils.ts b/viz-lib/src/visualizations/counter/utils.ts index 6f9c8fe265..1f433fffe7 100644 --- a/viz-lib/src/visualizations/counter/utils.ts +++ b/viz-lib/src/visualizations/counter/utils.ts @@ -1,12 +1,12 @@ import { isNumber, isFinite, toString } from "lodash"; -import numbro from "numbro"; +import numeral from "numeral"; // TODO: allow user to specify number format string instead of delimiters only // It will allow to remove this function (move all that weird formatting logic to a migration // that will set number format for all existing counter visualization) function numberFormat(value: any, decimalPoints: any, decimalDelimiter: any, thousandsDelimiter: any) { // Temporarily update locale data (restore defaults after formatting) - const locale = numbro.languageData(); + const locale = numeral.localeData(); const savedDelimiters = locale.delimiters; // Mimic old behavior - AngularJS `number` filter defaults: @@ -33,7 +33,7 @@ function numberFormat(value: any, decimalPoints: any, decimalDelimiter: any, tho } } } - const result = numbro(value).format(formatString); + const result = numeral(value).format(formatString); locale.delimiters = savedDelimiters; return result; @@ -61,7 +61,7 @@ function formatValue(value: any, { stringPrefix, stringSuffix, stringDecimal, st function formatTooltip(value: any, formatString: any) { if (isNumber(value)) { - return numbro(value).format(formatString); + return numeral(value).format(formatString); } return toString(value); } @@ -109,9 +109,9 @@ export function getCounterData(rows: any, options: any, visualizationName: any) } // @ts-expect-error ts-migrate(2339) FIXME: Property 'counterValueTooltip' does not exist on t... Remove this comment to see the full error message - result.counterValueTooltip = formatTooltip(result.counterValue, options.tooltipFormat || "0,0"); + result.counterValueTooltip = formatTooltip(result.counterValue, options.tooltipFormat); // @ts-expect-error ts-migrate(2339) FIXME: Property 'targetValueTooltip' does not exist on ty... Remove this comment to see the full error message - result.targetValueTooltip = formatTooltip(result.targetValue, options.tooltipFormat || "0,0"); + result.targetValueTooltip = formatTooltip(result.targetValue, options.tooltipFormat); // @ts-expect-error ts-migrate(2339) FIXME: Property 'counterValue' does not exist on type '{}... Remove this comment to see the full error message result.counterValue = formatValue(result.counterValue, options); @@ -123,7 +123,7 @@ export function getCounterData(rows: any, options: any, visualizationName: any) // @ts-expect-error ts-migrate(2339) FIXME: Property 'targetValue' does not exist on type '{}'... Remove this comment to see the full error message if (isFinite(result.targetValue)) { // @ts-expect-error ts-migrate(2339) FIXME: Property 'targetValue' does not exist on type '{}'... Remove this comment to see the full error message - result.targetValue = numbro(result.targetValue).format("0[.]00[0]"); + result.targetValue = numeral(result.targetValue).format("0[.]00[0]"); } } } diff --git a/viz-lib/src/visualizations/funnel/Renderer/FunnelBar.tsx b/viz-lib/src/visualizations/funnel/Renderer/FunnelBar.tsx index 226dbf95ee..9ac317dce1 100644 --- a/viz-lib/src/visualizations/funnel/Renderer/FunnelBar.tsx +++ b/viz-lib/src/visualizations/funnel/Renderer/FunnelBar.tsx @@ -16,7 +16,7 @@ type Props = OwnProps & typeof FunnelBar.defaultProps; export default function FunnelBar({ color, value, align, className, children }: Props) { return (
-
+
{children}
); diff --git a/viz-lib/src/visualizations/funnel/Renderer/index.tsx b/viz-lib/src/visualizations/funnel/Renderer/index.tsx index a98aa62a00..9a56bdeb5b 100644 --- a/viz-lib/src/visualizations/funnel/Renderer/index.tsx +++ b/viz-lib/src/visualizations/funnel/Renderer/index.tsx @@ -79,7 +79,7 @@ export default function Renderer({ data, options }: any) { align: "center", render: (value: any) => ( // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message - + {formatPercentValue(value)} ), diff --git a/viz-lib/src/visualizations/funnel/Renderer/prepareData.ts b/viz-lib/src/visualizations/funnel/Renderer/prepareData.ts index 215e26316b..718d594fe3 100644 --- a/viz-lib/src/visualizations/funnel/Renderer/prepareData.ts +++ b/viz-lib/src/visualizations/funnel/Renderer/prepareData.ts @@ -32,9 +32,9 @@ export default function prepareData(rows: any, options: any) { const maxVal = maxBy(data, d => d.value).value; data.forEach((d, i) => { // @ts-expect-error ts-migrate(2339) FIXME: Property 'pctMax' does not exist on type '{ step: ... Remove this comment to see the full error message - d.pctMax = (d.value / maxVal); + d.pctMax = (d.value / maxVal) * 100.0; // @ts-expect-error ts-migrate(2339) FIXME: Property 'pctPrevious' does not exist on type '{ s... Remove this comment to see the full error message - d.pctPrevious = i === 0 || d.value === data[i - 1].value ? 1.0 : (d.value / data[i - 1].value); + d.pctPrevious = i === 0 || d.value === data[i - 1].value ? 100.0 : (d.value / data[i - 1].value) * 100.0; }); return data.slice(0, options.itemsLimit); diff --git a/viz-lib/yarn.lock b/viz-lib/yarn.lock index 1a27a271a7..2fbcd0d6c3 100644 --- a/viz-lib/yarn.lock +++ b/viz-lib/yarn.lock @@ -2134,6 +2134,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.4.tgz#1581d6c16e3d4803eb079c87d4ac893ee7501c2c" integrity sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA== +"@types/numeral@0.0.28": + version "0.0.28" + resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.28.tgz#e43928f0bda10b169b6f7ecf99e3ddf836b8ebe4" + integrity sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw== + "@types/plotly.js@^1.54.22": version "1.54.22" resolved "https://registry.yarnpkg.com/@types/plotly.js/-/plotly.js-1.54.22.tgz#001b9cfafc5e0bdf133bc6ab6e30ff0af39e584d" @@ -2906,11 +2911,6 @@ big.js@^5.2.2: resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== -bignumber.js@^8.1.1: - version "8.1.1" - resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-8.1.1.tgz#4b072ae5aea9c20f6730e4e5d529df1271c4d885" - integrity sha512-QD46ppGintwPGuL1KqmwhR0O+N2cZUg8JG/VzwI2e28sM9TqHjQB10lI4QAaMHVbLzwVLLAwEglpKPViWX+5NQ== - binary-extensions@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" @@ -7634,12 +7634,10 @@ number-is-integer@^1.0.1: dependencies: is-finite "^1.0.1" -numbro@^2.3.6: - version "2.3.6" - resolved "https://registry.yarnpkg.com/numbro/-/numbro-2.3.6.tgz#4bd622ebe59ccbc49dad365c5b9eed200781fa21" - integrity sha512-pxpoTT3hVxQGaOA2RTzXR/muonQNd1K1HPJbWo7QOmxPwiPmoFCFfsG9XXgW3uqjyzezJ0P9IvCPDXUtJexjwg== - dependencies: - bignumber.js "^8.1.1" +numeral@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506" + integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY= numeric@^1.2.6: version "1.2.6" diff --git a/yarn.lock b/yarn.lock index e09d0a3747..0d837e1cb2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1912,7 +1912,7 @@ leaflet-fullscreen "^1.0.2" leaflet.markercluster "^1.1.0" lodash "^4.17.10" - numbro "^2.3.6" + numeral "^2.0.6" plotly.js "1.58.5" react-pivottable "^0.9.0" react-sortable-hoc "^1.10.1" @@ -3433,11 +3433,6 @@ big.js@^5.2.2: resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== -bignumber.js@^8.1.1: - version "8.1.1" - resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-8.1.1.tgz#4b072ae5aea9c20f6730e4e5d529df1271c4d885" - integrity sha512-QD46ppGintwPGuL1KqmwhR0O+N2cZUg8JG/VzwI2e28sM9TqHjQB10lI4QAaMHVbLzwVLLAwEglpKPViWX+5NQ== - binary-extensions@^1.0.0: version "1.13.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.0.tgz#9523e001306a32444b907423f1de2164222f6ab1" @@ -10707,12 +10702,10 @@ number-is-integer@^1.0.1: dependencies: is-finite "^1.0.1" -numbro@^2.3.6: - version "2.3.6" - resolved "https://registry.yarnpkg.com/numbro/-/numbro-2.3.6.tgz#4bd622ebe59ccbc49dad365c5b9eed200781fa21" - integrity sha512-pxpoTT3hVxQGaOA2RTzXR/muonQNd1K1HPJbWo7QOmxPwiPmoFCFfsG9XXgW3uqjyzezJ0P9IvCPDXUtJexjwg== - dependencies: - bignumber.js "^8.1.1" +numeral@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506" + integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY= numeric@^1.2.6: version "1.2.6"