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 (