<ng-container [formGroup]="chartFormGroup">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Data point values' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Statistics that describe the spread of values within each time bucket. These share the same unit and scale as the original measurement'
| translate
}}"
placement="right"
triggers="focus"
type="button"
></button>
</legend>
<div class="table-responsive">
<table class="table table-condensed m-b-0 bg-inherit">
<thead>
<tr>
<th translate>Display</th>
<th translate>Range min</th>
<th translate>Range max</th>
<th translate>Chart type</th>
<th translate>Y-axis</th>
</tr>
</thead>
<tbody>
<ng-container formGroupName="renderTypeConfigs">
@for (rtKey of DATA_POINT_VALUE_TYPES; track rtKey) {
@let configColor = getConfigColor(rtKey);
<ng-container [formGroupName]="rtKey">
<tr>
<td class="text-no-wrap">
<div class="d-inline-flex a-i-center">
<label class="c8y-checkbox c8y-checkbox--inline m-b-0 m-r-4">
<input
type="checkbox"
formControlName="enabled"
/>
<span></span>
<span></span>
</label>
<div
class="c8y-colorpicker m-r-4"
(click)="$event.stopPropagation()"
>
<input
[attr.aria-label]="rtKey + ' color'"
type="color"
[value]="configColor"
(input)="setConfigColor(rtKey, $any($event.target).value)"
(click)="$event.stopPropagation()"
/>
<span [style.background-color]="configColor"></span>
</div>
<span>{{ getRenderTypeLabel(rtKey) | translate }}</span>
</div>
</td>
<td>
<input
class="form-control input-sm"
type="number"
formControlName="rangeMin"
[placeholder]="'e.g. {{ example }}' | translate: { example: 0 }"
/>
</td>
<td>
<input
class="form-control input-sm"
type="number"
formControlName="rangeMax"
[placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
/>
</td>
<td>
<div class="c8y-select-wrapper">
<select
class="form-control input-sm"
formControlName="lineType"
>
@for (type of CHART_LINE_TYPES; track type.val) {
<option [ngValue]="type.val">{{ type.text | translate }}</option>
}
</select>
</div>
</td>
<td>
<div class="c8y-select-wrapper">
<select
class="form-control input-sm"
formControlName="yAxisType"
>
@for (type of AXIS_TYPES; track type.val) {
<option [ngValue]="type.val">{{ type.text | translate }}</option>
}
</select>
</div>
</td>
</tr>
</ng-container>
}
</ng-container>
<tr>
<td colspan="5">
<div
class="d-flex a-i-center"
[tooltip]="
chartFormGroup?.get('renderAsBand')?.disabled
? (renderAsBandDisabledTooltip | translate)
: null
"
container="body"
>
<label
class="c8y-checkbox m-b-0 m-r-4"
[class.disabled]="chartFormGroup?.get('renderAsBand')?.disabled"
>
<input
[attr.aria-label]="'Render as band' | translate"
type="checkbox"
formControlName="renderAsBand"
/>
<span></span>
</label>
<div
class="c8y-colorpicker m-l-8 m-r-4"
[class.invisible]="!chartFormGroup?.get('renderAsBand')?.value"
(click)="$event.stopPropagation()"
>
<input
[attr.aria-label]="'Band color' | translate"
type="color"
[value]="chartFormGroup?.get('bandColor')?.value || defaultColors['avg']"
(input)="chartFormGroup?.get('bandColor')?.setValue($any($event.target).value)"
(click)="$event.stopPropagation()"
/>
<span
[style.background-color]="
chartFormGroup?.get('bandColor')?.value || defaultColors['avg']
"
></span>
</div>
<span class="text-12">
{{ 'Render as band' | translate }}
<small class="text-muted">
<em> — {{ 'replaces min/max lines with a shaded area' | translate }} </em>
</small>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
<fieldset class="c8y-fieldset">
<legend>
{{ 'Data point totals' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Metrics that quantify the time bucket itself — how many readings the bucket captured, or their totals. These typically use a different scale.'
| translate
}}"
placement="right"
triggers="focus"
type="button"
></button>
</legend>
<ng-container formGroupName="renderTypeConfigs">
<div class="table-responsive">
<table class="table table-condensed m-b-0 bg-inherit">
<thead>
<tr>
<th translate>Display</th>
<th translate>Range min</th>
<th translate>Range max</th>
<th translate>Chart type</th>
<th translate>Y-axis</th>
</tr>
</thead>
<tbody>
@for (rtKey of DATA_POINT_TOTAL_TYPES; track rtKey) {
@let configColor = getConfigColor(rtKey);
<ng-container [formGroupName]="rtKey">
<tr>
<td class="text-no-wrap">
<div class="d-inline-flex a-i-center">
<label class="c8y-checkbox c8y-checkbox--inline m-b-0 m-r-4">
<input
type="checkbox"
formControlName="enabled"
/>
<span></span>
<span></span>
</label>
<div
class="c8y-colorpicker m-r-4"
(click)="$event.stopPropagation()"
>
<input
[attr.aria-label]="rtKey + ' color'"
type="color"
[value]="configColor"
(input)="setConfigColor(rtKey, $any($event.target).value)"
(click)="$event.stopPropagation()"
/>
<span [style.background-color]="configColor"></span>
</div>
<span>{{ getRenderTypeLabel(rtKey) | translate }}</span>
</div>
</td>
<td>
<input
class="form-control input-sm"
type="number"
formControlName="rangeMin"
[placeholder]="'e.g. {{ example }}' | translate: { example: 0 }"
/>
</td>
<td>
<input
class="form-control input-sm"
type="number"
formControlName="rangeMax"
[placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
/>
</td>
<td>
<div class="c8y-select-wrapper">
<select
class="form-control input-sm"
formControlName="lineType"
>
@for (type of CHART_LINE_TYPES; track type.val) {
<option [ngValue]="type.val">{{ type.text | translate }}</option>
}
</select>
</div>
</td>
<td>
<div class="c8y-select-wrapper">
<select
class="form-control input-sm"
formControlName="yAxisType"
>
@for (type of AXIS_TYPES; track type.val) {
<option [ngValue]="type.val">{{ type.text | translate }}</option>
}
</select>
</div>
</td>
</tr>
</ng-container>
}
</tbody>
</table>
</div>
</ng-container>
</fieldset>
</ng-container>