diff --git a/CHANGELOG.md b/CHANGELOG.md index 90d9d443d..c53af5c02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Persisted the language on url change - Improved the portfolio evolution chart - Removed the data source type `RAKUTEN` +- Refactored the appearance (dark mode) in user settings (from `appearance` to `colorScheme`) ## 1.204.1 - 15.10.2022 diff --git a/apps/api/src/app/user/update-user-setting.dto.ts b/apps/api/src/app/user/update-user-setting.dto.ts index 1da4f908e..97062df9d 100644 --- a/apps/api/src/app/user/update-user-setting.dto.ts +++ b/apps/api/src/app/user/update-user-setting.dto.ts @@ -1,4 +1,8 @@ -import type { Appearance, DateRange, ViewMode } from '@ghostfolio/common/types'; +import type { + ColorScheme, + DateRange, + ViewMode +} from '@ghostfolio/common/types'; import { IsBoolean, IsIn, @@ -8,10 +12,6 @@ import { } from 'class-validator'; export class UpdateUserSettingDto { - @IsIn(['DARK', 'LIGHT']) - @IsOptional() - appearance?: Appearance; - @IsOptional() @IsString() baseCurrency?: string; @@ -20,6 +20,10 @@ export class UpdateUserSettingDto { @IsOptional() benchmark?: string; + @IsIn(['DARK', 'LIGHT']) + @IsOptional() + colorScheme?: ColorScheme; + @IsIn(['1d', '1y', '5y', 'max', 'ytd']) @IsOptional() dateRange?: DateRange; diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index b8c4ab016..957dc8f5a 100644 --- a/apps/client/src/app/app.component.ts +++ b/apps/client/src/app/app.component.ts @@ -13,7 +13,7 @@ import { } from '@ghostfolio/common/config'; import { InfoItem, User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; -import { Appearance } from '@ghostfolio/common/types'; +import { ColorScheme } from '@ghostfolio/common/types'; import { MaterialCssVarsService } from 'angular-material-css-vars'; import { DeviceDetectorService } from 'ngx-device-detector'; import { Subject } from 'rxjs'; @@ -78,7 +78,7 @@ export class AppComponent implements OnDestroy, OnInit { permissions.createUserAccount ); - this.initializeTheme(this.user?.settings.appearance); + this.initializeTheme(this.user?.settings.colorScheme); this.changeDetectorRef.markForCheck(); }); @@ -100,15 +100,15 @@ export class AppComponent implements OnDestroy, OnInit { this.unsubscribeSubject.complete(); } - private initializeTheme(userPreferredAppearance?: Appearance) { - const isDarkTheme = userPreferredAppearance - ? userPreferredAppearance === 'DARK' + private initializeTheme(userPreferredColorScheme?: ColorScheme) { + const isDarkTheme = userPreferredColorScheme + ? userPreferredColorScheme === 'DARK' : window.matchMedia('(prefers-color-scheme: dark)').matches; this.materialCssVarsService.setDarkTheme(isDarkTheme); window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => { - if (!this.user?.settings.appearance) { + if (!this.user?.settings.colorScheme) { this.materialCssVarsService.setDarkTheme(event.matches); } }); diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts index b2ee5f6ec..ff3a5169a 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts +++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts @@ -23,6 +23,8 @@ import { parseDate } from '@ghostfolio/common/helper'; import { LineChartItem, User } from '@ghostfolio/common/interfaces'; +import { ColorScheme } from '@ghostfolio/common/types'; +import { SymbolProfile } from '@prisma/client'; import { Chart, LineController, @@ -33,7 +35,6 @@ import { Tooltip } from 'chart.js'; import annotationPlugin from 'chartjs-plugin-annotation'; -import { SymbolProfile } from '@prisma/client'; @Component({ selector: 'gf-benchmark-comparator', @@ -45,6 +46,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { @Input() benchmarkDataItems: LineChartItem[] = []; @Input() benchmark: string; @Input() benchmarks: Partial[]; + @Input() colorScheme: ColorScheme; @Input() daysInMarket: number; @Input() isLoading: boolean; @Input() locale: string; @@ -127,7 +129,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { tension: 0 }, point: { - hoverBackgroundColor: getBackgroundColor(), + hoverBackgroundColor: getBackgroundColor(this.colorScheme), hoverRadius: 2, radius: 0 } @@ -138,7 +140,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { annotation: { annotations: { yAxis: { - borderColor: `rgba(${getTextColor()}, 0.1)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, borderWidth: 1, scaleID: 'y', type: 'line', @@ -151,7 +153,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { }, tooltip: this.getTooltipPluginConfiguration(), verticalHoverLine: { - color: `rgba(${getTextColor()}, 0.1)` + color: `rgba(${getTextColor(this.colorScheme)}, 0.1)` } }, responsive: true, @@ -159,9 +161,9 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { x: { display: true, grid: { - borderColor: `rgba(${getTextColor()}, 0.1)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, borderWidth: 1, - color: `rgba(${getTextColor()}, 0.8)`, + color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`, display: false }, type: 'time', @@ -173,8 +175,8 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { y: { display: true, grid: { - borderColor: `rgba(${getTextColor()}, 0.1)`, - color: `rgba(${getTextColor()}, 0.8)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, + color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`, display: false, drawBorder: false }, @@ -190,7 +192,9 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { } } }, - plugins: [getVerticalHoverLinePlugin(this.chartCanvas)], + plugins: [ + getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme) + ], type: 'line' }); } @@ -200,6 +204,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { private getTooltipPluginConfiguration() { return { ...getTooltipOptions({ + colorScheme: this.colorScheme, locale: this.locale, unit: '%' }), diff --git a/apps/client/src/app/components/home-holdings/home-holdings.component.ts b/apps/client/src/app/components/home-holdings/home-holdings.component.ts index 354ed2e2e..4125ef614 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts +++ b/apps/client/src/app/components/home-holdings/home-holdings.component.ts @@ -127,6 +127,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit { dataSource, symbol, baseCurrency: this.user?.settings?.baseCurrency, + colorScheme: this.user?.settings?.colorScheme, deviceType: this.deviceType, hasImpersonationId: this.hasImpersonationId, hasPermissionToReportDataGlitch: hasPermission( diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html index ffd67ea3f..9a0cbb54c 100644 --- a/apps/client/src/app/components/home-overview/home-overview.html +++ b/apps/client/src/app/components/home-overview/home-overview.html @@ -16,8 +16,9 @@ class="position-absolute" symbol="Performance" unit="%" - [historicalDataItems]="historicalDataItems" + [colorScheme]="user?.settings?.colorScheme" [hidden]="historicalDataItems?.length === 0" + [historicalDataItems]="historicalDataItems" [isAnimated]="user?.settings?.dateRange === '1d' ? false : true" [locale]="user?.settings?.locale" [ngClass]="{ 'pr-3': deviceType === 'mobile' }" diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts index 032db911a..c789d6053 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts +++ b/apps/client/src/app/components/investment-chart/investment-chart.component.ts @@ -24,7 +24,7 @@ import { } from '@ghostfolio/common/helper'; import { LineChartItem } from '@ghostfolio/common/interfaces'; import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface'; -import { DateRange, GroupBy } from '@ghostfolio/common/types'; +import { ColorScheme, DateRange, GroupBy } from '@ghostfolio/common/types'; import { BarController, BarElement, @@ -47,6 +47,7 @@ import { addDays, format, isAfter, parseISO, subDays } from 'date-fns'; }) export class InvestmentChartComponent implements OnChanges, OnDestroy { @Input() benchmarkDataItems: InvestmentItem[] = []; + @Input() colorScheme: ColorScheme; @Input() currency: string; @Input() daysInMarket: number; @Input() groupBy: GroupBy; @@ -180,7 +181,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { tension: 0 }, point: { - hoverBackgroundColor: getBackgroundColor(), + hoverBackgroundColor: getBackgroundColor(this.colorScheme), hoverRadius: 2, radius: 0 } @@ -213,7 +214,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { } : undefined, yAxis: { - borderColor: `rgba(${getTextColor()}, 0.1)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, borderWidth: 1, scaleID: 'y', type: 'line', @@ -226,7 +227,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { }, tooltip: this.getTooltipPluginConfiguration(), verticalHoverLine: { - color: `rgba(${getTextColor()}, 0.1)` + color: `rgba(${getTextColor(this.colorScheme)}, 0.1)` } }, responsive: true, @@ -234,9 +235,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { x: { display: true, grid: { - borderColor: `rgba(${getTextColor()}, 0.1)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, borderWidth: this.groupBy ? 0 : 1, - color: `rgba(${getTextColor()}, 0.8)`, + color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`, display: false }, type: 'time', @@ -248,8 +249,8 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { y: { display: !this.isInPercent, grid: { - borderColor: `rgba(${getTextColor()}, 0.1)`, - color: `rgba(${getTextColor()}, 0.8)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, + color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`, display: false, drawBorder: false }, @@ -265,7 +266,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { } } }, - plugins: [getVerticalHoverLinePlugin(this.chartCanvas)], + plugins: [ + getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme) + ], type: this.groupBy ? 'bar' : 'line' }); } @@ -277,6 +280,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { private getTooltipPluginConfiguration() { return { ...getTooltipOptions({ + colorScheme: this.colorScheme, currency: this.isInPercent ? undefined : this.currency, locale: this.isInPercent ? undefined : this.locale, unit: this.isInPercent ? '%' : undefined diff --git a/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts index 36b4ae45f..0a7db166e 100644 --- a/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts +++ b/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts @@ -1,7 +1,9 @@ +import { ColorScheme } from '@ghostfolio/common/types'; import { DataSource } from '@prisma/client'; export interface PositionDetailDialogParams { baseCurrency: string; + colorScheme: ColorScheme; dataSource: DataSource; deviceType: string; hasImpersonationId: boolean; diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html index 56a335d4b..e0cc957e1 100644 --- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html +++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html @@ -20,9 +20,10 @@ Sectors Countries Auto Light @@ -267,8 +267,8 @@ class="align-items-center d-flex justify-content-center" color="primary" mat-fab - [routerLink]="[]" [queryParams]="{ createDialog: true }" + [routerLink]="[]" > diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts index b1f600575..96cf2294e 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts @@ -450,6 +450,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit { dataSource, symbol, baseCurrency: this.user?.settings?.baseCurrency, + colorScheme: this.user?.settings?.colorScheme, deviceType: this.deviceType, hasImpersonationId: this.hasImpersonationId, hasPermissionToReportDataGlitch: hasPermission( 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 5a76450a3..a1bf24df9 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html @@ -50,6 +50,7 @@

Calculator

{ let label = context.dataset.label || ''; @@ -39,12 +42,12 @@ export function getTooltipOptions({ }, caretSize: 0, cornerRadius: 2, - footerColor: `rgb(${getTextColor()})`, + footerColor: `rgb(${getTextColor(colorScheme)})`, itemSort: (a, b) => { // Reverse order return b.datasetIndex - a.datasetIndex; }, - titleColor: `rgb(${getTextColor()})`, + titleColor: `rgb(${getTextColor(colorScheme)})`, usePointStyle: true }; } @@ -62,7 +65,10 @@ export function getTooltipPositionerMapTop( }; } -export function getVerticalHoverLinePlugin(chartCanvas) { +export function getVerticalHoverLinePlugin( + chartCanvas, + colorScheme?: ColorScheme +) { return { afterDatasetsDraw: (chart, x, options) => { const active = chart.getActiveElements(); @@ -71,7 +77,7 @@ export function getVerticalHoverLinePlugin(chartCanvas) { return; } - const color = options.color || `rgb(${getTextColor()})`; + const color = options.color || `rgb(${getTextColor(colorScheme)})`; const width = options.width || 1; const { diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts index df0d51900..c1c05103c 100644 --- a/libs/common/src/lib/helper.ts +++ b/libs/common/src/lib/helper.ts @@ -5,6 +5,7 @@ import { de, es, it, nl } from 'date-fns/locale'; import { ghostfolioScraperApiSymbolPrefix, locale } from './config'; import { Benchmark } from './interfaces'; +import { ColorScheme } from './types'; const NUMERIC_REGEXP = /[-]{0,1}[\d]*[.,]{0,1}[\d]+/g; @@ -58,9 +59,10 @@ export function extractNumberFromString(aString: string): number { } } -export function getBackgroundColor() { +export function getBackgroundColor(aColorScheme: ColorScheme) { return getCssVariable( - window.matchMedia('(prefers-color-scheme: dark)').matches + aColorScheme === 'DARK' || + window.matchMedia('(prefers-color-scheme: dark)').matches ? '--dark-background' : '--light-background' ); @@ -133,9 +135,10 @@ export function getNumberFormatGroup(aLocale?: string) { }).value; } -export function getTextColor() { +export function getTextColor(aColorScheme: ColorScheme) { const cssVariable = getCssVariable( - window.matchMedia('(prefers-color-scheme: dark)').matches + aColorScheme === 'DARK' || + window.matchMedia('(prefers-color-scheme: dark)').matches ? '--light-primary-text' : '--dark-primary-text' ); diff --git a/libs/common/src/lib/interfaces/user-settings.interface.ts b/libs/common/src/lib/interfaces/user-settings.interface.ts index 9651cef60..f39ba20eb 100644 --- a/libs/common/src/lib/interfaces/user-settings.interface.ts +++ b/libs/common/src/lib/interfaces/user-settings.interface.ts @@ -1,9 +1,9 @@ -import { DateRange, ViewMode, Appearance } from '@ghostfolio/common/types'; +import { ColorScheme, DateRange, ViewMode } from '@ghostfolio/common/types'; export interface UserSettings { - appearance?: Appearance; baseCurrency?: string; benchmark?: string; + colorScheme?: ColorScheme; dateRange?: DateRange; emergencyFund?: number; isExperimentalFeatures?: boolean; diff --git a/libs/common/src/lib/interfaces/user-with-settings.ts b/libs/common/src/lib/interfaces/user-with-settings.ts index 443acba40..55324ff3d 100644 --- a/libs/common/src/lib/interfaces/user-with-settings.ts +++ b/libs/common/src/lib/interfaces/user-with-settings.ts @@ -1,5 +1,6 @@ import { SubscriptionType } from '@ghostfolio/common/types/subscription.type'; import { Account, Settings, User } from '@prisma/client'; + import { UserSettings } from './user-settings.interface'; export type UserWithSettings = User & { diff --git a/libs/common/src/lib/types/appearance.type.ts b/libs/common/src/lib/types/appearance.type.ts deleted file mode 100644 index 4a61dfb3c..000000000 --- a/libs/common/src/lib/types/appearance.type.ts +++ /dev/null @@ -1 +0,0 @@ -export type Appearance = 'DARK' | 'LIGHT'; diff --git a/libs/common/src/lib/types/color-scheme.ts b/libs/common/src/lib/types/color-scheme.ts new file mode 100644 index 000000000..1f3efce53 --- /dev/null +++ b/libs/common/src/lib/types/color-scheme.ts @@ -0,0 +1 @@ +export type ColorScheme = 'DARK' | 'LIGHT'; diff --git a/libs/common/src/lib/types/index.ts b/libs/common/src/lib/types/index.ts index 10fbc89fd..d70295b53 100644 --- a/libs/common/src/lib/types/index.ts +++ b/libs/common/src/lib/types/index.ts @@ -1,5 +1,6 @@ import type { AccessWithGranteeUser } from './access-with-grantee-user.type'; import { AccountWithValue } from './account-with-value.type'; +import type { ColorScheme } from './color-scheme'; import type { DateRange } from './date-range.type'; import type { Granularity } from './granularity.type'; import { GroupBy } from './group-by.type'; @@ -9,12 +10,11 @@ import type { OrderWithAccount } from './order-with-account.type'; import type { RequestWithUser } from './request-with-user.type'; import { ToggleOption } from './toggle-option.type'; import type { ViewMode } from './view-mode.type'; -import type { Appearance } from './appearance.type'; export type { - Appearance, AccessWithGranteeUser, AccountWithValue, + ColorScheme, DateRange, Granularity, GroupBy, diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts index 2158aa117..820c00bf1 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts @@ -1,4 +1,5 @@ import '@angular/localize/init'; + import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts index 91822e6eb..ed187672f 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts @@ -16,6 +16,7 @@ import { FormBuilder, FormControl } from '@angular/forms'; import { getTooltipOptions } from '@ghostfolio/common/chart-helper'; import { primaryColorRgb } from '@ghostfolio/common/config'; import { transformTickToAbbreviation } from '@ghostfolio/common/helper'; +import { ColorScheme } from '@ghostfolio/common/types'; import { BarController, BarElement, @@ -40,6 +41,7 @@ import { FireCalculatorService } from './fire-calculator.service'; export class FireCalculatorComponent implements AfterViewInit, OnChanges, OnDestroy { + @Input() colorScheme: ColorScheme; @Input() currency: string; @Input() deviceType: string; @Input() fireWealth: number; @@ -182,7 +184,7 @@ export class FireCalculatorComponent options: { plugins: { tooltip: { - ...getTooltipOptions(), + ...getTooltipOptions({ colorScheme: this.colorScheme }), mode: 'index', callbacks: { footer: (items) => { diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts index aadfde80d..dc984314d 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.ts +++ b/libs/ui/src/lib/line-chart/line-chart.component.ts @@ -26,6 +26,7 @@ import { getTextColor } from '@ghostfolio/common/helper'; import { LineChartItem } from '@ghostfolio/common/interfaces'; +import { ColorScheme } from '@ghostfolio/common/types'; import { Chart, Filler, @@ -46,6 +47,7 @@ import { export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { @Input() benchmarkDataItems: LineChartItem[] = []; @Input() benchmarkLabel = ''; + @Input() colorScheme: ColorScheme; @Input() currency: string; @Input() historicalDataItems: LineChartItem[]; @Input() isAnimated = false; @@ -140,7 +142,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { 0, `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)` ); - gradient.addColorStop(1, getBackgroundColor()); + gradient.addColorStop(1, getBackgroundColor(this.colorScheme)); } const data = { @@ -192,7 +194,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { aspectRatio: 16 / 9, elements: { point: { - hoverBackgroundColor: getBackgroundColor(), + hoverBackgroundColor: getBackgroundColor(this.colorScheme), hoverRadius: 2 } }, @@ -205,15 +207,15 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { }, tooltip: this.getTooltipPluginConfiguration(), verticalHoverLine: { - color: `rgba(${getTextColor()}, 0.1)` + color: `rgba(${getTextColor(this.colorScheme)}, 0.1)` } }, scales: { x: { display: this.showXAxis, grid: { - borderColor: `rgba(${getTextColor()}, 0.1)`, - color: `rgba(${getTextColor()}, 0.8)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, + color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`, display: false }, time: { @@ -225,8 +227,8 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { y: { display: this.showYAxis, grid: { - borderColor: `rgba(${getTextColor()}, 0.1)`, - color: `rgba(${getTextColor()}, 0.8)`, + borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, + color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`, display: false }, max: this.yMax, @@ -263,7 +265,9 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { }, spanGaps: true }, - plugins: [getVerticalHoverLinePlugin(this.chartCanvas)], + plugins: [ + getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme) + ], type: 'line' }); } @@ -300,6 +304,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { private getTooltipPluginConfiguration() { return { ...getTooltipOptions({ + colorScheme: this.colorScheme, currency: this.currency, locale: this.locale, unit: this.unit 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 faa83ab00..f5a4ce1ae 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 @@ -14,6 +14,7 @@ import { getTooltipOptions } from '@ghostfolio/common/chart-helper'; import { UNKNOWN_KEY } from '@ghostfolio/common/config'; import { getTextColor } from '@ghostfolio/common/helper'; import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces'; +import { ColorScheme } from '@ghostfolio/common/types'; import { DataSource } from '@prisma/client'; import Big from 'big.js'; import { ChartConfiguration, Tooltip } from 'chart.js'; @@ -34,6 +35,7 @@ export class PortfolioProportionChartComponent implements AfterViewInit, OnChanges, OnDestroy { @Input() baseCurrency: string; + @Input() colorScheme: ColorScheme; @Input() cursor: string; @Input() isInPercent = false; @Input() keys: string[] = []; @@ -59,10 +61,7 @@ export class PortfolioProportionChartComponent private colorMap: { [symbol: string]: string; - } = { - [this.OTHER_KEY]: `rgba(${getTextColor()}, 0.24)`, - [UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)` - }; + } = {}; public constructor() { Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip); @@ -94,6 +93,10 @@ export class PortfolioProportionChartComponent value: Big; }; } = {}; + this.colorMap = { + [this.OTHER_KEY]: `rgba(${getTextColor(this.colorScheme)}, 0.24)`, + [UNKNOWN_KEY]: `rgba(${getTextColor(this.colorScheme)}, 0.12)` + }; Object.keys(this.positions).forEach((symbol) => { if (this.positions[symbol][this.keys[0]]) { @@ -350,6 +353,7 @@ export class PortfolioProportionChartComponent private getTooltipPluginConfiguration(data: ChartConfiguration['data']) { return { ...getTooltipOptions({ + colorScheme: this.colorScheme, currency: this.baseCurrency, locale: this.locale }),