Skip to content

Commit 8652ef9

Browse files
author
pipeline
committed
config(EJ2-2871): Added changes to circular gauge samples.
1 parent a05be1e commit 8652ef9

22 files changed

+350
-218
lines changed

‎src/chart/chart.module.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,26 +62,26 @@ export const chartAppRoutes: Object[] = [
6262
{ path: 'chart/combination-series', component: CombinationSeriesChartComponent, name: 'Combination Series',
6363
order:'01', category: 'Series' },
6464
{ path: 'chart/performance', component: PerformanceChartComponent, name: 'Performance',order:'01', category: 'Series' },
65-
{ path: 'chart/default-pie', component: DefaultPieComponent, name: 'Pie', order: '02', category: 'Accumulation Series'},
65+
{ path: 'chart/default-pie', component: DefaultPieComponent, name: 'Pie', order: '02', category: 'Accumulation Series', type: 'new'},
6666
{
6767
path: 'chart/default-doughnut', component: DefaultDoughnutComponent, name: 'Pie With Legend', order: '02',
68-
category: 'Accumulation Series'
68+
category: 'Accumulation Series', type: 'new'
6969
},
7070
{
7171
path: 'chart/semi-pie', component: SemiPieComponent, name: 'Semi Accumulation Series', order: '02',
72-
category: 'Accumulation Series'
72+
category: 'Accumulation Series', type: 'new'
7373
},
7474
{
7575
path: 'chart/smart-labels', component: SmartLabelsComponent, name: 'Smart Labels', order: '02',
76-
category: 'Accumulation Series'
76+
category: 'Accumulation Series', type: 'new'
7777
},
7878
{
7979
path: 'chart/drilldown-pie', component: DrilldownPieComponent, name: 'Drilldown', order: '02',
80-
category: 'Accumulation Series'
80+
category: 'Accumulation Series', type: 'new'
8181
},
8282
{
8383
path: 'chart/clubpoint', component: ClubpointPieComponent, name: 'ClubPoint', order: '02',
84-
category: 'Accumulation Series'
84+
category: 'Accumulation Series', type: 'new'
8585
},
8686
{ path: 'chart/local-data', component: LocalDataChartComponent, name: 'Local Data', order:'03',category: 'Data Binding' },
8787
{ path: 'chart/remote-data', component: RemoteDataChartComponent, name: 'Remote Data',order:'03', category: 'Data Binding' },

‎src/circulargauge/annotation-plnkr.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/circulargauge/annotation.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
22
import { CircularGaugeComponent, CircularGauge, Pointer } from '@syncfusion/ej2-ng-circulargauge';
33
import { IAnnotationRenderEventArgs, ILoadedEventArgs, IResizeEventArgs } from '@syncfusion/ej2-circulargauge';
44
import { AnnotationDataSerive } from './annotation.service';
5+
import { Browser } from '@syncfusion/ej2-base';
56
/**
67
* Annotation
78
*/
@@ -38,6 +39,7 @@ export class AnnotationComponent {
3839
width: 2, height: 14, interval: 1,
3940
color: 'rgb(29,29,29)'
4041
};
42+
public annotationRadius: string = Browser.isDevice ? '90%' : '75%';
4143
public minorTicks: Object = {
4244
height: 4, width: 1, interval: 0.2,
4345
color: 'rgb(29,29,29)'
@@ -79,7 +81,7 @@ export class AnnotationComponent {
7981
duration: 500
8082
};
8183
public resize(args: IResizeEventArgs): void {
82-
location.reload();
84+
window.location.reload();
8385
}
8486
public loaded(args: ILoadedEventArgs): void {
8587
let intervalExecute: boolean = true;

‎src/circulargauge/annotation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="control-section">
22
<ej-circulargauge id="clock-container" #gauge1 style='display:block;' centerX='45%' (loaded)='loaded($event)' (resized)='resize($event)'>
33
<e-axes>
4-
<e-axis radius='75%' startAngle=0 endAngle=0 minimum=0 maximum=12 [majorTicks]='majorTicks' [minorTicks]='minorTicks' [lineStyle]='lineStyle'
4+
<e-axis [radius]='annotationRadius' startAngle=0 endAngle=0 minimum=0 maximum=12 [majorTicks]='majorTicks' [minorTicks]='minorTicks' [lineStyle]='lineStyle'
55
[labelStyle]='labelStyle'>
66
<e-ranges>
77
<e-range start=0 end=3 color='rgba(29,29,29,0.6)'>

‎src/circulargauge/customization-plnkr.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/circulargauge/customization.component.ts‎

Lines changed: 83 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
22
import { CircularGaugeComponent } from '@syncfusion/ej2-ng-circulargauge';
33
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
44
import { DynamicDataSerive } from './customization.service';
5+
import { DropDownList } from '@syncfusion/ej2-dropdowns';
56

67
/**
78
* multiple axis in gauge
@@ -42,7 +43,76 @@ export class CustomizationComponent {
4243
animation: { duration: 0 },
4344
pointerWidth: 9,
4445
cap: { radius: 10, color: '#424242', border: { width: 0 } }
45-
}]
46+
}];
47+
public barColor: DropDownList; public rangeColor: DropDownList; public pointerColor: DropDownList;
48+
ngOnInit(): void {
49+
this.barColor = new DropDownList({
50+
index: 0,
51+
width: 100,
52+
change: () => {
53+
let barColor: string = this.barColor.value.toString();
54+
if (!this.isClicked) {
55+
if (this.isUsage) {
56+
this.usageGauge.axes[0].pointers[0].color = barColor;
57+
this.usageGauge.refresh();
58+
} else {
59+
this.randomGauge.axes[0].pointers[0].color = barColor;
60+
this.randomGauge.refresh();
61+
}
62+
} else {
63+
this.gauge1.axes[0].pointers[0].color = barColor;
64+
this.gauge1.refresh();
65+
this.randomGauge.axes[0].pointers[0].color = barColor;
66+
}
67+
}
68+
});
69+
this.barColor.appendTo('#barColor');
70+
this.rangeColor = new DropDownList({
71+
index: 0,
72+
width: 100,
73+
change: () => {
74+
let barColor: string = this.rangeColor.value.toString();
75+
if (!this.isClicked) {
76+
if (this.isUsage) {
77+
this.usageGauge.axes[0].ranges[0].color = barColor;
78+
this.usageGauge.refresh();
79+
} else {
80+
this.randomGauge.axes[0].ranges[0].color = barColor;
81+
this.randomGauge.refresh();
82+
}
83+
} else {
84+
this.gauge1.axes[0].ranges[0].color = barColor;
85+
this.gauge1.refresh();
86+
this.randomGauge.axes[0].ranges[0].color = barColor;
87+
}
88+
}
89+
});
90+
this.rangeColor.appendTo('#rangeColor');
91+
this.pointerColor = new DropDownList({
92+
index: 0,
93+
width: 100,
94+
change: () => {
95+
let barColor: string = this.pointerColor.value.toString();
96+
if (!this.isClicked) {
97+
if (!this.isUsage) {
98+
this.randomGauge.axes[0].pointers[1].color = barColor;
99+
this.randomGauge.axes[0].pointers[1].cap.border.color = barColor;
100+
this.randomGauge.axes[0].pointers[1].cap.color = barColor;
101+
this.randomGauge.refresh();
102+
}
103+
} else {
104+
this.gauge1.axes[0].pointers[1].color = barColor;
105+
this.gauge1.axes[0].pointers[1].cap.border.color = barColor;
106+
this.gauge1.axes[0].pointers[1].cap.color = barColor;
107+
this.gauge1.refresh();
108+
this.randomGauge.axes[0].pointers[1].color = barColor;
109+
this.randomGauge.axes[0].pointers[1].cap.border.color = barColor;
110+
this.randomGauge.axes[0].pointers[1].cap.color = barColor;
111+
}
112+
}
113+
});
114+
this.pointerColor.appendTo('#pointerColor');
115+
}
46116
ngAfterViewInit(): void {
47117
document.getElementById('usage').onclick = () => {
48118
if (this.isClicked) {
@@ -54,19 +124,16 @@ export class CustomizationComponent {
54124
this.usageGauge.appendTo('#customization-container');
55125
this.isUsage = true;
56126
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById('currentValue');
57-
let barElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('barColor');
58-
let rangeElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('rangeColor');
59-
let pointerElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointerColor');
60127
let pointElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointColor');
61128
element.min = '0.5';
62129
element.max = '100';
63130
element.value = this.usageGauge.axes[0].pointers[0].value.toString();
64131
document.getElementById('currentPointerValue').innerHTML = ' Current Value <span> &nbsp;&nbsp;&nbsp;'
65132
+ this.usageGauge.axes[0].pointers[0].value + '</span>';
66-
barElement.value = this.usageGauge.axes[0].pointers[0].color;
67-
rangeElement.value = this.usageGauge.axes[0].ranges[0].color;
68-
pointerElement.style.visibility = 'hidden';
69-
pointElement.style.visibility = 'hidden';
133+
this.barColor.value = this.usageGauge.axes[0].pointers[0].color;
134+
this.rangeColor.value = this.usageGauge.axes[0].ranges[0].color;
135+
this.pointerColor.enabled = false;
136+
pointElement.className = 'e-disabled';
70137
let currentElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('usage');
71138
let existElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('random');
72139
currentElement.style.border = '2px solid #E0E0E0';
@@ -86,20 +153,17 @@ export class CustomizationComponent {
86153
currentElement.style.border = '2px solid #E0E0E0';
87154
existElement.style.border = '';
88155
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById('currentValue');
89-
let barElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('barColor');
90-
let rangeElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('rangeColor');
91-
let pointerElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointerColor');
92156
let pointElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointColor');
93-
pointerElement.style.visibility = 'visible';
94-
pointElement.style.visibility = 'visible';
157+
pointElement.className = 'e-enabled';
158+
this.pointerColor.enabled = true;
95159
element.min = '1000';
96160
element.max = '2000';
97161
element.value = this.randomGauge.axes[0].pointers[0].value.toString();
98162
document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> &nbsp;&nbsp;&nbsp;' +
99163
this.randomGauge.axes[0].pointers[0].value + '</span>';
100-
barElement.value = this.randomGauge.axes[0].pointers[0].color;
101-
rangeElement.value = this.randomGauge.axes[0].ranges[0].color;
102-
pointerElement.value = this.randomGauge.axes[0].pointers[1].color;
164+
this.barColor.value = this.randomGauge.axes[0].pointers[0].color;
165+
this.rangeColor.value = this.randomGauge.axes[0].ranges[0].color;
166+
this.pointerColor.value = this.randomGauge.axes[0].pointers[1].color;
103167
};
104168

105169
document.getElementById('currentValue').onpointermove = document.getElementById('currentValue').ontouchmove =
@@ -125,59 +189,10 @@ export class CustomizationComponent {
125189
document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> &nbsp;&nbsp;&nbsp;' + value + '</span>';
126190
};
127191

128-
document.getElementById('barColor').onchange = () => {
129-
let barColor: string = (<HTMLInputElement>document.getElementById('barColor')).value;
130-
if (!this.isClicked) {
131-
if (this.isUsage) {
132-
this.usageGauge.axes[0].pointers[0].color = barColor;
133-
this.usageGauge.refresh();
134-
} else {
135-
this.randomGauge.axes[0].pointers[0].color = barColor;
136-
this.randomGauge.refresh();
137-
}
138-
} else {
139-
this.gauge1.axes[0].pointers[0].color = barColor;
140-
this.gauge1.refresh();
141-
this.randomGauge.axes[0].pointers[0].color = barColor;
142-
}
143-
};
144-
145-
document.getElementById('rangeColor').onchange = () => {
146-
let barColor: string = (<HTMLInputElement>document.getElementById('rangeColor')).value;
147-
if (!this.isClicked) {
148-
if (this.isUsage) {
149-
this.usageGauge.axes[0].ranges[0].color = barColor;
150-
this.usageGauge.refresh();
151-
} else {
152-
this.randomGauge.axes[0].ranges[0].color = barColor;
153-
this.randomGauge.refresh();
154-
}
155-
} else {
156-
this.gauge1.axes[0].ranges[0].color = barColor;
157-
this.gauge1.refresh();
158-
this.randomGauge.axes[0].ranges[0].color = barColor;
159-
}
160-
};
192+
161193

162-
document.getElementById('pointerColor').onchange = () => {
163-
let barColor: string = (<HTMLInputElement>document.getElementById('pointerColor')).value;
164-
if (!this.isClicked) {
165-
if (!this.isUsage) {
166-
this.randomGauge.axes[0].pointers[1].color = barColor;
167-
this.randomGauge.axes[0].pointers[1].cap.border.color = barColor;
168-
this.randomGauge.axes[0].pointers[1].cap.color = barColor;
169-
this.randomGauge.refresh();
170-
}
171-
} else {
172-
this.gauge1.axes[0].pointers[1].color = barColor;
173-
this.gauge1.axes[0].pointers[1].cap.border.color = barColor;
174-
this.gauge1.axes[0].pointers[1].cap.color = barColor;
175-
this.gauge1.refresh();
176-
this.randomGauge.axes[0].pointers[1].color = barColor;
177-
this.randomGauge.axes[0].pointers[1].cap.border.color = barColor;
178-
this.randomGauge.axes[0].pointers[1].cap.color = barColor;
179-
}
180-
};
194+
195+
181196
}
182197
constructor() {
183198
// code

‎src/circulargauge/customization.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,11 @@
4545
</td>
4646
<td>
4747
<div>
48-
<input type="color" id="barColor" value="#FFDD00" style="width:50%" />
48+
<select id="barColor" class="form-control" style="width:90%">
49+
<option value="#FFDD00">#FFDD00</option>
50+
<option value="#00bdae">#00bdae</option>
51+
<option value="#FF2680">#FF2680</option>
52+
</select>
4953
</div>
5054
</td>
5155
</tr>
@@ -55,7 +59,11 @@
5559
</td>
5660
<td>
5761
<div>
58-
<input type="color" id="rangeColor" value="#E0E0E0" style="width:50%;">
62+
<select id="rangeColor" class="form-control" style="width:90%">
63+
<option value="#E0E0E0">#E0E0E0</option>
64+
<option value="#7bb4eb">#7bb4eb</option>
65+
<option value="#ea7a57">#ea7a57</option>
66+
</select>
5967
</div>
6068
</td>
6169
</tr>
@@ -65,7 +73,11 @@
6573
</td>
6674
<td>
6775
<div>
68-
<input type="color" id="pointerColor" value="#424242" style="width:50%" />
76+
<select id="pointerColor" class="form-control" style="width:90%">
77+
<option value="#424242" >#424242</option>
78+
<option value="#6f6fe2">#6f6fe2</option>
79+
<option value="#9e480e">#9e480e</option>
80+
</select>
6981
</div>
7082
</td>
7183
</tr>
@@ -78,13 +90,13 @@
7890
<div id="description">
7991
<p style="font-weight: 500">Description</p>
8092
<p>
81-
In this example, you can see how to customize the ranges, pointers and annotation of an axis in the circular gauge.
82-
In this sample, an axis is shown with one range and two pointers and options
83-
to customize the range color and pointer color properties with property panel.
93+
In this example, you can see how to customize the gauge elements such as <code>pointers</code> and <code>range</code>.
94+
Here a needle and range bar are added to show the current value and its appearance
95+
can be customized by using options in property panel.
8496
</p>
8597
<p>
86-
More information on the range customization can be found in this
87-
<a target="_blank" href="http://ej2.syncfusion.com/documentation">documentation section</a>.
98+
More information on the range and pointer customization can be found in this
99+
<a target="_blank" href="http://ej2.syncfusion.com/documentation"> documentation section</a>.
88100
</p>
89101
</div>
90102

0 commit comments

Comments
 (0)