FR plotly type heatmap

[emufan]

Would be great to have heatmaps as type as well. E.g. x-axsis days, y-axis hours or timeframes or .... The would give a great visual overview for temperatures, percentages, liters, etc. etc.

https://plotly.com/javascript/heatmaps/

[dbuezas]

Very interesting idea. I'll modify the lambdas so they can return z values to enable this. For standard cases, it would probably be better to control it through purely through yaml: would you post yaml examples of how you imagine the config could look like? I'm not sure of what to do with duplicated entries (e.g this Tuesday at 12 it was 20° and last Tuesday at 12 it was 15°)

[emufan]

I think the user should be able to set at least

a colorscale: https://plotly.com/javascript/colorscales/#custom-colorscale for z values

and then to start with days on x and hours on y. Later an improvement could be a yaml to define y (1-6, 6-12, 13-18, 18-0) to have only four blocks, etc.

The question for me is only, how you would get the z values. I looked for bar-charts in plotly-graph-card, but didn't find an example. Thought, that you are combining data as well.

Anyway, Great would be, if the user could set the aggregation: min, max, average, median or whatever for the z values of the coresponding y-frames.

I don't understand question around duplicated entries. Last Tuesday would be e.g. x2y12z15. This tuesday x9y12z15, if the chart would show starting with monday (x1).

[dbuezas]

Hey @emufan I'm working on a new feature that allows adding lambdas in any property of the entity. This will allow for what you are requesting. For the heat map, would you post a yaml of what you wish you could do so I can test this? (the yaml will obviously not work yet, but I'll fix it and test if it works in my unpublished version)

[emufan]

👍 I thought about something like this.

type: custom:plotly-graph
chart-type: heatmap
entity: sensor.processor_percent
days_to_show: 5d
hours_to_show: 0-24 # or 8-20, 12-20, ...
layout:
  xaxis-column: 1d # perhaps first fixed, because most intuitive
  yaxis-row: 4h # would give 6 rows, 4 roww, 2 rows in examples above
    # days and hours to show together with the ticks, will draw a grid with 5 columns and 6/4/2 rowws
  colorscale: 
    '0.0', 'rgb(165,0,38)'
    '0.555555555556', 'rgb(224,243,248)'
    '1.0', 'rgb(49,54,149)'

in this case, z have have to be the (lamda) average of the grid cells, so. e.h. today, 0-4h, 4-8 h, etc.,

[dbuezas]

When possible I try to avoid diverging from plotly's API, it's simpler for me and gives you more flexibility. How would you do this with plotly.ja directly?

[emufan]

Either I didn't get it or I don't know. 😥

My thought on the example is, that with these settings, the card would combine/calculate the values, which are then passed to plotly. Here from 5d,8-20,1d,4h example above. z is calclulated then from the values in x y timeframes

z: [[0,1, null, 0.5, 0, 1], [0.3, 1, 0.3, 0.7, 0.9], [0, 0, 1, 0.5, null]],
x: ['11.05.', '12.05.', '13.05.', '14.05.', '15.05.'],
y: ['8-12', '12-16', '16-20'],

according to https://plotly.com/javascript/heatmaps/#heatmap-with-categorical-axis-labels

[dbuezas]

It took me a year, but you can do it! Closed by the release of v3.0.0

[emufan]

It took me a year, but you can do it! Closed by the release of v3.0.0

This is sooo great.

I wonder if you have a simple example for such kind of heatmap?

With e.g. average temperature of time-frames in each block?

Paerhaps I have overseen is, but didn't fine it until now.

[dbuezas]

I don't. You'll need a bit of JavaScript. Can you code?

Here's a different example you can use as a base.

type: custom:plotly-graph-dev
title: 2D Histogram - Last 10 days
entities:
  - entity: sensor.openweathermap_pressure
    period: hour
    internal: true
    fn: $fn ({ xs, ys, vars }) => { vars.pressure = ys; vars.xs = xs; }
  - entity: sensor.openweathermap_temperature
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.pressure
    type: histogram2d
    mode: lines+markers
    line:
      color: null
hours_to_show: 240
raw_plotly_config: true
ha_theme: true
layout:
  margin:
    t: 10
    l: 70
    r: 0
    b: 70
  height: 500
  zaxis:
    title:
      text: Humidity
  yaxis:
    title:
      text: Pressure
  xaxis:
    title:
      text: Temperature
    autorange: true

[emufan]

Partly. Most of the time I'm able to search, adopt, afjust, ... - but need mostly a starting point. And for this, I only found examples for heatmaps with different entities on the axis and then a count on the z. As in your example.

But I would like to have only one entity, but different scales on x and y and then e.g. mean on z. Of for this, I don't have a fitting starting point, how to get the values, etc. Like in example above.

But of course, I will stay searching for examples. If you have a good one, I would really appreciate.

[dbuezas]

You can use the same entity in different rows and do the same as above :)

[emufan]

I know. But I have no starting point or idea how to calculate the mean for such z field, e.g. mean of temperature, Monday, 0-8h, Tuesday, 9-16h accordingly. or to set a scale of 7 entries on x and 3 on y as in example above. I will keep searching and trying to understand how it works. So either I get it working via try and error or someday, someone has a simple example to extend. We'll see. Until now, I understand the examples, but they are mostly from the same type and not fitting to my goto idea above. Thanks for your help anyway.

[dbuezas]

Ok, I'll give it a try

[dbuezas]

Here it is https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/215

[emufan]

Again, more than great. And surprisingly I understand, what you are doing. So the best starting point for further ideas and adoptions on my side! 👍