global-context/features/aggregation/auto-aggregation-options/auto-aggregation-options.component.ts

Description

The settings shown while the "Auto" aggregation mode is active: the target "Points per chart" number and the "Keep point count on zoom" switch. Projected into the aggregation picker's autoAggregationOptions slot by the history- and live-mode configuration controls.

Example

Metadata

changeDetection ChangeDetectionStrategy.OnPush

host { }

selector c8y-auto-aggregation-options

standalone true

imports

C8yTranslatePipe

ReactiveFormsModule

PopoverModule

FormGroupComponent

MessagesComponent

MessageDirective

templateVariables

`datapointsRangeText`	`'Enter a whole number between {{ min }} and {{ max }}.' \| translate : { min: AUTO_AGGREGATION_DATAPOINTS.MIN, max: AUTO_AGGREGATION_DATAPOINTS.MAX }`
`datapointsErrors`	`datapointsControl().errors`

templateUrl ./auto-aggregation-options.component.html

Relationships

Used by

Depends on

C8yTranslatePipe
ReactiveFormsModule
PopoverModule
FormGroupComponent
MessagesComponent
MessageDirective

<div class="d-flex a-i-center">
  <label
    class="m-b-0 m-r-8 text-nowrap"
    for="autoAggregationDatapoints"
  >
    {{ 'Points per chart' | translate }}
  </label>
  @let datapointsRangeText =
    'Enter a whole number between {{ min }} and {{ max }}.'
      | translate
        : {
            min: AUTO_AGGREGATION_DATAPOINTS.MIN,
            max: AUTO_AGGREGATION_DATAPOINTS.MAX
          };
  @let datapointsErrors = datapointsControl().errors;
  <c8y-form-group
    class="form-group-sm m-b-0"
    [hasError]="!!datapointsErrors"
  >
    <input
      class="form-control input-sm"
      style="width: 60px"
      [attr.title]="datapointsRangeText"
      [attr.aria-label]="'Points per chart' | translate"
      id="autoAggregationDatapoints"
      type="number"
      [attr.min]="AUTO_AGGREGATION_DATAPOINTS.MIN"
      [attr.max]="AUTO_AGGREGATION_DATAPOINTS.MAX"
      [step]="AUTO_AGGREGATION_DATAPOINTS.STEP"
      [formControl]="datapointsControl()"
      (change)="clampDatapoints()"
      data-cy="global-context--auto-aggregation-datapoints-input"
    />
    <c8y-messages
      class="m-t-4"
      [show]="datapointsErrors"
    >
      <c8y-message
        name="autoAggregationDatapoints"
        [text]="datapointsRangeText"
      ></c8y-message>
    </c8y-messages>
  </c8y-form-group>
</div>
<label
  class="c8y-switch m-b-0"
  [title]="'Keep point count on zoom' | translate"
>
  <input
    type="checkbox"
    [formControl]="keepDataOnZoomInControl()"
    data-cy="global-context--auto-aggregation-keep-data-on-zoom-in"
  />
  <span></span>
  <span>{{ 'Keep point count on zoom' | translate }}</span>
  <button
    class="btn-help btn-help--sm m-l-4"
    [attr.aria-label]="'Help' | translate"
    [popover]="KEEP_DATA_ON_ZOOM_IN_POPOVER | translate"
    placement="top"
    triggers="focus"
    container="body"
    type="button"
    [adaptivePosition]="true"
  ></button>
</label>