Add horizontal allocation bar with colors

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -69,6 +69,22 @@
           class="allocationByParent"
         >
           <div class="holdingParents">
+            <div class="holdingParentProportionChart d-flex">
+              @for (
+                parentHolding of element.parents.slice(0, 10);
+                track parentHolding;
+                let i = $index
+              ) {
+                <div
+                  [matTooltip]="parentHolding.name"
+                  [style.background-color]="getColor(parentHolding?.symbol)"
+                  [style.width.%]="100 * parentHolding?.allocationInPercentage"
+                >
+                  {{ parentHolding?.symbol }}
+                </div>
+              }
+            </div>
+
             <mat-list>
               @for (parentHolding of element.parents; track parentHolding) {
                 <mat-list-item>

libs/ui/src/lib/top-holdings/top-holdings.component.scss

@@ -22,6 +22,17 @@
   .holdingParents {
     padding: 1em 0;
 
+    .holdingParentProportionChart {
+      height: 2em;
+
+      div {
+        box-sizing: border-box;
+        line-height: 2em;
+        padding: 0 0.5em;
+        overflow: hidden;
+      }
+    }
+
     table,
     tr,
     td {

libs/ui/src/lib/top-holdings/top-holdings.component.ts

@@ -24,10 +24,26 @@ import { MatListModule } from '@angular/material/list';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { get } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 
+const {
+  blue,
+  cyan,
+  grape,
+  green,
+  indigo,
+  lime,
+  orange,
+  pink,
+  red,
+  teal,
+  violet,
+  yellow
+} = require('open-color');
+
 @Component({
   animations: [
     trigger('detailExpand', [
@@ -44,10 +60,11 @@ import { Subject } from 'rxjs';
     CommonModule,
     GfValueComponent,
     MatButtonModule,
+    MatListModule,
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
-    MatListModule,
+    MatTooltipModule,
     NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -65,6 +82,10 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  private colorMap: {
+    [symbol: string]: string;
+  } = {};
+
   public dataSource = new MatTableDataSource<HoldingWithParents>();
   public displayedColumns: string[] = [
     'name',
@@ -75,6 +96,37 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
 
   private unsubscribeSubject = new Subject<void>();
 
+  private colorPaletteIndex = 0;
+  private colorPalette = [
+    blue[5],
+    teal[5],
+    lime[5],
+    orange[5],
+    pink[5],
+    violet[5],
+    indigo[5],
+    cyan[5],
+    green[5],
+    yellow[5],
+    red[5],
+    grape[5]
+  ];
+
+  public getColor(symbol) {
+    if (this.colorMap[symbol]) {
+      // Reuse color
+      return this.colorMap[symbol];
+    } else {
+      const color = this.colorPalette[this.colorPaletteIndex];
+      this.colorPaletteIndex =
+        this.colorPaletteIndex < this.colorPalette.length
+          ? this.colorPaletteIndex + 1
+          : 0;
+      this.colorMap[symbol] = color;
+      return color;
+    }
+  }
+
   public ngOnChanges() {
     this.isLoading = true;