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

Share your Projects! Dashboards & Frontend
2

Types of graphs supported by the template:
Types of graphs which I use:

  1. Graphs for one sensor - presented by "mini-graph-card":
    изображение

  2. Graphs for two sensors - presented by "mini-graph-card":
    изображение

  3. Graphs for 3 or more sensors (not so often, but they may present) - presented by "mini-graph-card":
    изображение

  4. Graphs with a background graph like “Day / night” - presented by "mini-graph-card":
    image

  5. Graphs with two background graphs like “Day / night” & “Available /unavailable”- presented by "mini-graph-card":
    image

  6. Graphs with a zero X-axis - presented by "mini-graph-card":
    image

Note: there could be a combination like “5 sensors + 2 backgrounds + X-axis”.

  1. Graphs for non-numerical sensors (like "sun.sun", "binary_sensor","device_tracker", "switch", non-numerical template sensors), one or more sensors - and here I prefer to use "history-graph":
    изображение
    Why "history-graph"- because the "mini-graph-card" may not display some change from "on" to "off" (or vice versa) if this change happened between “node points” (defined by "points_per_hour" property).
    Another reason - for some values like "sun.sun" a property "state_map" must be used.

Note: regarding building “bar” graphs - see this post.

3

Regarding card-mod:
There are FOUR ways of using "card-mod":

  1. All required styles are hard-coded.
    Suppose you need a transparent background, rounded corners etc in all your graphs - so you can specify required styles inside the template:
    style: |
      ha-card {
        color: red;
        --paper-item-icon-color: orange;
      }
  1. All required styles are supported (you need to specify required styles for all required UI-elements) but not specified with particular values - these values must be specified as input variables:
    style: |
      ha-card {
        color: [[VALUE_COLOR]];
        --paper-item-icon-color: [[VALUE_COLOR]];
      }
  1. All required styles may be incorporated into the template by passing a corresponding variable (post #1, post #2):
  - type: 'custom:decluttering-card'
    template: .....
    variables:
      - ...
      - STYLE: ':host { --paper-item-icon-color: red;}'
  1. Specify all required styles outside the decluttering template, something like this:
type: entities
entities:
  - type: 'custom:decluttering-card'
    template: .........
    variables:
      - ..........
style:
  .card-content:
    decluttering-card:
      $:
        ..........

Note: all styles described above are given just as examples; possible styling for graphs is described here:

  • for "mini-graph-card": post;
  • for "history-graph": post.
4

Where to place the template:

All decluttering templates must be placed inside a "decluttering_templates:" section.
This section is usually located in the same yaml-file as a description for "views".
Particularly it depends whether “yaml” or “storage” mode is used for Lovelace.

In the “yaml” mode there is some yaml-file describing some dashboard:

decluttering_templates: !include_dir_merge_named templates-decluttering/
...
views:
  - !include views/main-view-home.yaml
  - !include views/main-view-climate.yaml
  ...

In this example there is a directory "templates-decluttering" containing yaml-files for templates:
image

Here each yaml-file contains one decluttering template:
image

But there could be several templates in one file.
In my setup the templates described in this thread are located in these files:
image

File names could be different; I prefer to use names of templates as file names.

In the “storage” mode the "decluttering_templates" section must be placed inside the “Raw configuration editor”.
The “storage” mode is useful for testing views & cards. And it would be very useful to have all decluttering templates available in both modes.

I am not an expert in these things but I think that we cannot use same templates in both modes - we have to repeat them in TWO places (instead of keeping in one place & referencing from many places) - in an appropriate yaml-file for the “yaml” mode and in the “Raw configuration editor” for the “storage” mode.
This is very inconvenient if you are trying to change anything in templates. In this case you need to test these templates (as well as views & cards using these templates) in the “Raw configuration editor” first. The tested and approved templates then may be saved in appropriate yaml-files for the “yaml” mode.

1 Like
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
6

Code of Template #1 for "mini-graph-card" (inside a "decluttering_templates" section):

decl_graph:
  default: &decl_graph_default
    - VALUE_GRAPH_TYPE: line
    - VALUE_SHOW_NAME: true
    - VALUE_SHOW_STATE: true
    - VALUE_SHOW_FILL: true
    - VALUE_SHOW_POINTS: false
    - VALUE_SHOW_EXTREMA: false
    - VALUE_SHOW_AVERAGE: false
    - VALUE_SHOW_LABELS: true
    - VALUE_TITLE: ''
    - VALUE_STATE_ADAPTIVE_COLOR: false
    - VALUE_HEIGHT: 100
    - VALUE_POINTS_PER_HOUR: 60
    - VALUE_UPDATE_INTERVAL: 0
    - VALUE_AGGREGATE_FUNC: last
    - VALUE_GROUP_BY: interval
    - VALUE_STATE_MAP: []
    - VALUE_LOWER_BOUND: ~0
    - VALUE_SHOW_LEGEND: false
    - VALUE_COLOR_THRESHOLDS: []
    - VALUE_COLOR_THRESHOLDS_TRANSITION: smooth
    - VALUE_COMPACT_MIN_MAX_AVG_INFO: false
    ############################################
    - VALUE_SHOW_GRAPH: true
    - VALUE_LINE_COLOR: green
    ############################################
    - SENSOR_2: sensor.service_zero_value
    - VALUE_NAME_2: ''
    - VALUE_SHOW_GRAPH_2: false
    - VALUE_SHOW_STATE_2: false
    - VALUE_LINE_COLOR_2: orange
    ############################################
    - SENSOR_3: sensor.service_zero_value
    - VALUE_NAME_3: ''
    - VALUE_SHOW_GRAPH_3: false
    - VALUE_SHOW_STATE_3: false
    - VALUE_LINE_COLOR_3: magenta
    ############################################
    - SENSOR_4: sensor.service_zero_value
    - VALUE_NAME_4: ''
    - VALUE_SHOW_GRAPH_4: false
    - VALUE_SHOW_STATE_4: false
    - VALUE_LINE_COLOR_4: blue
    ############################################
    - SENSOR_5: sensor.service_zero_value
    - VALUE_NAME_5: ''
    - VALUE_SHOW_GRAPH_5: false
    - VALUE_SHOW_STATE_5: false
    - VALUE_LINE_COLOR_5: pink
    ############################################
    - SENSOR_6: sensor.service_zero_value
    - VALUE_NAME_6: ''
    - VALUE_SHOW_GRAPH_6: false
    - VALUE_SHOW_STATE_6: false
    - VALUE_LINE_COLOR_6: violet
    #################################################
    - SENSOR_BACK: sensor.service_zero_value
    - VALUE_NAME_BACK: ''
    - VALUE_SHOW_GRAPH_BACK: false
    - VALUE_LINE_COLOR_BACK: 'rgba(50,73,92,0.5)'
    #################################################
    - SENSOR_BACK_2: sensor.service_zero_value
    - VALUE_NAME_BACK_2: ''
    - VALUE_SHOW_GRAPH_BACK_2: false
    - VALUE_LINE_COLOR_BACK_2: 'rgba(255,0,0,0.5)'
    #################################################
    - SENSOR_X_AXIS: sensor.servicewithhistory_zero_value
    - VALUE_SHOW_GRAPH_X_AXIS: false
    - VALUE_LINE_COLOR_X_AXIS: 'rgb(255,0,0)'

  card:
    entities:
      - &decl_graph_entities_1
        entity: '[[SENSOR]]'
        name: '[[VALUE_NAME]]'
        unit: ''
        color: '[[VALUE_LINE_COLOR]]'
        show_state: '[[VALUE_SHOW_STATE]]'
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH]]'
        show_line: '[[VALUE_SHOW_GRAPH]]'
        show_fill: '[[VALUE_SHOW_FILL]]'
        show_points: '[[VALUE_SHOW_POINTS]]'
        show_legend: '[[VALUE_SHOW_LEGEND]]'
        state_adaptive_color: '[[VALUE_STATE_ADAPTIVE_COLOR]]'
        fixed_value: false
      ##########################################
      - &decl_graph_entities_2
        entity: '[[SENSOR_2]]'
        name: '[[VALUE_NAME_2]]'
        unit: ''
        color: '[[VALUE_LINE_COLOR_2]]'
        show_state: '[[VALUE_SHOW_STATE_2]]'
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_2]]'
        show_line: '[[VALUE_SHOW_GRAPH_2]]'
        show_fill: '[[VALUE_SHOW_FILL]]'
        show_points: '[[VALUE_SHOW_POINTS]]'
        show_legend: '[[VALUE_SHOW_LEGEND]]'
        state_adaptive_color: '[[VALUE_STATE_ADAPTIVE_COLOR]]'
        fixed_value: false
      ##########################################
      - &decl_graph_entities_3
        entity: '[[SENSOR_3]]'
        name: '[[VALUE_NAME_3]]'
        unit: ''
        color: '[[VALUE_LINE_COLOR_3]]'
        show_state: '[[VALUE_SHOW_STATE_3]]'
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_3]]'
        show_line: '[[VALUE_SHOW_GRAPH_3]]'
        show_fill: '[[VALUE_SHOW_FILL]]'
        show_points: '[[VALUE_SHOW_POINTS]]'
        show_legend: '[[VALUE_SHOW_LEGEND]]'
        state_adaptive_color: '[[VALUE_STATE_ADAPTIVE_COLOR]]'
        fixed_value: false
      ##########################################
      - &decl_graph_entities_4
        entity: '[[SENSOR_4]]'
        name: '[[VALUE_NAME_4]]'
        unit: ''
        color: '[[VALUE_LINE_COLOR_4]]'
        show_state: '[[VALUE_SHOW_STATE_4]]'
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_4]]'
        show_line: '[[VALUE_SHOW_GRAPH_4]]'
        show_fill: '[[VALUE_SHOW_FILL]]'
        show_points: '[[VALUE_SHOW_POINTS]]'
        show_legend: '[[VALUE_SHOW_LEGEND]]'
        state_adaptive_color: '[[VALUE_STATE_ADAPTIVE_COLOR]]'
        fixed_value: false
      ##########################################
      - &decl_graph_entities_5
        entity: '[[SENSOR_5]]'
        name: '[[VALUE_NAME_5]]'
        unit: ''
        color: '[[VALUE_LINE_COLOR_5]]'
        show_state: '[[VALUE_SHOW_STATE_5]]'
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_5]]'
        show_line: '[[VALUE_SHOW_GRAPH_5]]'
        show_fill: '[[VALUE_SHOW_FILL]]'
        show_points: '[[VALUE_SHOW_POINTS]]'
        show_legend: '[[VALUE_SHOW_LEGEND]]'
        state_adaptive_color: '[[VALUE_STATE_ADAPTIVE_COLOR]]'
        fixed_value: false
      ##########################################
      - &decl_graph_entities_6
        entity: '[[SENSOR_6]]'
        name: '[[VALUE_NAME_6]]'
        unit: ''
        color: '[[VALUE_LINE_COLOR_6]]'
        show_state: '[[VALUE_SHOW_STATE_6]]'
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_6]]'
        show_line: '[[VALUE_SHOW_GRAPH_6]]'
        show_fill: '[[VALUE_SHOW_FILL]]'
        show_points: '[[VALUE_SHOW_POINTS]]'
        show_legend: '[[VALUE_SHOW_LEGEND]]'
        state_adaptive_color: '[[VALUE_STATE_ADAPTIVE_COLOR]]'
        fixed_value: false
      ##################################################################  
      - &decl_graph_entities_back
        entity: '[[SENSOR_BACK]]'
        name: '[[VALUE_NAME_BACK]]'
        color: '[[VALUE_LINE_COLOR_BACK]]'
        unit: ''
        show_state: false
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_BACK]]'
        show_line: false
        show_fill: true
        show_points: false
        show_legend: false
        state_adaptive_color: false
        fixed_value: false
        aggregate_func: last
        y_axis: secondary
      ##################################################################  
      - &decl_graph_entities_back_2
        entity: '[[SENSOR_BACK_2]]'
        name: '[[VALUE_NAME_BACK_2]]'
        color: '[[VALUE_LINE_COLOR_BACK_2]]'
        unit: ''
        show_state: false
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_BACK_2]]'
        show_line: false
        show_fill: true
        show_points: false
        show_legend: false
        state_adaptive_color: false
        fixed_value: false
        aggregate_func: last
        y_axis: secondary
      ##################################################################  
      - &decl_graph_entities_x_axis
        entity: '[[SENSOR_X_AXIS]]'
        name: ' '
        color: '[[VALUE_LINE_COLOR_X_AXIS]]'
        unit: ''
        show_state: false
        show_indicator: false
        show_graph: '[[VALUE_SHOW_GRAPH_X_AXIS]]'
        show_line: true
        show_fill: false
        show_points: false
        show_legend: false
        state_adaptive_color: false
        fixed_value: true
        aggregate_func: min

    <<: &decl_card_settings
      type: custom:mini-graph-card

      state_map: '[[VALUE_STATE_MAP]]'

      icon: ''
      name: '[[VALUE_TITLE]]'
      unit: ''

      group: false

      hours_to_show: '[[VALUE_HOURS_TO_SHOW]]'
      points_per_hour: '[[VALUE_POINTS_PER_HOUR]]'
      update_interval: '[[VALUE_UPDATE_INTERVAL]]'
      aggregate_func: '[[VALUE_AGGREGATE_FUNC]]'
      group_by: '[[VALUE_GROUP_BY]]'

      animate: false
      height: '[[VALUE_HEIGHT]]'
      line_width: 1
      hour24: true
      smoothing: false

      font_size: 100
      font_size_header: 14

      align_header: default
      align_icon: right
      align_state: left

      lower_bound: '[[VALUE_LOWER_BOUND]]'
      lower_bound_secondary: ~0

      color_thresholds: '[[VALUE_COLOR_THRESHOLDS]]'
      color_thresholds_transition: '[[VALUE_COLOR_THRESHOLDS_TRANSITION]]'

      show:
        name: '[[VALUE_SHOW_NAME]]'
        icon: '[[VALUE_SHOW_NAME]]'
        state: '[[VALUE_SHOW_STATE]]'
        graph: '[[VALUE_GRAPH_TYPE]]'
        fill: fade
        points: '[[VALUE_SHOW_POINTS]]'
        legend: '[[VALUE_SHOW_LEGEND]]'
        average: '[[VALUE_SHOW_AVERAGE]]'
        extrema: '[[VALUE_SHOW_EXTREMA]]'
        labels: '[[VALUE_SHOW_LABELS]]'
        labels_secondary: false
        name_adaptive_color: false
        icon_adaptive_color: false

      card_mod:
        style: |
          ha-card .info.flex .info__item .info__item__type {
            {% if [[VALUE_COMPACT_MIN_MAX_AVG_INFO]] == true %}
            font-size: 11px;
            line-height: 14px;
            {% endif %}
          }
          ha-card .info.flex .info__item .info__item__value {
            {% if [[VALUE_COMPACT_MIN_MAX_AVG_INFO]] == true %}
            font-size: 11px;
            line-height: 14px;
            {% endif %}
          }
          ha-card .info.flex .info__item .info__item__time {
            {% if [[VALUE_COMPACT_MIN_MAX_AVG_INFO]] == true %}
            font-size: 11px;
            line-height: 14px;
            {% endif %}
          }
          ha-card .info.flex {
            color: var(--user-mini-graph-min-max-avg-color,var(--primary-text-color));
          }

