WIP: Draft transactions timeline

src/components/Login.vue

@@ -23,7 +23,12 @@
 
     <div v-if="api.loaded" class="charts">
       <span class="title">Categories</span>
-      <bar-chart  :data=this.api.data.categories></bar-chart>
+      <bar-chart :data=this.api.data.categories></bar-chart>
+    </div>
+
+    <div id="timeline" v-if="api.loaded">
+      <span class="title">Transactions Timeline</span>
+      <transactions-timeline :transactions=this.api.data.feedData></transactions-timeline>
     </div>
 
   </div>
@@ -32,10 +37,11 @@
 <script>
 
 import BarChart from './Charts/CategoriesChart.vue';
+import TransactionsTimeline from './TransactionsTimeline.vue';
 
 export default {
   name: 'Login',
-  components: { BarChart },
+  components: { BarChart, TransactionsTimeline },
   data: () => ({
     username: null,
     password: null,

src/components/TransactionsTimeline.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="container">
+    <span class="title">Last 30 Transactions</span>
+    <div v-if="data !== []">
+      <ul id="transactions">
+        <li v-for="transaction in transactions" :key="transaction.id">
+          <span class="date">{{transaction.date}}</span>
+          <span class="description">{{ transaction.description }}</span>
+          <span class="amount">Amount: {{transaction.amount}}</span>
+          <span v-if="transaction.dollar">Dollar: {{transaction.dollar}}</span>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransactionsTimeline',
+  props: {
+    transactions: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.transactions = Object.entries(this.transactions)
+      .slice(0, 30)
+      .map(item => item[1]);
+  },
+};
+</script>
+
+<style scoped>
+span {
+  padding: 5px;
+}
+</style>