Release/1.143.0 (#871)

* Release 1.143.0
  * Improve filtering by tags

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).
 
+## 1.143.0 - 26.04.2022
+
+### Changed
+
+- Improved the filtering by tags
+
 ## 1.142.0 - 25.04.2022
 
 ### Added

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -17,7 +17,7 @@ import { Market, ToggleOption } from '@ghostfolio/common/types';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page' },
@@ -39,7 +39,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     [code: string]: { name: string; value: number };
   };
   public deviceType: string;
+  public filters$ = new Subject<string[]>();
   public hasImpersonationId: boolean;
+  public isLoading = false;
   public markets: {
     [key in Market]: { name: string; value: number };
   };
@@ -122,6 +124,26 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         this.hasImpersonationId = !!aId;
       });
 
+    this.filters$
+      .pipe(
+        distinctUntilChanged(),
+        switchMap((tags) => {
+          this.isLoading = true;
+
+          return this.dataService.fetchPortfolioDetails({ tags });
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe((portfolioDetails) => {
+        this.portfolioDetails = portfolioDetails;
+
+        this.initializeAnalysisData(this.period);
+
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -341,25 +363,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onUpdateFilters(tags: string[] = []) {
-    this.update(tags);
-  }
-
-  public update(tags?: string[]) {
-    this.initialize();
-
-    this.dataService
-      .fetchPortfolioDetails({ tags })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((portfolioDetails) => {
-        this.portfolioDetails = portfolioDetails;
-
-        this.initializeAnalysisData(this.period);
-
-        this.changeDetectorRef.markForCheck();
-      });
-  }
-
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -4,9 +4,10 @@
       <h3 class="d-flex justify-content-center mb-3" i18n>Allocations</h3>
       <gf-activities-filter
         [allFilters]="tags"
+        [isLoading]="isLoading"
         [ngClass]="{ 'd-none': tags.length <= 0 }"
         [placeholder]="placeholder"
-        (valueChanged)="onUpdateFilters($event)"
+        (valueChanged)="filters$.next($event)"
       ></gf-activities-filter>
     </div>
   </div>

libs/ui/src/lib/activities-filter/activities-filter.component.html

@@ -30,4 +30,9 @@
       {{ filter | gfSymbol }}
     </mat-option>
   </mat-autocomplete>
+  <mat-spinner
+    matSuffix
+    [diameter]="20"
+    [ngClass]="{ 'd-none': !isLoading }"
+  ></mat-spinner>
 </mat-form-field>

libs/ui/src/lib/activities-filter/activities-filter.component.scss

@@ -7,6 +7,10 @@
     .mat-form-field-infix {
       border-top: 0 solid transparent !important;
     }
+
+    .mat-spinner circle {
+      stroke: rgba(var(--dark-dividers));
+    }
   }
 
   .mat-chip {
@@ -19,4 +23,8 @@
   .mat-form-field {
     color: rgba(var(--light-primary-text));
   }
+
+  .mat-spinner circle {
+    stroke: rgba(var(--light-dividers));
+  }
 }

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -8,6 +8,7 @@ import {
   OnChanges,
   OnDestroy,
   Output,
+  SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
@@ -27,6 +28,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   @Input() allFilters: string[];
+  @Input() isLoading: boolean;
   @Input() placeholder: string;
 
   @Output() valueChanged = new EventEmitter<string[]>();
@@ -59,8 +61,8 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
       });
   }
 
-  public ngOnChanges() {
+  public ngOnChanges(changes: SimpleChanges) {
-    if (this.allFilters) {
+    if (changes.allFilters?.currentValue) {
       this.updateFilter();
     }
   }
@@ -103,6 +105,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   private updateFilter() {
     this.filters$.next(this.allFilters);
 
-    this.valueChanged.emit(this.searchKeywords);
+    // Emit an array with a new reference
+    this.valueChanged.emit([...this.searchKeywords]);
   }
 }

libs/ui/src/lib/activities-filter/activities-filter.module.ts

@@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 
 import { ActivitiesFilterComponent } from './activities-filter.component';
@@ -17,6 +18,7 @@ import { ActivitiesFilterComponent } from './activities-filter.component';
     MatAutocompleteModule,
     MatChipsModule,
     MatInputModule,
+    MatProgressSpinnerModule,
     ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -192,13 +192,8 @@ export class PortfolioProportionChartComponent
         // Reuse color
         item.color = this.colorMap[symbol];
       } else {
-        const color =
+        item.color =
           this.getColorPalette()[index % this.getColorPalette().length];
-
-        // Store color for reuse
-        this.colorMap[symbol] = color;
-
-        item.color = color;
       }
     });
 
@@ -265,6 +260,7 @@ export class PortfolioProportionChartComponent
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: <unknown>{
+            animation: false,
             cutout: '70%',
             layout: {
               padding: this.showLabels === true ? 100 : 0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.142.0",
+  "version": "1.143.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {