Hot Water Cylinder SVG shaped heatmap.

[deltamelter]

Over-engineered, cobbled together method to make a HW cylinder visualisation in the shape of a hot water tank.
Uses 2 heatmaps, taken from 2 other examples in the discussions. 1 with gradient interpolation and the other with a single band per sensor. The second heatmap is just a lazy cheat to get the annotations with the sensor temperatures to to line up over the gradient.
I left this "label" heatmap half exposed in the example above and in the yaml so that this can be seen.
The shape is just a backround coloured mask. This masking is exposed in this image with a semi-transparent inverted mask...

Disclaimer!!!! The reason I never got around to posting the yaml before now is because it's a little messy and might not be the most efficient implementation. Some of this was just added to trial and error a way to a solution and should be removed. Feel free to post any improvements.

type: custom:plotly-graph
fn: |
  $ex {
    // specify order of temperature sensors
    
    let Ts = [        'sensor.tankcommand_test_sensor_4', 
                      'sensor.tankcommand_test_sensor_4',
                      'sensor.tankcommand_test_sensor_3',
                      'sensor.tankcommand_test_sensor_2',
                      'sensor.tankcommand_test_sensor_1',         //this is a placeholder for a sensor yet to be installed
                      'sensor.tankcommand_test_sensor_1'   // simplifying assumption - top sensor - 0.01 deg
                      ].map(sensor=>isNaN(hass.states[sensor]?.state) ? sensor : Math.round(hass.states[sensor]?.state))

    // specify positions of temperature sensors w.r.t cylinder base
    let Hs = [0,  // bottom of the tank = 0cm
              18, // 1st sensor, 36cm above bottom of tank
              36, // 2nd sensor height
              54, // 3rd sensor height
              72, // 4th sensor height
              90, // height of the tank
              ];

    // now we linearly interpolate between sensors in steps of 1cm (not accurate)
    
    let interps = [];
    
    for (let i = 0; i < Ts.length - 1; i++) {
      for (let step = 0; step < Hs[i + 1] - Hs[i]; step++) {
        // Calculate the weight based on the distance from the current measurement
        let weight = 1 - (step / (Hs[i + 1] - Hs[i]));
        
        // Interpolate with the weight applied
        let interp = [
          Ts[i] * weight + Ts[i + 1] * (1 - weight),
          Ts[i] * weight + Ts[i + 1] * (1 - weight),
          Ts[i] * weight + Ts[i + 1] * (1 - weight)
        ];
        
        interps.push(interp);
      }
    }


    vars.z = interps

    // arbritrary width - X axis length unimportant
    vars.x = [0.75,1.5]
      
   // array 0 - to height of tank (-1)         
    vars.y = Array.from({ length: Hs[Hs.length -1] }, (_, i) => i*0.0446)
    vars.y[0] = 0.1

    vars.z2 = [[
      // row 3
      'sensor.tankcommand_test_sensor_4', // add more columns
    ],[
      // row 2
      'sensor.tankcommand_test_sensor_3',
    ],[
      // row 2
      'sensor.tankcommand_test_sensor_2',
    ],[
      // row 1
      'sensor.tankcommand_test_sensor_1',
    ]].map(row=> 
      row.map(sensor=>
        hass.states[sensor]?.state
      )
    )
    vars.y2 = [0.61,1.5,2.5,3.31]
    vars.x2 = [1.5,3]
    //vars.colorscale =  (label) => ({
    //  args: [
    //    {
    //      "colorscale": label
    //    }
    //  ],
    //  "label": label,
    //  "method": "restyle"    
    //})
  }
entities:
  - entity: ""
    z: $ex vars.z
    x: $ex vars.x
    "y": $ex vars.y
    text_auto: true
    type: heatmap
    offset: 0
    colorscale: Bluered
    contours_coloring: heatmap
    hovertemplate: "<b>Temp: </b>%{z:.2f}°C</br><extra></extra>"
  - entity: ""
    x: $ex vars.x2
    "y": $ex vars.y2
    z: $ex vars.z2
    text_auto: true
    type: heatmap
    showscale: false
    hoverongaps: false
    colorscale: Bluered
    contours_coloring: heatmap
