@progress/kendo-angular-gauges 19.1.2-develop.4 → 19.1.2-develop.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/arc-gauge/arc-center-template.directive.d.ts +10 -20
- package/arc-gauge/arc-gauge.component.d.ts +12 -10
- package/arc-gauge/arc-gauge.module.d.ts +5 -6
- package/arc-gauge/color.component.d.ts +36 -1
- package/arc-gauge/colors.component.d.ts +5 -3
- package/arc-gauge/gauge-area.component.d.ts +22 -2
- package/arc-gauge/labels.component.d.ts +23 -1
- package/arc-gauge/scale.component.d.ts +40 -1
- package/circular-gauge/center-template.directive.d.ts +9 -20
- package/circular-gauge/circular-gauge.component.d.ts +4 -2
- package/circular-gauge/circular-gauge.module.d.ts +6 -7
- package/circular-gauge/gauge-area.component.d.ts +16 -2
- package/circular-gauge/labels.component.d.ts +23 -1
- package/circular-gauge/scale.component.d.ts +18 -1
- package/directives.d.ts +5 -5
- package/esm2022/arc-gauge/arc-center-template.directive.mjs +10 -20
- package/esm2022/arc-gauge/arc-gauge.component.mjs +12 -10
- package/esm2022/arc-gauge/arc-gauge.module.mjs +5 -6
- package/esm2022/arc-gauge/color.component.mjs +36 -1
- package/esm2022/arc-gauge/colors.component.mjs +5 -3
- package/esm2022/arc-gauge/gauge-area.component.mjs +22 -2
- package/esm2022/arc-gauge/labels.component.mjs +23 -1
- package/esm2022/arc-gauge/scale.component.mjs +40 -1
- package/esm2022/circular-gauge/center-template.directive.mjs +9 -20
- package/esm2022/circular-gauge/circular-gauge.component.mjs +4 -2
- package/esm2022/circular-gauge/circular-gauge.module.mjs +6 -7
- package/esm2022/circular-gauge/gauge-area.component.mjs +16 -2
- package/esm2022/circular-gauge/labels.component.mjs +23 -1
- package/esm2022/circular-gauge/scale.component.mjs +18 -1
- package/esm2022/directives.mjs +5 -5
- package/esm2022/gauges.module.mjs +3 -3
- package/esm2022/linear-gauge/gauge-area.component.mjs +10 -2
- package/esm2022/linear-gauge/labels.component.mjs +11 -1
- package/esm2022/linear-gauge/linear-gauge.component.mjs +6 -4
- package/esm2022/linear-gauge/linear-gauge.module.mjs +4 -4
- package/esm2022/linear-gauge/pointer.component.mjs +32 -1
- package/esm2022/linear-gauge/pointers.component.mjs +5 -3
- package/esm2022/linear-gauge/range.component.mjs +13 -1
- package/esm2022/linear-gauge/ranges.component.mjs +8 -3
- package/esm2022/linear-gauge/scale.component.mjs +28 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/radial-gauge/gauge-area.component.mjs +17 -2
- package/esm2022/radial-gauge/labels.component.mjs +14 -1
- package/esm2022/radial-gauge/pointer.component.mjs +23 -1
- package/esm2022/radial-gauge/pointers.component.mjs +8 -3
- package/esm2022/radial-gauge/radial-gauge.component.mjs +9 -5
- package/esm2022/radial-gauge/radial-gauge.module.mjs +5 -5
- package/esm2022/radial-gauge/range.component.mjs +13 -1
- package/esm2022/radial-gauge/ranges.component.mjs +8 -3
- package/esm2022/radial-gauge/scale.component.mjs +27 -1
- package/fesm2022/progress-kendo-angular-gauges.mjs +480 -129
- package/gauges.module.d.ts +3 -3
- package/linear-gauge/gauge-area.component.d.ts +10 -2
- package/linear-gauge/labels.component.d.ts +11 -1
- package/linear-gauge/linear-gauge.component.d.ts +6 -4
- package/linear-gauge/linear-gauge.module.d.ts +4 -4
- package/linear-gauge/pointer.component.d.ts +32 -1
- package/linear-gauge/pointers.component.d.ts +5 -3
- package/linear-gauge/range.component.d.ts +13 -1
- package/linear-gauge/ranges.component.d.ts +8 -3
- package/linear-gauge/scale.component.d.ts +28 -1
- package/package.json +6 -6
- package/radial-gauge/gauge-area.component.d.ts +17 -2
- package/radial-gauge/labels.component.d.ts +14 -1
- package/radial-gauge/pointer.component.d.ts +23 -1
- package/radial-gauge/pointers.component.d.ts +8 -3
- package/radial-gauge/radial-gauge.component.d.ts +9 -5
- package/radial-gauge/radial-gauge.module.d.ts +5 -5
- package/radial-gauge/range.component.d.ts +13 -1
- package/radial-gauge/ranges.component.d.ts +8 -3
- package/radial-gauge/scale.component.d.ts +27 -1
- package/types/arc-scale.interface.d.ts +8 -8
- package/types/border.interface.d.ts +4 -4
- package/types/cap.interface.d.ts +3 -3
- package/types/circular-gauge-scale.interface.d.ts +1 -1
- package/types/color-range.interface.d.ts +5 -5
- package/types/dash-type.interface.d.ts +1 -1
- package/types/gauge-area.interface.d.ts +7 -7
- package/types/labels.interface.d.ts +10 -10
- package/types/line-cap.d.ts +1 -1
- package/types/line.interface.d.ts +5 -5
- package/types/linear-pointer-shape.d.ts +1 -1
- package/types/linear-pointer.interface.d.ts +9 -9
- package/types/linear-scale.interface.d.ts +5 -5
- package/types/margin.interface.d.ts +5 -5
- package/types/padding.interface.d.ts +5 -5
- package/types/radial-label-position.d.ts +1 -1
- package/types/radial-labels.interface.d.ts +5 -1
- package/types/radial-pointer.interface.d.ts +7 -7
- package/types/radial-scale.interface.d.ts +8 -8
- package/types/range.interface.d.ts +5 -5
- package/types/scale.interface.d.ts +10 -10
- package/types/ticks.interface.d.ts +5 -5
|
@@ -5,29 +5,19 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* Represents a directive that allows customizing the center part of the `<kendo-arcgauge>` component.
|
|
9
|
+
* Use this directive to create a center template
|
|
10
10
|
* ([more information and example]({% slug centertemplate_arcgauge %})).
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
* ```ts
|
|
14
|
-
* import { Component } from '@angular/core';
|
|
15
|
-
*
|
|
16
|
-
* _@Component({
|
|
17
|
-
* selector: 'my-app',
|
|
18
|
-
* template: `
|
|
19
|
-
* <kendo-arcgauge [value]="value">
|
|
20
|
-
* <ng-template kendoArcGaugeCenterTemplate let-value="value">
|
|
21
|
-
* {{ value }}%
|
|
22
|
-
* </ng-template>
|
|
23
|
-
* </kendo-arcgauge>
|
|
24
|
-
*
|
|
25
|
-
* `
|
|
26
|
-
* })
|
|
27
|
-
* export class AppComponent {
|
|
28
|
-
* public value: number = 10;
|
|
29
|
-
* }
|
|
12
|
+
* The template context provides access to the current ArcGauge value through the `value` field.
|
|
30
13
|
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-arcgauge [value]="value">
|
|
17
|
+
* <ng-template kendoArcGaugeCenterTemplate let-value="value">
|
|
18
|
+
* {{ value }}%
|
|
19
|
+
* </ng-template>
|
|
20
|
+
* </kendo-arcgauge>
|
|
31
21
|
* ```
|
|
32
22
|
*/
|
|
33
23
|
export declare class ArcCenterTemplateDirective {
|
|
@@ -18,7 +18,7 @@ import * as i0 from "@angular/core";
|
|
|
18
18
|
* ```ts
|
|
19
19
|
* import { Component } from '@angular/core';
|
|
20
20
|
*
|
|
21
|
-
*
|
|
21
|
+
* @Component({
|
|
22
22
|
* selector: 'my-app',
|
|
23
23
|
* template: `
|
|
24
24
|
* <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
|
|
@@ -31,29 +31,31 @@ import * as i0 from "@angular/core";
|
|
|
31
31
|
* class AppComponent {
|
|
32
32
|
* public value: number = 10;
|
|
33
33
|
* }
|
|
34
|
-
*
|
|
35
34
|
* ```
|
|
35
|
+
*
|
|
36
|
+
* @remarks
|
|
37
|
+
* Supported children components are: {@link ArcScaleComponent}, {@link ArcLabelsComponent}, {@link ArcGaugeAreaComponent}, {@link ColorsComponent}.
|
|
36
38
|
*/
|
|
37
39
|
export declare class ArcGaugeComponent extends GaugeComponent {
|
|
38
40
|
protected changeDetector: ChangeDetectorRef;
|
|
39
41
|
/**
|
|
40
|
-
*
|
|
42
|
+
* Sets the value of the gauge.
|
|
41
43
|
*/
|
|
42
44
|
value: number;
|
|
43
45
|
/**
|
|
44
|
-
*
|
|
46
|
+
* Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
|
|
45
47
|
*/
|
|
46
48
|
color: string;
|
|
47
49
|
/**
|
|
48
|
-
*
|
|
50
|
+
* Sets the color ranges of the value pointer.
|
|
49
51
|
*/
|
|
50
52
|
colors: ColorRange[];
|
|
51
53
|
/**
|
|
52
|
-
*
|
|
54
|
+
* Sets the opacity of the value pointer.
|
|
53
55
|
*/
|
|
54
56
|
opacity: number;
|
|
55
57
|
/**
|
|
56
|
-
*
|
|
58
|
+
* Sets the scale options of the ArcGauge.
|
|
57
59
|
*/
|
|
58
60
|
scale: ArcScale;
|
|
59
61
|
centerTemplate: ArcCenterTemplateDirective;
|
|
@@ -64,14 +66,14 @@ export declare class ArcGaugeComponent extends GaugeComponent {
|
|
|
64
66
|
ngOnInit(): void;
|
|
65
67
|
ngAfterViewChecked(): void;
|
|
66
68
|
/**
|
|
67
|
-
* Exports the
|
|
69
|
+
* Exports the Gauge as a Drawing `Scene`.
|
|
68
70
|
*
|
|
69
|
-
* @returns
|
|
71
|
+
* @returns A promise that resolves with the export visual.
|
|
70
72
|
*/
|
|
71
73
|
exportVisual(): Promise<Group>;
|
|
72
74
|
/**
|
|
73
75
|
* Detects the size of the container and redraws the Gauge.
|
|
74
|
-
* Resizing
|
|
76
|
+
* Resizing happens automatically unless you set the `resizeRateLimit` option to `0`.
|
|
75
77
|
*/
|
|
76
78
|
resize(): void;
|
|
77
79
|
protected createInstance(element: any, options: any, theme: any, context: any): void;
|
|
@@ -11,25 +11,24 @@ import * as i5 from "./labels.component";
|
|
|
11
11
|
import * as i6 from "./colors.component";
|
|
12
12
|
import * as i7 from "./color.component";
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
14
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) definition that includes the ArcGauge component and its directives.
|
|
15
|
+
* Import the `ArcGaugeModule` into your application
|
|
16
16
|
* [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
|
|
17
17
|
* that will use the ArcGauge component.
|
|
18
18
|
*
|
|
19
19
|
* @example
|
|
20
|
-
* ```
|
|
20
|
+
* ```typescript
|
|
21
21
|
* import { NgModule } from '@angular/core';
|
|
22
22
|
* import { BrowserModule } from '@angular/platform-browser';
|
|
23
23
|
* import { ArcGaugeModule } from '@progress/kendo-angular-gauges';
|
|
24
24
|
* import { AppComponent } from './app.component';
|
|
25
25
|
*
|
|
26
|
-
*
|
|
26
|
+
* @NgModule({
|
|
27
27
|
* bootstrap: [AppComponent],
|
|
28
28
|
* declarations: [AppComponent],
|
|
29
29
|
* imports: [BrowserModule, ArcGaugeModule]
|
|
30
30
|
* })
|
|
31
|
-
* export class AppModule {
|
|
32
|
-
* }
|
|
31
|
+
* export class AppModule { }
|
|
33
32
|
* ```
|
|
34
33
|
*/
|
|
35
34
|
export declare class ArcGaugeModule {
|
|
@@ -7,12 +7,47 @@ import { CollectionItemComponent } from '../base-components';
|
|
|
7
7
|
import { ColorRange } from '../types';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Represents the configuration options for an ArcGauge color item.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```ts
|
|
14
|
+
* import { Component } from '@angular/core';
|
|
15
|
+
*
|
|
16
|
+
* @Component({
|
|
17
|
+
* selector: 'my-app',
|
|
18
|
+
* template: `
|
|
19
|
+
* <kendo-arcgauge [value]="value">
|
|
20
|
+
* <kendo-arcgauge-colors>
|
|
21
|
+
* <kendo-arcgauge-color
|
|
22
|
+
* [from]="0"
|
|
23
|
+
* [to]="50"
|
|
24
|
+
* color="green">
|
|
25
|
+
* </kendo-arcgauge-color>
|
|
26
|
+
* </kendo-arcgauge-colors>
|
|
27
|
+
* </kendo-arcgauge>
|
|
28
|
+
* `
|
|
29
|
+
* })
|
|
30
|
+
* export class AppComponent {
|
|
31
|
+
* public value: number = 25;
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
11
34
|
*/
|
|
12
35
|
export declare class ColorComponent extends CollectionItemComponent implements ColorRange {
|
|
36
|
+
/**
|
|
37
|
+
* Sets the color of the range. Accepts a valid CSS color string, including hex and rgb.
|
|
38
|
+
*/
|
|
13
39
|
color?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Sets the opacity of the range.
|
|
42
|
+
*/
|
|
14
43
|
opacity?: number;
|
|
44
|
+
/**
|
|
45
|
+
* Sets the start value of the range.
|
|
46
|
+
*/
|
|
15
47
|
from?: number;
|
|
48
|
+
/**
|
|
49
|
+
* Sets the end value of the range.
|
|
50
|
+
*/
|
|
16
51
|
to?: number;
|
|
17
52
|
constructor(configurationService: ConfigurationService, collectionChangesService: CollectionChangesService);
|
|
18
53
|
static ɵfac: i0.ɵɵFactoryDeclaration<ColorComponent, never>;
|
|
@@ -7,14 +7,14 @@ import { CollectionComponent, CollectionItemComponent } from '../base-components
|
|
|
7
7
|
import { CollectionChangesService, ConfigurationService } from '../services';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Represents a collection of one or more ArcGauge colors
|
|
11
11
|
* ([more information and example]({% slug colorranges_arcgauge %})).
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```ts
|
|
15
15
|
* import { Component } from '@angular/core';
|
|
16
16
|
*
|
|
17
|
-
*
|
|
17
|
+
* @Component({
|
|
18
18
|
* selector: 'my-app',
|
|
19
19
|
* template: `
|
|
20
20
|
* <kendo-arcgauge [value]="value">
|
|
@@ -45,8 +45,10 @@ import * as i0 from "@angular/core";
|
|
|
45
45
|
* color: '#f31700'
|
|
46
46
|
* }];
|
|
47
47
|
* }
|
|
48
|
-
*
|
|
49
48
|
* ```
|
|
49
|
+
*
|
|
50
|
+
* @remarks
|
|
51
|
+
* Supported children components are: {@link ColorComponent}.
|
|
50
52
|
*/
|
|
51
53
|
export declare class ColorsComponent extends CollectionComponent {
|
|
52
54
|
children: QueryList<CollectionItemComponent>;
|
|
@@ -6,8 +6,28 @@ import { GaugeAreaComponent } from '../base-components';
|
|
|
6
6
|
import { ConfigurationService } from '../services';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* Represents the configuration options of the ArcGauge area.
|
|
10
|
+
* Controls the entire visible area of the ArcGauge.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```ts
|
|
14
|
+
* import { Component } from '@angular/core';
|
|
15
|
+
*
|
|
16
|
+
* @Component({
|
|
17
|
+
* selector: 'my-app',
|
|
18
|
+
* template: `
|
|
19
|
+
* <kendo-arcgauge [value]="value">
|
|
20
|
+
* <kendo-arcgauge-area
|
|
21
|
+
* background="lightgray"
|
|
22
|
+
* [margin]="10">
|
|
23
|
+
* </kendo-arcgauge-area>
|
|
24
|
+
* </kendo-arcgauge>
|
|
25
|
+
* `
|
|
26
|
+
* })
|
|
27
|
+
* export class AppComponent {
|
|
28
|
+
* public value: number = 40;
|
|
29
|
+
* }
|
|
30
|
+
* ```
|
|
11
31
|
*/
|
|
12
32
|
export declare class ArcGaugeAreaComponent extends GaugeAreaComponent {
|
|
13
33
|
protected configurationService: ConfigurationService;
|
|
@@ -6,7 +6,29 @@ import { RadialLabelsComponent } from '../radial-gauge/labels.component';
|
|
|
6
6
|
import { ConfigurationService } from '../services';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the configuration options for the scale labels of the ArcGauge.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```ts
|
|
13
|
+
* import { Component } from '@angular/core';
|
|
14
|
+
*
|
|
15
|
+
* @Component({
|
|
16
|
+
* selector: 'my-app',
|
|
17
|
+
* template: `
|
|
18
|
+
* <kendo-arcgauge [value]="value">
|
|
19
|
+
* <kendo-arcgauge-scale>
|
|
20
|
+
* <kendo-arcgauge-scale-labels
|
|
21
|
+
* color="blue"
|
|
22
|
+
* font="12px Arial">
|
|
23
|
+
* </kendo-arcgauge-scale-labels>
|
|
24
|
+
* </kendo-arcgauge-scale>
|
|
25
|
+
* </kendo-arcgauge>
|
|
26
|
+
* `
|
|
27
|
+
* })
|
|
28
|
+
* export class AppComponent {
|
|
29
|
+
* public value: number = 50;
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
10
32
|
*/
|
|
11
33
|
export declare class ArcLabelsComponent extends RadialLabelsComponent {
|
|
12
34
|
protected configurationService: ConfigurationService;
|
|
@@ -7,15 +7,54 @@ import { ConfigurationService } from '../services';
|
|
|
7
7
|
import { ArcScale, RadialLabels, LineCap } from '../types';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Represents the configuration options for the scale of the ArcGauge
|
|
11
11
|
* ([see example]({% slug scaleoptions_arcgauge %})).
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```ts
|
|
15
|
+
* import { Component } from '@angular/core';
|
|
16
|
+
*
|
|
17
|
+
* @Component({
|
|
18
|
+
* selector: 'my-app',
|
|
19
|
+
* template: `
|
|
20
|
+
* <kendo-arcgauge [value]="value">
|
|
21
|
+
* <kendo-arcgauge-scale
|
|
22
|
+
* [startAngle]="-90"
|
|
23
|
+
* [endAngle]="90"
|
|
24
|
+
* [rangeDistance]="10">
|
|
25
|
+
* </kendo-arcgauge-scale>
|
|
26
|
+
* </kendo-arcgauge>
|
|
27
|
+
* `
|
|
28
|
+
* })
|
|
29
|
+
* export class AppComponent {
|
|
30
|
+
* public value: number = 30;
|
|
31
|
+
* }
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @remarks
|
|
35
|
+
* Supported children components are: {@link ArcLabelsComponent}
|
|
12
36
|
*/
|
|
13
37
|
export declare class ArcScaleComponent extends ScaleComponent implements ArcScale {
|
|
14
38
|
protected configurationService: ConfigurationService;
|
|
39
|
+
/**
|
|
40
|
+
* Sets the scale labels configuration.
|
|
41
|
+
*/
|
|
15
42
|
labels?: RadialLabels;
|
|
43
|
+
/**
|
|
44
|
+
* Sets the distance between the scale ranges in pixels.
|
|
45
|
+
*/
|
|
16
46
|
rangeDistance?: number;
|
|
47
|
+
/**
|
|
48
|
+
* Sets the line cap style for the scale ranges.
|
|
49
|
+
*/
|
|
17
50
|
rangeLineCap?: LineCap;
|
|
51
|
+
/**
|
|
52
|
+
* Sets the start angle of the Gauge in degrees.
|
|
53
|
+
*/
|
|
18
54
|
startAngle?: number;
|
|
55
|
+
/**
|
|
56
|
+
* Sets the end angle of the Gauge in degrees.
|
|
57
|
+
*/
|
|
19
58
|
endAngle?: number;
|
|
20
59
|
constructor(configurationService: ConfigurationService);
|
|
21
60
|
static ɵfac: i0.ɵɵFactoryDeclaration<ArcScaleComponent, never>;
|
|
@@ -5,29 +5,18 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
* within the `<kendo-circulargauge>` component which will be used for the center template
|
|
8
|
+
* Represents a directive that allows customizing the center part of the `<kendo-circulargauge>` component
|
|
10
9
|
* ([more information and example]({% slug centertemplate_circulargauge %})).
|
|
11
10
|
*
|
|
12
|
-
*
|
|
13
|
-
* ```ts
|
|
14
|
-
* import { Component } from '@angular/core';
|
|
15
|
-
*
|
|
16
|
-
* _@Component({
|
|
17
|
-
* selector: 'my-app',
|
|
18
|
-
* template: `
|
|
19
|
-
* <kendo-circulargauge [value]="value">
|
|
20
|
-
* <ng-template kendoCircularGaugeCenterTemplate let-value="value">
|
|
21
|
-
* {{ value }}%
|
|
22
|
-
* </ng-template>
|
|
23
|
-
* </kendo-circulargauge>
|
|
24
|
-
*
|
|
25
|
-
* `
|
|
26
|
-
* })
|
|
27
|
-
* export class AppComponent {
|
|
28
|
-
* public value: number = 10;
|
|
29
|
-
* }
|
|
11
|
+
* The template context provides access to the current CircularGauge value through the `value` field.
|
|
30
12
|
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```html
|
|
15
|
+
* <kendo-circulargauge [value]="value">
|
|
16
|
+
* <ng-template kendoCircularGaugeCenterTemplate let-value="value">
|
|
17
|
+
* { value }}%
|
|
18
|
+
* </ng-template>
|
|
19
|
+
* </kendo-circulargauge>
|
|
31
20
|
* ```
|
|
32
21
|
*/
|
|
33
22
|
export declare class CircularGaugeCenterTemplateDirective {
|
|
@@ -26,12 +26,14 @@ import * as i0 from "@angular/core";
|
|
|
26
26
|
* class AppComponent {
|
|
27
27
|
* public value: number = 10;
|
|
28
28
|
* }
|
|
29
|
-
*
|
|
30
29
|
* ```
|
|
30
|
+
*
|
|
31
|
+
* @remarks
|
|
32
|
+
* Supported children components are: {@link CircularGaugeScaleComponent}, {@link CircularGaugeLabelsComponent}, {@link CircularGaugeAreaComponent}.
|
|
31
33
|
*/
|
|
32
34
|
export declare class CircularGaugeComponent extends ArcGaugeComponent {
|
|
33
35
|
/**
|
|
34
|
-
*
|
|
36
|
+
* Specifies the scale options of the Gauge.
|
|
35
37
|
*/
|
|
36
38
|
scale: CircularGaugeScale;
|
|
37
39
|
centerTemplate: CircularGaugeCenterTemplateDirective;
|
|
@@ -9,25 +9,24 @@ import * as i3 from "./gauge-area.component";
|
|
|
9
9
|
import * as i4 from "./scale.component";
|
|
10
10
|
import * as i5 from "./labels.component";
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
12
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) definition that includes the CircularGauge component and its directives.
|
|
13
|
+
* Import the `CircularGaugeModule` into your application
|
|
14
14
|
* [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
|
|
15
|
-
* that
|
|
15
|
+
* that uses the CircularGauge component.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
|
-
* ```ts
|
|
18
|
+
* ```ts
|
|
19
19
|
* import { NgModule } from '@angular/core';
|
|
20
20
|
* import { BrowserModule } from '@angular/platform-browser';
|
|
21
21
|
* import { CircularGaugeModule } from '@progress/kendo-angular-gauges';
|
|
22
22
|
* import { AppComponent } from './app.component';
|
|
23
23
|
*
|
|
24
|
-
*
|
|
24
|
+
* @NgModule({
|
|
25
25
|
* bootstrap: [AppComponent],
|
|
26
26
|
* declarations: [AppComponent],
|
|
27
27
|
* imports: [BrowserModule, CircularGaugeModule]
|
|
28
28
|
* })
|
|
29
|
-
* export class AppModule {
|
|
30
|
-
* }
|
|
29
|
+
* export class AppModule { }
|
|
31
30
|
* ```
|
|
32
31
|
*/
|
|
33
32
|
export declare class CircularGaugeModule {
|
|
@@ -5,8 +5,22 @@
|
|
|
5
5
|
import { ArcGaugeAreaComponent } from '../arc-gauge/gauge-area.component';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* Represents the configuration options of the Circular Gauge area.
|
|
9
|
+
* Sets up the entire visible area of the CircularGauge.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```typescript
|
|
13
|
+
* @Component({
|
|
14
|
+
* selector: 'my-app',
|
|
15
|
+
* template: `
|
|
16
|
+
* <kendo-circulargauge>
|
|
17
|
+
* <kendo-circulargauge-area background="lightblue" margin="10">
|
|
18
|
+
* </kendo-circulargauge-area>
|
|
19
|
+
* </kendo-circulargauge>
|
|
20
|
+
* `
|
|
21
|
+
* })
|
|
22
|
+
* export class AppComponent { }
|
|
23
|
+
* ```
|
|
10
24
|
*/
|
|
11
25
|
export declare class CircularGaugeAreaComponent extends ArcGaugeAreaComponent {
|
|
12
26
|
static ɵfac: i0.ɵɵFactoryDeclaration<CircularGaugeAreaComponent, never>;
|
|
@@ -5,7 +5,29 @@
|
|
|
5
5
|
import { ArcLabelsComponent } from '../arc-gauge/labels.component';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Represents the configuration options for the scale labels of the Circular Gauge.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```ts
|
|
12
|
+
* import { Component } from '@angular/core';
|
|
13
|
+
*
|
|
14
|
+
* @Component({
|
|
15
|
+
* selector: 'my-app',
|
|
16
|
+
* template: `
|
|
17
|
+
* <kendo-circulargauge [value]="value">
|
|
18
|
+
* <kendo-circulargauge-scale>
|
|
19
|
+
* <kendo-circulargauge-scale-labels
|
|
20
|
+
* color="blue"
|
|
21
|
+
* font="12px Arial">
|
|
22
|
+
* </kendo-circulargauge-scale-labels>
|
|
23
|
+
* </kendo-circulargauge-scale>
|
|
24
|
+
* </kendo-circulargauge>
|
|
25
|
+
* `
|
|
26
|
+
* })
|
|
27
|
+
* export class AppComponent {
|
|
28
|
+
* public value: number = 75;
|
|
29
|
+
* }
|
|
30
|
+
* ```
|
|
9
31
|
*/
|
|
10
32
|
export declare class CircularGaugeLabelsComponent extends ArcLabelsComponent {
|
|
11
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<CircularGaugeLabelsComponent, never>;
|
|
@@ -6,8 +6,25 @@ import { ArcScaleComponent } from '../arc-gauge/scale.component';
|
|
|
6
6
|
import { CircularGaugeScale } from '../types';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the configuration options for the scale of the Circular Gauge
|
|
10
10
|
* ([see example]({% slug scaleoptions_circulargauge %})).
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* @Component({
|
|
15
|
+
* selector: 'my-app',
|
|
16
|
+
* template: `
|
|
17
|
+
* <kendo-circulargauge>
|
|
18
|
+
* <kendo-circulargauge-scale [min]="0" [max]="100">
|
|
19
|
+
* </kendo-circulargauge-scale>
|
|
20
|
+
* </kendo-circulargauge>
|
|
21
|
+
* `
|
|
22
|
+
* })
|
|
23
|
+
* class AppComponent { }
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @remarks
|
|
27
|
+
* Supported children components are: {@link CircularGaugeLabelsComponent}
|
|
11
28
|
*/
|
|
12
29
|
export declare class CircularGaugeScaleComponent extends ArcScaleComponent implements CircularGaugeScale {
|
|
13
30
|
/**
|
package/directives.d.ts
CHANGED
|
@@ -31,22 +31,22 @@ import { RadialRangeComponent } from "./radial-gauge/range.component";
|
|
|
31
31
|
import { RadialRangesComponent } from "./radial-gauge/ranges.component";
|
|
32
32
|
import { RadialScaleComponent } from "./radial-gauge/scale.component";
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* Use this utility array to access all ArcGauge-related components and directives in a standalone Angular component.
|
|
35
35
|
*/
|
|
36
36
|
export declare const KENDO_ARCGAUGE: readonly [typeof ArcGaugeComponent, typeof ArcCenterTemplateDirective, typeof ArcGaugeAreaComponent, typeof ArcScaleComponent, typeof ArcLabelsComponent, typeof ColorsComponent, typeof ColorComponent];
|
|
37
37
|
/**
|
|
38
|
-
*
|
|
38
|
+
* Use this utility array to access all CircularGauge-related components and directives in a standalone Angular component.
|
|
39
39
|
*/
|
|
40
40
|
export declare const KENDO_CIRCULARGAUGE: readonly [typeof CircularGaugeComponent, typeof CircularGaugeCenterTemplateDirective, typeof CircularGaugeAreaComponent, typeof CircularGaugeScaleComponent, typeof CircularGaugeLabelsComponent];
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* Use this utility array to access all LinearGauge-related components and directives in a standalone Angular component.
|
|
43
43
|
*/
|
|
44
44
|
export declare const KENDO_LINEARGAUGE: readonly [typeof LinearGaugeComponent, typeof LinearGaugeAreaComponent, typeof LinearScaleComponent, typeof LinearLabelsComponent, typeof LinearPointersComponent, typeof LinearPointerComponent, typeof LinearRangeComponent, typeof LinearRangesComponent];
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
46
|
+
* Use this utility array to access all RadialGauge-related components and directives in a standalone Angular component.
|
|
47
47
|
*/
|
|
48
48
|
export declare const KENDO_RADIALGAUGE: readonly [typeof RadialGaugeComponent, typeof RadialGaugeAreaComponent, typeof RadialScaleComponent, typeof RadialLabelsComponent, typeof RadialPointersComponent, typeof RadialPointerComponent, typeof RadialRangeComponent, typeof RadialRangesComponent];
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* Use this utility array to access all `@progress/kendo-angular-gauges`-related components and directives in a standalone Angular component.
|
|
51
51
|
*/
|
|
52
52
|
export declare const KENDO_GAUGES: readonly [typeof ArcGaugeComponent, typeof ArcCenterTemplateDirective, typeof ArcGaugeAreaComponent, typeof ArcScaleComponent, typeof ArcLabelsComponent, typeof ColorsComponent, typeof ColorComponent, typeof CircularGaugeComponent, typeof CircularGaugeCenterTemplateDirective, typeof CircularGaugeAreaComponent, typeof CircularGaugeScaleComponent, typeof CircularGaugeLabelsComponent, typeof LinearGaugeComponent, typeof LinearGaugeAreaComponent, typeof LinearScaleComponent, typeof LinearLabelsComponent, typeof LinearPointersComponent, typeof LinearPointerComponent, typeof LinearRangeComponent, typeof LinearRangesComponent, typeof RadialGaugeComponent, typeof RadialGaugeAreaComponent, typeof RadialScaleComponent, typeof RadialLabelsComponent, typeof RadialPointersComponent, typeof RadialPointerComponent, typeof RadialRangeComponent, typeof RadialRangesComponent];
|
|
@@ -5,29 +5,19 @@
|
|
|
5
5
|
import { Directive, TemplateRef, Optional } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* Represents a directive that allows customizing the center part of the `<kendo-arcgauge>` component.
|
|
9
|
+
* Use this directive to create a center template
|
|
10
10
|
* ([more information and example]({% slug centertemplate_arcgauge %})).
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
* ```ts
|
|
14
|
-
* import { Component } from '@angular/core';
|
|
15
|
-
*
|
|
16
|
-
* _@Component({
|
|
17
|
-
* selector: 'my-app',
|
|
18
|
-
* template: `
|
|
19
|
-
* <kendo-arcgauge [value]="value">
|
|
20
|
-
* <ng-template kendoArcGaugeCenterTemplate let-value="value">
|
|
21
|
-
* {{ value }}%
|
|
22
|
-
* </ng-template>
|
|
23
|
-
* </kendo-arcgauge>
|
|
24
|
-
*
|
|
25
|
-
* `
|
|
26
|
-
* })
|
|
27
|
-
* export class AppComponent {
|
|
28
|
-
* public value: number = 10;
|
|
29
|
-
* }
|
|
12
|
+
* The template context provides access to the current ArcGauge value through the `value` field.
|
|
30
13
|
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-arcgauge [value]="value">
|
|
17
|
+
* <ng-template kendoArcGaugeCenterTemplate let-value="value">
|
|
18
|
+
* {{ value }}%
|
|
19
|
+
* </ng-template>
|
|
20
|
+
* </kendo-arcgauge>
|
|
31
21
|
* ```
|
|
32
22
|
*/
|
|
33
23
|
export class ArcCenterTemplateDirective {
|
|
@@ -23,7 +23,7 @@ import * as i3 from "@progress/kendo-angular-l10n";
|
|
|
23
23
|
* ```ts
|
|
24
24
|
* import { Component } from '@angular/core';
|
|
25
25
|
*
|
|
26
|
-
*
|
|
26
|
+
* @Component({
|
|
27
27
|
* selector: 'my-app',
|
|
28
28
|
* template: `
|
|
29
29
|
* <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
|
|
@@ -36,29 +36,31 @@ import * as i3 from "@progress/kendo-angular-l10n";
|
|
|
36
36
|
* class AppComponent {
|
|
37
37
|
* public value: number = 10;
|
|
38
38
|
* }
|
|
39
|
-
*
|
|
40
39
|
* ```
|
|
40
|
+
*
|
|
41
|
+
* @remarks
|
|
42
|
+
* Supported children components are: {@link ArcScaleComponent}, {@link ArcLabelsComponent}, {@link ArcGaugeAreaComponent}, {@link ColorsComponent}.
|
|
41
43
|
*/
|
|
42
44
|
export class ArcGaugeComponent extends GaugeComponent {
|
|
43
45
|
changeDetector;
|
|
44
46
|
/**
|
|
45
|
-
*
|
|
47
|
+
* Sets the value of the gauge.
|
|
46
48
|
*/
|
|
47
49
|
value;
|
|
48
50
|
/**
|
|
49
|
-
*
|
|
51
|
+
* Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
|
|
50
52
|
*/
|
|
51
53
|
color;
|
|
52
54
|
/**
|
|
53
|
-
*
|
|
55
|
+
* Sets the color ranges of the value pointer.
|
|
54
56
|
*/
|
|
55
57
|
colors;
|
|
56
58
|
/**
|
|
57
|
-
*
|
|
59
|
+
* Sets the opacity of the value pointer.
|
|
58
60
|
*/
|
|
59
61
|
opacity;
|
|
60
62
|
/**
|
|
61
|
-
*
|
|
63
|
+
* Sets the scale options of the ArcGauge.
|
|
62
64
|
*/
|
|
63
65
|
scale;
|
|
64
66
|
centerTemplate;
|
|
@@ -85,16 +87,16 @@ export class ArcGaugeComponent extends GaugeComponent {
|
|
|
85
87
|
}
|
|
86
88
|
}
|
|
87
89
|
/**
|
|
88
|
-
* Exports the
|
|
90
|
+
* Exports the Gauge as a Drawing `Scene`.
|
|
89
91
|
*
|
|
90
|
-
* @returns
|
|
92
|
+
* @returns A promise that resolves with the export visual.
|
|
91
93
|
*/
|
|
92
94
|
exportVisual() {
|
|
93
95
|
return drawDOM(this.element.nativeElement);
|
|
94
96
|
}
|
|
95
97
|
/**
|
|
96
98
|
* Detects the size of the container and redraws the Gauge.
|
|
97
|
-
* Resizing
|
|
99
|
+
* Resizing happens automatically unless you set the `resizeRateLimit` option to `0`.
|
|
98
100
|
*/
|
|
99
101
|
resize() {
|
|
100
102
|
super.resize();
|