From 3bc69dc047664d4cbc1bcc813d99ade4e7e634f0 Mon Sep 17 00:00:00 2001
From: Nathan Chapman <contact@nathanjchapman.com>
Date: Wed, 28 Jul 2021 20:40:10 -0600
Subject: [PATCH] Basic pie chart beginnings

---
 board/templates/board/employee_list.html |  6 ++++
 static/styles/main.css                   | 35 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/board/templates/board/employee_list.html b/board/templates/board/employee_list.html
index 13f37a0..3513193 100644
--- a/board/templates/board/employee_list.html
+++ b/board/templates/board/employee_list.html
@@ -11,6 +11,12 @@
             <small>Hire date: {{employee.hire_date|date:"SHORT_DATE_FORMAT"}}</small><br>
             <small>Department: {{employee.department}}</small>
         </p>
+        <div class="pie_chart" type="pie" percent="0%">
+            <svg viewBox="0 0 64 64">
+                <circle class="pie" r="32" cx="32" cy="32" style="stroke-width: 64;"></circle>
+                <circle class="slice" r="32" cx="32" cy="32" style="stroke-width: 64;stroke-dasharray: 0 201.06192982974676;"></circle>
+            </svg>
+        </div>
         {% endfor %}
     </section>
     <section>
diff --git a/static/styles/main.css b/static/styles/main.css
index 0e037c5..ba45dc2 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -3,6 +3,7 @@
     --black: #393d3f;
     --grey: #a7b4bb;
     --blue: #10638c;
+    --light-blue: #74c0e6;
     --red: #8c1016;
 }
 
@@ -342,4 +343,38 @@ hgroup {
     grid-template-columns: 0.25fr 2fr 0.25fr;
     column-gap: 0.5rem;
     margin-bottom: 1rem;
+}
+
+
+
+
+
+.pie_chart {
+    display: inline-block;
+    width: 1.125em;
+    height: 1.125em;
+}
+
+
+circle.pie {
+    fill: rgba(255,255,255,0);
+    stroke: var(--light-blue);
+}
+
+circle.slice {
+    fill: rgba(255,255,255,0);
+    stroke: var(--blue);
+}
+
+svg {
+    border-radius: 50%;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+svg:not(:root) {
+    overflow: hidden;
 }
\ No newline at end of file