| OLD | NEW |
| (Empty) | |
| 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="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 8 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700,4
00,300"> |
| 9 <link rel="import" href="../../google-signin/google-signin.html"> |
| 10 <link rel="import" href="../google-analytics.html"> |
| 11 |
| 12 </head> |
| 13 <body> |
| 14 <style is="custom-style"> |
| 15 body { |
| 16 background: #eee; |
| 17 color: #222; |
| 18 font: 13px/1.3 'Open Sans', sans-serif; |
| 19 margin: 0; |
| 20 padding: 0; |
| 21 } |
| 22 |
| 23 header { |
| 24 background-color: #333; |
| 25 box-sizing: border-box; |
| 26 color: #eee; |
| 27 display: table; |
| 28 padding: 1.2em 1.5em; |
| 29 width: 100%; |
| 30 } |
| 31 header > h1 { |
| 32 display: table-cell; |
| 33 font-size: 1.667em; |
| 34 font-weight: 400; |
| 35 margin: 0; |
| 36 vertical-align: middle; |
| 37 width: 100%; |
| 38 } |
| 39 header > h1 em { |
| 40 font-weight: 300; |
| 41 font-size: .8em; |
| 42 font-style: normal; |
| 43 margin-left: .5em; |
| 44 opacity: .6; |
| 45 } |
| 46 header > google-signin { |
| 47 display: table-cell; |
| 48 vertical-align: middle; |
| 49 white-space: nowrap; |
| 50 } |
| 51 |
| 52 /** |
| 53 * .control styles. |
| 54 */ |
| 55 google-analytics-view-selector::shadow .control, |
| 56 google-analytics-date-selector::shadow .control { |
| 57 display: inline-block; |
| 58 margin: 0 1em 1.5em 0; |
| 59 } |
| 60 google-analytics-view-selector::shadow .control:last-child, |
| 61 google-analytics-date-selector::shadow .control:last-child { |
| 62 margin-right: 0; |
| 63 } |
| 64 google-analytics-view-selector::shadow .control > label, |
| 65 google-analytics-date-selector::shadow .control > label { |
| 66 display: block; |
| 67 padding: 0 0 .4em 2px; |
| 68 } |
| 69 |
| 70 /** |
| 71 * Common styles. |
| 72 */ |
| 73 google-analytics-view-selector, |
| 74 google-analytics-date-selector { |
| 75 border: 1px solid #ccc; |
| 76 border-radius: 4px; |
| 77 background: #fff; |
| 78 float: left; |
| 79 margin: 0 1.5em 1.5em 0; |
| 80 padding: 1.5em 1.5em 0; |
| 81 } |
| 82 google-analytics-chart { |
| 83 border: 1px solid #ccc; |
| 84 border-radius: 4px; |
| 85 background: #fff; |
| 86 float: left; |
| 87 margin: 0 1.5em 1.5em 0; |
| 88 padding: 1.5em; |
| 89 position: relative; |
| 90 transition: opacity .2s ease; |
| 91 } |
| 92 google-analytics-chart:not([rendered]) { |
| 93 display: none; |
| 94 } |
| 95 |
| 96 google-analytics-chart:first-of-type { |
| 97 clear: both; |
| 98 } |
| 99 google-analytics-chart h3 { |
| 100 border: 0; |
| 101 font-size: 1.3em; |
| 102 font-weight: 300; |
| 103 margin: 0; |
| 104 padding: 0; |
| 105 } |
| 106 |
| 107 |
| 108 /** |
| 109 * <google-analytics-dashboard> styles. |
| 110 */ |
| 111 google-analytics-dashboard { |
| 112 display: block; |
| 113 padding: 1.5em; |
| 114 transition: opacity .3s ease; |
| 115 } |
| 116 google-analytics-dashboard:not([authorized]) { |
| 117 opacity: .4; |
| 118 pointer-events: none; |
| 119 } |
| 120 |
| 121 /** |
| 122 * <google-analytics-view-selector> styles. |
| 123 */ |
| 124 google-analytics-view-selector::shadow label { |
| 125 font-weight: bold; |
| 126 } |
| 127 google-analytics-view-selector::shadow select { |
| 128 border: 1px solid #ccc; |
| 129 border-radius: 4px; |
| 130 box-sizing: border-box; |
| 131 height: 34px; |
| 132 line-height: 20px; |
| 133 min-width: 160px; |
| 134 padding: 6px 12px; |
| 135 } |
| 136 google-analytics-view-selector::shadow select:focus { |
| 137 border-color: #4d90fe; |
| 138 outline: 0; |
| 139 } |
| 140 google-analytics-view-selector::shadow label { |
| 141 font-weight: bold; |
| 142 } |
| 143 |
| 144 /** |
| 145 * <google-analytics-date-selector> styles. |
| 146 */ |
| 147 google-analytics-date-selector::shadow label { |
| 148 font-weight: bold; |
| 149 } |
| 150 google-analytics-date-selector::shadow input { |
| 151 border: 1px solid #ccc; |
| 152 border-radius: 4px; |
| 153 box-sizing: border-box; |
| 154 font: inherit; |
| 155 font-weight: 400; |
| 156 height: 34px; |
| 157 line-height: 20px; |
| 158 min-width: 160px; |
| 159 padding: 6px; |
| 160 } |
| 161 google-analytics-date-selector::shadow input:focus { |
| 162 border-color: #4d90fe; |
| 163 outline: 0; |
| 164 } |
| 165 |
| 166 </style> |
| 167 <header> |
| 168 <h1>Google Analytics <em>Polymer Elements Demo</em></h1> |
| 169 <google-signin |
| 170 client-id="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleuserc
ontent.com" |
| 171 </google-signin> |
| 172 </header> |
| 173 |
| 174 |
| 175 <google-analytics-dashboard> |
| 176 |
| 177 <google-analytics-view-selector></google-analytics-view-selector> |
| 178 <google-analytics-date-selector></google-analytics-date-selector> |
| 179 |
| 180 <google-analytics-chart |
| 181 type="area" |
| 182 metrics="ga:sessions" |
| 183 dimensions="ga:date"> |
| 184 <h3>Site Traffic</h3> |
| 185 </google-analytics-chart> |
| 186 |
| 187 <google-analytics-chart |
| 188 type="column" |
| 189 metrics="ga:avgPageLoadTime" |
| 190 dimensions="ga:date"> |
| 191 <h3>Average Page Load Times</h3> |
| 192 </google-analytics-chart> |
| 193 |
| 194 <google-analytics-chart |
| 195 type="geo" |
| 196 metrics="ga:users" |
| 197 dimensions="ga:country"> |
| 198 <h3>Users by Country</h3> |
| 199 </google-analytics-chart> |
| 200 |
| 201 <google-analytics-chart |
| 202 type="pie" |
| 203 metrics="ga:pageviews" |
| 204 dimensions="ga:browser" |
| 205 sort="-ga:pageviews" |
| 206 max-results="5"> |
| 207 <h3>Pageviews by Browser</h3> |
| 208 </google-analytics-chart> |
| 209 |
| 210 </google-analytics-dashboard> |
| 211 |
| 212 </body> |
| 213 </html> |
| OLD | NEW |