Web SDK documentation
  1. Components
  2. LinearGaugeWidgetConfigComponent

File

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

Implements

OnChanges OnInit OnBeforeSave OnDestroy

Metadata

selector c8y-linear-gauge-widget-config
standalone true
imports DatapointSelectorModule ReactiveFormsModule CoreModule LinearGaugeWidgetViewComponent
templateUrl ./linear-gauge-widget-config.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

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

Inputs

config
Type : LinearGaugeWidgetConfig

Methods

ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onBeforeSave
onBeforeSave(config?: LinearGaugeWidgetConfigComponent)
Parameters :
Name Type Optional
config LinearGaugeWidgetConfigComponent Yes
Returns : boolean | Promise | Observable

Properties

datapointSelectionConfig
Type : Partial<DatapointSelectorModalOptions>
Default value : {}
defaultFormOptions
Type : Partial<DatapointAttributesFormConfig>
Default value : { showRedRange: true, showYellowRange: true, showRange: true, showTarget: true }
formGroup
Type : ReturnType<unknown>
previewActiveDatapoint
Type : KPIDetails
previewConfig
Type : LinearGaugeWidgetConfig

Accessors

previewMapSet
setpreviewMapSet(template: TemplateRef)
Parameters :
Name Type Optional
template TemplateRef<unknown> No
Returns : void 
<form
  class="no-card-context"
  [formGroup]="formGroup"
>
  <fieldset class="c8y-fieldset">
    <legend translate>Decimal places</legend>
    <c8y-form-group class="form-group-sm m-b-16">
      <input
        class="form-control"
        name="fractionSize"
        type="number"
        formControlName="fractionSize"
        step="1"
      />
      <c8y-messages [show]="formGroup.controls.fractionSize.errors"></c8y-messages>
    </c8y-form-group>
  </fieldset>
</form>

<ng-template #linearGaugePreview>
  @if (formGroup && formGroup.value) {
    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {
      <div style="height: 300px">
        @if (previewConfig) {
          <c8y-linear-gauge-widget-view [config]="previewConfig"></c8y-linear-gauge-widget-view>
        }
      </div>
    } @else {
      <div class="col-md-6 d-col a-i-start j-c-center">
        <c8y-ui-empty-state
          [icon]="'c8y-data-points'"
          [title]="'No data points selected' | translate"
          [subtitle]="'Select data point to render content' | translate"
          [horizontal]="false"
          data-cy="linear-gauge--empty-state-no-data-point-selected"
        >
          <p c8y-guide-docs>
            <small
              translate
              ngNonBindable
            >
              Find out more in the
              <a c8y-guide-href="/docs/cockpit/widgets-collection/#linear-gauge">
                user documentation</a
              >.
            </small>
          </p>
        </c8y-ui-empty-state>
      </div>
    }
  }
</ng-template>

results matching ""

    No results matching ""