@c8y/ngx-components/widgets/implementations/info-gauge/index.d.ts

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { OnChanges, OnInit, OnDestroy, TemplateRef } from '@angular/core';
import { KPIDetails, DatapointSelectorModalOptions } from '@c8y/ngx-components/datapoint-selector';
import { DynamicComponentComponent, OnBeforeSave } from '@c8y/ngx-components';
import { ContextDashboardComponent, WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
import { FormBuilder, NgForm } from '@angular/forms';
import { EditorComponent } from '@c8y/ngx-components/editor';
import { Observable } from 'rxjs';

interface GeneralGaugeOptions {
    /**
     * Name of the gauge preset
     */
    name?: string;
    /**
     * Radius of the gauge (e.g., '90%')
     */
    radius?: string;
    /**
     * Center of the gauge (e.g., ['50%', '50%'])
     */
    center?: string[];
    /**
     * Starting angle of the gauge
     */
    startAngle?: number;
    /**
     * Ending angle of the gauge
     */
    endAngle?: number;
}
/**
 * Properties related to the split lines of the gauge
 */
interface SplitPropertiesGaugeOptions {
    /**
     * Number of segments in the gauge
     */
    splitNumber?: number;
    /**
     * Length of the split line, can be a percentage value relative to radius
     */
    splitLineLength?: number | string;
    /**
     * Length of the split line as a ratio relative to the axisLineWidth (overrides splitLineLength)
     */
    splitLineLengthRatio?: number;
    /**
     * Distance between the split line and axis line
     */
    splitLineDistance?: number;
    /**
     * Distance between the split line and axis line as a ratio relative to the axisLineWidth (overrides splitLineDistance)
     */
    splitLineDistanceRatio?: number;
    /**
     * Color of the split lines (used only in the custom preset)
     */
    splitLineColor?: string;
    /**
     * Width of the split lines
     */
    splitLineWidth?: number;
}
/**
 * Properties related to the ticks of the gauge
 */
interface TickPropertiesGaugeOptions {
    /**
     * Whether to show ticks
     */
    tickShow?: boolean;
    /**
     * Width of the ticks
     */
    tickWidth?: number;
    /**
     * Color of the ticks (used only in the custom preset)
     */
    tickColor?: string;
    /**
     * Distance of the ticks from the center
     */
    tickDistance?: number;
    /**
     * Distance of the ticks from the center as a ratio relative to the axisLineWidth (overrides tickDistance)
     */
    tickDistanceRatio?: number;
    /**
     * Length of the ticks
     */
    tickLength?: number;
    /**
     * Length of the ticks as a ratio relative to the axisLineWidth (overrides tickLength)
     */
    tickLengthRatio?: number;
}
/**
 * Properties related to the axis of the gauge
 */
interface AxisPropertiesGaugeOptions {
    /**
     * Distance of the axis labels from the center
     */
    axisLabelDistance?: number;
    /**
     * Distance of the axis labels from the center as a ratio relative to the axisLineWidth (overrides axisLabelDistance)
     */
    axisLabelDistanceRatio?: number;
    /**
     * Color of the axis labels (used only in the custom preset)
     */
    axisLabelColor?: string;
    /**
     * Font size of the axis labels
     */
    axisLabelFontSize?: number;
    /**
     * Font size of the axis labels as a ratio relative to the container size (overrides axisLabelFontSize)
     */
    axisLabelFontSizeRatio?: number;
    /**
     * Minimum font size of the axis labels (used for clamping)
     */
    axisLabelFontSizeMin?: number;
    /**
     * Maximum font size of the axis labels (used for clamping)
     */
    axisLabelFontSizeMax?: number;
    /**
     * Width of the axis line
     */
    axisLineWidth?: number;
    /**
     * Width of the axis line as a ratio relative to the container size (overrides axisLineWidth)
     */
    axisLineWidthRatio?: number;
}
/**
 * Properties related to the pointer of the gauge
 */
interface PointerPropertiesGaugeOptions {
    /**
     * Whether to show the pointer
     */
    showPointer?: boolean;
    /**
     * Style of the pointer (e.g., custom path)
     */
    pointerStyle?: string;
    /**
     * Color of the pointer (used only in the custom preset)
     */
    pointerColor?: string;
    /**
     * Width of the pointer
     */
    pointerWidth?: string | number;
    /**
     * Width of the pointer as a ratio relative to the container size (overrides pointerWidth)
     */
    pointerWidthRatio?: number;
    /**
     * Length of the pointer
     */
    pointerLength?: string | number;
    /**
     * Length of the pointer as a ratio relative to the container size (overrides pointerLength)
     */
    pointerLenghtRatio?: number;
    /**
     * Offset of the pointer from the center
     */
    pointerOffset?: string | number;
}
/**
 * Properties related to the progress bar of the gauge
 */
interface ProgressBarGaugeOptions {
    /**
     * Whether to show a progress bar
     */
    progressBar?: boolean;
    /**
     * Width of the progress bar
     */
    progressBarWidth?: number;
    /**
     * Whether the progress bar has rounded caps
     */
    progressBarRoundCap?: boolean;
    /**
     * Color of the progress bar
     */
    progressBarColor?: string;
    /**
     * Additional colors for the gauge
     */
    additionalGaugeColors?: string[];
}
/**
 * Typography-related properties for the gauge
 */
interface TypographyGaugeOptions {
    /**
     * Font size of the measurement value
     */
    measurementValueFontRatio?: number;
    /**
     * Minimum font size of the measurement value
     */
    measurementValueFontMin?: number;
    /**
     * Maximum font size of the measurement value
     */
    measurementValueFontMax?: number;
    /**
     * Color of the measurement value
     */
    measurementValueColor?: string;
    /**
     * Font size of the unit
     */
    unitFontSize?: number;
    /**
     * Font size of the unit as a ratio relative to the container size (overrides unitFontSize)
     */
    unitFontRatio?: number;
    /**
     * Minimum font size of the unit
     */
    unitFontMin?: number;
    /**
     * Maximum font size of the unit
     */
    unitFontMax?: number;
    /**
     * Color of the unit
     */
    unitColor?: string;
    /**
     * Font size of the date
     */
    dateFontSize?: number;
    /**
     * Font size of the date as a ratio relative to the container size (overrides dateFontSize)
     */
    dateFontRatio?: number;
    /**
     * Minimum font size of the date
     */
    dateFontMin?: number;
    /**
     * Maximum font size of the date
     */
    dateFontMax?: number;
    /**
     * Color of the date
     */
    dateColor?: string;
}
/**
 * Properties related to detailed information display
 */
interface DetailPropertiesGaugeOptions {
    /**
     * Whether to show detailed information
     */
    showDetail?: boolean;
    /**
     * Font size of the value displayed
     */
    valueFontSize?: number;
    /**
     * Offset of the detail from the center
     */
    detailOffsetCenter?: number[] | string[];
    /**
     * Whether to show mark points
     */
    showMarkPoint?: boolean;
}
/**
 * Main interface combining all the smaller interfaces
 */
interface GaugeOptions extends GeneralGaugeOptions, SplitPropertiesGaugeOptions, TickPropertiesGaugeOptions, AxisPropertiesGaugeOptions, PointerPropertiesGaugeOptions, ProgressBarGaugeOptions, TypographyGaugeOptions, DetailPropertiesGaugeOptions {
    /**
     * Miscellaneous properties for flexibility
     */
    [key: string]: any;
}
interface GaugeOptionsColors {
    splitLineColor: string;
    tickColor: string;
    axisLabelColor: string;
    pointerColor: string;
    knobColor: string;
    knobFontColor: string;
    measurementValueColor: string;
    unitColor: string;
    dateColor: string;
    progressBarColor: string;
    fontFamily: string;
}
interface GaugeAnchor {
    /**
     * Indicates whether to show the anchor.
     */
    show?: boolean;
    /**
     * Indicates whether to show the anchor above the gauge.
     */
    showAbove?: boolean;
    /**
     * The size of the anchor.
     */
    size?: number;
    /**
     * The size of the anchor as a ratio relative to the container size.
     * Overrides the `size` property when set.
     */
    sizeRatio?: number;
    /**
     * The style of the anchor, represented as a key-value pair object.
     */
    itemStyle?: {
        [key: string]: any;
    };
}
declare const GAUGE_PRESET_NAMES: {
    readonly DEFAULT: "Default";
    readonly CUSTOM: "Custom preset";
    readonly POINTER: "Pointer";
    readonly PROGRESS_BAR: "Progress bar";
    readonly PROGRESS_INDICATOR: "Progress indicator";
    readonly GRADE_RATING: "Grade rating";
};
interface InfoGaugeWidgetConfig {
    datapoints?: KPIDetails[];
    datapointsLabels?: KPIDetails[];
    datapointsGauge?: KPIDetails[];
    selectedPresetId?: string;
    gaugeOptions?: GaugeOptions;
    fractionSize: number;
}
declare const GAUGE_PRESETS: GaugeOptions[];

declare class InfoGaugeWidgetViewComponent implements OnChanges {
    private dashboard;
    private dynamicComponent?;
    config: InfoGaugeWidgetConfig;
    activeDatapointLabels: any[];
    activeDatapointGauge: KPIDetails;
    fractionSize: string;
    isInfoGauge: boolean;
    constructor(dashboard: ContextDashboardComponent, dynamicComponent?: DynamicComponentComponent);
    ngOnInit(): void;
    ngOnChanges(): void;
    private assignContextFromContextDashboard;
    static ɵfac: i0.ɵɵFactoryDeclaration<InfoGaugeWidgetViewComponent, [{ optional: true; }, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InfoGaugeWidgetViewComponent, "c8y-info-gauge-widget-view", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
}

declare class InfoGaugeWidgetConfigComponent implements OnInit, OnBeforeSave, OnDestroy {
    private formBuilder;
    private form;
    private widgetConfig;
    private widgetConfigService;
    private dynamicComponent?;
    config: InfoGaugeWidgetConfig;
    editorComponent: EditorComponent;
    formGroup: ReturnType<InfoGaugeWidgetConfigComponent['createForm']>;
    datapointSelectionConfig: Partial<DatapointSelectorModalOptions>;
    isInfoGauge: boolean;
    activeDatapointGauge: KPIDetails;
    activeDatapointLabel: KPIDetails;
    showAdvancedOptions: boolean;
    gaugeOptionsString: string;
    gaugeOptions: GaugeOptions;
    showAdvancedOptionsLabel: "Show advanced options";
    hideAdvancedOptionsLabel: "Hide advanced options";
    ALL_GAUGE_PRESETS: GaugeOptions[];
    previewConfig: InfoGaugeWidgetConfig;
    datapointsLabels: KPIDetails[];
    datapointsGauge: KPIDetails[];
    set previewMapSet(template: TemplateRef<any>);
    private limits;
    readonly GAUGE_PRESETS: GaugeOptions[];
    private destroy$;
    private jsonChange$;
    constructor(formBuilder: FormBuilder, form: NgForm, widgetConfig: WidgetConfigComponent, widgetConfigService: WidgetConfigService, dynamicComponent?: DynamicComponentComponent);
    onBeforeSave(config?: InfoGaugeWidgetConfigComponent['config']): boolean | Promise<boolean> | Observable<boolean>;
    ngOnInit(): void;
    ngOnDestroy(): void;
    onRadioPresetChange(presetId: string): void;
    assignSchema(): Promise<void>;
    gaugeJSONChange(value: string): void;
    trackByFn(_index: number, item: GaugeOptions): string;
    private processJSONChange;
    private getPresetId;
    private setupRadialGauge;
    private initForm;
    private createForm;
    static ɵfac: i0.ɵɵFactoryDeclaration<InfoGaugeWidgetConfigComponent, [null, null, null, null, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InfoGaugeWidgetConfigComponent, "c8y-info-gauge-widget-config", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
}

export { GAUGE_PRESETS, GAUGE_PRESET_NAMES, InfoGaugeWidgetConfigComponent, InfoGaugeWidgetViewComponent };
export type { AxisPropertiesGaugeOptions, DetailPropertiesGaugeOptions, GaugeAnchor, GaugeOptions, GaugeOptionsColors, GeneralGaugeOptions, InfoGaugeWidgetConfig, PointerPropertiesGaugeOptions, ProgressBarGaugeOptions, SplitPropertiesGaugeOptions, TickPropertiesGaugeOptions, TypographyGaugeOptions };
//# sourceMappingURL=index.d.ts.map