Skip to content

Commit 151aad6

Browse files
philipwaltonphilipwalton
committed
Add google-analytics element files.
1 parent d7b36bd commit 151aad6

13 files changed

+1640
-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[unrendered] {
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: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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+
var isLoaded = false;
27+
var isAuthorized = false;
28+
29+
/**
30+
* A promise that is resolved when the underlying client libraries are
31+
* loaded. It is rejected if there are any load errors.
32+
*/
33+
var loadPromise = new Promise(function(resolve, reject) {
34+
document.addEventListener('google-api-load', function fn(event) {
35+
var lib = event.detail;
36+
if (lib.name == 'analytics' && lib.version == 'v3') {
37+
isLoaded = true;
38+
resolve(event.detail);
39+
document.removeEventListener('google-api-load', fn);
40+
}
41+
});
42+
document.addEventListener('google-api-load-error', function fn(event) {
43+
var lib = event.detail;
44+
if (lib.name == 'analytics' && lib.version == 'v3') {
45+
reject(event.detail.error);
46+
document.removeEventListener('google-api-load-error', fn);
47+
}
48+
});
49+
});
50+
51+
// Log any errors loading the client library.
52+
loadPromise.catch(function(err) {
53+
console.error(err.stack || err);
54+
})
55+
56+
57+
Polymer('google-analytics-base', {
58+
59+
/**
60+
* The `isLoaded` attribute is true when the underlying analytics
61+
* library is fully loaded.
62+
*
63+
* @attribute isLoaded
64+
* @type boolean
65+
*/
66+
get isLoaded() {
67+
return isLoaded;
68+
},
69+
70+
/**
71+
* The `isAuthorized` attribute is true once the user successfully
72+
* signs in <em>and</em> the libraries have been loaded. If the user
73+
* signs out this will be false.
74+
*
75+
* @attribute isAuthorized
76+
* @type boolean
77+
*/
78+
get isAuthorized() {
79+
return isAuthorized;
80+
},
81+
82+
created: function() {
83+
document.addEventListener('google-signin-success', function(event) {
84+
isAuthorized = true;
85+
loadPromise.then(this.authorized.bind(this, event.detail.result));
86+
}.bind(this));
87+
document.addEventListener('google-signed-out', function(event) {
88+
isAuthorized = false;
89+
this.unauthorized();
90+
}.bind(this));
91+
},
92+
93+
/**
94+
* The `authorized` method will be invoked when the user has
95+
* successfully signed in and all the underlying client libraries
96+
* have been loaded.
97+
*
98+
* @method authorized
99+
* @param {Object} data - The auth data information.
100+
*/
101+
authorized: function(data) {
102+
// Override in a subclass.
103+
},
104+
105+
/**
106+
* The `unauthorized` method will be invoked when the user has
107+
* successfully signed out.
108+
*
109+
* @method unauthorized
110+
*/
111+
unauthorized: function() {
112+
// Override in a subclass.
113+
}
114+
115+
});
116+
117+
}());
118+
119+
</script>
120+
121+
</polymer-element>

0 commit comments

Comments
 (0)