From 89e448deafd9a84e245a09edbdd07ff67a0b7c9a Mon Sep 17 00:00:00 2001 From: Robin Yang Date: Wed, 21 Sep 2016 13:45:41 -0700 Subject: [PATCH] Hide/Show Courses based on dropdown selector --- app/styles/teachers/teacher-student-view.sass | 26 +++-- .../teachers/teacher-student-view.jade | 27 +++-- app/views/teachers/TeacherStudentView.coffee | 105 +++++++++++++++--- 3 files changed, 126 insertions(+), 32 deletions(-) diff --git a/app/styles/teachers/teacher-student-view.sass b/app/styles/teachers/teacher-student-view.sass index ed1d13e58..6890a6101 100644 --- a/app/styles/teachers/teacher-student-view.sass +++ b/app/styles/teachers/teacher-student-view.sass @@ -60,13 +60,23 @@ .tooltip-arrow border-top-color: $navy -svg[id|="visualisation"] - // background-color: $navy - text.label - font-size: 10px - fill: #000000 - font-weight: bold - .domain - // fill: $navy + svg[id|="visualisation"] + // background-color: $navy + display: none + + text.label + font-size: 10px + fill: #000000 + font-weight: bold + + .domain + // fill: $navy + + .graphs :first-child + display: block + + .graphsSelector + text-align: center + margin-bottom: 15px diff --git a/app/templates/teachers/teacher-student-view.jade b/app/templates/teachers/teacher-student-view.jade index a98af331c..17060093c 100644 --- a/app/templates/teachers/teacher-student-view.jade +++ b/app/templates/teachers/teacher-student-view.jade @@ -39,13 +39,26 @@ block content //- //- svg#visualisation(width="1000", height="520") //- - each versionedCourse in view.classroom.get('courses') || [] - - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;}); - if !course - - continue; - - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id }) - - if ((instance && instance.hasMember(view.user))) - svg(id='visualisation-'+versionedCourse._id, width="1000", height="520") + + .graphsSelector + span View Playtime: + select#course-dropdown.text-navy + each versionedCourse in view.classroom.get('courses') || [] + - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;}); + if !course + - continue; + - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id }) + - if ((instance && instance.hasMember(view.user))) + option(value=course.id)=course.get('name') + + .graphs + each versionedCourse in view.classroom.get('courses') || [] + - var course = _.find(view.courses.models, function(c) {return c.id === versionedCourse._id;}); + if !course + - continue; + - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: view.classroom.id }) + - if ((instance && instance.hasMember(view.user))) + svg(id='visualisation-'+versionedCourse._id, width="1142", height="600") //- - console.log (view.levelData[1].levelIndex) diff --git a/app/views/teachers/TeacherStudentView.coffee b/app/views/teachers/TeacherStudentView.coffee index 452ec1222..06853ccae 100644 --- a/app/views/teachers/TeacherStudentView.coffee +++ b/app/views/teachers/TeacherStudentView.coffee @@ -23,8 +23,11 @@ module.exports = class TeacherStudentView extends RootView template: require 'templates/teachers/teacher-student-view' # helper: helper events: - 'click .assign-student-button': 'onClickAssignStudentButton' + 'click .assign-student-button': 'onClickAssignStudentButton' # this button isn't working yet 'click .enroll-student-button': 'onClickEnrollStudentButton' # this button isn't working yet + 'change #course-dropdown': 'onChangeCourseChart' + + getTitle: -> return @user?.broadName() @@ -81,16 +84,29 @@ module.exports = class TeacherStudentView extends RootView # @drawLineGraph() @drawBarGraph() + @onChangeCourseChart() + + + onChangeCourseChart: (e)-> + # show() the one that's selected + # console.log ((e.currentTarget).value) + if (e) + selected = ('#visualisation-'+((e.currentTarget).value)) + $("[id|='visualisation']").hide() + $(selected).show() + + + # hide() all the others drawBarGraph: -> return unless @courses.loaded and @levels.loaded and @sessions?.loaded and @levelData - WIDTH = 1000 - HEIGHT = 500 + WIDTH = 1142 + HEIGHT = 600 MARGINS = { - top: 20 + top: 50 right: 20 - bottom: 20 + bottom: 50 left: 50 } @@ -102,14 +118,18 @@ module.exports = class TeacherStudentView extends RootView courseLevelData = [] for level in @levelData when level.courseID is versionedCourse._id courseLevelData.push level + #TODO exclude practice levels from this graph. + + # console.log (courseLevelData) course = _.find @courses.models, (c) => c.id is versionedCourse._id levels = @classroom.getLevels({courseID: course.id}).models # console.log (levels) + + xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(courseLevelData.map( (d) -> d.levelIndex)) - # console.log (courseLevelData.map( (d) -> d.levelIndex)) yRange = d3.scale.linear().range([HEIGHT - (MARGINS.top), MARGINS.bottom]).domain([0, d3.max(courseLevelData, (d) -> d.class)]) xAxis = d3.svg.axis().scale(xRange).tickSize(2).tickSubdivide(true) yAxis = d3.svg.axis().scale(yRange).tickSize(2).orient('left').tickSubdivide(true) @@ -117,8 +137,6 @@ module.exports = class TeacherStudentView extends RootView vis.append('svg:g').attr('class', 'x axis').attr('transform', 'translate(0,' + (HEIGHT - (MARGINS.bottom)) + ')').call xAxis vis.append('svg:g').attr('class', 'y axis').attr('transform', 'translate(' + MARGINS.left + ',0)').call yAxis - - chart = vis.selectAll('rect') .data(courseLevelData) .enter() @@ -133,7 +151,7 @@ module.exports = class TeacherStudentView extends RootView chart.append('text') .attr('x', ((d) -> xRange(d.levelIndex) + (xRange.rangeBand())/2)) .attr('y', ((d) -> yRange(d.class) - 3 )) - .text((d)->d.class) # can't seem to get rid of "0" values with coffeescript if/then + .text((d)-> if d.class isnt 0 then d.class) .attr('class', 'label') chart.append('rect') @@ -147,15 +165,65 @@ module.exports = class TeacherStudentView extends RootView chart.append('text') .attr('x', ((d) -> xRange(d.levelIndex)) ) .attr('y', ((d) -> yRange(d.student) - 3 )) - .text((d)->d.student) # can't seem to get rid of "0" values with coffeescript if/then + .text((d)-> if d.student isnt 0 then d.student) .attr('class', 'label') + # + # vis.append("text") + # .attr("x", (WIDTH / 2)) + # .attr("y", 20) + # .attr("text-anchor", "middle") + # .style("font-size", "16px") + # .text(course.get('name')) - vis.append("text") - .attr("x", (WIDTH / 2)) - .attr("y", 20) - .attr("text-anchor", "middle") - .style("font-size", "16px") - .text(course.get('name')) + + legend = vis.append("g") + .attr("class", "legend") + .attr("x", WIDTH - 20) + .attr("width", 100) + .attr("height", 100) + + legend.append("rect") + .attr("x", WIDTH - 18) + .attr("width", 18) + .attr("height", 18) + .style("fill", "#20572B") + + legend.append("text") + .attr("x", WIDTH - 24) + .attr("y", 9) + .attr("dy", ".35em") + .style("text-anchor", "end") + .text("Student Playtime") + + legend.append("rect") + .attr("x", WIDTH - 18) + .attr("y", 25) + .attr("width", 18) + .attr("height", 18) + .style("fill", "#5CB4D0") + + legend.append("text") + .attr("x", WIDTH - 24) + .attr("y", 30) + .attr("dy", ".55em") + .style("text-anchor", "end") + .text("Class Average") + + labels = vis.append("g") + + labels.append("text") + .attr("transform", "rotate(-90)") + .attr("y", 60) + .attr("x", -20) + .attr("dy", ".71em") + .style("text-anchor", "end") + .text("Playtime in Seconds") + + labels.append("text") + .attr("x", WIDTH/2) + .attr("y", HEIGHT - 10) + .text("Levels in " + (course.get('name'))) + .style("text-anchor", "middle") drawLineGraph: -> @@ -397,6 +465,7 @@ module.exports = class TeacherStudentView extends RootView class: classAvg student: @studentTime levelProgress: @levelProgress + # required: } # console.log (@levelData) @@ -437,7 +506,9 @@ module.exports = class TeacherStudentView extends RootView if user user.set(newUser.attributes) null - # + + + # onLoaded: -> # console.log("on loaded") # for courseInstance in @courseInstances.models