From dd309aea05407935ed3384650c38218f6753f583 Mon Sep 17 00:00:00 2001
From: Maya Kirova <MKirova@infragistics.com>
Date: Wed, 14 May 2025 13:46:24 +0300
Subject: [PATCH 1/2] Optimize for small sizes on lading page.

---
 .../finance-grid/finance-grid.component.html  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html
index 143dcae..c5b535c 100644
--- a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html
+++ b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html
@@ -1,4 +1,4 @@
-<igx-grid [data]="data$ | async" [rowSelection]="'multiple'" [isLoading]="isLoading" class="grid-sizing">
+<igx-grid [data]="data$ | async" [isLoading]="isLoading" class="grid-sizing">
   <igx-grid-toolbar>
     <igx-grid-toolbar-title>Financial Portfolio</igx-grid-toolbar-title>
       <igx-input-group type="search">
@@ -10,8 +10,8 @@
       <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
     </igx-grid-toolbar-actions>
   </igx-grid-toolbar>
-  <igx-column field="id" header="Symbol" sortable="true" [width]="'7%'"></igx-column>
-  <igx-column field="holdingName" header="Asset" sortable="true" [width]="'15%'">
+  <igx-column field="id" header="Symbol" [width]="'7%'" [minWidth]="'68px'"></igx-column>
+  <igx-column field="holdingName" header="Asset" sortable="true" [width]="'15%'" [minWidth]="'100px'">
     <ng-template igxCell let-cell="cell" let-val>
       <div class="assets-container">
         <igx-avatar [src]="getPathToImage(val)" [shape]="'rounded'"></igx-avatar>
@@ -19,10 +19,8 @@
       </div>
     </ng-template>
   </igx-column>
-  <igx-column field="positions" header="Position" sortable="true" [dataType]="'number'" [width]="'6%'"></igx-column>
-  <igx-column field="value.boughtPrice" header="Average Cost/Share" dataType="currency" sortable="true" [width]="'10%'"></igx-column>
-  <igx-column field="value.currentPrice" header="Last Price" [dataType]="'currency'" sortable="true" [width]="'7%'"></igx-column>
-  <igx-column field="dailyPercentageChange" header="Daily Change %" dataType="percent" [cellClasses]="profitLossValueClasses" sortable="true" [width]="'10%'">
+  <igx-column field="value.currentPrice" header="Last Price" [dataType]="'currency'" [width]="'7%'" [minWidth]="'80px'"></igx-column>
+  <igx-column field="dailyPercentageChange" header="Change %" dataType="percent" [cellClasses]="profitLossValueClasses" [width]="'10%'" [minWidth]="'85px'">
     <ng-template igxCell let-val>
       <div class="assets-container">
         <div>
@@ -37,8 +35,8 @@
       </div>
     </ng-template>
   </igx-column>
-  <igx-column field="marketValue" header="Market Value" [dataType]="'currency'"  sortable="true" [width]="'5%'"></igx-column>
-  <igx-column field="profitLossValue" header="NET Profit/Loss"  sortable="true" dataType="currency" [width]="'10%'" [cellClasses]="profitLossValueClasses">
+  <igx-column field="marketValue" header="Market Value" [dataType]="'currency'" [width]="'5%'" [minWidth]="'100px'"></igx-column>
+  <igx-column field="profitLossValue" header="NET Profit" dataType="currency" [width]="'10%'" [minWidth]="'90px'" [cellClasses]="profitLossValueClasses">
     <ng-template igxCell let-val>
       <div class="assets-container">
         <div>
@@ -53,7 +51,7 @@
       </div>
     </ng-template>
   </igx-column>
-  <igx-column field="profitLossPercentage" header="NET Profit/Loss %" sortable="true" dataType="percent" [width]="'10%'" [cellClasses]="profitLossValueClasses">
+  <igx-column field="profitLossPercentage" header="NET Profit %" dataType="percent" [width]="'10%'" [minWidth]="'98px'" [cellClasses]="profitLossValueClasses">
     <ng-template igxCell let-val>
       <div class="assets-container">
         <div>
@@ -68,7 +66,7 @@
       </div>
     </ng-template>
   </igx-column>
-  <igx-column field="allocation" header="Allocation" sortable="true" dataType="percent" [width]="'10%'">
+  <igx-column field="allocation" header="Allocation" dataType="percent" [width]="'10%'" [minWidth]="'100px'">
     <ng-template igxCell let-val>
       <div class="progress-container">
         <div>
@@ -78,7 +76,9 @@
       </div>
     </ng-template>
   </igx-column>
-  <igx-column field="holdingPeriod" header="Holding Period" sortable="true"  [width]="'8%'">
+  <igx-column field="value.boughtPrice" header="Average Cost" dataType="currency" [width]="'10%'" [minWidth]="'100px'"></igx-column>
+  <igx-column field="positions" header="Position" [dataType]="'number'" [width]="'6%'" [minWidth]="'80px'"></igx-column>
+  <igx-column field="holdingPeriod" header="Holding Period" [width]="'8%'" [minWidth]="'50px'">
     <ng-template igxCell let-val> {{ val }} days </ng-template>
   </igx-column>
 </igx-grid>

From ef832b200566f41c0816ebad6e36c58b5756d33a Mon Sep 17 00:00:00 2001
From: Maya Kirova <MKirova@infragistics.com>
Date: Wed, 14 May 2025 15:49:09 +0300
Subject: [PATCH 2/2] Apply fixed size for progress label.

---
 .../src/app/finance-grid/finance-grid.component.html            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html
index c5b535c..94a03a2 100644
--- a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html
+++ b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html
@@ -69,7 +69,7 @@
   <igx-column field="allocation" header="Allocation" dataType="percent" [width]="'10%'" [minWidth]="'100px'">
     <ng-template igxCell let-val>
       <div class="progress-container">
-        <div>
+        <div style="width: 42px;">
           {{ val | percent : "1.0-2" }}
         </div>
         <igx-linear-bar [value]="val * 100" [animate]="false" textVisibility="false"></igx-linear-bar>