Notes:

  1. For sensors ## 2…6 the default value is specified - "sensor.service_zero_value":
sensor:
  - platform: template
    sensors:
      service_zero_value:
        friendly_name: 'Service: zero value'
        icon_template: mdi:null
        value_template: "{{ (0|float)|round(0) }}"

The sensor is used to hide unused graphs.
This sensor must be excluded in recorder.yaml since the sensor must not have a History.

  1. For the sensor for zero X-axis the default value is specified - "sensor.servicewithhistory_zero_value":
sensor:
  - platform: template
    sensors:
      servicewithhistory_zero_value:
        friendly_name: 'Service (with history): Zero value'
        icon_template: mdi:null
        value_template: "{{ (0|float)|round(0) }}"

This sensor must not be excluded in recorder.yaml since the sensor must have a History (always zero).

  1. For the sensors for the background graphs the default values are specified - "sensor.service_zero_value".

  2. The default colors for background graphs are “transparent dark” (for background #1) and “transparent red” (for background #2). Basically these backgrounds I usually used for “Day / night” (i.e. “dark” for “night”) and for “Available / unavailable” (i.e. “red” for “unavailable”).

  3. Any user may change default values as he likes; these values may be customized for some particular graph as input variables - this is supposed to be the right way to use the template. But some values are “hard-coded” since I consider these values as “proper”; but you can also change these values if you like (up to you to decide).

  4. YAML anchors are used, do not delete them - they may be useful if you decide to create new templates based on this one (like it is described for reduced templates).

2 Likes
7

Code of Template #2 for "mini-graph-card" (inside a "decluttering_templates" section):

decl_graph_tmpl:
  default: &decl_graph_tmpl_default
    - tmpl_VALUE_GRAPH_TYPE: line
    - tmpl_VALUE_SHOW_NAME: true
    - tmpl_VALUE_SHOW_FILL: true
    - tmpl_INPUT_SHOW_POINTS: input_boolean.service_false_value
    - tmpl_INPUT_SHOW_EXTREMA: input_boolean.service_false_value
    - tmpl_INPUT_SHOW_AVERAGE: input_boolean.service_false_value
    - tmpl_VALUE_SHOW_LABELS: true
    - tmpl_VALUE_TITLE: ''
    - tmpl_VALUE_STATE_ADAPTIVE_COLOR: false
    - tmpl_VALUE_HEIGHT: 100
    - tmpl_VALUE_POINTS_PER_HOUR: 60
    - tmpl_VALUE_UPDATE_INTERVAL: 0
    - tmpl_VALUE_AGGREGATE_FUNC: last
    - tmpl_VALUE_GROUP_BY: interval
    - tmpl_VALUE_STATE_MAP: []
    - tmpl_VALUE_LOWER_BOUND: ~0
    - tmpl_VALUE_SHOW_LEGEND: false
    - tmpl_INPUT_REALTIME: input_boolean.service_true_value
    - tmpl_VALUE_COLOR_THRESHOLDS: []
    - tmpl_VALUE_COLOR_THRESHOLDS_TRANSITION: smooth
    - tmpl_VALUE_COMPACT_MIN_MAX_AVG_INFO: false
    ############################################################
    - tmpl_VALUE_SHOW_GRAPH: true
    - tmpl_VALUE_SHOW_STATE: true
    - tmpl_VALUE_LINE_COLOR: green
    ############################################################
    - tmpl_SENSOR_2: sensor.service_zero_value
    - tmpl_VALUE_NAME_2: ''
    - tmpl_VALUE_SHOW_GRAPH_2: false
    - tmpl_VALUE_SHOW_STATE_2: false
    - tmpl_VALUE_LINE_COLOR_2: orange
    ############################################################
    - tmpl_SENSOR_3: sensor.service_zero_value
    - tmpl_VALUE_NAME_3: ''
    - tmpl_VALUE_SHOW_GRAPH_3: false
    - tmpl_VALUE_SHOW_STATE_3: false
    - tmpl_VALUE_LINE_COLOR_3: magenta
    ############################################################
    - tmpl_SENSOR_4: sensor.service_zero_value
    - tmpl_VALUE_NAME_4: ''
    - tmpl_VALUE_SHOW_GRAPH_4: false
    - tmpl_VALUE_SHOW_STATE_4: false
    - tmpl_VALUE_LINE_COLOR_4: blue
    ############################################################
    - tmpl_SENSOR_5: sensor.service_zero_value
    - tmpl_VALUE_NAME_5: ''
    - tmpl_VALUE_SHOW_GRAPH_5: false
    - tmpl_VALUE_SHOW_STATE_5: false
    - tmpl_VALUE_LINE_COLOR_5: pink
    ############################################################
    - tmpl_SENSOR_6: sensor.service_zero_value
    - tmpl_VALUE_NAME_6: ''
    - tmpl_VALUE_SHOW_GRAPH_6: false
    - tmpl_VALUE_SHOW_STATE_6: false
    - tmpl_VALUE_LINE_COLOR_6: violet
    ############################################################
    - tmpl_SENSOR_BACK: sensor.service_zero_value
    - tmpl_VALUE_NAME_BACK: ''
    - tmpl_INPUT_SHOW_GRAPH_BACK: input_boolean.service_false_value
    - tmpl_VALUE_LINE_COLOR_BACK: 'rgba(50,73,92,0.5)'
    ############################################################
    - tmpl_SENSOR_BACK_2: sensor.service_zero_value
    - tmpl_VALUE_NAME_BACK_2: ''
    - tmpl_INPUT_SHOW_GRAPH_BACK_2: input_boolean.service_false_value
    - tmpl_VALUE_LINE_COLOR_BACK_2: 'rgba(255,0,0,0.5)'
    ############################################################
    - tmpl_SENSOR_X_AXIS: sensor.servicewithhistory_zero_value
    - tmpl_VALUE_SHOW_GRAPH_X_AXIS: false
    - tmpl_VALUE_LINE_COLOR_X_AXIS: 'rgb(255,0,0)'

  card: &decl_graph_tmpl_card
    type: custom:config-template-card
    
    variables: &decl_graph_variables
      varTHEME_DARK_MODE: 'states[''input_boolean.theme_dark_mode''].state'
      varINPUT_HOURS_TO_SHOW: 'states[''[[tmpl_INPUT_HOURS_TO_SHOW]]'']'
      varINPUT_SHOW_EXTREMA: 'states[''[[tmpl_INPUT_SHOW_EXTREMA]]'']'
      varINPUT_SHOW_AVERAGE: 'states[''[[tmpl_INPUT_SHOW_AVERAGE]]'']'
      varINPUT_SHOW_POINTS: 'states[''[[tmpl_INPUT_SHOW_POINTS]]'']'
      varSENSOR: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR]]' :
        "sensor.service_zero_value"
      varINPUT_SHOW_GRAPH_BACK: 'states[''[[tmpl_INPUT_SHOW_GRAPH_BACK]]'']'
      varINPUT_SHOW_GRAPH_BACK_2: 'states[''[[tmpl_INPUT_SHOW_GRAPH_BACK_2]]'']'
      varSENSOR_BACK: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ?
        '[[tmpl_SENSOR_BACK]]' : "sensor.service_zero_value"
      varSENSOR_BACK_2: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ?
        '[[tmpl_SENSOR_BACK_2]]' : "sensor.service_zero_value"
      varSENSOR_2: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_2]]'
        : "sensor.service_zero_value"
      varSENSOR_3: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_3]]'
        : "sensor.service_zero_value"
      varSENSOR_4: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_4]]'
        : "sensor.service_zero_value"
      varSENSOR_5: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_5]]'
        : "sensor.service_zero_value"
      varSENSOR_6: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_6]]'
        : "sensor.service_zero_value"

    entities: &decl_graph_tmpl_entities
      - '[[tmpl_INPUT_HOURS_TO_SHOW]]'
      - '[[tmpl_INPUT_SHOW_EXTREMA]]'
      - '[[tmpl_INPUT_SHOW_AVERAGE]]'
      - '[[tmpl_INPUT_SHOW_POINTS]]'
      - '[[tmpl_INPUT_REALTIME]]'
      - '${varSENSOR}'
      - '${varSENSOR_2}'
      - '${varSENSOR_3}'
      - '${varSENSOR_4}'
      - '${varSENSOR_5}'
      - '${varSENSOR_6}'
      - '${varSENSOR_BACK}'
      - '[[tmpl_INPUT_SHOW_GRAPH_BACK]]'
      - '${varSENSOR_BACK_2}'
      - '[[tmpl_INPUT_SHOW_GRAPH_BACK_2]]'

    card:
      type: custom:decluttering-card
      template: decl_graph
      variables: &decl_graph_tmpl_call_variables
        - VALUE_GRAPH_TYPE: '[[tmpl_VALUE_GRAPH_TYPE]]'
        - VALUE_TITLE: '[[tmpl_VALUE_TITLE]]'
        - VALUE_HOURS_TO_SHOW: '${varINPUT_HOURS_TO_SHOW.state}'
        - VALUE_UPDATE_INTERVAL: '[[tmpl_VALUE_UPDATE_INTERVAL]]'
        - VALUE_POINTS_PER_HOUR: '[[tmpl_VALUE_POINTS_PER_HOUR]]'
        - VALUE_SHOW_POINTS: '${varINPUT_SHOW_POINTS.state === ''on'' ? true : false}'
        - VALUE_SHOW_EXTREMA: '${varINPUT_SHOW_EXTREMA.state === ''on'' ? true : false}'
        - VALUE_SHOW_AVERAGE: '${varINPUT_SHOW_AVERAGE.state === ''on'' ? true : false}'
        - VALUE_SHOW_LABELS: '[[tmpl_VALUE_SHOW_LABELS]]'
        - VALUE_SHOW_NAME: '[[tmpl_VALUE_SHOW_NAME]]'
        - VALUE_SHOW_FILL: '[[tmpl_VALUE_SHOW_FILL]]'
        - VALUE_STATE_ADAPTIVE_COLOR: '[[tmpl_VALUE_STATE_ADAPTIVE_COLOR]]'
        - VALUE_HEIGHT: '[[tmpl_VALUE_HEIGHT]]'
        - VALUE_LOWER_BOUND: '[[tmpl_VALUE_LOWER_BOUND]]'
        - VALUE_AGGREGATE_FUNC: '[[tmpl_VALUE_AGGREGATE_FUNC]]'
        - VALUE_GROUP_BY: '[[tmpl_VALUE_GROUP_BY]]'
        - VALUE_STATE_MAP: '[[tmpl_VALUE_STATE_MAP]]'
        - VALUE_SHOW_LEGEND: '[[tmpl_VALUE_SHOW_LEGEND]]'
        - VALUE_COLOR_THRESHOLDS: '[[tmpl_VALUE_COLOR_THRESHOLDS]]'
        - VALUE_COLOR_THRESHOLDS_TRANSITION: '[[tmpl_VALUE_COLOR_THRESHOLDS_TRANSITION]]'
        - VALUE_COMPACT_MIN_MAX_AVG_INFO: '[[tmpl_VALUE_COMPACT_MIN_MAX_AVG_INFO]]'
        ##################################################################
        - SENSOR: '[[tmpl_SENSOR]]'
        - VALUE_NAME: '[[tmpl_VALUE_NAME]]'
        - VALUE_SHOW_GRAPH: '[[tmpl_VALUE_SHOW_GRAPH]]'
        - VALUE_SHOW_STATE: >-
            ${varINPUT_SHOW_POINTS.state === 'on' ? true :
            [[tmpl_VALUE_SHOW_STATE]]}
        - VALUE_LINE_COLOR: '[[tmpl_VALUE_LINE_COLOR]]'
        ##################################################################
        - SENSOR_2: '[[tmpl_SENSOR_2]]'
        - VALUE_NAME_2: '[[tmpl_VALUE_NAME_2]]'
        - VALUE_SHOW_GRAPH_2: '[[tmpl_VALUE_SHOW_GRAPH_2]]'
        - VALUE_SHOW_STATE_2: >-
            ${[[tmpl_VALUE_SHOW_GRAPH_2]] === true ?
            (varINPUT_SHOW_POINTS.state === 'on' ? true :
            [[tmpl_VALUE_SHOW_STATE_2]]) : false}
        - VALUE_LINE_COLOR_2: '[[tmpl_VALUE_LINE_COLOR_2]]'
        ##################################################################
        - SENSOR_3: '[[tmpl_SENSOR_3]]'
        - VALUE_NAME_3: '[[tmpl_VALUE_NAME_3]]'
        - VALUE_SHOW_GRAPH_3: '[[tmpl_VALUE_SHOW_GRAPH_3]]'
        - VALUE_SHOW_STATE_3: >-
            ${[[tmpl_VALUE_SHOW_GRAPH_3]] === true ?
            (varINPUT_SHOW_POINTS.state === 'on' ? true :
            [[tmpl_VALUE_SHOW_STATE_3]]) : false}
        - VALUE_LINE_COLOR_3: '[[tmpl_VALUE_LINE_COLOR_3]]'
        ##################################################################
        - SENSOR_4: '[[tmpl_SENSOR_4]]'
        - VALUE_NAME_4: '[[tmpl_VALUE_NAME_4]]'
        - VALUE_SHOW_GRAPH_4: '[[tmpl_VALUE_SHOW_GRAPH_4]]'
        - VALUE_SHOW_STATE_4: >-
            ${[[tmpl_VALUE_SHOW_GRAPH_4]] === true ?
            (varINPUT_SHOW_POINTS.state === 'on' ? true :
            [[tmpl_VALUE_SHOW_STATE_4]]) : false}
        - VALUE_LINE_COLOR_4: '[[tmpl_VALUE_LINE_COLOR_4]]'
        ##################################################################
        - SENSOR_5: '[[tmpl_SENSOR_5]]'
        - VALUE_NAME_5: '[[tmpl_VALUE_NAME_5]]'
        - VALUE_SHOW_GRAPH_5: '[[tmpl_VALUE_SHOW_GRAPH_5]]'
        - VALUE_SHOW_STATE_5: >-
            ${[[tmpl_VALUE_SHOW_GRAPH_5]] === true ?
            (varINPUT_SHOW_POINTS.state === 'on' ? true :
            [[tmpl_VALUE_SHOW_STATE_5]]) : false}
        - VALUE_LINE_COLOR_5: '[[tmpl_VALUE_LINE_COLOR_5]]'
        ##################################################################
        - SENSOR_6: '[[tmpl_SENSOR_6]]'
        - VALUE_NAME_6: '[[tmpl_VALUE_NAME_6]]'
        - VALUE_SHOW_GRAPH_6: '[[tmpl_VALUE_SHOW_GRAPH_6]]'
        - VALUE_SHOW_STATE_6: >-
            ${[[tmpl_VALUE_SHOW_GRAPH_6]] === true ?
            (varINPUT_SHOW_POINTS.state === 'on' ? true :
            [[tmpl_VALUE_SHOW_STATE_6]]) : false}
        - VALUE_LINE_COLOR_6: '[[tmpl_VALUE_LINE_COLOR_6]]'
        ##################################################################
        - SENSOR_BACK: '[[tmpl_SENSOR_BACK]]'
        - VALUE_NAME_BACK: '[[tmpl_VALUE_NAME_BACK]]'
        - VALUE_SHOW_GRAPH_BACK: '${varINPUT_SHOW_GRAPH_BACK.state === ''on'' ? true : false}'
        - VALUE_LINE_COLOR_BACK: '[[tmpl_VALUE_LINE_COLOR_BACK]]'
        ##################################################################
        - SENSOR_BACK_2: '[[tmpl_SENSOR_BACK_2]]'
        - VALUE_NAME_BACK_2: '[[tmpl_VALUE_NAME_BACK_2]]'
        - VALUE_SHOW_GRAPH_BACK_2: '${varINPUT_SHOW_GRAPH_BACK_2.state === ''on'' ? true : false}'
        - VALUE_LINE_COLOR_BACK_2: '[[tmpl_VALUE_LINE_COLOR_BACK_2]]'
        ##################################################################
        - SENSOR_X_AXIS: '[[tmpl_SENSOR_X_AXIS]]'
        - VALUE_SHOW_GRAPH_X_AXIS: '[[tmpl_VALUE_SHOW_GRAPH_X_AXIS]]'
        - VALUE_LINE_COLOR_X_AXIS: '[[tmpl_VALUE_LINE_COLOR_X_AXIS]]'

Notes:

  1. For some boolean values (which are supposed to be managed by "input_boolean") the default value is specified - "input_boolean.service_false_value":
input_boolean:
  service_false_value:
    name: "Service: false value"
    icon: mdi:null
    initial: false

This entity must not be changed via GUI, must be always "false".

  1. For some boolean values (which are supposed to be managed by "input_boolean") the default value is specified - "input_boolean.service_true_value":
input_boolean:
  service_true_value:
    name: "Service: true value"
    icon: mdi:plus-one
    initial: true

This entity must not be changed via GUI, must be always "true".

  1. Most of the input variables for the Template #2 are repeating the input variables for the Template #1 with same default values.

  2. Explanations for "tmpl_INPUT_REALTIME" are provided below.

  3. YAML anchors are used, do not delete them - they may be useful if you decide to create new templates based on this one (like it is described for reduced templates).

  4. Some input variables have a "VALUE_" prefix in a name - that means this variable is a constant “some value” (a string, a number, a boolean value, a dictionary) - these values are defined on creation. Some input variables have an "INPUT_" prefix in a name - that means that this variable is an input helper ("input_select" for the "hours_to_show", "input_boolean" for properties like "show_extrema") - these values may be changed online.

Simple rules how to set a value for these "INPUT_" input variables when using a template:

  • "tmpl_INPUT_SHOW_EXTREMA", "tmpl_INPUT_SHOW_AVERAGE"
  • "tmpl_INPUT_SHOW_POINTS"
  • "tmpl_INPUT_REALTIME"
  • "tmpl_INPUT_SHOW_GRAPH_BACK", "tmpl_INPUT_SHOW_GRAPH_BACK_2"

  1. If some value is "false" by default (i.e. "input_boolean.service_false_value") - then there is no sense to specify this explicitly:
    "- tmpl_INPUT_SHOW_EXTREMA: input_boolean.service_false_value"
    You should specify:
    "- tmpl_INPUT_SHOW_EXTREMA: input_boolean.service_true_value" - means “always true regardless of GUI settings”,
    or
    "- tmpl_INPUT_SHOW_EXTREMA: input_boolean.graph_show_extrema_test" - means “managed by GUI settings”.

  2. If some value is "true" by default (i.e. "input_boolean.service_true_value") - then there is no sense to specify this explicitly:
    "tmpl_INPUT_REALTIME: input_boolean.service_true_value"
    You should specify:
    "- tmpl_INPUT_REALTIME: input_boolean.service_false_value" - means “always false regardless of GUI settings”,
    or
    "- tmpl_INPUT_REALTIME: input_boolean.graph_realtime_test" - means “managed by GUI settings”.

