Weatherpanel (#375)

* temporary save

* revert table to chart
add templow and condition support to the chart

* fix missing emoji

* fix linting

* commit, try to migrate table to div

* Change the table to div

* fix lint

src/cards/ha-weather-card.html

@@ -1,9 +1,7 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
-
 <link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
-
+<link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>
 <link rel='import' href='../components/ha-card.html'>
-<link rel='import' href='../components/ha-attributes.html'>
 <dom-module id='ha-weather-card'>
   <template>
     <style>
@@ -15,101 +13,57 @@
           color: var(--secondary-text-color);
           text-align: right;
         }
-        tr.temphigh span {
+        .condicon {
-          color: red;
-          font-weight: 600;
-        }
-        tr.templow span {
-          color: blue;
-        }
-        tr.date span {
-          color: darkgrey;
-          font-weight: 600;
-        }
-        .content td {
           text-align: center;
-          vertical-align: middle;
+          font-size: 4em;
-          overflow-x: hidden;
         }
-        tr.cond td {
+        .condtemp {
-          overflow-x: hidden;
-          overflow-y: visible;
           text-align: center;
-          vertical-align: middle;
+          font-size: 4em;
-          width:0%;
-          height: 2.4em;
         }
-        tr.cond td div {
+        div.cond {
-          font-size: 2em;
+          display: inline;
-          margin-left: -2em;
-          transform: translateX(1em);
         }
-        
+        div.conddetails {
-        .forecast td:first-child {
+          float: right;
-          background-color: #ddd;
+          display: block table;
+          overflow: auto;
+          text-align: right;
         }
-        .forecast td:nth-child(2n+3) {
+        span.line {
-          background-color: #eee;
+          display: block;
         }
-        table, tr, td {
+        .condsmall {
-          border: 0;
+          font-size: 1em;
-          padding: 0;
-          border-spacing: 0;
         }
-        .currentcond {
+        .clear {
-          text-align: center;
+          clear: both;
-          vertical-align: middle;
         }
-        td.pw_small span {
-          font-size: 2.4em;
-        }
-        td.pw_small{
-          width: 25%;
-          height: 2.6em;
-        }
-        td.pw_smallp span {
-          font-size: 1.2em;
-        }
-        td.pw_large span {
-          font-size: 6em;
-        }
-
     </style>
+    <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-        <table class="currentcond" width="100%">
+        <div class='condpanel'>
-          <tr>
+          <div class='cond condicon'>[[nowCond]]</div>
-            <td class="pw_small"><span>[[stateObj.attributes.temperature]]°</span></td>
+          <div class='cond condtemp'>[[attr.temperature]]°</div>
-            <td rowspan="2" class="pw_large"><span>[[nowCond]]</span></td>
+          <div class='cond conddetails'>
-            <td class="pw_small"><span>[[stateObj.attributes.humidity]]%</span></td>
+            <div class="condsmall" hidden$="[[!attr.wind_speed]]">
-          </tr>
+              Wind: 
-          <tr>
+              <span hidden$="[[!attr.wind_speed]]">
-            <td class="pw_smallp"><span>[[windBearing]]<br />[[stateObj.attributes.wind_speed]]</span></td>
+                [[attr.wind_speed]]
-            <td class="pw_smallp"><span>Visual<br />[[stateObj.attributes.visibility]]</span></td>
+              </span>
-          </tr>
+              <span hidden$="[[!windBearing]]">[[windBearing]]</span>
-        </table><br />
+            </div>
-        <table class="forecast" width="100%">
+            <div class="condsmall" hidden$="[[!attr.humidity]]">
-          <tr class="cond">
+              Humidity: [[attr.humidity]]%
-            <template is="dom-repeat" items="[[data.cond]]">
+            </div>
-              <td><div>[[item]]</div></td>
+            <div class="condsmall" hidden$="[[!attr.visibility]]">
-            </template>
+              Visibility: [[attr.visibility]]
-          </tr>
+            </div>
-          <tr class="temphigh">
+          </div>
-            <template is="dom-repeat" items="[[data.temphigh]]">
+          <div class='clear'></div>
-              <td><span>[[item]]</span></td>
+        </div>
-            </template>
+        <div id='chart_id' hidden$="[[!attr.forecast]]"></div>
-          </tr>
-          <tr class="templow">
-            <template is="dom-repeat" items="[[data.templow]]">
-              <td><span>[[item]]</span></td>
-            </template>
-          </tr>
-          <tr class="date">
-            <template is="dom-repeat" items="[[data.date]]">
-              <td><span>[[item]]</span></td>
-            </template>
-          </tr>
-        </table>
       </div>
     </ha-card>
   </template>
@@ -120,20 +74,20 @@
   'use strict';
 
   var _WEATHER_TO_ICON = {
-    cloudy: '\uD83C\uDF2B',
+    cloudy: '\u2601\ufe0f',
-    fog: '\uD83C\uDF2B',
+    fog: '\uD83C\uDF2B\ufe0f',
     hail: 'Hail',
-    lightning: '\uD83C\uDF29',
+    lightning: '\uD83C\uDF29\ufe0f',
-    'lightning-rainy': '\u26c8',
+    'lightning-rainy': '\u26c8\ufe0f',
-    partlycloudy: '\u26c5',
+    partlycloudy: '\u26c5\ufe0f',
-    pouring: '\uD83C\uDF22',
+    pouring: '\uD83D\uDCA7\ufe0f',
-    rainy: '\uD83C\uDF27',
+    rainy: '\uD83C\uDF27\ufe0f',
-    snowy: '\uD83C\uDF28',
+    snowy: '\uD83C\uDF28\ufe0f',
-    'snowy-rainy': 'SR',
+    'snowy-rainy': '\uD83C\uDF28\ufe0f',
-    sunny: '\u2600',
+    sunny: '\u2600\ufe0f',
-    windy: '\uD83C\uDF2C',
+    windy: '\uD83C\uDF2C\ufe0f',
-    'windy-variant': '[]',
+    'windy-variant': '\uD83C\uDF2C\ufe0f',
-    exceptional: '!!',
+    exceptional: '\u2b55\ufe0f',
   };
 
   var _DEGREE_TEXT = [
@@ -158,8 +112,8 @@
     computeTitle: function (stateObj) {
       return stateObj.attributes.friendly_name;
     },
-
     getDataArray: function () {
+      var dataArray = [];
       var data = this.stateObj.attributes.forecast;
       var i;
 
@@ -167,18 +121,17 @@
         return [];
       }
 
-      var dDate = [];
-      var dTempHigh = [];
-      var dTempLow = [];
-      var dCond = [];
       for (i = 0; i < data.length; i++) {
-        dDate.push(new Date(data[i].datetime).getDate());
+        var d = data[i];
-        dTempHigh.push(data[i].temperature);
+        if (!d.condition) {
-        dTempLow.push(data[i].templow);
+          dataArray.push([new Date(d.datetime), null, d.temperature, d.templow]);
-        dCond.push(_WEATHER_TO_ICON[data[i].condition]);
+        } else {
+          dataArray.push([new Date(d.datetime), _WEATHER_TO_ICON[data[i].condition],
+            d.temperature, d.templow]);
+        }
       }
 
-      return { date: dDate, cond: dCond, temphigh: dTempHigh, templow: dTempLow };
+      return dataArray;
     },
 
     checkRequirements: function () {
@@ -186,18 +139,83 @@
         return;
       }
 
-      if (!this.stateObj.attributes || !this.stateObj.attributes.forecast) {
+      if (!this.stateObj.attributes) {
         return;
       }
 
+      this.attr = this.stateObj.attributes;
+
       this.nowCond = _WEATHER_TO_ICON[this.stateObj.state];
-      this.windBearing = this.windBearingToText(this.stateObj.attributes.windBearing);
+      this.windBearing = this.windBearingToText(this.attr.wind_bearing);
+
+      if (!window.google) {
+        return;
+      }
+
+      if (!this.chartEngine) {
+        this.chartEngine = new window.google.visualization.LineChart(
+          this.$.chart_id);
+      }
+
+      if (!this.attr.forecast) {
+        return;
+      }
 
       this.data = this.getDataArray();
+
+      this.drawChart();
+    },
+    drawChart: function () {
+      var dataGrid = new window.google.visualization.DataTable();
+      var options = {
+        legend: {
+          position: 'top'
+        },
+        interpolateNulls: true,
+        titlePosition: 'none',
+        chartArea: {
+          left: 25,
+          top: 5,
+          height: '100%',
+          width: '90%',
+          bottom: 25,
+        },
+        curveType: 'function',
+        focusTarget: 'category',
+        colors: ['red', 'blue'],
+        annotations: {
+          textStyle: {
+            fontSize: '24',
+          }
+        }
+      };
+
+      dataGrid.addColumn('datetime', 'Time');
+      dataGrid.addColumn({ type: 'string', role: 'annotation' });
+      dataGrid.addColumn('number', 'Temperature');
+      dataGrid.addColumn('number', 'Temperature Low');
+
+      var dataArray = this.getDataArray();
+      dataGrid.addRows(dataArray);
+
+      this.chartEngine.draw(dataGrid, options);
+    },
+
+    googleApiLoaded: function () {
+      window.google.load('visualization', '1', {
+        packages: ['corechart'],
+        callback: function () {
+          this.checkRequirements();
+        }.bind(this),
+      });
     },
 
     windBearingToText: function (degree) {
-      return _DEGREE_TEXT[((parseInt(degree) + 5.63) / 11.25) | 0];
+      var degreenum = parseInt(degree);
+      if (isFinite(degreenum)) {
+        return _DEGREE_TEXT[(((degreenum + 11.25) / 22.5) | 0) % 16];
+      }
+      return '';
     }
   });
 }());