@WidgetComponent
File
Implements
Metadata
providers |
WidgetframeService
|
selector |
nm-info-count |
styleUrls |
info-count.component.scss |
templateUrl |
./info-count.component.html |
Index
Widget inputs
|
|
|
Widget outputs
|
|
Properties
|
|
Methods
|
|
Constructor
constructor(http: HttpClient, currentLocaleService: CurrentLocaleService)
|
|
Parameters :
Name |
Type |
Optional |
http |
HttpClient
|
no
|
currentLocaleService |
CurrentLocaleService
|
no
|
|
Methods
Protected
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
Private
setData
|
setData(data: )
|
|
|
Public
_id
|
_id:
|
Decorators : WidgetId
|
|
colorScheme
|
colorScheme: object
|
Type : object
|
Default value : {
domain: ["#ffffff"],
}
|
|
data
|
data: any[]
|
Type : any[]
|
|
Private
dataInput
|
dataInput:
|
Default value : new ReplaySubject<any>(1)
|
Decorators : WidgetInput
|
|
Sets the data used by the embedded 'ngx-charts-number-card' component to display the count
|
Private
unsubscribe
|
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
|
valueClass
|
valueClass: String
|
Type : String
|
Default value : "nm-5-digets"
|
|
view
|
view: any[]
|
Type : any[]
|
Default value : [283, 100]
|
|
import {
combineLatest as observableCombineLatest,
ReplaySubject,
timer as observableTimer,
} from "rxjs";
import { map, mergeMap, takeUntil } from "rxjs/operators";
import { Component, OnDestroy } from "@angular/core";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
WidgetComponent,
WidgetConfiguration,
WidgetConfigure,
WidgetId,
WidgetInput,
} from "../../widget.metadata";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { HttpClient } from "@angular/common/http";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";
import { Link } from "../../../components/hal/hal";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { WidgetframeComponentConfiguration } from "../../widgetframe/widgetframe.component";
declare var contextPath: string;
export interface InfoCountConfiguration
extends WidgetframeComponentConfiguration {
/**
* Sets CSS class name for the widget header
*/
header: string;
/**
* Shows/Hides the widget header @default(true)
*/
withHeader?: boolean;
}
@WidgetComponent("nm-info-count")
@Component({
selector: "nm-info-count",
templateUrl: "./info-count.component.html",
styleUrls: ["./info-count.component.scss"],
providers: [WidgetframeService],
})
export class InfoCountComponentWidget implements OnDestroy {
data: any[];
view: any[] = [283, 100];
valueClass: String = "nm-5-digets";
colorScheme = {
domain: ["#ffffff"],
};
public withHeader: boolean;
@WidgetConfiguration()
public configuration: WidgetConfig<InfoCountConfiguration>;
/**
* Sets the data used by the embedded 'ngx-charts-number-card' component to display the count
*/
@WidgetInput("data")
private dataInput = new ReplaySubject<any>(1);
@WidgetId()
public _id;
private unsubscribe = NgUnsubscribe.create();
constructor(
private http: HttpClient,
private currentLocaleService: CurrentLocaleService
) {
this.data = [
{
name: "",
value: 0,
},
];
}
@WidgetConfigure()
protected configureWidget(
configuration: WidgetConfig<InfoCountConfiguration>
) {
this.withHeader = getOrDefault(
configuration.configuration.withHeader,
true
);
this.dataInput.pipe(takeUntil(this.unsubscribe)).subscribe((data) => {
this.setData(data);
});
if (!configuration._links || !configuration._links["data"]) {
return;
}
let href = (<Link>configuration._links["data"]).href;
observableCombineLatest(
observableTimer(0, 5 * 60 * 1000),
this.currentLocaleService.getCurrentLocale(),
(interval, locale) => interval
)
.pipe(
mergeMap((interval) => this.http.get(href)),
map((res) => res["data"][0]),
takeUntil(this.unsubscribe)
)
.subscribe((data) => {
this.setData(data);
});
}
private setData(data) {
if (data[0].value.toString().length < 5) {
this.valueClass = "nm-4-digets";
} else if (data[0].value.toString().length === 5) {
this.valueClass = "nm-5-digets";
} else if (data[0].value.toString().length === 6) {
this.valueClass = "nm-6-digets";
} else if (data[0].value.toString().length > 6) {
this.valueClass = "nm-7-digets";
}
this.data = data;
}
ngOnDestroy() {
this.unsubscribe.destroy();
}
}
<nm-widgetframe
[header]="configuration.configuration['header']"
[configuration]="configuration"
widgetId="{{ _id }}"
[toolbarInvisible]="!withHeader"
>
<div slot="title" class="nm-widgetframe__title">
{{ configuration.configuration["title"] | translate }}
</div>
<div
slot="content"
class="nm-widgetframe__content"
style="text-align: center"
>
<ngx-charts-number-card
[view]="view"
[ngClass]="valueClass"
[scheme]="colorScheme"
[results]="data"
>
</ngx-charts-number-card>
</div>
</nm-widgetframe>
Legend
Html element with directive