🌟 Universal Functions and new plot types 🌟

[dbuezas]

The biggest and most complex release of the year!

Open for beta testing!

(v3.0.0 released)

• YAMLs of these examples here
• WIP readme here

What's Changed

Improvements

• Universal functions allow you to communicate across the yaml, combine datapoints from multiple entities into one, add the state of a sensor to the name of the trace, etc.
• show_value now can print out of the plotting area
• Semi-persistant cache: resetting the plot doesn't delete data anymore
• Efficiency: offset entities share the same cache with non-offset ones.
• Added almost all plotly plot types, including histograms, 3dscatter, surface, heatmap, piechart, ... Find inspiration here (maps not included)
• Added a delta filter (more to come!)
• New raw_plotly_config yaml option to disable all in-built defaults (useful for non-standard plots)
• Home Assistant themes' color variables available inside Universal Functions ($fn)
• Respect fixed range axes when pinch zooming
• Improved pinch to zoom algorithm
• Universal $fn functions can access other values from the yaml, even if those are also $fn computed.
• UI Informs of out of order $fn dependencies.
• $fn execution is strictly defined (top to bottom, shallow to deep, aka depth first)
• Errors in the yaml or functions don't interrupt plotting but are shown in the UI with intuitive phrasing.
• ...

Breaking Changes

The UI will let you know which plots are affected, how, and what to do.

• no_theme: renamed to ha_theme (inverted logic)
• no_default_layout: replaced with more general raw_plotly_config
• offset: renamed to time_offset to avoid conflicts with bar-offset
• lambda: removed, use filters instead
• significant_changes_only: removed, it is now always set to false
• minimal_response: removed, if you need attributes use the 'attribute' parameter instead.
• show_value.right_margin: removed, the values are shown out of the plotting area. use time_offsets to make space for them

Beware: beta version, APIs may change

Here is how to enable beta releases in HACS

Full Changelog: v2.1.0...v3.0.0-beta

---

This discussion was created from the release Universal Functions (`$fn`) and new plot types.

[MathieuIci]

Awesome release, thank you!

I no longer need to use the lovelace-card-templater 🤓

I discovered this card a few days ago and have been having lots of fun, particularly with the "fn" filter:

I have two questions:

1. With this new beta release, I had to add ha_theme: true to my card config for the Home Assistant dark theme to be applied. Is this expected?

2. I've gone trough the documentation many times and searched online for an answer, but couldn't figure out if there are any way to define "tap" actions on title/annotations/icons (/anything) to have them perform more-info, service call, etc. ? This would bring so many more possibilities, it's something I miss from the ApexCharts card.

Edit: Hmm, I think something like this feature enhancement request is what I am looking for.

Thanks again!

[dbuezas]

I can add that, but please try first wrapping your code in a setTimeout(()=>{...},100) first.
And put the code after the entities so to ensure the parser is done fetching. E.g:

entities:
  - entity: xxx
  - ...
run_last: $fn(.....

[octaviz]

Awesome release, thank you!

I no longer need to use the lovelace-card-templater 🤓

I discovered this card a few days ago and have been having lots of fun, particularly with the "fn" filter:

I have two questions:

1. With this new beta release, I had to add `ha_theme: true` to my card config for the Home Assistant dark theme to be applied.  Is this expected?

2. I've gone trough the documentation many times and searched online for an answer, but couldn't figure out if there are any way to define "tap" actions on title/annotations/icons (/anything) to have them perform more-info, service call, etc. ?  This would bring so many more possibilities, it's something I miss from the ApexCharts card.

Edit: Hmm, I think something like this feature enhancement request is what I am looking for.

Thanks again!

Hi!
How do you put the temperature value on the right side, thank you very much.

[dbuezas]

Glad to hear! You should try $ex too then! (the same but shorter)
By the way, this is not in beta anymore, make sure to update to the latest stable release (v3.3.1 at the moment).
The value at the top is probably a nicely styled indicator. See this example

[dbuezas]

And ha_theme: true is set by default and only disabled if you use raw_plotly_config: true. I thought I had added that to the readme. I'll take a PR for the readme :)

[dbuezas]

For the standard click handlers see this part of the documentation, and for a completely over the top hacked-to-perfection solution see this discussion

[dbuezas]

v3.0.0 (not beta) released!

[MathieuIci]

Mouhouhouhahaha, it works 😃! I didn't have to use setTimeout, I simply put the function all the way at the bottom of the yaml. You rock!

I created a bit of code that parses the list of configured entities and automatically adds event handlers without needing to manually specify each of them.

So now, by adding this at the end of the card yaml:

run_last: |-
  $fn ({getFromConfig}) => {
    const graphs = {};
    getFromConfig('entities').map(entity => {
      graphs[entity['entity']] = {
        graphElement: ('xaxis' in entity ? entity['xaxis'].replace(/^x1$/, 'x') : 'x') + ('yaxis' in entity ? entity['yaxis'].replace(/^y1$/, 'y') : 'y')
      };
    });
    const plotlyElement = document
      .querySelector("home-assistant").shadowRoot
      .querySelector("home-assistant-main").shadowRoot
      .querySelector("ha-panel-lovelace").shadowRoot
      .querySelector("hui-root").shadowRoot
      .querySelector("hui-masonry-view").shadowRoot
      .querySelector("plotly-graph").shadowRoot;
    Object.entries(graphs).forEach(([entity, config]) => {
      plotlyElement.querySelector(`svg.main-svg g.${config.graphElement} :first-child`).onclick = function (e) {
        const event = new Event("hass-more-info");
        event.detail = { entityId: entity };
        document.querySelector("home-assistant").dispatchEvent(event);
      };
    });
  }

Clicking on a graph pops up the more-info page corresponding to the entity using it. Tested on multiple vertically stacked subplots but it should also work with horizontal stacks.

Only caveat for this "automatic event-handler-creation" to work is that a graph can only use a single entity, but can use many attributes from this entity. It could be tweaked for other scenarios.

Your universal functions feature is so powerful 💪!

[dbuezas]

Very clever!
I didn't expect the getFromConfig param to be put to use so fast, I use it internally for all the defaults that depend on what the user did or the fetched data (e.g unit of measurement) and during fetching.
This is perfect for a Show and Tell!

Yeah, the universal functions took a lot of thought, but I think the result was worth it :)

[thecem]

I love this nice histogram funktions!!!

But in my case I´m getting this:

Why is the yellow BG so smal and not alligned to the map?

I use your $fn tab example.

[dbuezas]

Let's move this to a new Q&A discussion. I'll respond there

[dbuezas]

Please post your yaml as text there too

[dbuezas]

And I agree, the histograms are really cool! :)