sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/improve labels in portfolio proportion chart (#720)

Browse Source 
* Improve labels for OTHER and UNKNOWN

* Update changelog
This commit is contained in:
Thomas Kaul 2022-02-22 21:12:02 +01:00 committed by GitHub
parent 68d07cc8d4
commit 1dd670a7c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -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/), 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). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Changed
- Distinguished the labels _Other_ and _Unknown_ in the portfolio proportion chart component
## 1.119.0 - 21.02.2022 ## 1.119.0 - 21.02.2022
### Added ### Added

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

@ -47,9 +47,12 @@ export class PortfolioProportionChartComponent
public chart: Chart; public chart: Chart;
public isLoading = true; public isLoading = true;
private readonly OTHER_KEY = 'OTHER';
private colorMap: { private colorMap: {
[symbol: string]: string; [symbol: string]: string;
} = { } = {
[this.OTHER_KEY]: `rgba(${getTextColor()}, 0.24)`,
[UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)` [UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)`
}; };
@ -147,30 +150,24 @@ export class PortfolioProportionChartComponent
.reverse(); .reverse();
if (this.maxItems && chartDataSorted.length > this.maxItems) { if (this.maxItems && chartDataSorted.length > this.maxItems) {
// Add surplus items to unknown group // Add surplus items to OTHER group
const rest = chartDataSorted.splice( const rest = chartDataSorted.splice(
this.maxItems, this.maxItems,
chartDataSorted.length - 1 chartDataSorted.length - 1
); );
let unknownItem = chartDataSorted.find((charDataItem) => { chartDataSorted.push([
return charDataItem[0] === UNKNOWN_KEY; this.OTHER_KEY,
}); { name: this.OTHER_KEY, subCategory: {}, value: new Big(0) }
]);
if (!unknownItem) { const otherItem = chartDataSorted[chartDataSorted.length - 1];
chartDataSorted.push([
UNKNOWN_KEY,
{ name: UNKNOWN_KEY, subCategory: {}, value: new Big(0) }
]);
unknownItem = chartDataSorted[chartDataSorted.length - 1];
}
rest.forEach((restItem) => { rest.forEach((restItem) => {
if (unknownItem?.[1]) { if (otherItem?.[1]) {
unknownItem[1] = { otherItem[1] = {
name: UNKNOWN_KEY, name: this.OTHER_KEY,
subCategory: {}, subCategory: {},
value: unknownItem[1].value.plus(restItem[1].value) value: otherItem[1].value.plus(restItem[1].value)
}; };
} }
}); });
@ -287,8 +284,13 @@ export class PortfolioProportionChartComponent
const labelIndex = const labelIndex =
(data.datasets[context.datasetIndex - 1]?.data?.length ?? (data.datasets[context.datasetIndex - 1]?.data?.length ??
0) + context.dataIndex; 0) + context.dataIndex;
const symbol = let symbol = context.chart.data.labels?.[labelIndex] ?? '';
context.chart.data.labels?.[labelIndex] ?? '';
if (symbol === this.OTHER_KEY) {
symbol = 'Other';
} else if (symbol === UNKNOWN_KEY) {
symbol = 'Unknown';
}
const name = this.positions[<string>symbol]?.name; const name = this.positions[<string>symbol]?.name;