diff --git a/frontend/src/metabase/lib/visualization_settings.js b/frontend/src/metabase/lib/visualization_settings.js index 18114f0954f099bea00877144a2b385fa9edee9d..4e1525c99019ce1ae62aea13afda9b16a9c92abd 100644 --- a/frontend/src/metabase/lib/visualization_settings.js +++ b/frontend/src/metabase/lib/visualization_settings.js @@ -291,17 +291,18 @@ const SETTINGS = { widget: ChartSettingToggle, default: true }, - "scalar.separator": { + "scalar.locale": { title: "Separator", widget: ChartSettingSelect, props: { options: [ - { name: "None", value: "" }, - { name: "Comma", value: "," }, - { name: "Period", value: "." }, + { name: "123456.78", value: null }, + { name: "123,456.78", value: "en" }, + { name: "123 456,78", value: "fr" }, + { name: "123.456,78", value: "de" } ] }, - default: "," + default: null }, "scalar.decimals": { title: "Number of decimal places", diff --git a/frontend/src/metabase/vendor.js b/frontend/src/metabase/vendor.js index 7aa048509781a1cc6c054d23d3cced48b4f74845..afbfd93a6fc1b3aefec8c5a886b8c5e796578752 100644 --- a/frontend/src/metabase/vendor.js +++ b/frontend/src/metabase/vendor.js @@ -25,3 +25,5 @@ import 'ace/snippets/mysql'; import 'ace/snippets/pgsql'; import 'ace/snippets/sqlserver'; import 'ace/snippets/json'; + +import 'number-to-locale-string'; diff --git a/frontend/src/metabase/visualizations/Scalar.jsx b/frontend/src/metabase/visualizations/Scalar.jsx index 775b856d7cace618eb99514fca065a3d5e245e32..aec5b0d86ae8a99b6d19ee89121c05d0d0cb2ab8 100644 --- a/frontend/src/metabase/visualizations/Scalar.jsx +++ b/frontend/src/metabase/visualizations/Scalar.jsx @@ -100,15 +100,34 @@ export default class Scalar extends Component { let scalarValue = i.getIn(data, ["rows", 0, 0]); - const scale = parseFloat(settings["scalar.scale"]); - if (typeof scalarValue === "number" && !isNaN(scale)) { - scalarValue *= scale; - } + try { + if (typeof scalarValue === "number") { + // scale + const scale = parseFloat(settings["scalar.scale"]); + if (!isNaN(scale)) { + scalarValue *= scale; + } + + // round + let decimals = parseFloat(settings["scalar.decimals"]); + if (!isNaN(decimals)) { + scalarValue = Math.round(scalarValue * Math.pow(10, decimals)) / Math.pow(10, decimals); + } else { + decimals = undefined; + } - // const decimals = parseFloat(settings["scalar.decimals"]); - // if (typeof scalarValue === "number" && !isNaN(decimals)) { - // scalarValue = Math.round(scalarValue * Math.pow(10, decimals)) / Math.pow(10, decimals); - // } + // format with separators and correct number of decimals + const locale = settings["scalar.locale"]; + if (locale) { + scalarValue = scalarValue.toLocaleString(locale, { minimumFractionDigits: decimals }); + } else { + // HACK: no locales that don't thousands separators? + scalarValue = scalarValue.toLocaleString("en", { minimumFractionDigits: decimals }).replace(/,/g, ""); + } + } + } catch (e) { + console.warn("error formatting scalar", e); + } let compactScalarValue = scalarValue == undefined ? "" : formatValue(scalarValue, { column: i.getIn(data, ["cols", 0]), compact: isSmall }); diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 3d6a6adc437f7f40815cff06175f3085531794d6..05b5ec7330cec29ec856f68bee73dad41b4fd965 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -10277,6 +10277,9 @@ } } }, + "number-to-locale-string": { + "version": "1.0.1" + }, "password-generator": { "version": "2.0.2", "dependencies": { diff --git a/package.json b/package.json index 7e4c03ea95aba4ae7d83dbe8e1a061edd7004b49..9efe1f4b2108177924988a8fd5b12802cd43bfff 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "moment": "^2.12.0", "node-libs-browser": "^0.5.3", "normalizr": "^2.0.0", + "number-to-locale-string": "^1.0.1", "password-generator": "^2.0.1", "react": "^15.2.1", "react-addons-css-transition-group": "^15.2.1",