feat(#151): static relative start / end dates instead of using energy…

…-date-selector By popular demand, we now have `time_period_from` & `time_period_to` options. Format is similar to Grafana. See the README
MindFreeze · Sep 27, 2024 · 13307f8 · 13307f8
1 parent 46ea331
commit 13307f8
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ Install through [HACS](https://hacs.xyz/)
 | autoconfig        | object  |                     | Experimental. See [autoconfig](#autoconfig)
 | sections          | list    |                     | Required unless using autoconfig. Entities to show divided by sections, see [sections object](#sections-object) for additional options.
 | layout            | string  | auto                | Valid options are: 'horizontal' - flow left to right, 'vertical' - flow top to bottom & 'auto' - determine based on available space (based on the section->`min_witdh` option, which defaults to 150)
-| energy_date_selection | boolean | false           | Integrate with the Energy Dashboard. Filters data based on the [energy-date-selection](https://www.home-assistant.io/dashboards/energy/) card. Use this only for accumulated data sensors (energy/water/gas) and with a `type:energy-date-selection` card. You still need to specify all your entities as HA doesn't know exactly how to connect them but you can use the general kWh entities that you have in the energy dashboard. In the future we may use areas to auto configure the chart.
+| energy_date_selection | boolean | false           | Integrate with the Energy Dashboard. Filters data based on the [energy-date-selection](https://www.home-assistant.io/dashboards/energy/) card. Use this only for accumulated data sensors (energy/water/gas) and with a `type:energy-date-selection` card. You still need to specify all your entities as HA doesn't know exactly how to connect them but you can use the general kWh entities that you have in the energy dashboard. In the future we may use areas to auto configure the chart. Not compatible with `time_period`
 | title             | string  |                     | Optional header title for the card
 | unit_prefix       | string  |                     | Metric prefix for the unit of measurment. See <https://en.wikipedia.org/wiki/Unit_prefix> . Supported values are m, k, M, G, T
 | round             | number  | 0                   | Round the value to at most N decimal places. May not apply to near zero values, see issue [#29](https://github.com/MindFreeze/ha-sankey-chart/issues/29)
@@ -50,6 +50,8 @@ Install through [HACS](https://hacs.xyz/)
 | monetary_unit     | string  |                     | Currency of the gas or electricity price, e.g. 'USD'
 | sort_by           | string  |                     | Sort the entities. Valid options are: 'state'. If your values change often, you may want to use the `throttle` option to limit update frequency
 | sort_dir          | string  | desc                | Sorting direction. Valid options are: 'asc' for smallest first & 'desc' for biggest first
+| time_period_from | string  |                      | Start of custom time period (e.g., "now-1d", "now/d"). Not compatible with `energy_date_selection`. See [Time period](#time-period)
+| time_period_to   | string  | now                  | End of custom time period. Not compatible with `energy_date_selection`. See [Time period](#time-period)
 
 ### Sections object
 
@@ -137,10 +139,57 @@ This card supports automatic configuration generation based on the HA energy das
     # any additional autoconfig options (listed below)
 ```
 
+or like this:
+
+```yaml
+- type: custom:sankey-chart
+  autoconfig: true
+  time_period_from: "now/d" # today
+```
+
 | Name              | Type    | Requirement  | Default             | Description                                 |
 | ----------------- | ------- | ------------ | ------------------- | ------------------------------------------- |
 | print_yaml        | boolean | **Optional** | false               | Prints the auto generated configuration after the card so you can use it as a starting point for customization. It shows up like an error. Don't worry about it.
 
+### Time Period
+
+The `time_period_from` and `time_period_to` options allow you to specify a custom time period for data retrieval. The format is based on [Grafana's time range format](https://grafana.com/docs/grafana/latest/dashboards/use-dashboards/?pg=blog&plcmt=body-txt#set-dashboard-time-range).
+
+Time units: s (seconds), m (minutes), h (hours), d (days), w (weeks), M (months), y (years)
+
+Note that while seconds and minutes are supported, there is a delay in the statistics data in HA of up to 1 hour, so showing small periods like the last 30 mins probably won't work.
+
+Examples:
+
+- `now-5m`: 5 minutes ago
+- `now-1h`: 1 hour ago
+- `now-1d`: 1 day ago
+- `now-1w`: 1 week ago
+- `now-1M`: 1 month ago
+- `now/d`: Start of the current day
+- `now/w`: Start of the current week
+- `now/M`: Start of the current month
+- `now/y`: Start of the current year
+- `now-1d/d`: Start of the previous day
+
+If `time_period_to` is not specified, it defaults to `now`.
+
+Example configurations:
+
+```yaml
+type: custom:sankey-chart
+title: Last 7 days up to the current moment
+time_period_from: "now-7d"
+```
+
+```yaml
+type: custom:sankey-chart
+title: Yesterday
+time_period_from: "now-1d/d"
+time_period_to: "now/d"
+```
+
+
 ## Examples
 
 ### Simple
@@ -240,7 +289,7 @@ You can find more examples and help in the HA forum <https://community.home-assi
 
 This card supports partial Energy dashboard integration. You still need to specify the entities and connections for now. See `energy_date_selection` option.
 
-Currently this chart just shows historical data based on a energy-date-selection card. It doesn’t know/care if your entities are in the default energy dashboard.
+Currently this chart just shows historical data based on a energy-date-selection card. It doesn't know/care if your entities are in the default energy dashboard.
 
 ## FAQ
 
@@ -250,7 +299,7 @@ Currently this chart just shows historical data based on a energy-date-selection
 
 **Q: How do I get total [daily] energy?**
 
-**A:** There isn’t a general Consumed Energy sensor in the HA Energy dashboard AFAIK. HA calculates it based on all the in/out kWh values. I can’t tell you exactly how to calculate it because it depends on what values you can monitor. Some people already have a Total Consumption sensor, others have a Current Consumption and create an integration sensor from that, etc.
+**A:** There isn't a general Consumed Energy sensor in the HA Energy dashboard AFAIK. HA calculates it based on all the in/out kWh values. I can't tell you exactly how to calculate it because it depends on what values you can monitor. Some people already have a Total Consumption sensor, others have a Current Consumption and create an integration sensor from that, etc.
 
 **Q: Can I group/sum entities in the chart?**
 
@@ -273,11 +322,11 @@ Currently this chart just shows historical data based on a energy-date-selection
 1. `npm i`
 2. `npm start`
 3. The compiled `.js` file will be accessible on
-   `http://127.0.0.1:5000/ha-sankey-chart.js`.
+   `http://127.0.0.1:3000/ha-sankey-chart.js`.
 4. On a running Home Assistant installation add this to your Lovelace `resources:`
 
 ```yaml
-- url: 'http://127.0.0.1:5000/ha-sankey-chart.js'
+- url: 'http://127.0.0.1:3000/ha-sankey-chart.js'
   type: module
 ```
 
@@ -287,3 +336,4 @@ Currently this chart just shows historical data based on a energy-date-selection
 [maintenance-shield]: https://img.shields.io/maintenance/yes/2024.svg?style=for-the-badge
 [releases-shield]: https://img.shields.io/github/release/MindFreeze/ha-sankey-chart.svg?style=for-the-badge
 [releases]: https://github.com/MindFreeze/ha-sankey-chart/releases
+
diff --git a/rollup.config.js b/rollup.config.js
@@ -12,7 +12,7 @@ const dev = process.env.ROLLUP_WATCH;
 const serveopts = {
   contentBase: ['./dist'],
   host: '0.0.0.0',
-  port: 5000,
+  port: 3000,
   allowCrossOrigin: true,
   headers: {
     'Access-Control-Allow-Origin': '*',

diff --git a/src/editor/index.ts b/src/editor/index.ts
@@ -73,6 +73,12 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
         };
       }
     } else {
+      if (ev.detail.value.time_period_from && !this._config!.time_period_from) {
+        ev.detail.value.energy_date_selection = false;
+      } else if (ev.detail.value.energy_date_selection && !this._config!.energy_date_selection) {
+        ev.detail.value.time_period_from = undefined;
+        ev.detail.value.time_period_to = undefined;
+      }
       this._config = { ...ev.detail.value };
     }
     this._updateConfig();
@@ -164,15 +170,17 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
       //   ],
       // },
       { name: 'title', selector: { text: {} } },
-      { name: 'show_names', selector: { boolean: {} } },
-      { name: 'show_icons', selector: { boolean: {} } },
-      { name: 'show_states', selector: { boolean: {} } },
-      { name: 'show_units', selector: { boolean: {} } },
       { name: 'energy_date_selection', selector: { boolean: {} } },
       {
         type: 'grid',
         name: '',
         schema: [
+          { name: 'time_period_from', selector: { text: {} } },
+          { name: 'time_period_to', selector: { text: {} } },
+          { name: 'show_names', selector: { boolean: {} } },
+          { name: 'show_icons', selector: { boolean: {} } },
+          { name: 'show_states', selector: { boolean: {} } },
+          { name: 'show_units', selector: { boolean: {} } },
           {
             name: 'layout',
             selector: {

diff --git a/src/energy.ts b/src/energy.ts
@@ -103,10 +103,15 @@ export const getEnergyDataCollection = (
   if ((hass.connection as any)[key]) {
     return (hass.connection as any)[key];
   }
-  // HA has not initialized the collection yet and we don't want to interfere with that
+  // HA has not initialized the collection yet and we don't want to interfere with that if energy_date_selection is enabled
   return null;
 };
 
+export const getEnergyPreferences = (hass: HomeAssistant) =>
+  hass.callWS<EnergyPreferences>({
+    type: "energy/get_prefs",
+  });
+
 
 const fetchStatistics = (
   hass: HomeAssistant,
@@ -175,10 +180,10 @@ const calculateStatisticSumGrowth = (
   return growth;
 };
 
-export async function getStatistics(hass: HomeAssistant, energyData: EnergyData, devices: string[], conversions: Conversions): Promise<Record<string, number>> {
+export async function getStatistics(hass: HomeAssistant, { start, end }: Pick<EnergyData, 'start' | 'end'>, devices: string[], conversions: Conversions): Promise<Record<string, number>> {
   const dayDifference = differenceInDays(
-    energyData.end || new Date(),
-    energyData.start
+    end || new Date(),
+    start
   );
   const period = dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour";
 
@@ -190,10 +195,10 @@ export async function getStatistics(hass: HomeAssistant, energyData: EnergyData,
         // If converting from kWh to CO2, we need to use a different API call to account for time-varying CO2 intensity
         time_variant_data[id] = fetchFossilEnergyConsumption(
           hass,
-          energyData.start,
+          start,
           [id],
           conversions.co2_intensity_entity,
-          energyData.end,
+          end,
           period
         );
       }
@@ -211,8 +216,8 @@ export async function getStatistics(hass: HomeAssistant, energyData: EnergyData,
   if (time_invariant_devices.length > 0) {
     time_invariant_data = await fetchStatistics(
       hass,
-      energyData.start,
-      energyData.end,
+      start,
+      end,
       time_invariant_devices,
       period,
       // units,