From 1866e26c1dab4de3609a90e76118866e0b93dd99 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 21 Jul 2022 20:36:16 +0200
Subject: [PATCH] Fix distorted tooltip (#1088)

* Fix distorted tooltip

* Update changelog
---
 CHANGELOG.md                                  |  6 ++++
 .../home-overview/home-overview.html          | 28 ++++++++++---------
 .../home-overview/home-overview.scss          |  3 +-
 .../lib/line-chart/line-chart.component.html  |  1 -
 .../lib/line-chart/line-chart.component.ts    |  1 +
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 225ba4b47..27907fb58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fixed the distorted tooltip in the performance chart on the home page
+
 ## 1.170.0 - 19.07.2022
 
 ### Added
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index aad1150fc..db9d9b6bf 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -2,19 +2,21 @@
   class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
   <div class="row w-100">
-    <div class="chart-container col">
-      <gf-line-chart
-        class="position-absolute"
-        symbol="Performance"
-        [currency]="user?.settings?.baseCurrency"
-        [historicalDataItems]="historicalDataItems"
-        [locale]="user?.settings?.locale"
-        [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
-        [showGradient]="true"
-        [showLoader]="false"
-        [showXAxis]="false"
-        [showYAxis]="false"
-      ></gf-line-chart>
+    <div class="col p-0">
+      <div class="chart-container mx-auto position-relative">
+        <gf-line-chart
+          class="position-absolute"
+          symbol="Performance"
+          [currency]="user?.settings?.baseCurrency"
+          [historicalDataItems]="historicalDataItems"
+          [locale]="user?.settings?.locale"
+          [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
+          [showGradient]="true"
+          [showLoader]="false"
+          [showXAxis]="false"
+          [showYAxis]="false"
+        ></gf-line-chart>
+      </div>
       <div
         *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
         class="align-items-center d-flex h-100 justify-content-center w-100"
diff --git a/apps/client/src/app/components/home-overview/home-overview.scss b/apps/client/src/app/components/home-overview/home-overview.scss
index de05e7ccc..a422e79d1 100644
--- a/apps/client/src/app/components/home-overview/home-overview.scss
+++ b/apps/client/src/app/components/home-overview/home-overview.scss
@@ -5,7 +5,8 @@
 
   .chart-container {
     aspect-ratio: 16 / 9;
-    max-height: 50vh;
+    height: auto;
+    max-width: 67rem;
 
     // Fallback for aspect-ratio (using padding hack)
     @supports not (aspect-ratio: 16 / 9) {
diff --git a/libs/ui/src/lib/line-chart/line-chart.component.html b/libs/ui/src/lib/line-chart/line-chart.component.html
index 8d8669b1e..577920888 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.html
+++ b/libs/ui/src/lib/line-chart/line-chart.component.html
@@ -8,6 +8,5 @@
 ></ngx-skeleton-loader>
 <canvas
   #chartCanvas
-  class="h-100"
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
 ></canvas>
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 2d65de50a..a36530ef1 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -175,6 +175,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
           data,
           options: {
             animation: false,
+            aspectRatio: 16 / 9,
             elements: {
               point: {
                 hoverBackgroundColor: getBackgroundColor(),