Lovelace: mini graph card

[cjsimmons (Chris Simmons)]

@kalkih

I could need someone testing this, would you maybe like to help me test this?

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

[Mariusthvdb (Marius)]

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!

[thmry]

That looks really nice! Would love to use that.

[moskovskiy82]

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

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

[cjsimmons (Chris Simmons)]

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

[kalkih (Karl Kihlström)]

@moskovskiy82

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

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.

Add color option to entity

@cjsimmons

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

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

[kalkih (Karl Kihlström)]

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 (Isabella Gross Alström)]

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 (Karl Kihlström)]

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

[SeLLeRoNe (Andrea Iannucci)]

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?

Lovelace: Swiper card

Hi there, this card is very nice, but I am facing a very odd issue, and to be fair, I am not sure if it depends on this card directly. I am trying to use this plugin in combination with the mini-graph-card custom card and unlike with the standard history-graph, when I use this I cannot manage to have the “big version” of the output, the mini-graph-card gets always reduced to a box. Here my configuration: - type: custom:swipe-card cards: - type: custom:mini-graph-card …

Thanks
Anddrea

[SeLLeRoNe (Andrea Iannucci)]

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

[kalkih (Karl Kihlström)]

@SeLLeRoNe

when I use this I cannot manage to have the “big version” of the output, the mini-graph-card gets always reduced to a box.

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

[cameron]

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…

kalkih/mini-graph-card

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

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

[kalkih (Karl Kihlström)]

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]

Yes done the usual cache clearing.

[kalkih (Karl Kihlström)]

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

[cameron]

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 (Karl Kihlström)]

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

[maurizio53 (Maurizio Fabiani)]

Same here, same behaviour…

[kalkih (Karl Kihlström)]

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