fixed scope problems

package.json

@@ -39,5 +39,11 @@
     "karma-firefox-launcher": "~0.1.3",
     "karma-coverage": "~0.2"
   },
-  "private": true
+  "private": true,
+  "dependencies": {
+    "karma-jasmine": "^0.2.2",
+    "grunt-contrib-clean": "^0.5.0",
+    "grunt-bump": "0.0.14",
+    "grunt-contrib-concat": "^0.4.0"
+  }
 }

src/app/d3Bindings/calendarView/calendarView.js

@@ -4,13 +4,171 @@
  */
 angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
     .directive("bawCalendarView", ["d3", function (d3) {
+
+        // d3 functions
+        // private properties - globals, formatters, magic numbers
+        var day = null,
+            week = null,
+            format = null,
+            month_format = null,
+            width = 960,
+            height = 136,
+            cellSize = 17, // cell size
+            minYear = 2007,
+            firstYear = null, //new Date().getFullYear(),
+            lastYear = null, //2007
+            colourDomain = [0, 100],//domain is input values, usually x
+            colourRangeStart = 0, // range is output values, usually y
+            colourRangeStop = 10,
+            colourRangeStep = 1,
+            defaultSelection = [
+                {name: '-- Everything --', id: null}
+            ];
+
+        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);
+
+            // ensure year doesn't go beyond 2007
+            if (lastYear < minYear) {
+                lastYear = minYear;
+            }
+
+            var elements = createSvgCalendarView(firstYear, lastYear);
+            addDataToCalendar(elements.rect, data)
+
+        };
+
+        var createSvgCalendarView = function createSvgCalendarView(firstYear, lastYear) {
+
+            // create svg and year rows
+            var svg = d3.select("#audioRecordingCalendar").selectAll("svg")
+                .data(d3.range(firstYear, lastYear - 1, -1)) // subtract one due to exclusive end bound
+                .enter().append("svg")
+                .attr("width", width)
+                .attr("height", height)
+                .attr("class", "RdYlGn")
+                .append("g")
+                .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
+
+            // add year label to left end
+            svg.append("text")
+                .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
+                .style("text-anchor", "middle")
+                .text(function (d) {
+                    return d;
+                });
+
+            // create day rectangles
+            var rect = svg.selectAll(".day")
+                .data(function (d) {
+                    return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
+                })
+                .enter().append("rect")
+                .attr("class", "day")
+                .attr("width", cellSize)
+                .attr("height", cellSize)
+                .attr("x", function (d) {
+                    return week(d) * cellSize;
+                })
+                .attr("y", function (d) {
+                    return day(d) * cellSize;
+                })
+                .datum(format);
+
+            // add titles to day rectangles
+            rect.append("title")
+                .text(function (d) {
+                    return d;
+                });
+
+            // find the months and outline them
+            var month = svg.selectAll(".month")
+                .data(function (d) {
+                    return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1));
+                })
+                .enter().append("path")
+                .attr("class", "month")
+                .attr("d", monthPath);
+
+            // add labels for each month
+            svg.selectAll(".monthText")
+                .data(function (d) {
+                    return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1));
+                })
+                .enter()
+                .append("text")
+                .attr("x", function (d) {
+                    return (week(d) * cellSize) + (cellSize * 2.8);
+                })
+                .attr("y", function (d) {
+                    return -2.5;
+                })
+                .style("text-anchor", "middle")
+                .text(function (d) {
+                    return month_format(d);
+                });
+
+            return {
+                svg: svg,
+                day: day,
+                month: month,
+                rect: rect
+            };
+        };
+
+        // calculate the path to surround the days of the month
+        var monthPath = function monthPath(t0) {
+            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";
+        };
+
+        var addDataToCalendar = function addDataToCalendar(rect, data) {
+            rect
+                .filter(function (d) {
+                    return d in data;
+                })
+                .attr("class", function (d) {
+                    return "day " + (data[d] > 0 ? 'q9-11' : '');
+                })
+                .select("title")
+                .text(function (d) {
+                    return d + ": " + data[d] + " audio recordings";
+                });
+        };
+
         return {
             restrict: "EA",
             scope: {
                 data: "="
             },
             templateUrl: "d3Bindings/calendarView/calenderViewTemplate.tpl.html",
-            link: function($scope, $element, attributes, controller, transcludeFunction) {
+            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)
@@ -20,117 +178,14 @@ angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
 
                 // d3.doSomething
 
-                // private properties - globals, formatters, magic numbers
-                var day = null,
-                    week = null,
-                    format = null,
-                    month_format = null,
-                    width = 960,
-                    height = 136,
-                    cellSize = 17, // cell size
-                    minYear = 2007,
-                    firstYear = null, //new Date().getFullYear(),
-                    lastYear = null, //2007
-                    colourDomain = [0, 100],//domain is input values, usually x
-                    colourRangeStart = 0, // range is output values, usually y
-                    colourRangeStop = 10,
-                    colourRangeStep = 1,
-                    defaultSelection = [
-                        {name: '-- Everything --', id: null}
-                    ];
-
-                var createSvgCalendarView = function createSvgCalendarView(firstYear, lastYear) {
-
-                    // create svg and year rows
-                    var svg = d3.select("#audioRecordingCalendar").selectAll("svg")
-                        .data(d3.range(firstYear, lastYear - 1, -1)) // subtract one due to exclusive end bound
-                        .enter().append("svg")
-                        .attr("width", width)
-                        .attr("height", height)
-                        .attr("class", "RdYlGn")
-                        .append("g")
-                        .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
-
-                    // add year label to left end
-                    svg.append("text")
-                        .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
-                        .style("text-anchor", "middle")
-                        .text(function (d) {
-                            return d;
-                        });
-
-                    // create day rectangles
-                    var rect = svg.selectAll(".day")
-                        .data(function (d) {
-                            return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
-                        })
-                        .enter().append("rect")
-                        .attr("class", "day")
-                        .attr("width", cellSize)
-                        .attr("height", cellSize)
-                        .attr("x", function (d) {
-                            return week(d) * cellSize;
-                        })
-                        .attr("y", function (d) {
-                            return day(d) * cellSize;
-                        })
-                        .datum(format);
-
-                    // add titles to day rectangles
-                    rect.append("title")
-                        .text(function (d) {
-                            return d;
-                        });
-
-                    // find the months and outline them
-                    var month = svg.selectAll(".month")
-                        .data(function (d) {
-                            return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1));
-                        })
-                        .enter().append("path")
-                        .attr("class", "month")
-                        .attr("d", monthPath);
-
-                    // add labels for each month
-                    svg.selectAll(".monthText")
-                        .data(function (d) {
-                            return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1));
-                        })
-                        .enter()
-                        .append("text")
-                        .attr("x", function (d) {
-                            return (week(d) * cellSize) + (cellSize * 2.8);
-                        })
-                        .attr("y", function (d) {
-                            return -2.5;
-                        })
-                        .style("text-anchor", "middle")
-                        .text(function (d) {
-                            return month_format(d);
-                        });
-
-                    return {
-                        svg: svg,
-                        day: day,
-                        month: month,
-                        rect: rect
-                    };
-                };
-
-                // calculate the path to surround the days of the month
-                var monthPath = function monthPath(t0) {
-                    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";
-                };
-
-                createSvgCalendarView(2007, 2014);
 
+
+                // watch for changes on scope data
+                $scope.$watch(function() { return $scope.data; }, function (newValue, oldValue) {
+                    if (newValue) {
+                        updateCatalogueData(newValue.data);
+                    }
+                });
             },
             controller: "bawCalendarViewController"
         }
@@ -146,5 +201,4 @@ angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
             // IT SHOULD NOT contain any reference to the d3 or jQuery objects
 
             $scope.example = "Hello world!";
-
         }]);

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

@@ -1,11 +1 @@
-<b>I'm a fancy graph</b>
-        <div>
-            {{example}}
-        </div>
-<ol ng-repeat="dataPoint in data">
-    <li>{{dataPoint}}</li>
-</ol>
-
-<div id="audioRecordingCalendar"></div>
-
-        {{filteredAudioRecordings}}
+<div id="audioRecordingCalendar" style="height:1100px;"></div>

src/app/d3Bindings/d3TestPage.js

@@ -3,7 +3,7 @@ var bawD3 = bawD3 || angular.module("bawApp.d3", []);
 bawD3.controller('D3TestPageCtrl', ['$scope', 'conf.paths', '$http', function ($scope, paths, $http) {
 
     // use the REST API in here
-    // assign the resulting data to scope (not great but it will do for now
+    // 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;

src/app/d3Bindings/d3TestPage.tpl.html

@@ -3,6 +3,6 @@ <h1>D3 Play area</h1>
 
     <h2>Calendar view</h2>
     <div>
-        <baw-calendar-view data="basicData"></baw-calendar-view>
+        <baw-calendar-view data="filteredAudioRecordings"></baw-calendar-view>
     </div>
 </div>