Got grade overview graph drawing

--HG--
branch : profiledev

profile.html

@@ -100,45 +100,126 @@ $(function() {
     <section class="course-info">
       <h1>Course Progress</h1>
     
-    <div id="homework-detail-graph" style="width:550px;height:200px;"></div>
+    <div id="homework-detail-graph" style="width:650px;height:200px;"></div>
+    <br/>
+    <br/>
+    <div id="grade-overview-graph" style="width:650px;height:150px;"></div>
     
-    <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.min.js"></script>
+    <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.js"></script>
     <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
     <script language="javascript" type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.symbol.js"></script>
     <script>
     $(function () {
-      var ticks = [];
-      var tooltips = {};
-      var homeworkData = ${ json.dumps( [[i + 1, score['percentage']] for i,score in enumerate(homework_percentages)] ) };
-      tooltips["Homework"] = ${ json.dumps( ["Homework {} - {}".format(str(i + 1), score['summary']) for i,score in enumerate(homework_percentages)] ) };
-      ticks = ticks.concat( ${ json.dumps( [[i + 1, str(i + 1)] for i,score in enumerate(homework_percentages)] ) } );
+      var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")];
+      var series = [];
+      var ticks = []; //These are the indices and x-axis labels for the data
+      var bottomTicks = []; //Labels on the bottom
+      var tooltips = {}; //This an dictionary mapping from 'section' -> array of tooltips
+      var droppedScores = []; //These are the datapoints to indicate assignments which aren't factored into the total score
+      tooltips['Dropped Scores'] = [];
+      <%
+      tickIndex = 1
+      sectionSpacer = 0.5
+      sectionIndex = 0
+      %>
+      %for section in grade_summary:
+        %if 'subscores' in section: ##This is for sections like labs or homeworks, with several smaller components and a total
+          series.push({label: "${section['category']}",
+            data: ${ json.dumps( [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])] ) },
+            color: colors[${sectionIndex}].toString(),
+          });
+          ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, str(i + 1)] for i,score in enumerate(section['subscores'])] ) } );
+          bottomTicks.push( [ ${tickIndex + len(section['subscores'])/2}, "${section['category']}" ] );
+          tooltips["${section['category']}"] = ${ json.dumps([score['summary'] for score in section['subscores']]  ) };
+          
+          droppedScores = droppedScores.concat(${ json.dumps( [[tickIndex + index, 0.05] for index in section['dropped_indices']]) });
+          <% dropExplanation = "The lowest {} {} scores are dropped".format( len(section['dropped_indices']), section['category'] ) %>
+          tooltips['Dropped Scores'] = tooltips['Dropped Scores'].concat( ${json.dumps( [dropExplanation] * len(section['dropped_indices']) )} );
+          
+          <% tickIndex += len(section['subscores']) + sectionSpacer %>
+          
+          ##Now put on the aggregate score
+          series.push({label: "${section['category']} Total",
+            data: [[${tickIndex}, ${section['totalscore']['score']}]],
+            color: colors[${sectionIndex}].toString(),
+          });
+          ticks = ticks.concat( [ [${tickIndex}, "Total"] ] );
+          tooltips["${section['category']} Total"] = [ "${section['totalscore']['summary']}" ];
+          <% tickIndex += 1 + sectionSpacer %>
+          
+        %else: ##This is for sections like midterm or final, which have no smaller components
+          series.push({label: "${section['category']}",
+            data: [[${tickIndex}, ${section['totalscore']['score']}]],
+            color: colors[${sectionIndex}].toString(),
+          });
+          %if section['category'] == "Midterm":
+          bottomTicks = bottomTicks.concat( [ [${tickIndex}, "${section['category']}"] ] );
+          %else:
+          ticks = ticks.concat( [ [${tickIndex}, "${section['category']}"] ] );
+          %endif
+          
+          tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
+
+          <% tickIndex += 1 + sectionSpacer %>
+        %endif
+        <%sectionIndex += 1 %>
+      %endfor
       
