How to optimize show_value text position?

[r-jean-pierre]

Hi,

I saw some examples of time_offset hacks to adapt the horizontal shift of show_value position,
but until now it seems they are somehow "hardcoded" as they make use of hours_to_show
So the question is how to adapt to dynamic zoom or clicks on rangeselector to make show_value location not to inside the graph or to inside the right margin? Of course it would have been wonderful to be set in pixels, but I doubt it is possible

I suppose it has something to do with time_offset ex and maybe visible_range and some maths about proportionality, but after some toying, I failed (as usual...)

If someone can give an hint, it would be greatly appreciated!

[dbuezas]

Time offsets are indeed the only way I found to do it, but you could also try changing the anchoring with https://plotly.com/javascript/reference/scatter/#scatter-textposition

[r-jean-pierre]

I tried one or two tricks like this but, it remains "static"

I had this feeling to use something like:

time_offset: $ex (get('visible_range').end - get('visible_range').begin) * magicnumber

get('visible_range') returns a tuple, i just don't know how to access first&2nd element (tried [], .at() .end .begin)

[dbuezas]

Oh, I misunderstood you completely.
get('visible_range') just returns an array, so [] or .at() would work, except that visible_range internally depends on time_offset, so it won't work if you add another dependency the other way around.

What you could do instead is use the custom buttons from here #231 (comment) and change the zoom function to

    const percentage = 10/100 // 10% of the x axis reserved for show_value
    const ms = 1000*60*60*h;
    const padding = ms * percentage;
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {
            "xaxis.range": [Date.now()-ms, Date.now() + padding]
          }
        }
      ],
      label,
      method: "animate",
    })

[r-jean-pierre]

Thanks for the explanation, before I try your code, maybe I was not clear enough, and maybe a picture is better than a text:

I used time_offset: 20m to make the show_value location at a fancy place (for a hours_to_show: 8h), but it's hardcoded in the yaml

If I zoom out, let's say 1day, the time_offset is not enough

and I cut the 186mg/dL
It's probably time_offset: 60m for that case
etc
etc

so the longer visible_range is, the greater time_offset must be

[dbuezas]

yes, II think I understood well this time :)
The problem with trying to make time_offset depend on visible_range, is that there is an internal dependency that goes the other way around: When you use time_offset, it is used to shift visible_range internally. This means that this card will try to access time_offset to compute visible_range, but you made it depend on the offset, so it needs the first to compute the latter, and the latter to compute the first.

As it is implemented at the moment: Chicken and egg.

Hopefully the custom approach above works for you, because it will be you the one setting the visible_range with the buttons.
BTW, you will still need timie_offset to make space for the values before you click any zoom buttons.

[r-jean-pierre]

So, I confirm, it works!
I removed rangeselector, added updatemenus, put a fn such:

fn: |
  $fn({getFromConfig, vars})=> {
    const percentage = 0.06;
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {
            "xaxis.range": [Date.now()-3600000*h, Date.now() + 3600000*h*percentage],
          }
        }
      ],
      label,
      method: "animate",
    })
  }

[dbuezas]

That looks perfect!

[r-jean-pierre]

Just for my own knowledge, inside the $fn({getFromConfig, vars}), is there any way to have some information such as the HA card width or the browser/screenh width?

[dbuezas]

You could get('layout.width'), if I recall correctly that's computed before the yaml is parsed. Or even grab the dom element with document.querySelector.

[r-jean-pierre]

It seems to work within a $ex command, but not in $fn , is there a specific syntax to get the value inside $fn({getFromConfig, vars}) ?

[dbuezas]

get and getFromConfig are just aliases (exactly the same)
$ex and $fn are also the same, $ex is replaced with "$fn ({ getFromConfig, get, hass, vars, path, css_vars, xs, ys, statistics, states, meta }) => "
See here: https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/src/parse-config/parse-config.ts#L120

This means that you can $fn ({get, vars}) => get('layout.width')

[r-jean-pierre]

And now everything is clear, thanks!