Skip to content

Commit 4bfbbaf

Browse files
ebidelebidel
committed
Merge pull request #1 from philipwalton/google-analytics-elements
Add google-analytics element files.
2 parents d7b36bd + 2cad11b commit 4bfbbaf

13 files changed

+1609
-4
lines changed

‎README.md‎

100644100755
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
google-analytics
2-
================
3-
4-
See the [component landing page](http://googlewebcomponents.github.io/google-analytics) for more information.
1+
google-analytics
2+
================
3+
4+
See the [component page](http://googlewebcomponents.github.io/google-analytics) for more information.

‎bower.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "google-analytics",
3+
"version": "0.0.1",
4+
"authors": [
5+
"Philip Walton <[email protected]>"
6+
],
7+
"description": "Encapsulates Google Analytics dashboard features into web components",
8+
"main": "google-analytics.html",
9+
"license": "Apache2",
10+
"homepage": "http://googlewebcomponents.github.io/google-analytics",
11+
"keywords": [
12+
"google analytics",
13+
"analytics",
14+
"dashboard",
15+
"polymer",
16+
"web-components"
17+
],
18+
"ignore": [
19+
"**/.*"
20+
],
21+
"dependencies": {
22+
"google-signin": "GoogleWebComponents/google-signin#master",
23+
"google-chart": "GoogleWebComponents/google-chart#master",
24+
"native-promise-only": "~0.4.1-g",
25+
"polymer": "Polymer/polymer#~0.3.3"
26+
}
27+
}

‎demo.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
body {
2+
background: #eee;
3+
color: #222;
4+
font: 13px/1.3 'Open Sans', sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
header {
10+
background-color: #333;
11+
box-sizing: border-box;
12+
color: #eee;
13+
display: table;
14+
padding: 1.2em 1.5em;
15+
width: 100%;
16+
}
17+
header > h1 {
18+
display: table-cell;
19+
font-size: 1.667em;
20+
font-weight: 400;
21+
margin: 0;
22+
vertical-align: middle;
23+
width: 100%;
24+
}
25+
header > h1 em {
26+
font-weight: 300;
27+
font-size: .8em;
28+
font-style: normal;
29+
margin-left: .5em;
30+
opacity: .6;
31+
}
32+
header > google-signin {
33+
color: #ccc;
34+
display: table-cell;
35+
font-size: 1.1em;
36+
vertical-align: middle;
37+
white-space: nowrap;
38+
}
39+
40+
/**
41+
* .control styles.
42+
*/
43+
google-analytics-view-selector::shadow .control,
44+
google-analytics-date-selector::shadow .control {
45+
display: inline-block;
46+
margin: 0 1em 1.5em 0;
47+
}
48+
google-analytics-view-selector::shadow .control:last-child,
49+
google-analytics-date-selector::shadow .control:last-child {
50+
margin-right: 0;
51+
}
52+
google-analytics-view-selector::shadow .control > label,
53+
google-analytics-date-selector::shadow .control > label {
54+
display: block;
55+
padding: 0 0 .4em 2px;
56+
}
57+
58+
/**
59+
* Common styles.
60+
*/
61+
google-analytics-view-selector,
62+
google-analytics-date-selector {
63+
border: 1px solid #ccc;
64+
border-radius: 4px;
65+
background: #fff;
66+
float: left;
67+
margin: 0 1.5em 1.5em 0;
68+
padding: 1.5em 1.5em 0;
69+
}
70+
google-analytics-chart {
71+
border: 1px solid #ccc;
72+
border-radius: 4px;
73+
background: #fff;
74+
float: left;
75+
margin: 0 1.5em 1.5em 0;
76+
padding: 1.5em;
77+
position: relative;
78+
transition: opacity .2s ease;
79+
}
80+
google-analytics-chart:not([rendered]) {
81+
display: none;
82+
}
83+
84+
google-analytics-chart:first-of-type {
85+
clear: both;
86+
}
87+
google-analytics-chart h3 {
88+
border: 0;
89+
font-size: 1.3em;
90+
font-weight: 300;
91+
margin: 0;
92+
padding: 0;
93+
}
94+
95+
96+
/**
97+
* <google-analytics-view-selector> styles.
98+
*/
99+
google-analytics-dashboard {
100+
display: block;
101+
padding: 1.5em;
102+
transition: opacity .3s ease;
103+
}
104+
google-analytics-dashboard:not([authorized]) {
105+
opacity: .4;
106+
pointer-events: none;
107+
}
108+
109+
/**
110+
* <google-analytics-view-selector> styles.
111+
*/
112+
google-analytics-view-selector::shadow label {
113+
font-weight: bold;
114+
}
115+
google-analytics-view-selector::shadow select {
116+
border: 1px solid #ccc;
117+
border-radius: 4px;
118+
box-sizing: border-box;
119+
height: 34px;
120+
line-height: 20px;
121+
min-width: 160px;
122+
padding: 6px 12px;
123+
}
124+
google-analytics-view-selector::shadow select:focus {
125+
border-color: #4d90fe;
126+
outline: 0;
127+
}
128+
google-analytics-view-selector::shadow label {
129+
font-weight: bold;
130+
}
131+
132+
/**
133+
* <google-analytics-date-selector> styles.
134+
*/
135+
google-analytics-date-selector::shadow label {
136+
font-weight: bold;
137+
}
138+
google-analytics-date-selector::shadow input {
139+
border: 1px solid #ccc;
140+
border-radius: 4px;
141+
box-sizing: border-box;
142+
font: inherit;
143+
font-weight: 400;
144+
height: 34px;
145+
line-height: 20px;
146+
min-width: 160px;
147+
padding: 6px;
148+
}
149+
google-analytics-date-selector::shadow input:focus {
150+
border-color: #4d90fe;
151+
outline: 0;
152+
}

‎demo.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Google Analytics Polymer Elements Demo</title>
7+
<script src="../platform/platform.js"></script>
8+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700,400,300">
9+
<link rel="stylesheet" href="demo.css" shim-shadowdom>
10+
<link rel="import" href="../google-signin/google-signin.html">
11+
<link rel="import" href="google-analytics.html">
12+
</head>
13+
<body unresolved>
14+
15+
<header>
16+
<h1>Google Analytics <em>Polymer Elements Demo</em></h1>
17+
<google-signin
18+
clientId="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleusercontent.com"
19+
scopes="https://www.googleapis.com/auth/analytics.readonly">
20+
</google-signin>
21+
</header>
22+
23+
<google-analytics-dashboard>
24+
25+
<google-analytics-view-selector></google-analytics-view-selector>
26+
<google-analytics-date-selector></google-analytics-date-selector>
27+
28+
<google-analytics-chart
29+
type="area"
30+
metrics="ga:sessions"
31+
dimensions="ga:date">
32+
<h3>Site Traffic</h3>
33+
</google-analytics-chart>
34+
35+
<google-analytics-chart
36+
type="column"
37+
metrics="ga:avgPageLoadTime"
38+
dimensions="ga:date">
39+
<h3>Average Page Load Times</h3>
40+
</google-analytics-chart>
41+
42+
<google-analytics-chart
43+
type="geo"
44+
metrics="ga:users"
45+
dimensions="ga:country">
46+
<h3>Users by Country</h3>
47+
</google-analytics-chart>
48+
49+
<google-analytics-chart
50+
type="pie"
51+
metrics="ga:pageviews"
52+
dimensions="ga:browser"
53+
sort="-ga:pageviews"
54+
maxResults="5">
55+
<h3>Pageviews by Browser</h3>
56+
</google-analytics-chart>
57+
58+
</google-analytics-dashboard>
59+
60+
</body>
61+
</html>

‎google-analytics-base.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<link rel="import" href="../polymer/polymer.html">
2+
<link rel="import" href="promise-import.html">
3+
4+
<!--
5+
The base element for other google analytics elements. This element is not
6+
intended to be used by itself. It is only intended to be subclassed.
7+
8+
@element google-analytics-base
9+
@blurb Base element for other google analytics elements
10+
@status alpha
11+
@homepage http://polymerlabs.github.io/google-analytics
12+
-->
13+
14+
<polymer-element name="google-analytics-base">
15+
<template>
16+
<google-api-loader
17+
name="analytics"
18+
version="v3">
19+
</google-api-loader>
20+
</template>
21+
22+
<script>
23+
24+
(function() {
25+
26+
/**
27+
* A promise that is resolved when the underlying client libraries are
28+
* loaded. It is rejected if there are any load errors.
29+
*/
30+
var loadPromise = new Promise(function(resolve, reject) {
31+
document.addEventListener('google-api-load', function fn(event) {
32+
var lib = event.detail;
33+
if (lib.name == 'analytics' && lib.version == 'v3') {
34+
resolve(event.detail);
35+
document.removeEventListener('google-api-load', fn);
36+
}
37+
});
38+
document.addEventListener('google-api-load-error', function fn(event) {
39+
var lib = event.detail;
40+
if (lib.name == 'analytics' && lib.version == 'v3') {
41+
reject(event.detail.error);
42+
document.removeEventListener('google-api-load-error', fn);
43+
}
44+
});
45+
});
46+
47+
// Log any errors loading the client library.
48+
loadPromise.catch(function(err) {
49+
console.error(err.stack || err);
50+
})
51+
52+
53+
Polymer('google-analytics-base', {
54+
55+
publish: {
56+
/**
57+
* The `authorized` attribute is true when the user has signed-in and
58+
* the underlying analytics library is fully loaded.
59+
*
60+
* @attribute authorized
61+
* @type boolean
62+
*/
63+
authorized: {
64+
value: false,
65+
reflect: true
66+
}
67+
},
68+
69+
created: function() {
70+
document.addEventListener('google-signin-success', function(event) {
71+
loadPromise
72+
.then(this.userAuthorized.bind(this,event.detail.result));
73+
}.bind(this));
74+
document.addEventListener('google-signed-out', function(event) {
75+
this.userUnauthorized();
76+
}.bind(this));
77+
},
78+
79+
/**
80+
* The `userAuthorized` method will be invoked when the user has
81+
* successfully signed in and all the underlying client libraries
82+
* have been loaded.
83+
*
84+
* @method userAuthorized
85+
* @param {Object} data - The auth data information.
86+
*/
87+
userAuthorized: function(data) {
88+
this.authorized = true;
89+
},
90+
91+
/**
92+
* The `userUnauthorized` method will be invoked when the user has
93+
* successfully signed out.
94+
*
95+
* @method userUnauthorized
96+
*/
97+
userUnauthorized: function() {
98+
this.authorized = false;
99+
}
100+
101+
});
102+
103+
}());
104+
105+
</script>
106+
107+
</polymer-element>

0 commit comments

Comments
 (0)