From 043ce164148c6c23d4173a4e93b7a242e48098b5 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 5 Mar 2023 16:49:29 +0100
Subject: [PATCH] Harmonize axis style

---
 .../admin-market-data-detail.component.html    |  3 ++-
 .../benchmark-comparator.component.ts          | 17 ++++++++++++-----
 .../components/home-market/home-market.html    |  1 +
 .../investment-chart.component.ts              | 15 +++++++++++----
 .../src/lib/line-chart/line-chart.component.ts | 18 ++++++++++++++----
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
index f7204d02f..dc64ed120 100644
--- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
+++ b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
@@ -1,6 +1,7 @@
 <div>
   <gf-line-chart
     class="mb-4"
+    [colorScheme]="user?.settings?.colorScheme"
     [historicalDataItems]="historicalDataItems"
     [isAnimated]="true"
     [locale]="locale"
@@ -28,7 +29,7 @@
         }"
         [title]="
           (itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
-            | date: defaultDateFormat) ?? ''
+            | date : defaultDateFormat) ?? ''
         "
         (click)="
           onOpenMarketDataDetail({
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
index dd52fbcfd..9e6cc9be3 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
@@ -166,7 +166,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
                 },
                 display: true,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
                 type: 'time',
@@ -177,13 +176,21 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               },
               y: {
                 border: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  display: false
+                  width: 0
                 },
                 display: true,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false
+                  color: ({ scale, tick }) => {
+                    if (
+                      tick.value === 0 ||
+                      tick.value === scale.max ||
+                      tick.value === scale.min
+                    ) {
+                      return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
+                    }
+
+                    return 'transparent';
+                  }
                 },
                 position: 'right',
                 ticks: {
diff --git a/apps/client/src/app/components/home-market/home-market.html b/apps/client/src/app/components/home-market/home-market.html
index de706aba8..cf6603be2 100644
--- a/apps/client/src/app/components/home-market/home-market.html
+++ b/apps/client/src/app/components/home-market/home-market.html
@@ -10,6 +10,7 @@
         symbol="Fear & Greed Index"
         yMax="100"
         yMin="0"
+        [colorScheme]="user?.settings?.colorScheme"
         [historicalDataItems]="historicalDataItems"
         [isAnimated]="true"
         [locale]="user?.settings?.locale"
diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts
index 6f27bceb4..4ce1a453c 100644
--- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts
+++ b/apps/client/src/app/components/investment-chart/investment-chart.component.ts
@@ -283,7 +283,6 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 },
                 display: true,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
                 min: this.daysInMarket
@@ -298,13 +297,21 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
               },
               y: {
                 border: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   display: false
                 },
                 display: !this.isInPercent,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false
+                  color: ({ scale, tick }) => {
+                    if (
+                      tick.value === 0 ||
+                      tick.value === scale.max ||
+                      tick.value === scale.min
+                    ) {
+                      return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
+                    }
+
+                    return 'transparent';
+                  }
                 },
                 position: 'right',
                 ticks: {
diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts
index 4be8fd12d..be43f9394 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -217,7 +217,6 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
                 },
                 display: this.showXAxis,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
                 time: {
@@ -228,12 +227,23 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
               },
               y: {
                 border: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
+                  width: 0
                 },
                 display: this.showYAxis,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false
+                  color: ({ scale, tick }) => {
+                    if (
+                      tick.value === 0 ||
+                      tick.value === scale.max ||
+                      tick.value === scale.min ||
+                      tick.value === this.yMax ||
+                      tick.value === this.yMin
+                    ) {
+                      return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
+                    }
+
+                    return 'transparent';
+                  }
                 },
                 max: this.yMax,
                 min: this.yMin,