widgets/implementations/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts
OnChanges
OnDestroy
providers |
ChartEventsService
ChartAlarmsService
|
selector | c8y-datapoints-graph-widget-view |
standalone | true |
imports |
A11yModule
CommonModule
ChartsComponent
CoreModule
TooltipModule
BsDropdownModule
PopoverModule
AlarmsModule
TimeContextComponent
|
templateUrl | ./datapoints-graph-widget-view.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
constructor(formBuilder: FormBuilder, translate: TranslateService, widgetTimeContextDateRangeService: WidgetTimeContextDateRangeService, dashboardContextComponent: ContextDashboardComponent)
|
|||||||||||||||
Parameters :
|
config |
Type : DatapointsGraphWidgetConfig
|
filterSeverity | ||||||
filterSeverity(eventTarget: any)
|
||||||
Parameters :
Returns :
void
|
handleDatapointOutOfSync | ||||||
handleDatapointOutOfSync(dpOutOfSync: DatapointsGraphKPIDetails)
|
||||||
Parameters :
Returns :
void
|
ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
timePropsChanged | ||||||
timePropsChanged(timeProps: TimeContextProps)
|
||||||
Parameters :
Returns :
void
|
toggleAlarmEventType | ||||||
toggleAlarmEventType(alarmOrEvent: AlarmOrEventExtended)
|
||||||
Parameters :
Returns :
void
|
toggleChart | ||||||
toggleChart(datapoint: DatapointsGraphKPIDetails)
|
||||||
Parameters :
Returns :
void
|
toggleMarkedArea | ||||||
toggleMarkedArea(alarm: AlarmDetailsExtended)
|
||||||
Parameters :
Returns :
void
|
updateAlarmsAndEvents | ||||||
updateAlarmsAndEvents(alarmsEventsConfigs: AlarmOrEventExtended[])
|
||||||
Parameters :
Returns :
void
|
updateDashboardTimeContext | ||||||
updateDashboardTimeContext(timeProps: DatapointsGraphWidgetTimeProps)
|
||||||
Parameters :
Returns :
void
|
updateTimeRangeOnRealtime | ||||||
updateTimeRangeOnRealtime(timeRange: Pick<DatapointsGraphWidgetConfig | "dateFrom" | "dateTo">)
|
||||||
Parameters :
Returns :
void
|
AGGREGATION_ICONS |
Default value : AGGREGATION_ICONS
|
AGGREGATION_TEXTS |
Default value : AGGREGATION_TEXTS
|
alarms |
Type : AlarmDetailsExtended[]
|
Default value : []
|
alerts |
Type : DynamicComponentAlertAggregator | undefined
|
chartComponent |
Type : ChartsComponent
|
Decorators :
@ViewChild(ChartsComponent)
|
datapointsOutOfSync |
Default value : new Map<DatapointsGraphKPIDetails, boolean>()
|
Readonly disableZoomInLabel |
Default value : gettext('Disable zoom in')
|
displayConfig |
Type : DatapointsGraphWidgetConfig | undefined
|
enabledMarkedAreaAlarmType |
Type : string | undefined
|
Readonly enableZoomInLabel |
Default value : gettext(
'Click to enable zoom, then click and drag on the desired area in the chart.'
)
|
events |
Type : EventDetailsExtended[]
|
Default value : []
|
hasAtLeastOneAlarmActive |
Default value : true
|
hasAtLeastOneDatapointActive |
Default value : true
|
Readonly hideDatapointLabel |
Default value : gettext('Hide data point')
|
isMarkedAreaEnabled |
Default value : false
|
Readonly showDatapointLabel |
Default value : gettext('Show data point')
|
timeControlsFormGroup |
Type : ReturnType<>
|
timeProps |
Type : DatapointsGraphWidgetTimeProps | undefined
|
config | ||||||
getconfig()
|
||||||
setconfig(value: DatapointsGraphWidgetConfig)
|
||||||
Parameters :
Returns :
void
|
<div class="p-l-16 p-r-16">
<div class="d-flex gap-16 a-i-start">
<div
class="btn-group btn-group-sm flex-no-shrink"
*ngIf="!displayConfig?.widgetInstanceGlobalTimeContext"
>
<button
class="btn btn-default"
[attr.aria-label]="'Aggregation' | translate"
tooltip="{{
(displayConfig?.aggregation
? AGGREGATION_TEXTS[displayConfig.aggregation]
: AGGREGATION_TEXTS.undefined
) | translate
}}"
placement="top"
container="body"
type="button"
[adaptivePosition]="false"
[delay]="500"
>
<i
class="icon-14"
[c8yIcon]="
displayConfig?.aggregation
? AGGREGATION_ICONS[displayConfig.aggregation]
: AGGREGATION_ICONS.undefined
"
></i>
</button>
<c8y-time-context
class="d-contents"
(contextChange)="timePropsChanged($event)"
[changedDateContext]="timeProps"
[controlsAvailable]="{
realtime: true,
timeRange: displayConfig?.displayDateSelection,
interval: displayConfig?.displayDateSelection,
aggregation: displayConfig?.displayAggregationSelection
}"
></c8y-time-context>
</div>
<c8y-alarms-filter
class="d-contents form-group-sm"
*ngIf="hasAtLeastOneAlarmActive"
(filterApplied)="filterSeverity($event)"
></c8y-alarms-filter>
<div class="m-l-auto btn-group btn-group-sm flex-no-shrink">
<button
class="btn btn-default"
[attr.aria-label]="'Save as image' | translate"
tooltip="{{ 'Save as image' | translate }}"
container="body"
type="button"
(click)="chart.saveAsImage()"
[adaptivePosition]="false"
>
<i
class="icon-14"
c8yIcon="image-file-checked"
></i>
</button>
</div>
</div>
<div
class="d-flex"
style="align-items: center"
>
<button
class="btn-help btn-help--sm m-r-8"
[attr.aria-label]="'Help' | translate"
[popover]="legendHelpTemplate"
placement="bottom"
triggers="focus"
container="body"
[adaptivePosition]="false"
></button>
<div class="inner-scroll">
<div class="flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4">
<div
class="c8y-datapoint-pill flex-no-shrink"
title="{{ datapoint.label }} - {{ datapoint.__target.name }}"
*ngFor="let datapoint of displayConfig.datapoints"
[ngClass]="{ active: datapoint.__active }"
>
<i
class="text-warning m-l-4"
c8yIcon="exclamation-triangle"
[tooltip]="'At least 1 active data points must be active.' | translate"
container="body"
*ngIf="!hasAtLeastOneDatapointActive && datapoint.__active"
[adaptivePosition]="false"
></i>
<button
class="c8y-datapoint-pill__btn"
title="{{
(datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate
}} "
type="button"
(click)="toggleChart(datapoint)"
>
<i
class="icon-14"
[c8yIcon]="datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'"
></i>
</button>
<div class="c8y-datapoint-pill__label c8y-datapoint-pill__btn">
<i
class="m-r-4 icon-14"
c8yIcon="circle"
[ngStyle]="{
color: datapoint.color
}"
></i>
<span
class="text-truncate"
[ngClass]="{ 'text-muted': !datapoint.__active }"
>
<span class="text-truncate">
{{ datapoint.label }}
</span>
<small class="text-muted text-10">
{{ datapoint.__target.name }}
</small>
</span>
<i
class="text-warning m-l-4"
c8yIcon="exclamation-triangle"
[tooltip]="
'Measurements received for this data point may be out of sync.' | translate
"
container="body"
*ngIf="datapointsOutOfSync.get(datapoint)"
[adaptivePosition]="false"
></i>
</div>
</div>
<!-- Alarms -->
<ng-container *ngFor="let alarm of alarms">
<div
class="c8y-alarm-pill flex-no-shrink"
title="{{ alarm.filters.type }} "
*ngIf="alarm.__active"
>
<i
class="text-warning m-l-4"
c8yIcon="exclamation-triangle"
[tooltip]="
'Alarm of this type is currently active and outside of the selected time range'
| translate
"
container="body"
*ngIf="displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)"
[adaptivePosition]="false"
></i>
<button
class="c8y-alarm-pill__btn"
title="{{ alarm.filters.type }} "
type="button"
(click)="toggleAlarmEventType(alarm)"
>
<i
class="icon-14"
[c8yIcon]="alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'"
></i>
</button>
<button
class="c8y-alarm-pill__label c8y-alarm-pill__btn"
(click)="toggleMarkedArea(alarm)"
[ngClass]="{
active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType
}"
>
<span
class="circle-icon-wrapper circle-icon-wrapper--small m-r-4"
[style.background-color]="alarm.color"
>
<i
class="stroked-icon"
c8yIcon="bell"
></i>
</span>
<span
class="text-truncate"
[ngClass]="{ 'text-muted': alarm.__hidden }"
>
<span class="text-truncate">
{{ alarm.filters.type }}
</span>
<small class="text-muted text-10">
{{ alarm.__target.name }}
</small>
</span>
</button>
</div>
</ng-container>
<!-- Events -->
<ng-container *ngFor="let event of events">
<div
class="c8y-event-pill flex-no-shrink"
title="{{ event.filters.type }}"
*ngIf="event.__active"
>
<button
class="c8y-event-pill__btn"
title="{{ event.filters.type }} "
type="button"
(click)="toggleAlarmEventType(event)"
>
<i
class="icon-14"
[c8yIcon]="event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'"
></i>
</button>
<div class="c8y-event-pill__label c8y-event-pill__btn">
<span
class="circle-icon-wrapper circle-icon-wrapper--small m-r-4"
[ngStyle]="{ 'background-color': event.color }"
>
<i
class="stroked-icon"
c8yIcon="c8y-events"
></i>
</span>
<span
class="text-truncate"
[ngClass]="{ 'text-muted': event.__hidden }"
>
<span class="text-truncate">
{{ event.filters.type }}
</span>
<small class="text-muted text-10">
{{ event.__target.name }}
</small>
</span>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
<c8y-charts
#chart
[config]="displayConfig"
[alerts]="alerts"
(updateAlarmsAndEvents)="updateAlarmsAndEvents($event)"
(configChangeOnZoomOut)="updateDashboardTimeContext($event)"
(datapointOutOfSync)="handleDatapointOutOfSync($event)"
(timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"
(isMarkedAreaEnabled)="isMarkedAreaEnabled = $event"
></c8y-charts>
<ng-template #legendHelpTemplate>
<div [innerHTML]="legendHelp"></div>
</ng-template>