New version of the diagrams all curved and oblique!!

[teluse7]

Current Behavior

The new version of the diagrams looks absolutely terrible. They're crooked, skewed, everything's all out of place, overlapping each other, and won't fit. Date formats are also no longer supported. Compare version 26 to the latest version 27.

Expected Behavior

Normal font, normal indentation, line breaks, date format support.

Steps To Reproduce

Attached are photos of the current version and the earlier 26 version.

Environment

• Dashboard version:
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[teluse7]

Аnd this is how it was

[teluse7]

Old version 26

[Steve-Mcl]

Date formats are also no longer supported

Have you formatted the date using the format documented here: https://dashboard.flowfuse.com/nodes/widgets/ui-chart#formatting-timestamps

If I recall correctly, there was an unavoidable change when the charting library was upgraded.

[colinl]

You would probably be better using Linear interpolation rather than Smooth. The Smooth algorithm used by eCharts (which the chart widget is now using) is not (IMO) ideal. The reason for moving to eCharts was that it is vastly more efficient than the previous library used, which suffered severely unless the charts were only updated at a slow rate.

[teluse7]

You would probably be better using Linear interpolation rather than Smooth. The Smooth algorithm used by eCharts (which the chart widget is now using) is not (IMO) ideal. The reason for moving to eCharts was that it is vastly more efficient than the previous library used, which suffered severely unless the charts were only updated at a slow rate.

What does interpolation have to do with it? Look at the screenshots of the new version.
The legend overlaps the grid, there's a huge empty space at the top, the titles don't fit anymore, and the date format at the bottom is no longer supported.

[colinl]

I was referring to your main point in the title of the issue - the curved and oblique smoothed lines.

@Steve-Mcl pointed out how to fix the timestamp formatting.

[Steve-Mcl]

@teluse7 please export a minimal demo flow (with sample data provided by an inject/function/template) that recreates this condition.

When we get around to improving this area it will be vital to have that available (it saves us guessing your dashboard settings, group size, widget size etc etc).

[colinl]

See also #1854 which references the legends overlapping the chart for small charts

[teluse7]

I was referring to your main point in the title of the issue - the curved and oblique smoothed lines.

@Steve-Mcl pointed out how to fix the timestamp formatting.

Crooked, skewed, everything's all out of place, overlapping each other, and won't fit. Date formats are also no longer supported.

I wrote this about the design.
I'll check the timestamp. But that's a small problem.

[teluse7]

See also #1854 which references the legends overlapping the chart for small charts

Everything was fine in the old version. The new version should support it.

[Steve-Mcl]

See also #1854 which references the legends overlapping the chart for small charts

Everything was fine in the old version. The new version should support it.

Yes, unfortunately this appears to be a trade off. The benefits of speed, features and usability vs the auto layout capabilities. We now have echarts and that isnt going to change any time soon so we will need to address the layout issues by some means.