Max Solar Power Heatmap over Azimut and Elevation

[jandechent]

Please read entire post. Below others significantly improved the code - including but not limited to long term statistics.

Do you want to see, what your best solar power was over azimut and elevation? Then enjoy this:

Also inspired by 215

PS: Because the power is NaN at night, somehow the array azimuth/elevation compared to power had not the same length, therefore I passed on the xs'es to sort the power values in manually.

type: custom:plotly-graph
raw_plotly_config: true
hours_to_show: 32h
entities:
  - entity: sensor.sun_solar_azimuth
    internal: true
    period: 5minute
    fn: >-
      $fn ({ xs, ys, vars }) => { vars.azimuth_raw_y = ys; vars.azimuth_raw_x
      =   xs.map(x => x.getTime());  }
  - entity: sensor.sun_solar_elevation
    internal: true
    period: 5minute
    fn: >-
      $fn ({ xs, ys, vars }) => { vars.elevation_raw_y = ys;
      vars.elevation_raw_x = xs.map(x => x.getTime());  }
  - entity: sensor.solar_power
    internal: true
    period: 5minute
    fn: >-
      $fn ({ xs, ys, vars }) => { vars.power_raw_y = ys;  vars.power_raw_x =
      xs.map(x => x.getTime());  }
  - entity: ''
    fn: |
      $fn ({ xs, ys, vars }) => {
          // choose spacing, not every value works somehow
          const dx = 8;
          const dy = 5;
          
          // first construct the heatmap arrays x,y,z 
          //                           RANGE                     // START
          const x = Array.from({length: (270/dx)+1 }, (e, i) =>  40 +  dx*i).map(x=>x);
          const y = Array.from({length: (60/dy)+1 }, (e, i) => -0+dy*i).map(x=>x);
          let z   = Array(y.length).fill(null).map(() => Array(x.length).fill(NaN));
          
          // we want to take care of every power value 
          for (let i = 0; i < vars.power_raw_y.length; i++) {
              let pw = vars.power_raw_y[i];
              let ix = vars.power_raw_x[i];

              // because the power is NAN at night, the arrays are not the 
              // same length, so we have to time sync:
              azi = vars.azimuth_raw_x.indexOf(ix)
              eli = vars.elevation_raw_x.indexOf(ix)

              if ((azi>=0)&(eli>=0)){
                let az = vars.azimuth_raw_y[azi];
                let el = vars.elevation_raw_y[eli];;
                
                // sort this in in the heatmap:
                pos_az = x.indexOf(Math.round(az/dx)*dx);
                pos_el = y.indexOf(Math.round(el/dy)*dy);
                
                if ((pos_az>=0)&(pos_el>=0)){
                  if (isNaN(z[pos_el][pos_az])){
                     z[pos_el][pos_az] = pw
                  } else {
                     z[pos_el][pos_az] = Math.max(z[pos_el][pos_az], pw)
                  }
                }
              }
          }
          vars.x = x;
          vars.y = y;
          vars.z = z;
        };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    type: heatmap
    hoverongaps: false
title: Max Solar Power [W]
layout:
  height: 300
  margin:
    t: 0
    b: 45
    l: 45
    r: 40
  yaxis:
    title: Elevation[°]
  xaxis:
    title: Azimuth [°]

[dbuezas]

Really cool!
You can also use resample to align series (entities) with different timestamps.

[jandechent]

Yeah, resampling didnt work for me somehow. But I have to use python anyway, as the 5minute resampling is (as per docs) limited in loading historic data. I want to get data from the last years into one graph.

[dbuezas]

I mean the resampling filter

[jandechent]

Question: Can I somehow store my z array is an entity? Because the 5 minutes are limited by the history and I do not not want to prolong it. But if I could load and store the z over time, I could build my long terms plot without so much overhead computation

[dbuezas]

Yes, home assistant can do that: https://www.home-assistant.io/integrations/template/

