From 7d0f840a01bf16f23e6ae898a44120d067f4d9e0 Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Sat, 5 Aug 2017 11:03:47 +0800
Subject: [PATCH 1/7] temporary save

---
 src/cards/ha-weather-card.html | 44 ++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 4920bddf2d87..a427a7e171e4 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -3,7 +3,7 @@
 <link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
 
 <link rel='import' href='../components/ha-card.html'>
-<link rel='import' href='../components/ha-attributes.html'>
+<script src
 <dom-module id='ha-weather-card'>
   <template>
     <style>
@@ -70,8 +70,10 @@
         td.pw_smallp span {
           font-size: 1.2em;
         }
-        td.pw_large span {
-          font-size: 6em;
+        td.pw_large {
+          vertical-align: middle;
+          font-size: 5em;
+          overflow: visible;
         }
 
     </style>
@@ -89,7 +91,7 @@
           </tr>
         </table><br />
         <table class="forecast" width="100%">
-          <tr class="cond">
+          <tr class="cond" hidden$="[[!data.cond]]">
             <template is="dom-repeat" items="[[data.cond]]">
               <td><div>[[item]]</div></td>
             </template>
@@ -99,7 +101,7 @@
               <td><span>[[item]]</span></td>
             </template>
           </tr>
-          <tr class="templow">
+          <tr class="templow" hidden$="[[!data.templow]]">
             <template is="dom-repeat" items="[[data.templow]]">
               <td><span>[[item]]</span></td>
             </template>
@@ -120,20 +122,20 @@
   'use strict';
 
   var _WEATHER_TO_ICON = {
-    cloudy: '\uD83C\uDF2B',
-    fog: '\uD83C\uDF2B',
+    cloudy: '\u2601\ufe0f',
+    fog: '\uD83C\uDF2B\ufe0f',
     hail: 'Hail',
-    lightning: '\uD83C\uDF29',
-    'lightning-rainy': '\u26c8',
-    partlycloudy: '\u26c5',
-    pouring: '\uD83C\uDF22',
-    rainy: '\uD83C\uDF27',
-    snowy: '\uD83C\uDF28',
+    lightning: '\uD83C\uDF29\ufe0f',
+    'lightning-rainy': '\u26c8\ufe0f',
+    partlycloudy: '\u26c5\ufe0f',
+    pouring: '\uD83D\uDCA7\ufe0f',
+    rainy: '\uD83C\uDF27\ufe0f',
+    snowy: '\uD83C\uDF28\ufe0f',
     'snowy-rainy': 'SR',
-    sunny: '\u2600',
-    windy: '\uD83C\uDF2C',
+    sunny: '\u2600\ufe0f',
+    windy: '\uD83C\uDF2C\ufe0f',
     'windy-variant': '[]',
-    exceptional: '!!',
+    exceptional: '\u2b55\ufe0f',
   };
 
   var _DEGREE_TEXT = [
@@ -173,10 +175,16 @@
       var dCond = [];
       for (i = 0; i < data.length; i++) {
         dDate.push(new Date(data[i].datetime).getDate());
-        dTempHigh.push(data[i].temperature);
-        dTempLow.push(data[i].templow);
+        dTempHigh.push(Math.round(data[i].temperature));
+        dTempLow.push(Math.round(data[i].templow));
         dCond.push(_WEATHER_TO_ICON[data[i].condition]);
       }
+      if(!data[0].templow) {
+        dTempLow = undefined;
+      }
+      if(!data[0].condition) {
+        dCond = undefined;
+      }
 
       return { date: dDate, cond: dCond, temphigh: dTempHigh, templow: dTempLow };
     },

From 9d899ac38717c61c39fbc8f11edc06f0be8b07d2 Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Sat, 5 Aug 2017 12:20:57 +0800
Subject: [PATCH 2/7] revert table to chart add templow and condition support
 to the chart

---
 src/cards/ha-weather-card.html | 117 +++++++++++++++++++++------------
 1 file changed, 74 insertions(+), 43 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index a427a7e171e4..507e5aeb2b83 100644
--- a/src/cards/ha-weather-card.html
+++ b/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'>
-<script src
 <dom-module id='ha-weather-card'>
   <template>
     <style>
@@ -77,6 +75,7 @@
         }
 
     </style>
