How to call formatter function from a function in a script tag (need to reach the correct *this*)?

msageryd

HighCharts can use provided formatter functions for various formatting. I'd like to format the dates on my X-axis in accordance with the locale of my report.

How can I call my global formatDate function from within a function in the script tag? I tried with a helper function which returns a function. This works, but I'm unable to pass the actual date value to the factory function. The date is normally available in this.value in the formatter function, but I cannot reach the correct this from the helper.

Trying with a factory function. Cannot reach the correct "this" from within helper

        xAxis: {
            type: 'datetime',
            labels: {
                formatter: {{{getFormatterFunction}}}
            },
        },

Trying to call my global formatDate function directly from the function in the script tag

        xAxis: {
            type: 'datetime',
            labels: {
                formatter: function() {return {{formatDate this.value}} }
            },
        },

bjrmatos

hmm that won't work, the formatDate helper runs in another context (server side) and the script runs in another (browser side), what you can do is put the formatDate function definition into an asset, and then you can use that asset for your helpers and for the template html script, something like this

<script>
{#asset formatDate.js}

.....
xAxis: {
            type: 'datetime',
            labels: {
                formatter: function() {return formatDate(this.value) }
            },
        },
....
</script>

however this depends on the kind of code you use in the formatDate, for example if the formatDate depends on another module (a require call) then it won't work in your html script and you will need to just replicate the format logic with another code that is compatible in the browser.

msageryd

Thanks.
I suspected that.

I actually tried to write the formatDate function in the script tag (just like your asset inclusion). But my format function needs to require moment-timezone and it needs some global constants that I have injected for the helpers (TIME_ZONE and LOCALE).

I'll drop this case. The clients will have to cope with possibly wrongly formatted dates in the charts. If I need to revisit this I could prepare the data by generating date-strings in beforeRender.

bjrmatos

i see, yes i was 95% sure that you were using moment :) there is also another trick you can try, for example you can make the helper without a require.

// asset formatDate.js code
function formatDate (val) {
  return moment(....)
}

as you can see the formatDate does not require anything directly, it just expect that moment exists

then in your helpers definition, you can use something like this

const moment = require('moment')
.... another requires....
{#asset formatDate.js}

and in your template html you can fetch moment, moment-timezone, etc from a CDN and the moment will be also available globally

<script src="https://unpkg.com/browse/moment@2.24.0/min/moment.min.js"></script>

<script>
{#asset formatDate.js}

.....
xAxis: {
            type: 'datetime',
            labels: {
                formatter: function() {return formatDate(this.value) }
            },
        },
....
</script>

it probably needs more code changes but this is the general idea, i think it is possible