Improve chart size

apps/client/src/app/components/investment-chart/investment-chart.component.html

@@ -2,12 +2,12 @@
   *ngIf="isLoading"
   animation="pulse"
   [theme]="{
-    height: '12rem',
+    height: '100%',
     width: '100%'
   }"
 ></ngx-skeleton-loader>
 <canvas
   #chartCanvas
-  height="50"
+  class="h-100"
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
 ></canvas>

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -92,7 +92,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
             borderColor: (context: unknown) =>
               this.isInFuture(
                 context,
-                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.5)`
+                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
               ),
             borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
           },

apps/client/src/app/pages/tools/analysis/analysis-page.html

@@ -192,7 +192,7 @@
       </mat-card>
     </div>
   </div>
-  <div class="row">
+  <div class="investment-chart row">
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-header>

apps/client/src/app/pages/tools/analysis/analysis-page.scss

@@ -1,4 +1,16 @@
 :host {
+  .investment-chart {
+    .mat-card {
+      .mat-card-content {
+        aspect-ratio: 16 / 9;
+
+        gf-investment-chart {
+          height: 100%;
+        }
+      }
+    }
+  }
+
   .proportion-charts {
     .mat-card {
       .mat-card-content {