From 636cc119e68e7ef2cd54eaad039ee92ade01a3fa Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Mon, 29 May 2023 16:35:27 +0200
Subject: [PATCH] Marker style

---
 .../src/components/BalanceSheet.vue           |   2 +-
 .../src/components/EmployeesChart.vue         |   2 +-
 .../src/components/EpsChart.vue               |   2 +-
 .../src/components/EpsComparisonChart.vue     | 209 +++++++++---------
 .../src/components/StockPrice.vue             |   2 +-
 5 files changed, 108 insertions(+), 109 deletions(-)

diff --git a/stockingly-frontend/src/components/BalanceSheet.vue b/stockingly-frontend/src/components/BalanceSheet.vue
index 79b5b6f..863cafa 100644
--- a/stockingly-frontend/src/components/BalanceSheet.vue
+++ b/stockingly-frontend/src/components/BalanceSheet.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Balance sheet</v-card-title>
     </v-card-item>
diff --git a/stockingly-frontend/src/components/EmployeesChart.vue b/stockingly-frontend/src/components/EmployeesChart.vue
index 054f04f..ac7010b 100644
--- a/stockingly-frontend/src/components/EmployeesChart.vue
+++ b/stockingly-frontend/src/components/EmployeesChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Employees over time</v-card-title>
     </v-card-item>
diff --git a/stockingly-frontend/src/components/EpsChart.vue b/stockingly-frontend/src/components/EpsChart.vue
index b7c15fd..9109b1a 100644
--- a/stockingly-frontend/src/components/EpsChart.vue
+++ b/stockingly-frontend/src/components/EpsChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Earnings per Share (EPS)</v-card-title>
     </v-card-item>
diff --git a/stockingly-frontend/src/components/EpsComparisonChart.vue b/stockingly-frontend/src/components/EpsComparisonChart.vue
index 9606368..d549b79 100644
--- a/stockingly-frontend/src/components/EpsComparisonChart.vue
+++ b/stockingly-frontend/src/components/EpsComparisonChart.vue
@@ -1,112 +1,111 @@
 <template>
-    <v-row>
-      <v-col cols="12">
-        <v-card>
-          <v-card-item>
-            <v-card-title>Past Performance</v-card-title>
-          </v-card-item>
-          <v-card-text>
-            <v-skeleton-loader class="chart-loader" v-if="epsCompData.loading" />
-            <ag-charts-vue class="chart" v-else :options="options" />
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </template>
+  <v-card variant="outlined">
+    <v-card-item>
+      <v-card-title>Past Performance</v-card-title>
+    </v-card-item>
+    <v-card-text>
+      <v-skeleton-loader class="chart-loader" v-if="epsCompData.loading" />
+      <ag-charts-vue class="chart" v-else :options="options" />
+    </v-card-text>
+  </v-card>
+</template>
    
