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

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

[ximex]

and here another iteration with some more improvements/fixes.

• Only 1 dark overlay (faster drawing, less dark where double dark overlay)
• 5min data was always dark if there is also long term history data is also available for this point

type: custom:plotly-graph
raw_plotly_config: true
hours_to_show: 1y
refresh_interval: 300
title: Max Solar Power [W]
layout:
  autosize: true
  margin:
    t: 0
    l: 55
    r: 45
    b: 65
  xaxis:
    title: Azimuth [°]
  yaxis:
    title: Elevation [°]
fn: |-
  $fn ({ vars }) => {
    const n = 12;
    const alphas = Array.from({ length: n }).map((_, i) => i / n);
    vars.interpolate = (arr) => (
      arr.flatMap((v, i) => (
        alphas.map((a) => (
          v * (1 - a) + arr[i + 1] * a
        ))
      ))
    );

    vars.getXYZ = () => {
        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));
        return { x, y, z };
    };
    
    vars.setData = (x, y, z, powerX, powerY, azimuthX, azimuthY, elevationX, elevationY) => {
      for (let i = 0; i < powerY.length; i++) {
        const pw = powerY[i];
        const ix = powerX[i];
    
        const azi = azimuthX.indexOf(ix);
        const eli = elevationX.indexOf(ix);
    
        if (azi >= 0 && eli >= 0) {
          const az = azimuthY[azi];
          const el = elevationY[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);
                }
              }
            }
          }
        }
      }
    };
  }
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 = vars.interpolate(xs_.slice(0, i));
        vars.azimuth_raw_y = vars.interpolate(ys.slice(0, i));
        vars.azimuth_raw_x_beams = xs_.slice(0, i);
        vars.azimuth_raw_y_beams = 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 = vars.interpolate(xs_.slice(0, i));
        vars.elevation_raw_y = vars.interpolate(ys.slice(0, i));
        vars.elevation_raw_x_beams = xs_.slice(0, i);
        vars.elevation_raw_y_beams = ys.slice(0, i);
      }
  - entity: sensor.pv_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.pv_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 = vars.interpolate(xs_.slice(0, i));
        vars.power_raw_y = vars.interpolate(ys.slice(0, i));
      }
  - entity: ""
    type: heatmap
    name: PV Power
    hoverongaps: false
    colorscale: Rainbow
    fn: |-
      $fn ({ vars }) => {
        const { x, y, z } = vars.getXYZ();
        
        vars.setData(x, y, z, vars.power_raw_x, vars.power_raw_y, vars.azimuth_raw_x, vars.azimuth_raw_y, vars.elevation_raw_x, vars.elevation_raw_y);
        vars.setData(x, y, z, vars.power_raw_x_, vars.power_raw_y_, vars.azimuth_raw_x_, vars.azimuth_raw_y_, vars.elevation_raw_x_, vars.elevation_raw_y_);

        vars.x = x;
        vars.y = y;
        vars.z = z;
      }
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
  - entity: ""
    type: heatmap
    name: PV Power Dark
    hoverinfo: skip
    showscale: false
    hoverongaps: false
    colorscale:
      - - 0
        - "#0004"
      - - 1
        - "#0004"
    fn: |-
      $fn ({ vars }) => {
        const { x, y, z } = vars.getXYZ();

        vars.setData(x, y, z, vars.power_raw_x, [...vars.power_raw_y].fill(0), vars.azimuth_raw_x, vars.azimuth_raw_y, vars.elevation_raw_x, vars.elevation_raw_y);
        vars.setData(x, y, z, vars.power_raw_x, vars.power_raw_y.map((y) => ((y > 0) ? NaN : 0)), vars.azimuth_raw_x_beams, vars.azimuth_raw_y_beams, vars.elevation_raw_x_beams, vars.elevation_raw_y_beams);
        vars.setData(x, y, z, vars.power_raw_x_, vars.power_raw_y_.map((y) => ((y > 0) ? NaN : 0)), vars.azimuth_raw_x_, vars.azimuth_raw_y_, vars.elevation_raw_x_, vars.elevation_raw_y_);

        vars.x_ = x;
        vars.y_ = y;
        vars.z_ = z;
      }
    x: $fn ({ vars }) => vars.x_
    "y": $fn ({ vars }) => vars.y_
    z: $fn ({ vars }) => vars.z_
  - entity: ""
    type: scatter
    name: Sun
    mode: markers
    marker:
      color: yellow
      size: 16
    x: |-
      $fn ({ vars }) => {
        const x = vars.azimuth_raw_y_.at(-1);
        const y = vars.elevation_raw_y_.at(-1);
        return y < 0 ? NaN : [x];
      }
    "y": |-
      $fn ({ vars }) => {
        const y = vars.elevation_raw_y_.at(-1);
        return y < 0 ? NaN : [y];
      }

[ximex]

best would be to store somewhere else the highest values for each x/y coordinate to don't loose the exact values of the long term history. does someone has an idea for that?