Lovelace: mini graph card

kalkih · February 13, 2019, 3:13pm

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)
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)

teachingbirds · February 13, 2019, 3:17pm

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.”

kalkih · February 13, 2019, 3:47pm

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

SeLLeRoNe · February 13, 2019, 5:13pm

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
Anddrea

SeLLeRoNe · February 13, 2019, 5:14pm

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

kalkih · February 13, 2019, 5:24pm

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

cameron · February 13, 2019, 6:24pm

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

kalkih · February 13, 2019, 6:33pm

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

cameron · February 13, 2019, 6:38pm

Yes done the usual cache clearing.

kalkih · February 13, 2019, 6:39pm

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

cameron · February 13, 2019, 6:43pm

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

kalkih · February 13, 2019, 6:46pm

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

maurizio53 · February 13, 2019, 6:52pm

Same here, same behaviour…

kalkih · February 13, 2019, 6:57pm

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

cameron · February 13, 2019, 7:06pm

This is with

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

Hope this helps.

kalkih · February 13, 2019, 7:22pm

Fix in place, I’ll make a new release, coming in a few mins, I’ll report when it’s available.
Sorry.

kalkih · February 13, 2019, 7:31pm

NEW RELEASE v0.2.4

Okay, let’s try again… a few quick fixes and a new style option for the graph fill.

Changelog

New: Parameter fade for show -> fill option, makes the fill fade out
Fixed: History entries with null state breaking graph (#46)
Fixed: Compatibility issues with the custom swiper-card
Fixed: Broken extrema

cameron · February 13, 2019, 7:33pm

That was very fast…

You are the Man

All works thank you very much.

kalkih · February 13, 2019, 7:36pm

Thank you,
Although, I shouldn’t have put up the broken release in the first place

kalkih · February 13, 2019, 7:38pm

If the issue was the card not taking up the full width, it should be fixed with the latest release v0.2.4

hyperion_8123_lovelace_4%20(22)