| Index: polymer_1.0.4/bower_components/google-analytics/google-analytics-view-selector.html
|
| diff --git a/polymer_1.0.4/bower_components/google-analytics/google-analytics-view-selector.html b/polymer_1.0.4/bower_components/google-analytics/google-analytics-view-selector.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..8f3b02669ab713928bdab8125628b76326003ab6
|
| --- /dev/null
|
| +++ b/polymer_1.0.4/bower_components/google-analytics/google-analytics-view-selector.html
|
| @@ -0,0 +1,275 @@
|
| +<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>
|
|
|