-      var labData = ${ json.dumps( [[i + 13, score['percentage'], score['summary']] for i,score in enumerate(lab_percentages)] ) };
-      ticks = ticks.concat( ${ json.dumps( [[i + 13, str(i + 1)] for i,score in enumerate(lab_percentages)] ) } );
+      //Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
+      series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red", xaxis: 2} );
       
-      var droppedScores = ${ json.dumps( [[1 + index, 0.05] for index in homework_dropped_indices] +  [[13 + index, 0.05] for index in homework_dropped_indices]) };
-      //var midtermData = ${ json.dumps( [ [i + 25, ] ] ) };
-      
-      var data = [
-        {label: 'Homework Total', data: [ [0.5, ${homework_total} ] ], bars: {barWidth: 12, align: 'left'} },
-        {label: 'Homework', data: homeworkData, color: 0},
-        {label: 'Lab Total', data: [ [12.5, ${lab_total} ]], bars: {barWidth: 12, align: 'left'}},
-        {label: 'Labs', data: labData, color: 1},
-        {label: 'Midterm', data: [[25,0.87]], color: 2},
-        {label: 'Final', data: [[26,0.65]], color: 3},
-        {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false} },
-      ];
       var options = {
         series: {lines: {show: false, steps: false },
         bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},},
-        xaxis: {ticks: ticks, tickLength: 0},
+        xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}},
+        xaxes: [{ticks: ticks}, {ticks: bottomTicks}],
         yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50},
         grid: { hoverable: true, clickable: true, borderWidth: 1,
-        markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#FFF2E3"}, {yaxis: {from: 0.6, to: 0.7 }, color: "#E6FFFF"}, ] },
+          markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#E6FFFF"}, 
+                      {yaxis: {from: 0.6, to: 0.7 }, color: "#FFF2E3"}, ] },
         legend: {show: false},
       };
 
-      $.plot($("#homework-detail-graph"), data, options);
+      $.plot($("#homework-detail-graph"), series, options);
+      
+      
+      series = []
+      ticks = []
+      var markings = []
+      <%
+      totalWeight = 0.0
+      sectionIndex = 0
+      %>
+      %for section in grade_summary:
+        series.push({label: "${section['category']}",
+          data: [[${section['totalscore']['score'] * section['weight']}, 1]],
+          color: colors[${sectionIndex}].toString(), });
+        
+          ticks.push( [${totalWeight + section['weight'] * 0.5}, "${'{} - {:.0%}'.format(section['category'], section['weight'])}" ] );
+          
+          markings.push({xaxis: {from: ${totalWeight}, to: ${totalWeight + section['weight']} }, color:colors[${sectionIndex}].scale("a", 0.3).toString() });
+        <%
+        sectionIndex += 1
+        totalWeight += section['weight']
+        %>
+      %endfor
+      
+      //Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
+      series.push({label: "Total", data: [[0.9, 1]], points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red", xaxis: 2});
+      
+      options = {
+          series: {stack: 0,
+                   lines: {show: false, steps: false },
+                   bars: {show: true, barWidth: 1, align: 'center', horizontal: true, linewidth: 0, fill:1},},
+          xaxis: {min: 0.0, max: 1.0},
+          yaxis: {min: 0.0, max: 2.0, ticks: []},
+          xaxes: [ {ticks: [[0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"]], position: top}, 
+                    {ticks: ticks }],
+          grid: { markings: markings, hoverable: true, clickable: true, borderWidth: 1},
+          legend: {show: false},
+      };
+
+      $.plot($("#grade-overview-graph"), series, options);
       
       
       function showTooltip(x, y, contents) {
@@ -150,7 +231,7 @@ $(function() {
           border: '1px solid #fdd',
           padding: '2px',
           'background-color': '#fee',
-          opacity: 0.80
+          opacity: 0.90
         }).appendTo("body").fadeIn(200);
       }
       
@@ -162,10 +243,9 @@ $(function() {
           if (previousPoint != item.dataIndex) {
             previousPoint = item.dataIndex;
             
-            
             $("#tooltip").remove();
+            
             if (item.series.label in tooltips) {
-
               var series_tooltips = tooltips[item.series.label];
               if (item.dataIndex < series_tooltips.length) {
                 var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);