✨ (Account Card) Add info to account card

package-lock.json

@@ -3484,11 +3484,6 @@
       "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
       "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
     },
-    "chartist": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/chartist/-/chartist-0.11.4.tgz",
-      "integrity": "sha512-H4AimxaUD738/u9Mq8t27J4lh6STsLi4BQHt65nOtpLk3xyrBPaLiLMrHw7/WV9CmsjGA02WihjuL5qpSagLYw=="
-    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",

package.json

@@ -18,7 +18,6 @@
     "bulma-checkradio": "^2.1.0",
     "bulma-pricingtable": "^0.2.0",
     "bulma-switch": "^2.0.0",
-    "chartist": "^0.11.4",
     "crypto-js": "^3.1.9-1",
     "lightness": "^1.0.0",
     "lodash-es": "^4.17.15",

src/base-components/BaseAccount.ts

@@ -31,7 +31,7 @@ export default class BaseAccount extends Vue {
 
   public async getData(docIds?: string[]): Promise<void> {
     throw new Error(
-      `abstract method, need to be override ${docIds && docIds.join(', ')}`
+      `abstract method needs to be overrided ${docIds && docIds.join(', ')}`
     )
   }
 }

src/components/AccountCard.vue

@@ -13,8 +13,7 @@
     <div v-if="account.isPublic">
       <awe-icon icon="users" />
     </div>
-    <div :id="`chart-${account._id}`" class="ct-chart ct-golden-section"></div>
-    <br />
+    <div class="numeric">{{ totalCost | moneypad(account.mainCurrency) }}</div>
     {{ account.users && account.users.map((u) => u.alias).join(', ') }}
   </div>
 </template>
@@ -28,8 +27,7 @@ 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 transactionService from '../services/TransactionService'
 import TransactionType from '../enums/TransactionType'
 import colors from '../data/colors'
 
@@ -40,29 +38,9 @@ export default class AccountCard extends Vue {
   public transactions: ITransaction[] = []
 
   public async mounted() {
-    this.transactions = await TransactionService.getAllByAccountId(
+    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 {
@@ -83,48 +61,17 @@ export default class AccountCard extends Vue {
     }
   }
 
-  public get amounts(): ITransaction[] {
-    return this.transactions.filter(
-      (transaction) => transaction.transactionType === TransactionType.normal
+  private get totalCost(): number {
+    return transactionService.getTotalCost(
+      this.transactions,
+      this.account.mainCurrency.name
     )
   }
-
-  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 {

src/components/AccountList.vue

@@ -37,7 +37,6 @@ export default class AccountList extends Vue {
   public user!: IUser | null
   @Prop({ type: Boolean, default: false })
   public archived!: boolean
-
   public accounts: IAccount[] = []
   public fetched: boolean = false
   public textColor: string = ''