Logbook card

2 customs Lovelace cards for displaying history of an entity or multiple entities for Home Assistant.

WARNING: Since 1.0.0, the resource type of the card is JavaScript Module and not JavaScript File anymore. In case of loading error, check if the resource type is JavaScript module.

• Installation
  • HACS
  • Manual
• Using the card
  • Options
  • Logbook Card options
  • Multiple entities Logbook Card options
  • Entity object
  • State map object
  • Custom log map object
  • Available show options
  • Attribute object
  • Duration object
  • Duration labels object
    • Until v1.4.1
    • FROM v1.5.0
  • Hidden config object
  • Attribute hidden config object
  • Separator style object
  • Action Options
• Custom Styling
• Example usage
  • Hidden states
  • Multiple entities
  • State label
  • Attributes and custom date format
  • Duration labels
  • Custom separator style
  • Custom icons
  • Example with collapsed view
  • Custom log

Installation

HACS

This card is available in HACS (Home Assistant Community Store).

Manual

Download the logbook-card.js from the latest release and store it in your configuration/www folder. Configure Lovelace to load the card:

resources:
  - url: /local/logbook-card.js?v=1
    type: module

Using the card

Options

Logbook Card options

Multiple entities Logbook Card options

the custom:multiple-logbook-card card has been introduce in v2.0.0.

Entity object

State map object

If you use wildcard, make sure to put the more specific states first.

Attribute state map object

Custom log map object

If you use wildcard, make sure to put the more specific custom log first.

Available show options

All properties are optional.

Attribute object

Duration object

Duration labels object

Until v1.4.1

This configuration is Deprecated since v.1.5.0.

Allows to have custom labels for duration. Must contains ${value} which will be replaced by the duration.

FROM v1.5.0

Allows to have custom labels for duration.

Hidden config object

Introduce in 1.10.0

Attribute hidden config object

Introduce in 1.10.0

Separator style object

Action Options

Custom Styling

The card style can be customize using lovelace card mod

After installation, you just have to add a card_mod properties with your custom styles

Here an example to make state in bold.

type: custom:logbook-card
entity: light.living_room
card_mod:
  style: |
    .state {
      font-weight: bold;
    }

Here an example to put custom log name above message and style them.

type: custom:logbook-card
entity: light.living_room
card_mod:
  style: |
    .custom-log .item-content {
      display: flex;
      flex-direction: column;
    }
    .custom-log .custom-log__separator {
        display: none;
    }
    .custom-log .item-content .custom-log__name {
        font-weight: bold;
    }
    .custom-log .item-content .custom-log__message {
       font-style: italic;
       text-indent: 0px;
    }

Here is the list of style you can override:

Usage in panel mode

The card can be used in panel mode. Use this custom style to have the card in full page

type: custom:logbook-card
entity: light.living_room
card_mod:
  style: |
    ha-card .card-content-scroll {
      height: 100%;
      max-height: 100%;
    }

Example usage

Hidden states

type: 'custom:logbook-card'
desc: true
entity: sun.sun
hidden_state:
  - above_horizon
title: Day history

Multiple entities

type: 'custom:multiple-logbook-card'
desc: true
entities: 
  - entity: sun.sun
    hidden_state:
      - above_horizon
  - entity: sensor.moon_phase
title: Sun And Moon

State label

entity: binary_sensor.garage_opening_sensor
max_items: 10
state_map:
  - label: Open
    value: on
  - label: Closed
    value: off
title: 'Garage door history'
type: 'custom:logbook-card'
show:
  end_date: false
  start_date: true

Attributes and custom date format

type: 'custom:logbook-card'
desc: true
entity: sun.sun
title: Day history
attributes:
  - value: elevation
  - value: next_rising
    label: Next Rising
    type: date
date_format: DD/MM/YYYY HH:mm

Duration labels

type: 'custom:logbook-card'
desc: true
entity: binary_sensor.garage_opening_sensor
title: 'Garage'
duration:
  labels:
    second: 's'
    minute: 'm'
    hour: 'h'
    day: 'j'
    week: 'w'
    month: 'm'

Custom separator style

type: 'custom:logbook-card'
desc: true
entity: binary_sensor.garage_opening_sensor
title: 'Garage Door History'
show:
  separator: true
separator_style:
  color: black
  style: dashed

Custom icons

entity: sensor.vacuum
hidden_state:
  - ''
state_map:
  - icon: 'mdi:stove'
    value: Kitchen
  - icon: 'mdi:hotel'
    value: Girls bedroom
  - icon: 'mdi:bed-double'
    value: Bedroom
  - icon: 'mdi:water-pump'
    value: Bathroom
  - icon: 'mdi:television'
    value: Living room
title: Vacuum History
type: 'custom:logbook-card'

Example with collapsed view

entity: sensor.vacuum
hidden_state:
  - ''
collapse: 5
title: Vacuum History
type: 'custom:logbook-card'

Custom log

entity: sensor.logger
type: custom:logbook-card
group_by_day: true
scroll: true
show_history: false
date_format: relative
custom_logs: true
custom_log_map:
  - name: Name test
    icon: 'mdi:lightbulb-cfl'
    icon_color: '#a772e9'
  - name: from automation
    icon: 'mdi:lightbulb-cfl-spiral'
    icon_color: '#e9a772'