kalkih / mini-graph-card Goto Github PK

View Code? Open in Web Editor NEW

3.0K 43.0 233.0 965 KB

Minimalistic graph card for Home Assistant Lovelace UI

License: MIT License

JavaScript 98.84% Shell 1.16%

automation home-assistant hassio lovelace lovelace-ui custom graph sensor hacktoberfest

mini-graph-card's Introduction

Lovelace Mini Graph Card

A minimalistic and customizable graph card for Home Assistant Lovelace UI.

The card works with entities from within the sensor & binary_sensor domain and displays the sensors current state as well as a line graph representation of the history.

Install

HACS (recommended)

This card is available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box.

Manual install

Download and copy mini-graph-card-bundle.js from the latest release into your config/www directory.
Add the resource reference as decribed below.

CLI install

Move into your config/www directory.
Grab mini-graph-card-bundle.js:

$ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.12.1/mini-graph-card-bundle.js

Add the resource reference as decribed below.

Add resource reference

If you configure Lovelace via YAML, add a reference to mini-graph-card-bundle.js inside your configuration.yaml:

resources:
  - url: /local/mini-graph-card-bundle.js?v=0.12.1
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
Enter URL /local/mini-graph-card-bundle.js and select type "JavaScript Module". (Use /hacsfiles/mini-graph-card/mini-graph-card-bundle.js and select "JavaScript Module" for HACS install)
Restart Home Assistant.

Updating

If you have a version older than v0.0.8 installed, please delete the current files and follow the installation instructions again.

Find your mini-graph-card-bundle.js file in config/www or wherever you ended up storing it.
Replace the local file with the latest one attached in the latest release.
Add the new version number to the end of the cards reference url in your ui-lovelace.yaml like below:

resources:
  - url: /local/mini-graph-card-bundle.js?v=0.12.1
    type: module

You may need to empty the browsers cache if you have problems loading the updated card.

Using the card

We recommend looking at the Example usage section to understand the basics to configure this card. (also) pay attention to the required options mentioned below.

Options

Card options

Name	Type	Default	Since	Description
type (required)	string		v0.0.1	`custom:mini-graph-card`.
entities (required)	list		v0.2.0	One or more sensor entities in a list, see entities object for additional entity options.
icon	string		v0.0.1	Set a custom icon from any of the available mdi icons.
icon_image	string		v0.12.0	Override icon with an image url
name	string		v0.0.1	Set a custom name which is displayed beside the icon.
unit	string		v0.0.1	Set a custom unit of measurement.
tap_action	action object		v0.7.0	Action on click/tap.
group	boolean	`false`	v0.2.0	Disable paddings and box-shadow, useful when nesting the card.
hours_to_show	integer	`24`	v0.0.2	Specify how many hours of history the graph should present.
points_per_hour	number	`0.5`	v0.2.0	Specify amount of data points the graph should display for each hour, (basically the detail/accuracy/smoothing of the graph).
aggregate_func	string	`avg`	v0.8.0	Specify aggregate function used to calculate point/bar in the graph.
group_by	string	`interval`	v0.8.0	Specify type of grouping of data, dynamic `interval`, `date` or `hour`.
update_interval	number		v0.4.0	Specify a custom update interval of the history data (in seconds), instead of on every state change.
cache	boolean	`true`	v0.9.0	Enable/disable local caching of history data.
show	list		v0.2.0	List of UI elements to display/hide, for available items see available show options.
animate	boolean	`false`	v0.2.0	Add a reveal animation to the graph.
height	number	`150`	v0.0.1	Set a custom height of the line graph.
bar_spacing	number	`4`	v0.9.0	Set the spacing between bars in bar graph.
line_width	number	`5`	v0.0.1	Set the thickness of the line.
line_color	string/list	`var(--accent-color)`	v0.0.1	Set a custom color for the graph line, provide a list of colors for multiple graph entries.
color_thresholds	list		v0.2.3	Set thresholds for dynamic graph colors, see Line color object.
color_thresholds_transition	string	`smooth`	v0.4.3	Color threshold transition, `smooth` or `hard`.
decimals	integer		v0.0.9	Specify the exact number of decimals to show for states.
hour24	boolean	`false`	v0.2.1	Set to `true` to display times in 24-hour format.
font_size	number	`100`	v0.0.3	Adjust the font size of the state, as percentage of the original size.
font_size_header	number	`14`	v0.3.1	Adjust the font size of the header, size in pixels.
align_header	string	`default`	v0.2.0	Set the alignment of the header, `left`, `right`, `center` or `default`.
align_icon	string	`right`	v0.2.0	Set the alignment of the icon, `left`, `right` or `state`.
align_state	string	`left`	v0.2.0	Set the alignment of the current state, `left`, `right` or `center`.
lower_bound	number or string		v0.2.3	Set a fixed lower bound for the graph Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.
upper_bound	number or string		v0.2.3	Set a fixed upper bound for the graph Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.
min_bound_range	number		v0.x.x	Applied after everything, makes sure there's a minimum range that the Y-axis will have. Useful for not making small changes look large because of scale.
lower_bound_secondary	number or string		v0.5.0	Set a fixed lower bound for the graph secondary Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.
upper_bound_secondary	number or string		v0.5.0	Set a fixed upper bound for the graph secondary Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.
min_bound_range_secondary	number		v0.x.x	Applied after everything, makes sure there's a minimum range that the secondary Y-axis will have. Useful for not making small changes look large because of scale.
smoothing	boolean	`true`	v0.8.0	Whether to make graph line smooth.
state_map	state map object		v0.8.0	List of entity states to convert (order matters as position becomes a value on the graph).
value_factor	number	0	v0.9.4	Scale value by order of magnitude (e.g. convert Watts to kilo Watts), use negative value to scale down.
logarithmic	boolean	`false`	v0.10.0	Use a Logarithmic scale for the graph

