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