Web SDK documentation
  1. Components
  2. DashboardComponent

File

core/dashboard/dashboard.component.ts

Description

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.

Example:

 * <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>
 *
Copy

Implements

AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector c8y-dashboard
templateUrl ./dashboard.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Constructor

constructor(element: ElementRef, sanitizer: DomSanitizer)
Parameters :
Name Type Optional
element ElementRef No
sanitizer DomSanitizer No

Inputs

columns

The amount of columns on that dashboard.

Default value : 12

gap

The spacing between each children in pixel.

Default value : 12

rows

The amount of rows to dusplay. Set to auto to auto extend the rows.

Type : number | "auto"

Default value : 'auto'

Outputs

dashboardChange

An event fired if the dashboard was changed.

$event Type: EventEmitter

HostBindings

attr.style
attr.style:

Returns all positioning styles. Nasty workaround for that issue: https://github.com/angular/angular/issues/9343

HostListeners

window:resize
window:resize()

Methods

emitChange
emitChange(widget: DashboardChildComponent)
Parameters :
Name Type Optional
widget DashboardChildComponent No
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

Properties

children
children: QueryList<DashboardChildComponent>
Type : QueryList<DashboardChildComponent>
Decorators :
@ContentChildren(undefined)

All children in that dashboard.
dashboardRect
dashboardRect:

Accessors

columnSize
getcolumnSize()

The current column size.
rowSize
getrowSize()

The current row size.

 
<ng-content></ng-content>
Copy

result-matching ""

    No results matching ""