✨ (chart) add progress chart to simplify with the pie chart

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>

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 {