[Bug]: Set clockwise direction for pie chart

[audelorAd]

What is the bug?

When setting up a pie chart, the result is not really understandable because of categories order isn't in clockwise direction.

However I saw in lizmap doc :

For pie chart : the items in the legend are ordered by X as a default behaviour.

Pie chart configuration seems to be hardcoded in Lizmap and direction: 'clockwise' parameter is missing.

See below expected result at the bottom :

Steps to reproduce the issue

1. Set up a pie chart
2. See result in dataviz panel
3. Categories order is well but direction is counterclockwise

Versions

Versions :

• Lizmap Web Client : 3.5.4
• Lizmap plugin : 3.8.3
• QGIS Desktop : 3.22.4
• QGIS Server: 3.22.4

Check Lizmap plugin

• [X] I have done the step just before in the Lizmap QGIS desktop plugin before opening this ticket. Otherwise, my ticket is not considered valid and might get closed.

QGIS server version, only if the section above doesn't mention the QGIS Server version

No response

Operating system

windows 10

Browsers

Firefox

Browsers version

91.12.0esr

Relevant log output

No response

[nboisteault]

Does those link help ?

• https://docs.lizmap.com/current/en/publish/lizmap_plugin/dataviz.html#json-layout
• https://docs.lizmap.com/current/en/publish/lizmap_plugin/dataviz.html#other-customisation-with-javascript-scripts

[audelorAd]

Indeed it's working fine in a Javascript Script !! (At the ticket opening Direction of a pie chart was not a parameter accessible in json layout of a plot)

However I can't figure out how to also modify plot in popup. See pictures, on the right (dataviz panel) plot well in clockwise direction, on the left (popup panel) not in clockwise direction

[nboisteault]

It is a little bit different with popups, here is a quick hack to get the idea:

lizMap.events.on({
    lizmappopupdisplayed: () => {
        // Wait a bit for the plot to be ready
        // TODO: use https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver instead
        setTimeout(() => {

            // Use querySelectorAll if there are several plots
            // and choose which plot to restyle
            const plot = document.querySelector('.js-plotly-plot');

            Plotly.restyle( plot, {
                'marker.color': 'red'
            }); 
        }, 500);
    }
});

[github-actions[bot]]

This issue is missing some feedbacks. 👻 Please have a look to the discussion, thanks. 🦎

[audelorAd]

It is a little bit different with popups, here is a quick hack to get the idea:

lizMap.events.on({
    lizmappopupdisplayed: () => {
        // Wait a bit for the plot to be ready
        // TODO: use https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver instead
        setTimeout(() => {

            // Use querySelectorAll if there are several plots
            // and choose which plot to restyle
            const plot = document.querySelector('.js-plotly-plot');

            Plotly.restyle( plot, {
                'marker.color': 'red'
            }); 
        }, 500);
    }
});

Thanks. It's working in popup, but it's hard to make it works on differents plots in a same popup (especially when when there are different kind of plots). Indeed plots in popup are harder to select in JS than in dataviz panel where plots have an id easy to identify.

[github-actions[bot]]

This issue is missing some feedbacks. 👻 Please have a look to the discussion, thanks. 🦎