+    <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
         <table class="currentcond" width="100%">
@@ -86,32 +85,16 @@
             <td class="pw_small"><span>[[stateObj.attributes.humidity]]%</span></td>
           </tr>
           <tr>
-            <td class="pw_smallp"><span>[[windBearing]]<br />[[stateObj.attributes.wind_speed]]</span></td>
-            <td class="pw_smallp"><span>Visual<br />[[stateObj.attributes.visibility]]</span></td>
+            <td class="pw_smallp">
+              <span>[[windBearing]]<br />[[stateObj.attributes.wind_speed]]</span>
+            </td>
+            <td class="pw_smallp">
+              <span hidden$="[[!stateObj.attributes.visibility]]">
+                Visibility<br />[[stateObj.attributes.visibility]]
+              </span></td>
           </tr>
         </table><br />
-        <table class="forecast" width="100%">
-          <tr class="cond" hidden$="[[!data.cond]]">
-            <template is="dom-repeat" items="[[data.cond]]">
-              <td><div>[[item]]</div></td>
-            </template>
-          </tr>
-          <tr class="temphigh">
-            <template is="dom-repeat" items="[[data.temphigh]]">
-              <td><span>[[item]]</span></td>
-            </template>
-          </tr>
-          <tr class="templow" hidden$="[[!data.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 id='chart_id' hidden$="[[!stateObj.attributes.forecast]]"></div>
       </div>
     </ha-card>
   </template>
@@ -160,8 +143,8 @@
     computeTitle: function (stateObj) {
       return stateObj.attributes.friendly_name;
     },
-
     getDataArray: function () {
+      var dataArray = [];
       var data = this.stateObj.attributes.forecast;
       var i;
 
@@ -169,24 +152,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());
-        dTempHigh.push(Math.round(data[i].temperature));
-        dTempLow.push(Math.round(data[i].templow));
-        dCond.push(_WEATHER_TO_ICON[data[i].condition]);
-      }
-      if(!data[0].templow) {
-        dTempLow = undefined;
-      }
-      if(!data[0].condition) {
-        dCond = undefined;
+        var d = data[i];
+        if(!d.condition) {
+          dataArray.push([new Date(d.datetime), null, d.temperature, d.templow]);
+        } 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 () {
@@ -194,6 +170,15 @@
         return;
       }
 
+      if (!window.google) {
+        return;
+      }
+
+      if (!this.chartEngine) {
+        this.chartEngine = new window.google.visualization.LineChart(
+          this.$.chart_id);
+      }
+
       if (!this.stateObj.attributes || !this.stateObj.attributes.forecast) {
         return;
       }
@@ -202,6 +187,52 @@
       this.windBearing = this.windBearingToText(this.stateObj.attributes.windBearing);
 
       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) {

From b8e5ca0c0adfe143a0c34ef84e1c69b936ca7c0c Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Sat, 5 Aug 2017 12:26:50 +0800
Subject: [PATCH 3/7] fix missing emoji

---
 src/cards/ha-weather-card.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 507e5aeb2b83..856369b307c2 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -114,10 +114,10 @@
     pouring: '\uD83D\uDCA7\ufe0f',
     rainy: '\uD83C\uDF27\ufe0f',
     snowy: '\uD83C\uDF28\ufe0f',
-    'snowy-rainy': 'SR',
+    'snowy-rainy': '\uD83C\uDF28\ufe0f',
     sunny: '\u2600\ufe0f',
     windy: '\uD83C\uDF2C\ufe0f',
-    'windy-variant': '[]',
+    'windy-variant': '\uD83C\uDF2C\ufe0f',
     exceptional: '\u2b55\ufe0f',
   };
 

From 194d90c219c030da7a2536c2b82d7e1ded09688e Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Sat, 5 Aug 2017 14:10:57 +0800
Subject: [PATCH 4/7] fix linting

