mirror of https://github.com/ghostfolio/ghostfolio
Mister_Ideas
1 day ago
committed by
GitHub
GitHub
31 changed files with 989 additions and 92 deletions
@ -0,0 +1,44 @@ |
|||
:host { |
|||
display: inline-flex; |
|||
} |
|||
|
|||
.dot { |
|||
background-color: var(--bs-success, #198754); |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
height: 0.5rem; |
|||
opacity: 0.65; |
|||
position: relative; |
|||
width: 0.5rem; |
|||
|
|||
&::after { |
|||
border: 2px solid var(--bs-success, #198754); |
|||
border-radius: 50%; |
|||
content: ''; |
|||
inset: -2px; |
|||
opacity: 0; |
|||
position: absolute; |
|||
} |
|||
|
|||
&.pulse::after { |
|||
animation: gf-live-pulse 1.2s ease-out; |
|||
} |
|||
} |
|||
|
|||
@keyframes gf-live-pulse { |
|||
from { |
|||
opacity: 0.8; |
|||
transform: scale(1); |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: scale(2.6); |
|||
} |
|||
} |
|||
|
|||
@media (prefers-reduced-motion: reduce) { |
|||
.dot.pulse::after { |
|||
animation: none; |
|||
} |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
import { AutoRefreshService } from '@ghostfolio/client/services/auto-refresh/auto-refresh.service'; |
|||
|
|||
import { |
|||
ChangeDetectionStrategy, |
|||
Component, |
|||
computed, |
|||
effect, |
|||
ElementRef, |
|||
inject, |
|||
viewChild |
|||
} from '@angular/core'; |
|||
|
|||
/** |
|||
* A small dot which pulses each time the numbers of the page have been |
|||
* refreshed in the background. The title shows the time of the last refresh. |
|||
*/ |
|||
@Component({ |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
selector: 'gf-live-indicator', |
|||
styleUrls: ['./live-indicator.component.scss'], |
|||
template: ` |
|||
@if (lastUpdated()) { |
|||
<span |
|||
class="align-items-center d-flex" |
|||
role="status" |
|||
[attr.aria-label]="title()" |
|||
[title]="title()" |
|||
> |
|||
<span #dot class="dot"></span> |
|||
</span> |
|||
} |
|||
` |
|||
}) |
|||
export class GfLiveIndicatorComponent { |
|||
protected readonly lastUpdated = inject(AutoRefreshService).lastUpdated; |
|||
|
|||
protected readonly title = computed(() => { |
|||
const lastUpdated = this.lastUpdated(); |
|||
|
|||
return lastUpdated |
|||
? $localize`Live` + |
|||
' · ' + |
|||
$localize`Updated` + |
|||
' ' + |
|||
lastUpdated.toLocaleTimeString() |
|||
: ''; |
|||
}); |
|||
|
|||
private readonly dot = viewChild<ElementRef<HTMLElement>>('dot'); |
|||
|
|||
public constructor() { |
|||
effect(() => { |
|||
this.lastUpdated(); |
|||
|
|||
const element = this.dot()?.nativeElement; |
|||
|
|||
if (element) { |
|||
element.classList.remove('pulse'); |
|||
|
|||
// Force a reflow to restart the animation
|
|||
void element.offsetWidth; |
|||
|
|||
element.classList.add('pulse'); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
import { |
|||
AUTO_REFRESH_INTERVAL_MS, |
|||
AUTO_REFRESH_INTERVAL_STORAGE_KEY, |
|||
AutoRefreshService, |
|||
getAutoRefreshInterval |
|||
} from './auto-refresh.service'; |
|||
|
|||
describe('AutoRefreshService', () => { |
|||
const setVisibility = (state: 'hidden' | 'visible') => { |
|||
Object.defineProperty(document, 'visibilityState', { |
|||
configurable: true, |
|||
get: () => state |
|||
}); |
|||
document.dispatchEvent(new Event('visibilitychange')); |
|||
}; |
|||
|
|||
beforeEach(() => { |
|||
jest.useFakeTimers(); |
|||
setVisibility('visible'); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
jest.useRealTimers(); |
|||
}); |
|||
|
|||
it('emits at the interval while the page is visible', () => { |
|||
const service = new AutoRefreshService(); |
|||
const next = jest.fn(); |
|||
const subscription = service.refresh$.subscribe(next); |
|||
|
|||
jest.advanceTimersByTime(AUTO_REFRESH_INTERVAL_MS - 1); |
|||
expect(next).not.toHaveBeenCalled(); |
|||
|
|||
jest.advanceTimersByTime(1); |
|||
expect(next).toHaveBeenCalledTimes(1); |
|||
|
|||
jest.advanceTimersByTime(AUTO_REFRESH_INTERVAL_MS * 2); |
|||
expect(next).toHaveBeenCalledTimes(3); |
|||
|
|||
subscription.unsubscribe(); |
|||
}); |
|||
|
|||
it('pauses while hidden and refreshes immediately when visible again', () => { |
|||
const service = new AutoRefreshService(); |
|||
const next = jest.fn(); |
|||
const subscription = service.refresh$.subscribe(next); |
|||
|
|||
setVisibility('hidden'); |
|||
jest.advanceTimersByTime(AUTO_REFRESH_INTERVAL_MS * 3); |
|||
expect(next).not.toHaveBeenCalled(); |
|||
|
|||
setVisibility('visible'); |
|||
jest.advanceTimersByTime(0); |
|||
expect(next).toHaveBeenCalledTimes(1); |
|||
|
|||
subscription.unsubscribe(); |
|||
}); |
|||
}); |
|||
|
|||
describe('getAutoRefreshInterval', () => { |
|||
const storageWith = (value: string | null) => ({ |
|||
getItem: (key: string) => |
|||
key === AUTO_REFRESH_INTERVAL_STORAGE_KEY ? value : null |
|||
}); |
|||
|
|||
it('returns the default without an override', () => { |
|||
expect(getAutoRefreshInterval(storageWith(null))).toBe( |
|||
AUTO_REFRESH_INTERVAL_MS |
|||
); |
|||
}); |
|||
|
|||
it('returns a valid override', () => { |
|||
expect(getAutoRefreshInterval(storageWith('1000'))).toBe(1000); |
|||
expect(getAutoRefreshInterval(storageWith('30000'))).toBe(30_000); |
|||
}); |
|||
|
|||
it('ignores an override outside of 1 second to 1 minute', () => { |
|||
expect(getAutoRefreshInterval(storageWith('200'))).toBe( |
|||
AUTO_REFRESH_INTERVAL_MS |
|||
); |
|||
expect(getAutoRefreshInterval(storageWith('600000'))).toBe( |
|||
AUTO_REFRESH_INTERVAL_MS |
|||
); |
|||
expect(getAutoRefreshInterval(storageWith('abc'))).toBe( |
|||
AUTO_REFRESH_INTERVAL_MS |
|||
); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,75 @@ |
|||
import { Service, signal } from '@angular/core'; |
|||
import { EMPTY, fromEvent, Observable, timer } from 'rxjs'; |
|||
import { |
|||
distinctUntilChanged, |
|||
map, |
|||
share, |
|||
startWith, |
|||
switchMap |
|||
} from 'rxjs/operators'; |
|||
|
|||
export const AUTO_REFRESH_INTERVAL_MS = 5000; |
|||
export const AUTO_REFRESH_INTERVAL_STORAGE_KEY = 'gf-auto-refresh-ms'; |
|||
|
|||
/** |
|||
* Returns the refresh interval of this device: the stored override (between |
|||
* 1 second and 1 minute) or the default. |
|||
*/ |
|||
export function getAutoRefreshInterval( |
|||
storage?: Pick<Storage, 'getItem'> |
|||
): number { |
|||
try { |
|||
const value = Number( |
|||
(storage ?? globalThis.localStorage)?.getItem( |
|||
AUTO_REFRESH_INTERVAL_STORAGE_KEY |
|||
) |
|||
); |
|||
|
|||
return Number.isFinite(value) && value >= 1000 && value <= 60_000 |
|||
? value |
|||
: AUTO_REFRESH_INTERVAL_MS; |
|||
} catch { |
|||
return AUTO_REFRESH_INTERVAL_MS; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Emits at a fixed interval while the page is visible so that pages can |
|||
* refresh their numbers silently. The timer stops while the tab is hidden |
|||
* and fires once immediately when the tab becomes visible again. |
|||
*/ |
|||
@Service() |
|||
export class AutoRefreshService { |
|||
public readonly lastUpdated = signal<Date | null>(null); |
|||
public readonly refresh$: Observable<void>; |
|||
|
|||
public constructor() { |
|||
let isFirstActivation = true; |
|||
|
|||
this.refresh$ = fromEvent(document, 'visibilitychange').pipe( |
|||
startWith(undefined), |
|||
map(() => document.visibilityState === 'visible'), |
|||
distinctUntilChanged(), |
|||
switchMap((isVisible) => { |
|||
if (!isVisible) { |
|||
return EMPTY; |
|||
} |
|||
|
|||
const interval = getAutoRefreshInterval(); |
|||
const dueTime = isFirstActivation ? interval : 0; |
|||
|
|||
isFirstActivation = false; |
|||
|
|||
return timer(dueTime, interval).pipe(map(() => undefined)); |
|||
}), |
|||
share() |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* To be called by a page after it has silently refreshed its numbers. |
|||
*/ |
|||
public markUpdated() { |
|||
this.lastUpdated.set(new Date()); |
|||
} |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
import { Component, signal } from '@angular/core'; |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { GfFlashOnChangeDirective } from './flash-on-change.directive'; |
|||
|
|||
@Component({ |
|||
imports: [GfFlashOnChangeDirective], |
|||
template: `<tr [gfFlashOnChange]="value()"></tr>` |
|||
}) |
|||
class TestHostComponent { |
|||
public readonly value = signal<number | undefined>(100); |
|||
} |
|||
|
|||
describe('GfFlashOnChangeDirective', () => { |
|||
const setup = () => { |
|||
const fixture = TestBed.createComponent(TestHostComponent); |
|||
fixture.detectChanges(); |
|||
|
|||
return { |
|||
fixture, |
|||
classes: () => fixture.nativeElement.querySelector('tr').classList |
|||
}; |
|||
}; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({ imports: [TestHostComponent] }); |
|||
}); |
|||
|
|||
it('does not flash initially', () => { |
|||
const { classes } = setup(); |
|||
|
|||
expect(classes().contains('gf-flash-up')).toBe(false); |
|||
expect(classes().contains('gf-flash-down')).toBe(false); |
|||
}); |
|||
|
|||
it('flashes up on an increase', () => { |
|||
const { classes, fixture } = setup(); |
|||
|
|||
fixture.componentInstance.value.set(101); |
|||
fixture.detectChanges(); |
|||
|
|||
expect(classes().contains('gf-flash-up')).toBe(true); |
|||
}); |
|||
|
|||
it('flashes down on a decrease', () => { |
|||
const { classes, fixture } = setup(); |
|||
|
|||
fixture.componentInstance.value.set(99); |
|||
fixture.detectChanges(); |
|||
|
|||
expect(classes().contains('gf-flash-down')).toBe(true); |
|||
}); |
|||
|
|||
it('does not flash if the value becomes undefined', () => { |
|||
const { classes, fixture } = setup(); |
|||
|
|||
fixture.componentInstance.value.set(undefined); |
|||
fixture.detectChanges(); |
|||
|
|||
expect(classes().contains('gf-flash-up')).toBe(false); |
|||
expect(classes().contains('gf-flash-down')).toBe(false); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,71 @@ |
|||
import { |
|||
Directive, |
|||
effect, |
|||
ElementRef, |
|||
inject, |
|||
input, |
|||
untracked |
|||
} from '@angular/core'; |
|||
|
|||
import { getValueChangeDirection } from '../value/value-change.helper'; |
|||
|
|||
/** |
|||
* Briefly highlights the host element (e.g. a table row) in green or red if |
|||
* the bound number changes, e.g. after a background refresh. The highlight |
|||
* is styled globally by the `gf-flash-up` and `gf-flash-down` classes. |
|||
*/ |
|||
@Directive({ |
|||
selector: '[gfFlashOnChange]' |
|||
}) |
|||
export class GfFlashOnChangeDirective { |
|||
public readonly gfFlashDigits = input(2); |
|||
public readonly gfFlashOnChange = input<number | null | undefined>(); |
|||
|
|||
private hasValue = false; |
|||
private previousValue: number | null | undefined; |
|||
|
|||
private readonly element = inject<ElementRef<HTMLElement>>(ElementRef); |
|||
|
|||
public constructor() { |
|||
effect(() => { |
|||
const digits = this.gfFlashDigits(); |
|||
const value = this.gfFlashOnChange(); |
|||
|
|||
untracked(() => { |
|||
if (this.hasValue) { |
|||
const direction = getValueChangeDirection({ |
|||
digits, |
|||
currentValue: value, |
|||
previousValue: this.previousValue |
|||
}); |
|||
|
|||
if (direction) { |
|||
this.flash(direction); |
|||
} |
|||
} |
|||
|
|||
this.hasValue = true; |
|||
this.previousValue = value; |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
private flash(aDirection: 'down' | 'up') { |
|||
const element = this.element.nativeElement; |
|||
|
|||
element.classList.remove('gf-flash-down', 'gf-flash-up'); |
|||
|
|||
// Force a reflow to restart the animation
|
|||
void element.offsetWidth; |
|||
|
|||
element.classList.add(`gf-flash-${aDirection}`); |
|||
|
|||
element.addEventListener( |
|||
'animationend', |
|||
() => { |
|||
element.classList.remove('gf-flash-down', 'gf-flash-up'); |
|||
}, |
|||
{ once: true } |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export * from './flash-on-change.directive'; |
|||
@ -0,0 +1,51 @@ |
|||
import { getValueChangeDirection } from './value-change.helper'; |
|||
|
|||
describe('getValueChangeDirection', () => { |
|||
it('detects an increase', () => { |
|||
expect( |
|||
getValueChangeDirection({ |
|||
currentValue: 101, |
|||
digits: 2, |
|||
previousValue: 100 |
|||
}) |
|||
).toBe('up'); |
|||
}); |
|||
|
|||
it('detects a decrease', () => { |
|||
expect( |
|||
getValueChangeDirection({ |
|||
currentValue: 99.5, |
|||
digits: 2, |
|||
previousValue: 100 |
|||
}) |
|||
).toBe('down'); |
|||
}); |
|||
|
|||
it('ignores changes below the displayed precision', () => { |
|||
expect( |
|||
getValueChangeDirection({ |
|||
currentValue: 100.001, |
|||
digits: 2, |
|||
previousValue: 100 |
|||
}) |
|||
).toBeUndefined(); |
|||
}); |
|||
|
|||
it('ignores values which are not finite numbers', () => { |
|||
expect( |
|||
getValueChangeDirection({ |
|||
currentValue: NaN, |
|||
digits: 2, |
|||
previousValue: 100 |
|||
}) |
|||
).toBeUndefined(); |
|||
|
|||
expect( |
|||
getValueChangeDirection({ |
|||
currentValue: '101', |
|||
digits: 2, |
|||
previousValue: 100 |
|||
}) |
|||
).toBeUndefined(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,32 @@ |
|||
/** |
|||
* Returns the direction in which a displayed number has changed, or |
|||
* `undefined` if it is unchanged at the displayed precision. |
|||
*/ |
|||
export function getValueChangeDirection({ |
|||
currentValue, |
|||
digits, |
|||
previousValue |
|||
}: { |
|||
currentValue: unknown; |
|||
digits: number; |
|||
previousValue: unknown; |
|||
}): 'down' | 'up' | undefined { |
|||
if ( |
|||
typeof currentValue !== 'number' || |
|||
typeof previousValue !== 'number' || |
|||
!Number.isFinite(currentValue) || |
|||
!Number.isFinite(previousValue) |
|||
) { |
|||
return undefined; |
|||
} |
|||
|
|||
const factor = 10 ** digits; |
|||
const difference = |
|||
Math.round(currentValue * factor) - Math.round(previousValue * factor); |
|||
|
|||
if (difference === 0) { |
|||
return undefined; |
|||
} |
|||
|
|||
return difference > 0 ? 'up' : 'down'; |
|||
} |
|||
Loading…
Reference in new issue