Lovelace: mini graph card

Sure. Send me a PM and I’ll see what I can do.

1 Like

This is just what I hoped it to be!
Let me know how to try and I will.

Think the gradient looks very nice but probably only for single graphs.

Cool!

1 Like

That looks really nice! Would love to use that.

1 Like

Love this card. Is there a way to override line color?
image

Using it to display temp. And want to display it as a climate component history - put the current setpoint to graph. But for it to stand out - make it red. But line_color is ignored and line_color_below takes precedence

    - type: horizontal-stack
      cards:
      - type: custom:mini-graph-card
        name: Temp
        icon: mdi:thermometer
        entities: 
          - entity: sensor.temperature_158
          - entity: sensor.kids_climate_settemp
            line_color: red
        decimals: 0
        hour24: true
        font_size: 80
        line_color_below:
          - value: 35
            color: red
          - value: 45
            color: orange
          - value: 100
            color: green
1 Like

Reverse the order of the values. Have 100 first, then work your way down 35. Like this:

    line_color_below:
      - value: 100
        color: green
      - value: 45
        color: orange
      - value: 35
        color: red

Not right now, but great idea, could see it being useful.
I went ahead and added a color option to the entity object, setting this will override all other color options.

entities:
  - entity: sensor.one
  - entity: sensor.two
    color: teal
line_color: red # sensor.two will override this
line_color_below: # sensor.two will override this
  - value: 35
    color: red

Will be available in the next release, probably tonight.

That’s correct, added a sort function now, so this won’t be necessary in the future :wink:

NEW RELEASE v0.2.3

Manual y-axis bounds, improved color thresholds & more.

In order to make this card compatible with the new “Unused entities UI” I had to make some changes to the way entities are set in the config. You know have to use the entities option and list entities in a list (even if it’s only one entity), similar to how the core entities card works.

The examples have been updated to reflect these changes.

Changelog

  • New: Option color_thresholds (#45)

  • New: Color thresholds now changes dynamically with the history (#45)

    Dynamic line color

  • New: Options lower_bound & upper_bound added (#40)

  • New: Option color to entity object, overrides other color options

  • Change: entities option now always requires a list, changed in order to be compatible with “Unused entities” UI (#44) (BREAKING CHANGE)

  • Change: Default value for points_per_hour changed from 1 to 0.5.

  • Fixed: Updated lit-element to v2.0.1

  • Fixed: Zero values show up as current value when hovered over (#41)

  • Fixed: Added additional checks for empty history

  • Removed: entity option, which was previously deprecated since v0.2.0, use entities option (#44) (BREAKING CHANGE).

  • Removed: line_color_above and line_color_below, see new color_thresholds option (#45) (BREAKING CHANGE)

6 Likes

I’m sorry if I missed something, but how does it know if the threshold is above or below?
“The threshold at where the color should apply if state is above/below.”

It should be above, forgot to update the docs when merging line_color_above & line_color_below into a single option.

Hi Kalkih,
Not sure you might be able to help, I am facing an issue with the combination of swiper-card and your mini-graph-card.

I posted on the swiper-card page, but it might aswell be the mini-graph-card issue, so would you mind check this?

Thanks :slight_smile:
Anddrea

PS, the threshold look very nice in the docs screenshot, I was thinking about suggesting it to you a few days back :slight_smile:

1 Like

Hey, what do you mean by the “big version” of the output? Have the card take up the complete width?

I can’t get the new version to work.

when i comment out show: the graph shows.

Not sure what to use…

color_thresholds list optional v0.2.3 Set thresholds for dynamic graph colors, see Line color object.

Or this…

  - type: custom:mini-graph-card
    entities:
      - sensor.temperature_sitting
    name: Temp
    #location_icon: left
    #location_state: center
    show:
      graph: true
      fill: true
      extrema: true
    line_color_threshold:
      - value: 10
        color: "#f39c12"
      - value: 20
        color: "#d35400"
      - value: 21.5
        color: "#c0392b"

ScreenShot_20190213182000

  - type: custom:mini-graph-card
    entities:
      - sensor.temperature_sitting
    name: Temp
    #location_icon: left
    #location_state: center
    #show:
    #  graph: true
    #  fill: true
    #  extrema: true
    line_color_threshold:
      - value: 10
        color: "#f39c12"
      - value: 20
        color: "#d35400"
      - value: 21.5
        color: "#c0392b"

ScreenShot_20190213182311

Should be color_thresholds, I just suck at updating the docs :frowning_face:
Not sure why you don’t see the graph at all though, are you sure the cache cleared properly?

Yes done the usual cache clearing.

Try changing to color_thresholds and see if that solves the issue.

OK Done that its not showing. It shows only if i comment out the show: stuff.
And the dynamic line color is not working.

That makes me think the old version might still be loading from cache, please check the browser developer console for potential error messages.

Same here, same behaviour…

I’ll try to recreate, please comment out extrema meanwhile.