raw_plotly_config: true
refresh_interval: auto
ha_theme: true
layout:
  updatemenus:
    - buttons:
        - args:
            - colorscale
            - Bluered
          label: Bluered
          method: restyle
        - args:
            - colorscale
            - Portland
          label: Portland
          method: restyle
        - args:
            - colorscale
            - RdBu
          label: RdBu
          method: restyle
      direction: down
      active: -1
      pad:
        l: 1
        t: 1
      x: 0.1
      "y": 90
      xanchor: right
      yanchor: top
      type: buttons
  annotations: |
    $ex vars.z2.flatMap((row, y) => 
        row.map((text="", x) => ({
          x: vars.x2[x], // Use predefined x coordinates
          y: vars.y2[y], // Use predefined y coordinates
          text,
          font: {
            family: 'Arial',
            size: 14,
            color: 'white'
          },
          showarrow: false,
        }))
      )
  boxmode: overlay
  hovermode: true
  paper_bgcolor: |
    $ex css_vars["primary-background-color"]
  plot_bgcolor: |
    $ex css_vars["primary-background-color"]
  title:
    text: Cylinder Temperature
    xref: paper
    yref: paper
  yaxis:
    showgrid: true
    zeroline: false
    showticklabels: true
    visible: false
  xaxis:
    showgrid: false
    zeroline: false
    ticks: false
    visible: false
  height: 400
  width: 400
  margin:
    t: 30
    l: 80
    b: 30
  shapes:
    - type: path
      name: p1
      path: >-
        M 1.4941681,3.7101033 C 2.070376,3.7101033 2.5390807,3.4348857
        2.5730637,3.087304 V 0.6064869 C 2.5730637,0.49720911
        2.4966424,0.39825569 2.3776936,0.3521769 L 2.3310389,0.33401306 C
        1.7795505,0.12336277 1.1442893,0.12971017 0.59897658,0.34958128 C
        0.48466425,0.3969788 0.41235663,0.49464375 0.41235663,0.60129596 V
        3.087304 C 0.44634221,3.4348857 0.91796011,3.7101033 1.4941681,3.7101033
        Z
      fillcolor: "#e1a67d09"
      line:
        color: "#e1a67d09"
        width: null
      zorder: 85
      inverted: true
    - type: path
      name: cylinderMask
      path: >-
        M 0.00704201,3.992958 V 0.00704201 H 2.992958 V 3.992958 Z

        M 1.4941681,3.7101033 C 2.070376,3.7101033 2.5390807,3.4348857
        2.5730637,3.087304 V 0.6064869 C 2.5730637,0.49720911
        2.4966424,0.39825569 2.3776936,0.3521769 L 2.3310389,0.33401306 C
        1.7795505,0.12336277 1.1442893,0.12971017 0.59897658,0.34958128 C
        0.48466425,0.3969788 0.41235663,0.49464375 0.41235663,0.60129596 V
        3.087304 C 0.44634221,3.4348857 0.91796011,3.7101033 1.4941681,3.7101033
        Z
      fillcolor: |
        $ex css_vars["primary-background-color"]
      line:
        color: |
          $ex css_vars["primary-background-color"]
    - type: path
      name: pipes
      line:
        color: "#84291aff"
        width: 1
      fillcolor: "#e1a67dff"
      path: >-
        M 2.8752337,1.7147882 C 2.8752337,1.6735643 2.847855,1.6400318
        2.8132772,1.6376004 H 2.5664833 C 2.5556122,1.6376004 2.5457681,1.643068
        2.5411843,1.6515778 L 2.5393773,1.6549157 C 2.5184215,1.694371
        2.5190531,1.7398196 2.540926,1.7788329 C 2.5456412,1.7870113
        2.5553569,1.7921844 2.5659669,1.7921844 H 2.8132772 C 2.847855,1.789753
        2.8752337,1.7560119 2.8752337,1.7147882 Z

        M 1.4787981,3.9030178 C 1.5229294,3.9030178 1.558827,3.8860008
        1.5614299,3.86451 V 3.7111194 C 1.5614299,3.7043627 1.5555768,3.6982444
        1.5464666,3.6953954 L 1.5428933,3.6942723 C 1.5006554,3.6812474
        1.4520013,3.6816401 1.4102365,3.6952349 C 1.4014811,3.6981655
        1.3959432,3.7042041 1.3959432,3.7107986 V 3.86451 C 1.3985461,3.8860008
        1.4346671,3.9030178 1.4787981,3.9030178 Z

        M 2.8752337,0.80209052 C 2.8752337,0.76086663 2.847855,0.72733411
        2.8132772,0.72490276 H 2.5664833 C 2.5556122,0.72490276
        2.545768,0.73037027 2.5411843,0.73888021 L 2.5393772,0.74221809 C
        2.5184215,0.78167334 2.519053,0.82712188 2.540926,0.8661353 C
        2.5456412,0.87431363 2.5553569,0.8794867 2.5659669,0.8794867 H 2.8132772
        C 2.847855,0.87705535 2.8752337,0.84331424 2.8752337,0.80209052 Z

        M 0.10004853,0.8100899 C 0.10004853,0.76886601 0.12742725,0.73533349
        0.16200502,0.73290214 H 0.40879894 C 0.41967002,0.73290214
        0.42951417,0.73836965 0.43409791,0.74687958 L 0.43590495,0.75021746 C
        0.45686068,0.78967272 0.4562292,0.83512126 0.43435623,0.87413468 C
        0.42964103,0.88231301 0.41992533,0.88748608 0.40931531,0.88748608 H
        0.16200502 C 0.12742725,0.88505473 0.10004853,0.85131361
        0.10004853,0.8100899 Z    
    - type: path
      name: p2
      line:
        color: "#e1a67dff"
      path: >-

        M 2.1743626,0.4522834 C 2.2729814,0.49460311 2.3362715,0.58719884
        2.3362715,0.68904524 V 0.8424778 V 1.0422056

        M 2.3362709,1.1559571 V 1.3146819

        M 1.0571922,3.5222612 C 1.0159772,3.5090235 0.97623517,3.4931658
        0.93943851,3.4759719

        M 0.83346344,3.4177677 C 0.73631757,3.3556061 0.6597789,3.2788855
        0.6097348,3.1929094
      layer: above
config:
  modeBarButtonsToRemove:
    - resetScale2d
    - lasso2d
    - select2d

The sensor values are coming from a sonoff r1 running esphome and 4 one-wire probes.