Browse Source

Remove default color scheme fallback

pull/7975/head
Thomas Kaul 2 weeks ago
parent
commit
f418358bf1
  1. 22
      apps/client/src/app/components/investment-chart/investment-chart.component.ts
  2. 3
      libs/common/src/lib/config.ts
  3. 2
      libs/common/src/lib/helper.spec.ts
  4. 2
      libs/common/src/lib/helper.ts
  5. 4
      libs/ui/src/lib/treemap-chart/treemap-chart.component.stories.ts

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

@ -7,11 +7,7 @@ import {
getZeroLineAnnotation, getZeroLineAnnotation,
transformTickToAbbreviation transformTickToAbbreviation
} from '@ghostfolio/common/chart-helper'; } from '@ghostfolio/common/chart-helper';
import { import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
DEFAULT_COLOR_SCHEME,
primaryColorRgb,
secondaryColorRgb
} from '@ghostfolio/common/config';
import { getLocale, parseDate } from '@ghostfolio/common/helper'; import { getLocale, parseDate } from '@ghostfolio/common/helper';
import { LineChartItem } from '@ghostfolio/common/interfaces'; import { LineChartItem } from '@ghostfolio/common/interfaces';
import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface'; import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
@ -174,15 +170,13 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
this.chart.update(); this.chart.update();
} else { } else {
const colorScheme = this.colorScheme ?? DEFAULT_COLOR_SCHEME;
this.chart = new Chart<'bar' | 'line'>( this.chart = new Chart<'bar' | 'line'>(
this.chartCanvas().nativeElement, this.chartCanvas().nativeElement,
{ {
data: chartData, data: chartData,
options: { options: {
animation: false, animation: false,
elements: getChartElementsOptions(colorScheme), elements: getChartElementsOptions(this.colorScheme),
interaction: { intersect: false, mode: 'index' }, interaction: { intersect: false, mode: 'index' },
maintainAspectRatio: true, maintainAspectRatio: true,
plugins: { plugins: {
@ -210,7 +204,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
value: this.savingsRate value: this.savingsRate
} }
: undefined, : undefined,
yAxis: getZeroLineAnnotation(colorScheme) yAxis: getZeroLineAnnotation(this.colorScheme)
} }
}, },
legend: { legend: {
@ -218,18 +212,18 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
}, },
tooltip: this.getTooltipPluginConfiguration(), tooltip: this.getTooltipPluginConfiguration(),
verticalHoverLine: { verticalHoverLine: {
color: getChartBorderColor(colorScheme) color: getChartBorderColor(this.colorScheme)
} }
}, },
responsive: true, responsive: true,
scales: { scales: {
x: getTimeAxisOptions({ x: getTimeAxisOptions({
colorScheme,
borderWidth: this.groupBy ? 0 : 1, borderWidth: this.groupBy ? 0 : 1,
colorScheme: this.colorScheme,
locale: this.locale locale: this.locale
}), }),
y: getValueAxisOptions({ y: getValueAxisOptions({
colorScheme, colorScheme: this.colorScheme,
display: !this.isInPercentage, display: !this.isInPercentage,
tickCallback: (tickValue) => { tickCallback: (tickValue) => {
return transformTickToAbbreviation(Number(tickValue)); return transformTickToAbbreviation(Number(tickValue));
@ -238,7 +232,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
} }
}, },
plugins: [ plugins: [
getVerticalHoverLinePlugin(this.chartCanvas(), colorScheme) getVerticalHoverLinePlugin(this.chartCanvas(), this.colorScheme)
], ],
type: this.groupBy ? 'bar' : 'line' type: this.groupBy ? 'bar' : 'line'
} }
@ -251,7 +245,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
TooltipOptions<'bar' | 'line'> TooltipOptions<'bar' | 'line'>
> { > {
return getTimeSeriesTooltipOptions<'bar' | 'line'>({ return getTimeSeriesTooltipOptions<'bar' | 'line'>({
colorScheme: this.colorScheme ?? DEFAULT_COLOR_SCHEME, colorScheme: this.colorScheme,
currency: this.isInPercentage ? undefined : this.currency, currency: this.isInPercentage ? undefined : this.currency,
groupBy: this.groupBy, groupBy: this.groupBy,
locale: this.isInPercentage ? undefined : this.locale, locale: this.isInPercentage ? undefined : this.locale,

3
libs/common/src/lib/config.ts

@ -8,7 +8,7 @@ import {
import { JobOptions, JobStatus } from 'bull'; import { JobOptions, JobStatus } from 'bull';
import ms from 'ms'; import ms from 'ms';
import { ColorScheme, DateRange } from './types'; import { DateRange } from './types';
export const ghostfolioPrefix = 'GF'; export const ghostfolioPrefix = 'GF';
@ -100,7 +100,6 @@ export const PORTFOLIO_SNAPSHOT_COMPUTATION_QUEUE_PRIORITY_LOW =
export const STATISTICS_GATHERING_QUEUE = 'STATISTICS_GATHERING_QUEUE'; export const STATISTICS_GATHERING_QUEUE = 'STATISTICS_GATHERING_QUEUE';
export const DEFAULT_COLOR_SCHEME: ColorScheme = 'LIGHT';
export const DEFAULT_CURRENCY = 'USD'; export const DEFAULT_CURRENCY = 'USD';
export const DEFAULT_DATE_FORMAT_MONTH_YEAR = 'MMM yyyy'; export const DEFAULT_DATE_FORMAT_MONTH_YEAR = 'MMM yyyy';
export const DEFAULT_DATE_RANGE: DateRange = 'max'; export const DEFAULT_DATE_RANGE: DateRange = 'max';

2
libs/common/src/lib/helper.spec.ts

@ -373,11 +373,13 @@ describe('Helper', () => {
it('Auto color scheme with operating system in dark mode', () => { it('Auto color scheme with operating system in dark mode', () => {
mockPrefersColorSchemeDark(true); mockPrefersColorSchemeDark(true);
expect(isDarkColorScheme()).toEqual(true); expect(isDarkColorScheme()).toEqual(true);
expect(isDarkColorScheme(null)).toEqual(true);
}); });
it('Auto color scheme with operating system in light mode', () => { it('Auto color scheme with operating system in light mode', () => {
mockPrefersColorSchemeDark(false); mockPrefersColorSchemeDark(false);
expect(isDarkColorScheme()).toEqual(false); expect(isDarkColorScheme()).toEqual(false);
expect(isDarkColorScheme(null)).toEqual(false);
}); });
}); });

2
libs/common/src/lib/helper.ts

@ -608,7 +608,7 @@ export function isCurrencySymbol(aSymbol: string) {
); );
} }
export function isDarkColorScheme(aColorScheme?: ColorScheme) { export function isDarkColorScheme(aColorScheme?: ColorScheme | null) {
if (aColorScheme) { if (aColorScheme) {
return aColorScheme === 'DARK'; return aColorScheme === 'DARK';
} }

4
libs/ui/src/lib/treemap-chart/treemap-chart.component.stories.ts

@ -1,5 +1,3 @@
import { DEFAULT_COLOR_SCHEME } from '@ghostfolio/common/config';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { moduleMetadata } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular';
import type { Meta, StoryObj } from '@storybook/angular'; import type { Meta, StoryObj } from '@storybook/angular';
@ -38,7 +36,7 @@ export const Default: Story = {
args: { args: {
holdings, holdings,
baseCurrency: 'USD', baseCurrency: 'USD',
colorScheme: DEFAULT_COLOR_SCHEME, colorScheme: 'LIGHT',
cursor: undefined, cursor: undefined,
dateRange: 'mtd', dateRange: 'mtd',
locale: 'en-US' locale: 'en-US'

Loading…
Cancel
Save