From 5a41f321c86c698bfb104294462e0195d1fb3c16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mois=C3=A9s=20=C3=91a=C3=B1ez?= <moisesnandres@gmail.com>
Date: Mon, 28 Oct 2019 10:30:02 -0500
Subject: [PATCH] [Enhancement] Move chart options to a variable (#189)

---
 .../components/widgets/chart/BarChart.js      | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/chart/BarChart.js b/app/javascript/dashboard/components/widgets/chart/BarChart.js
index 5058f0d39..c005da033 100644
--- a/app/javascript/dashboard/components/widgets/chart/BarChart.js
+++ b/app/javascript/dashboard/components/widgets/chart/BarChart.js
@@ -3,41 +3,43 @@ import { Bar } from 'vue-chartjs';
 const fontFamily =
   '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
 
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  legend: {
+    labels: {
+      fontFamily,
+    },
+  },
+  scales: {
+    xAxes: [
+      {
+        barPercentage: 1.9,
+        ticks: {
+          fontFamily,
+        },
+        gridLines: {
+          display: false,
+        },
+      },
+    ],
+    yAxes: [
+      {
+        ticks: {
+          fontFamily,
+        },
+        gridLines: {
+          display: false,
+        },
+      },
+    ],
+  },
+};
+
 export default {
   extends: Bar,
   props: ['collection'],
   mounted() {
-    this.renderChart(this.collection, {
-      responsive: true,
-      maintainAspectRatio: false,
-      legend: {
-        labels: {
-          fontFamily,
-        },
-      },
-      scales: {
-        xAxes: [
-          {
-            barPercentage: 1.9,
-            ticks: {
-              fontFamily,
-            },
-            gridLines: {
-              display: false,
-            },
-          },
-        ],
-        yAxes: [
-          {
-            ticks: {
-              fontFamily,
-            },
-            gridLines: {
-              display: false,
-            },
-          },
-        ],
-      },
-    });
+    this.renderChart(this.collection, chartOptions);
   },
 };