Painting a heat curve for Alpha Innotec Luxtronik 2 and similiar

[sofa74surfer]

I have drawn my various heating curves of the Alpha Innotec Luxtronik 2 heat pump control here. Four heating curves are with static values, but automatically calculated with a formula. Many thanks to https://wiki.fhem.de/wiki/Luxtronik_2.0#Heizkurve. One heating curve can be adjusted with the sliders. The heating limit is also drawn in. What I haven't figured out yet is how to update the diagram when a slider is adjusted. A refresh interval of one second did not make sense to me as a solution, so I have to update the diagram manually every time.

type: horizontal-stack
title: Heizgrenze und Heizkurven
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: input_number.luxtronik_heizkurve_hks
                name: HK Start
          - type: entities
            entities:
              - entity: input_number.luxtronik_heizkurve_hke
                name: HK Ende
          - type: entities
            entities:
              - entity: input_number.luxtronik_heizkurve_offset
                name: HK Offset
      - type: horizontal-stack
        cards:
          - type: custom:plotly-graph
            layout:
              xaxis:
                type: number
                range:
                  - -20
                  - 20
                showlegend: true
              yaxis:
                fixedrange: true
                range:
                  - 15
                  - 40
            entities:
              - entity: ''
                name: Heizgrenze 2022
                x:
                  - 14
                  - 14
                'y':
                  - 14
                  - 41
                line:
                  shape: spline
                  color: darkgrey
              - entity: ''
                name: Heizgrenze 2023
                x:
                  - 16
                  - 16
                'y':
                  - 14
                  - 41
                line:
                  shape: spline
                  color: grey
              - entity: input_number.luxtronik_heizkurve_hke
                internal: true
                fn: >-
                  $fn ({ ys }) => { /*debugger; console.log(ys);
                  console.log(ys.length-1);*/ window.luxtronik_heizkurve_hke =
                  ys[ys.length-1]; }
              - entity: input_number.luxtronik_heizkurve_hks
                internal: true
                fn: >-
                  $fn ({ ys }) => { /*debugger; console.log(ys);
                  console.log(ys.length-1);*/ window.luxtronik_heizkurve_hks =
                  ys[ys.length-1]; }
              - entity: input_number.luxtronik_heizkurve_offset
                internal: true
                fn: >-
                  $fn ({ ys }) => { /*debugger; console.log(ys);
                  console.log(ys.length-1);*/ window.luxtronik_heizkurve_offset
                  = ys[ys.length-1]; }
              - entity: ''
                name: Original Heizkurve
                fn: |
                  $fn ({ vars }) => {
                    const x = []; 
                    const y = []; 
                    let ta, hks, hke, offset;
                    ta = 20;
                    hks = 22;
                    hke = 35;
                    offset = 0;
                    for (let i = 0; i <= 40; i++) {
                      x[i] = ta;
                      y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
                      ta = ta - 1;
                    };
                    vars.x = x;
                    vars.y = y;
                  };
                x: $fn ({ vars }) => vars.x
                'y': $fn ({ vars }) => vars.y
                line:
                  shape: spline
                  color: darkgreen
              - entity: ''
                name: September 2022
                fn: |
                  $fn ({ vars }) => {
                    const x = []; 
                    const y = []; 
                    let ta, hks, hke, offset;
                    ta = 20;
                    hks = 22;
                    hke = 35;
                    offset = -1;
                    for (let i = 0; i <= 40; i++) {
                      x[i] = ta;
                      y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
                      ta = ta - 1;
                    };
                    vars.x = x;
                    vars.y = y;
                  };
                x: $fn ({ vars }) => vars.x
                'y': $fn ({ vars }) => vars.y
                line:
                  shape: spline
                  color: green
              - entity: ''
                name: Haus 19, 21 & 25
                fn: |
                  $fn ({ vars }) => {
                    const x = []; 
                    const y = []; 
                    let ta, hks, hke, offset;
                    ta = 20;
                    hks = 22;
                    hke = 35;
                    offset = -3;
                    for (let i = 0; i <= 40; i++) {
                      x[i] = ta;
                      y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
                      ta = ta - 1;
                    };
                    vars.x = x;
                    vars.y = y;
                  };
                x: $fn ({ vars }) => vars.x
                'y': $fn ({ vars }) => vars.y
                line:
                  shape: spline
                  color: orange
              - entity: ''
                name: Haus 23
                fn: |
                  $fn ({ vars }) => {
                    const x = []; 
                    const y = []; 
                    let ta, hks, hke, offset;
                    ta = 20;
                    hks = 22;
                    hke = 35;
                    offset = -4;
                    for (let i = 0; i <= 40; i++) {
                      x[i] = ta;
                      y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
                      ta = ta - 1;
                    };
                    vars.x = x;
                    vars.y = y;
                  };
                x: $fn ({ vars }) => vars.x
                'y': $fn ({ vars }) => vars.y
                line:
                  shape: spline
                  color: red
              - entity: ''
                name: Heizkurve Neu ???
                fn: |
                  $fn ({ vars }) => {
                    const x = []; 
                    const y = []; 
                    let ta, hks, hke, offset;
                    ta = 20;
                    // debugger;
                    // console.log(window.luxtronik_heizkurve_hks) ;
                    // console.log(window.luxtronik_heizkurve_hke) ;
                    // console.log(window.luxtronik_heizkurve_offset) ;
                    // hks = 22;
                    // hke = 35;
                    // offset = 0;
                    hks = window.luxtronik_heizkurve_hks * 1 ;
                    hke = window.luxtronik_heizkurve_hke * 1 ;
                    offset = window.luxtronik_heizkurve_offset * 1 ;
                    for (let i = 0; i <= 40; i++) {
                      x[i] = ta;
                      y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
                      ta = ta - 1;
                    };
                    vars.x = x;
                    vars.y = y;
                  };
                x: $fn ({ vars }) => vars.x
                'y': $fn ({ vars }) => vars.y
                line:
                  shape: spline
                  color: turqois
            raw_plotly_config: true