diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Number.vue b/client/web/compose/src/components/ModuleFields/Configurator/Number.vue
index a79a54551..7dddd4012 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Number.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Number.vue
@@ -53,7 +53,7 @@
>
@@ -68,7 +68,7 @@
>
@@ -85,7 +85,24 @@
>
+
+
+
+
+
+
@@ -101,9 +118,15 @@
- | {{ $t('kind.number.exampleInput') }} |
- {{ $t('kind.number.exampleFormat') }} |
- {{ $t('kind.number.exampleResult') }} |
+
+ {{ $t('kind.number.exampleInput') }}
+ |
+
+ {{ $t('kind.number.exampleFormat') }}
+ |
+
+ {{ $t('kind.number.exampleResult') }}
+ |
@@ -370,9 +393,25 @@ export default {
record: undefined,
errors: new validator.Validated(),
},
+
+ formatOptions: [
+ { value: 'currencyFormat', text: this.$t('kind.number.presetFormats.options.currency') },
+ { value: 'accountingNumber', text: this.$t('kind.number.presetFormats.options.accountingNumber') },
+ ],
}
},
+ computed: {
+ formattedOptionsDescription () {
+ const currency = this.$t('kind.number.presetFormats.description.currency')
+ const accountingNumber = this.$t('kind.number.presetFormats.description.accountingNumber')
+
+ let translation = [currency, accountingNumber].join('\r\n')
+
+ return translation
+ },
+ },
+
watch: {
'field.options.display': {
handler (display) {
@@ -430,6 +469,7 @@ export default {
this.displayOptions = []
this.variants = []
this.mock = {}
+ this.formatOptions = []
},
},
}
diff --git a/lib/js/src/compose/types/module-field/number.ts b/lib/js/src/compose/types/module-field/number.ts
index 77a815bf9..c7d3a6c37 100644
--- a/lib/js/src/compose/types/module-field/number.ts
+++ b/lib/js/src/compose/types/module-field/number.ts
@@ -11,6 +11,7 @@ interface Threshold {
}
interface NumberOptions extends Options {
+ presetFormat: string;
format: string;
prefix: string;
suffix: string;
@@ -29,6 +30,7 @@ interface NumberOptions extends Options {
const defaults = (): Readonly => Object.freeze({
...defaultOptions(),
+ presetFormat: 'currencyFormat',
precision: 3,
multiDelimiter: '\n',
display: 'number', // Either number or progress (progress bar)
@@ -61,7 +63,7 @@ export class ModuleFieldNumber extends ModuleField {
if (!o) return
super.applyOptions(o)
- Apply(this.options, o, String, 'format', 'prefix', 'suffix', 'multiDelimiter', 'display', 'variant')
+ Apply(this.options, o, String, 'format', 'prefix', 'suffix', 'multiDelimiter', 'display', 'variant', 'presetFormat')
Apply(this.options, o, Number, 'precision', 'min', 'max')
Apply(this.options, o, Boolean, 'showValue', 'showRelative', 'showProgress', 'animated')
@@ -84,15 +86,33 @@ export class ModuleFieldNumber extends ModuleField {
default:
n = 0
}
+
let out = `${n}`
+
if (o.format && o.format.length > 0) {
out = numeral(n).format(o.format)
} else {
out = fmt.number(n)
}
- return '' + o.prefix + out + o.suffix
+ if (o.presetFormat === 'accountingNumber') {
+ out = formatChartValueAsAccountingNumber(Number(n))
+ }
+
+ return '' + o.prefix + (out || n) + o.suffix
}
}
+export function formatChartValueAsAccountingNumber (value: number): string {
+ let result = ''
+
+ if (value < 0) {
+ result = `(${Math.abs(value)})`
+ } else if (value === 0) {
+ result = '-'
+ }
+
+ return result
+}
+
Registry.set(kind, ModuleFieldNumber)
diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
index fd18b4939..ac4b21e4f 100644
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -95,6 +95,14 @@ kind:
thresholds:
label: Thresholds
description: Set which variant to show if value is equal or larger than the threshold
+ presetFormats:
+ label: 'Format values using:'
+ options:
+ currency: Currency (Default)
+ accountingNumber: Accounting number
+ description:
+ currency: Currency format displays the data using the default or set by user configuration
+ accountingNumber: 'Accounting number displays the data in the same way as the currency format with the two differences: 1) negative numbers are transformed into positive and added in brackets and 2) the value 0 is substituted by a dash'
record:
currentUnnamedModule: (Current unnamed module)
label: Record