Ui-chart / eCharts: valueFormatter or formatter? But how?

Dashboard
1

Hello guys,

in my current little hobby project I'm (amongst other astronomical things) visualising the day length for certain locations. Here's how the chart currently looks like:

image
image1094×734 68.3 KB

Now I want the daylight hours – a decimal number that comes from my API – in the tooltip to be displayed in an hh:mm:ss format instead of the pure floating point number.

Here's the function node's code that sits directly in front of the chart node (sorry for the German comments :man_shrugging:):

const apiResponses = msg.payload;
const flatPayload = [];

apiResponses.forEach(response => {
    response.curve_data.forEach(pt => {
        // Präzise Umrechnung in Sekunden für hh:mm:ss
        const totalSeconds = Math.round(pt.daylight_hours * 3600);
        const h = Math.floor(totalSeconds / 3600);
        const m = Math.floor((totalSeconds % 3600) / 60);
        const s = totalSeconds % 60;

        // Formatierung nach ISO (24h)
        const timeStr = [h, m, s]
            .map(v => v.toString().padStart(2, '0'))
            .join(':');

        flatPayload.push({
            series: response.location,
            x: new Date(pt.date + "T12:00:00Z").getTime(),
            y: pt.daylight_hours,
            // Wir parken den Zeit-String im 'name' Attribut für den Tooltip {b}
            name: timeStr
        });
    });
});

msg.payload = flatPayload;

msg.ui_update = {
    chartOptions: {
        tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '< now what here??? >',
            valueFormatter: '< or is it this one? how? >'
        }
    }
};

// Ausgang 1: Chart | Ausgang 2: Spinner-Template (auf false setzen)
return [msg, { payload: false }];

So, you see, I already did the building of the string I want to see but I just don't know how to put it into the value region of the tooltip window. :disappointed_face:

The 2nd output of the function node just triggers the visibility of a spinner so that during the HTTP requests that actually get the data from the API the user sees that something is happening.

Here's a screenshot of a debug node's output that shows the data right after the function node:

image
image568×568 41.1 KB

We see that the duration formatting (key name) actually works.
But how can I replace the decimal duration in the tooltip with this string now?

In case it's important: The chart node is configured like this:

image
image1916×2522 309 KB

Thanks so much in advance!! :folded_hands:
Stefan.

2

Unfortunately, in order to do that, you would need to use tooltip.valueFormatter, I think, passing it a callback function to perform the formatting that you want. That doesn't work in chartOptions, but I don't know whether the problem is that the code in the ui-chart widget does not work with callback functions, or if there is a problem with valueFormatter, or possibly a combination of the two.

At the moment I don't know of a solution.

1 Like
3

Thanks, @Colin, for this response. Makes me slightly happy because now I know that it doesn't seem to be easy.
Maybe a template node can be of help here where we access the echarts DOM object and can pass/add/inject a callback function somehow? :face_with_monocle: