ember-google-analytics-embed - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

addon/components/visualizations/base-visualization.js

@@ -18,2 +18,3 @@ import Ember from 'ember';
   isLoading: true,
+  debounce: false,
 
@@ -82,10 +83,19 @@ requiredOptions: [],
   newVisualizationAttrs() {
-    run.cancel(
-      get(this, '_willUpdateVisualization')
-    );
 
-    set(this, '_willUpdateVisualization', run.later(this, () => {
+    const debounce = get(this, 'debounce');
+
+    if (debounce && typeOf(debounce) === 'number') {
+      run.cancel(
+        get(this, '_willUpdateVisualization')
+      );
+
+      set(this, '_willUpdateVisualization', run.later(this, () => {
+        this.willUpdateVisualization();
+      }, debounce / 2));
+
+    } else {
       this.willUpdateVisualization();
-    }, 250));
 
+    }
+
   },
@@ -109,10 +119,18 @@
   execute() {
-    run.cancel(
-      get(this, 'willExecute')
-    );
+    const debounce = get(this, 'debounce');
 
-    set(this, 'willExecute', run.later(this, () => {
+    if (debounce && typeOf(debounce) === 'number') {
+      run.cancel(
+        get(this, 'willExecute')
+      );
+
+      set(this, 'willExecute', run.later(this, () => {
+        get(this, 'visualization').execute();
+      }, debounce / 2));
+
+    } else {
       get(this, 'visualization').execute();
-    }, 250));
 
+    }
+
   },
@@ -119,0 +137,0 @@

addon/components/visualizations/charts/base-chart.js

@@ -57,2 +57,4 @@ import Ember from 'ember';
 
+    if (!visualization) { return; }
+
     query = pojo(query); chart = pojo(chart);
@@ -59,0 +61,0 @@

package.json

 {
   "name": "ember-google-analytics-embed",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "An Ember.js Addon for adding analytics visualizations using the Google Analytics Embed API.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 Ember Google Analytics Embed [![npm](https://img.shields.io/npm/v/ember-google-analytics-embed.svg)](https://www.npmjs.com/package/ember-google-analytics-embed)
 ======
 
-**Ember Google Analytics Embed** is an addon for adding analytics visualizations to your Ember.js applications using the [Google Analytics Embed API](https://developers.google.com/analytics/devguides/reporting/embed/v1/).
+**Ember Google Analytics Embed** is an addon for quickly building custom Google Analytics dashboards in your Ember.js app, using the [Google Analytics Embed API](https://developers.google.com/analytics/devguides/reporting/embed/v1/).
 
@@ -36,3 +36,4 @@ The addon exposes the following components to use in your templates:
 
-### Authorization
+
+## Authorization
 Each user will need to have access to the GA account queried and authorize themselves. Adding the `ga-embed-authorize` component to your templates will create a 'Sign in to Google Analytics' button and handle authorization automatically:
@@ -78,6 +79,9 @@
 
-## Query
 
+## Visualizations
+
 Each visualization accepts two main attributes, a query and an options hash.
 
+### Query
+
 To get data from our Google Analytics property, we must build a query using the [Google Reporting API](https://developers.google.com/analytics/devguides/reporting/core/v4/). The example below shows a pie chart of sessions, segmented by country. It limits the data to the last 30 days up until today and requests just the top ten results.
@@ -98,3 +102,3 @@
 
-## Options
+### Options
 
@@ -118,6 +122,7 @@ An options hash may be passed to each chart, allowing full configuration of the visualization.
 
-## Visualizations
 
-### Bar Chart
+### Components
 
+#### Bar Chart
+
 Creates a bar chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#configuration-options).
@@ -129,3 +134,3 @@
 
-### Column Chart
+#### Column Chart
 
@@ -138,3 +143,3 @@ Creates a column chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#configuration-options).
 
-### Geo Chart
+#### Geo Chart
 
@@ -149,3 +154,3 @@ Creates a geo chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#configuration-options).
 
-### Line Chart
+#### Line Chart
 
@@ -158,3 +163,3 @@ Creates a line chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#configuration-options).
 
-### Pie Chart
+#### Pie Chart
 
@@ -169,3 +174,3 @@ Creates a pie chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options).
 
-### Table
+#### Table
 
@@ -178,5 +183,30 @@ Creates a table visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/tablechart#configuration-options).
 
+
+### Loading State
+
+Each visualization has a loading state class of `.ga-embed-visualization-loading`, which you can customize in your CSS. The classes set on visualizations allow for custom loading states per visualization.
+
+```html
+<div id="ember123" class="ga-embed-visualization ga-embed-chart ga-embed-line-chart ga-embed-visualization-loading">...</div>
+```
+
+### Auto Resizing
+
+By default, visualizations auto resize on window resize. To disable auto resizing, set `responsiveResize=false` on the visualization.
+
+```handlebars
+{{ga-embed-line-chart query=query options=options responsiveResize=false}}
+```
+
+### Debouncing
+
+When dynamically updating many properties on a visualization, it may be beneficial to debounce executing a new render. To do so, the visualization accepts a `debounce` value in milliseconds (ms).
+
+```handlebars
+{{ga-embed-line-chart query=query options=options debounce=100}}
+```
+
 ## View Selection
 
-The `ga-embed-view-selector` component allows the user to select a view from any property they are authorized to view. Add the view selector component to your template.
+The `ga-embed-view-selector` component allows the user to select a view from any property they are authorized on. Add the view selector component to your template.
 
@@ -189,3 +219,3 @@ ```handlebars
 
-Use the mutated property in your queries:
+Use the mutable property in your queries:
 
@@ -200,6 +230,7 @@ ```handlebars
 
-## Querying Data
 
-The `gaEmbed` service enables a quick method to query data from analytics without directly using a visualization.
+## Querying the Reporting API
 
+The `gaEmbed` service enables a quick method to query data from analytics without directly using a visualization. This can be useful for querying the Google Analytics Reporting API and using the data in your own custom components.
+
 ```javascript
@@ -206,0 +237,0 @@ get(this, 'gaEmbed').getData({

No alert changes

Improved metrics

Total package byte prevSize

28971

increased by5.43%

Lines of code

480

increased by2.56%

Number of lines in readme file

262

increased by13.42%

No dependency changes