diff --git a/projects/addon-charts/components/pie-chart/pie-chart.directive.ts b/projects/addon-charts/components/pie-chart/pie-chart.directive.ts index 6b4427d3176c..d16f3c643c68 100644 --- a/projects/addon-charts/components/pie-chart/pie-chart.directive.ts +++ b/projects/addon-charts/components/pie-chart/pie-chart.directive.ts @@ -16,41 +16,41 @@ import {BehaviorSubject, map, pairwise, switchMap, takeWhile} from 'rxjs'; }) export class TuiPieChartDirective { private readonly sector$ = new BehaviorSubject([0, 0]); + private readonly el = tuiInjectElement(); + private readonly performance = inject(WA_PERFORMANCE); + private readonly animationFrame$ = inject(WA_ANIMATION_FRAME); + private readonly speed = inject(TUI_ANIMATIONS_SPEED); + protected readonly $ = this.sector$ + .pipe( + pairwise(), + switchMap(([prev, cur]) => { + const now = this.performance.now(); + const startDelta = cur[0] - prev[0]; + const endDelta = cur[1] - prev[1]; - constructor() { - const el = tuiInjectElement(); - const performance = inject(WA_PERFORMANCE); - const animationFrame$ = inject(WA_ANIMATION_FRAME); - const speed = inject(TUI_ANIMATIONS_SPEED); - - this.sector$ - .pipe( - pairwise(), - switchMap(([prev, cur]) => { - const now = performance.now(); - const startDelta = cur[0] - prev[0]; - const endDelta = cur[1] - prev[1]; - - return animationFrame$.pipe( - map((timestamp) => - tuiEaseInOutQuad( - tuiClamp((timestamp - now) / tuiGetDuration(speed), 0, 1), + return this.animationFrame$.pipe( + map((timestamp) => + tuiEaseInOutQuad( + tuiClamp( + (timestamp - now) / tuiGetDuration(this.speed), + 0, + 1, ), ), - takeWhile((progress) => progress < 1, true), - map((progress) => [ - prev[0] + startDelta * progress, - cur[1] > 359 ? cur[1] : prev[1] + endDelta * progress, - ]), - ); - }), - tuiZonefree(), - takeUntilDestroyed(), - ) - .subscribe(([start, end]) => - el.setAttribute('d', tuiDescribeSector(start, end)), - ); - } + ), + takeWhile((progress) => progress < 1, true), + map((progress) => [ + prev[0] + startDelta * progress, + cur[1] > 359 ? cur[1] : prev[1] + endDelta * progress, + ]), + ); + }), + tuiZonefree(), + takeUntilDestroyed(), + ) + .subscribe(([start, end]) => + this.el.setAttribute('d', tuiDescribeSector(start, end)), + ); @Input() public set tuiPieChart(sector: readonly [number, number]) {