8

How the template for history-graph 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.

Code of Template #1 for "history-graph" (inside a "decluttering_templates" section):

decl_graph_stock:
  default:
    - VALUE_REFRESH_INTERVAL: 0
    - SENSOR_2: sensor.service_zero_value
    - VALUE_NAME_2: ''
    - SENSOR_3: sensor.service_zero_value
    - VALUE_NAME_3: ''
    - SENSOR_4: sensor.service_zero_value
    - VALUE_NAME_4: ''
    - SENSOR_5: sensor.service_zero_value
    - VALUE_NAME_5: ''
    - SENSOR_6: sensor.service_zero_value
    - VALUE_NAME_6: ''
  card:
    type: history-graph
    entities:
      - entity: '[[SENSOR]]'
        name: '[[VALUE_NAME]]'
      - entity: '[[SENSOR_2]]'
        name: '[[VALUE_NAME_2]]'
      - entity: '[[SENSOR_3]]'
        name: '[[VALUE_NAME_3]]'
      - entity: '[[SENSOR_4]]'
        name: '[[VALUE_NAME_4]]'
      - entity: '[[SENSOR_5]]'
        name: '[[VALUE_NAME_5]]'
      - entity: '[[SENSOR_6]]'
        name: '[[VALUE_NAME_6]]'
    hours_to_show: '[[VALUE_HOURS_TO_SHOW]]'
    refresh_interval: '[[VALUE_REFRESH_INTERVAL]]'

