Card template configuration

[markcocker]

Describe the solution you'd like I have several plotly cards with very similar and lengthy configuration, especially for the YAML elements default, layout and hours_to_show.

Rather than duplicating the configuration in each card, I would like to define templates of config once in the dashboard file (or separate file) and specify one or more templates in the plotly card that would then be merged in.

This would allow me to update the template config, eg. adjust where the buttons are, and all the cards that use the template will reflect the change.

How would it be defined in yaml? Similar to config_templates into GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant 1

For example a block in ui-lovelace.yaml:

plotly_card_templates:
  electricity_1hour:
    hours_to_show: 1h
    defaults:
      entity:
        hovertemplate: '%{y:.0f}%{yaxis.ticksuffix}  '
        showlegend: true
        stackgroup: 1
        filters:
          - resample: 1m
        line:
          width: 1.5
          shape: spline
    layout:
      height: 200
      hovermode: x unified
      legend:
        yanchor: top
        xanchor: center
        orientation: h
        'y': 1.4
        x: 0.5
      xaxis:
        tickfont:
          size: 8
        minor:
          ticks: outside
        showgrid: false
        tickformat: |-
          %H:%M
          %a %d %b
      yaxis:
        ticksuffix: W
        fixedrange: true
        griddash: dot
        title: null
        tickfont:
          size: 9
      updatemenus:
        - buttons:
            - args:
                - xaxis.range
                - >-
                  $fn({getFromConfig}) => getFromConfig("visible_range").map(t => t
                  - 1000*60*60*1)
              label: ◄
              method: relayout
            - args:
                - xaxis.range
                - >-
                  $fn({getFromConfig}) => getFromConfig("visible_range").map(t => t
                  + 1000*60*60*1)
              label: ►
              method: relayout
          bgcolor: rgba(0, 0, 0, 0)'
          borderwidth: 0
          direction: right
          active: -1
          type: buttons
          xanchor: center
          x: 0.5
          'y': '-.4'
          yanchor: bottom

and several cards could then use that template, overriding only what is necessary, mainly the entities involved:

config_templates:
  - electricity_1hour
title: Electricity supply over last hour
type: custom:plotly-graph
entities:
  - entity: sensor.myenergi_zappi_20681850_power_ct_grid
    name: >-
      $ex "Grid import " + Math.max(Math.round(ys.at(-1)),0) +
      meta.unit_of_measurement
    yaxis: y1
    line:
      color: grey
    filters:
      - resample: 1m
      - filter: y>0
  - entity: sensor.the_willows_battery_power
    yaxis: y1
    name: $ex "Powerwall " + Math.round(ys.at(-1)) + "W"
    fill: none
    filters:
      - resample: 1m
      - filter: y>0
      - multiply: 1000
    line:
      color: orange
  - entity: sensor.myenergi_the_willows_power_generation
    yaxis: y1
    name: $ex "Solar " + Math.round(ys.at(-1)) + meta.unit_of_measurement
    line:
      color: yellow
    fill: none
    filters:
      - resample: 1m
      - filter: y>0

and a similar one for electricity demand would yield: