Lovelace Mini Graph Card

A minimalistic sensor with graph lovelace card for Home Assistant.

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

Install

Simple install

1. Download and copy mini-graph-card-bundle.js from the latest release into your config/www directory.

• Add a reference to mini-graph-card-bundle.js inside your ui-lovelace.yaml.

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

CLI install

1. Move into your config/www directory

• Grab mini-graph-card-bundle.js

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

• Add a reference to mini-graph-card-bundle.js inside your ui-lovelace.yaml.

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

(Optional) Add to custom updater

1. Make sure you've the custom_updater component installed and working.

• Add a new reference under card_urls in your custom_updater configuration in configuration.yaml.

  custom_updater:
    card_urls:
      - https://raw.githubusercontent.com/kalkih/mini-graph-card/master/tracker.json

Updating

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

1. 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.1.0
      type: module

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

Using the card

Options

Example usage

Single card

- type: custom:mini-graph-card
  entity: sensor.sensor_illumination
  height: 100
  line_width: 4
  font_size: 75
  color: '#3498db'

Show data from the last week

- type: custom:mini-graph-card
  entity: sensor.sensor_illumination
  hours_to_show: 168

Hide everything except the graph

- type: custom:mini-graph-card
  entity: sensor.sensor_illumination
  hide:
    - icon
    - name
    - state

Stacking horizontally

- type: horizontal-stack
  cards:
    - type: custom:mini-graph-card
      entity: sensor.sensor_temperature
      name: Temperature
      line_color: '#3498db'
      line_width: 8
    - type: custom:mini-graph-card
      entity: sensor.sensor_humidity
      name: Humidity
      line_color: '#e74c3c'
      line_width: 8
    - type: custom:mini-graph-card
      entity: sensor.sensor_pressure
      name: Pressure
      line_width: 8

Develop

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/mini-graph-card.js
    type: module

Generate the bundle

Requires nodejs & npm

Move into the mini-graph-card repo & install dependencies.

$ npm install

Edit the source file mini-graph-card.js, build by running

$ npm run build

The mini-graph-card-bundle.js will be rebuilt and ready.

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.