dynamical graph_span and span offset

[ollelinse]

I'm looking for a solution to dynamically set the parameter for "graph_span". The goal is to switch the diagram between a 24h or 48h view with a span offset of +24h, depending on the availability of data. So far, I haven't found a way to set the parameters other than directly in the script. I haven't been successful using data_generator or external sensors. Does anyone know a solution?

[rjgrandy]

Create a helper input_select, then use the custom:config-template-card to template the graph_span field using the input_select.

I just finished the below card and am pretty happy with it.

- type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:mushroom-title-card
            title: Pool Temperatures
          - type: tile
            entity: input_select.pool_temp_graph_duration
            name: Pool Temp Graph Duration
            tap_action: none
            icon_tap_action: none
            icon: mdi:chart-areaspline
            vertical: false
            state_content: state
            features:
              - type: custom:service-call
                entries:
                  - type: button
                    label: 1hr
                    tap_action:
                      action: perform-action
                      perform_action: input_select.select_option
                      data:
                        option: 1h
                      target:
                        entity_id: input_select.pool_temp_graph_duration
                    styles: |-
                      :host {
                        {% if is_state("input_select.pool_temp_graph_duration", "1h") %}
                        flex-basis: 200%;
                        --color: var(--blue-color);
                        {% endif %}
                      }
                  - type: button
                    label: 1day
                    tap_action:
                      action: perform-action
                      perform_action: input_select.select_option
                      data:
                        option: 1d
                      target:
                        entity_id: input_select.pool_temp_graph_duration
                    styles: |-
                      :host {
                        {% if is_state("input_select.pool_temp_graph_duration", "1d") %}
                        flex-basis: 200%;
                        --color: var(--blue-color);
                        {% endif %}
                      }
                  - type: button
                    label: 1week
                    tap_action:
                      action: perform-action
                      perform_action: input_select.select_option
                      data:
                        option: 1w
                      target:
                        entity_id: input_select.pool_temp_graph_duration
                    styles: |-
                      :host {
                        {% if is_state("input_select.pool_temp_graph_duration", "1w") %}
                        flex-basis: 200%;
                        --color: var(--blue-color);
                        {% endif %}
                      }
                  - type: button
                    label: 2weeks
                    tap_action:
                      action: perform-action
                      perform_action: input_select.select_option
                      data:
                        option: 2w
                      target:
                        entity_id: input_select.pool_temp_graph_duration
                    styles: |-
                      :host {
                        {% if is_state("input_select.pool_temp_graph_duration", "2w") %}
                        flex-basis: 200%;
                        --color: var(--blue-color);
                        {% endif %}
                      }
                  - type: button
                    label: 1month
                    tap_action:
                      action: perform-action
                      perform_action: input_select.select_option
                      data:
                        option: 1month
                      target:
                        entity_id: input_select.pool_temp_graph_duration
                    styles: |-
                      :host {
                        {% if is_state("input_select.pool_temp_graph_duration", "1month") %}
                        flex-basis: 200%;
                        --color: var(--blue-color);
                        {% endif %}
                      }
            card_mod:
              style: |
                ha-card .content {
                  display: none !important;
                }
                ha-card {
                  padding-top: 10px !important;
                  border-width: 0;
                }
          - type: custom:config-template-card
            variables:
              graph_dur: states['input_select.pool_temp_graph_duration'].state
            entities:
              - input_select.pool_temp_graph_duration
            card:
              type: custom:apexcharts-card
              header:
                show: true
                show_states: true
                colorize_states: true
              graph_span: "${graph_dur}"
              apex_config:
                legend:
                  show: false
              experimental:
                brush: true
              brush:
                selection_span: 1w
              yaxis:
                - id: temp
                - id: filter
                  show: false
                  opposite: true
                  max: 100
                  min: 0
              series:
                - entity: sensor.aqualinkd_pool_temp
                  yaxis_id: temp
                  name: Pool Temp
                  fill_raw: last
                  stroke_width: 3
                  color: blue
                  curve: stepline
                  show:
                    #in_brush: true
                    legend_value: false
                - entity: sensor.aqualinkd_spa_temp
                  yaxis_id: temp
                  name: Spa Temp
                  fill_raw: last
                  stroke_width: 3
                  color: Red
                  curve: stepline
                  show:
                    #in_brush: true
                    legend_value: false
                - entity: sensor.openweathermap_temperature
                  yaxis_id: temp
                  name: Air Temp
                  fill_raw: last
                  stroke_width: 3
                  color: black
                - entity: switch.aqualinkd_filter_pump
                  yaxis_id: filter
                  name: Filter
                  opacity: 0.4
                  transform: 'return x === "on" ? 100 : 0;'
                  type: area
                  color: lightblue
                  stroke_width: 0
                  curve: stepline
                  show:
                    extremas: false
                    in_header: false
                    name_in_header: false
                    legend_value: false
                - entity: sun.sun
                  yaxis_id: filter
                  name: Day
                  opacity: 0.2
                  transform: 'return x === "below_horizon" ? 100 : 0;'
                  type: area
                  color: lightgray
                  stroke_width: 0
                  curve: stepline
                  show:
                    extremas: false
                    in_header: false
                    name_in_header: false
                    legend_value: false
            card_mod:
              style: |
                config-template-card {
                  border-width: 0;
                }

[ollelinse]

Vielen Dank für den Hinweis. Das ist eine gute Lösung für die Darstellung Ihrer Pool-Temperaturen. Leider kann ich diese Methode nicht für meinen Einsatzzweck anpassen, soweit sich die Tabs nicht auch automatisch bei Erfüllung einer Bedingung (Uhrzeit) umschalten.