diff --git a/src/app/d3Bindings/caelndarView/_calendarView.scss b/src/app/d3Bindings/caelndarView/_calendarView.scss deleted file mode 100644 index c7301ce8..00000000 --- a/src/app/d3Bindings/caelndarView/_calendarView.scss +++ /dev/null @@ -1,5 +0,0 @@ -baw-calendar-view { - li { - color: darkgreen; - } -} \ No newline at end of file diff --git a/src/app/d3Bindings/caelndarView/calendarView.js b/src/app/d3Bindings/caelndarView/calendarView.js deleted file mode 100644 index f59b0f5f..00000000 --- a/src/app/d3Bindings/caelndarView/calendarView.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * 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!"; - - }]); \ No newline at end of file diff --git a/src/app/d3Bindings/calendarView/_calendarView.scss b/src/app/d3Bindings/calendarView/_calendarView.scss new file mode 100644 index 00000000..a0a0615e --- /dev/null +++ b/src/app/d3Bindings/calendarView/_calendarView.scss @@ -0,0 +1,33 @@ +baw-calendar-view { + li { + color: darkgreen; + } +} + +#audioRecordingCalendar { + font: 10px sans-serif; + shape-rendering: crispEdges; +} + +#audioRecordingCalendar .day { + fill: #fff; + stroke: #ccc; +} + +#audioRecordingCalendar .month { + fill: none; + stroke: #000; + stroke-width: 2px; +} + +#audioRecordingCalendar .RdYlGn .q0-11{fill:rgb(165,0,38)} +#audioRecordingCalendar .RdYlGn .q1-11{fill:rgb(215,48,39)} +#audioRecordingCalendar .RdYlGn .q2-11{fill:rgb(244,109,67)} +#audioRecordingCalendar .RdYlGn .q3-11{fill:rgb(253,174,97)} +#audioRecordingCalendar .RdYlGn .q4-11{fill:rgb(254,224,139)} +#audioRecordingCalendar .RdYlGn .q5-11{fill:rgb(255,255,191)} +#audioRecordingCalendar .RdYlGn .q6-11{fill:rgb(217,239,139)} +#audioRecordingCalendar .RdYlGn .q7-11{fill:rgb(166,217,106)} +#audioRecordingCalendar .RdYlGn .q8-11{fill:rgb(102,189,99)} +#audioRecordingCalendar .RdYlGn .q9-11{fill:rgb(26,152,80)} +#audioRecordingCalendar .RdYlGn .q10-11{fill:rgb(0,104,55)} \ No newline at end of file diff --git a/src/app/d3Bindings/calendarView/calendarView.js b/src/app/d3Bindings/calendarView/calendarView.js new file mode 100644 index 00000000..5ba8ccc2 --- /dev/null +++ b/src/app/d3Bindings/calendarView/calendarView.js @@ -0,0 +1,150 @@ +/** + * 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/calendarView/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 + + // 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); + + }, + 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!"; + + }]); \ No newline at end of file diff --git a/src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html b/src/app/d3Bindings/calendarView/calenderViewTemplate.tpl.html similarity index 75% rename from src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html rename to src/app/d3Bindings/calendarView/calenderViewTemplate.tpl.html index bc8a31a9..a8a5a0ae 100644 --- a/src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html +++ b/src/app/d3Bindings/calendarView/calenderViewTemplate.tpl.html @@ -4,4 +4,6 @@