Heatmap of 30-Panel Solar Array's Current States

[kaijk]

UPDATED: We have a solution. Big THANKS to @dbuezas for this awesome card and your help with the solution.

Plot a solar panel array's physical layout as a heat map based on the current states of say 30 panels. Each entity is its own cell in the heat map.

The matrix layout is categorical with three rows and 11 columns (cells [1,2], [1,3], and [6,1] are empty).
Here is the concept

Here is the plot showing some evening shading from the west and some overall production decline due to sun angle and a very high pollen count right now that has blanketed the panels. Time to hose them down

Here is the code with a couple of slight tweaks from what deuezas came up with below. I wanted to round the values to integers which required testing for empty cells. That's about it.

type: custom:plotly-graph
title: Solar Panels (Watts)
fn: | # fn has no meaning, this is just used to construct the panels matrix once an store them in vars
  $ex {
    vars.z = [[
          // row 3
          '', 'sensor.power_1_2_8', 'sensor.power_1_2_7', 'sensor.power_1_2_6', 'sensor.power_1_2_2', 'sensor.power_1_2_1',
              'sensor.power_1_1_9', 'sensor.power_1_1_8', 'sensor.power_1_1_7', 'sensor.power_1_1_3', 'sensor.power_1_1_2',
        ],[
          // row 2
          '', 'sensor.power_1_2_9',  'sensor.power_1_2_5', 'sensor.power_1_2_4', 'sensor.power_1_2_3', 'sensor.power_1_2_15',
              'sensor.power_1_1_10', 'sensor.power_1_1_6', 'sensor.power_1_1_5', 'sensor.power_1_1_4', 'sensor.power_1_1_1',
        ],[
          // row 1
          'sensor.power_1_2_10', 'sensor.power_1_2_11', 'sensor.power_1_2_12', 'sensor.power_1_2_13', 'sensor.power_1_2_14', '',
          'sensor.power_1_1_11', 'sensor.power_1_1_12', 'sensor.power_1_1_13', 'sensor.power_1_1_14', 'sensor.power_1_1_15',
        ]].map(row=>
          row.map(sensor=>
            isNaN(hass.states[sensor]?.state) ? '' : Math.round(hass.states[sensor]?.state) // Handles empty cells
      )
    )
  }
entities:
  - entity: ""
    z: "$ex vars.z"
    text_auto: true
    type: heatmap
    hoverongaps: false
    xgap: 2
    ygap: 2
    zmax: 400
    zmin:   0
raw_plotly_config: true
refresh_interval: 180 # Data actually updated every 15m
layout:
  annotations: |
    $ex vars.z.flatMap((row, y) => row.map((text="", x) => ({
      x,
      y,
      text,
      font: {
        family: 'Arial',
        size:   '14',
        color:  'black'
      },
      showarrow: false,
    })))
  yaxis:
    showgrid: false
    zeroline: false
    showticklabels: false
    visible: false

  xaxis:
    showgrid: false
    zeroline: false
    showticklabels: false
    ticks: false
    visible: false
  height: 300
  margin:
    t: 20
    l: 20
    b: 20

[dbuezas]

That's a really cool use case, I'd really like to see the result!
I suggest you

1. Construct a matrix with the entity IDs of all panels
2. Use map to transform it into a matrix of states using the hass object (e.g hass.states[entity_ids[i][j]].state)
3. Post yaml and screenshots :)

[dbuezas]

To handle the missing panels, just use empty strings as ids and use the "optional chaining operator" (question mark)

hass.states[entity_ids[i][j]]?.state

[dbuezas]

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature

    z: |
      $fn ({ hass }) => {
        const panels = [[
          // row 3
          'sensor.teich_temperature','sensor.living_thermometer_temperature', // add more columns
        ],[
          // row 2
          'sensor.outside_temperature','sensor.keller_temperature',
        ],[
          // row 1
          'sensor.garden_temperature','sensor.senseair_temperature',
        ]]
        return panels.map(row=> 
          row.map(sensor=>
            hass.states[sensor]?.state
          )
        );
      }
    type: heatmap
    hoverongaps: false
raw_plotly_config: true
title: Solar Panels
layout:
  height: 300
  margin:
    t: 20

[kaijk]

