Fix distorted tooltip (#1088)

* Fix distorted tooltip

* Update changelog

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

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"

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) {

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>

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(),