diff --git a/CHANGELOG.md b/CHANGELOG.md index 98bcdb20f..103a09fbb 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). +## Unreleased + +### Changed + +- Upgraded `svgmap` from version `2.14.0` to `2.19.2` + ## 2.249.0 - 2026-03-10 ### Added diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index b7a031bfa..142d2ea53 100644 --- a/apps/client/src/styles.scss +++ b/apps/client/src/styles.scss @@ -2,7 +2,7 @@ @import './styles/table'; @import './styles/variables'; -@import 'svgmap/dist/svgMap'; +@import 'svgmap/style.min'; :root { --dark-background: rgb(25, 25, 25); 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 1cd9f48e5..2f5d9e4f7 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 @@ -13,12 +13,11 @@ import { ChangeDetectionStrategy, Component, ElementRef, - EventEmitter, Input, OnChanges, OnDestroy, - Output, - ViewChild + output, + viewChild } from '@angular/core'; import { DataSource } from '@prisma/client'; import { Big } from 'big.js'; @@ -81,15 +80,16 @@ export class GfPortfolioProportionChartComponent @Input() maxItems?: number; @Input() showLabels = false; - @Output() proportionChartClicked = new EventEmitter(); - - @ViewChild('chartCanvas') chartCanvas: ElementRef; - public chart: Chart<'doughnut'>; public isLoading = true; + protected readonly proportionChartClicked = output(); + private readonly OTHER_KEY = 'OTHER'; + private readonly chartCanvas = + viewChild.required>('chartCanvas'); + private colorMap: { [symbol: string]: string; } = {}; @@ -130,47 +130,45 @@ export class GfPortfolioProportionChartComponent }; if (this.keys.length > 0) { + const primaryKey = this.keys[0]; + const secondaryKey = this.keys[1]; + Object.keys(this.data).forEach((symbol) => { - if (this.data[symbol][this.keys[0]]?.toUpperCase()) { - if (chartData[this.data[symbol][this.keys[0]].toUpperCase()]) { - chartData[this.data[symbol][this.keys[0]].toUpperCase()].value = - chartData[ - this.data[symbol][this.keys[0]].toUpperCase() - ].value.plus(this.data[symbol].value || 0); - - if ( - chartData[this.data[symbol][this.keys[0]].toUpperCase()] - ?.subCategory?.[this.data[symbol][this.keys[1]]] - ) { - // @ts-ignore - chartData[ - this.data[symbol][this.keys[0]].toUpperCase() - ].subCategory[this.data[symbol][this.keys[1]]].value = chartData[ - this.data[symbol][this.keys[0]].toUpperCase() - ].subCategory?.[this.data[symbol][this.keys[1]]].value.plus( - this.data[symbol].value || 0 - ); + const asset = this.data[symbol]; + const assetValue = asset.value || 0; + const primaryKeyValue = (asset[primaryKey] as string)?.toUpperCase(); + const secondaryKeyValue = asset[secondaryKey] as string; + + if (primaryKeyValue) { + if (chartData[primaryKeyValue]) { + chartData[primaryKeyValue].value = + chartData[primaryKeyValue].value.plus(assetValue); + + const targetSubCategory = + chartData[primaryKeyValue].subCategory?.[secondaryKeyValue]; + if (targetSubCategory) { + targetSubCategory.value = + targetSubCategory.value.plus(assetValue); } else { - // @ts-ignore - chartData[ - this.data[symbol][this.keys[0]].toUpperCase() - ].subCategory[this.data[symbol][this.keys[1]] ?? UNKNOWN_KEY] = { - value: new Big(this.data[symbol].value || 0) - }; + if (chartData[primaryKeyValue].subCategory) { + chartData[primaryKeyValue].subCategory[ + secondaryKeyValue ?? UNKNOWN_KEY + ] = { + value: new Big(assetValue) + }; + } } } else { - chartData[this.data[symbol][this.keys[0]].toUpperCase()] = { - name: this.data[symbol][this.keys[0]], + chartData[primaryKeyValue] = { + name: asset[primaryKey] as string, subCategory: {}, - value: new Big(this.data[symbol].value || 0) + value: new Big(assetValue) }; - if (this.data[symbol][this.keys[1]]) { - chartData[ - this.data[symbol][this.keys[0]].toUpperCase() - ].subCategory = { - [this.data[symbol][this.keys[1]]]: { - value: new Big(this.data[symbol].value || 0) + if (secondaryKeyValue) { + chartData[primaryKeyValue].subCategory = { + [secondaryKeyValue]: { + value: new Big(assetValue) } }; } @@ -183,10 +181,10 @@ export class GfPortfolioProportionChartComponent } else { chartData[UNKNOWN_KEY] = { name: this.data[symbol].name, - subCategory: this.keys[1] - ? { [this.keys[1]]: { value: new Big(0) } } + subCategory: secondaryKey + ? { [secondaryKey]: { value: new Big(0) } } : undefined, - value: new Big(this.data[symbol].value || 0) + value: new Big(assetValue) }; } } @@ -280,15 +278,15 @@ export class GfPortfolioProportionChartComponent Object.keys(item.subCategory ?? {}).forEach((subCategory) => { if (item.name === UNKNOWN_KEY) { - // @ts-ignore - backgroundColorSubCategory.push(item.color); + backgroundColorSubCategory.push(item.color ?? ''); } else { backgroundColorSubCategory.push( Color(item.color).lighten(lightnessRatio).hex() ); } - // @ts-ignore - dataSubCategory.push(item.subCategory[subCategory].value.toNumber()); + dataSubCategory.push( + item.subCategory?.[subCategory].value.toNumber() ?? 0 + ); labelSubCategory.push(subCategory); lightnessRatio += 0.1; @@ -338,7 +336,7 @@ export class GfPortfolioProportionChartComponent labels }; - if (this.chartCanvas) { + if (this.chartCanvas()) { if (this.chart) { this.chart.data = data; this.chart.options.plugins ??= {}; @@ -347,7 +345,7 @@ export class GfPortfolioProportionChartComponent this.chart.update(); } else { - this.chart = new Chart<'doughnut'>(this.chartCanvas.nativeElement, { + this.chart = new Chart<'doughnut'>(this.chartCanvas().nativeElement, { data, options: { animation: false, diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts index e17044c3f..4b1898b8a 100644 --- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts +++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts @@ -8,15 +8,17 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + DestroyRef, DoCheck, ElementRef, Input, OnChanges, - OnDestroy, OnInit, SimpleChanges, - ViewChild + inject, + viewChild } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormControl, FormsModule, @@ -35,13 +37,12 @@ import { import { MatInput, MatInputModule } from '@angular/material/input'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { isString } from 'lodash'; -import { Subject, tap } from 'rxjs'; +import { tap } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter, - switchMap, - takeUntil + switchMap } from 'rxjs/operators'; import { translate } from '../i18n'; @@ -77,21 +78,21 @@ import { AbstractMatFormField } from '../shared/abstract-mat-form-field'; }) export class GfSymbolAutocompleteComponent extends AbstractMatFormField - implements DoCheck, OnChanges, OnDestroy, OnInit + implements DoCheck, OnChanges, OnInit { @Input() public defaultLookupItems: LookupItem[] = []; @Input() public isLoading = false; - @ViewChild('symbolAutocomplete') public symbolAutocomplete: MatAutocomplete; - @Input() private includeIndices = false; - @ViewChild(MatInput) private input: MatInput; - - public control = new FormControl(); + public readonly control = new FormControl(); public lookupItems: (LookupItem & { assetSubClassString: string })[] = []; - private unsubscribeSubject = new Subject(); + protected readonly symbolAutocomplete = + viewChild.required('symbolAutocomplete'); + + private readonly destroyRef = inject(DestroyRef); + private readonly input = viewChild.required(MatInput); public constructor( public readonly _elementRef: ElementRef, @@ -105,13 +106,22 @@ export class GfSymbolAutocompleteComponent this.controlType = 'symbol-autocomplete'; } + public get empty() { + return this.input().empty; + } + + public set value(value: LookupItem) { + this.control.setValue(value); + super.value = value; + } + public ngOnInit() { if (this.disabled) { this.control.disable(); } this.control.valueChanges - .pipe(takeUntil(this.unsubscribeSubject)) + .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(() => { if (super.value) { super.value.dataSource = null; @@ -136,7 +146,7 @@ export class GfSymbolAutocompleteComponent }), debounceTime(400), distinctUntilChanged(), - takeUntil(this.unsubscribeSubject), + takeUntilDestroyed(this.destroyRef), switchMap((query: string) => { return this.dataService.fetchSymbols({ query, @@ -168,12 +178,8 @@ export class GfSymbolAutocompleteComponent return aLookupItem?.symbol ?? ''; } - public get empty() { - return this.input?.empty; - } - public focus() { - this.input.focus(); + this.input().focus(); } public isValueInOptions(value: string) { @@ -197,18 +203,6 @@ export class GfSymbolAutocompleteComponent } as LookupItem; } - public set value(value: LookupItem) { - this.control.setValue(value); - super.value = value; - } - - public ngOnDestroy() { - super.ngOnDestroy(); - - this.unsubscribeSubject.next(); - this.unsubscribeSubject.complete(); - } - private showDefaultOptions() { this.lookupItems = this.defaultLookupItems.map((lookupItem) => { return { @@ -224,6 +218,7 @@ export class GfSymbolAutocompleteComponent const requiredCheck = super.required ? !super.value?.dataSource || !super.value?.symbol : false; + if (requiredCheck) { this.ngControl.control?.setErrors({ invalidData: true }); } diff --git a/package-lock.json b/package-lock.json index e4cf3382c..9ae63af6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -90,7 +90,7 @@ "reflect-metadata": "0.2.2", "rxjs": "7.8.1", "stripe": "20.3.0", - "svgmap": "2.14.0", + "svgmap": "2.19.2", "tablemark": "4.1.0", "twitter-api-v2": "1.29.0", "yahoo-finance2": "3.13.2", @@ -32339,9 +32339,9 @@ "license": "BSD-2-Clause" }, "node_modules/svgmap": { - "version": "2.14.0", - "resolved": "https://registry.npmjs.org/svgmap/-/svgmap-2.14.0.tgz", - "integrity": "sha512-+Vklx4DO1uv1SFq6wnJWl/dRjX4uRT9CcsIHuADxAcZ+h5X1OSyDVbNdIu837fx5TtYYuaGRhWuFCXIioN/1ww==", + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/svgmap/-/svgmap-2.19.2.tgz", + "integrity": "sha512-mRqRcQiwwSTh9kTOPhjTmd3ywxA9aTfybBHGAoyuGn9CI9PnAQsuZ7H/2/VEIvgJhi1xM5IGBfk8i4/Ke4iTCQ==", "license": "MIT", "dependencies": { "svg-pan-zoom": "^3.6.2" diff --git a/package.json b/package.json index 03f4a527d..fd62729b9 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "reflect-metadata": "0.2.2", "rxjs": "7.8.1", "stripe": "20.3.0", - "svgmap": "2.14.0", + "svgmap": "2.19.2", "tablemark": "4.1.0", "twitter-api-v2": "1.29.0", "yahoo-finance2": "3.13.2",