import { Platform } from '@angular/cdk/platform';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
import { G2GaugeModule } from '@yelon/chart/gauge';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@Component({
selector: 'chart-gauge-basic',
template: ` <g2-gauge [title]="'核销率'" height="164" [percent]="percent" [color]="color" /> `,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [G2GaugeModule]
})
export class ChartGaugeBasicComponent implements OnDestroy {
percent = 36;
color = '#2f9cff';
private time$: NzSafeAny;
constructor(platform: Platform, cdr: ChangeDetectorRef) {
if (!platform.isBrowser) return;
this.time$ = setInterval(() => {
this.percent = parseInt((Math.random() * 100).toString(), 10);
this.color = this.percent > 50 ? '#f50' : '#2f9cff';
cdr.detectChanges();
}, 1000);
}
ngOnDestroy(): void {
clearInterval(this.time$);
}
}