Feature: highlight cheap phases (#31)

* added cheapest hour visualization

* added epex_spot_sensor helpers  support

Author: Neisi

README.md

@@ -24,6 +24,9 @@ Inspired by Tibber, this custom card visualizes **hourly energy prices** on a ti
 - ⚡ Simple configuration
 - 🔄 toggle today / tomorrow
 
+The card can highlight the cheapest times of the day if you want (you can activated it in configuration - see chapter parameters)
+
+![cheap_time_slots](./assets/examples/light_graph_cheap_times.png) 
 
 ### Timeline mode:
 By default, the card shows a **timeline view** of today's electricity prices.  
@@ -284,6 +287,9 @@ Here are the available parameters for this Lovelace card.
 | `day_switch`    | boolean  | `false` | Show day toggler to change between today and tomorrow (for circle and timeline view only) |
 | `start_view`    | string  | `today` | Determines which view is shown by default when the card loads. Possible values: `today`, `tomorrow` (for circle and timeline view only) |
 | `currency` | object | `{ name: "Cent", symbol: "¢" }` | Defines how the unit for energy price is displayed. Use this to customize the currency subunit (e.g., "Cent", "Öre", ...). The `name` is shown as text label. The `symbol` field is currently optional and not yet displayed in all views, but **it is recommended to set it** since it may be used by future features or visualizations. |
+| `cheap_times` | boolean | `false` | The card highlights the cheapest times of the day in graph and the phases are displayed in text form. <ul><li>Prices are analyzed <strong>per day</strong>, so each day is evaluated on its own.</li><li>For each day, prices are normalized using a relative scale: <code>relative price = (price - daily minimum) / (daily maximum - daily minimum)</code>.</li><li>The <strong>lowest ~25%</strong> of all intervals for that day are considered <em>cheap</em>.</li><li>Consecutive cheap intervals are grouped into longer time phases.</li><li>Only <strong>future</strong> phases are shown, and only if they last <strong>at least 1 hour</strong>.</li></ul> |
+| `cheap_time_sources` | array of strings | `undefined` | Optional and only available in yaml mode. If `cheap_times: true` is set, you can provide a list of sensors/entity IDs to define the cheap time periods manually instead of letting the card calculate them automatically. This is useful if you already use helpers from the [ha_epex_spot_sensor](https://github.com/mampfes/ha_epex_spot_sensor) add-on – you can pass those sensor IDs here to display their cheap periods directly.|
+
 ---
 
 ### 📘 Configuration
@@ -301,7 +307,7 @@ price: sensor.epex_price
 
 circle view and dark theme:
 ```yaml
-type: custom:price-timeline-card-test
+type: custom:price-timeline-card
 price: sensor.epex_price
 theme: dark
 view: circle
@@ -329,6 +335,28 @@ currency:
 ```
 ![Visual Editor](./assets/examples/currency.png)
 
+graph view with cheap time visualization:
+```yaml
+type: custom:price-timeline-card
+price: sensor.tibber_prices
+view: graph
+theme: dark
+cheap_times: true
+```
+![cheap_time_slots](./assets/examples/light_graph_cheap_times.png) ![cheap_time_slots2](./assets/examples/light_graph_cheap_times_2.png) 
+
+graph view with cheap time visualization with use of ha_epex_spot_sensors:
+```yaml
+type: custom:price-timeline-card
+price: sensor.tibber_prices
+view: graph
+cheap_times: true
+cheap_time_sources:
+  - binary_sensor.car_charge
+  - binary_sensor.washing
+```
+![cheap_time_slots](./assets/examples/light_graph_cheap_times_addon.png) 
+
 #### Configuration with Visual Editor
 
 The configuration can also be done using the built-in form editor (visual editor).

assets/examples/editor.png

@@ -9,6 +9,11 @@ export default {
   label_tomorrow_price: "Morgendagens pris",
   label_average_price: "Gennemsnitspris",
   label_price: "Pris",
+  label_day: "Dag",
+  label_start: "Start",
+  label_end: "Slut",
+  label_duration: "Varighed",
+  label_name: "Navn",
   editor_theme_light: "Lyst",
   editor_theme_dark: "Mørkt",
   editor_theme_system: "System",
@@ -28,4 +33,6 @@ export default {
   editor_currency_desc: "Angiv egen valuta",
   editor_day_switch_label: "Dagskifter",
   editor_day_switch_desc: "Viser eller skjuler dagskifteren",
+  editor_cheap_times_label: "Billige tider",
+  editor_cheap_times_desc: "Visning af billige tidsintervaller",
 };

assets/examples/light_graph_cheap_times.png

@@ -9,6 +9,11 @@ export default {
   label_tomorrow_price: "Morgiger Preis",
   label_average_price: "Durchschnittspreis",
   label_price: "Preis",
+  label_day: "Tag",
+  label_start: "Start",
+  label_end: "Ende",
+  label_duration: "Dauer",
+  label_name: "Name",
   editor_theme_light: "Hell",
   editor_theme_dark: "Dunkel",
   editor_theme_system: "System",
@@ -28,4 +33,6 @@ export default {
   editor_currency_desc: "Eigene Währung angeben",
   editor_day_switch_label: "Tag Umschalter",
   editor_day_switch_desc: "Blendet den Tag Umschalter ein oder aus",
+  editor_cheap_times_label: "Günstige Zeiten",
+  editor_cheap_times_desc: "Anzeige von günstigen Zeitintervallen",
 };

assets/examples/light_graph_cheap_times_2.png

@@ -7,6 +7,11 @@ export default {
   label_time_nextDay: "Price range",
   label_average_price: "Average Price",
   label_price: "Price",
+  label_day: "Day",
+  label_start: "Start",
+  label_end: "End",
+  label_duration: "Duration",
+  label_name: "Name",
   unit_cent: "Cent",
   label_tomorrow_price: "Tomorrow's price",
   editor_theme_light: "Light",
@@ -28,4 +33,6 @@ export default {
   editor_currency_desc: "Specify a custom currency",
   editor_day_switch_label: "Day Switch",
   editor_day_switch_desc: "Shows or hides the day switch",
+  editor_cheap_times_label: "Cheap Times",
+  editor_cheap_times_desc: "Display of cheap time intervals",
 };

assets/examples/light_graph_cheap_times_addon.png

@@ -7,6 +7,11 @@ export default {
   label_time_nextDay: "Rango de precios",
   label_average_price: "Precio medio",
   label_price: "Precio",
+  label_day: "Día",
+  label_start: "Inicio",
+  label_end: "Fin",
+  label_duration: "Duración",
+  label_name: "Nombre",
   unit_cent: "Céntimos",
   label_tomorrow_price: "Precio de mañana",
   editor_theme_light: "Claro",
@@ -28,4 +33,6 @@ export default {
   editor_currency_desc: "Especifique una moneda personalizada",
   editor_day_switch_label: "Conmutador de día",
   editor_day_switch_desc: "Muestra u oculta el conmutador de día",
+  editor_cheap_times_label: "Tiempos económicos",
+  editor_cheap_times_desc: "Visualización de intervalos de tiempo económicos",
 };

localize/da.js

@@ -7,6 +7,11 @@ export default {
   label_time_nextDay: "Plage de prix",
   label_average_price: "Prix moyen",
   label_price: "Prix",
+  label_day: "Jour",
+  label_start: "Début",
+  label_end: "Fin",
+  label_duration: "Durée",
+  label_name: "Nom",
   unit_cent: "Centimes",
   label_tomorrow_price: "Prix de demain",
   editor_theme_light: "Clair",
@@ -28,4 +33,6 @@ export default {
   editor_currency_desc: "Indiquez une devise personnalisée",
   editor_day_switch_label: "Commutateur de jour",
   editor_day_switch_desc: "Affiche ou masque le commutateur de jour",
+  editor_cheap_times_label: "Heures avantageuses",
+  editor_cheap_times_desc: "Affichage des intervalles horaires avantageux",
 };