master: change repo

src/components/ChartBalance.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="chart-balance">
+    <table class="table is-hoverable is-striped" v-if="stats.length">
+      <tbody>
+        <tr v-for="(stat, k) in statOrdered" :key="k">
+          <th scope="row">{{ stat.label }}</th>
+          <td class="numeric">{{ stat.value | money(currency) }}</td>
+          <td
+            v-if="stat.balance.amount !== 0"
+            class="numeric"
+            :class="getColor(stat.balance.amount)"
+          >{{ stat.balance.amount | money(currency) }}</td>
+          <td v-else class="conclude" :class="getColor(stat.balance.amount)"></td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else>Aucune dépense faite</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import ICurrency from '@/models/ICurrency'
+import IStat from '@/models/IStat'
+
+@Component({
+  components: {
+    'axis-label': () => import('@/components/AxisLabel.vue')
+  }
+})
+export default class ChartBalance extends Vue {
+  @Prop({ type: Array, default: () => [] })
+  public stats!: IStat[]
+  @Prop({ type: Object, required: true })
+  public currency!: ICurrency
+
+  public getColor(amount: number): string {
+    return amount === 0 ? 'zero' : amount > 0 ? 'positive' : 'negative'
+  }
+
+  public get statOrdered(): IStat[] {
+    return [...this.stats].sort((a: IStat, b: IStat) =>
+      a.balance.amount < b.balance.amount ? 1 : -1
+    )
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/variables';
+
+.chart-balance {
+  overflow-x: auto;
+}
+.table {
+  margin: auto;
+  .numeric {
+    font-weight: bold;
+    text-align: right;
+  }
+}
+.zero {
+  color: $primary;
+  &.conclude::after {
+    content: '👌🏾';
+  }
+}
+.positive {
+  color: $green;
+}
+.negative {
+  color: $red;
+}
+</style>