refactor line-chart

resources/assets/js/components/chartjs/LineChart.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="graph-container">
-    <canvas
+    <canvas id="graph" ref="graph" />
-      id="graph"
-      ref="graph" />
   </div>
 </template>
 
@@ -16,58 +14,56 @@ export default {
     labels: {
       type: Array,
       require: true,
-      default: Array
+      default: Array,
     },
     values: {
       type: Array,
       require: true,
-      default: Array
+      default: Array,
     },
     invoices: {
       type: Array,
       require: true,
-      default: Array
+      default: Array,
     },
     expenses: {
       type: Array,
       require: true,
-      default: Array
+      default: Array,
     },
     receipts: {
       type: Array,
       require: true,
-      default: Array
+      default: Array,
     },
     income: {
       type: Array,
       require: true,
-      default: Array
+      default: Array,
     },
     formatMoney: {
       type: Function,
       require: false,
-      default: Function
+      default: Function,
     },
     FormatGraphMoney: {
       type: Function,
       require: false,
-      default: Function
+      default: Function,
-    }
+    },
   },
 
   computed: {
-    ...mapGetters('currency', [
+    ...mapGetters('currency', ['defaultCurrency']),
-      'defaultCurrency'
-    ])
   },
 
   watch: {
-    labels (val) {
+    labels(val) {
       this.update()
-    }
+    },
   },
 
-  mounted () {
+  mounted() {
     let self = this
     let context = this.$refs.graph.getContext('2d')
     let options = {
@@ -77,13 +73,16 @@ export default {
         enabled: true,
         callbacks: {
           label: function (tooltipItem, data) {
-            return self.FormatGraphMoney(tooltipItem.value, self.defaultCurrency)
+            return self.FormatGraphMoney(
-          }
+              tooltipItem.value * 100,
-        }
+              self.defaultCurrency
+            )
+          },
+        },
       },
       legend: {
-        display: false
+        display: false,
-      }
+      },
     }
     let data = {
       labels: this.labels,
@@ -107,7 +106,7 @@ export default {
           pointHoverBorderWidth: 2,
           pointRadius: 4,
           pointHitRadius: 10,
-          data: this.invoices
+          data: this.invoices.map((invoice) => invoice / 100),
         },
         {
           label: 'Receipts',
@@ -128,7 +127,7 @@ export default {
           pointHoverBorderWidth: 2,
           pointRadius: 4,
           pointHitRadius: 10,
-          data: this.receipts
+          data: this.receipts.map((receipt) => receipt / 100),
         },
         {
           label: 'Expenses',
@@ -149,7 +148,7 @@ export default {
           pointHoverBorderWidth: 2,
           pointRadius: 4,
           pointHitRadius: 10,
-          data: this.expenses
+          data: this.expenses.map((expense) => expense / 100),
         },
         {
           label: 'Net Income',
@@ -170,34 +169,40 @@ export default {
           pointHoverBorderWidth: 2,
           pointRadius: 4,
           pointHitRadius: 10,
-          data: this.income
+          data: this.income.map((_i) => _i / 100),
-        }
+        },
-      ]
+      ],
     }
 
     this.myLineChart = new Chart(context, {
       type: 'line',
       data: data,
-      options: options
+      options: options,
     })
   },
 
   methods: {
-    update () {
+    update() {
       this.myLineChart.data.labels = this.labels
-      this.myLineChart.data.datasets[0].data = this.invoices
+      this.myLineChart.data.datasets[0].data = this.invoices.map(
-      this.myLineChart.data.datasets[1].data = this.receipts
+        (invoice) => invoice / 100
-      this.myLineChart.data.datasets[2].data = this.expenses
+      )
-      this.myLineChart.data.datasets[3].data = this.income
+      this.myLineChart.data.datasets[1].data = this.receipts.map(
+        (receipt) => receipt / 100
+      )
+      this.myLineChart.data.datasets[2].data = this.expenses.map(
+        (expense) => expense / 100
+      )
+      this.myLineChart.data.datasets[3].data = this.income.map((_i) => _i / 100)
       this.myLineChart.update({
-        lazy: true
+        lazy: true,
       })
     },
 
-    beforeDestroy () {
+    beforeDestroy() {
       this.myLineChart.destroy()
-    }
+    },
-  }
+  },
 }
 </script>