From 3b8f21ca9eac0c2c94273d05b63b71f9e946e463 Mon Sep 17 00:00:00 2001
From: Matt Lott <mattlott@live.com>
Date: Mon, 20 Mar 2017 12:22:10 -0700
Subject: [PATCH] Add teacher quest pie chart

---
 app/styles/courses/teacher-classes-view.sass    | 12 ++++++++++++
 app/templates/courses/teacher-classes-view.jade | 11 +++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/styles/courses/teacher-classes-view.sass b/app/styles/courses/teacher-classes-view.sass
index c6f6932f4cb..1f78b4bb6bc 100644
--- 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
index c51dcaaba94..e02b7ff9105 100644
--- 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: