Skip to content

Commit

Permalink
added project list route; dumped in all of d3 js calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
cofiem authored and atruskie committed Oct 31, 2014
1 parent 25fddf4 commit ba8cd96
Show file tree
Hide file tree
Showing 9 changed files with 195 additions and 47 deletions.
5 changes: 0 additions & 5 deletions src/app/d3Bindings/caelndarView/_calendarView.scss

This file was deleted.

37 changes: 0 additions & 37 deletions src/app/d3Bindings/caelndarView/calendarView.js

This file was deleted.

33 changes: 33 additions & 0 deletions src/app/d3Bindings/calendarView/_calendarView.scss
Original file line number Diff line number Diff line change
@@ -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)}
150 changes: 150 additions & 0 deletions src/app/d3Bindings/calendarView/calendarView.js
Original file line number Diff line number Diff line change
@@ -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!";

}]);
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@
</div>
<ol ng-repeat="dataPoint in data">
<li>{{dataPoint}}</li>
</ol>
</ol>

<div id="audioRecordingCalendar"></div>
4 changes: 2 additions & 2 deletions src/app/listen/listen.js
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
// get project
Project.get({projectId: id}, {}, function getProjectSuccess(value) {

value.link = paths.api.routes.projectAbsolute.format({"projectId": value.id});
value.link = paths.api.routes.project.showAbsolute.format({"projectId": value.id});

$scope.model.projects[index] = value;
result.projects[index] = value;
Expand All @@ -254,7 +254,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
permissions: "access denied"
};

denied.link = paths.api.routes.projectAbsolute.format({"projectId": denied.id});
denied.link = paths.api.routes.project.showAbsolute.format({"projectId": denied.id});

$scope.model.projects[index] = denied;
result.projects[index] = denied;
Expand Down
6 changes: 5 additions & 1 deletion src/baw.configuration.tpl.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,12 @@ angular.module('bawApp.configuration', ['url'])
api: {
root: "<%= current.apiRoot %>",
routes: {
project: "/projects/{projectId}",
project: {
list: "/projects/",
show: "/projects/{projectId}"
},
site: {
list: "projects/{projectId}/sites/",
flattened: "/sites/{siteId}",
nested: "/projects/{projectId}/sites/{siteId}",
filter: "/sites/filter"
Expand Down
1 change: 1 addition & 0 deletions src/components/services/services.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@

var bawss = bawss || angular.module("bawApp.services", ["ngResource", "bawApp.configuration", "bawApp.vendorServices", "bawApp.services.queryBuilder"]);


bawss.factory('Project', [ '$resource', "$http", 'conf.paths', "QueryBuilder", function ($resource, $http, paths, QueryBuilder) {
var resource = resourcePut($resource, uriConvert(paths.api.routes.projectAbsolute), {projectId: "@projectId"});

Expand Down
2 changes: 1 addition & 1 deletion src/sass/application.tpl.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,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/d3Bindings/calendarView/calendarView";
@import "../app/home/home";
@import "../app/listen/listen";
@import "../app/login/login_control";
Expand Down

0 comments on commit ba8cd96

Please sign in to comment.