Notes:

  1. The template supports up to 6 graphs on one card.
  2. For sensors ## 2…6 the default value is specified - "sensor.service_zero_value" (see description above).

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 "tmpl_INPUT_REALTIME").

Code of Template #2 for "history-graph" (inside a "decluttering_templates" section):

decl_graph_stock_tmpl:
  default:
    - tmpl_VALUE_REFRESH_INTERVAL: 0
    - tmpl_INPUT_REALTIME: input_boolean.service_true_value
    - tmpl_SENSOR_2: sensor.service_zero_value
    - tmpl_VALUE_NAME_2: ''
    - tmpl_SENSOR_3: sensor.service_zero_value
    - tmpl_VALUE_NAME_3: ''
    - tmpl_SENSOR_4: sensor.service_zero_value
    - tmpl_VALUE_NAME_4: ''
    - tmpl_SENSOR_5: sensor.service_zero_value
    - tmpl_VALUE_NAME_5: ''
    - tmpl_SENSOR_6: sensor.service_zero_value
    - tmpl_VALUE_NAME_6: ''

  card:
    type: 'custom:config-template-card'
    
    variables:
      varINPUT_HOURS_TO_SHOW: 'states[''[[tmpl_INPUT_HOURS_TO_SHOW]]'']'
      varSENSOR: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR]]' :
        "sensor.service_zero_value"
      varSENSOR_2: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_2]]'
        : "sensor.service_zero_value"
      varSENSOR_3: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_3]]'
        : "sensor.service_zero_value"
      varSENSOR_4: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_4]]'
        : "sensor.service_zero_value"
      varSENSOR_5: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_5]]'
        : "sensor.service_zero_value"
      varSENSOR_6: >-
        states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR_6]]'
        : "sensor.service_zero_value"

    entities:
      - '[[tmpl_INPUT_HOURS_TO_SHOW]]'
      - '[[tmpl_INPUT_REALTIME]]'
      - '${varSENSOR}'
      - '${varSENSOR_2}'
      - '${varSENSOR_3}'
      - '${varSENSOR_4}'
      - '${varSENSOR_5}'
      - '${varSENSOR_6}'

    card:
      type: 'custom:decluttering-card'
      template: decl_graph_stock
      variables:
        - VALUE_HOURS_TO_SHOW: '${varINPUT_HOURS_TO_SHOW.state}'
        - VALUE_REFRESH_INTERVAL: '[[tmpl_VALUE_REFRESH_INTERVAL]]'
        ##################################################################
        - SENSOR: '[[tmpl_SENSOR]]'
        - VALUE_NAME: '[[tmpl_VALUE_NAME]]'
        ##################################################################
        - SENSOR_2: '[[tmpl_SENSOR_2]]'
        - VALUE_NAME_2: '[[tmpl_VALUE_NAME_2]]'
        ##################################################################
        - SENSOR_3: '[[tmpl_SENSOR_3]]'
        - VALUE_NAME_3: '[[tmpl_VALUE_NAME_3]]'
        ##################################################################
        - SENSOR_4: '[[tmpl_SENSOR_4]]'
        - VALUE_NAME_4: '[[tmpl_VALUE_NAME_4]]'
        ##################################################################
        - SENSOR_5: '[[tmpl_SENSOR_5]]'
        - VALUE_NAME_5: '[[tmpl_VALUE_NAME_5]]'
        ##################################################################
        - SENSOR_6: '[[tmpl_SENSOR_6]]'
        - VALUE_NAME_6: '[[tmpl_VALUE_NAME_6]]'

Notes:

  1. 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 "hours_to_show".
  2. Most of the input variables for the Template #2 are repeating the input variables for the Template #1 with same default values.
  3. Explanations for "tmpl_INPUT_REALTIME" are provided below.
9

Realtime change of the graph:

Because of using "config-template-card", the graph card needs to be notified on every change of the sensors used for graphs. This notification is provided by the "entities" section inside the "config-template-card".

But there is a bad consequence - the graph blinks on every sensor’s change since the graph is being rebuilt by the "config-template-card".

To prevent this blinking, the “Realtime” flag may be used - presented by the "tmpl_INPUT_REALTIME" variable in the Template #2:

If this flag is ON, then the graph is always actual, but blinks on every change - and needs some time to display which may be too bothering on slow setups.
If this flag is OFF, then the graph needs to be refreshed manually by using F5 button (or another, depends on a browser).

How this flag works - look at the "entities" section of the "config-template-card":

states['[[tmpl_INPUT_REALTIME]]'].state === "on" ? '[[tmpl_SENSOR]]' : "sensor.service_zero_value"

If the flag is ON, then the sensor is listed as “to be monitored”, otherwise a zero sensor (which never changes) is monitored.

10