---
 src/cards/ha-weather-card.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 856369b307c2..846c46c6cdc6 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -154,7 +154,7 @@
 
       for (i = 0; i < data.length; i++) {
         var d = data[i];
-        if(!d.condition) {
+        if (!d.condition) {
           dataArray.push([new Date(d.datetime), null, d.temperature, d.templow]);
         } else {
           dataArray.push([new Date(d.datetime), _WEATHER_TO_ICON[data[i].condition],
@@ -207,7 +207,7 @@
         },
         curveType: 'function',
         focusTarget: 'category',
-        colors: ["red", "blue"],
+        colors: ['red', 'blue'],
         annotations: {
           textStyle: {
             fontSize: '24',
@@ -216,7 +216,7 @@
       };
 
       dataGrid.addColumn('datetime', 'Time');
-      dataGrid.addColumn({type: 'string', role: 'annotation'});
+      dataGrid.addColumn({ type: 'string', role: 'annotation' });
       dataGrid.addColumn('number', 'Temperature');
       dataGrid.addColumn('number', 'Temperature Low');
 

From 508d7bb7739b4c094840086f1e2f418dae297012 Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Mon, 7 Aug 2017 11:30:32 +0800
Subject: [PATCH 5/7] commit, try to migrate table to div

---
 src/cards/ha-weather-card.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 846c46c6cdc6..659493426300 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -73,6 +73,9 @@
           font-size: 5em;
           overflow: visible;
         }
+        span.line {
+          display: block;
+        }
 
     </style>
     <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
@@ -86,7 +89,8 @@
           </tr>
           <tr>
             <td class="pw_smallp">
-              <span>[[windBearing]]<br />[[stateObj.attributes.wind_speed]]</span>
+              <span class="line" hidden$="[[!stateObj.attributes.wind_bearing]]">[[windBearing]]</span>
+              <span class="line" hidden$="[[!stateObj.attributes.wind_speed]]">[[stateObj.attributes.wind_speed]]</span>
             </td>
             <td class="pw_smallp">
               <span hidden$="[[!stateObj.attributes.visibility]]">
@@ -184,7 +188,7 @@
       }
 
       this.nowCond = _WEATHER_TO_ICON[this.stateObj.state];
-      this.windBearing = this.windBearingToText(this.stateObj.attributes.windBearing);
+      this.windBearing = this.windBearingToText(this.stateObj.attributes.wind_bearing);
 
       this.data = this.getDataArray();
 
@@ -236,7 +240,12 @@
     },
 
     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];
+      } else {
+        return '';
+      }
     }
   });
 }());

From 9bb3024501ddfd70051f6cf65e8816472df7381b Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Mon, 7 Aug 2017 16:24:39 +0800
Subject: [PATCH 6/7] Change the table to div

---
 src/cards/ha-weather-card.html | 125 +++++++++++++--------------------
 1 file changed, 48 insertions(+), 77 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 659493426300..d50315e306e3 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -13,92 +13,57 @@
           color: var(--secondary-text-color);
           text-align: right;
         }
-        tr.temphigh span {
-          color: red;
-          font-weight: 600;
-        }
-        tr.templow span {
-          color: blue;
-        }
-        tr.date span {
-          color: darkgrey;
-          font-weight: 600;
-        }
-        .content td {
+        .condicon {
           text-align: center;
-          vertical-align: middle;
-          overflow-x: hidden;
-        }
-        tr.cond td {
-          overflow-x: hidden;
-          overflow-y: visible;
-          text-align: center;
-          vertical-align: middle;
-          width:0%;
-          height: 2.4em;
-        }
-        tr.cond td div {
-          font-size: 2em;
-          margin-left: -2em;
-          transform: translateX(1em);
+          font-size: 4em;
         }
-        
-        .forecast td:first-child {
-          background-color: #ddd;
-        }
-        .forecast td:nth-child(2n+3) {
-          background-color: #eee;
-        }
-        table, tr, td {
-          border: 0;
-          padding: 0;
-          border-spacing: 0;
-        }
-        .currentcond {
+        .condtemp {
           text-align: center;
-          vertical-align: middle;
+          font-size: 4em;
         }
-        td.pw_small span {
-          font-size: 2.4em;
+        div.cond {
+          display: inline;
         }
-        td.pw_small{
-          width: 25%;
-          height: 2.6em;
-        }
-        td.pw_smallp span {
-          font-size: 1.2em;
-        }
-        td.pw_large {
-          vertical-align: middle;
-          font-size: 5em;
-          overflow: visible;
+        div.conddetails {
+          float: right;
+          display: block table;
+          overflow: auto;
+          text-align: right;
         }
         span.line {
           display: block;
         }
-
+        .condsmall {
+          font-size: 1em;
+        }
+        .clear {
+          clear: both;
+        }
     </style>
     <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-        <table class="currentcond" width="100%">
-          <tr>
-            <td class="pw_small"><span>[[stateObj.attributes.temperature]]°</span></td>
-            <td rowspan="2" class="pw_large"><span>[[nowCond]]</span></td>
-            <td class="pw_small"><span>[[stateObj.attributes.humidity]]%</span></td>
-          </tr>
-          <tr>
-            <td class="pw_smallp">
-              <span class="line" hidden$="[[!stateObj.attributes.wind_bearing]]">[[windBearing]]</span>
-              <span class="line" hidden$="[[!stateObj.attributes.wind_speed]]">[[stateObj.attributes.wind_speed]]</span>
-            </td>
-            <td class="pw_smallp">
-              <span hidden$="[[!stateObj.attributes.visibility]]">
-                Visibility<br />[[stateObj.attributes.visibility]]
-              </span></td>
-          </tr>
-        </table><br />
-        <div id='chart_id' hidden$="[[!stateObj.attributes.forecast]]"></div>
+        <div class='condpanel'>
+          <div class='cond condicon'>[[nowCond]]</div>
+          <div class='cond condtemp'>[[attr.temperature]]°</div>
+          <div class='cond conddetails'>
+            <div class="condsmall" hidden$="[[!attr.wind_speed]]">
+              Wind: 
+              <span hidden$="[[!attr.wind_speed]]">
+                [[attr.wind_speed]]
+              </span>
+              <span hidden$="[[!windBearing]]">[[windBearing]]</span>
+            </div>
+            <div class="condsmall" hidden$="[[!attr.humidity]]">
+              Humidity: [[attr.humidity]]%
+            </div>
+            <div class="condsmall" hidden$="[[!attr.visibility]]">
+              Visibility: [[attr.visibility]]
+            </div>
+          </div>
+          <div class='clear'></div>
+        </div>
+        <div id='chart_id' hidden$="[[!attr.forecast]]"></div>
       </div>
     </ha-card>
   </template>
@@ -174,6 +139,15 @@
         return;
       }
 
+      if (!this.stateObj.attributes) {
+        return;
+      }
+
+      this.attr = this.stateObj.attributes;
+
+      this.nowCond = _WEATHER_TO_ICON[this.stateObj.state];
+      this.windBearing = this.windBearingToText(this.attr.wind_bearing);
+
       if (!window.google) {
         return;
       }
@@ -183,13 +157,10 @@
           this.$.chart_id);
       }
 
-      if (!this.stateObj.attributes || !this.stateObj.attributes.forecast) {
+      if (!this.attr.forecast) {
         return;
       }
 
-      this.nowCond = _WEATHER_TO_ICON[this.stateObj.state];
-      this.windBearing = this.windBearingToText(this.stateObj.attributes.wind_bearing);
-
       this.data = this.getDataArray();
 
       this.drawChart();

From 6460025bcb89b0d50bc8699ad9ec1a772b8e85c4 Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Mon, 7 Aug 2017 16:57:54 +0800
Subject: [PATCH 7/7] fix lint

---
 src/cards/ha-weather-card.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index d50315e306e3..a35132ef9d72 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -214,9 +214,8 @@
       var degreenum = parseInt(degree);
       if (isFinite(degreenum)) {
         return _DEGREE_TEXT[(((degreenum + 11.25) / 22.5) | 0) % 16];
-      } else {
-        return '';
       }
+      return '';
     }
   });
 }());