Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(graph): add graph card #454

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat(graph): add graph card #454

wants to merge 2 commits into from

Conversation

piitaya
Copy link
Owner

@piitaya piitaya commented May 8, 2022

Fixes #74

TODO : merge graph and entity card for simplicity.

acesyde and others added 2 commits May 8, 2022 20:33
* feat: graph

* fix: credits

* fix: translations

* fix: action

* fix: margin

* fix: bugs / doc / samples

* fix: review

* fix: add secondary / primary info customization

Co-authored-by: Paul Bottein <[email protected]>
@piitaya piitaya added the enhancement New feature or request label May 17, 2022
@alessandroias
Copy link
Contributor

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:
image

@raphaeleduardo42
Copy link

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:
image

@lunatik98
Copy link

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?

2022-06-09_09h40_19

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
Copy link

mwantia commented Aug 2, 2022

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
Copy link

Hi Im curious, what is holding this back?

@hendrikbl
Copy link

Any news on this?

@bartaspoz
Copy link

This feature would be really awesome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Display state/attribute graph
9 participants