How to use the template: graphs based on history-graph (Template #1)

First let’s start with a graph for just one sensor:

  • based on "history-graph";
  • settings are default;
  • "hours_to_show" is NOT customizable - the Template #1 is used.

The sensor is for a value with a unit:

type: 'custom:decluttering-card'
template: decl_graph_stock
variables:
  - VALUE_HOURS_TO_SHOW: 24
  ##############
  - SENSOR: sensor.cleargrass_1_co2
  - VALUE_NAME: CO2

image
But actually for values with units I am going to use templates for "mini-graph-card" (my initial intention) - we’ll see it later.

Now let’s create a graph for several values w/o units:

type: 'custom:decluttering-card'
template: decl_graph_stock
variables:
  - VALUE_HOURS_TO_SHOW: 24
  ##############
  - SENSOR: sun.sun
  - VALUE_NAME: My sun
  ##############
  - SENSOR_2: sensor.night
  - VALUE_NAME_2: Night
  ##############
  - SENSOR_3: binary_sensor.iiyama_1_ping_availability_status
  - VALUE_NAME_3: PC available

image

Well, these examples could be easily implemented w/o any templates…

11

How to use the template: graphs based on history-graph with a customizable hours_to_show (Template #2):

type: 'custom:decluttering-card'
template: decl_graph_stock_tmpl
variables:
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  ##############
  - tmpl_SENSOR: sun.sun
  - tmpl_VALUE_NAME: My sun
  ##############
  - tmpl_SENSOR_2: sensor.night
  - tmpl_VALUE_NAME_2: Night
  ##############
  - tmpl_SENSOR_3: binary_sensor.iiyama_1_ping_availability_status
  - tmpl_VALUE_NAME_3: PC available

image
The value of "hours_to_show" is managed by a special input helper "input_select.graph_hours_to_show_test".

12

How to use the template: graphs based on mini-graph-card (Template #1):

Let’s start with a graph for just one sensor:

  • based on "mini-graph-card";
  • settings are default;
  • "hours_to_show" is NOT customizable - the Template #1 is used.
type: 'custom:decluttering-card'
template: decl_graph_stock
variables:
  - VALUE_HOURS_TO_SHOW: 24
  ##############
  - SENSOR: sensor.cleargrass_1_co2
  - VALUE_NAME: CO2

image

Let’s add some customization:

type: 'custom:decluttering-card'
template: decl_graph
variables:
  - VALUE_TITLE: CO2
  - VALUE_HOURS_TO_SHOW: 24
  - VALUE_SHOW_EXTREMA: true
  - VALUE_SHOW_AVERAGE: true
  ##############
  - SENSOR: sensor.cleargrass_1_co2
  - VALUE_NAME: CO2
  - VALUE_LINE_COLOR: red
  - VALUE_SHOW_STATE: false

image

That was a basic explanation with simple examples, then we’ll proceed with online customizable graphs (Template #2).

But before let’s compare these two graphs:

  • built w/o the template;
  • built with the template.
type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
        color: green
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: true
      graph: line
      points: false
      labels: true
    line_width: 1
    smoothing: false
  - type: 'custom:decluttering-card'
    template: decl_graph
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2

image
These graphs look differently - and the reason is that in the 1st graph the "lower_bound" is set automatically, in the 2nd graph it is set to "~0".
Let’s set this property for the 1st graph - and these graphs will look same:

type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
        color: green
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: true
      graph: line
      points: false
      labels: true
    line_width: 1
    smoothing: false
    lower_bound: ~0
  - type: 'custom:decluttering-card'
    template: decl_graph
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2

image

13

How to use the template: graphs based on mini-graph-card with online customizable settings (Template #2):

For one sensor:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  ##############
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2

image

With some customization:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - tmpl_INPUT_SHOW_EXTREMA: input_boolean.graph_show_extrema_test
  - tmpl_INPUT_SHOW_POINTS: input_boolean.graph_show_points_test
  - tmpl_VALUE_HEIGHT: 200
  - tmpl_VALUE_STATE_ADAPTIVE_COLOR: true
  ##############
  - tmpl_INPUT_REALTIME: input_boolean.graph_realtime_test
  ##############
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2
  - tmpl_VALUE_LINE_COLOR: red

image

With color thresholds + some customization:

    type: 'custom:decluttering-card'
    template: decl_graph_tmpl
    variables:
      - tmpl_VALUE_TITLE: CO2
      - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
      - tmpl_INPUT_SHOW_POINTS: input_boolean.graph_show_points_test
      - tmpl_INPUT_SHOW_EXTREMA: input_boolean.graph_show_extrema_test
      - tmpl_INPUT_SHOW_AVERAGE: input_boolean.graph_show_average_test
      - tmpl_VALUE_LOWER_BOUND: ~400
      - tmpl_VALUE_HEIGHT: 300
      ###################################################
      - tmpl_INPUT_REALTIME: input_boolean.graph_realtime_test
      ###################################################
      - tmpl_SENSOR: sensor.cleargrass_1_co2
      - tmpl_VALUE_NAME: CO2
      - tmpl_VALUE_LINE_COLOR: null
      ###################################################
      - tmpl_VALUE_COLOR_THRESHOLDS:
          - value: 450
            color: red
          - value: 500
            color: orange
          - value: 550
            color: yellow
          - value: 600
            color: green
          - value: 650
            color: cyan
          - value: 700
            color: blue
          - value: 750
            color: violet
          - value: 800
            color: black

image
Notes:

  1. The "tmpl_VALUE_LINE_COLOR" property must be set to "null" to enable color thresholds.
  2. Color thresholds are basically used when only one sensor is specified (not considering sensors for background graphs).
14

Minimal settings for 2 sensors:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  ################
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2 (1)
  ################
  - tmpl_SENSOR_2: sensor.cleargrass_2_co2
  - tmpl_VALUE_NAME_2: CO2 (2)
  - tmpl_VALUE_SHOW_GRAPH_2: true
  - tmpl_VALUE_SHOW_STATE_2: true

image

More sensors + some customization:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - tmpl_VALUE_SHOW_LEGEND: true
  - tmpl_VALUE_STATE_ADAPTIVE_COLOR: true
  ################
  - tmpl_INPUT_REALTIME: input_boolean.graph_realtime_test
  ################
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2 (1)
  ################
  - tmpl_SENSOR_2: sensor.cleargrass_2_co2
  - tmpl_VALUE_NAME_2: CO2 (2)
  - tmpl_VALUE_SHOW_GRAPH_2: true
  - tmpl_VALUE_SHOW_STATE_2: true
  ################
  - tmpl_SENSOR_3: sensor.mijia_300_1_co2
  - tmpl_VALUE_NAME_3: CO2 (3)
  - tmpl_VALUE_SHOW_GRAPH_3: true
  - tmpl_VALUE_SHOW_STATE_3: true

image

15

With a background graph “Day / night”:

With minimal settings:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  ###############
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2
  ###############
  - tmpl_SENSOR_BACK: sensor.night
  - tmpl_INPUT_SHOW_GRAPH_BACK: input_boolean.graph_show_night_test

image

With two background graphs - “Day / night” & “Available / unavailable”:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  ###############
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2
  ###############
  - tmpl_SENSOR_BACK: sensor.night
  - tmpl_INPUT_SHOW_GRAPH_BACK: input_boolean.graph_show_night_air
  ###############
  - tmpl_SENSOR_BACK_2: sensor.cleargrass_1_availability_status_reversed
  - tmpl_INPUT_SHOW_GRAPH_BACK_2: input_boolean.service_true_value

image
Note: the 2nd background graph looks like a narrow stripe of red color in this example.

For two sensors with a background graph “Day / night”:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  ##################
  - tmpl_SENSOR: sensor.cleargrass_1_co2
  - tmpl_VALUE_NAME: CO2 (1)
  ##################
  - tmpl_SENSOR_2: sensor.cleargrass_2_co2
  - tmpl_VALUE_NAME_2: CO2 (2)
  - tmpl_VALUE_SHOW_GRAPH_2: true
  - tmpl_VALUE_SHOW_STATE_2: true
  ##################
  - tmpl_SENSOR_BACK: sensor.night
  - tmpl_INPUT_SHOW_GRAPH_BACK: input_boolean.graph_show_night_test

image

16

How to define sensors for background graphs:

"Day / night":
There are at least 3 methods:

  1. Using a "binary_sensor":
binary_sensor:
  - platform: template
    sensors:
      night:
        friendly_name: 'Night'
        icon_template: mdi:power-sleep
        value_template: "{% if is_state('sun.sun', 'above_horizon') -%}
                         {{ 'off' }}
                         {%- else -%}
                         {{ 'on' }}
                         {%- endif %}"

In this case you need to specify a "state_map" data:

      state_map:
        - value: 'off'
          label: 0
        - value: 'on'
          label: 1

But when using the "state_map", a Code Inspector’s log is flooded by messages like:

mini-graph-card: value [2] not found in state_map mini-graph-card-bundle.js:1:66925

This issue is discussed on Github.
P.S. Although the "state_map" property is supported by the template, I do not recommend using it because of these warning messages… Probably these warnings do not slow down a browser and do not make any other harm, but I just do not like seeing these messages in the Inspector.

  1. Using a “Times of the day” integration:
binary_sensor:
  - platform: tod
    name: Night_tod
    after: sunset
    before: sunrise

I decided not to use it - sometimes the sensor was not updated properly (discussed at least here & here). Probably it is already fixed but I am not sure - I have one "tod" sensor for some testing purpose and sometimes it seems like not updating properly…

  1. Using a "sensor":
sensor:
  - platform: template
    sensors:
      night:
        friendly_name: 'Night'
        icon_template: mdi:power-sleep
        value_template: "{% if is_state('sun.sun', 'above_horizon') -%}
                         {{ 0 | int }}
                         {%- else -%}
                         {{ 1 | int }}
                         {%- endif %}"

The easiest way, does not require the "state_map".
I decided to use this method.

"Available / unavailable":
This background graph shows whether some sensors are obtained from a properly working device or not.
How to define “the device is available” - depends on a particular device (using the "ping" integration, other methods).
Usually a result of availability check is a flag "true/false" ("on/off").
For making a background graph the result must be converted using a template sensor:

  • “available” → “0”;
  • “unavailable” → “1”.
17

With a background graph “Day / night” + zero X-axis:

type: 'custom:decluttering-card'
template: decl_graph_tmpl
variables:
  - tmpl_VALUE_TITLE: CO2 delta
  - tmpl_INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - tmpl_INPUT_SHOW_POINTS: input_boolean.graph_show_points_test
  - tmpl_INPUT_SHOW_EXTREMA: input_boolean.graph_show_extrema_test
  - tmpl_INPUT_REALTIME: input_boolean.graph_realtime_test
  ############
  - tmpl_SENSOR: sensor.calc_co2_diff_cg1_cg2
  - tmpl_VALUE_NAME: CO2 delta
  ############
  - tmpl_SENSOR_BACK: sensor.night
  - tmpl_INPUT_SHOW_GRAPH_BACK: input_boolean.graph_show_night_test
  ############
  - tmpl_VALUE_SHOW_GRAPH_X_AXIS: true

image
These graphs are useful for sensors which could have positive & negative values.

18

The first problem - trying to create a “bar” graph:

Intro:
I do not use “bar” graphs. I think they are not as accurate as usual “line” graphs.
Lets create 2 graphs for one sensor w/o using the template:

type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: true
      graph: line
      points: false
    line_width: 1
    smoothing: false
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: true
      graph: bar
    smoothing: false

image
The graphs are supposed to reflect a change of some value for 24 hours, every 1 minute (actual update interval of the data is about 30 sec).
These graphs look differently.

For 2 sensors the difference is more visible:

type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
      - entity: sensor.cleargrass_2_co2
        name: CO2
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: true
      graph: line
      points: false
    line_width: 1
    smoothing: false
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
      - entity: sensor.cleargrass_2_co2
        name: CO2
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: true
      graph: bar
    smoothing: false

image
image463×505 25.6 KB

I think that “bar” graphs are useful for sensors like:

  • a rarely updating sensor - for example, it is updated once per hour; so the “bar” graph for 24 hours will look like a “line” graph;
  • a sensor which is updated very often (like “every 1 minute”) but for which we do not need so accurate graph; for us it will be quite enough to see a graph for “every 1 hour for 24 hours”.

One more special case - using a "group_by" feature (like it is described here). Here the “bar” graph could be also appropriate.
And the more sensors you have on the card - the less precise the graph is.

So, my message is “I do not use bar graphs”.

But may I create “bar” graphs using the template?
Surely you can. Let’s do it:

type: vertical-stack
cards:
  - type: 'custom:decluttering-card'
    template: decl_graph
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2
  - type: 'custom:decluttering-card'
    template: decl_graph
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2
      - VALUE_GRAPH_TYPE: bar

image
First - the “bar” graph is less precise.
Second - why these bars are so wide???

Let’s simulate the same condition w/o the template.
The card below has 5 graphs (all w/o using the template):

  • one sensor, “line” graph;
  • one sensor, “bar” graph;
  • three sensors, “line” graph;
  • three sensors, “bar” graph;
  • three sensors (2 of them are not displayed), “bar” graph.
type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
        color: green
        show_graph: true
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: false
      graph: line
      points: false
      legend: false
    line_width: 1
    smoothing: false
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
        color: green
        show_graph: true
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: false
      graph: bar
      points: false
      legend: false
    line_width: 1
    smoothing: false
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2-1
        color: green
        show_graph: true
      - entity: sensor.cleargrass_2_co2
        name: CO2-2
        color: orange
        show_graph: true
      - entity: sensor.mijia_300_1_co2
        name: CO2-3
        color: red
        show_graph: true
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: false
      graph: line
      points: false
      legend: false
    line_width: 1
    smoothing: false
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2-1
        color: green
        show_graph: true
      - entity: sensor.cleargrass_2_co2
        name: CO2-2
        color: orange
        show_graph: true
      - entity: sensor.mijia_300_1_co2
        name: CO2-3
        color: red
        show_graph: true
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: false
      graph: bar
      points: false
      legend: false
    line_width: 1
    smoothing: false
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2-1
        color: green
        show_graph: true
      - entity: sensor.cleargrass_2_co2
        name: CO2-2
        color: orange
        show_graph: false
      - entity: sensor.mijia_300_1_co2
        name: CO2-3
        color: red
        show_graph: false
    name: CO2
    hours_to_show: 24
    points_per_hour: 60
    aggregate_func: last
    show:
      state: false
      graph: bar
      points: false
      legend: false
    line_width: 1
    smoothing: false

The first two graphs are for one sensor - “line” & “bar” graphs:
image
Next two graphs are for three sensors - “line” & “bar” graphs:
image
And the most interesting case - a “bar” graph with 3 sensors (2 of them are not displayed):
image
We can see that bars for the 1st sensor occupies space which is supposed to be used by other 2 sensors - that is why these bars are so wide. I think this is a kind of bug: since some sensors are not displayed ("show_graph: false") the 1st sensor’s bars must be calculated like there is just one sensor in the card (i.e. like the 2nd graph described above).
That is why when using the template these bars are so wide - because the card has NINE sensors (6 sensors + 2 background graphs + 1 zero X-axis) - so the bars for ONE displayed graph occupy a space allocated for NINE sensors.

How to create nice “bar” graphs with the template?
The template which supports “6 sensors + 2 background graphs + 1 zero X-axis” must be rewritten into one more template “1 sensor”.

19

Reduced templates for “bar” graphs:

How to create reduced templates:
We know how to create templates for “6 sensors + 2 background graphs + 1 zero X-axis” - it is descibed above:

These templates work fine.
But when trying to create “bar” graphs we got bad results.

Now let’s create these reduced templates:

  • for one sensor (Template #1, Template #2);
  • for two sensors (Template #1, Template #2);
  • for three sensors (Template #1, Template #2).

These templates are supposed to be used only for “bar” graphs. I think that maximum 3 sensors must be enough for “bars” since “the more sensors - the less precision”. And because of clear reasons these templates do not support background graphs & zero X-axis.

Place this code in the same yaml-file as Template #1 (required for anchors):

decl_graph_1:
  default: *decl_graph_default
  card:
    <<: *decl_card_settings
    entities:
      - *decl_graph_entities_1
##################################################################
decl_graph_2:
  default: *decl_graph_default
  card:
    <<: *decl_card_settings
    entities:
      - *decl_graph_entities_1
      - *decl_graph_entities_2
##################################################################
decl_graph_3:
  default: *decl_graph_default
  card:
    <<: *decl_card_settings
    entities:
      - *decl_graph_entities_1
      - *decl_graph_entities_2
      - *decl_graph_entities_3

The 2nd template (based on "config-template-card") also must be placed in the same yaml-file as Template #2 (required for anchors):

decl_graph_1_tmpl:
  default: *decl_graph_tmpl_default
  card:
    type: custom:config-template-card
    variables: *decl_graph_variables
    entities: *decl_graph_tmpl_entities
    card:
      type: custom:decluttering-card
      template: decl_graph_1
      variables: *decl_graph_tmpl_call_variables
###############################################################################
decl_graph_2_tmpl:
  default: *decl_graph_tmpl_default
  card:
    type: custom:config-template-card
    variables: *decl_graph_variables
    entities: *decl_graph_tmpl_entities
    card:
      type: custom:decluttering-card
      template: decl_graph_2
      variables: *decl_graph_tmpl_call_variables
###############################################################################
decl_graph_3_tmpl:
  default: *decl_graph_tmpl_default
  card:
    type: custom:config-template-card
    variables: *decl_graph_variables
    entities: *decl_graph_tmpl_entities
    card:
      type: custom:decluttering-card
      template: decl_graph_3
      variables: *decl_graph_tmpl_call_variables

How to use these reduced templates:
Like it is described here:

type: vertical-stack
cards:
  - type: 'custom:decluttering-card'
    template: decl_graph
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2
  - type: 'custom:decluttering-card'
    template: decl_graph_1
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2
      - VALUE_GRAPH_TYPE: bar

image
For two sensors:

type: vertical-stack
cards:
  - type: 'custom:decluttering-card'
    template: decl_graph
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2-1
      - SENSOR_2: sensor.cleargrass_2_co2
      - VALUE_NAME: CO2-2
      - VALUE_SHOW_GRAPH_2: true
      - VALUE_SHOW_STATE_2: true
  - type: 'custom:decluttering-card'
    template: decl_graph_2
    variables:
      - VALUE_TITLE: CO2
      - VALUE_HOURS_TO_SHOW: 24
      - SENSOR: sensor.cleargrass_1_co2
      - VALUE_NAME: CO2-1
      - SENSOR_2: sensor.cleargrass_2_co2
      - VALUE_NAME: CO2-2
      - VALUE_SHOW_GRAPH_2: true
      - VALUE_SHOW_STATE_2: true
      - VALUE_GRAPH_TYPE: bar

image

20

Settings for graphs:

Which settings are required:
The following settings may be used to customize graphs:

  • hours_to_show;
  • show_extrema;
  • show_average;
  • show_points;
  • show background graphs (separately for background #1, background #2);
  • “Realtime” flag.

Since each Lovelace view may be dedicated for showing data for some particular device (or a set of devices) or for some particular area, it may be convenient to have a unique set of settings for each device (set of devices) or area.
Examples:

  • settings for all network equipment (routers, switches);
  • settings for the air humidifier;
  • settings for all climate equipment.

Each setting is managed by a corresponding input helper (below examples for climate equipment are provided):

  1. "input_select.graph_hours_to_show_climate"
input_select:
  graph_hours_to_show_climate:
    name: 'input_graph: climate: hours_to_show'
    options:
      - 1
      - 2
      - 4
      ...
      - 66
      - 72
    icon: mdi:clock-start
  1. "input_boolean.graph_show_extrema_climate"
input_boolean:
  graph_show_extrema_climate:
    name: 'input_graph: climate: show_extrema'
    icon: mdi:arrow-up-down
  1. "input_boolean.graph_show_average_climate"
input_boolean:
  graph_show_average_climate:
    name: 'input_graph: climate: show_average'
    icon: mdi:format-align-middle
  1. "input_boolean.graph_show_points_climate"
input_boolean:
  graph_show_points_climate:
    name: 'input_graph: climate: show_points'
    icon: mdi:target
  1. "input_boolean.graph_realtime_climate"
input_boolean:
  graph_realtime_climate:
    name: 'input_graph: realtime_climate'
    icon: mdi:chart-areaspline
  1. "input_boolean.graph_show_ping_availability_climate", "input_boolean.graph_show_night_climate" 
input_boolean:
  graph_show_ping_availability_climate:
    name: 'input_graph: climate: show_ping_availability'
    icon: mdi:server

  graph_show_night_climate:
    name: 'input_graph: climate: show_night'
    icon: mdi:server

How to manage the settings via GUI:
Since each Lovelace view may be dedicated for showing data for some particular device (or a set of devices) or for some particular area, it may be convenient to have a possibility to manage these settings directly on the view (not on some separate view), like this:

изображение
изображение1204×867 115 KB

Using this approach, each view containing graphs can have its own possibility to manage these graphs.

For changing settings, a card may be used.
Since these settings may be similar for each view, it is a good idea to have a "decluttering-card":

  decl_graph_settings:
    default:
      - INPUT_NEW_STYLE: input_boolean.service_true_value
      - SHOW__SHOW_EXTREMA: input_boolean.service_true_value
      - SHOW__SHOW_AVERAGE: input_boolean.service_false_value
      - SHOW__SHOW_POINTS: input_boolean.service_true_value
      - SHOW__BACK: input_boolean.service_false_value
      - BACK_NAME: Day / night
      - SHOW__BACK_2: input_boolean.service_false_value
      - SHOW__REALTIME: input_boolean.service_true_value
    card:
      type: entities
      entities:
        - type: 'custom:fold-entity-row'
          head:
            entity: '[[INPUT_HOURS_TO_SHOW]]'
            name: Hours to show
            tap_action: none
          padding: 0
          open: false
          clickable: false
          entities:
            - type: conditional
              conditions:
                - entity: '[[INPUT_NEW_STYLE]]'
                  state: 'on'
                - entity: '[[SHOW__SHOW_EXTREMA]]'
                  state: 'on'
              row:
                entity: '[[INPUT_SHOW_EXTREMA]]'
                name: Min / max value
                state_color: true
                tap_action: none
            - type: conditional
              conditions:
                - entity: '[[INPUT_NEW_STYLE]]'
                  state: 'on'
                - entity: '[[SHOW__SHOW_AVERAGE]]'
                  state: 'on'
              row:
                entity: '[[INPUT_SHOW_AVERAGE]]'
                name: Average value
                state_color: true
                tap_action: none
            - type: conditional
              conditions:
                - entity: '[[INPUT_NEW_STYLE]]'
                  state: 'on'
                - entity: '[[SHOW__SHOW_POINTS]]'
                  state: 'on'
              row:
                entity: '[[INPUT_SHOW_POINTS]]'
                name: Show points
                state_color: true
                tap_action: none
            - type: conditional
              conditions:
                - entity: '[[INPUT_NEW_STYLE]]'
                  state: 'on'
                - entity: '[[SHOW__BACK]]'
                  state: 'on'
              row:
                entity: '[[INPUT_SHOW_BACK]]'
                name: '[[BACK_NAME]]'
                state_color: true
                tap_action: none
            - type: conditional
              conditions:
                - entity: '[[INPUT_NEW_STYLE]]'
                  state: 'on'
                - entity: '[[SHOW__BACK_2]]'
                  state: 'on'
              row:
                entity: '[[INPUT_SHOW_BACK_2]]'
                name: '[[BACK_NAME_2]]'
                state_color: true
                tap_action: none
        - type: conditional
          conditions:
            - entity: '[[SHOW__REALTIME]]'
              state: 'on'
          row:
            entity: '[[INPUT_REALTIME]]'
            name: Realtime graphs
            state_color: true
            tap_action: none
      show_header_toggle: false
      title: '[[TITLE]]'

Notes:

  1. The template can manage settings for "mini-graph-card" & "history-graph" card - depends on the "INPUT_NEW_STYLE" input variable (defines whether "mini-graph-style" or "history-graph" is managed).
    For this variable the default value is specified - "input_boolean.service_true_value" (means that the settings are for "mini-graph-style"):
input_boolean:
  service_true_value:
    name: "Service: true value"
    icon: mdi:plus-one
    initial: true

This entity must not be changed via GUI, must be always "true".

  1. Some settings are available only for "mini-graph-card" (“new style”), that is why the “Conditional card” is used.

  2. Each setting is displayed if it is “enabled” - i.e. the corresponding flag "SHOW__xxxx" is set to "input_boolean.service_true_value" which is always “ON” (or “True”).
    To disable some setting, use "input_boolean.service_false_value":

input_boolean:
  service_false_value:
    name: "Service: false value"
    icon: mdi:null
    initial: false

Also, some settings are enabled by default, some settings are disabled by default - check the "default" section of the decluttering template.

  1. The decluttering template allows to select TWO background graphs - for example, “Day / night” and “Available / unavailable”. To enable this feature, the "SHOW__BACK" & "SHOW__BACK_2" must be specified as per this example:
  - SHOW__BACK: input_boolean.service_true_value

Examples of use:
Example of use #1 - settings for graphs with the “Day / night” background, w/o the “Realtime” flag, w/o a title:

type: 'custom:decluttering-card'
template: decl_graph_settings
variables:
  - TITLE: ''
  - INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - INPUT_SHOW_EXTREMA: input_boolean.graph_show_extrema_test
  - INPUT_SHOW_POINTS: input_boolean.graph_show_points_test
  - SHOW__BACK: input_boolean.service_true_value
  - INPUT_SHOW_BACK: input_boolean.graph_show_night_test
  - SHOW__REALTIME: input_boolean.service_false_value

Pictures of the settings card are provided below.
Collapsed view:
image
Expanded view:
image

Example of use #2:

type: 'custom:decluttering-card'
template: decl_graph_settings
variables:
  - TITLE: Settings
  - INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - INPUT_SHOW_EXTREMA: input_boolean.graph_show_extrema_test
  - SHOW__SHOW_AVERAGE: input_boolean.service_true_value
  - INPUT_SHOW_AVERAGE: input_boolean.graph_show_average_test
  - INPUT_SHOW_POINTS: input_boolean.graph_show_points_test
  - SHOW__BACK: input_boolean.service_true_value
  - INPUT_SHOW_BACK: input_boolean.graph_show_ping_availability_host
  - BACK_NAME: Availablity (ping)
  - SHOW__BACK_2: input_boolean.service_true_value
  - INPUT_SHOW_BACK_2: input_boolean.graph_show_integration_availability_host
  - BACK_NAME_2: Availablity (Netdata)
  - INPUT_REALTIME: input_boolean.graph_realtime_test

This example provides settings for graphs for some PC (for statistical data like “CPU load”, “RAM usage” etc) including showing average value & two backgrounds:

  • availability of this PC (ping);
  • availability of Netdata node on this PC (source of statistical data).

Pictures of the settings card are provided below.
Collapsed view:
image
Expanded view:
image

Example of use #3 - a reduced set of settings for graphs w/o showing extrema values, w/o a background, w/o the “Realtime” graph:

type: 'custom:decluttering-card'
template: decl_graph_settings
variables:
  - TITLE: Settings
  - INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - SHOW__SHOW_EXTREMA: input_boolean.service_false_value
  - INPUT_SHOW_POINTS: input_boolean.graph_show_points_test
  - SHOW__REALTIME: input_boolean.service_false_value

Pictures of the settings card are provided below.
Collapsed view:
image
Expanded view:
image

Example of use #4 - settings for "history-graph":

type: 'custom:decluttering-card'
template: decl_graph_settings
variables:
  - TITLE: Settings
  - INPUT_HOURS_TO_SHOW: input_select.graph_hours_to_show_test
  - INPUT_NEW_STYLE: input_boolean.service_false_value
  - INPUT_REALTIME: input_boolean.graph_realtime_test

Picture of the settings card is provided below (same for collapsed & expanded view):
image

21

How to show only extrema and/or average values:

It is rather convenient to see extrema and/or average values right in the graph:
image

But sometimes it is required to have 2 or more graphs on the card - in this case displaying extrema/average values is possible for only one sensor, which is confusing.
By using this template it is possible to display extrema/average values on a separate card, so you may display a mini-graph-card with 3 graphs and 3 small cards below stacked vertically:
image
Here is a code:

      type: custom:decluttering-card
      template: decl_graph_tmpl
      variables:
        - tmpl_VALUE_TITLE: ... some title ...
        - tmpl_INPUT_HOURS_TO_SHOW: ...
        - tmpl_INPUT_SHOW_EXTREMA: input_boolean.service_true_value
        - tmpl_INPUT_SHOW_AVERAGE: input_boolean.service_true_value
        - tmpl_VALUE_GRAPH_TYPE: false
        - tmpl_INPUT_REALTIME: ...
        - tmpl_VALUE_COMPACT_MIN_MAX_AVG_INFO: ... true or false ...
        ##############################################################
        - tmpl_SENSOR: ... some sensor...
        - tmpl_VALUE_NAME: ''
        - tmpl_VALUE_SHOW_STATE: false

The tmpl_VALUE_COMPACT_MIN_MAX_AVG_INFO variable is used to make fonts for extrema/average values smaller. Surely it may be used in a “usual graphs” (i.e. graphs with a curve & extrema/average values).
A small example: I needed these graphs to be stacked horizontally, so I applied this “small font” style.
image