mirror of https://github.com/jpawlowski/hass.tibber_prices.git synced 2026-05-28 18:43:40 +00:00

Julian Pawlowski 0e699ae142 feat(docs): add multi-language entity reference with search

Add a comprehensive entity reference system that helps users find
entities across all 5 supported languages (EN, DE, NO, NL, SV).

Core components:
- Generator script (scripts/docs/generate-sensor-reference) that
  builds sensor-reference.md from translation files with --check
  mode for CI validation
- EntityRef component for compact inline entity annotations with
  tooltip and version-aware linking to the reference table
- EntitySearch component with live filtering, clickable results,
  keyboard navigation, "/" shortcut to focus, category filter chips,
  match highlighting, copy-entity-ID button per row, back-links to
  documentation pages, persistent row highlights, hash-based deep
  linking, and mobile-responsive layout
- MDXComponents theme override for global component registration

Documentation updates:
- New sensor-reference.md page (115 entities x 5 languages)
- EntityRef annotations across 10 documentation pages
- Sidebar entry for quick navigation
- CI integration (docusaurus.yml + scripts/check)
- Ruff per-file-ignores for scripts/ (T201, INP001)

Impact: Users can now find any entity by its localized display name
regardless of their UI language. Inline EntityRef annotations link
directly to the multi-language lookup table with version-aware URLs.

2026-04-11 09:55:28 +00:00

5.1 KiB

Raw Blame History

Dashboard Examples

Beautiful dashboard layouts using Tibber Prices sensors.

Entity ID tip: <home_name> is a placeholder for your Tibber home display name in Home Assistant. Entity IDs are derived from the displayed name (localized), so the exact slug may differ. Can't find a sensor? Use the Entity Reference (All Languages) to search by name in your language.

Basic Price Display Card

Simple card showing current price with dynamic color:

type: entities
title: Current Electricity Price
entities:
  - entity: sensor.<home_name>_current_electricity_price
    name: Current Price
    icon: mdi:flash
  - entity: sensor.<home_name>_current_price_rating
    name: Price Rating
  - entity: sensor.<home_name>_next_electricity_price
    name: Next Price

Period Status Cards

Show when best/peak price periods are active:

type: horizontal-stack
cards:
  - type: entity
    entity: binary_sensor.<home_name>_best_price_period
    name: Best Price Active
    icon: mdi:currency-eur-off
  - type: entity
    entity: binary_sensor.<home_name>_peak_price_period
    name: Peak Price Active
    icon: mdi:alert

Custom Button Card Examples

Price Level Card

Show YAML: Price level card with color gradients (custom:button-card)

type: custom:button-card
entity: sensor.<home_name>_current_price_level
name: Price Level
show_state: true
styles:
  card:
    - background: |
        [[[
          if (entity.state === 'LOWEST') return 'linear-gradient(135deg, #00ffa3 0%, #00d4ff 100%)';
          if (entity.state === 'LOW') return 'linear-gradient(135deg, #4dddff 0%, #00ffa3 100%)';
          if (entity.state === 'NORMAL') return 'linear-gradient(135deg, #ffd700 0%, #ffb800 100%)';
          if (entity.state === 'HIGH') return 'linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%)';
          if (entity.state === 'HIGHEST') return 'linear-gradient(135deg, #ff4500 0%, #dc143c 100%)';
          return 'var(--card-background-color)';
        ]]]

Lovelace Layouts

Compact Mobile View

Optimized for mobile devices:

Show YAML: Compact mobile layout

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.<home_name>_current_electricity_price
    name: Today's Prices
    hours_to_show: 24
    points_per_hour: 4

  - type: glance
    entities:
      - entity: sensor.<home_name>_best_price_start
        name: Best Period Starts
      - entity: binary_sensor.<home_name>_best_price_period
        name: Active Now

Desktop Dashboard

Full-width layout for desktop:

Show YAML: Desktop 3-column grid layout

type: grid
columns: 3
square: false
cards:
  - type: custom:apexcharts-card
    # See chart-examples.md for ApexCharts config

  - type: vertical-stack
    cards:
      - type: entities
        title: Current Status
        entities:
          - sensor.<home_name>_current_electricity_price
          - sensor.<home_name>_current_price_rating

  - type: vertical-stack
    cards:
      - type: entities
        title: Statistics
        entities:
          - sensor.<home_name>_price_today
          - sensor.<home_name>_today_s_lowest_price
          - sensor.<home_name>_today_s_highest_price

Icon Color Integration

Using the icon_color attribute for dynamic colors:

Show YAML: Dynamic icon colors with mushroom chips

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.<home_name>_current_electricity_price
    icon_color: "{{ state_attr('sensor.<home_name>_current_electricity_price', 'icon_color') }}"

  - type: entity
    entity: binary_sensor.<home_name>_best_price_period
    icon_color: green

  - type: entity
    entity: binary_sensor.<home_name>_peak_price_period
    icon_color: red

See Icon Colors for detailed color mapping.

Picture Elements Dashboard

Advanced interactive dashboard:

Show YAML: Picture elements interactive dashboard

type: picture-elements
image: /local/electricity_dashboard_bg.png
elements:
  - type: state-label
    entity: sensor.<home_name>_current_electricity_price
    style:
      top: 20%
      left: 50%
      font-size: 32px
      font-weight: bold

  - type: state-badge
    entity: binary_sensor.<home_name>_best_price_period
    style:
      top: 40%
      left: 30%

  # Add more elements...

Auto-Entities Dynamic Lists

Automatically list all price sensors:

Show YAML: Auto-entities card for all price sensors

type: custom:auto-entities
card:
  type: entities
  title: All Price Sensors
filter:
  include:
    - entity_id: "sensor.<home_name>_*_price"
  exclude:
    - state: unavailable
sort:
  method: state
  numeric: true

💡 Related:

Chart Examples - ApexCharts configurations
Dynamic Icons - Icon behavior
Icon Colors - Color attributes

5.1 KiB Raw Blame History