Echart - legend not optimized for mobile

[thomasss02]

Current Behavior

The chart Legend overlap the top of chart (more visible in mobile)

Expected Behavior

No response

Steps To Reproduce

No response

Environment

• Dashboard version: 1.27.1
• Node-RED version: 4.1.0

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[joepavitt]

This is an annoying one. eCharts doesn't automatically re-size the chart based on legend size, so we're likely to have to handle this ourselves.

For what it's worth, you can also update to 1.27.2 to get rid of those overlapping labels you have on the x-axis too.

[colinl]

The next release will significantly improve the legend layout (PR #1888 and #1890), so I think this can be closed.

[thomasss02]

I tested the new release 1.29.0 and It resolves the issue for 2 rows in the Legend. The issue persists if you have 3 or more rows in the legend

[teluse7]

The next release will significantly improve the legend layout (PR #1888 and #1890), so I think this can be closed.

Hello @colinl

You could move the title up a bit. I found a solution for very long titles. But the title is getting in the way. It could be moved up a bit.

[colinl]

@teluse7 Is that screenshot running code which includes the PRs that I linked to? If not did you read the description of the first PR I linked to, #1888?

[teluse7]

@teluse7 Is that screenshot running code which includes the PRs that I linked to? If not did you read the description of the first PR I linked to, #1888?

Apparently #1888 is included in the latest version. So my screenshot already has these changes.

[colinl]

Oh yes, you are right. I had forgotten that was in the current release. If you inspect the page in your browser developer tools console you will see that the title is already at the top of its container in the page. The space above is associated with the group title. If you configure the group not to show the title then the title will be right at the top.

[teluse7]

Oh yes, you are right. I had forgotten that was in the current release. If you inspect the page in your browser developer tools console you will see that the title is already at the top of its container in the page. The space above is associated with the group title. If you configure the group not to show the title then the title will be right at the top.

So, can't you just lift it a little bit? It only needs a tiny bit.

[colinl]

It is already at the top of the container it is in, so no, it cannot move up. The container could be moved up by reducing the space for the group title, and lowering everything else in the container. The solution to this is to allow the user to directly access the underlying the echarts settings and then you would be able to play with layout however you liked. There is an open issue (#1832) for this and I have started looking at it but I can't guarantee when it will be completed.

[teluse7]

It is already at the top of the container it is in, so no, it cannot move up. The container could be moved up by reducing the space for the group title, and lowering everything else in the container. The solution to this is to allow the user to directly access the underlying the echarts settings and then you would be able to play with layout however you liked. There is an open issue (#1832) for this and I have started looking at it but I can't guarantee when it will be completed.

So, Can you raise the container itself a little higher? Just a little bit. Just a temporary solution until the settings are ready.

[colinl]

Raising the container may mess up other uses layouts as it will affect all pages.

[colinl]

As a short term solution you could easily build a modified version of the dashboard for your own use. The instructions for doing that are here. Then if you look at the PR's I linked to you will see what to tweak to adjust the layout.

[teluse7]

As a short term solution you could easily build a modified version of the dashboard for your own use. The instructions for doing that are here. Then if you look at the PR's I linked to you will see what to tweak to adjust the layout.

In which code file and where exactly is this height specified? I'd rather patch it directly in the Docker executable.

[colinl]

I'd rather patch it directly in the Docker executable

I don't think you can, it is built into the dashboard module. The PR tells you where the original source file is.

[teluse7]

I'd rather patch it directly in the Docker executable

I don't think you can, it is built into the dashboard module. The PR tells you where the original source file is.

Unfortunately, I'm not a JavaScript programmer and don't know where the PR is, how to fork anything, etc. But if I knew which source file and which line sets the height of this container, I could find the same thing, but packaged, inside Docker, and patch it. I solved the previous problem exactly this way for six months. For this, the knowledge of the 5th grade of our regular school is enough

[colinl]

The changes you need are in the file node-red-dashboard/ui/src/widgets/ui-chart/UIChart.vue, but as I said, I don't think you will find that in your Docker executable. It is compiled into files in node_modules/@flowfuse/node-red-dashboard/dist/assets. The source can be seen at https://github.com/FlowFuse/node-red-dashboard/blob/main/ui/src/widgets/ui-chart/UIChart.vue. If you can find that in the executable I can suggest what changes might do what you want.

[teluse7]

The changes you need are in the file node-red-dashboard/ui/src/widgets/ui-chart/UIChart.vue, but as I said, I don't think you will find that in your Docker executable. It is compiled into files in node_modules/@flowfuse/node-red-dashboard/dist/assets. The source can be seen at https://github.com/FlowFuse/node-red-dashboard/blob/main/ui/src/widgets/ui-chart/UIChart.vue. If you can find that in the executable I can suggest what changes might do what you want.

Thank You! I know about "node_modules/@flowfuse/node-red-dashboard/dist/assets" File is "abracadabra"index.js 😀

UIChart.vue is very important information. I assumed it was in this file again. And in which line is the height value for this container set? Last time, I found it by trial and error, but that search took 2.5 weeks. If you know the line and can point me to it, I'd be very grateful. It would definitely be quicker.

[colinl]

The height for the container is all the space below the group title. That is not what you need to change. I think what you need to do is to move the other things down within the container and shrink the chart. I can have a look tomorrow to suggest what. Though if you look at the PRs I linked to you should be able to work it out for yourself.

[colinl]

Have you managed to work it out, looking at the changes in the PR? I would have thought that looking at the changes there would have got you most of the way there.

[teluse7]

Have you managed to work it out, looking at the changes in the PR? I would have thought that looking at the changes there would have got you most of the way there.

Unfortunately, I don't know where to look for changes in PR.

[colinl]

The PR I linked to is #1888 which links to the changes made https://github.com/FlowFuse/node-red-dashboard/pull/1888/commits/8298445810d8822bf94204bc2dcbd53dd3cce237

[teluse7]

The PR I linked to is #1888 which links to the changes made 8298445

Can you just tell me the line number in UIChart.vue where I would simply type "+ xx" (some value) and the container would move up a bit? You know where it is, but it would take me too long to find it.

[colinl]

I don't know where it is I will have to go an look at the PR and look at the code. The line numbers are approximate as there may have been some changes since the version that you have. At line 229 is

                const options = {
                    title: {
                        text: this.props.label,
                        top: 0,

The top: 0 means that the top of the title should be 0 px down from the top, so I guess you don't want to change that. At 249 is

                    legend: {
                        show: showLegend,
                        top: this.hasTitle ? 20 : 0,

That sets where the top of the legend is. It says if there is a title then the top of the legend should be 20 down, if there isn't a title then it should be at the top (0). I guess you want to increase the 20 a bit. Then back at 243 is

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '0%',
                        top: this.hasTitle ? (this.props.showLegend ? 70 : 30) : (this.props.showLegend ? 45 : 0)

This sets where the top of the chart grid is. The code says: If there is a title then if showLegend is selected then set the top of the grid 70 down (leaving room for title and legend else (so no legend) then set the top at 30 (leaving room for just the title Otherwise (so no title) then if showLegend is selected then set the top of the grid 45 down (leaving room for the legend else (so no legend) then set the top at 0 (as no legend or title).

[teluse7]

The PR I linked to is #1888 which links to the changes made 8298445

Thank You!

But everything you sent refers to the contents inside the container. How do I raise the container itself? If I raise it higher, the title will remain in place, but the legend and grid will be lowered by how much the container is raised.

[colinl]

Reduce the space round the group name using a css template.

[colinl]

But that will move everything up and increase the size of the chart grid. Then you will need to make the changes I suggested.

[teluse7]

Reduce the space round the group name using a css template.

So I don’t understand where to set it.

[colinl]

I suggest doing the code changes first, to make sure that works.

To reduce the space round the group name use the browser developer tools to find the css you need to adjust. Then use a template in CSS mode to change it. There are very many posts in the forum about using a template to adjust css. It is not something that I do often so I would have to remind myself how to do it.

[teluse7]

I suggest doing the code changes first, to make sure that works.

To reduce the space round the group name use the browser developer tools to find the css you need to adjust. Then use a template in CSS mode to change it. There are very many posts in the forum about using a template to adjust css. It is not something that I do often so I would have to remind myself how to do it.

It turns out that there is no way to move all this up in the UIChart.vue file?

[colinl]

No. That file defines what goes inside the group container.