core/dashboard/dashboard.component.ts
Displays a CSS grid which is customizable by the customer. You can set
c8y-dashboard-child
-components on it or position any element on it by
setting the grid CSS properties. On change (resize, or rearrange) the
component emits an change event.
<c8y-title>Hello from outlet</c8y-title>
<c8y-action-bar-item [placement]="'right'">
<button class="btn btn-link" (click)="addRandom()"><i c8yIcon="plus-circle"></i> Add random</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
<button class="btn btn-link" (click)="isFrozen = !isFrozen">
<i [c8yIcon]="isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
</button>
</c8y-action-bar-item>
<c8y-dashboard (dashboardChange)="dashboardChange($event)">
<c8y-dashboard-child
[isFrozen]="isFrozen"
title="dynamic"
*ngFor="let widget of widgets"
#current
>
x: {{ current.x }}<br />
y: {{ current.y }}<br />
width: {{ current.width }}<br />
height: {{ current.height }}<br />
</c8y-dashboard-child>
<c8y-dashboard-child
#cpWidget
[isFrozen]="isFrozen"
[x]="0"
[y]="1"
[width]="3"
[height]="2"
[data]="widget"
[class]="'card card-dashboard panel-title-regular panel-content-branded panel-title-overlay'"
>
<c8y-dashboard-child-title>
<span>World!</span>
</c8y-dashboard-child-title>
x: {{ cpWidget.x }}<br />
y: {{ cpWidget.y }}<br />
width: {{ cpWidget.width }}<br />
height: {{ cpWidget.height }}<br />
</c8y-dashboard-child>
<c8y-dashboard-child
#cpWidget2
[isFrozen]="isFrozen"
[x]="8"
[y]="1"
[width]="4"
[height]="4"
[class]="'card card-dashboard panel-content-dark'"
>
<c8y-dashboard-child-title>
<span>Hello!</span>
</c8y-dashboard-child-title>
<c8y-dashboard-child-action>
<a href="" (click)="cpWidget2.isFrozen = !cpWidget2.isFrozen; (false)">
<i [c8yIcon]="cpWidget2.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
</a>
</c8y-dashboard-child-action>
x: {{ cpWidget2.x }}<br />
y: {{ cpWidget2.y }}<br />
width: {{ cpWidget2.width }}<br />
height: {{ cpWidget2.height }}<br />
</c8y-dashboard-child>
<c8y-dashboard-child
#cpWidget3
[isFrozen]="isFrozen"
[x]="0"
[y]="3"
[width]="4"
[height]="4"
[class]="'card-dashboard panel-content-transparent'"
>
<c8y-dashboard-child-title *ngIf="showTitle">
<span>Transparent!</span>
</c8y-dashboard-child-title>
<c8y-dashboard-child-action>
<a href="" (click)="showTitle = !showTitle; (false)">
<i [c8yIcon]="'heading'"></i> Hide/show title
</a>
</c8y-dashboard-child-action>
<c8y-dashboard-child-action>
<a href="" (click)="cpWidget3.isFrozen = !cpWidget3.isFrozen; (false)">
<i [c8yIcon]="cpWidget3.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
</a>
</c8y-dashboard-child-action>
x: {{ cpWidget3.x }}<br />
y: {{ cpWidget3.y }}<br />
width: {{ cpWidget3.width }}<br />
height: {{ cpWidget3.height }}<br />
</c8y-dashboard-child>
</c8y-dashboard>
changeDetection | ChangeDetectionStrategy.OnPush |
host | { |
selector | c8y-dashboard |
templateUrl | ./dashboard.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor(element: ElementRef, sanitizer: DomSanitizer)
|
|||||||||
Parameters :
|
columns |
Type : number
|
Default value : 12
|
The amount of columns on that dashboard. |
gap |
Type : number
|
Default value : 12
|
The spacing between each children in pixel. |
rows |
Type : number | "auto"
|
Default value : 'auto'
|
The amount of rows to dusplay. Set to auto to auto extend the rows. |
dashboardChange |
Type : EventEmitter
|
An event fired if the dashboard was changed. |
attr.style |
Type : any
|
Returns all positioning styles. Nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |
window:resize |
window:resize()
|
emitChange | ||||||
emitChange(widget: DashboardChildComponent)
|
||||||
Parameters :
Returns :
void
|
ngAfterContentInit |
ngAfterContentInit()
|
Returns :
void
|
onResize |
onResize()
|
Decorators :
@HostListener('window:resize')
|
Returns :
void
|
updateRectSize |
updateRectSize()
|
Updates the current rect size of the dashboard.
Returns :
void
|
children |
Type : DashboardChildComponent[]
|
Default value : []
|
All children in that dashboard. |
dashboardRect |
columnSize |
getcolumnSize()
|
The current column size. |
rowSize |
getrowSize()
|
The current row size. |
inlineStyle |
getinlineStyle()
|
Returns all positioning styles. Nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |
<ng-content></ng-content>