google-analytics-view-selector.html

<link rel="import" href="google-analytics-base.html">
<link rel="import" href="account-summaries-import.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 http://googlewebcomponents.github.io/google-analytics
-->

<polymer-element
  name="google-analytics-view-selector"
  extends="google-analytics-base"
  attributes="ids">

  <template>
    <style>
      select {
        color: inherit;
        font: inherit;
        margin: 0;
      }
    </style>

    <span class="control">
      <label for="account">Account</label>
      <select id="account"
        on-change="{{updateAccount}}"
        value="{{account.id}}">
        <template repeat="{{account in accounts}}">
          <option value="{{account.id}}">{{account.name}}</option>
        </template>
      </select>
    </span>
    <span class="control">
      <label>Property</label>
      <select id="property"
        on-change="{{updateProperty}}"
        value="{{property.id}}">
        <template repeat="{{property in account.properties}}">
          <option value="{{property.id}}">{{property.name}}</option>
        </template>
      </select>
    </span>
    <span class="control">
      <label>View</label>
      <select id="view"
        on-change="{{updateView}}"
        value="{{view.id}}">
        <template repeat="{{view in property.views}}">
          <option value="{{view.id}}">{{view.name}}</option>
        </template>
      </select>
    </span>
  </template>

  <script>

    Polymer({

      /**
       * Fired when the users changes the view
       *
       * @param {Object} query The updated query params.
       * @event analytics-dashboard-control-change
       */


      /**
       * 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.
       *
       * @attribute ids
       * @type string
       */


      /**
       * 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
       */


      /**
       * The `account` attribute is the currently selected account.
       *
       * @property account
       * @type Object
       */


      /**
       * The `property` attribute is the currently selected property.
       *
       * @property property
       * @type Object
       */


      /**
       * The `view` attribute is the currently selected view.
       *
       * @property view
       * @type Object
       */


       userAuthorized: function(data) {
         this.super();

         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));
       },


       userUnauthorized: function() {
         this.super();

         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(oldAccount, newAccount) {
        this.property = Path.get('properties[0]').getValueFrom(newAccount);
      },


      propertyChanged: function(oldProperty, newProperty) {
        this.view = Path.get('views[0]').getValueFrom(newProperty);
      },


      viewChanged: function(oldView, newView) {
        this.ids = newView && 'ga:' + newView.id;
      },


      idsChanged: function(oldIds, newIds) {
        // 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>

</polymer-element>