Web SDK documentation
  1. Components
  2. InfoGaugeWidgetConfigComponent

File

widgets/implementations/info-gauge/info-gauge-widget-config/info-gauge-widget-config.component.ts

Implements

OnInit OnBeforeSave

Metadata

selector c8y-info-gauge-widget-config
standalone true
imports CoreModule ReactiveFormsModule DatapointSelectorModule
templateUrl ./info-gauge-widget-config.component.html
viewProviders { provide: ControlContainer, useExisting: NgForm }

Index

Properties
Methods
Inputs

Constructor

constructor(formBuilder: FormBuilder, form: NgForm, widgetConfig: WidgetConfigComponent)
Parameters :
Name Type Optional
formBuilder FormBuilder No
form NgForm No
widgetConfig WidgetConfigComponent No

Inputs

config
Type : literal type

Methods

ngOnInit
ngOnInit()
Returns : void
onBeforeSave
onBeforeSave(config?)
Parameters :
Name Optional
config Yes
Returns : boolean | Promise | Observable

Properties

datapointSelectionConfig
Type : Partial<DatapointSelectorModalOptions>
Default value : {}
defaultFormOptions
Type : Partial<DatapointAttributesFormConfig>
Default value : { showRedRange: true, showYellowRange: true, showRange: true }
formGroup
Type : ReturnType<> 
<div class="p-l-24 p-r-24">
  <form
    class="no-card-context"
    [formGroup]="formGroup"
  >
    <div class="row">
      <div class="col-md-6">
        <c8y-form-group class="p-t-8">
          <label translate>Decimal places</label>
          <input
            class="form-control"
            name="fractionSize"
            type="number"
            formControlName="fractionSize"
            step="1"
          />
          <c8y-messages [show]="formGroup.controls.fractionSize.errors"></c8y-messages>
        </c8y-form-group>
      </div>
      <div class="col-md-6 p-t-8">
        <div
          class="alert alert-info"
          role="alert"
          *ngIf="formGroup.errors?.noActiveDatapoint"
          translate
        >
          At least one data point for the labels or the gauge needs to be selected.
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <c8y-datapoint-selection-list
          class="bg-inherit separator-top p-t-16 d-block"
          name="datapoints"
          listTitle="{{ 'Multiple label and value pairs' | translate }}"
          [defaultFormOptions]="defaultFormOptions"
          [config]="datapointSelectionConfig"
          [minActiveCount]="0"
          formControlName="datapointsLabels"
        ></c8y-datapoint-selection-list>
      </div>
      <div class="col-md-6">
        <c8y-datapoint-selection-list
          class="bg-inherit separator-top p-t-16 d-block"
          name="datapoints"
          listTitle="{{ 'Gauge`display`' | translate }}"
          [defaultFormOptions]="defaultFormOptions"
          [config]="datapointSelectionConfig"
          [minActiveCount]="0"
          [maxActiveCount]="1"
          formControlName="datapointsGauge"
        ></c8y-datapoint-selection-list>
      </div>
    </div>
  </form>
</div>

results matching ""

    No results matching ""