Feature/add savings rate to investment timeline (#1104)

* Add line for savings rate

* Update changelog

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 the savings rate to the investment timeline grouped by month
+
 ## 1.174.0 - 27.07.2022
 
 ### Added

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -13,7 +13,7 @@ import {
   getTooltipPositionerMapTop,
   getVerticalHoverLinePlugin
 } from '@ghostfolio/common/chart-helper';
-import { primaryColorRgb } from '@ghostfolio/common/config';
+import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
 import {
   getBackgroundColor,
   getDateFormatString,
@@ -34,6 +34,7 @@ import {
   TimeScale,
   Tooltip
 } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
 import { addDays, isAfter, parseISO, subDays } from 'date-fns';
 
 @Component({
@@ -49,6 +50,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() investments: InvestmentItem[];
   @Input() isInPercent = false;
   @Input() locale: string;
+  @Input() savingsRate = 0;
 
   @ViewChild('chartCanvas') chartCanvas;
 
@@ -57,6 +59,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
 
   public constructor() {
     Chart.register(
+      annotationPlugin,
       BarController,
       BarElement,
       LinearScale,
@@ -158,6 +161,39 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
             interaction: { intersect: false, mode: 'index' },
             maintainAspectRatio: true,
             plugins: <unknown>{
+              annotation: {
+                annotations: {
+                  savingsRate: this.savingsRate
+                    ? {
+                        borderColor: `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.75)`,
+                        borderWidth: 1,
+                        label: {
+                          backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+                          borderRadius: 2,
+                          color: 'white',
+                          content: 'Savings Rate',
+                          display: true,
+                          font: { size: '10px', weight: 'normal' },
+                          padding: {
+                            x: 4,
+                            y: 2
+                          },
+                          position: 'start'
+                        },
+                        scaleID: 'y',
+                        type: 'line',
+                        value: this.savingsRate
+                      }
+                    : undefined,
+                  yAxis: {
+                    borderColor: `rgba(${getTextColor()}, 0.1)`,
+                    borderWidth: 1,
+                    scaleID: 'y',
+                    type: 'line',
+                    value: 0
+                  }
+                }
+              },
               legend: {
                 display: false
               },
@@ -172,6 +208,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 display: true,
                 grid: {
                   borderColor: `rgba(${getTextColor()}, 0.1)`,
+                  borderWidth: this.groupBy ? 0 : 1,
                   color: `rgba(${getTextColor()}, 0.8)`,
                   display: false
                 },

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -40,6 +40,7 @@
             [investments]="investmentsByMonth"
             [locale]="user?.settings?.locale"
             [ngClass]="{ 'd-none': !mode }"
+            [savingsRate]="(hasImpersonationId || user.settings.isRestrictedView) ? undefined : user?.settings?.savingsRate"
           ></gf-investment-chart>
         </div>
       </div>

package.json

@@ -93,6 +93,7 @@
     "cache-manager-redis-store": "2.0.0",
     "chart.js": "3.8.0",
     "chartjs-adapter-date-fns": "2.0.0",
+    "chartjs-plugin-annotation": "2.0.0",
     "chartjs-plugin-datalabels": "2.0.0",
     "cheerio": "1.0.0-rc.6",
     "class-transformer": "0.3.2",

yarn.lock

@@ -6280,6 +6280,11 @@ 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-annotation@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.0.0.tgz#f8a0a6adeac5b9c3206a22263b6651ac81425784"
+  integrity sha512-Gd8X+uaWuD63qHSf4R9SvFIdHbxmP1RBsKfdlQt7oFgsyDYjqP2y0WrbEs1UoE7OXJDm8lfZes2tQQNhEL/EZw==
+
 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"