✨ (Account Card) Design Card

src/components/AccountCard.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="account-card box" :style="getColor(account.color)" @click="goToAccount(account._id)">
+  <div
+    class="account-card box"
+    :style="getColor(account.color)"
+    @click="goToAccount(account._id)"
+  >
     <router-link
       :class="{ 'is-primary': !account.color, 'is-white': account.color }"
       :style="`color: ${findDarkValue(account.color)}`"
       :to="{ name: 'account', params: { id: account._id } }"
-    >{{ account.name }}</router-link>
+      >{{ account.name }}</router-link
+    >
     <div v-if="account.isPublic">
       <awe-icon icon="users" />
     </div>
+    <div :id="`chart-${account._id}`" class="ct-chart ct-golden-section"></div>
     <br />
-    {{ account.users && account.users.map(u => u.alias).join(', ') }}
+    {{ account.users && account.users.map((u) => u.alias).join(', ') }}
   </div>
 </template>
 
@@ -21,11 +27,51 @@ import accountService from '@/services/AccountService'
 import IAccount from '@/models/IAccount'
 import IColor from '@/models/IColor'
 import FabButton from '@/components/FabButton.vue'
+import ITransaction from '../models/ITransaction'
+import TransactionService from '../services/TransactionService'
+import Chartist from 'chartist'
+import TransactionType from '../enums/TransactionType'
+import colors from '../data/colors'
 
 @Component
 export default class AccountCard extends Vue {
   @Prop({ type: Object, required: true })
   public account!: IAccount
+  public transactions: ITransaction[] = []
+
+  public async mounted() {
+    this.transactions = await TransactionService.getAllByAccountId(
+      this.account._id
+    )
+
+    const data = {
+      labels: this.labels,
+      series: [this.sumOfTransactions]
+    }
+
+    const chartId = `#chart-${this.account._id}`
+    // tslint:disable-next-line:no-unused-expression
+    new Chartist.Bar(chartId, data, {})
+
+    setTimeout(() => {
+      const color = colors.find((c) => c.value === this.account.color)
+      if (!color) {
+        return
+      }
+      const bars = document.querySelectorAll(
+        `${chartId} .ct-bar`
+      ) as NodeListOf<HTMLElement>
+      bars.forEach((bar) => (bar.style.stroke = color.darkValue || 'red'))
+    }, 500)
+  }
+
+  public findDarkValue(color: string): string | null {
+    return findDarkValue(color)
+  }
+
+  public goToAccount(id: string): void {
+    this.$router.push({ name: 'account', params: { id } })
+  }
 
   public getColor(color: string | null): any | null {
     if (!color) {
@@ -37,18 +83,57 @@ export default class AccountCard extends Vue {
     }
   }
 
-  public findDarkValue(color: string): string | null {
-    return findDarkValue(color)
+  public get amounts(): ITransaction[] {
+    return this.transactions.filter(
+      (transaction) => transaction.transactionType === TransactionType.normal
+    )
   }
 
-  public goToAccount(id: string): void {
-    this.$router.push({ name: 'account', params: { id } })
+  public get labels(): string[] {
+    const dates = this.amounts.map((transaction) =>
+      this.dateToLabel(new Date(transaction.date))
+    )
+    return [...new Set(dates)]
+  }
+
+  public get sumOfTransactions(): number[] {
+    const sortedTransactions = [...this.amounts].sort((a, b) =>
+      a.date < b.date ? -1 : 1
+    )
+    const groups = sortedTransactions.reduce(
+      (group: { [key: string]: number }, transaction: ITransaction) => {
+        const date = this.dateToLabel(new Date(transaction.date))
+        if (!(date in group)) {
+          group[date] = 0
+        }
+        group[date] += transaction.amount
+        return group
+      },
+      {}
+    )
+    return Object.values(groups)
+  }
+
+  private dateToLabel(date: Date): string {
+    return `${(date.getMonth() + 1)
+      .toString()
+      .padStart(2, '0')}/${date.getFullYear()}`
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../styles/variables';
+@import '~chartist/dist/chartist.min.css';
+
+.ct-chart {
+  .ct-series-a {
+    .ct-bar {
+      stroke: blue;
+      stroke-width: 10px;
+    }
+  }
+}
 
 .box {
   border-radius: 8px;