Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

Commit

Permalink
configurable chart granularity
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlambert121
jlambert121 committed Dec 26, 2021
1 parent 540dd0a commit e9c6d6c
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 15 deletions.
29 changes: 16 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
15 changes: 13 additions & 2 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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 [];
Expand All @@ -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
Expand Down Expand Up @@ -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 = [];
Expand Down

0 comments on commit e9c6d6c

Please sign in to comment.