How to access d3.format from within a custom function in dashAgGridFunctions.js

Dash Python
1

I am running python 3.12.4 dash 2.17.1 dash_ag_grid 31.2.0 on linux OpenSUSE Tumbleweed

I am using Dash AG Grid to build a table.

I am using d3.format with an inline function as follows:

columnDefs = [
{‘field’: ‘Strategy Name’, “valueFormatter”: {“function”: “params.value ? d3.format(‘,.0f’)(params.value) : ‘’”},},
]

However I need a more complicated function that has either nested ? construct or an if - elseif - else statment. So I created a custom function in dashAgGridFunctions.js as follows:

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.formatUtil = function (rowname, cellvalue) {
console.log(rowname);
console.log(cellvalue);
console.log(d3.format(‘,.0f’)(cellvalue));
if (rowname !== ‘Util’ && cellvalue) {
return “broken 1” //d3.format(‘,.0f’)(cellvalue);
} else if (rowname === ‘Util’ && cellvalue) {
return “broken 2” //d3.format(‘,.2%’)(cellvalue);
}
return cellvalue;
};

The logic works, but the call to d3.format() returns an uncaught exception in the browser.

DashUncaughtException
DashUncaughtException1476×1851 386 KB

How can I call d3.format from within the custom js function in dashAgGridFunctions.js ?

I have searched extensively but not found any answer. Apologies if I missed where if this is covered elsewhere.

Any help is much appreciated.

2

Hello @gatomulato,

To use d3 outside of a basic function, you’ll need to import it into your whole application as an external script.

3

Hi @jinnyzor,

Thank you for this answer. It makes sense and I suspected as much.

Sorry if this is a dumb question, but how would I import d3 into the javascript. I am not experienced with js code.

Thanks for any hint or reference.

Gato

4

You’ll need to launch the app with:

app = Dash(external_scripts=[d3script]

Pick whichever of these you’d want to use: