Skip to content

Instantly share code, notes, and snippets.

@kneerunjun

kneerunjun/01ratingcontrol.html

Last active January 3, 2016 10:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kneerunjun/41ce31c9ca2738e50e94 to your computer and use it in GitHub Desktop.
Save kneerunjun/41ce31c9ca2738e50e94 to your computer and use it in GitHub Desktop.
Download ZIP
quick rating control for feedback activity
Raw
01ratingcontrol.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demostraiton for the rating control</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/d3/d3.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<!-- this is the manifestation of the plot -->
<rating-plot rating-of="utility" on-rating-changed="ratingChangedTo(value)"></rating-plot>
</body>
</html>
Raw
02ratingcontrol.js
(function(){
var mainApp = angular.module("mainApp", [])
.directive("ratingPlot", function(){
return{
restrict:"E",
scope: {
onRatingChanged: "&",
ratingOf:"@"
},
link: function (scope, elem, attrs) {
/*these are the set of ratings that would appear on scale*/
var ratings = ["Awful", "Poor", "OK", "Nice", "Awesome"];
/*boundaries of the complere geomerical layout*/
/*these boundaries can be scoped and bound to the isolated scopes as and when requried*/
var maxHeight = 80;
var maxWidth = 300;
var svgSelector = "svg." + scope.ratingOf;//this is used for the identification of the svg
//there are multiple controls of the same nature so to avoid confusion
var svg = d3.select(elem[0]).append("svg").attr({
"class":scope.ratingOf,
width: maxWidth,
height: maxHeight
}).style("background", "none").style("border", "none #e67e22 thin");
/*this defines the boundary within which you have to define the entire plot*/
var xExtent = [25, maxWidth - 35];
var yExtent = [10, maxHeight - 20];
/*defining the scales of the plot*/
var x = d3.scale.ordinal().domain(ratings).rangePoints(xExtent);
/*drawing the axes for the xscale*/
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).tickSize(0);
svg.append("g").attr({
"class": "x-axis",
//transform: "translate(0," + yExtent[1] + ")"
}).call(xAxis);
//we dont need the path for the axis
d3.select(svgSelector+" .x-axis path").style("stroke", "none");
scope.$watch("selRating", function (newValue, oldValue) {
if (newValue != null) {
/*this where i reset all the styling for the selected element */
/*als0 remove the colored rectangle that was drawn*/
d3.select(svgSelector+ " .filler").remove();
d3.selectAll(svgSelector+ " .x-axis .tick text")
.style("text-decoration", "").style("fill", "#ecf0f1").style("stroke-width", "0.5px");
//draw the colored rect to this limit ..
svg.append("rect")
.attr({
"class": "filler",
x: 0,
y: yExtent[1] / 2,
width: x(ratings[oldValue]),
height: 20
}).style("stroke", "none").style("stroke-width", "0px").style("fill", "#5bc0de")
.transition().duration(750)
.attr({
width: x(ratings[newValue])
});
/*styling the specific rectangle*/
d3.selectAll(svgSelector+ " .x-axis .tick text").filter(function (d, i) {
return i == newValue
}).style("text-decoration", "underline").style("fill", "#5bc0de").style("stroke-width", "1px");
scope.onRatingChanged({value:newValue});
}
});
d3.selectAll(svgSelector+ " .x-axis .tick text").attr("class", "clickable").on("click", function (text, index) {
scope.selRating = index;
scope.$apply();/*this is when scoped selRating is changed outside the purview angular we need to call the $apply()*/
});
svg.append("rect").attr({
x: 0, y: yExtent[1] / 2,
width: x(ratings[ratings.length-1]), height: 20
}).style("stroke", "#95a5a6").style("stroke-width", "0.5px").style("fill", "none");
scope.selRating = 2;
}
}
})
})();//this is an immediately invoked function expression
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment