✨ (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 {

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';

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';