How can I add a custom value Formatter function?

Dash Python
1

Is it possible to add valueFormatter function to dagfuns, Because when I added its just considering the whole function as string and displaying the whole function definition as string.

Also, I tried doing it inline function as shown in the docs example, However, this logic is working fine when I tested out this in browser console and pass the params manually but when the similar function logic applied to valueformatter its not working and its only printing the logs. Can someone please help?

“valueFormatter”: {
“function”: “”"
log(‘Formatting value:’, params.value);
params.value = params.value === null || params.value === undefined
? ‘N/A’
: (params.value < 0
? (${Math.abs(params.value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")})
: params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”));
“”" },

I have also tried single line string instead of multi line string as below but this way its only formatting to “N/A” but its not doing other conditions.

“valueFormatter”: {
“function”: “(params.value === null || params.value === undefined) ? ‘N/A’ : (params.value < 0 ? (${Math.abs(params.value).toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}) : params.value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’))”
},

@jinnyzor @Skiks Any idea on why this isnt working ?

2

Hello @codermemem,

This is a good question. My guess is that the string if a little too complex for the function parser to handle. To perform this, I’d suggest adding it to the dagfuncs as a function that you can call and pass the params to.

3

I did try that , However when I added to dagfuns its displaying the whole function definition as string instead of calling that function and displaying the result of it

4

Can you show me the function that you tried in the dagfuncs?

5

I tried these both ways

dagfuncs.commaValueFormatter = function(params) {
if (params.value === null || params.value === undefined) {
return ‘N/A’;
}
let value = params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
if (params.value < 0) {
value = (${value.replace('-', '')});
}
return value;
};

dagfuncs.customValueFormatter = function(params) {
(params.value === null || params.value === undefined) ? ‘N/A’ :
(params.value < 0 ?
(${Math.abs(params.value).toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",")}) :
params.value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, “,”))
}

This is how Im adding it to coldef:

“valueFormatter” : { “function”: “customValueFormatter”}

image

This is how its outputting

6

Once defined in dagfuncs, you should be able to just do this:

"valueFormatter": {
"function":"customValueFormatter(params)" }
7

Yeah I added this way now by passing params however, its still not formatting the values for some reason

8

Its not putting 'N/A'?

Have you tried just putting a random value if less than 0, and something different otherwise?

9

Its not formatting to ‘N/A’ and also similar its not formatting -123 to (123) we already have all these kinds of values in the data. Basically all the logic written in the function isnt working at all

10

Have you looked into simplifying with use d3 formatting? This is built in to be available by default?

11

Not yet, However very confused why these above soln’s aren’t working yet.

12

Change the above to this:

dagfuncs.commaValueFormatter = function(params) {
if (params.value === null || params.value === undefined) {
return 'N/A';
}
let value = 'test';
return value;
};

And let me know if test is showing up.

13

yes it’s now showing test for non null values

14

@jinnyzor It looks like my original commValueFormatter is working now, without changing any code. Anyway thanks for ur help!

1 Like