feat(graph): add graph card

[piitaya]

Fixes #74

TODO : merge graph and entity card for simplicity.

[alessandroias]

If someone, like me, needs this card, they can temporarily use a combination of mini-graph-card and stack in card as a workaround.
It's not a perfect solution, but it doesn't clash too much with the rest of the dashboard.
Below is the code to obtain a card similar to the one not yet implemented:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Temperatura
    secondary: '{{ states(entity) }} °C'
    icon: mdi:thermometer
    icon_color: |-
      {% if is_state(entity, 'unknown') %}
          
      {% elif states(entity) | float >= 45 %}
         red
      {% elif states(entity) | float >= 42 %}
         orange
      {% elif states(entity) | float >= 39 %}
         amber
      {% elif states(entity) | float >= 36 %}
         yellow
      {% else %}
         green
      {% endif %}
    entity: sensor.cpu_temperature
  - type: custom:mini-graph-card
    entities:
      - sensor.cpu_temperature
    group: true
    show:
      icon: false
      name: false
      state: false
    hours_to_show: 6
    points_per_hour: 3
    color_thresholds:
      - value: 0
        color: '#47a04b'
      - value: 36
        color: '#ffeb3b'
      - value: 39
        color: '#ffc107'
      - value: 42
        color: '#ff9800'
      - value: 45
        color: '#f44336'

The result:

[raphaeleduardo42]

Hey @alessandroias

Really thank you for sharing, I've took your code and updated it to my needs. I'm sharing it below.

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Temperatura
        secondary: '{{ states(entity) }} °C'
        icon: mdi:thermometer
        icon_color: |-
          {% if is_state(entity, 'unknown') %}
            disabled
          {% elif states(entity) | float >= 28 %}
             red
          {% elif states(entity) | float >= 25 %}
             orange
          {% elif states(entity) | float >= 23 %}
            amber
          {% elif states(entity) | float >= 19 %}
             light-blue
          {% else %}
             blue
          {% endif %}
        entity: sensor.quarto_temperatura
      - type: custom:mini-graph-card
        entities:
          - sensor.quarto_temperatura
        group: true
        show:
          icon: false
          name: false
          state: false
        hours_to_show: 6
        points_per_hour: 3
        color_thresholds:
          - value: 0
            color: '#007aff'
          - value: 19
            color: '#5ac8fa'
          - value: 23
            color: '#ffcc00'
          - value: 25
            color: '#ff9500'
          - value: 28
            color: '#ff3b30'
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Umidade
        secondary: '{{ states(entity) }} %'
        icon: mdi:water-percent
        icon_color: |-
          {% if is_state(entity, 'unknown') %}
            disabled
          {% elif states(entity) | float >= 70 %}
             blue
          {% elif states(entity) | float >= 50 %}
             green
          {% else %}
             red
          {% endif %}
        entity: sensor.quarto_umidade
      - type: custom:mini-graph-card
        entities:
          - sensor.quarto_umidade
        group: true
        show:
          icon: false
          name: false
          state: false
        hours_to_show: 6
        points_per_hour: 3
        color_thresholds:
          - value: 0
            color: '#ff3b30'
          - value: 50
            color: '#4cd964'
          - value: 70
            color: '#007aff'

The results:

[lunatik98]

Thanks for the template @raphaeleduardo42 but it does seem to have an error. When the temperatur is at for example 22° the graph and the icon dont have the same color. The icon is light-blue and the graph is amber in this case. Any idea whats wrong?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Temperatur
    secondary: '{{ states(entity) }} °C'
    icon: mdi:thermometer
    icon_color: |-
      {% if is_state(entity, 'unknown') %}
        disabled
      {% elif states(entity) | float >= 28 %}
         red
      {% elif states(entity) | float >= 25 %}
         orange
      {% elif states(entity) | float >= 23 %}
        amber
      {% elif states(entity) | float >= 19 %}
         light-blue
      {% else %}
         blue
      {% endif %}
    entity: sensor.thermometer_temperature
  - type: custom:mini-graph-card
    entities:
      - sensor.thermometer_temperature
    group: true
    show:
      icon: false
      name: false
      state: false
    hours_to_show: 6
    points_per_hour: 3
    color_thresholds:
      - value: 0
        color: '#007aff'
      - value: 19
        color: '#5ac8fa'
      - value: 23
        color: '#ffcc00'
      - value: 25
        color: '#ff9500'
      - value: 28
        color: '#ff3b30'

[mwantia]

The repository decluttering-card can also be used to create "templates".
This can make adding multiple sensors a lot easier without needing to repeat the same code every time:

Example that was added on top of the Lovelace configuration:

decluttering_templates:
  mushroom-graph-card:
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:mushroom-template-card
          primary: '[[name]]'
          secondary: '{{ states(entity) }} [[unit]]'
          icon: '[[icon]]'
          icon_color: '[[color]]'
          entity: '[[entity]]'
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
        - type: custom:mini-graph-card
          entities:
            - '[[entity]]'
          line_color: '[[color]]'
          group: true
          show:
            icon: false
            name: false
            state: false
views:
 - ...

How the template can be used in a card:

type: horizontal-stack
cards:
  - type: custom:decluttering-card
    template: mushroom-graph-card
    variables:
      - name: Temperatur
      - unit: °C
      - color: red
      - icon: mdi:thermometer
      - entity: sensor.aqara_sensor_schlafzimmer_temperature

  - type: custom:decluttering-card
    template: mushroom-graph-card
    variables:
      - name: Humidity
      - unit: '%'
      - color: blue
      - icon: mdi:water-percent
      - entity: sensor.aqara_sensor_schlafzimmer_humidity

  - type: custom:decluttering-card
    template: mushroom-graph-card
    variables:
      - name: Pressure
      - unit: hPa
      - color: grey
      - icon: mdi:car-cruise-control
      - entity: sensor.aqara_sensor_schlafzimmer_pressure

This way, you can kind of "fake" a new card and only need to provide the variables to change the values.

[shreyasajj]

Hi Im curious, what is holding this back?

[hendrikbl]

Any news on this?

[bartaspoz]

This feature would be really awesome