Rain Bar Card (Energy-style)

A Home Assistant Lovelace card for precipitation totals that matches the Energy dashboard look. It supports hourly increments, daily totals, week/month sums, auto-scaled color thresholds, Energy date picker sync, optional compare overlay, and shared week/month mode with Min/Max/Avg Bar Card.

Features

• Energy-style SVG chart (HA look and feel)
• Hour/day/week/month bins with automatic aggregation
• Auto-scaled color palette (annual mm -> period bins)
• Syncs with Energy date picker selection
• Optional compare overlay (when compare is enabled in Energy date picker)
• Shared week/month mode with Min/Max/Avg Bar Card
• Editor GUI for all options

Installation

HACS (recommended)

1. Open HACS > Frontend.
2. Search for Rain Bar Card.
3. Install and reload the browser.

Manual

1. Copy rain-bar-card.js to /config/www/.
2. Add the resource in Lovelace:

resources:
  - url: /local/rain-bar-card.js
    type: module

Usage

type: "custom:rain-bar-card"
entity: sensor.daily_rain_mm
name: Rain totals

Configuration

All options are available via the card editor. YAML examples are shown below.

Name	Type	Default	Description
name	string	"Úhrn srážek"	Card title
entity	string	required	Sensor with precipitation statistics
height	number	320	Chart height in px
decimals	number	2	Value precision
y_padding_ratio	number	0.10	Extra headroom above max
show_x_labels	boolean	true	Show X axis labels
show_y_labels	boolean	true	Show Y axis labels
show_y_unit	boolean	true	Show Y axis unit
y_unit	string	auto	Force Y axis unit
annual_scale	list	built-in	Thresholds in annual mm (auto scaled to bins)
listen_energy_date_selection	boolean	true	Sync range with Energy date picker
shared_period_mode	boolean	false	Share week/month mode via mmab:period-mode with Min/Max/Avg Bar Card
default_ws_period	string	day	Default bins: hour, day, week, month
debug	boolean	false	Enable debug logs
debug_level	string	summary	Debug verbosity

Example with custom scale

type: "custom:rain-bar-card"
entity: sensor.daily_rain_mm
name: Rain totals
annual_scale:
  - lt: 540
    color: "#c35e12"
  - lt: 700
    color: "#31d6f4"
  - lt: 1000
    color: "#a808f8"

Compare overlay

If you enable Compare in the Energy date picker, the card will draw a second (ghosted) bar set for the compare range and show both values in the tooltip.

Shared week/month mode

Set shared_period_mode: true on both this card and Min/Max/Avg Bar Card to keep their week/month toggle in sync. The mode is persisted in localStorage under mmab_shared_period_mode.

Development notes

• The card uses recorder/statistics_during_period and supports sensors that expose state, max, sum, or mean.
• Palette values are defined in annual millimeters and scaled to the current bin duration.

Changelog

1.0.0

• Initial release.

See GitHub releases.