From 435ba7450eddf4ad3f1d938a7728da6e0951afec Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Mon, 29 May 2023 15:21:58 +0200
Subject: [PATCH] Added axis labels

---
 stockingly-frontend/src/components/BalanceSheet.vue  | 10 ++++++++++
 .../src/components/EmployeesChart.vue                | 12 ++++++++++--
 stockingly-frontend/src/components/EpsChart.vue      | 12 ++++++++++--
 stockingly-frontend/src/components/StockPrice.vue    | 12 +++++++++++-
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/stockingly-frontend/src/components/BalanceSheet.vue b/stockingly-frontend/src/components/BalanceSheet.vue
index 79bc3d5..7399ff1 100644
--- a/stockingly-frontend/src/components/BalanceSheet.vue
+++ b/stockingly-frontend/src/components/BalanceSheet.vue
@@ -90,6 +90,10 @@ const options = computed(() => {
     })),
     axes: [
       {
+        title: {
+          enabled: true,
+          text: 'Company Ticker' 
+        },
         type: 'category',
         position: 'bottom',
         gridStyle: [{
@@ -99,12 +103,18 @@ const options = computed(() => {
         }]
       },
       {
+        enabled: true,
+        title: {
+          enabled: true,
+          text: 'Amount in USD',
+        },
         type: 'number',
         position: 'left',
         label: {
           format: '$~s',
           formatter: (params: AgAxisLabelFormatterParams) =>
             params?.formatter?.(params.value)
+              .replace('y', '')
               .replace('k', 'K')
               .replace('G', 'B') ?? ''
         },
diff --git a/stockingly-frontend/src/components/EmployeesChart.vue b/stockingly-frontend/src/components/EmployeesChart.vue
index b408f22..216b088 100644
--- a/stockingly-frontend/src/components/EmployeesChart.vue
+++ b/stockingly-frontend/src/components/EmployeesChart.vue
@@ -71,7 +71,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: 'Year' 
+        },
       },
       {
         type: 'number',
@@ -80,7 +84,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: '# of employees' 
+        },
       },
     ],
     legend: {
diff --git a/stockingly-frontend/src/components/EpsChart.vue b/stockingly-frontend/src/components/EpsChart.vue
index ea1d1d2..5d8bcaa 100644
--- a/stockingly-frontend/src/components/EpsChart.vue
+++ b/stockingly-frontend/src/components/EpsChart.vue
@@ -66,7 +66,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: 'Quarter' 
+        },
       },
       {
         type: 'number',
@@ -75,7 +79,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: 'Amount in USD' 
+        },
       },
     ],
     legend: {
diff --git a/stockingly-frontend/src/components/StockPrice.vue b/stockingly-frontend/src/components/StockPrice.vue
index dcbf2eb..2d3f638 100644
--- a/stockingly-frontend/src/components/StockPrice.vue
+++ b/stockingly-frontend/src/components/StockPrice.vue
@@ -141,6 +141,7 @@ const options = computed(() => {
       stroke: getTickerColor(t),
       tooltip: { renderer: renderer },
       marker: {
+        size: timeToggle.value == '1M' || timeToggle.value == '3M' ? 5 : 1,
         fill: getTickerColor(t),
         stroke: getTickerColor(t)
       }
@@ -164,6 +165,10 @@ const options = computed(() => {
         }, {
           lineDash: [Infinity]
         }],
+        title: {
+          enabled: true,
+          text: 'Closing date' 
+        },
         crossLines: Object.entries(minDates(stockPrice.data ?? []))
           .map(([key, value]: [string, number]) => ({
             type: 'line',
@@ -181,14 +186,19 @@ const options = computed(() => {
           format: '$~s',
           formatter: (params: AgAxisLabelFormatterParams) =>
             params?.formatter?.(params.value)
+              .replace('y', '')
               .replace('k', 'K')
-              .replace('G', 'B') ?? '' + '$'
+              .replace('G', 'B') ?? '' 
         },
         gridStyle: [{
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
         }],
+        title: {
+          enabled: true,
+          text: 'Amount in USD' 
+        },
       },
     ],
     legend: {