From 98840879759d49920e8e45e2baeecd9abe5fc895 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 8 Jan 2022 11:59:40 +0000
Subject: [PATCH] :package: Adds legend, and customizable height and title to
 percentage chart component

---
 src/components/Charts/PercentageChart.vue | 122 +++++++++++++---------
 1 file changed, 73 insertions(+), 49 deletions(-)

diff --git a/src/components/Charts/PercentageChart.vue b/src/components/Charts/PercentageChart.vue
index 339fb8b8..05c6aaba 100644
--- a/src/components/Charts/PercentageChart.vue
+++ b/src/components/Charts/PercentageChart.vue
@@ -1,20 +1,26 @@
 <template>
-<div>
-<div class="percentage-chart" :style="makeWrapperStyles(height)">
-  <div
-    v-for="(block, inx) in blocks" :key="inx"
-    class="inner" :style="makeDimens(block, inx)"
-    v-tooltip="block.label"
-  ></div>
-</div>
-<div class="legend">
-  <div v-for="(block, inx) in blocks" :key="inx"
-    class="legend-item" v-tooltip="`${Math.round(block.width)}%`">
-    <div class="dot" v-if="block.label" :style="makeDotColor(block)"></div>
-    <div class="txt" v-if="block.label">{{ block.label }}</div>
+<div class="percentage-chart-wrapper">
+  <!-- Chart Heading -->
+  <div class="title" v-if="title">
+    <p>{{ title }}</p>
+  </div>
+  <!-- Percentage Chart -->
+  <div class="percentage-chart" :style="makeWrapperStyles(height)">
+    <div
+      v-for="(block, inx) in blocks" :key="inx"
+      class="inner" :style="makeDimens(block, inx)"
+      v-tooltip="`${block.label} - ${block.width}%`"
+    ></div>
+  </div>
+  <!-- Chart Legend / Key -->
+  <div class="legend">
+    <div v-for="(block, inx) in blocks" :key="inx"
+      class="legend-item" v-tooltip="`${Math.round(block.width)}%`">
+      <div class="dot" v-if="block.label" :style="makeDotColor(block)"></div>
+      <div class="txt" v-if="block.label">{{ block.label }}</div>
+    </div>
   </div>
 </div>
-  </div>
 </template>
 
 <script>
@@ -25,11 +31,15 @@ export default {
       type: Boolean,
       default: true,
     },
+    height: {
+      number: Boolean,
+      default: 1,
+    },
     values: Array,
+    title: String,
   },
   data() {
     return {
-      height: 1.5,
       defaultColors: [
         '#eb5cad', '#985ceb', '#5346f3', '#5c90eb', '#5cdfeb',
         '#00CCB4', '#5ceb8d', '#afeb5c', '#eff961',
@@ -40,14 +50,13 @@ export default {
     blocks() {
       let startPositionSum = 0;
       const results = [];
-      console.log(this.values);
       const total = this.values.reduce((prev, cur) => (prev.size || prev) + cur.size);
       const multiplier = this.showAsPercent ? 100 / total : 1;
       this.values.forEach((value, index) => {
         const defaultColor = this.defaultColors[index % this.defaultColors.length];
         results.push({
           start: startPositionSum,
-          width: value.size * multiplier,
+          width: Math.round(value.size * multiplier),
           color: value.color || defaultColor,
           label: value.label,
         });
@@ -71,41 +80,56 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.percentage-chart {
-  width: 100%;
-  background: grey;
-  position: relative;
-  height: 2rem;
-  margin: 0.5rem auto;
-  .inner {
-    position: absolute;
-    width: 30%;
-    height: 100%;
-    box-shadow: inset 0px -1px 2px #000000bf;
-    &:hover {
-      box-shadow: inset 0px -1px 4px #000000bf;
-    }
-  }
-}
-.legend {
-  display: flex;
-  margin-top: 0.5rem;
-  .legend-item {
-    display: flex;
-    align-items: center;
-    .dot {
-      width: 1rem;
-      height: 1rem;
-      border-radius: 1rem;
-    }
-    .txt {
-      font-size: 0.8rem;
-      margin: 0.5rem;
+.percentage-chart-wrapper {
+  // Chart Title
+  .title {
+    p {
+      font-size: 1rem;
+      margin: 0.5rem 0;
       color: var(--widget-text-color);
       opacity: var(--dimming-factor);
     }
-    &:hover {
-      .txt { opacity: 1; }
+  }
+  // Main Chart
+  .percentage-chart {
+    width: 100%;
+    background: grey;
+    position: relative;
+    height: 2rem;
+    margin: 0.5rem auto;
+    border-radius: 3px;
+    overflow: hidden;
+    .inner {
+      position: absolute;
+      width: 30%;
+      height: 100%;
+      box-shadow: inset 0px -1px 2px #000000bf;
+      &:hover {
+        box-shadow: inset 0px -1px 4px #000000bf;
+      }
+    }
+  }
+  // Chart Legend
+  .legend {
+    display: flex;
+    margin-top: 0.5rem;
+    .legend-item {
+      display: flex;
+      align-items: center;
+      .dot {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 1rem;
+      }
+      .txt {
+        font-size: 0.8rem;
+        margin: 0.5rem;
+        color: var(--widget-text-color);
+        opacity: var(--dimming-factor);
+      }
+      &:hover {
+        .txt { opacity: 1; }
+      }
     }
   }
 }