-  <script setup lang="ts">
-  import { EpsComp, getEpsComp } from '@/api';
-  import { defineLoader } from '@/api/loader';
-  import { DateTime } from 'luxon';
-  import { AgAxisLabelFormatterParams } from 'ag-charts-community';
-  import { roundTo } from 'round-to';
-  import { onMounted, computed } from 'vue';
-  import { AgChartsVue } from 'ag-charts-vue3';
-  
-  const renderer = (params: any) => ({
-    title: params.title,
-    content: DateTime.fromMillis(params.xValue).toFormat('yyyy-MM') + ': ' + roundTo(params.yValue, 4) + '%',
-  });
-  
-  const props = defineProps<{
-    tickers: string[],
-    colors: string[]
-  }>();
-  
-  const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)];
-  
-  const epsCompData = defineLoader<EpsComp[]>(() => getEpsComp(props.tickers));
-  
-  const options = computed(() => {
-    if (epsCompData.loading) return null;
-  
-    return {
-      theme: 'ag-material',
-      data: epsCompData.data?.map(e => ({ ...e, quarter: Date.parse(e.quarter) })),
-      series: props.tickers.map((t: string) => ({
-        xKey: 'quarter',
-        type: 'line',
-        yKey: t,
-        yName: t,
+<script setup lang="ts">
+import { EpsComp, getEpsComp } from '@/api';
+import { defineLoader } from '@/api/loader';
+import { DateTime } from 'luxon';
+import { AgAxisLabelFormatterParams } from 'ag-charts-community';
+import { roundTo } from 'round-to';
+import { onMounted, computed } from 'vue';
+import { AgChartsVue } from 'ag-charts-vue3';
+
+const renderer = (params: any) => ({
+  title: params.title,
+  content: DateTime.fromMillis(params.xValue).toFormat('yyyy-MM') + ': ' + roundTo(params.yValue, 4) + '%',
+});
+
+const props = defineProps<{
+  tickers: string[],
+  colors: string[]
+}>();
+
+const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)];
+
+const epsCompData = defineLoader<EpsComp[]>(() => getEpsComp(props.tickers));
+
+const options = computed(() => {
+  if (epsCompData.loading) return null;
+
+  return {
+    theme: 'ag-material',
+    data: epsCompData.data?.map(e => ({ ...e, quarter: Date.parse(e.quarter) })),
+    series: props.tickers.map((t: string) => ({
+      xKey: 'quarter',
+      type: 'line',
+      yKey: t,
+      yName: t,
+      stroke: getTickerColor(t),
+      marker: {
         fill: getTickerColor(t),
-        stroke: getTickerColor(t),
-        tooltip: { renderer: renderer },
-        highlightStyle: {
-          item: { fillOpacity: 0 },
-          series: { enabled: false }
+        stroke: getTickerColor(t)
+      },
+      tooltip: { renderer: renderer },
+      highlightStyle: {
+        item: { fillOpacity: 0 },
+        series: { enabled: false }
+      },
+    })),
+    axes: [
+      {
+        type: 'category',
+        position: 'bottom',
+        label: {
+          autoRotate: true,
+          autoRotateAngle: 335,
+          formatter: (params: any) => {
+            return DateTime.fromMillis(parseInt(params.value)).toFormat('yyyy-MM');
+          }
         },
-      })),
-      axes: [
-        {
-          type: 'category',
-          position: 'bottom',
-          label: {
-            autoRotate: true,
-            autoRotateAngle: 335,
-            formatter: (params: any) => {
-              return DateTime.fromMillis(parseInt(params.value)).toFormat('yyyy-MM');
-            }
-          },
-          gridStyle: [
-            {
-              lineDash: [Infinity],
-            }, {
-                lineDash: [Infinity],
-            }
-          ],
-        },
-        {
-          type: 'number',
-          position: 'left',
-            label: {
-                format: '$~s',
-                formatter: (params: AgAxisLabelFormatterParams) => {
-                params?.formatter?.(params.value)
-                return params.value + '%';
-                }
-            },
-          gridStyle: [{
+        gridStyle: [
+          {
             lineDash: [Infinity],
           }, {
-              lineDash: [Infinity],
-          }],
-          crossLines:[
-            {
-                type: 'range',
-                value: 0,
-                lineDash: [6, 3],
-                stroke: 'black',
-            }
-          ]
+            lineDash: [Infinity],
+          }
+        ],
+      },
+      {
+        type: 'number',
+        position: 'left',
+        label: {
+          format: '$~s',
+          formatter: (params: AgAxisLabelFormatterParams) => {
+            params?.formatter?.(params.value)
+            return params.value + '%';
+          }
         },
-      ],
-      legend: {
-        position: 'bottom',
-      }
-    };
-  });
-  
-  onMounted(() => {
-    epsCompData.load();
-  });
-  </script>
\ No newline at end of file
+        gridStyle: [{
+          lineDash: [Infinity],
+        }, {
+          lineDash: [Infinity],
+        }],
+        crossLines: [
+          {
+            type: 'range',
+            value: 0,
+            lineDash: [6, 3],
+            stroke: 'black',
+          }
+        ]
+      },
+    ],
+    legend: {
+      position: 'bottom',
+    }
+  };
+});
+
+onMounted(() => {
+  epsCompData.load();
+});
+</script>
\ No newline at end of file
diff --git a/stockingly-frontend/src/components/StockPrice.vue b/stockingly-frontend/src/components/StockPrice.vue
index 040dc57..d99070a 100644
--- a/stockingly-frontend/src/components/StockPrice.vue
+++ b/stockingly-frontend/src/components/StockPrice.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Stock price over time</v-card-title>
     </v-card-item>