From 2578aff2ae4433f0e69a3bc4be7861a7fc435e1e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 18 Apr 2020 12:26:53 +0200
Subject: [PATCH] :sparkles: (chart) add progress chart to simplify with the
 pie chart

---
 src/components/Charts/ChartProgress.vue | 36 +++++++++++++++++++++++++
 src/components/TagList.vue              | 17 +++++-------
 src/styles/framework.scss               |  1 +
 src/styles/variables.scss               |  1 +
 4 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Charts/ChartProgress.vue

diff --git a/src/components/Charts/ChartProgress.vue b/src/components/Charts/ChartProgress.vue
new file mode 100644
index 0000000..d3bd87f
--- /dev/null
+++ b/src/components/Charts/ChartProgress.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="chart-progress">
+    <div
+      v-for="slice in slices"
+      :key="slice.key"
+      :style="{ flex: slice.percent, backgroundColor: slice.color }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import ISlice from '@/models/ISlice'
+
+@Component
+export default class ChartProgress extends Vue {
+  @Prop({ type: Array, default: () => [] })
+  public slices!: ISlice[]
+}
+</script>
+
+<style scoped lang="scss">
+$percent-height: 1.2rem;
+
+.chart-progress {
+  margin: auto;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  div {
+    height: $percent-height;
+  }
+}
+</style>
diff --git a/src/components/TagList.vue b/src/components/TagList.vue
index 3d7b9fe..2a3ba5f 100644
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="tag-list no-margin">
-    <div class="columns">
-      <div class="column">
-        <div class="chart-container">
-          <chart-pie :slices="slices" />
-        </div>
-      </div>
+    <div class="columns is-vcentered">
       <div class="column legend-container">
         <table class="table is-fullwidth">
           <tr
@@ -15,7 +10,7 @@
             class="legend-item"
           >
             <td>
-              <awe-icon :icon="categories[slice.key].tag.icon" />
+              <awe-icon :icon="categories[slice.key || ''].tag.icon" />
             </td>
             <td class="legend-label">{{ slice.label }}</td>
             <td class="percent-label numeric">
@@ -24,6 +19,9 @@
           </tr>
         </table>
       </div>
+      <div class="column">
+        <chart-progress :slices="slices" />
+      </div>
     </div>
     <div>
       <div class="field has-addons has-addons-centered is-narrow">
@@ -101,7 +99,7 @@ interface ICategory {
 
 @Component({
   components: {
-    'chart-pie': () => import('@/components/ChartPie.vue'),
+    'chart-progress': () => import('@/components/Charts/ChartProgress.vue'),
     'account-transaction-list': () =>
       import('@/components/AccountTransactionList.vue')
   }
@@ -188,9 +186,6 @@ export default class TagList extends Vue {
   position: sticky;
   top: calc(3.25rem + 15px);
 }
-.chart-container {
-  padding: 15px;
-}
 .legend-container {
   display: flex;
   table {
diff --git a/src/styles/framework.scss b/src/styles/framework.scss
index 3f09a9a..3c9f642 100644
--- a/src/styles/framework.scss
+++ b/src/styles/framework.scss
@@ -11,6 +11,7 @@
 @import '~bulma/sass/elements/container.sass';
 @import '~bulma/sass/elements/table.sass';
 @import '~bulma/sass/elements/title.sass';
+@import '~bulma/sass/elements/progress.sass';
 @import '~bulma/sass/elements/other.sass';
 @import '~bulma/sass/form/_all.sass';
 @import '~bulma/sass/layout/_all.sass';
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3cc35cf..ab2edae 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,5 +4,6 @@ $main: #2c3e50;
 $green: hsl(141, 63%, 44%);
 $red: hsl(348, 54%, 52%);
 $white: #fff;
+$progress-border-radius: 0;
 
 @import '~bulma/sass/utilities/_all.sass';