Feature/harmonize axis style of charts (#1768)

* Harmonize axis style

* Update changelog

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

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"

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)`,
+                  width: 0
-                  display: false
                 },
                 display: true,
                 grid: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
+                  color: ({ scale, tick }) => {
-                  display: false
+                    if (
+                      tick.value === 0 ||
+                      tick.value === scale.max ||
+                      tick.value === scale.min
+                    ) {
+                      return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
+                    }
+
+                    return 'transparent';
+                  }
                 },
                 position: 'right',
                 ticks: {

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"

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)`,
+                  color: ({ scale, tick }) => {
-                  display: false
+                    if (
+                      tick.value === 0 ||
+                      tick.value === scale.max ||
+                      tick.value === scale.min
+                    ) {
+                      return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
+                    }
+
+                    return 'transparent';
+                  }
                 },
                 position: 'right',
                 ticks: {

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)`,
+                  color: ({ scale, tick }) => {
-                  display: false
+                    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,