diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b496f727..139caf897 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 + +- Distinguished the labels _Other_ and _Unknown_ in the portfolio proportion chart component + ## 1.119.0 - 21.02.2022 ### Added 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 75593a164..1bcc0d373 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 @@ -47,9 +47,12 @@ export class PortfolioProportionChartComponent public chart: Chart; public isLoading = true; + private readonly OTHER_KEY = 'OTHER'; + private colorMap: { [symbol: string]: string; } = { + [this.OTHER_KEY]: `rgba(${getTextColor()}, 0.24)`, [UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)` }; @@ -147,30 +150,24 @@ export class PortfolioProportionChartComponent .reverse(); if (this.maxItems && chartDataSorted.length > this.maxItems) { - // Add surplus items to unknown group + // Add surplus items to OTHER group const rest = chartDataSorted.splice( this.maxItems, chartDataSorted.length - 1 ); - let unknownItem = chartDataSorted.find((charDataItem) => { - return charDataItem[0] === UNKNOWN_KEY; - }); - - if (!unknownItem) { - chartDataSorted.push([ - UNKNOWN_KEY, - { name: UNKNOWN_KEY, subCategory: {}, value: new Big(0) } - ]); - unknownItem = chartDataSorted[chartDataSorted.length - 1]; - } + chartDataSorted.push([ + this.OTHER_KEY, + { name: this.OTHER_KEY, subCategory: {}, value: new Big(0) } + ]); + const otherItem = chartDataSorted[chartDataSorted.length - 1]; rest.forEach((restItem) => { - if (unknownItem?.[1]) { - unknownItem[1] = { - name: UNKNOWN_KEY, + if (otherItem?.[1]) { + otherItem[1] = { + name: this.OTHER_KEY, 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 = (data.datasets[context.datasetIndex - 1]?.data?.length ?? 0) + context.dataIndex; - const symbol = - context.chart.data.labels?.[labelIndex] ?? ''; + let symbol = context.chart.data.labels?.[labelIndex] ?? ''; + + if (symbol === this.OTHER_KEY) { + symbol = 'Other'; + } else if (symbol === UNKNOWN_KEY) { + symbol = 'Unknown'; + } const name = this.positions[symbol]?.name;