diff --git a/CHANGELOG.md b/CHANGELOG.md index 9af9d9490..11e0c65d9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts index ed8d9e199..b8842cea0 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts +++ b/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(); 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(); diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html index eebf007d6..74b9330e2 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html @@ -4,9 +4,10 @@

Allocations

diff --git a/libs/ui/src/lib/activities-filter/activities-filter.component.html b/libs/ui/src/lib/activities-filter/activities-filter.component.html index ff39a6750..98c40d4b8 100644 --- a/libs/ui/src/lib/activities-filter/activities-filter.component.html +++ b/libs/ui/src/lib/activities-filter/activities-filter.component.html @@ -30,4 +30,9 @@ {{ filter | gfSymbol }} + diff --git a/libs/ui/src/lib/activities-filter/activities-filter.component.scss b/libs/ui/src/lib/activities-filter/activities-filter.component.scss index f40444914..363005aab 100644 --- a/libs/ui/src/lib/activities-filter/activities-filter.component.scss +++ b/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)); + } } diff --git a/libs/ui/src/lib/activities-filter/activities-filter.component.ts b/libs/ui/src/lib/activities-filter/activities-filter.component.ts index 6e8eea64f..72d083c90 100644 --- a/libs/ui/src/lib/activities-filter/activities-filter.component.ts +++ b/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(); @@ -59,8 +61,8 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy { }); } - public ngOnChanges() { - if (this.allFilters) { + public ngOnChanges(changes: SimpleChanges) { + 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]); } } diff --git a/libs/ui/src/lib/activities-filter/activities-filter.module.ts b/libs/ui/src/lib/activities-filter/activities-filter.module.ts index a192296fd..66b8800da 100644 --- a/libs/ui/src/lib/activities-filter/activities-filter.module.ts +++ b/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] diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts index 207c9b3ca..a81e585cd 100644 --- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts +++ b/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: { + animation: false, cutout: '70%', layout: { padding: this.showLabels === true ? 100 : 0 diff --git a/package.json b/package.json index e9b44e268..9749f12d9 100644 --- a/package.json +++ b/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": {