From 9ed82ac82b1bbfdb0ffc3633238313360f413a35 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Wed, 8 Sep 2021 22:03:33 +0200 Subject: [PATCH] Feature/improve labels of allocation chart by symbol (#353) * Improve labels * Update changelog --- CHANGELOG.md | 6 ++ .../portfolio-proportion-chart.component.ts | 60 ++++++++++--------- .../allocations/allocations-page.html | 3 +- .../allocations/allocations-page.scss | 2 +- package.json | 2 +- yarn.lock | 2 +- 6 files changed, 41 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1df86a61..29befcc1 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 + +### Added + +- Added labels to the allocation chart by symbol on desktop + ## 1.48.0 - 07.09.2021 ### Added diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts index 6ed016e3..e98d594a 100644 --- a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts +++ b/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts @@ -17,7 +17,6 @@ import { ArcElement } from 'chart.js'; import { DoughnutController } from 'chart.js'; import { Chart } from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels'; -import { sum } from 'lodash'; import * as Color from 'color'; @Component({ @@ -34,7 +33,7 @@ export class PortfolioProportionChartComponent @Input() keys: string[]; @Input() locale: string; @Input() maxItems?: number; - @Input() showLabels: boolean; + @Input() showLabels = false; @Input() positions: { [symbol: string]: Pick & { value: number }; }; @@ -51,7 +50,13 @@ export class PortfolioProportionChartComponent }; public constructor() { - Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip, ChartDataLabels); + Chart.register( + ArcElement, + ChartDataLabels, + DoughnutController, + LinearScale, + Tooltip + ); } public ngOnInit() {} @@ -229,8 +234,6 @@ export class PortfolioProportionChartComponent labels }; - const showLabels = this.showLabels || false; - if (this.chartCanvas) { if (this.chart) { this.chart.data = data; @@ -239,11 +242,31 @@ export class PortfolioProportionChartComponent this.chart = new Chart(this.chartCanvas.nativeElement, { data, options: { - layout: { - padding: 60, - }, cutout: '70%', + layout: { + padding: this.showLabels === true ? 100 : 0 + }, plugins: { + datalabels: { + color: (context) => { + return this.getColorPalette()[ + context.dataIndex % this.getColorPalette().length + ]; + }, + display: this.showLabels === true ? 'auto' : false, + labels: { + index: { + align: 'end', + anchor: 'end', + formatter: (value, context) => { + return value > 0 + ? context.chart.data.labels[context.dataIndex] + : ''; + }, + offset: 8 + } + } + }, legend: { display: false }, tooltip: { callbacks: { @@ -265,27 +288,6 @@ export class PortfolioProportionChartComponent } } } - }, - datalabels: { - display: function(ctx) { - const value = ctx.dataset.data[ctx.dataIndex]; - return showLabels === true && ctx.datasetIndex === 0 && value > sum(ctx.dataset.data) / 10; - }, - font: { - weight: 'bold', - }, - color: this.getColorPalette()[0], - labels: { - index: { - align: 'end', - anchor: 'end', - font: {size: 18}, - formatter: function(value, ctx) { - return ctx.chart.data.labels[ctx.dataIndex]; - }, - offset: 8, - } - } } } }, 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 3b47c5c9..eee9081d 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html @@ -68,7 +68,6 @@ diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss index c3f28b7e..0c82daa9 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss @@ -1,7 +1,7 @@ :host { .allocations-by-symbol { gf-portfolio-proportion-chart { - max-width: 67vh; + max-width: 80vh; } } diff --git a/package.json b/package.json index 6a74b217..c506ba96 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "cache-manager-redis-store": "2.0.0", "chart.js": "3.5.0", "chartjs-adapter-date-fns": "2.0.0", - "chartjs-plugin-datalabels": "^2.0.0", + "chartjs-plugin-datalabels": "2.0.0", "cheerio": "1.0.0-rc.6", "class-transformer": "0.3.2", "class-validator": "0.13.1", diff --git a/yarn.lock b/yarn.lock index 31086f63..b5479a0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6112,7 +6112,7 @@ chartjs-adapter-date-fns@2.0.0: resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b" integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw== -chartjs-plugin-datalabels@^2.0.0: +chartjs-plugin-datalabels@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939" integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==