Giter Club home page Giter Club logo

Comments (15)

dbuezas avatar dbuezas commented on May 16, 2024 1

Here it is
#215

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024 1

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! 👍

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

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°)

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024

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).

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

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)

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024

👍
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.,

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

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?

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024

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

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

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

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024

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?

image

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

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

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

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

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024

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.

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

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

from lovelace-plotly-graph-card.

emufan avatar emufan commented on May 16, 2024

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.

from lovelace-plotly-graph-card.

dbuezas avatar dbuezas commented on May 16, 2024

Ok, I'll give it a try

from lovelace-plotly-graph-card.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.