From 1e42d6bffac3c1267ee3cd1d4564079155a56e50 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 6 Mar 2023 19:58:43 +0100
Subject: [PATCH] Feature/harmonize axis style of charts (#1768)

* Harmonize axis style

* Update changelog
---
 CHANGELOG.md                                   |  1 +
 .../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 ++++++++++++++----
 6 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f64e93f..e2524f6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Harmonized the axis style of charts
 - Removed the environment variable `ENABLE_FEATURE_CUSTOM_SYMBOLS`
 
 ## 1.242.0 - 2023-03-04
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 f7204d02..dc64ed12 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 dd52fbcf..9e6cc9be 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 de706aba..cf6603be 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 6f27bceb..4ce1a453 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 4be8fd12..be43f939 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,