Update elements based on feedback and to use published property reflection.

Author: philipwalton

demo.css

@@ -77,7 +77,7 @@ google-analytics-chart {
   position: relative;
   transition: opacity .2s ease;
 }
-google-analytics-chart[unrendered] {
+google-analytics-chart:not([rendered]) {
   display: none;
 }
 

google-analytics-base.html

@@ -23,9 +23,6 @@
 
     (function() {
 
-      var isLoaded = false;
-      var isAuthorized = false;
-
       /**
        * A promise that is resolved when the underlying client libraries are
        * loaded. It is rejected if there are any load errors.
@@ -34,7 +31,6 @@
         document.addEventListener('google-api-load', function fn(event) {
           var lib = event.detail;
           if (lib.name == 'analytics' && lib.version == 'v3') {
-            isLoaded = true;
             resolve(event.detail);
             document.removeEventListener('google-api-load', fn);
           }
@@ -56,60 +52,50 @@
 
       Polymer('google-analytics-base', {
 
-        /**
-         * The `isLoaded` attribute is true when the underlying analytics
-         * library is fully loaded.
-         *
-         * @attribute isLoaded
-         * @type boolean
-         */
-        get isLoaded() {
-          return isLoaded;
-        },
-
-        /**
-         * The `isAuthorized` attribute is true once the user successfully
-         * signs in <em>and</em> the libraries have been loaded. If the user
-         * signs out this will be false.
-         *
-         * @attribute isAuthorized
-         * @type boolean
-         */
-        get isAuthorized() {
-          return isAuthorized;
+        publish: {
+          /**
+           * The `authorized` attribute is true when the user has signed-in and
+           * the underlying analytics library is fully loaded.
+           *
+           * @attribute authorized
+           * @type boolean
+           */
+          authorized: {
+            value: false,
+            reflect: true
+          }
         },
 
         created: function() {
           document.addEventListener('google-signin-success', function(event) {
-            isAuthorized = true;
-            loadPromise.then(this.authorized.bind(this, event.detail.result));
+            loadPromise
+                .then(this.userAuthorized.bind(this,event.detail.result));
           }.bind(this));
           document.addEventListener('google-signed-out', function(event) {
-            isAuthorized = false;
-            this.unauthorized();
+            this.userUnauthorized();
           }.bind(this));
         },
 
         /**
-         * The `authorized` method will be invoked when the user has
+         * The `userAuthorized` method will be invoked when the user has
          * successfully signed in and all the underlying client libraries
          * have been loaded.
          *
-         * @method authorized
+         * @method userAuthorized
          * @param {Object} data - The auth data information.
          */
-        authorized: function(data) {
-          // Override in a subclass.
+        userAuthorized: function(data) {
+          this.authorized = true;
         },
 
         /**
-         * The `unauthorized` method will be invoked when the user has
+         * The `userUnauthorized` method will be invoked when the user has
          * successfully signed out.
          *
-         * @method unauthorized
+         * @method userUnauthorized
          */
-        unauthorized: function() {
-          // Override in a subclass.
+        userUnauthorized: function() {
+          this.authorized = false;
         }
 
       });

google-analytics-chart.html

@@ -89,6 +89,7 @@
          * for the options available to each chart type.
          *
          * @attribute options
+         * @default null
          * @type object
          */
         options: null,
@@ -97,19 +98,43 @@
 
         data: null,
 
+        publish: {
+          /**
+           * True after the chart has been rendered for the first time.
+           *
+           * @attribute rendered
+           * @type boolean
+           */
+          rendered: {
+            value: false,
+            reflect: true
+          },
+          /**
+           * True if the chart is currently loading data.
+           *
+           * @attribute loading
+           * @type boolean
+           */
+          loading: {
+            value: false,
+            reflect: true
+          }
+        },
+
         ready: function() {
-          this.setAttribute('unrendered', '');
           merge(this.$.chart.options, getChartOptions(this.type), this.options);
         },
 
-        authorized: function() {
+        userAuthorized: function() {
+          this.super();
+
           // Get metadata as soon as possible so we don't have to wait later.
           metadata.get();
         },
 
         getData: function() {
           if (this.super()) {
-            this.setAttribute('pending', '');
+            this.loading = true;
           }
         },
 
@@ -118,8 +143,8 @@
             this.fire('analytics-query-error', response.error);
           }
           else {
-            this.removeAttribute('unrendered');
-            this.removeAttribute('pending');
+            this.loading = false;
+            this.rendered = true;
 
             metadata.get().then(function(map) {
               switchApiNamesToDisplayNames(response.dataTable, map);
@@ -286,7 +311,7 @@
        * @return {Object} The merged target object.
        */
       function merge(target) {
-        var sources = [].slice.call(arguments, 1);
+        var sources = Array.prototype.slice.call(arguments, 1);
         sources.forEach(function(source) {
           // Only merge objects.
           if (!(source && typeof sources == 'object')) return;

google-analytics-dashboard.html

@@ -44,31 +44,20 @@
 
     Polymer('google-analytics-dashboard', {
 
-      /**
-       * The `query` attribute represents the internal query object of this
-       * dashboard. It is updated when control elements fire the
-       * `analytics-dashboard-control-change` event and pass along query data.
-       *
-       * @attribute query
-       * @type object
-       */
-      query: {},
-
       ready: function() {
-        this.unauthorized(); // Assume unauthorized state at first.
-      },
+        /**
+         * The `query` attribute represents the internal query object of this
+         * dashboard. It is updated when control elements fire the
+         * `analytics-dashboard-control-change` event and pass along query data.
+         *
+         * @attribute query
+         * @type object
+         */
+        this.query = {};
 
-      authorized: function() {
-        this.removeAttribute('unauthorized');
-        this.setAttribute('authorized', '');
         this.updateChildren();
       },
 
-      unauthorized: function() {
-        this.removeAttribute('authorized');
-        this.setAttribute('unauthorized', '');
-      },
-
       /**
        * The `queryUpdated` method is the callback for whenever the
        * `analytics-dashboard-control-change` event is fired. It updates the
@@ -83,7 +72,7 @@
           this.query[key] = event.detail[key];
         }.bind(this))
 
-        if (this.isAuthorized) this.updateChildren();
+        this.updateChildren();
       },
 
       /**

google-analytics-query.html

@@ -64,7 +64,6 @@
          * @attribute data
          * @type object
          */
-        data: null,
 
         /**
          * The `ids` attribute is the unique table ID of the form ga:XXXX,
@@ -78,7 +77,6 @@
          * @attribute ids
          * @type string
          */
-        ids: null,
 
         /**
          * The `startDate` attribute is the start date for fetching Analytics
@@ -117,7 +115,6 @@
          * @attribute metrics
          * @type string
          */
-        metrics: null,
 
         /**
          * The `dimensions` attribute is a list of comma-separated dimensions
@@ -128,7 +125,6 @@
          * @attribute dimensions
          * @type string
          */
-        dimensions: null,
 
         /**
          * The `sort` attribute is a list of comma-separated dimensions
@@ -140,7 +136,6 @@
          * @attribute sort
          * @type string
          */
-        sort: null,
 
         /**
          * The `filters` attribute is dimension or metric filters that restrict
@@ -151,7 +146,6 @@
          * @attribute filters
          * @type string
          */
-        filters: null,
 
         /**
          * The `segment` attribute segments the data returned for your
@@ -162,7 +156,6 @@
          * @attribute segment
          * @type string
          */
-        segment: null,
 
         /**
          * The `samplingLevel` attribute sets the desired sampling level.
@@ -173,7 +166,6 @@
          * @attribute samplingLevel
          * @type string
          */
-        samplingLevel: null,
 
         /**
          * The `startIndex` attribute sets the first row of data to retrieve,
@@ -185,7 +177,6 @@
          * @attribute startIndex
          * @type integer
          */
-        startIndex: null,
 
         /**
          * The `maxResults` attribute is the maximum number of rows to include
@@ -196,7 +187,6 @@
          * @attribute maxResults
          * @type integer
          */
-        maxResults: null,
 
         /**
          * The `output` attribute sets the desired output type for the
@@ -208,7 +198,6 @@
          * @attribute output
          * @type string
          */
-        output: null,
 
         /**
          * The `fields` attribute is a selector specifying a subset of
@@ -219,7 +208,6 @@
          * @attribute fields
          * @type string
          */
-        fields: null,
 
         observe: {
           ids: 'getData',
@@ -237,15 +225,13 @@
           fields: 'getData'
         },
 
-        get isValid() {
-          return !!(this.ids && this.metrics && this.startDate && this.endDate);
-        },
-
-        authorized: function() {
+        userAuthorized: function() {
+          this.super();
           this.getData();
         },
 
-        unauthorized: function() {
+        userUnauthorized: function() {
+          this.super();
           this.data = null;
         },
 
@@ -255,8 +241,7 @@
          * @method getData
          */
         getData: function() {
-
-          if (this.isAuthorized && this.isValid) {
+          if (this.authorized && this.hasRequiredParams) {
 
             // Required paramters.
             var query = {
@@ -298,7 +283,11 @@
             this.data = response;
             this.fire('analytics-query-success', response);
           }
-        }
+        },
+
+        get hasRequiredParams() {
+          return !!(this.ids && this.metrics && this.startDate && this.endDate);
+        },
 
       });