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

configurable chart granularity #87

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

configurable chart granularity #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions README.md
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ class WeatherChartCard extends LitElement {
this.windSpeed = this.weather.attributes.wind_speed;
this.windDirection = this.weather.attributes.wind_bearing;
}
this.maxChartLookahead = this.config.max_chart_lookahead ? this.config.max_chart_lookahead : 0;
}

constructor() {
Expand Down Expand Up @@ -133,6 +134,16 @@ class WeatherChartCard extends LitElement {
this.forecastItems = Math.round(card.offsetWidth / (fontSize * 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 @@ -143,7 +154,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 @@ -330,7 +341,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