You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.0 KiB
109 lines
3.0 KiB
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
Input,
|
|
OnChanges
|
|
} from '@angular/core';
|
|
import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
|
|
import { format, isDate } from 'date-fns';
|
|
import { isNumber } from 'lodash';
|
|
|
|
@Component({
|
|
selector: 'gf-value',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
templateUrl: './value.component.html',
|
|
styleUrls: ['./value.component.scss']
|
|
})
|
|
export class ValueComponent implements OnChanges {
|
|
@Input() colorizeSign = false;
|
|
@Input() currency = '';
|
|
@Input() isCurrency = false;
|
|
@Input() isInteger = false;
|
|
@Input() isPercent = false;
|
|
@Input() label = '';
|
|
@Input() locale = '';
|
|
@Input() position = '';
|
|
@Input() size = '';
|
|
@Input() value: number | string = '';
|
|
|
|
public absoluteValue = 0;
|
|
public formattedDate = '';
|
|
public formattedValue = '';
|
|
public isDate = false;
|
|
public isNumber = false;
|
|
public useAbsoluteValue = false;
|
|
|
|
public constructor() {}
|
|
|
|
public ngOnChanges() {
|
|
if (this.value || this.value === 0) {
|
|
if (isNumber(this.value)) {
|
|
this.isDate = false;
|
|
this.isNumber = true;
|
|
this.absoluteValue = Math.abs(<number>this.value);
|
|
|
|
if (this.colorizeSign) {
|
|
this.useAbsoluteValue = true;
|
|
if (this.currency || this.isCurrency) {
|
|
try {
|
|
this.formattedValue = this.absoluteValue.toLocaleString(
|
|
this.locale,
|
|
{
|
|
maximumFractionDigits: 2,
|
|
minimumFractionDigits: 2
|
|
}
|
|
);
|
|
} catch {}
|
|
} else if (this.isPercent) {
|
|
try {
|
|
this.formattedValue = (this.absoluteValue * 100).toLocaleString(
|
|
this.locale,
|
|
{
|
|
maximumFractionDigits: 2,
|
|
minimumFractionDigits: 2
|
|
}
|
|
);
|
|
} catch {}
|
|
}
|
|
} else if (this.isPercent) {
|
|
try {
|
|
this.formattedValue = (this.value * 100).toLocaleString(
|
|
this.locale,
|
|
{
|
|
maximumFractionDigits: 2,
|
|
minimumFractionDigits: 2
|
|
}
|
|
);
|
|
} catch {}
|
|
} else if (this.currency || this.isCurrency) {
|
|
try {
|
|
this.formattedValue = this.value?.toLocaleString(this.locale, {
|
|
maximumFractionDigits: 2,
|
|
minimumFractionDigits: 2
|
|
});
|
|
} catch {}
|
|
} else if (this.isInteger) {
|
|
try {
|
|
this.formattedValue = this.value?.toLocaleString(this.locale, {
|
|
maximumFractionDigits: 0,
|
|
minimumFractionDigits: 0
|
|
});
|
|
} catch {}
|
|
}
|
|
} else {
|
|
try {
|
|
if (isDate(new Date(this.value))) {
|
|
this.isDate = true;
|
|
this.isNumber = false;
|
|
|
|
this.formattedDate = format(
|
|
new Date(<string>this.value),
|
|
DEFAULT_DATE_FORMAT
|
|
);
|
|
}
|
|
} catch {}
|
|
}
|
|
}
|
|
}
|
|
}
|