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
|
The amount of columns on that dashboard.
Default value : |
gap
|
The spacing between each children in pixel.
Default value : |
rows
|
The amount of rows to dusplay. Set to auto to auto extend the rows.
Type :
Default value : |
dashboardChange
|
An event fired if the dashboard was changed. $event Type: EventEmitter
|
| attr.style |
attr.style:
|
|
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
|
| getLastRow |
getLastRow()
|
|
Gets the last row (mainly for IE11 which doesn't support grid-auto-rows CSS property)
Returns :
void
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Returns :
void
|
| updateRectSize |
updateRectSize()
|
|
Updates the current rect size of the dashboard.
Returns :
void
|
| children |
children:
|
Type : QueryList<DashboardChildComponent>
|
Decorators :
@ContentChildren(undefined)
|
|
All children in that dashboard. |
| dashboardRect |
dashboardRect:
|
| columnSize |
getcolumnSize()
|
|
The current column size. |
| rowSize |
getrowSize()
|
|
The current row size. |
<ng-content></ng-content>