[Chavife]

Is there a way to render a cross or dot for the current Elevation/Azimuth on top of the heatmap?

[jandechent]

Totally. I’m traveling so I can only past a bit ugly - entity: sensor.sun_solar_elevation x: >- $fn ({ hass }) => [1,1].map(x=>parseFloat(hass.states['sensor.sun_solar_azimuth'].state)) 'y': >- $fn ({ hass }) => [1,1].map(x=>parseFloat(hass.states['sensor.sun_solar_elevation'].state)) z: >- $fn ({ hass }) => [1,1].map(x=>parseFloat(hass.states['sensor.solar_power'].state)) type: scatter mode: markers marker: size: - 15 - 7 color: - black - yellow symbol: - circle - star Ladislav Feldsam ***@***.***> schrieb am Di. 21. Mai 2024 um 09:50:

…

Is there a way to render a cross or dot for the current Elevation/Azimuth on top of the heatmap? — Reply to this email directly, view it on GitHub <#408 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAS47MV7W5TWVTUMN3RVSELZDL4FZAVCNFSM6AAAAABGGBGIYGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TKMBVGEZDA> . You are receiving this because you authored the thread.Message ID: <dbuezas/lovelace-plotly-graph-card/repo-discussions/408/comments/9505120@ github.com>

[ximex]

i have improved your code a bit.
now it also supports long time statistics (this are this beams in the picture as there is only data for each full hour)
and the resolution is now always 1° in each direction. with a loop i could fill the gaps

type: custom:plotly-graph
raw_plotly_config: true
hours_to_show: 1y
refresh_interval: 5m
title: Max Solar Power [W]
layout:
  autosize: true
  margin:
    t: 0
    l: 55
    r: 45
    b: 65
  xaxis:
    title: Azimuth [°]
  yaxis:
    title: Elevation [°]
entities:
  - entity: sensor.sun_solar_azimuth
    internal: true
    period: 5minute
    fn: |-
      $fn ({ xs, ys, vars }) => {
        vars.azimuth_raw_x_ = xs.map(x => x.getTime());
        vars.azimuth_raw_y_ = ys;
      }
  - entity: sensor.sun_solar_azimuth
    internal: true
    statistic: mean
    period: hour
    fn: |-
      $fn ({ xs, ys, vars }) => {
        const xs_ = xs.map(x => x.getTime());
        const i = xs_.findIndex(x => x > vars.azimuth_raw_x_[0]);
        vars.azimuth_raw_x = xs_.slice(0, i);
        vars.azimuth_raw_y = ys.slice(0, i);
      }
  - entity: sensor.sun_solar_elevation
    internal: true
    period: 5minute
    fn: |-
      $fn ({ xs, ys, vars }) => {
        vars.elevation_raw_x_ = xs.map(x => x.getTime());
        vars.elevation_raw_y_ = ys;
      }
  - entity: sensor.sun_solar_elevation
    internal: true
    statistic: mean
    period: hour
    fn: |-
      $fn ({ xs, ys, vars }) => {
        const xs_ = xs.map(x => x.getTime());
        const i = xs_.findIndex(x => x > vars.elevation_raw_x_[0]);
        vars.elevation_raw_x = xs_.slice(0, i);
        vars.elevation_raw_y = ys.slice(0, i);
      }
  - entity: sensor.solar_power
    internal: true
    period: 5minute
    fn: |-
      $fn ({ xs, ys, vars }) => {
        vars.power_raw_x_ = xs.map(x => x.getTime());
        vars.power_raw_y_ = ys;
      }
  - entity: sensor.solar_power
    internal: true
    statistic: mean
    period: hour
    fn: |-
      $fn ({ xs, ys, vars }) => {
        const xs_ = xs.map(x => x.getTime());
        const i = xs_.findIndex(x => x > vars.power_raw_x_[0]);
        vars.power_raw_x = xs_.slice(0, i);
        vars.power_raw_y = ys.slice(0, i);
      }
  - entity: ""
    type: heatmap
    hoverongaps: false
    colorscale: Rainbow
    fn: |-
      $fn ({ xs, ys, vars }) => {
        const x = Array.from({ length: 220 + 1 }, (e, i) => 70 + i);
        const y = Array.from({ length:  55 + 1 }, (e, i) =>  0 + i);
        const z = Array(y.length).fill(null).map(() => Array(x.length).fill(NaN));

        for (let i = 0; i < vars.power_raw_y.length; i++) {
          const pw = vars.power_raw_y[i];
          const ix = vars.power_raw_x[i];

          const azi = vars.azimuth_raw_x.indexOf(ix);
          const eli = vars.elevation_raw_x.indexOf(ix);

          if (azi >= 0 && eli >= 0) {
            const az = vars.azimuth_raw_y[azi];
            const el = vars.elevation_raw_y[eli];

            const pos_az_min = x.indexOf(Math.floor(az));
            const pos_el_min = y.indexOf(Math.floor(el));
            const pos_az_max = x.indexOf(Math.ceil(az));
            const pos_el_max = y.indexOf(Math.ceil(el));

            if (pos_az_min >= 0 && pos_el_min >= 0 && pos_az_max >= 0 && pos_el_max >= 0) {
              for (let pos_az = pos_az_min; pos_az <= pos_az_max; pos_az++) {
                for (let pos_el = pos_el_min; pos_el <= pos_el_max; pos_el++) {
                  if (isNaN(z[pos_el][pos_az])) {
                    z[pos_el][pos_az] = pw;
                  } else {
                    z[pos_el][pos_az] = Math.max(z[pos_el][pos_az], pw);
                  }
                }
              }
            }
          }
        }
        for (let i = 0; i < vars.power_raw_y_.length; i++) {
          const pw = vars.power_raw_y_[i];
          const ix = vars.power_raw_x_[i];

          const azi = vars.azimuth_raw_x_.indexOf(ix);
          const eli = vars.elevation_raw_x_.indexOf(ix);

          if (azi >= 0 && eli >= 0) {
            const az = vars.azimuth_raw_y_[azi];
            const el = vars.elevation_raw_y_[eli];

            const pos_az_min = x.indexOf(Math.floor(az));
            const pos_el_min = y.indexOf(Math.floor(el));
            const pos_az_max = x.indexOf(Math.ceil(az));
            const pos_el_max = y.indexOf(Math.ceil(el));

            if (pos_az_min >= 0 && pos_el_min >= 0 && pos_az_max >= 0 && pos_el_max >= 0) {
              for (let pos_az = pos_az_min; pos_az <= pos_az_max; pos_az++) {
                for (let pos_el = pos_el_min; pos_el <= pos_el_max; pos_el++) {
                  if (isNaN(z[pos_el][pos_az])) {
                    z[pos_el][pos_az] = pw;
                  } else {
                    z[pos_el][pos_az] = Math.max(z[pos_el][pos_az], pw);
                  }
                }
              }
            }
          }
        }
        vars.x = x;
        vars.y = y;
        vars.z = z;
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z

[TheSerapher]

This is amazing, didn't know I needed this 😃 Thanks for this, would never have been able to imagine this would be possible!

[TheSerapher]

One thing I noticed that could be improved: Adjust the tooltip to show the time and power when hovering over a tile. Minor thing really but sometimes useful? Tried it myself and failed miserably...

[ximex]

should be possible but you have to keep in mind that each box/pixel shows only the highest value but there could be more values per box/pixel

[TheSerapher]

I think that should be fine, at least some information to get out of a pixel is better than just a x/y/z coordinate - Z probably already is the power measured at that location but some better text could be helpful for some.

[dbuezas]

If needed you could add extra information about each pixel via customdata and then use it for the tooltip.