Completed calendar view, started timeline view.

bower.json

@@ -1,5 +1,5 @@
 {
-  "name": "ng-boilerplate",
+  "name": "baw-client",
   "version": "0.0.18",
   "devDependencies": {
     "angular": "1.3.x",

src/app/app.js

@@ -93,6 +93,7 @@ var app = angular.module('baw',
 
                              'bawApp.d3',                /* our d3 integration */
                              'bawApp.d3.calendarView',
+                             'bawApp.d3.timelineView',
 
                              'bawApp.accounts',
                              'bawApp.annotationViewer',

src/app/d3Bindings/calendarView/calendarView.js

@@ -3,14 +3,14 @@
  * Created by Anthony on 23/08/2014.
  */
 angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
-    .directive("bawCalendarView", ["d3", function (d3) {
+    .directive("bawCalendarView", ["d3", "moment", function (d3, moment) {
 
         // d3 functions
         // private properties - globals, formatters, magic numbers
-        var day = null,
-            week = null,
-            format = null,
-            month_format = null,
+        var day = d3.time.format("%w"),
+            week = d3.time.format("%U"),
+            format = d3.time.format("%Y-%m-%d"),
+            month_format = d3.time.format("%b"),
             width = 960,
             height = 136,
             cellSize = 17, // cell size
@@ -26,35 +26,41 @@ angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
             ];
 
         var updateCatalogueData = function updateCatalogueData(json) {
-            var data = d3.nest()
-                .key(function (d) {
-                    return d.extracted_year + "-" + d.extracted_month + "-" + d.extracted_day;
-                })
-                .rollup(function (d) {
-                    var itemYear = parseInt(d[0].extracted_year);
-                    if (firstYear == null || itemYear > firstYear) {
-                        firstYear = itemYear;
-                    }
-                    if (lastYear == null || itemYear < lastYear) {
-                        lastYear = itemYear;
-                    }
 
-                    var itemCount = parseInt(d[0].count);
-                    if (colourRangeStop == null || itemCount > colourRangeStop) {
-                        colourRangeStop = itemCount;
-                    }
-
-                    return itemCount;
-                })
-                .map(json);
+            var data = {};
+            for(var i = 0;i<json.length; i++){
+                var item = json[i];
+                var recordedDate = moment(item.recordedDate);
+                var key = recordedDate.year() + "-" + baw.stringPad(recordedDate.month(), 2, '0') + "-" + baw.stringPad(recordedDate.date(), 2, '0');
+
+                var itemYear = parseInt(recordedDate.year());
+                if (firstYear == null || itemYear > firstYear) {
+                    firstYear = itemYear;
+                }
+                if (lastYear == null || itemYear < lastYear) {
+                    lastYear = itemYear;
+                }
+
+                // add one or set property
+                if(data[key]){
+                    data[key] += 1;
+                } else {
+                    data[key] = 1;
+                }
+
+                // get the max number of recordings in a day
+                if (colourRangeStop == null || data[key] > colourRangeStop) {
+                    colourRangeStop = data[key];
+                }
+            }
 
             // ensure year doesn't go beyond 2007
             if (lastYear < minYear) {
                 lastYear = minYear;
             }
 
             var elements = createSvgCalendarView(firstYear, lastYear);
-            addDataToCalendar(elements.rect, data)
+            addDataToCalendar(elements.rect, data);
 
         };
 
@@ -141,11 +147,11 @@ angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
             var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
                 d0 = +day(t0), w0 = +week(t0),
                 d1 = +day(t1), w1 = +week(t1);
-            return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
-                + "H" + w0 * cellSize + "V" + 7 * cellSize
-                + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
-                + "H" + (w1 + 1) * cellSize + "V" + 0
-                + "H" + (w0 + 1) * cellSize + "Z";
+            return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
+                "H" + w0 * cellSize + "V" + 7 * cellSize +
+                "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
+                "H" + (w1 + 1) * cellSize + "V" + 0 +
+                "H" + (w0 + 1) * cellSize + "Z";
         };
 
         var addDataToCalendar = function addDataToCalendar(rect, data) {

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

@@ -1 +1 @@
-<div id="audioRecordingCalendar" style="height:1100px;"></div>
+<div id="audioRecordingCalendar" style="height:500px;"></div>

src/app/d3Bindings/d3TestPage.js

@@ -6,7 +6,7 @@ bawD3.controller('D3TestPageCtrl', ['$scope', 'conf.paths', '$http', function ($
     // assign the resulting data to scope (not great but it will do for now)
     $scope.basicData = [0, 1, 2, 3, 4, 5];
 
-    $scope.siteId = 399;
+    $scope.siteId = 895;
 
     var request_filter = {
         "filter": {

src/app/d3Bindings/d3TestPage.tpl.html

@@ -5,4 +5,8 @@ <h2>Calendar view</h2>
     <div>
         <baw-calendar-view data="filteredAudioRecordings"></baw-calendar-view>
     </div>
+    <h2>Timeline view</h2>
+    <div>
+        <baw-timeline-view data="filteredAudioRecordings"></baw-timeline-view>
+    </div>
 </div>

src/app/d3Bindings/timelineView/_timelineView.scss

@@ -0,0 +1,34 @@
+.chart {
+  shape-rendering: crispEdges;
+}
+
+.mini text {
+  font: 9px sans-serif;
+}
+
+.main text {
+  font: 12px sans-serif;
+}
+
+.miniItem0 {
+  fill: darksalmon;
+  stroke-width: 6;
+}
+
+.miniItem1 {
+  fill: darkolivegreen;
+  fill-opacity: .7;
+  stroke-width: 6;
+}
+
+.miniItem2 {
+  fill: slategray;
+  fill-opacity: .7;
+  stroke-width: 6;
+}
+
+.brush .extent {
+  stroke: gray;
+  fill: dodgerblue;
+  fill-opacity: .365;
+}