File

core/dashboard/dashboard-child.component.ts

Description

A dashboard child allows to position elements correctly on a grid. The user can then resize and rearrange the elements, as long as they are not frozen.

By setting c8y-dashboard-child-actions and c8y-dashboard-child-title on the element you can add custom actions or a custom title to the current child.

By adding the correct branded classes, you can define the look and feel of the child. By default it is displayed as a card.

Example:

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

Implements

DashboardChildDimension

Metadata

host	`{ }`
selector	`c8y-dashboard-child`
templateUrl	`./dashboard-child.component.html`

Index

Constructor

constructor(dashboard: DashboardComponent, sanitizer: DomSanitizer, element: ElementRef)

Parameters :

Name	Type	Optional
dashboard	`DashboardComponent`	No
sanitizer	`DomSanitizer`	No
element	`ElementRef`	No

Inputs

class

Type : string[] | literal type

Default value : {}

All classes added to this child

data

Type : Widget | any

The data object can be used as a dataTransfer object for events of the child.

height

Type : number

Default value : 1

The height of the component in grid-rows.

isFrozen

Type : boolean

Default value : false

If a dashboard is frozen, all children cannot be moved or resized.

margin

Type : number

Default value : 12

The margin of the child in pixel.

useIntersection

Type : boolean

Default value : false

The child content is initialized, as soon it is scrolled into viewport

width

Type : number

Default value : 1

The width of the component in grid-columns.

Type : any

The x position of the child.

Type : any

The y position of the child.

Outputs

changeEnd

Type : EventEmitter

An event fired if a child change is ended

changeStart

Type : EventEmitter

An event fired if a child change is started (dragging or resizing)

HostBindings

attr.style

Type : any

nasty workaround for that issue: https://github.com/angular/angular/issues/9343

Methods

addActions

addActions(actions: DashboardChildActionComponent[], prepend)

Parameters :

Name	Type	Optional	Default value
actions	`DashboardChildActionComponent[]`	No
prepend		No	`false`

Returns : void

dragStarted

dragStarted($event: CdkDragStart)

Parameters :

Name	Type	Optional
$event	`CdkDragStart`	No

Returns : void

ngAfterViewInit

ngAfterViewInit()

Returns : void

ngOnChanges

ngOnChanges()

Returns : void

ngOnDestroy

ngOnDestroy()

Returns : void

ngOnInit

ngOnInit()

Returns : void

reset

reset($event?: CdkDragEnd)

Parameters :

Name	Type	Optional
$event	`CdkDragEnd`	Yes

Returns : void

resizeStarted

resizeStarted($event: CdkDragStart)

Parameters :

Name	Type	Optional
$event	`CdkDragStart`	No

Returns : void

setDynamicDimension

setDynamicDimension()

Returns : void

Properties

_pxHeight

Type : string

Default value : '100%'

_pxWidth

Type : string

Default value : '100%'

actions

Type : DashboardChildActionComponent[]

Default value : []

changeSubscription

Type : Subscription

The observable subscription which is listen to on changes (drag or resize).

Public dashboard

Type : DashboardComponent

dragSource

Type : CdkDrag

Public element

Type : ElementRef

intersected

Default value : false

An indicator if the child is intersected (that mean visible for the user)

isDragging

Default value : false

isResize

Default value : false

klasses

Type : object

Default value : {}

lastChange

Type : "drag" | "resize"

Default value : null

Tells if the last change was a dragging or resizing event;

Accessors

templateActions

settemplateActions(actions: DashboardChildActionComponent[])

Parameters :

Name	Type	Optional
actions	`DashboardChildActionComponent[]`	No

Returns : void

pxWidth

setpxWidth(value)

Updates the pixel width of the child (used for resizing)

Parameters :

Name	Optional
value	No

Returns : void

pxHeight

setpxHeight(value)

Updates the pixel height of the child (used for resizing)

Parameters :

Name	Optional
value	No

Returns : void

inlineStyle

getinlineStyle()

nasty workaround for that issue: https://github.com/angular/angular/issues/9343

<div cdkDropList>
  <div *ngIf="isResize" class="card-placeholder"></div>
  <div
    [ngClass]="klasses"
    cdkDrag
    [ngStyle]="{ width: _pxWidth, height: _pxHeight }"
    (cdkDragStarted)="dragStarted($event)"
    (cdkDragEnded)="reset($event)"
    [cdkDragDisabled]="isFrozen"
  >
    <div
      class="card-header-actions card-header-grid"
      [ngClass]="{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }"
      cdkDragHandle
      [style.--dashboard-time-context]="
        data?.config?.widgetInstanceGlobalTimeContext ? 'block' : 'none'
      "
    >
      <ng-content select="c8y-dashboard-child-title"></ng-content>
      <div class="header-actions d-flex a-i-center" *ngIf="!isFrozen && actions.length > 0">
        <span class="m-l-auto" style="display: var(--dashboard-time-context)">
          <button
            class="btn-clean"
            tooltip="{{ 'This widget is in sync with the dashboard time range.' | translate }}"
            placement="top"
            container="body"
            [attr.aria-label]="'This widget is in sync with the dashboard time range.' | translate"
          >
            <span class="c8y-icon-badge d-inline-flex">
              <i c8yIcon="clock"></i>
              <span class="badge badge-success">
                <i c8yIcon="link" class="text-gray-white"></i>
              </span>
            </span>
          </button>
        </span>
        <div class="optionsBtn dropdown" dropdown placement="bottom right">
          <button
            title="{{ 'Settings' | translate }}"
            class="btnIcon c8y-dropdown"
            (click)="(false)"
            dropdownToggle
            aria-haspopup="true"
          >
            <i [c8yIcon]="'cog'"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" style="right: -1px" *dropdownMenu>
            <ng-container *ngFor="let action of actions">
              <ng-container *ngTemplateOutlet="action.template"></ng-container>
            </ng-container>
          </ul>
        </div>
      </div>
    </div>
    <div class="card-inner-scroll">
      <ng-content></ng-content>
    </div>
    <div
      *ngIf="!isFrozen && !isDragging"
      class="resize-handle hidden-xs"
      cdkDrag
      [cdkDragDisabled]="isFrozen"
      (cdkDragStarted)="resizeStarted($event)"
      (cdkDragEnded)="reset($event)"
    ></div>
    <div class="resize-icon hidden-xs" *ngIf="!isFrozen && !isDragging"></div>

    <div *cdkDragPlaceholder class="card-placeholder"></div>
  </div>
</div>

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Constructor

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""