Thank You!
This works. However, I thought I could use the same logic to show the current state in each cell with the text parameter. No joy there yet, but major progress. (the commented out text sting array doesn't show up either). It seems that text: was added in Plotly V5.5.0, FWIW

title: Solar Panels (Watts)
entities:
  - entity: ""
    z: |
      $fn ({ hass }) => {
        const panels = [[
          // row 3
          '""', 'sensor.power_1_2_8', 'sensor.power_1_2_7', 'sensor.power_1_2_6', 'sensor.power_1_2_2', 'sensor.power_1_2_1',
                'sensor.power_1_1_9', 'sensor.power_1_1_8', 'sensor.power_1_1_7', 'sensor.power_1_1_3', 'sensor.power_1_1_2',
        ],[
          // row 2
          '""', 'sensor.power_1_2_9',  'sensor.power_1_2_5', 'sensor.power_1_2_4', 'sensor.power_1_2_3', 'sensor.power_1_2_15',
                'sensor.power_1_1_10', 'sensor.power_1_1_6', 'sensor.power_1_1_5', 'sensor.power_1_1_4', 'sensor.power_1_1_1',
        ],[
          // row 1
          'sensor.power_1_2_10', 'sensor.power_1_2_11', 'sensor.power_1_2_12', 'sensor.power_1_2_13', 'sensor.power_1_2_14', '""',
          'sensor.power_1_1_11', 'sensor.power_1_1_12', 'sensor.power_1_1_13', 'sensor.power_1_1_14', 'sensor.power_1_1_15',
        ]]
        return panels.map(row=>
          row.map(sensor=>
            hass.states[sensor]?.state
          )
        );
      }
    text: |
      $fn ({ hass }) => {
        const labels = [[
          // row 3
          '""', 'sensor.power_1_2_8', 'sensor.power_1_2_7', 'sensor.power_1_2_6', 'sensor.power_1_2_2', 'sensor.power_1_2_1',
                'sensor.power_1_1_9', 'sensor.power_1_1_8', 'sensor.power_1_1_7', 'sensor.power_1_1_3', 'sensor.power_1_1_2',
        ],[
          // row 2
          '""', 'sensor.power_1_2_9',  'sensor.power_1_2_5', 'sensor.power_1_2_4', 'sensor.power_1_2_3', 'sensor.power_1_2_15',
                'sensor.power_1_1_10', 'sensor.power_1_1_6', 'sensor.power_1_1_5', 'sensor.power_1_1_4', 'sensor.power_1_1_1',
        ],[
          // row 1
          'sensor.power_1_2_10', 'sensor.power_1_2_11', 'sensor.power_1_2_12', 'sensor.power_1_2_13', 'sensor.power_1_2_14', '""',
          'sensor.power_1_1_11', 'sensor.power_1_1_12', 'sensor.power_1_1_13', 'sensor.power_1_1_14', 'sensor.power_1_1_15',
        ]]
        return labels.map(row=>
          row.map(sensor=>
            hass.states[sensor]?.state
          )
        );
      }

    type: heatmap
    hoverongaps: false
    xgap: 2
    ygap: 2
    zmax: 400
    zmin:   0
    #text:  [[ '1_1_1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11'],
    #        [ '1_1_1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11'],
    #        [ '1_1_1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11']]
raw_plotly_config: true
#hours_to_show: 240
refresh_interval: 90
layout:
  height: 300
  margin:
    t: 20

[dbuezas]

That was tricky, and fun!

type: custom:plotly-graph
fn: | # fn has no meaning, this is just used to construct the panels matrix once an store then in vars
  $ex {
    vars.z = [[
      // row 3
      '','sensor.teich_temperature','sensor.living_thermometer_temperature', // add more columns
    ],[
      // row 2
      'sensor.outside_temperature','','sensor.keller_temperature',
    ],[
      // row 1
      '', 'sensor.garden_temperature','sensor.senseair_temperature',
    ]].map(row=> 
      row.map(sensor=>
        hass.states[sensor]?.state
      )
    )
  }
entities:
  - entity: ''
    z: "$ex vars.z"
    text_auto: true
    xgap: 2
    ygap: 2
    type: heatmap
    hoverongaps: false
raw_plotly_config: true
title: Solar Panels
layout:
  annotations: |
    $ex vars.z.flatMap((row, y) => row.map((text="", x) => ({
      x,
      y,
      text,
      font: {
        family: 'Arial',
        size: 14,
        color: 'white'
      },
      showarrow: false,
    })))
  yaxis:
    showgrid: false
    zeroline: false
    showticklabels: false
    visible: false

  xaxis:
    showgrid: false
    zeroline: false
    showticklabels: false
    ticks: false
    visible: false

  height: 300
  margin:
    t: 20
    l: 20
    b: 20 

[dbuezas]

The trick was to put the text inside layout/annotations, an as a 1d array (not a matrix). Weird API 🤷 .
I also removed the grids, ticks, labels, etc

[kaijk]

Thanks for all your help. I updated the original post to reflect the solution. I wish I had a prayer of figuring out how you did this. Are their any resources to help one get a handle on all this mapping?

[dbuezas]

Awesome!

Here are the answers to thy prayer

• Use console.log a debugger: see https://github.com/dbuezas/lovelace-plotly-graph-card#debugging
• You can for example console.log before and after each mapping
• Google "how to do xyz in plotlyjs", then translate to yaml
• In this case I landed on the heatmap examples page of plotly and saw there was a relevant example that used annotations in heatmaps
• Map and flatmap are standard JavaScript functions or arrays, look for help on those too

[markcocker]

I would like to click on a heatmap tile to popup the standard Home Assistant entity detail dialogue. I tried the on_click approach shown in https://github.com/dbuezas/lovelace-plotly-graph-card but under text Alternatively, clicking on points of the trace itself. it says this doesn't work. Is this still the case, or is there another approach?

BTW, if you want to remove the colour scale, add showscale: false

entities:
  - entity: ''
    z: $ex vars.z
    xgap: 2
    ygap: 2
    zmax: 400
    zmin: 0
    type: heatmap
    hoverongaps: false
    showscale: false