From 0deffdff9e405673695e7555d2d0143e6c626fd5 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 20 Sep 2018 16:02:53 +0100
Subject: [PATCH] Added vector icons with current score overlayed.

---
 frontend/src/assets/Conservatism.svg |  53 +++++++++++
 frontend/src/assets/Control.svg      |  53 +++++++++++
 frontend/src/assets/Knowledge.svg    |  53 +++++++++++
 frontend/src/assets/Monitoring.svg   |  53 +++++++++++
 frontend/src/assets/Teamwork.svg     |  53 +++++++++++
 frontend/src/views/Observation.vue   | 136 ++++++++++++++++++++++++---
 6 files changed, 390 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/assets/Conservatism.svg
 create mode 100644 frontend/src/assets/Control.svg
 create mode 100644 frontend/src/assets/Knowledge.svg
 create mode 100644 frontend/src/assets/Monitoring.svg
 create mode 100644 frontend/src/assets/Teamwork.svg

diff --git a/frontend/src/assets/Conservatism.svg b/frontend/src/assets/Conservatism.svg
new file mode 100644
index 0000000..23bee17
--- /dev/null
+++ b/frontend/src/assets/Conservatism.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="94"
+   height="58"
+   version="1.1"
+   id="svg188"
+   sodipodi:docname="Conservatism.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata194">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs192" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview190"
+     showgrid="false"
+     inkscape:zoom="3.3297872"
+     inkscape:cx="47"
+     inkscape:cy="29"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg188" />
+  <path
+     d="M35.456 47c.392-6.05.402-11 .023-11-.38 0-2.027 1.125-3.661 2.5-3.916 3.295-5.939 3.16-13.222-.885-3.353-1.862-7.559-3.697-9.346-4.08-3.817-.815-4.081-1.84-1.027-3.978 2.965-2.077 5.665-1.962 11.373.484l4.763 2.042 5.57-5.428c7.34-7.152 9.441-8.21 12.31-6.2 2.816 1.972 6.706 1.972 9.521 0 2.87-2.01 4.97-.952 12.31 6.2l5.571 5.428 4.763-2.042c5.708-2.446 8.408-2.561 11.373-.484 3.055 2.14 2.79 3.166-1.027 3.962-1.788.373-6.023 2.209-9.412 4.08-7.36 4.061-9.246 4.19-13.156.901-1.634-1.375-3.281-2.5-3.66-2.5-.38 0-.37 4.95.022 11l.713 11H34.743zM1.2 23.8c-.66-.66-1.2-1.56-1.2-2 0-.44 5.4-.8 12-.8s12 .36 12 .8c0 .44-.54 1.34-1.2 2-1.634 1.634-19.966 1.634-21.6 0zm70 0c-.66-.66-1.2-1.56-1.2-2 0-.44 5.4-.8 12-.8s12 .36 12 .8c0 .44-.54 1.34-1.2 2-1.634 1.634-19.966 1.634-21.6 0zm-27.883-5.05c-4.199-6.554-4.565-13.28-.895-16.436 3.398-2.924 5.758-2.924 9.156 0 3.07 2.64 3.468 6.229 1.298 11.686-2.128 5.35-2.765 6-5.876 6-1.585 0-3.242-.563-3.683-1.25z"
+     id="path186"
+     style="fill:#0044aa" />
+</svg>
diff --git a/frontend/src/assets/Control.svg b/frontend/src/assets/Control.svg
new file mode 100644
index 0000000..3552f3e
--- /dev/null
+++ b/frontend/src/assets/Control.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="76"
+   height="77"
+   version="1.1"
+   id="svg129"
+   sodipodi:docname="Control.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata135">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs133" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview131"
+     showgrid="false"
+     inkscape:zoom="3.0649351"
+     inkscape:cx="38"
+     inkscape:cy="38.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg129" />
+  <path
+     d="M7.922 74.726C.592 69.786-2.251 60.253 1.464 53.07c3.464-6.699 12.411-11.026 19.023-9.2 11.949 3.3 16.81 15.974 10.058 26.225-4.555 6.916-15.813 9.222-22.623 4.632zm16.463-3.814c5.79-4.554 7.127-11.346 3.352-17.014C22.71 46.352 13.516 45.3 7.25 51.555 4.361 54.44 4 55.42 4 60.367c0 5.038.335 5.902 3.533 9.1C10.694 72.627 11.63 73 16.398 73c3.893 0 6.049-.564 7.987-2.088zM8.39 67.57C7.65 65.647 8.566 63 9.969 63c.567 0 1.031.675 1.031 1.5s.713 1.5 1.583 1.5c2.346 0 1.116 2.448-1.416 2.82-1.282.189-2.423-.325-2.778-1.25zm11.32.806C18.402 67.068 18.982 66 21 66c1.1 0 1.887-.506 1.75-1.125-.138-.619.347-1.343 1.077-1.609.948-.346 1.234.332 1 2.375-.32 2.799-3.405 4.447-5.118 2.735zM14.68 62.2c-1.512-1.671-1.484-1.924.389-3.528 1.787-1.53 2.188-1.557 3.506-.238 1.232 1.231 1.27 1.84.216 3.527-1.56 2.498-2.041 2.526-4.111.239zm-6.32-5.7c-.957-2.495.428-4.5 3.108-4.5 1.583 0 2.531.562 2.531 1.5 0 .825-.675 1.5-1.5 1.5s-1.5.675-1.5 1.5-.464 1.5-1.031 1.5c-.568 0-1.29-.675-1.607-1.5zM22.5 57c-.34-.55-.254-1.029.191-1.063.445-.035-.28-.499-1.61-1.03-1.71-.684-2.108-1.28-1.357-2.031 1.887-1.887 4.754-.545 5.092 2.383.31 2.68-1.087 3.73-2.316 1.741zm34.19 14.25c-.234-.412-.942-3-1.572-5.75-1.033-4.508-.853-6.075 1.833-15.915 2.56-9.378 2.775-11.069 1.532-12-2.603-1.952.38-9.131 5.465-13.156C66.332 22.543 68.832 21 69.506 21 71.518 21 76 25.018 76 26.821c0 .922-2.099 9.552-4.664 19.178-4.36 16.36-4.928 17.778-8.708 21.751-4.052 4.258-5.14 4.9-5.937 3.5zm4.234-8.474c-3.27-1.21-4.46-.455-2.452 1.553 1.402 1.403 2.027 1.502 3.222.51 1.277-1.06 1.17-1.345-.77-2.063zm4.117-6.026c.616-2.337 2.154-7.969 3.42-12.514 1.266-4.546 2.018-8.421 1.67-8.612-.347-.191-1.787-.623-3.2-.96-2.504-.596-2.63-.376-4.916 8.612-1.29 5.073-2.917 10.884-3.615 12.913-1.124 3.268-1.076 3.74.416 4.134 4.314 1.14 5.105.685 6.225-3.573zm7.381-27.296C73.24 26.195 72.467 25 69.54 25c-1.694 0-2.627.815-3.369 2.94-1.105 3.173-.529 3.834 3.472 3.981 1.494.055 2.334-.69 2.78-2.467zM34.393 64.418c.334-.87.607-1.995.607-2.5 0-.505 4.002-.918 8.893-.918C52.792 61 54 61.488 54 65.082c0 .505-4.548.918-10.107.918-8.805 0-10.029-.204-9.5-1.582zM32.52 50.033C31.057 47.665 33.602 47 44.132 47c9.951 0 10.982.169 10.68 1.75-.29 1.514-1.77 1.788-10.994 2.033-6.563.174-10.905-.114-11.298-.75zM11 23.5c0-18.167.137-19.637 2-21.5 1.886-1.886 3.333-2 25.345-2C66.636 0 65-.806 65 13.129 65 22.512 64.225 25 61.3 25c-.98 0-1.3-2.465-1.3-10.02V4.961l-21.75.27L16.5 5.5l-.274 17.956c-.274 17.999-.578 19.487-3.976 19.529C11.292 42.996 11 38.44 11 23.5zm11.01 12.012c-1.01-1.217-.895-1.61.627-2.152 1.025-.365 2.622-1.315 3.55-2.11 3.139-2.69 4.175-.237 1.208 2.86-3.174 3.313-3.688 3.447-5.385 1.402zM32.5 34c-1.44-2.33 1.142-3 11.559-3C54.333 31 55 31.122 55 33c0 1.878-.667 2-10.941 2-6.215 0-11.208-.432-11.559-1zM22.2 20.8c-1.734-1.734-1.476-2.8.678-2.8 1.032 0 2.437-.675 3.122-1.5 1.321-1.592 4-2.052 4-.687C30 16.67 24.742 22 23.895 22c-.272 0-1.035-.54-1.695-1.2zM32.5 19c-1.44-2.33 1.142-3 11.559-3C54.333 16 55 16.122 55 18c0 1.878-.667 2-10.941 2-6.215 0-11.208-.432-11.559-1z"
+     id="path127"
+     style="fill:#44aa00" />
+</svg>
diff --git a/frontend/src/assets/Knowledge.svg b/frontend/src/assets/Knowledge.svg
new file mode 100644
index 0000000..c9484f3
--- /dev/null
+++ b/frontend/src/assets/Knowledge.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58"
+   height="74"
+   version="1.1"
+   id="svg276"
+   sodipodi:docname="Knowledge.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata282">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs280" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview278"
+     showgrid="false"
+     inkscape:zoom="3.1891892"
+     inkscape:cx="29"
+     inkscape:cy="37"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg276" />
+  <path
+     d="M22.675 73.342c-.362-.362-.156-1.262.456-2 .884-1.065.572-1.342-1.509-1.342C19.99 70 19 69.449 19 68.539c0-1.145 1.895-1.533 8.75-1.794l8.75-.334-8.75-.205C20.73 66.04 19 65.703 19 64.5c0-1.233 1.778-1.5 10-1.5 9.127 0 11.815.76 8.951 2.53-.712.44-.66 1.117.165 2.11.992 1.194.818 1.565-.952 2.027-1.252.328-2.164 1.36-2.164 2.45C35 73.746 34.213 74 29.167 74c-3.209 0-6.13-.296-6.492-.658zM19 60.5c0-1.342 1.43-1.53 9.75-1.286 12.61.37 12.437 2.19-.245 2.572C20.407 62.03 19 61.84 19 60.5zm.667-3.167C19.3 56.967 19 55.651 19 54.41s-1.125-3.594-2.5-5.228C13.697 45.851 13.308 44 15.411 44c2.018 0 6.302 5.419 7.078 8.952.872 3.97-.736 6.467-2.822 4.381zm15.627-3.49c.68-5.068 5.89-11.059 7.884-9.065.945.945.621 1.822-1.485 4.02C40.212 50.344 39 52.336 39 53.223 39 55.992 37.849 58 36.261 58c-1.21 0-1.41-.855-.967-4.157zM26 52.7c0-2.365-.532-4.832-1.183-5.483-1.76-1.76-.311-2.552 2.205-1.205 1.586.848 2.495.87 3.285.08.601-.6 1.768-1.092 2.593-1.092 1.167 0 1.233.267.3 1.2-.66.66-1.2 3.36-1.2 6s-.45 4.8-1 4.8-1-2.025-1-4.5-.45-4.5-1-4.5-1 2.025-1 4.5-.45 4.5-1 4.5-1-1.935-1-4.3zM5.868 40.021C4.29 38.444 3 36.428 3 35.541c0-.886-.641-2.608-1.425-3.826C.654 30.282.174 26.908.215 22.16c.053-5.954.47-7.841 2.213-10 1.182-1.463 2.806-3.697 3.61-4.965 2.036-3.21 12.546-7.416 16.7-6.681 1.78.314 3.693 1.423 4.25 2.463C27.558 4.041 28 12.333 28 21.934c0 21.057.057 20.955-11.577 20.955-7.13 0-7.896-.208-10.555-2.868zm7.671-3.744c-.057-3.976 2.942-4.206 4.293-.328 1.163 3.334 4.506 4.218 5.561 1.47.993-2.589.723-3.082-1.643-2.998-1.369.048-2.25-.509-2.25-1.421 0-.825 1.012-1.944 2.25-2.487 2.06-.904 2.25-1.655 2.25-8.867 0-7.233-.155-7.839-1.89-7.385-1.038.272-2.454.144-3.145-.283C17.134 12.846 18.59 10 21 10c2.792 0 3.798-2.943 1.565-4.576-1.962-1.435-4.62-.863-4.283.92.13.69-1.493 1.28-4.032 1.463-2.338.17-4.25.732-4.25 1.25 0 .519.66.943 1.465.943C13.198 10 15 13.025 15 15.934c0 2.642-2.598 2.685-4 .066-1.361-2.544-4.618-2.581-5.963-.07-.866 1.619-.67 1.983 1.205 2.25 3.163.452 3.342 3.233.297 4.62C5.049 23.48 4 24.786 4 25.964c0 2.004.005 2.004 3.25.025 1.788-1.09 3.965-1.983 4.84-1.985.874-.002 2.096-1.117 2.715-2.476 1.297-2.846 5.752-4.38 7.518-2.588.906.919.534 1.665-1.612 3.239-2.547 1.867-2.64 2.152-1.087 3.288 2.267 1.657 1.092 5.054-1.382 3.995-4.028-1.723-6.778-1.568-8.992.507C6.474 32.571 6.408 34.41 9 37c2.802 2.802 4.586 2.518 4.54-.723zm17.504 4.05C29.174 37.953 29 36.332 29 21.32c0-16.09.048-16.459 2.455-18.865 2.791-2.792 7.154-3.218 10.104-.987 1.067.808 2.694 1.483 3.614 1.5C47.363 3.01 53 7.778 53 9.588c0 .777.434 1.412.965 1.412 1.776 0 3.04 3.828 3.468 10.507.363 5.662.017 7.534-2.386 12.888-3.305 7.366-5.234 8.44-15.254 8.494-6.052.032-6.906-.218-8.75-2.561zm8.754-4.59c2.137-4.458 4.768-3.523 4.255 1.513-.252 2.477 1.62 2.17 4.532-.743 2.07-2.07 2.306-2.843 1.393-4.55-1.756-3.28-5.347-4.46-8.988-2.953-4.244 1.759-6.18-.013-3.415-3.126 1.06-1.194 1.476-2.337.926-2.54-2.628-.973-3.737-2.278-3.177-3.737.945-2.463 3.586-1.91 6.677 1.399 1.541 1.65 3.461 3 4.266 3 .806 0 2.65.933 4.1 2.073L53 28.145V25.64c0-1.627-.701-2.728-2-3.14-1.1-.35-2-1.504-2-2.567 0-1.266.69-1.933 2-1.933 2.267 0 2.563-1.037.8-2.8-1.842-1.842-4.593-1.427-5.3.8-.746 2.351-3.311 2.656-4.141.492C41.615 14.554 44.578 10 46.582 10c.845 0 1.258-.45.918-1-.34-.55-2.391-1-4.559-1C40.105 8 39 7.58 39 6.5c0-.933-.944-1.5-2.5-1.5-2 0-2.5.5-2.5 2.5 0 1.984.504 2.5 2.441 2.5 1.343 0 2.731.47 3.086 1.044 1.017 1.645-1.592 4.07-3.668 3.411-1.707-.542-1.859.07-1.859 7.478C34 28.35 34.3 30 35.465 30c1.933 0 3.932 3.636 2.49 4.528-.578.357-1.704.398-2.503.092-.938-.36-1.452.08-1.452 1.245 0 4.12 3.802 4.036 5.797-.127z"
+     id="path274"
+     style="fill:#808080" />
+</svg>
diff --git a/frontend/src/assets/Monitoring.svg b/frontend/src/assets/Monitoring.svg
new file mode 100644
index 0000000..80c7a3f
--- /dev/null
+++ b/frontend/src/assets/Monitoring.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="86"
+   height="64"
+   version="1.1"
+   id="svg51"
+   sodipodi:docname="Monitoring.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata57">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs55" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview53"
+     showgrid="false"
+     inkscape:zoom="13.390625"
+     inkscape:cx="43"
+     inkscape:cy="32"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg51" />
+  <path
+     d="M2.174 61.686C.978 60.413 0 58.418 0 57.252c0-1.165 3.09-5.77 6.866-10.234l6.865-8.115-1.322-3.701c-2.12-5.94-1.725-13.99.968-19.702 2.746-5.821 5.694-8.796 10.855-10.952 5.004-2.091 8.31-1.948 13.542.585 15.04 7.28 16.059 32.05 1.72 41.76-4.317 2.922-12.997 3.318-16.887.77-2.473-1.621-2.492-1.607-9.792 7.3-4.023 4.907-7.574 8.948-7.89 8.98-.317.031-1.555-.985-2.75-2.257zm32.219-23.202C38.653 36.463 41 32.22 41 26.546c0-8.555-5.571-14.482-12.34-13.128-11.118 2.224-12.728 20.594-2.208 25.176 3.904 1.7 4.132 1.697 7.94-.11zm-10.47-3.407c-3.637-3.637-3.776-7.358-.456-12.243 2.853-4.198 8.911-8.287 11.058-7.463 2.132.818 2.078 11.46-.062 12.282C32.578 28.376 30 33.168 30 35.95c0 2.937-2.647 2.557-6.077-.873zm13.744-7.744c-.99-.988-.808-7.128.228-7.768 1.15-.71 2.105 1.793 2.105 5.517 0 2.795-.91 3.674-2.333 2.251zM20.064 59.12c-1.077-2.013-1.482-9.369-.566-10.284.274-.274 2.77.199 5.546 1.05l5.048 1.55-.296 4.532L29.5 60.5l-4.186.304c-3.343.243-4.4-.095-5.25-1.684zm55 0C74.48 58.026 74 55.077 74 52.566V48H85.095l-.297 6.25-.298 6.25-4.186.304c-3.343.243-4.4-.095-5.25-1.684zm-1.8-13.87c-1.226-3.207.61-4.356 6.474-4.05 5.029.262 5.801.575 6.07 2.458.282 1.982-.199 2.186-5.88 2.5-4.293.237-6.332-.04-6.664-.908zM74 35.885c0-3.426-.586-4.652-3.5-7.321-3.127-2.864-3.5-3.752-3.5-8.326 0-2.816.357-5.34.794-5.61 1.618-1 9.026 3.269 11.656 6.718C82.397 25.21 85 32.626 85 37.16 85 39.936 84.876 40 79.5 40H74zM62 20.5c0-7.213.118-7.621 2.117-7.32 1.923.29 2.116.959 2.116 7.32 0 6.361-.193 7.03-2.116 7.32C62.118 28.12 62 27.713 62 20.5zm-10.286 5.88c-1.25-1.25-.771-2.378 1.036-2.443 1.34-.049 1.224-.275-.5-.968-1.812-.728-2.25-1.69-2.25-4.937 0-2.217-.365-4.032-.812-4.032-.447 0-1.836-1.386-3.088-3.08-3.06-4.138-2.18-7.57 2.436-9.5 2.983-1.246 3.929-1.253 6.81-.05 6.988 2.92 8.19 14.704 1.995 19.576-1.436 1.13-2.242 2.054-1.79 2.054.45 0 1.895-1.01 3.21-2.245l2.389-2.244-.325 3.994c-.316 3.889-.432 4.003-4.361 4.292-2.22.163-4.358-.024-4.75-.417zM57 14.878c0-.483-.675-.878-1.5-.878-.862 0-1.5.902-1.5 2.122 0 1.774.247 1.918 1.5.878.825-.685 1.5-1.64 1.5-2.122zm-7-8c0-1.774-.247-1.918-1.5-.878-.825.685-1.5 1.64-1.5 2.122 0 .483.675.878 1.5.878.862 0 1.5-.902 1.5-2.122zm7 1.244c0-.482-.675-1.437-1.5-2.122-1.253-1.04-1.5-.896-1.5.878C54 8.098 54.638 9 55.5 9c.825 0 1.5-.395 1.5-.878z"
+     id="path49"
+     style="fill:#d45500" />
+</svg>
diff --git a/frontend/src/assets/Teamwork.svg b/frontend/src/assets/Teamwork.svg
new file mode 100644
index 0000000..1b7c39c
--- /dev/null
+++ b/frontend/src/assets/Teamwork.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="90"
+   height="61"
+   version="1.1"
+   id="svg232"
+   sodipodi:docname="Teamwork.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata238">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs236" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview234"
+     showgrid="false"
+     inkscape:zoom="3.4777778"
+     inkscape:cx="45"
+     inkscape:cy="30.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg232" />
+  <path
+     d="M20.994 60.126C13.54 57.68 6.952 51.823 2.856 44 .884 40.233.503 38.035.517 30.5c.016-8.07.322-9.553 2.967-14.355C11.287 1.973 26.215-3.422 40.338 2.825c7.849 3.472 14.636 12.088 16.468 20.904.486 2.337 1.427 3.885 2.488 4.089 1.488.287 1.706-.649 1.706-7.322 0-7.122.202-7.852 2.923-10.573C66.187 7.66 67.755 7 70.878 7c2.967 0 4.691-.66 6.531-2.5C82.295-.386 89 2.729 89 9.884c0 3.847-1.641 6.151-5.313 7.457-1.979.704-7.687-1.797-7.687-3.367 0-1.52-7.615-1.143-8.93.442-.693.835-1.05 3.809-.872 7.25L66.5 27.5l4.032.297c3.252.24 4.494-.196 6.424-2.25C81.869 20.317 89 23.512 89 30.943c0 2.942-.565 4.34-2.223 5.5-3.288 2.303-7.087 1.92-9.821-.99-1.93-2.054-3.172-2.49-6.424-2.25L66.5 33.5l-.295 6.134c-.221 4.608.108 6.536 1.322 7.75 2.427 2.427 6.767 2.014 9.286-.884 1.51-1.737 3.197-2.5 5.525-2.5C86.631 44 89 46.607 89 51.329c0 7.127-7.234 10.244-12 5.171-1.774-1.888-3.365-2.5-6.5-2.5-6.513 0-8.872-3.184-9.5-12.826-.59-9.059-2.575-10.446-4.44-3.103-3.39 13.356-13.453 21.903-26.552 22.554-3.58.177-7.636-.047-9.014-.5zm14.574-3.597c17.84-5.323 24.469-29.11 12.245-43.94C41.338 4.733 27.789 1.63 18.5 5.871 10.021 9.744 3 20.911 3 30.523 3 39.29 8.637 49.53 15.762 53.706c7.39 4.331 12.371 5.041 19.806 2.823zM9.908 44.176c-.352-2.559.437-9.953 1.217-11.41.52-.971 2.017-2.468 3.327-3.326 1.994-1.307 2.72-1.35 4.465-.26 1.684 1.052 2.47 1.06 4.106.038C27.289 26.553 32 32.408 32 40.376v4.476H21c-6.05 0-11.042-.304-11.093-.676zm22.736-9.206c-.333-1.667-1.74-4.08-3.125-5.365-3.184-2.95-3.16-3.955.152-6.561 1.83-1.44 2.995-1.778 3.7-1.073 1.35 1.35 4.941 1.317 6.316-.058.783-.783 1.957-.292 4.193 1.75 2.548 2.327 3.222 3.87 3.75 8.587l.645 5.75H33.25zM19.4 28.235C17.68 27.087 16 23.372 16 20.72 16 18.078 18.784 15 21.174 15 23.314 15 26 18.252 26 20.842c0 3.191-3.037 8.127-5 8.127-.275 0-.995-.33-1.6-.734zm15.075-7.276c-.354-.572-1.505-.767-2.56-.432-1.526.484-1.915.117-1.915-1.81 0-3.845 2.04-8.668 4.143-9.794C38.376 6.658 43 11.407 43 18.018c0 2.616-.308 3.02-1.916 2.509-1.054-.335-2.205-.14-2.559.432C38.171 21.532 37.26 22 36.5 22s-1.671-.468-2.025-1.04zM86 53.5c0-2.288-.984-3.025-3.42-2.562-.505.096-.342-.52.363-1.369 1.772-2.135.571-5.24-1.395-3.609-.786.653-1.21 1.756-.943 2.453.267.697-.21 1.844-1.06 2.55-.85.705-1.545 2.127-1.545 3.16 0 1.523.754 1.877 4 1.877 3.6 0 4-.25 4-2.5zm-.18-20.75c-.605-4.254-7.752-3.338-7.805 1-.01.798 1.457 1.25 4.055 1.25 3.648 0 4.036-.233 3.75-2.25zm-1.522-4.381c.347-.348.166-1.502-.403-2.565-.825-1.541-1.324-1.692-2.465-.746-2.012 1.67-1.78 3.942.403 3.942 1.009 0 2.118-.284 2.465-.631zm1.504-16.273c-.236-2.032-.93-2.668-3.193-2.926-2.96-.338-4.566 1.035-4.594 3.926-.011 1.202.987 1.596 4.037 1.596 3.772 0 4.03-.179 3.75-2.596zm-1.525-6.144c-.639-2.444-3.602-2.219-4.089.31C79.943 7.534 80.516 8 82.333 8c2.007 0 2.378-.39 1.944-2.048z"
+     id="path230"
+     style="fill:#ffcc00" />
+</svg>
diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 43ecd7a..08ba892 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -1,11 +1,43 @@
 <template>
   <b-container>
+    <b-container class="sidebar">
+      <b-row align-v="center" class="sidebar-vert-padding">
+        <b-col class="centered-image">
+          <img src="../assets/Monitoring.svg" class="image-opacity" object-fill="contain" />
+          <div class="image-centered-text">{{ totals[0] }}</div>
+        </b-col>
+      </b-row>
+      <b-row align-v="center" class="sidebar-vert-padding">
+        <b-col class="centered-image">
+          <img src="../assets/Control.svg" class="image-opacity" object-fill="contain" />
+          <div class="image-centered-text">{{ totals[1] }}</div>
+        </b-col>
+      </b-row>
+      <b-row align-v="center" class="sidebar-vert-padding">
+        <b-col class="centered-image">
+          <img src="../assets/Conservatism.svg" class="image-opacity" object-fill="contain" />
+          <div class="image-centered-text">{{ totals[2] }}</div>
+        </b-col>
+      </b-row>
+      <b-row align-v="center" class="sidebar-vert-padding">
+        <b-col class="centered-image">
+          <img src="../assets/Teamwork.svg" class="image-opacity" object-fill="contain" />
+          <div class="image-centered-text">{{ totals[3] }}</div>
+        </b-col>
+      </b-row>
+      <b-row align-v="center">
+        <b-col class="centered-image">
+          <img src="../assets/Knowledge.svg" class="image-opacity" object-fill="contain" />
+          <div class="image-centered-text">{{ totals[4] }}</div>
+        </b-col>
+      </b-row>
+    </b-container>
     <b-form @submit="onSubmit" id="submission-form" novalidate>
       <b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
         <b-row class="top-buffer">
           <b-col cols="3">
             <b-form-group label="Type">
-              <b-form-select v-model="observations[index].type" required>
+              <b-form-select v-bind:value="item.type" @change="changeType(index, $event)" required>
                 <option value="">Please select an option</option>
                 <option value="MONITORING">Monitoring</option>
                 <option value="CONTROL">Control</option>
@@ -15,22 +47,22 @@
               </b-form-select>
             </b-form-group>
             <b-form-group label="Rating">
-              <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="observations[index].rating" required>
-                <b-form-radio value="1">1</b-form-radio>
-                <b-form-radio value="2">2</b-form-radio>
-                <b-form-radio value="3">3</b-form-radio>
-                <b-form-radio value="4">4</b-form-radio>
-                <b-form-radio value="5">5</b-form-radio>
+              <b-form-radio-group buttons button-variant="outline-info" size="lg" v-bind:value="item.rating" @change="changeRating(index, $event)" required>
+                <b-form-radio value=1>1</b-form-radio>
+                <b-form-radio value=2>2</b-form-radio>
+                <b-form-radio value=3>3</b-form-radio>
+                <b-form-radio value=4>4</b-form-radio>
+                <b-form-radio value=5>5</b-form-radio>
               </b-form-radio-group>
             </b-form-group>
           </b-col>
           <b-col>
             <b-form-group label="Strengths">
-              <b-form-textarea v-model="observations[index].strengths" placeholder="Enter Strengths" :rows="3" :max-rows="6" required no-resize>
+              <b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="3" :max-rows="6" required no-resize>
               </b-form-textarea>
             </b-form-group>
             <b-form-group label="Areas of Improvement">
-              <b-form-textarea v-model="observations[index].improvements" placeholder="Enter Areas of Improvement" :rows="3" :max-rows="6" required no-resize>
+              <b-form-textarea v-model="item.improvements" placeholder="Enter Areas of Improvement" :rows="3" :max-rows="6" required no-resize>
               </b-form-textarea>
             </b-form-group>
           </b-col>
@@ -63,7 +95,8 @@ export default {
           strengths: null,
           improvements: null
         }
-      ]
+      ],
+      totals: [0, 0, 0, 0, 0]
     };
   },
   computed: {
@@ -89,12 +122,57 @@ export default {
       if (this.observations.length == 0) {
         this.addAnotherObservation();
       }
+      this.updateTotals();
+    },
+    changeType: function(index, ev) {
+      this.observations[index].type = ev;
+      this.updateTotals();
+    },
+    changeRating: function(index, ev) {
+      this.observations[index].rating = parseInt(ev);
+      this.updateTotals();
+    },
+    updateTotals: function() {
+      var iTotals = [0, 0, 0, 0, 0];
+      var counts = [0, 0, 0, 0, 0];
+      this.observations.forEach(function(element) {
+        if (element.rating > 0) {
+          switch (element.type) {
+            case "MONITORING":
+              iTotals[0] += element.rating;
+              counts[0] += 1;
+              break;
+            case "CONTROL":
+              iTotals[1] += element.rating;
+              counts[1] += 1;
+              break;
+            case "CONSERVATISM":
+              iTotals[2] += element.rating;
+              counts[2] += 1;
+              break;
+            case "TEAMWORK":
+              iTotals[3] += element.rating;
+              counts[3] += 1;
+              break;
+            case "KNOWLEDGE":
+              iTotals[4] += element.rating;
+              counts[4] += 1;
+              break;
+          }
+        }
+      });
+      for (var i = 0; i < iTotals.length; i++) {
+        if (counts[i] != 0) {
+          this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
+        } else {
+          this.totals[i] = 0;
+        }
+      }
     },
     onSubmit: function(e) {
       e.preventDefault();
       e.stopPropagation();
       var form = document.getElementById("submission-form");
-      console.log(form.checkValidity());
       if (form.checkValidity()) {
         Vue.axios
           .post("/api/observation", {
@@ -129,4 +207,40 @@ export default {
 .bottom-buffer {
   margin-bottom: 10px;
 }
+.image-centered-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+  color: white;
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+}
+.image-opacity {
+  opacity: 0.5;
+}
+.centered-image {
+  position: relative;
+  text-align: center;
+}
+.sidebar {
+  width: 160px; /* Set the width of the sidebar */
+  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+  z-index: 1; /* Stay on top */
+  top: 20%; /* Stay at the top */
+  left: 0;
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 20px;
+}
+.sidebar-vert-padding {
+  margin-bottom: 25%;
+}
+@media screen and (max-height: 500px) {
+  .sidebar {
+    top: 0; /* Stay at the top */
+  }
+}
+img {
+  height: 80px;
+}
 </style>