Entities object

Entities may be listed directly (as per sensor.temperature in the example below), or defined using properties of the Entity object detailed in the following table (as per sensor.pressure in the example below).

Name	Type	Description
entity (required)	string	Entity id of the sensor.
attribute	string	Retrieves an attribute or sub-attribute (attr1.attr2...) instead of the state
name	string	Set a custom display name, defaults to entity's friendly_name.
color	string	Set a custom color, overrides all other color options including thresholds.
unit	string	Set a custom unit of measurement, overrides `unit` set in base config.
aggregate_func	string	Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.
show_state	boolean	Display the current state.
show_indicator	boolean	Display a color indicator next to the state, (only when more than two states are visible).
show_graph	boolean	Set to false to completely hide the entity in the graph.
show_line	boolean	Set to false to hide the line.
show_fill	boolean	Set to false to hide the fill.
show_points	boolean	Set to false to hide the points.
show_legend	boolean	Set to false to turn hide from the legend.
state_adaptive_color	boolean	Make the color of the state adapt to the entity color.
y_axis	string	If 'secondary', displays using the secondary y-axis on the right.
fixed_value	boolean	Set to true to graph the entity's current state as a fixed value instead of graphing its state history.
smoothing	boolean	Override for a flag indicating whether to make graph line smooth.

entities:
  - sensor.temperature
  - entity: sensor.pressure
    name: Pressure
    show_state: true
  - sensor.humidity

Available show options

All properties are optional.

Name	Default	Options	Description
name	`true`	`true` / `false`	Display name.
icon	`true`	`true` / `false`	Display icon.
state	`true`	`true` / `false` / `last`	Display current state. `last` will show the last graph point's value.
graph	`line`	`line` / `bar` / `false`	Display option for the graph. If set to `bar` a maximum of `96` bars will be displayed.
fill	`true`	`true` / `false` / `fade`	Display the line graph fill.
points	`hover`	`true` / `false` / `hover`	Display graph data points.
legend	`true`	`true` / `false`	Display the graph legend (only shown when graph contains multiple entities).
average	`false`	`true` / `false`	Display average information.
extrema	`false`	`true` / `false`	Display max/min information.
labels	`hover`	`true` / `false` / `hover`	Display Y-axis labels.
labels_secondary	`hover`	`true` / `false` / `hover`	Display secondary Y-axis labels.
name_adaptive_color	`false`	`true` / `false`	Make the name color adapt with the primary entity color.
icon_adaptive_color	`false`	`true` / `false`	Make the icon color adapt with the primary entity color.

Line color object

See dynamic line color for example usage.

Name	Type	Default	Description
value (required except in interpolation (see below))	number		The threshold for the color stop.
color (required)	string		Color in 6 digit hex format (e.g. `#008080`).

Line color interpolation of stop values

As long as the first and last threshold stops have value properties, intermediate stops can exclude value; they will be interpolated linearly. For example, given stops like:

color_thresholds:
  - value: 0
    color: "#ff0000"
  - color: "#ffff00"
  - color: "#00ff00"
  - value: 4
    color: "#0000ff"

The values will be interpolated as:

color_thresholds:
  - value: 0
    color: "#ff0000"
  - value: 1.333333
    color: "#ffff00"
  - value: 2.666667
    color: "#00ff00"
  - value: 4
    color: "#0000ff"

The example above will result in the following colors of the graph: if value is

between 0 (including this value) and 1.33333, the color is #ff0000,
between 1.33333 (including this value) and 2.666667, the color is #ffff00,
between 2.666667 (including this value) and 4, the color is #00ff00,
equal to or more than 4, the color is #0000ff.

As a shorthand, you can just use a color string for the stops that you want interpolated:

  - value: 0
    color: "#ff0000"
  - "#ffff00"
  - "#00ff00"
  - value: 4
    color: "#0000ff"

Action object options

Name	Type	Default	Options	Description
action	string	`more-info`	`more-info` / `navigate` / `call-service` / `url` / `none`	Action to perform.
entity	string		Any entity id	Override default entity of `more-info`, when `action` is defined as `more-info`.
service	string		Any service	Service to call (e.g. `media_player.toggle`) when `action` is defined as `call-service`.
service_data	object		Any service data	Service data to include with the service call (e.g. `entity_id: media_player.office`).
navigation_path	string		Any path	Path to navigate to (e.g. `/lovelace/0/`) when `action` is defined as `navigate`.
url	string		Any URL	URL to open when `action` is defined as `url`.

State map object

Name	Type	Default	Description
value (required)	string		Value to convert.
label	string	same as value	String to show as label (if the value is not precise).

Aggregate functions

Recorded values are grouped in time buckets which are determined by group_by, points_per_hour configuration. These buckets are converted later to single point/bar on the graph. Aggregate function defines the methods of that conversion.

Name	Since	Description
`avg`	v0.8.0	Average
`median`	v0.11.0	Median
`min`	v0.8.0	Minimum - lowest value
`max`	v0.8.0	Maximum - largest value
`first`	v0.9.0
`last`	v0.9.0
`sum`	v0.9.2
`delta`	v0.9.4	Calculates difference between max and min value
`diff`	v0.11.0	Calculates difference between first and last value

Theme variables

The following theme variables can be set in your HA theme to customize the appearance of the card.

Name	Default	Description
mcg-title-letter-spacing		Letter spacing of the card title (`name` option).
mcg-title-font-weight	500	Font weight of the card title.

Example usage

Single entity card

type: custom:mini-graph-card
entities:
 - sensor.illumination

Alternative style

type: custom:mini-graph-card
entities:
 - sensor.illumination
align_icon: left
align_state: center
show:
  fill: false

Multiple entities card

type: custom:mini-graph-card
name: SERVER
icon: mdi:server
entities:
  - entity: sensor.server_total
    name: TOTAL
  - sensor.server_sent
  - sensor.server_received

Bar chart card

type: custom:mini-graph-card
entities:
  - entity: sensor.energy_consumption
name: ENERGY CONSUMPTION
show:
  graph: bar

Show data from the past week

Use the hours_to_show option to specify how many hours of history the graph should represent. Use the points_per_hour option to specify the accuracy/detail of the graph.

type: custom:mini-graph-card
entities:
  - sensor.living_room_temp
name: LIVING ROOM
hours_to_show: 168
points_per_hour: 0.25

Graph only card

Use the show option to show/hide UI elements.

type: custom:mini-graph-card
entities:
  - sensor.humidity
show:
  icon: false
  name: false
  state: false

Horizontally stacked cards

You can stack cards horizontally by using one or more horizontal-stack(s).

type: horizontal-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - sensor.humidity
    line_color: blue
    line_width: 8
    font_size: 75
  - type: custom:mini-graph-card
    entities:
      - sensor.illumination
    line_color: '#e74c3c'
    line_width: 8
    font_size: 75
  - type: custom:mini-graph-card
    entities:
      - sensor.temperature
    line_color: var(--accent-color)
    line_width: 8
    font_size: 75

Dynamic line color

Have the graph change line color dynamically.

type: custom:mini-graph-card
entities:
  - sensor.sensor_temperature
show:
  labels: true
color_thresholds:
  - value: 20
    color: "#f39c12"
  - value: 21
    color: "#d35400"
  - value: 21.5
    color: "#c0392b"

Alternate y-axis

Have one or more series plot on a separate y-axis, which appears on the right side of the graph. This example also shows turning off the line, points and legend.

type: custom:mini-graph-card
entities:
  - entity: sensor.verandah
    name: Verandah
  - entity: sensor.lounge
    name: Lounge
  - entity: sensor.kitchen
    name: Kitchen
  - color: gray
    entity: input_number.nighttime
    name: Night
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary
show:
  labels: true
  labels_secondary: true

Grouping by date

You can group values by date, this way you can visualize for example daily energy consumption.

type: custom:mini-graph-card
entities:
  - entity: sensor.energy_daily
name: Energy consumption
hours_to_show: 168
aggregate_func: max
group_by: date
show:
  graph: bar

Data aggregation functions

You can decide how values are aggregated for points on graph. Example how to display min, max, avg temperature per day from last week.

type: custom:mini-graph-card
entities:
  - entity: sensor.outside_temp
    aggregate_func: max
    name: Max
    color: "#e74c3c"
  - entity: sensor.outside_temp
    aggregate_func: min
    name: Min
  - entity: sensor.outside_temp
    aggregate_func: avg
    name: Avg
    color: green
name: Temp outside daily (last week)
hours_to_show: 168
group_by: date

Non-numeric sensor states

You can render non-numeric states by providing state_map config. For example this way you can show data coming from binary sensors.

type: custom:mini-graph-card
entities:
  - entity: binary_sensor.living_room_motion
    name: Living room
  - entity: binary_sensor.corridor_motion
    name: Corridor
  - entity: binary_sensor.master_bed_motion
    name: Master bed.
    color: green
  - entity: binary_sensor.bedroom_motion
    name: Bedroom
name: Motion last hour
hours_to_show: 1
points_per_hour: 60
update_interval: 30
aggregate_func: max
line_width: 2
smoothing: false
state_map:
  - value: "off"
    label: Clear
  - value: "on"
    label: Detected

Showing additional info on the card

It is possible to show a state without displaying a graph for a sensor. Imagine there are two CO-2 sensors & one humidity sensor; graphs are displayed for the CO-2 only, and the humidity is shown as a state only.

type: custom:mini-graph-card
entities:
  - entity: sensor.xiaomi_cg_1_humidity
    show_state: true
    show_graph: false
  - entity: sensor.xiaomi_cg_1_co2
    color: green
    show_state: false
    name: CO2-1
  - entity: sensor.xiaomi_cg_2_co2
    color: orange
    show_state: false
    name: CO2-2
name: Humidity
hours_to_show: 4
points_per_hour: 60
show:
  name: true
  legend: true
  icon: false
  labels: true

This method may be also used to add a calculated value with it's own aggregate_func option.

Accessing attributes in complex structures

When using the attribute option in the entities object, you can access data in structured attributes, such as dictionaries and lists.

Accessing dictionary attributes

Suppose you have data stored inside a dictionary attribute named dict_attribute

dict_attribute:
  value_1: 53
  value_2: 64
  value_3: 72

Such data should be addressed as dict_attribute.sub_attribute:

type: custom:mini-graph-card
entities:
  - entity: sensor.testing_object_data
    attribute: dict_attribute.value_1
    name: value_1 from dictionary attribute

Accessing list attributes

Suppose you have data stored inside a list attribute named list_attribute:

list_attribute:
  - value_1: 67
    value_2: 65
    value_3: 93
  - value_1: 134
    value_2: 130
    value_3: 186
  - value_1: 201
    value_2: 195
    value_3: 279

Such data should be addressed as list_attribute.index.sub_attribute:

type: custom:mini-graph-card
entities:
  - entity: sensor.testing_object_data_list
    attribute: list_attribute.0.value_1
    name: value_1 from first element of list attribute

Development

Clone this repository into your config/www folder using git:

$ git clone https://github.com/kalkih/mini-graph-card.git

Add a reference to the card in your ui-lovelace.yaml:

resources:
  - url: /local/mini-graph-card/dist/mini-graph-card-bundle.js
    type: module

Instructions

Requires nodejs & npm.

Move into the mini-graph-card repo, checkout the dev branch & install dependencies:

$ cd mini-graph-card && git checkout dev && npm install

Make changes to the source code.
Build the source by running:

$ npm run build

Refresh the browser to see changes.

Make sure cache is cleared or disabled.
(Optional) Watch the source and automatically rebuild on save:

$ npm run watch

The new mini-graph-card-bundle.js will be build and ready inside /dist.

Note that the dev branch is the most up-to-date and matches our beta releases.

Please refer to the Contribution Guidelines if you're interested in contributing to the project. (And thanks for considering!)

Getting errors?

Make sure you have javascript_version: latest in your configuration.yaml under frontend:.

Make sure you have the latest versions of mini-graph-card.js & mini-graph-lib.js.

If you have issues after updating the card, try clearing your browser cache.

If you have issues displaying the card in older browsers, try changing type: module to type: js at the card reference in ui-lovelace.yaml.

License

This project is under the MIT license.

mini-graph-card's People

Contributors

Stargazers

Watchers

Forkers

tsm-evo vageesh79 cheynespc luismrgarcia alexxander0 wpmjones jknoflook timjong93 vmeph darkmaestro3e8 isabellaalstrom theaquarium gabe565 valcob muspelheim notabene00 poloiji crym761224 mcasper73 atomicsamurai whjvenyl triay54 bramkragten chengjingfeng ngmacha samilkarahisar ninhvanthang cinquemic landocarlesien snarky-snark jbalague aplsms michaelblight snoof85 larsenglund maxwroc albinsson66 baralihassio cymonsez geniusve olivierboheme1 starcope zibous moura232 rsorge abixbg sedos fatvoodoo rslota mp-architech nurikk rccoleman nemoo2580 beerdiet marcin77 abbadon89 machyaer idinty drewfus0 alonjr brucehvn lau-ie mikalauskas smeat norbertomartins epiclper romrider fedgarlurch dzikimarian fabiowielewski pablotoribio-beta graneyc tomsim sprucecurrent cturra tal thefork ducky87h denvro andre1hub akarpenkoua ieatacid cosito-bonito rsadow pronkmedia agneevx juanjodvives hypfer galorhallen jrubber koshilki thomashollier hellowlol wallbasher dcs8 dimich21 etsarevsky sdalbert mork2020 j-flat

mini-graph-card's Issues

Graph points color issue

There is an issue with graph points color in case of use line_color_above. Graph points should have the color same as graph but they have same as line_color.

Support for optional Y-axis anchoring of lower and/or upper bounds (as opposed to full graph auto-scaling)

Currently the Y-axis lower-bound and upper-bound fluctuate constantly as the graph auto-scales itself every time it is updated. This is great for certain use cases.

Other use cases would benefit from static lower bound (e.g. leave the lower bound anchored in zero or some other value) and/or upper-bound - where it is important to visually spot the "big picture" rather than smaller variations.

For example, anchoring only lower-bound to zero would be great for a Humidifier or Temperature type use case, where minor variations of a fraction of a degree are not relevant, but one would normally like to spot bigger-picture trends - so it's important to leave the lower bound constant in zero, but the upper bound can be auto-scaled

Other user cases may benefit from anchoring both lower and upper bound, for example router throughput, where throughput is limited to a known upper bound set by the ISP/DSL/Cablemodem subscription speed. So in this case one would use e.g. 0Mbps for the lower bound and 25Mbps for the upper bound.

Ideally, either ‘auto’ or a specific lower bound would apply on a per-entity basis (if different y-axis scales are support, which I believe is not the case now)

Usage examples


lower_bound: auto  # (default) 

lower_bound: 0

Currently I think only a single Y-axis scale is supported for all graphed entities, so lower_bound and upper_bound would be 'global' card configuration options. If in the future independent Y-axis scales are supported, then lower_bound/upper_bound would be best configured withing each entity

Entity State driven Icons

As suggeste on the Cmmunity site, it would be very usefl to be able to define icons based on status and threshold.

This makes sense for single entity, but might be adapted when multiple entities are present with the condition that a "main" one is defined (the one that define the bigger number, so I guess this can be another FR for that to be configurable :) )

This might require to change the newrly introduced color_threshold to become only threshold (just for clarity).
This way, you can specify a specific icon on a per state.

The original idea came to my mind because it would have been nice to have the thermometer icon to change based on the temperature (I tested with customizations without success, probably due to some darksky sensor limitations, there is an open issue for that, apparently was working in the past).

Cheers
Andrea

header font

It would be nice to have an option to setup the size of the header font (similar to the current option font_size that affects state font).

UI Editor

Can now add UI Editors to custom cards. e.g. my Roku Card

Integration with other cards

Unsure if this error is related to the vertical-card-stack custom card or this one or how they interact. Getting the following error when the view is refereshed.

https://duck.duckdns.org/local/custom_ui/vertical-stack-in-card.js?v=0.0.2:61:74 Uncaught TypeError: Cannot read property 'style' of null

The card also doesn't appear to integrate cleanly like other cards do into the vertical-card-stack. See imugr link. https://imgur.com/Vuer2xp (note the borders around the graph cards)

Relevant parts of my config:

