Add polymer 1.0 to npm_modules

polymer_1.0.4/bower_components/google-analytics/google-analytics-view-selector.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="account-summaries-import.html">
+<link rel="import" href="google-analytics-loader.html">
+
+<!--
+Element for selecting the view ID (ids) value for queries inside a
+`<google-analytics-dashboard>` element.
+
+##### Example
+
+    <google-analytics-dashboard>
+
+      <google-analytics-view-selector></google-analytics-view-selector>
+
+      <google-analytics-chart
+        metrics="ga:sessions"
+        dimensions="ga:date">
+      </google-analytics-chart>
+
+    </google-analytics-dashboard>
+
+@element google-analytics-view-selector
+@extends google-analytics-base
+@blurb Element for selecting the ids value for Google Analytics queries
+@status alpha
+@homepage https://googlewebcomponents.github.io/google-analytics
+-->
+
+<dom-module id="google-analytics-view-selector">
+  <style>
+    select {
+      color: inherit;
+      font: inherit;
+      margin: 0;
+    }
+  </style>
+  <template>
+    <google-analytics-loader all-ready="{{setupReady}}"></google-analytics-loader>
+    <span class="control">
+      <label for="account">Account</label>
+      <select id="account"
+        on-change="updateAccount"
+        value="{{account.id}}">
+        <template is="dom-repeat" items="{{accounts}}">
+          <option value="{{item.id}}">{{item.name}}</option>
+        </template>
+      </select>
+    </span>
+    <span class="control">
+      <label>Property</label>
+      <select id="property"
+        on-change="updateProperty"
+        value="{{property.id}}">
+        <template is="dom-repeat" items="{{account.properties}}">
+          <option value="{{item.id}}">{{item.name}}</option>
+        </template>
+      </select>
+    </span>
+    <span class="control">
+      <label>View</label>
+      <select id="view"
+        on-change="updateView"
+        value="{{view.id}}">
+        <template is="dom-repeat"  items="{{property.views}}">
+          <option value="{{item.id}}">{{item.name}}</option>
+        </template>
+      </select>
+    </span>
+  </template>
+</dom-module>
+<script>
+
+  (function() {
+    'use strict';
+
+    Polymer({
+
+      is: 'google-analytics-view-selector',
+
+      /**
+       * Fired when the users changes the view
+       *
+       * @param {Object} query The updated query params.
+       * @event analytics-dashboard-control-change
+       */
+
+      properties: {
+
+        /**
+         * The `ids` attribute, when found is used to preselect the chosen
+         * account, property, and view.
+         *
+         * See the <a href="https://developers.google.com/analytics/devguides/reporting/core/v3/reference#ids">Core Reporting API parameter reference</a> for more details.
+         *
+         * @property ids
+         * @type string
+         */
+        ids: {
+          type: String,
+          observer: 'idsChanged',
+          notify: true
+        },
+
+        /**
+         * The `summaries` attribute contains an account summaries utility object
+         * with various helper methods for quickly getting account data.
+         *
+         * See the <a href="https://github.com/googleanalytics/javascript-api-utils">Github repo</a> for more details.
+         *
+         * @property summaries
+         * @type Object
+         */
+        summaries: {
+          type: Object,
+          value: null
+        },
+
+        /**
+         * The `account` attribute is the currently selected account.
+         *
+         * @property account
+         * @type Object
+         */
+        account: {
+          type: Object,
+          observer: 'accountChanged'
+        },
+
+        /**
+         * The `property` attribute is the currently selected property.
+         *
+         * @property property
+         * @type Object
+         */
+        property: {
+          type: Object,
+          observer: 'propertyChanged'
+        },
+
+        /**
+         * The `view` attribute is the currently selected view.
+         *
+         * @property view
+         * @type Object
+         */
+        view: {
+          type: Object,
+          observer: 'viewChanged'
+        },
+
+         /**
+         * True if setup is ready
+         *
+         * @attribute setupReady
+         * @type Boolean
+         */
+        setupReady: {
+          type: Boolean,
+          observer: 'setupReadyChanged'
+        }
+
+      },
+
+      setupReadyChanged: function(newVal, oldVal) {
+        if (newVal) {
+          gaApiUtils.accountSummaries.get().then(function(accountSummaries) {
+            this.summaries = accountSummaries;
+            this.accounts = accountSummaries.all();
+
+            if (this.ids) {
+              // Manually call `idsChanged` here. The first change event will
+              // likely happen prior to fetching the accountSummaries data.
+              this.idsChanged(null, this.ids);
+            } else {
+              // When there's no `ids` set, just select the first account,
+              // which will trigger change events and set the property and view.
+              this.account = this.accounts[0];
+            }
+          }.bind(this));
+        }
+        else {
+          this.summaries = null;
+          this.accounts = null;
+          this.account = null;
+          this.property = null;
+          this.view = null;
+          this.ids = null;
+        }
+      },
+
+      /**
+       * The `updateAccount` method is bound to the change event on the
+       * account `<select>`. It updates the property and view `<select>`s based
+       * on the new account data. It also updates the `ids` attribute.
+       */
+      updateAccount: function() {
+        this.account = this.summaries.getAccount(this.$.account.value);
+      },
+
+      /**
+       * The `updateProperty` method is bound to the change event on the
+       * property `<select>`. It updates the view `<select>` based
+       * on the new property data. It also updates the `ids` attribute.
+       */
+      updateProperty: function() {
+        this.property = this.summaries.getProperty(this.$.property.value);
+      },
+
+      /**
+       * The `updateView` method is bound to the change event on the
+       * view `<select>`. It updates the `ids` attribute.
+       */
+      updateView: function() {
+        this.view = this.summaries.getView(this.$.view.value);
+      },
+
+      accountChanged: function(newAccount, oldAccount) {
+        if (newAccount) {
+          this.property = newAccount.properties[0];
+        }
+      },
+
+      propertyChanged: function(newProperty, oldProperty) {
+        if (newProperty) {
+          this.view = newProperty.views[0];
+          // this.view = Path.get('views[0]').getValueFrom(newProperty);
+        }
+      },
+
+      viewChanged: function(newView, oldView) {
+        this.ids = newView && 'ga:' + newView.id;
+      },
+
+      idsChanged: function(newIds, oldIds) {
+        // When `ids` is set or updated prior to fetching the account
+        // summaries, do nothing.
+        if (!this.summaries) return;
+
+        var viewId = newIds && newIds.slice(3);
+        var account = this.summaries.getAccountByViewId(viewId);
+        var property = this.summaries.getPropertyByViewId(viewId);
+        var view = this.summaries.getView(viewId);
+
+        // Make sure the account data is valid before firing any events.
+        if (account && property && view) {
+          this.account = account;
+          this.property = property;
+          this.view = view;
+
+          this.fireChangeEvent();
+        }
+        // If the account data isn't valid, and there's no previous value
+        // to fall back to, default to the first account.
+        else if (!oldIds) {
+          this.account = this.summaries.all()[0];
+        }
+      },
+
+      /**
+       * Fire a change event passing all the currently stored data.
+       */
+      fireChangeEvent: function() {
+        this.fire('analytics-dashboard-control-change', {
+          ids: this.ids,
+          account: this.account,
+          property: this.property,
+          view: this.view
+        });
+      }
+
+    });
+
+  })();
+
+</script>