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 6f64e93f2..e2524f6d4 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 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,