resources:
  #https://github.com/thomasloven/lovelace-slider-entity-row
  - url: /local/custom_ui/slider-entity-row.js
    type: js
  #https://github.com/kalkih/mini-graph-card
  - url: /local/custom_ui/mini-graph-card.js?v=0.0.1
    type: module
  #https://github.com/custom-cards/vertical-stack-in-card
  - url: /local/custom_ui/vertical-stack-in-card.js?v=0.0.2
    type: js

title: Home
views:
  - title: Rooms
    icon: mdi:home
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            title: HVAC Status
            entities:
              - entity: climate.downstairs
                name: Nest Thermostat
          - type: glance
            entities:
              - entity: binary_sensor.downstairs_thermostat_fan
                name: Fan
              - entity: sensor.downstairs_thermostat_hvac_state
                name: State
                icon: mdi:thermostat
              - entity: sensor.downstairs_thermostat_operation_mode
                name: Mode
                icon: mdi:information-outline
              - entity: sensor.downstairs_thermostat_target
                name: Target
                icon: mdi:thermometer-lines
              - entity: sensor.downstairs_away_mode
                name: Away
                icon: mdi:home-outline
           - type: horizontal-stack
             title: Nest Graphs
             cards:
               - type: "custom:mini-graph-card"
                 entity: sensor.downstairs_thermostat_temperature
                 name: Temperature
                 line_color: '#e74c3c'
                 line_width: 8
                 more_info: false
                 accuracy: 25
               - type: "custom:mini-graph-card"
                 entity: sensor.downstairs_thermostat_humidity
                 name: Humidity
                 line_color: '#3498db'
                 line_width: 8
                 more_info: false
                 accuracy: 25

Import of { LitElement, html, svg} not working anymore: "Card not found" error in Home Assistant

This line:

import { LitElement, html, svg } from 'https://unpkg.com/@polymer/lit-element@^0.6.2/lit-element.js?module';

Does not work anymore. If I remove the "^", the card works again in Home Assistant.
I also noticed that version 0.6.5 also seems to work with your card.

Formatting of title

When I add the card, entity titles and states as well as icons are not properly formatted:

Contribute upstream?

Really love this card. It's awesome.

Would you want to contribute it back to official repo at https://github.com/home-assistant/home-assistant-polymer ?

extrema config per entity

It would be nice on the Extrema View to be able to see one line per entity so to keep track of all min-max of each entity of the graph.

It would also be nice, when there are multiple entities but you want to see only one min/max, to be able to define which entity provides you the min and which the max.

Hope is clear enough, if not let me know :)

Cheers
Andrea

not an issue, but a showcase

starting to work on supplementing my pc-card with your min-graph-card and it is going great! will probably submit a PR soon to remove the box shadow, but beyond that, it is absolutely awesome for this!

NaN value with template sensor

With one of my template sensors im getting a NaN message instead of the sensor value.

(left mini graph card and right the default sensor card)

Code :

          - type: custom:card-modder
            style: {border-radius: "20px", border: "solid 1px rgba(100,100,100,0.3)", overflow: hidden}
            card:
              type: custom:mini-graph-card
              icon: mdi:fire
              name: Gas
              height: 100
              align_header: default
              align_icon: right
              align_state: center
              show:
                graph: false
                fill: true
                points: false
                legend: false
              entities: sensor.gas

          - type: custom:card-modder
            style: {border-radius: "20px", border: "solid 1px rgba(100,100,100,0.3)", overflow: hidden}
            card:
              type: sensor
              entity: sensor.gas
              icon: mdi:fire
              name: Gas
              graph: none

Template sensor :

- platform: mqtt
  name: "Gas"
  state_topic: "dsmr/json"
  unit_of_measurement: 'm3'
  force_update: true
  value_template: "{{ (value_json.extra_device_delivered | float) | replace('.',',') }}"

Accuracy lets graph disappear

Sometimes graphs disappear when the set accuracy does not fit to the available history data. No matter which accury level I choose, graphs keep disappearing and reappearing.

Sometimes setting the accuracy to a higher level brings back the graph, sometimes I must set it to a lower value. After some time, the graph disappears again and reappears some time later.

The underlying sensors update every 2 minutes (temperature derived from a Hue motion sensor).

[Enhancement?] multiple entities on one card

Firstly - awesome work on this! It's so much neater than the builtin graphs in HA. So thanks for putting it out there for everyone 👍

Just wondering if there's a possibility of allowing multiple entities on the one graph? I use the built in graph to show a visual representation of inside/outside temp:

but something like this would like much nicer:

Thanks again!

Optional icon

Is there a way to make the icon optional? When stacking them horizontally, horizontal space is constrained and the icons take up quite a bit. I would love it to make the icons optional to get more space for the name labels.

entities can not be a string.

The docs state that the entities option can be string or list.

Using a string works in the UI, however it fails when using the "Unused entities page".

That script assumes that entities is a list, and not a string.

This will work in the ui, but not in the unused entities page

- type: custom:mini-graph-card
  entities: sensor.somesensor

This will work everywhere

- type: custom:mini-graph-card
  entities: 
    - sensor.somesensor

Request: Grid & Axis labels

1 . Could it be possible to have a limitation for max-min data displayed (example temperature from 0° to 35°)?
2 . In graph could it be possible to add axes (X-Y) and horizontal/vertical grid (with user spacing selctable)?

Thanks a lot

X and Y labels

Would love to see an option of X and Y labels so this beautiful graph could be more useful.

Show entity name in title when hovering over a line

When hovering the mouse over a line with multiple entities, would it be possible to reveal the entity name in place of the card title (e.g. it would show ‘Loft’ instead of ‘Indoor Temperatures 24hr’) in the same way the entity state changes to match which line the mouse hovers over please? This would be useful if I decide to not show a legend to help with the minimalist look.

[Enhancement] Icon Location

Would you consider giving the option of displaying the icon next to the state in a future version?

The reason for this is space saving. For things like temperature & humidity an icon is enough to know what the graph is for. Unfortunately hiding the title doesn't give you the space back but having the option to display the icon next to the state would.

I've created a background with the icons on as a workaround and example of what I mean

Thanks for considering.

Decimals option applied to labels too??

In v0.09 the decimals option is introduced.

Can the same decimals option also be applied to the displayed labels?

line_value_below: 0 Does not work

I'm trying to change line color on negative temperatures, so i set
line_value_below: 0
and it does not work for me. Color doesn't change when the value < 0. Looks like the card ignores this setting.
The temporary workaround is:
line_value_below: 0.1

multiple show_state

If I have multiple entities and want to show all states, it looks like this:

IMHO there is room for improvement. I would suggest to add the value right next to the legend.

Max value displays NaN

This happens on the latest version - just installed the custom bundle an hour ago. It happens for all cards as you can see in the screenshot.

If more details are needed please let me know.

fill color using color_thresholds

I'm using color_thresholds to display different colors based on values but I'm wondering if the fill color shouldn't be the same color ?

Hours to Show parameter not enforced

Version 0.2.1

Using these parameters:

          hours_to_show: 2
          points_per_hour: 3

produces this graph:

where there are actually 6 hours in display, with one point shown per hour.

Testing different value combinations is showing that the "real" number of hours that are shown is actually = hours_to_show * points_per_hour.

Increasing points_per_hour to 6, produces a graph that spans for 12 hours, even if it was supposed to be showing 2 hours. It's a very strange behavior :)

In addition, using a number < 1 for "hours to show" proudces a weird result (apparently showing an entire week or so of 'hours').

There is also a problem with the labels (too much to the left and also too tiny after reducing font_size to 60) but I think there is a merged patch that would fix that in master already

Time span for historic data points not correct

This card works perfectly fine except for the mouse-over of data points. When I move the mouse pointer to a data point, the correct value is shown, but the time span is not correct. It's always the same minutes with a random hour, no matter whether I choose 12h or 24h date format.

This screenshot I took at 12:09 and every data point in the graph shows "XX:07-XX:09" with a random hour. I use points_per_hour: 30.

Unable to see graphs after 0.2.3

I am unable to see the graphs for the Load and the Temp / Humidity Sensor after upgrade to 0.2.3. My configurations are below:

  - entities:
      - light.ceiling_bulb
      - fan.ceiling_fan
      - light.ceiling_light
      - switch.ac
    image: /local/bedroom.jpg
    title: Bedroom
    type: picture-glance
  - cards:
      - cards:
          - entities:
              - sensor.temperature
            font_size: 75
            line_color_threshold:
              - color: '#2a8fce'
                value: 1
              - color: '#33ce2b'
                value: 10
              - color: '#f39c12'
                value: 24
              - color: '#d35400'
                value: 28
              - color: '#c0392b'
                value: 30
            line_width: 5
            location_icon: left
            location_state: center
            show:
              extrema: true
              points: false
            type: 'custom:mini-graph-card'
          - entities:
              - sensor.humidity
            font_size: 75
            line_color_threshold:
              - color: '#33ce2b'
                value: 1
              - color: '#f39c12'
                value: 30
              - color: '#d35400'
                value: 35
              - color: '#c0392b'
                value: 40
            line_width: 5
            location_icon: left
            location_state: center
            show:
              extrema: true
              points: false
            type: 'custom:mini-graph-card'
        type: horizontal-stack
    type: horizontal-stack
  - entity: weather.weather_forecast
    type: weather-forecast
  - artwork: cover
    entity: media_player.mokshs_tv
    hide_power: true
    icon: 'mdi:cast'
    max_volume: 30
    power_color: true
    scroll_info: true
    show_progress: true
    show_source: true
    type: 'custom:mini-media-player'
type: vertical-stack


