@progress/kendo-angular-gauges
Version:
Kendo UI Angular Gauges
88 lines (87 loc) • 3.74 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { NgZone, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
import { ConfigurationService, ThemeService } from '../services';
import { IntlService } from '@progress/kendo-angular-intl';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ArcScale, ColorRange } from '../types';
import { GaugeComponent } from '../base-components';
import { ArcCenterTemplateDirective } from './arc-center-template.directive';
import { Group } from '@progress/kendo-drawing';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI ArcGauge component for Angular]({% slug overview_arcgauge_gauges %}).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
* <ng-template kendoArcGaugeCenterTemplate let-value="value">
* {{ value }}%
* </ng-template>
* </kendo-arcgauge>
* `
* })
* class AppComponent {
* public value: number = 10;
* }
* ```
*
* @remarks
* Supported children components are: {@link ArcScaleComponent}, {@link ArcLabelsComponent}, {@link ArcGaugeAreaComponent}, {@link ColorsComponent}.
*/
export declare class ArcGaugeComponent extends GaugeComponent {
protected changeDetector: ChangeDetectorRef;
/**
* Sets the value of the gauge.
*/
value: number;
/**
* Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
*/
color: string;
/**
* Sets the color ranges of the value pointer.
*/
colors: ColorRange[];
/**
* Sets the opacity of the value pointer.
*/
opacity: number;
/**
* Sets the scale options of the ArcGauge.
*/
scale: ArcScale;
centerTemplate: ArcCenterTemplateDirective;
labelElement: ElementRef;
className: boolean;
centerTemplateContext: any;
constructor(changeDetector: ChangeDetectorRef, configurationService: ConfigurationService, themeService: ThemeService, intlService: IntlService, localizationService: LocalizationService, element: ElementRef, renderer: Renderer2, ngZone: NgZone);
ngOnInit(): void;
ngAfterViewChecked(): void;
/**
* Exports the Gauge as a Drawing `Scene`.
*
* @returns A promise that resolves with the export visual.
*/
exportVisual(): Promise<Group>;
/**
* Detects the size of the container and redraws the Gauge.
* Resizing happens automatically unless you set the `resizeRateLimit` option to `0`.
*/
resize(): void;
protected createInstance(element: any, options: any, theme: any, context: any): void;
protected updateOptions(): void;
protected setValues(): void;
protected updateElements(): void;
protected updateCenterTemplate(): void;
protected positionLabel(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ArcGaugeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ArcGaugeComponent, "kendo-arcgauge", ["kendoArcGauge"], { "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "scale": { "alias": "scale"; "required": false; }; }, {}, ["centerTemplate"], never, true, never>;
}