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,7 +2,8 @@
   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">
+    <div class="col p-0">
+      <div class="chart-container mx-auto position-relative">
         <gf-line-chart
           class="position-absolute"
           symbol="Performance"
@@ -15,6 +16,7 @@
           [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(),