Add teacher quest pie chart

codecombat · Mar 20, 2017 · 3b8f21c · 3b8f21c
1 parent 5554be2
commit 3b8f21c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/app/styles/courses/teacher-classes-view.sass b/app/styles/courses/teacher-classes-view.sass
@@ -128,6 +128,9 @@
     border: 1px solid gray
     margin: 20px 80px 40px 80px
     padding: 10px
+    .quest-progress
+      font-size: 50px
+      margin: 20px 0px
     .quests-summary-col
     .quests-list-col
       .quest-complete
@@ -140,3 +143,12 @@
       color: black
       margin-right: 1rem
       text-decoration: underline
+    .el
+      svg
+        transform: rotate(-90deg)
+        circle.top
+          fill: rgb(242, 190, 24)
+          stroke-width: 50
+          stroke: rgb(14,75,96)
+        circle.bottom
+          fill: rgb(242, 190, 24)
diff --git a/app/templates/courses/teacher-classes-view.jade b/app/templates/courses/teacher-classes-view.jade
@@ -150,8 +150,15 @@ mixin teacher-quests
   .teacher-quests
     .row
       .col-sm-3.quests-summary-col
-        h1.center #{percentComplete}%
-        .center TODO: pie chart
+        .quest-progress.center #{percentComplete}%
+        .center
+          .el
+            - var height = 100;
+            svg(width=height, height=height)
+              - var radius = height / 2;
+              - var fullCircleStroke = 2*Math.PI*radius / 2
+              circle.bottom(r=radius,cx=radius,cy=radius)
+              circle.top(r=radius / 2,cx=radius,cy=radius,style="stroke-dasharray: #{fullCircleStroke/100*percentComplete} #{fullCircleStroke}")
         .center Teacher Quests
       .col-sm-9.quests-list-col
         strong.center Keep going! Here's what you can do next: