Donut charts

client/css/analysis.css

@@ -0,0 +1,43 @@
+:root {
+    /* the higher the number, the less filled */
+  --percent: 8;
+}
+
+.item {
+    display: block;
+}
+
+.item h2 {
+    text-align:center;
+    width: 100%;
+}
+
+svg {
+   -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    display: block; /* svg is auto display-inline*/
+    margin: auto;
+    overflow: visible;
+}
+
+.circle_animation {
+  stroke-dasharray: 440; /* circumference of the circle */
+  stroke-dashoffset: 440;
+}
+
+.donut .circle_animation {
+    -webkit-animation: donut 1s ease-out forwards;
+    animation: donut 1s ease-out forwards;
+}
+
+@-webkit-keyframes donut {
+  to {
+    stroke-dashoffset: var(--percent); /* half filled is 220*/
+  }
+}
+
+@keyframes donut {
+  to {
+    stroke-dashoffset: var(--percent);
+  }
+}

client/js/analysis.js

@@ -1,27 +1,86 @@
-
-
+// Will be overwritten in merge
 window.onload = function() {
-    // Listen for on submit click
-    let formSubmit = document.getElementById("formSubmit");
-    formSubmit.addEventListener("click", fetchAndShowResponse, false);
-}
+  // Listen for on submit click
+  const formSubmit = document.getElementById('formSubmit');
+  formSubmit.addEventListener('click', fetchAndShowResponse, false);
+};
 
 /**
- * Grabs response from server
- */ 
+ * Will be overwritten in merge
+ */
 async function fetchAndShowResponse() {
-    const response = await fetch('/api/musix');
-    const value = await response.json();
-    changeInnerText("response", value);
-    return value;
+  const response = await fetch('/api/musix');
+  const value = await response.json();
+  changeInnerText('response', value);
+  return value;
 }
 
 /**
- * Change the contents of div
- * @param elId the id of the element 
- * @param value the value to insert as innerText
+ * Will be overwritten in merge
+ * @param elId
+ * @param value
  */
 function changeInnerText(elId, value) {
-    const el = document.getElementById(elId);
-    el.innerText = value;
+  const el = document.getElementById(elId);
+  el.innerText = value;
+}
+
+/**
+ * Adds a new chart to the page
+ */
+function addElement() {
+  const div = document.createElement('div');
+  div.className = 'item donut';
+
+  const header = document.createElement('h2');
+  header.innerText = 'Toxicity';
+  div.appendChild(header);
+
+  const svg = createSVGElement('svg');
+  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  const g = buildCircle();
+  svg.appendChild(g);
+  div.appendChild(svg);
+
+  const currentDiv = document.getElementById('id');
+  document.body.insertBefore(div, currentDiv);
+}
+
+/**
+ * Builds the circles within the svg tag
+ */
+function buildCircle() {
+  const g = createSVGElement('g');
+
+  const insideCircle = createSVGElement('circle');
+
+  insideCircle.setAttribute('r', '70');
+  insideCircle.setAttribute('cx', '50%');
+  insideCircle.setAttribute('cy', '50%');
+  insideCircle.setAttribute('stroke-width', '20');
+  insideCircle.setAttribute('stroke', '#f2f2f2');
+  insideCircle.setAttribute('fill', 'none');
+
+  const outsideCircle = createSVGElement('circle');
+
+  outsideCircle.setAttribute('class', 'circle_animation');
+  outsideCircle.setAttribute('r', '70');
+  outsideCircle.setAttribute('cx', '50%');
+  outsideCircle.setAttribute('cy', '50%');
+  outsideCircle.setAttribute('stroke-width', '20');
+  outsideCircle.setAttribute('stroke', '#ffb6c1'); // light pink
+  outsideCircle.setAttribute('fill', 'none');
+
+  g.appendChild(insideCircle);
+  g.appendChild(outsideCircle);
+
+  return g;
+}
+
+/**
+ * Creates an SVG Element
+ * @param el
+ */
+function createSVGElement(el) {
+  return document.createElementNS('http://www.w3.org/2000/svg', el);
 }