Set up initial play area for D3 chart test.

Also added D3 library, test pages, and dummy directive for calendar view.

bower.json

@@ -19,7 +19,8 @@
     "lodash": "~2.4.x",
     "angular-tags": "git://github.com/boneskull/angular-tags.git#master",
     "angular-sanitize": "~1.2.x",
-    "draggabilly": "~1.1.x"
+    "draggabilly": "~1.1.x",
+    "d3": "~3.4.11"
   },
   "dependencies": {},
   "resolutions": {

build.config.js

@@ -119,7 +119,8 @@ module.exports = {
             'vendor/get-style-property/get-style-property.js',
             // get-size depends on get-style-property... it has to come after it
             'vendor/get-size/get-size.js',
-            'vendor/draggabilly/draggabilly.js'
+            'vendor/draggabilly/draggabilly.js',
+            'vendor/d3/d3.js'
 
 
         ],

src/app/app.js

@@ -73,12 +73,16 @@ var app = angular.module('baw',
                              'bawApp.directives', /* our directives.js  */
                              'bawApp.directives.ngAudio', /* our directives.js  */
                              'bawApp.directives.toggleSwitch',
+
                              'bawApp.filters', /* our filters.js     */
                              'bawApp.services', /* our services.js    */
                              'bawApp.services.unitConverter',
                              'audio-control',
                              'draggabilly',
 
+                             'bawApp.d3',                /* our d3 integration */
+                             'bawApp.d3.calendarView',
+
                              'bawApp.accounts',
                              'bawApp.annotationViewer',
                              'bawApp.audioEvents',
@@ -154,6 +158,8 @@ var app = angular.module('baw',
                          title: 'Audio Events' }).
                      when('/library/:recordingId/audio_events/:audioEventId', {templateUrl: paths.site.files.library.item, controller: 'AnnotationItemCtrl', title: 'Annotation :audioEventId'}).
 
+                     when('/d3Test', {templateUrl: paths.site.files.d3.testPage, controller: 'D3TestPageCtrl', title: 'D3 Test Page' }).
+
                      // missing route page
                      when('/', {templateUrl: paths.site.files.home, controller: 'HomeCtrl'}).
                      when('/404', {templateUrl: paths.site.files.error404, controller: 'ErrorCtrl'}).

src/app/d3Bindings/bawD3.js

@@ -0,0 +1,21 @@
+/**
+ * Support for interacting with D3
+ * Each d3 chart should have its own directive.
+ * Each directive should require the D3 service.
+ */
+var bawD3 = bawD3 || angular.module("bawApp.d3", []);
+/**
+ * This wrapper is pretty simple.
+ * We do this for modularity's sake and to fit in with the angular pattern.
+ * This provider has the potential for runtime configuration:
+ * (inject d3Provider into a config function).
+ */
+bawD3.provider("d3", function () {
+
+        // TODO: is there a better way to load d3, without it attaching to the window?
+        var d3 = window.d3;
+
+        this.$get = [function d3Factory() {
+            return d3;
+        }];
+    });

src/app/d3Bindings/caelndarView/_calendarView.scss

@@ -0,0 +1,5 @@
+baw-calendar-view {
+  li {
+   color: darkgreen;
+  }
+}

src/app/d3Bindings/caelndarView/calendarView.js

@@ -0,0 +1,37 @@
+/**
+ * A d3 Calendar View directive
+ * Created by Anthony on 23/08/2014.
+ */
+angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
+    .directive("bawCalendarView", ["d3", function(d3) {
+        return {
+            restrict: "EA",
+            scope: {
+                data: "="
+            },
+            templateUrl: "d3Bindings/caelndarView/calenderViewTemplate.tpl.html",
+            link: function($scope, $element, attributes, controller, transcludeFunction) {
+                // use this function to bind DOM events to angular scope
+                // or d3 events to angular scope.
+                // you can use the jQuery / d3 objects here (use the injected d3 instance)
+
+                // where possible avoid jQuery
+                var element = $element[0];
+
+                // d3.doSomething
+            },
+            controller: "bawCalendarViewController"
+        }
+    }])
+    .controller("bawCalendarViewController", ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
+        // The controller should host functionality native to angular
+        // e.g.
+        // - functions for button clicks
+        // - API calls (not relevant in this case)
+        // - scope modification
+        // - iteraction with other services/providers
+        // IT SHOULD NOT contain any reference to the d3 or jQuery objects
+
+        $scope.example = "Hello world!";
+
+    }]);

src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html

@@ -0,0 +1,7 @@
+<b>I'm a fancy graph</b>
+        <div>
+            {{example}}
+        </div>
+<ol ng-repeat="dataPoint in data">
+    <li>{{dataPoint}}</li>
+</ol>

src/app/d3Bindings/d3TestPage.js

@@ -0,0 +1,8 @@
+var bawD3 = bawD3 || angular.module("bawApp.d3", []);
+bawD3.controller('D3TestPageCtrl', ['$scope', function($scope) {
+
+        // use the REST API in here
+        // assign the resulting data to scope (not great but it will do for now
+        $scope.basicData = [0,1,2,3,4,5];
+
+    }]);

src/app/d3Bindings/d3TestPage.tpl.html

@@ -0,0 +1,8 @@
+<div id="content">
+    <h1>D3 Play area</h1>
+
+    <h2>Calendar view</h2>
+    <div>
+        <baw-calendar-view data="basicData"></baw-calendar-view>
+    </div>
+</div>

src/baw.configuration.tpl.js

@@ -123,6 +123,9 @@ angular.module('bawApp.configuration', ['url'])
                         spec: 'assets/bird_walk/bird_walk_spec.json',
                         stats: 'assets/bird_walk/bird_walk_stats.json',
                         images: 'assets/bird_walk/images/'
+                    },
+                    d3: {
+                        testPage: 'd3Bindings/d3TestPage.tpl.html'
                     }
                 },
                 // routes used by angular

src/index.html

@@ -64,6 +64,7 @@
                         <li><button class="btn btn-default btn-block" ng-click="hideDebugUi()">Hide hidden features</button></li>
                         <li class="divider"></li>
                         <li><a href="/listen/234234">Easy Link</a></li>
+                        <li><a href="/d3Test">D3 tests</a></li>
                     </ul>
                 </li>
             </ul>

src/sass/application.tpl.scss

@@ -34,6 +34,7 @@ $DEBUG: '<%= build_configs.current.key === "development" %>' == 'true';
 @import "../app/audioEvents/audio_events";
 @import "../app/annotationLibrary/annotationLibrary";
 @import "../app/bookmarks/bookmarks";
+@import "../app/d3Bindings/caelndarView/calendarView";
 @import "../app/home/home";
 @import "../app/listen/listen";
 @import "../app/login/login_control";