Add files for new Google Analytics Demos & Tools site.

.gitignore

@@ -1 +1,15 @@
+# OS or Editor folders
 .DS_Store
+Thumbs.db
+.cache
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+
+# npm stuff
+node_modules
+npm-debug.log
+
+# Built files
+public/

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+Want to contribute? Great! First, read this page (including the small print at the end).
+
+### Before you contribute
+Before we can use your code, you must sign the
+[Google Individual Contributor License Agreement](https://developers.google.com/open-source/cla/individual?csw=1)
+(CLA), which you can do online. The CLA is necessary mainly because you own the
+copyright to your changes, even after your contribution becomes part of our
+codebase, so we need your permission to use and distribute your code. We also
+need to be sure of various other things—for instance that you'll tell us if you
+know that your code infringes on other people's patents. You don't have to sign
+the CLA until after you've submitted your code for review and a member has
+approved it, but you must do it before we can put your code into our codebase.
+Before you start working on a larger contribution, you should get in touch with
+us first through the issue tracker with your idea so that we can help out and
+possibly guide you. Coordinating up front makes it much easier to avoid
+frustration later on.
+
+### Code reviews
+All submissions, including submissions by project members, require review. We
+use Github pull requests for this purpose.
+
+### The small print
+Contributions made by corporations are covered by a different agreement than
+the one above, the Software Grant and Corporate Contributor License Agreement.

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -1,57 +1,39 @@
-Google Analytics Embed API Demos
+Google Analytics Demos and Tools
 ================================
 
-This repo showcases many of the things that are possible with the [Embed API](https://developers.google.com/analytics/devguides/reporting/embed/v1/). Each demo builds on ideas presented in the previous demo, so you should check them out in order. If you're curious how anything is done, browse around in the code to see for yourself.
+A showcase of demos and tools built with the various Google Analytics APIs and Libraries.
+**[View the Site (https://ga-dev-tools.appspot.com)](https://ga-dev-tools.appspot.com)**
 
-#### [View Demos](http://ga-dev-tools.appspot.com/demos/embed-api/) →
+## Submitting Feedback / Reporting Bugs
 
-## Demos Source Code
+If a demo or tool is not working as you'd expect, or if you encounter an error while using the site, please [file an issue](https://github.com/googleanalytics/ga-dev-tools/issues/new) so we can fix it.
 
-* [Basic Dashboard](https://github.com/googleanalytics/embed-api-demos/blob/master/site/1-basic-dashboard.html)
-* [Multiple Views](https://github.com/googleanalytics/embed-api-demos/blob/master/site/2-multiple-views.html)
-* [Multiple Date Ranges](https://github.com/googleanalytics/embed-api-demos/blob/master/site/3-multiple-dates.html)
-* [Interactive Charts](https://github.com/googleanalytics/embed-api-demos/blob/master/site/4-interactive-charts.html)
-* [Third-Party Visualizations](https://github.com/googleanalytics/embed-api-demos/blob/master/site/5-third-party-visualizations.html)
-* [Pure HTML Dashboards](https://github.com/googleanalytics/embed-api-demos/blob/master/site/6-pure-html-dashboards.html)
+If you've discovered a bug in one of the underlying APIs (i.e. not with the site itself), please submit a bug report on the [Google Analytics issue tracker](https://code.google.com/p/analytics-issues/).
 
-## Custom Components Source Code
+If you have general analytics questions, please ask them on Stack Overflow with either the [google-analytics](http://stackoverflow.com/questions/tagged/google-analytics) or [google-analytics-api](http://stackoverflow.com/questions/tagged/google-analytics-api) tag, or on one of the [Google Analytics developer forums](https://developers.google.com/analytics/community/#developer-discussion-groups).
 
-* [Datepicker](https://github.com/googleanalytics/embed-api-demos/blob/master/site/components/datepicker.js)
-* [Viewpicker](https://github.com/googleanalytics/embed-api-demos/blob/master/site/components/viewpicker.js)
-* [Active Users](https://github.com/googleanalytics/embed-api-demos/blob/master/site/components/active-users.js)
+## Building and Running the Site Locally
 
-## Running the Demos Yourself
+The Google Analytics demos and tools site runs on [Google App Engine](https://cloud.google.com/appengine/) and is built with [node.js](http://nodejs.org/). To run the site locally you'll need to install App Engine and node if you don't already have them.
 
-To run the demos yourself, all you have to do is download the repo, navigate to the site folder, and start up a local server. Here's a really easy way:
+Once App Engine and node are installed on your system, follow these steps to build and run the site locally:
 
 ```sh
-# Clone the repo and cd into the site directory.
-git clone git@github.com:googleanalytics/embed-api-demos.git
-cd embed-api-demos/site/
+# Clone the repository.
+git clone https://github.com/googleanalytics/ga-dev-tools.git
+cd ga-dev-tools
 
-# Start running a local server at http://localhost:4000
-python -m SimpleHTTPServer 4000
-```
-
-Now just go to [http://localhost:4000](http://localhost:4000) in your browser and you should see the site.
-
-Alternatively you can copy and paste the files manually or use FTP to transfer them to a remote server, though if you do that you'll have to [change the client ID](https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide#client-id) to one with your site's domain set as an approved origin.
-
-**Note:** if you copy the files into a folder that is not at the root of your server, most of the links will not work and the page will probably look broken.
+# Install the build dependencies.
+npm install
+npm run build
 
-### Building the site using Jekyll
-
-If you're familiar with [Jekyll](http://jekyllrb.com) it can make running the demos locally or deploying them to a remote server much easier. It's actually how this repo is built and how the demo app is deployed.
+# Run the local App Engine server.
+path/to/dev_appserver.py .
+```
 
-```sh
-# Clone the repo and cd into the repo directory.
-git clone [email protected]:googleanalytics/embed-api-demos.git
-cd embed-api-demos
+Now you should be able to load [http://localhost:8080/](http://localhost:8080/) in your browser and see the site. (Note, the client ID associated with this project has the origin `localhost:8080` whitelisted. If you load the site on another port, authentication may not work property.)
 
-# Run the site locally using Jekyll
-jekyll serve
-```
+If you're running App Engine on Windows or Mac, you can use the App Engine Launcher GUI to run the site as an alternative to running the above command.
 
-The `jekyll serve` command will build all the files and load up a server on your local machine. Then you can go to [http://localhost:4000](http://localhost:4000) and everything should work fine. If you run `jekyll serve -w` it will also watch for changes to your source files and rebuild the site on the fly. This makes it easy to change a few things and see the results immediately.
+To have your system watch for changes and automatically rebuild the source files, you can run `npm run watch` in place of the `npm run build` command shown above.
 
-If you need to change any of the configuration settings (like your client ID) you can set them in the [_config.yml](https://github.com/googleanalytics/embed-api-demos/blob/master/_config.yml) file and rerun the `jekyll serve` command.

app.yaml

@@ -0,0 +1,25 @@
+application: google.com:ga-dev-tools
+version: 2-4
+runtime: python27
+api_version: 1
+threadsafe: yes
+
+libraries:
+- name: webapp2
+  version: "2.5.2"
+- name: jinja2
+  version: "2.6"
+- name: yaml
+  version: "3.10"
+
+handlers:
+- url: /favicon\.ico
+  static_files: favicon.ico
+  upload: favicon\.ico
+  secure: always
+- url: /public
+  static_dir: public
+  secure: always
+- url: /.*
+  script: lib.app.router
+  secure: always

assets/css/base/custom-media.css

@@ -0,0 +1,20 @@
+/*
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+@custom-media --break-sm (min-width: 420px);
+@custom-media --break-md (min-width: 570px);
+@custom-media --break-lg (min-width: 1024px);

assets/css/base/elements.css

@@ -0,0 +1,125 @@
+/*
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+@import "normalize.css";
+@import "./variables";
+
+*,
+*:after,
+*:before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+body {
+  color: var(--text-color);
+  font: 0.875em/1.4 'Open Sans', sans-serif;
+  text-rendering: optimizeLegibility;
+}
+
+section {
+  max-width: 52em;
+}
+
+ul {
+  list-style: square;
+  padding: 0 0 0 var(--gap);
+}
+
+p, ul, ol, pre {
+  margin: 0 0 var(--gap);
+}
+
+h1, h2 {
+  color: var(--text-color-faded);
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 2.5em;
+  margin: 0 0 calc(var(--gap)/2.5);
+}
+
+h2 {
+  font-size: 1.75em;
+  margin: 1em 0;
+}
+
+h3 {
+  color: #666;
+  font-size: 1.25em;
+  margin: 0 0 calc(var(--gap)/1.25);
+}
+
+i {
+  display: inline-block;
+  font: inherit;
+}
+
+a {
+  color: var(--ga-orange-dark);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+code {
+  background: rgba(0, 0, 0, 0.075);
+  border-radius: 2px;
+  color: #000;
+  font-family: "Menlo", monospace;
+  font-size: .9em;
+  padding: 2px 5px 1px;
+}
+
+figure {
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+input,
+select {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  font: inherit;
+  font-weight: 400;
+  height: calc(34em/14); /* 34px @ 14px body font */
+  line-height: calc(20em/14); /* 20px @ 14px body font */
+  padding: calc(6em/14); /* 6px @ 14px body font */
+}
+
+input:focus,
+select:focus {
+  border-color: #4d90fe;
+  outline: 0;
+}

assets/css/base/variables.css

@@ -0,0 +1,45 @@
+/*
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+:root {
+
+  --gap: 1.5em;
+  --gap-lg: 2em;
+
+  --text-color: #333;
+  --text-color-light: #ddd;
+  --text-color-faded: #777;
+  --text-color-faint: #aaa;
+
+  --bg-color-dark: #333;
+  --bg-color-dark-faded: #444;
+  --bg-color-light: #f4f2f0;
+
+  --border-color: #d4d2d0;
+
+  --ga-gray: #75787d;
+  --ga-orange-dark: #f05721;
+  --ga-orange-light: #f7991c;
+
+  --ga-logo-height: 32px;
+  --ga-logo-width: 316px;
+
+  --sidebar-width: 260px;
+  --sidebar-width-md: 280px;
+
+  --quantum-timing: cubic-bezier(.4,0,.2,1);
+}