Discussion: position the legend right of the dygraph

[aslmx]

Hi,

i've been trying to rebuild the layout, so that the legend and the "autoupdate" form are right of the ping chart/graph.

I have two attempts; neither really makes me happy, yet.
DIsclaimer: I have not done very much in webdesign for more than 10 years. (And even before i would not have called myself a pro ;))

I'd like to hear your opinion, maybe you have a solution?

CSS Grid
This one uses CSS grid - which seems to be supported by most modern browsers.
https://github.com/aslmx/pingwatch/tree/modern_layout

It lets you resize the window, but if you make it smaller, you have to reload in order to get it properly sized (so window resize only works in one direction -> increase):

There is also flexgrid(?) which can be used for even more advanced results, but i did not yet understand it enough.

DIV

This one here is just a more structured (more divs) version, which more or less works.
https://github.com/aslmx/pingwatch/blob/webui/index.html

It is actually quite hard, as it is not known - without prior query of the db, to check the ping dests - how wide the legend should be. If you only ping "8.8.8.8" it won't take much space, but if you ping thatreallylonghostnamewhichmightexist.com, then it will not look that nice.

Others?
I've never worked with jQuery or other JS frameworks, but a very quick search suggests that these make it very easy to have a kind of "divider" where the user can dynamically size the legend "container" to fit his needs.

I'd appreciate your feedback - or solution ;-)

[fazalmajid]

Putting the legend on the right is not advisable in all circumstances, e.g. on an iPhone where real estate is at a premium, most likely the user will hold the phone in landscape orientation to best see the time series and you don't want to obstruct the data with metadata. I can only see legend on the right making sense if you have a browser maximized on an obnoxiously wide 16:9 screen (I usually split my 16:10 screen in two horizontally so I have two 16:5 portrait windows side by side).

So this layout should only be activated if the screen is wide enough to do so without compromising the information density. That responsive layout can be done using a media query, e.g. something like:

  div#legend span.highlight {
    background-color: #dddddd;
  }
  div#ping {
    width: 95vw;
    height: 50vh;
  }
  @media (min-width: 1200px) {
      div#ping {
        width: 65vw;
        height: 50vh;
      }
      div#legend {
        width: 30vw;
        height: 50vh;
      }
  }

which means if the viewport is at least 1200px wide, divide it 2/3-1/3 into graph and legend, otherwise keep the layout.

Similarly use can use rem units combined with media queries to make the text scaleup and down to fit the allocated legend space. If you look at my blog blog.majid.info you will see I use that trick to ensure the text adjusts so it has the optimal 10-12 words per line for legibility.

[aslmx]

Thanks for the suggestion.
I incorporated it and i think it looks okay on my laptop and smartphone.
Basically I put the media clause around the changes I made, so if the horizontal size exceeds 1080px it will put the legend on the right. If not, it is like the current master.
I chose 1080px because that seems to be a common size that is supported by phones that are not older than 3yrs old. See e.g. https://screensiz.es/phone

aslmx@2322483

Let me know if you think it is fit for a PR.

Screenshots: