new graph option

Author: bobzer

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.5.0
+- Added graph possibility
+- added number of forecast values
+
 ## 1.2.0
 
 - Added UI editor

README.md

@@ -1,10 +1,11 @@
 # Lovelace animated weather card
 
 Originally created for the [old UI](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008) converted by @arsaboo and @ciotlosm to [Lovelace](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008/291) and now converted to Lit to make it even better.
+Was merge with [lovelace weather card chart](https://github.com/sgttrs/lovelace-weather-card-chart) to get graph and translation
 
 This card uses the awesome [animated SVG weather icons by amCharts](https://www.amcharts.com/free-animated-svg-weather-icons/).
 
-![Weather Card](https://github.com/bramkragten/custom-ui/blob/master/weather-card/weather-card.gif?raw=true)
+![Weather Card](https://raw.githubusercontent.com/bobzer/weather-card/master/weather-card.png)
 
 Thanks for all picking this card up.
 
@@ -23,15 +24,15 @@ Or use the version without the editor: [Version without editor](https://raw.gith
 Add the following to resources in your lovelace config:
 
 ```yaml
-- url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
+- url: https://cdn.jsdelivr.net/gh/bobzer/weather-card/dist/weather-card.min.js
   type: module
 ```
 
 # Manual:
 
-1. Download the [weather-card.js](https://raw.githubusercontent.com/bramkragten/weather-card/v1.2.0/dist/weather-card.js) to `/config/www/custom-lovelace/weather-card/`. (or an other folder in `/config/www/`)
+1. Download the [weather-card.js](https://raw.githubusercontent.com/bobzer/weather-card/v1.2.0/dist/weather-card.js) to `/config/www/custom-lovelace/weather-card/`. (or an other folder in `/config/www/`)
 2. Save, the [amCharts icons](https://www.amcharts.com/free-animated-svg-weather-icons/) (The contents of the folder "animated") under `/config/www/custom-lovelace/weather-card/icons/` (or an other folder in `/config/www/`)
-3. If you use Lovelace in storage mode, and want to use the editor, download the [weather-card-editor.js](https://raw.githubusercontent.com/bramkragten/weather-card/v1.2.0/dist/weather-card-editor.js) to `/config/www/custom-lovelace/weather-card/`. (or the folder you used above)
+3. If you use Lovelace in storage mode, and want to use the editor, download the [weather-card-editor.js](https://raw.githubusercontent.com/bobzer/weather-card/v1.2.0/dist/weather-card-editor.js) to `/config/www/custom-lovelace/weather-card/`. (or the folder you used above)
 
 Add the following to resources in your lovelace config:
 

dist/weather-card-editor.js

@@ -55,6 +55,18 @@ export class WeatherCardEditor extends LitElement {
     return this._config.forecast !== false;
   }
 
+  get _graph() {
+    return this._config.graph !== false;
+  }
+
+  get _forecast_max_Column() {
+    return this._config.forecast_max_Column || 9;
+  }
+
+  get _hide_precipitation() {
+    return this._config.hide_precipitation === true;
+  }
+  
   render() {
     if (!this.hass) {
       return html``;
@@ -120,12 +132,33 @@ export class WeatherCardEditor extends LitElement {
             @change="${this._valueChanged}"
             >Show details</ha-switch
           >
+          <ha-switch
+            .checked=${this._hide_precipitation}
+            .configValue="${"hide_precipitation"}"
+            @change="${this._valueChanged}"
+            >Hide precipitation</ha-switch
+          >
           <ha-switch
             .checked=${this._forecast}
             .configValue="${"forecast"}"
             @change="${this._valueChanged}"
             >Show forecast</ha-switch
           >
+          <ha-switch
+            .checked=${this._graph}
+            .configValue="${"graph"}"
+            @change="${this._valueChanged}"
+            >Show graph</ha-switch
+          >
+          <paper-input
+            label="forecast max columns (optional)"
+            type="number"
+            .value="${this._forecast_max_Column}"
+            .configValue="${"forecast_max_Column"}"
+            @value-changed="${this._valueChanged}"
+            min="2"
+            max="20"
+          ></paper-input>
         </div>
       </div>
     `;