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>

Implements

AfterContentInit

Metadata

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
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.

Outputs

dashboardChange
Type : EventEmitter

An event fired if the dashboard was changed.

HostBindings

attr.style
Type : any

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
ngAfterContentInit
ngAfterContentInit()
Returns : void
onResize
onResize()
Decorators :
@HostListener('window:resize')
Returns : void
updateRectSize
updateRectSize()

Updates the current rect size of the dashboard.

Returns : void

Properties

children
Type : DashboardChildComponent[]
Default value : []

All children in that dashboard.

dashboardRect

Accessors

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>

results matching ""

    No results matching ""