"mini-graph-card" & "history-graph": using a decluttering template

Share your Projects! Dashboards & Frontend
5

How the template for mini-graph-card works:

The template includes TWO decluttering templates actually:

  • Template #1;
  • Template #2.

Template #1 - used for displaying a graph.
Contains 95% of the code.
Uses input variables for displaying the graph.

Basic structure of Template #1 for "mini-graph-card":

  decl_graph:
    default:
      ...
    card:
      type: 'custom:mini-graph-card'
      entities:
      - entity: '[[SENSOR]]'
        ...
      - entity: '[[SENSOR_2]]'
        ...
      - entity: '[[SENSOR_3]]'
        ...
      - entity: '[[SENSOR_4]]'
        ...
      - entity: '[[SENSOR_5]]'
        ...
      - entity: '[[SENSOR_6]]'
        ...
      - entity: '[[SENSOR_BACK]]'
        ...
      - entity: '[[SENSOR_BACK_2]]'
        ...
      - entity: '[[SENSOR_X_AXIS]]'
        ...
      ...
      hours_to_show: '[[VALUE_HOURS_TO_SHOW]]'
      ...

Notes:

  1. The template supports up to 6 graphs on one card + up to 2 background graphs.
  2. The template supports zero X-axis.
  3. Possible configurations are:
    ** one graph;
    ** one graph (or up to 6) + background graph (none, 1 or 2) + X-axis (optional).

Template #2 - used for reading input controls (graph’s settings) by "config-template-card" and passing them into Template #1. Input controls are implemented by input helpers ("input_select" for the "hours_to_show", "input_boolean" for properties like "show_extrema").

Basic structure of Template #2 for "mini-graph-card":

  decl_graph_tmpl:
    default:
      ...
    card:
      type: 'custom:config-template-card'
      variables:
        varINPUT_HOURS_TO_SHOW: 'states[''[[tmpl_INPUT_HOURS_TO_SHOW]]'']'
        ...
      entities:
        - '[[tmpl_INPUT_HOURS_TO_SHOW]]'
        ...
      card:
        type: 'custom:decluttering-card'
        template: decl_graph
        variables:
          ...
          - VALUE_HOURS_TO_SHOW:  '${varINPUT_HOURS_TO_SHOW.state}'
          ...

Note: the Template #2 may not be used at all since the graph (or graphs, if many) is built by using the Template #1 - but in this case you will not be able to manage the graph in part of:

  • "show_points", "show_extrema", "show_average", "hours_to_show";
  • toggling background graphs like “Day / night”.
1 Like