`cards:
  - cards:
      - cards:
          - cards:
              - entities:
                  - sensor.load_1m
                font_size: 75
                line_color_threshold:
                  - color: '#2a8fce'
                    value: 0.01
                  - color: '#f39c12'
                    value: 2
                  - color: '#d35400'
                    value: 3
                  - color: '#c0392b'
                    value: 4
                line_width: 5
                name: Load 1M
                show:
                  extrema: true
                  points: false
                type: 'custom:mini-graph-card'
              - entities:
                  - sensor.load_5m
                font_size: 75
                line_color_threshold:
                  - color: '#2a8fce'
                    value: 0.01
                  - color: '#f39c12'
                    value: 2
                  - color: '#d35400'
                    value: 3
                  - color: '#c0392b'
                    value: 4
                line_width: 5
                name: Load 5M
                show:
                  extrema: true
                  points: false
                type: 'custom:mini-graph-card'
              - entities:
                  - sensor.load_15m
                font_size: 75
                line_color_threshold:
                  - color: '#2a8fce'
                    value: 0.01
                  - color: '#f39c12'
                    value: 2
                  - color: '#d35400'
                    value: 3
                  - color: '#c0392b'
                    value: 4
                line_width: 5
                name: Load 15M
                show:
                  extrema: true
                  points: false
                type: 'custom:mini-graph-card'
            type: horizontal-stack
        type: horizontal-stack
      - entities:
          - entity: sensor.wan_ip_address
            icon: 'mdi:wan'
        show_header_toggle: false
        type: entities
      - cards:
          - entities:
              - sensor.speedtest_download
            font_size: 75
            line_color_threshold:
              - color: '#c0392b'
                value: 0
              - color: '#d35400'
                value: 4
              - color: '#f39c12'
                value: 6
              - color: '#2a8fce'
                value: 8
            line_width: 5
            name: Test Download
            show:
              points: false
            type: 'custom:mini-graph-card'
          - entities:
              - sensor.speedtest_upload
            font_size: 75
            line_color_threshold:
              - color: '#c0392b'
                value: 0
              - color: '#d35400'
                value: 4
              - color: '#f39c12'
                value: 6
              - color: '#2a8fce'
                value: 8
            line_width: 5
            name: Test Upload
            show:
              points: false
            type: 'custom:mini-graph-card'
          - entities:
              - sensor.speedtest_ping
            font_size: 75
            line_color_threshold:
              - color: '#2a8fce'
                value: 0
              - color: '#f39c12'
                value: 60
              - color: '#d35400'
                value: 80
              - color: '#c0392b'
                value: 100
            line_width: 5
            name: Test Ping
            show:
              points: false
            type: 'custom:mini-graph-card'
        type: horizontal-stack
      - cards:
          - decimals: 0
            entities:
              - sensor.freebsd_router_kbytesec_received
            font_size: 75
            line_color: '#2a8fce'
            line_width: 5
            name: Down Speed
            show:
              points: false
            type: 'custom:mini-graph-card'
          - decimals: 0
            entities:
              - sensor.freebsd_router_kbytesec_sent
            font_size: 75
            line_color: '#f39c12'
            line_width: 5
            name: Up Speed
            show:
              points: false
            type: 'custom:mini-graph-card'
          - entities:
              - sensor.moksh_s_webserver
            font_size: 75
            line_color_threshold:
              - color: '#c0392b'
                value: 30
              - color: '#d35400'
                value: 60
              - color: '#2a8fce'
                value: 90
            line_width: 5
            name: Cert Validity
            show:
              points: false
            type: 'custom:mini-graph-card'
        type: horizontal-stack
      - entities:
          - entity: sensor.plex_server
            hold_action:
              action: call-service
              service: script.restart_pms
          - entity: sensor.sonarr
            hold_action:
              action: call-service
              service: script.restart_sonarr_service
          - entity: sensor.radarr
            hold_action:
              action: call-service
              service: script.restart_radarr_service
          - entity: sensor.bazarr
            hold_action:
              action: call-service
              service: script.restart_bazarr_service
          - entity: sensor.jackett
            hold_action:
              action: call-service
              service: script.restart_jackett_service
          - entity: sensor.ombi
            hold_action:
              action: call-service
              service: script.restart_ombi_service
          - entity: sensor.tautulli
            hold_action:
              action: call-service
              service: script.restart_tautulli_service
          - entity: sensor.mosquitto
            hold_action:
              action: call-service
              service: script.restart_mosquitto_service
          - entity: sensor.unifi
            hold_action:
              action: call-service
              service: script.restart_unifi_service
          - entity: binary_sensor.home_server
        show_name: false
        show_state: true
        title: Service Status
        type: glance
    type: vertical-stack
type: vertical-stack

Screenshot for reference
![chrome_auohikbs2o](https://user-images.githubusercontent.com/8089422/52737400-418f1d00-2ff2-11e9-98af-eca070c24f76.png)

How to change color of lines in new lovelace editor?

cards:
  - entities:
      - entity: light.luz_bano
      - entity: binary_sensor.movimiento_bano
      - entity: binary_sensor.0x00158d0002d43d30_occupancy_3
      - entity: binary_sensor.presencia_bano
    type: entities
  - entities:
      - entity: sensor.0x00158d0002726443_temperature_2
      - entity: sensor.0x00158d0002726443_humidity_2
    type: 'custom:mini-graph-card'
    line_color: purple
    name: Temperatura / Humedad
    points: hover
    location_state: center
    hours_to_show: 72
type: vertical-stack

Hello, this is the code that I have for a part of my lovelace config..
As it is right now it will make the temperature graph in a purple color, but if I add more line_color: lines under the one I already have it doesnt work. How can I change the colors of all of my sensors?
Thanks

Custom element doesn't exist - Redirect to GitHub AWS?

I'm getting the same old custom element doesn't exist.
Tried replacing module to js, updating, etc etc. Nothing works.

When opening Chrome Console - I'm getting this:
Uncaught SyntaxError: Unexpected token <

Trying to load the file manually (my-ip:8123/local/mini-graph-card-bundle.js?v=0.2.4) is showing me this:

<html><body>You are being <a href="https://github-production-release-asset-2e65be.s3.amazonaws.com/148520838/89f60d00-2fe9-11e9-97de-848df7135130?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190214%2Fus-east-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20190214T092528Z&amp;X-Amz-Expires=300&amp;X-Amz-Signature=a010d980089d3a6f93b4717c9ce4e8b1e44292fb7d6ce281eea9cb3b388d28e8&amp;X-Amz-SignedHeaders=host&amp;actor_id=0&amp;response-content-disposition=attachment%3B%20filename%3Dmini-media-player-bundle.js&amp;response-content-type=application%2Foctet-stream">redirected</a>.</body></html>

In other words - a redirect to: https://github-production-release-asset-2e65be.s3.amazonaws.com/151280062/e21f1600-2fcd-11e9-8ae8-6cccf4dd1a48?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190214%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190214T092927Z&X-Amz-Expires=300&X-Amz-Signature=2532623f53e4131d0a40c15be0a822c88ed05b8776747c336c569658eb55c71a&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3Dmini-graph-card-bundle.js&response-content-type=application%2Foctet-stream

How do I get rid of this?

I'm getting the same problem with mini-media-player ( link ) -- but on the other hand, weather-card does work.

error loading graph attribute d: Expected number

mini-graph-card-bundle.js?v=0.0.8:1 Error: attribute d: Expected number, "M 4,NaN 4,NaN Q4,NaN…".

just a super simple example with this config
- type: "custom:mini-graph-card"
entity: sensor.home_energy_sensor_current
height: 100
line_width: 4
font_size: 75
color: '#3498db'
hours_to_show: 168

it shows the number but not the graph .

Option for decimal places

would be nice if mini-graph-cardcard would have a option for decimal places
exemple:

places: 0 --------> 19 °C
places: 1 --------> 19.6 °C
places: 2 --------> 19.65 °C

accuracy of 25 results in incorrect graph

When setting the accuracy to 25, the last data point seems to be set to the max value of the graph. A lower value doesn't have this problem.
25:

24:

raw data:

Make graph color thresholds applied dynamically

Improve aesthetics when using labels

As per the forum:
(https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/137)

It seems a bit churlish to ask for such a small (and maybe niche) change in such a great card but would it be possible to do something about the bottom left corner being cut off when using labels in a card with rounded corners using card-modder?

Maybe have the min. value optional? Or remove the - (which would help if the min. value was only one digit).
Or, my preferred option would be to shift the whole thing including the y-axis over to be where the left side of the graph is? I think this would be more aesthetically pleasing even without rounded corners.

Uncaught TypeError: Cannot read property 'replaceChild' of null

Hi @kalkih.

Weird thing. Please take a look at this config:

          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:     
                  # wykres wilgotności
                  - type: custom:mini-graph-card
                    entities: 
                      - sensor.mqtt_humidity_bedroom
                    font_size: 80
                    animate: true
                    hour24: true
                    points_per_hour: 1
                    hours_to_show: 12
                    show:
                      fill: false
                    line_color: '#ff0000'                                   # czerwony 
                    color_thresholds:
                      - value: 40.00
                        color: '#55ff00'                                    # zielony
                      - value: 60.00
                        color: '#00aaff'                                    # niebieski
                  # wykres ciśnienia
                  - type: custom:mini-graph-card
                    entities: 
                      - sensor.mqtt_pressure_bedroom
                    icon: mdi:gauge
                    font_size: 75
                    animate: true
                    hour24: true
                    points_per_hour: 1
                    hours_to_show: 12
                    show:
                      fill: false
                    line_color: '#55ff00'                                   # zielony

When I use custom:mini-graph-card nested in vertical-stack and then in horizontal-stack I have this error on my log:
https://XXX.org/frontend_latest/dcc7e8d8e861a5f2b17d.chunk.js:3203:365 Uncaught TypeError: Cannot read property 'replaceChild' of null. This error occurs when I refresh the page.

Temporarily offline sensor without value breaks graph?

History graph shows this:
mini graph card shows this:
Console says this

and this

display input_boolean entities

I have a few graphs where I'd like to plot sensor value against input_boolean. Would that be possible to convert on/off of those entities to 0/1 and plot them on the chart?

Custom name replaced by entities name when hover

Hi,
When you set up a custom name for the card and then you hover a point, it will show the entities name instead. Hopefully, you see what I'm talking about.

Times on points going backwards

The time ranges, starting at the most recent point are increasing rather than decreasing when moving back in time

Error if nesting under horizontal-stack

When I nest type: custom:mini-graph-card under the type: horizontal-stack I get an error:

Cannot read property 'states' of undefined

Is it a problem with this component or HA 0.81 version?

Use value from climate?

Hi,

is it possible to use the value "current_temperature" from the climate entity?

Greetings
Daniel

Not working

Hi, i copied the 2 .js in the www folder, i put code in un-lovelace.js
but i get
https://xxxx.xxxx.xxx:8123/local/mini-graph-card.js?v=0.0.4:7:1 Uncaught SyntaxError: Unexpected token <
in the logfile

decimals not working

for some reason im not getting the decimals: option to work

type: 'custom:mini-graph-card'
name: Exterior Temperature
accuracy: 30
decimals: 0
entity: sensor.dark_sky_temperature
line_color: '#3498db'
line_width: 8

the output is always same ex: 18.3 wont matter if decimals is 0. 1. 2. 3. etc...

Enable popup support for multiple entities

Pressing/clicking legend entries will trigger the popup for that entity

Zero values show as current value

It appears that whilst the line graph is correct, hovering over a zero value displays the current value.

Min max values

I have 2 request regarding the min-max values.

The time is shown with AM-PM. Is it possible to also configure a 24 hours clock?
If you set graph: false under show then min-max (extrema) is not shown anymore. Is it possible to still show these values even when the graph is not shown?

Some more info here.

Support to show several states

@ideasman69

How hard is it to have the option of adding in the current value to the right of the screen? Like over here:

I suppose it can get tricky with more than 2 sensors

Add bar chart

Threshold colors not correctly shown on iphone when 2 graphs on a page

On my iPhone with the HA app, the threshold colors of the graph 1 get the colors of graph 2. Where on my desktop PC the colors are shown correctly.

This is the screenshot from my desktop:

And from my phone:

As you can see the dots show the correct colors, just the line isn't.

The card is now in a horizontal-stack, but when I remove them from that stack it still shows the same colors.
Graph 1 does show the correct colors when I remove graph 2 from the view.

Any ideas if this can be fixed?