Skip to content

Instantly share code, notes, and snippets.

@hijiangtao
Last active September 29, 2020 11:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hijiangtao/5ebc7559d7fd781320258465341b7eac to your computer and use it in GitHub Desktop.
Save hijiangtao/5ebc7559d7fd781320258465341b7eac to your computer and use it in GitHub Desktop.
ngx-charts' Number Card: animations would disturb normal value display when input results update within fixed duration
<app-ux-text-card
[data]="[
{
name: data.name,
value: data.value
}
]"
>
</app-ux-text-card>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ux-billboard-data-tab',
templateUrl: './ux-billboard-data-tab.component.html',
styleUrls: ['./ux-billboard-data-tab.component.scss'],
providers: [UxBillboardDataTabComponentLogic]
})
export class UxBillboardDataTabComponent implements OnInit {
constructor() {}
data = {
name: 'This is a test',
value: 0
};
ngOnInit(): void {
setTimeout(() => {
this.data = {
name: 'This is a test',
value: 1000
};
}, 800);
}
}
<ng-container *ngIf="data$ | async as data">
<ngx-charts-number-card
[view]="[300, 180]"
[scheme]="colorScheme"
[results]="data"
[cardColor]="cardColor"
[animations]="true"
[valueFormatting]="valueFormatting"
>
</ngx-charts-number-card>
</ng-container>
import { Component, Input, OnInit } from '@angular/core';
import { ReplaySubject } from 'rxjs';
interface ChartTextCardModel {
name: string;
value: number;
}
@Component({
selector: 'app-ux-text-card',
templateUrl: './ux-text-card.component.html',
styleUrls: ['./ux-text-card.component.scss']
})
export class UxTextCardComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
colorScheme = {
domain: [
'#5AA454',
'#E44D25',
'#CFC0BB',
'#7aa3e5',
'#a8385d',
'#aae3f5'
]
};
cardColor = '#232837';
data$: ReplaySubject<ChartTextCardModel[]> = new ReplaySubject(1);
/**
* 数据
*/
@Input() set data(val: ChartTextCardModel[]) {
this.data$.next(val);
}
@Input() valueFormatting: (e: any) => any = e => e.value;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment