configurable chart granularity

Author: jlambert121

README.md

@@ -24,19 +24,22 @@ entity: weather.home
 
 ##### Card options
 
-| Name            | Type    | Default                  | Description                                                                                        |
-| --------------- | ------- | -------------------------|--------------------------------------------------------------------------------------------------- |
-| type            | string  | **Required**             | Should be `custom:weather-chart-card`                                                              |
-| entity          | string  | **Required**             | An entity_id with the `weather` domain                                                             |
-| title           | string  | none                     | Card title                                                                                         |
-| show_main       | boolean | true                     | Show or hide a section with current weather condition and temperature                              |
-| show_attributes | boolean | true                     | Show or hide a section with attributes such as pressure, humidity, wind direction and speed, etc   |
-| icons           | string  | none                     | Path to the location of custom icons in svg format, for example `/local/weather-icons/`            |
-| icons_size      | number  | 25                       | The size of custom icons in pixels                                                                 |
-| units           | object  | none                     | See [units of measurement](#units-of-measurement) for available options                            |
-| temp1_color     | string  | rgba(230, 100, 100, 1.0) | Temperature first line chart color                                                                 |
-| temp2_color     | string  | rgba(68, 115, 158, 1.0)  | Temperature second line chart color                                                                |
-| precip_color    | string  | rgba(132, 209, 253, 1.0) | Precipitation bar chart color                                                                      |
+| Name                | Type    | Default                  | Description                                                                                         |
+| ------------------- | ------- | -------------------------|---------------------------------------------------------------------------------------------------- |
+| type                | string  | **Required**             | Should be `custom:weather-chart-card`                                                               |
+| entity              | string  | **Required**             | An entity_id with the `weather` domain                                                              |
+| title               | string  | none                     | Card title                                                                                          |
+| show_main           | boolean | true                     | Show or hide a section with current weather condition and temperature                               |
+| show_attributes     | boolean | true                     | Show or hide a section with attributes such as pressure, humidity, wind direction and speed, etc    |
+| icons               | string  | none                     | Path to the location of custom icons in svg format, for example `/local/weather-icons/`             |
+| icons_size          | number  | 25                       | The size of custom icons in pixels                                                                  |
+| units               | object  | none                     | See [units of measurement](#units-of-measurement) for available options                             |
+| temp1_color         | string  | rgba(230, 100, 100, 1.0) | Temperature first line chart color                                                                  |
+| temp2_color         | string  | rgba(68, 115, 158, 1.0)  | Temperature second line chart color                                                                 |
+| precip_color        | string  | rgba(132, 209, 253, 1.0) | Precipitation bar chart color                                                                       |
+| max_chart_lookahead | number  | 0                        | Desired lookahead elements for forecast chart.  Default is fist `n` elements based on card width.\* |
+
+\* For the `forecast` in your `entity` object, the maximum number of elements to look ahead to display on the chart that will fit within your card's width swapping granularity for lookahead time.  For example, if you have 24 hours of hourly weather in your weather entity, set this value to 18, and your card can display 8 elements, your chart would display 8 elemnts at 2 hour intervals dropping the last 2 hourlies in the desired window, but making sure to display as much data as possible.
 
 ##### Units of measurement
 

src/main.js

@@ -70,6 +70,7 @@ class WeatherChartCard extends LitElement {
       ? this.config.chart_options.temperature2_color : 'rgba(68, 115, 158, 1.0)';
     this.chartPrecipitationsColor = this.config.chart_options && this.config.chart_options.precipitations_color
       ? this.config.chart_options.precipitations_color : 'rgba(132, 209, 253, 1.0)';
+    this.maxChartLookahead = this.config.max_chart_lookahead ? this.config.max_chart_lookahead : 0;
   }
 
   constructor() {
@@ -129,6 +130,16 @@ class WeatherChartCard extends LitElement {
     this.forecastItems = Math.round(card.offsetWidth / (this.chartLabelsFontSize * 5.5));
   }
 
+  getForecast(weather, forecastItems) {
+    if (this.maxChartLookahead == 0 ) {
+      return weather.attributes.forecast.slice(0, forecastItems);
+    } else {
+      var hoursPerEntity = parseInt(Math.min(weather.attributes.forecast.length, this.maxChartLookahead)/forecastItems);
+      var tmpForecast = weather.attributes.forecast.slice(0, forecastItems * hoursPerEntity);
+      return tmpForecast.filter((e, i) => i % hoursPerEntity === (hoursPerEntity - 1));
+    }
+  }
+
   drawChart({config, language, weather, forecastItems} = this) {
     if (!weather || !weather.attributes || !weather.attributes.forecast) {
       return [];
@@ -139,7 +150,7 @@ class WeatherChartCard extends LitElement {
     var tempUnit = this._hass.config.unit_system.temperature;
     var lengthUnit = this._hass.config.unit_system.length;
     var precipUnit = lengthUnit === 'km' ? this.ll('units')['mm'] : this.ll('units')['in'];
-    var forecast = weather.attributes.forecast.slice(0, forecastItems);
+    var forecast = this.getForecast(weather, forecastItems);
     if ((new Date(forecast[1].datetime) - new Date(forecast[0].datetime)) < 864e5)
       var mode = 'hourly';
     else
@@ -326,7 +337,7 @@ class WeatherChartCard extends LitElement {
     if (!weather || !weather.attributes || !weather.attributes.forecast) {
       return [];
     }
-    var forecast = weather.attributes.forecast.slice(0, forecastItems);
+    var forecast = this.getForecast(weather, forecastItems);
     var i;
     var dateTime = [];
     var tempHigh = [];