Donut charts

client/css/analysis.css

@@ -0,0 +1,44 @@
+/* DONUT CHARTS */
+#a-chart {
+  --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: 100;
+  stroke-dashoffset: 100;
+}
+
+.donut .circle_animation {
+  -webkit-animation: donut 1.3s ease-in-out forwards;
+  animation: donut 1.3s ease-in-out forwards;
+}
+
+@-webkit-keyframes donut {
+  to {
+    stroke-dashoffset: var(--percent);
+    /* 50% would be 220 (half the initial value specified above) */
+  }
+}
+
+@keyframes donut {
+  to {
+    stroke-dashoffset: var(--percent);
+  }
+}

client/js/analysis.js

@@ -1,27 +1,93 @@
-
-
+// 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
+ *
+ * @returns {string} value
+ */
 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 {string} elId description
+ * @param {string} value description
  */
 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
+ *
+ * @returns {HTMLElement} 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');
+  outsideCircle.setAttribute('pathLength', '100');
+
+  g.appendChild(insideCircle);
+  g.appendChild(outsideCircle);
+
+  return g;
+}
+
+/**
+ * Creates an SVG Element
+ *
+ * @param {string} el type of element
+ */
+function createSVGElement(el) {
+  return document.createElementNS('http://www.w3.org/2000/svg', el);
 }