Skip to content

Commit 9eca8c6

Browse files
ajivanyandevajivanyandev
authored
Migrate Gauges/Localization demos to the new nested component syntax (DevExpress#31799)
1 parent 84c3f53 commit 9eca8c6

File tree

29 files changed

+820
-413
lines changed

29 files changed

+820
-413
lines changed

‎apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.html‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
<dx-form id="form" [formData]="employee">
2-
<dxi-item itemType="group" cssClass="form-group" [colCount]="4">
3-
<dxi-item>
2+
<dxi-form-item itemType="group" cssClass="form-group" [colCount]="4">
3+
<dxi-form-item>
44
<div class="form-avatar"></div>
5-
</dxi-item>
6-
<dxi-item itemType="group" [colSpan]="3">
7-
<dxi-item dataField="FirstName"></dxi-item>
8-
<dxi-item dataField="LastName"></dxi-item>
9-
<dxi-item
5+
</dxi-form-item>
6+
<dxi-form-item itemType="group" [colSpan]="3">
7+
<dxi-form-item dataField="FirstName"></dxi-form-item>
8+
<dxi-form-item dataField="LastName"></dxi-form-item>
9+
<dxi-form-item
1010
dataField="BirthDate"
1111
editorType="dxDateBox"
1212
[editorOptions]="{ width: '100%' }"
13-
></dxi-item>
14-
</dxi-item>
15-
</dxi-item>
16-
<dxi-item itemType="group" cssClass="form-group" [colCount]="2">
17-
<dxi-item itemType="group">
18-
<dxi-item dataField="Address"></dxi-item>
19-
<dxi-item dataField="City"></dxi-item>
20-
<dxi-item
13+
></dxi-form-item>
14+
</dxi-form-item>
15+
</dxi-form-item>
16+
<dxi-form-item itemType="group" cssClass="form-group" [colCount]="2">
17+
<dxi-form-item itemType="group">
18+
<dxi-form-item dataField="Address"></dxi-form-item>
19+
<dxi-form-item dataField="City"></dxi-form-item>
20+
<dxi-form-item
2121
dataField="Position"
2222
editorType="dxSelectBox"
2323
[editorOptions]="{ items: positions, value: '' }"
24-
></dxi-item>
25-
</dxi-item>
26-
<dxi-item itemType="group">
27-
<dxi-item
24+
></dxi-form-item>
25+
</dxi-form-item>
26+
<dxi-form-item itemType="group">
27+
<dxi-form-item
2828
dataField="State"
2929
editorType="dxSelectBox"
3030
[editorOptions]="{ items: states }"
31-
></dxi-item>
32-
<dxi-item dataField="ZipCode"></dxi-item>
33-
<dxi-item
31+
></dxi-form-item>
32+
<dxi-form-item dataField="ZipCode"></dxi-form-item>
33+
<dxi-form-item
3434
dataField="Mobile"
3535
[label]="{ text: 'Phone' }"
3636
[editorOptions]="{ mask: '+1 (000) 000-0000' }"
37-
></dxi-item>
38-
</dxi-item>
39-
<dxi-item
37+
></dxi-form-item>
38+
</dxi-form-item>
39+
<dxi-form-item
4040
dataField="Notes"
4141
[colSpan]="2"
4242
editorType="dxTextArea"
4343
[editorOptions]="{ height: 140 }"
44-
></dxi-item>
45-
</dxi-item>
44+
></dxi-form-item>
45+
</dxi-form-item>
4646
</dx-form>

‎apps/demos/Demos/Gauges/AnglesCustomization/Angular/app/app.component.html‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,46 @@ <h3>Humidity in Rooms (%)</h3>
33
</div>
44
<div id="gauge-demo">
55
<dx-circular-gauge class="gauge" [value]="80">
6-
<dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="10">
7-
</dxo-scale>
8-
<dxo-geometry [startAngle]="180" [endAngle]="90"> </dxo-geometry>
6+
<dxo-circular-gauge-scale
7+
[startValue]="0"
8+
[endValue]="100"
9+
[tickInterval]="10"
10+
>
11+
</dxo-circular-gauge-scale>
12+
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="90">
13+
</dxo-circular-gauge-geometry>
914
</dx-circular-gauge>
1015

1116
<dx-circular-gauge class="gauge" [value]="75">
12-
<dxo-scale [startValue]="100" [endValue]="0" [tickInterval]="10">
13-
</dxo-scale>
14-
<dxo-geometry [startAngle]="90" [endAngle]="0"> </dxo-geometry>
17+
<dxo-circular-gauge-scale
18+
[startValue]="100"
19+
[endValue]="0"
20+
[tickInterval]="10"
21+
>
22+
</dxo-circular-gauge-scale>
23+
<dxo-circular-gauge-geometry [startAngle]="90" [endAngle]="0">
24+
</dxo-circular-gauge-geometry>
1525
</dx-circular-gauge>
1626

1727
<dx-circular-gauge class="gauge" [value]="70">
18-
<dxo-scale [startValue]="100" [endValue]="0" [tickInterval]="10">
19-
</dxo-scale>
20-
<dxo-geometry [startAngle]="-90" [endAngle]="-180"> </dxo-geometry>
28+
<dxo-circular-gauge-scale
29+
[startValue]="100"
30+
[endValue]="0"
31+
[tickInterval]="10"
32+
>
33+
</dxo-circular-gauge-scale>
34+
<dxo-circular-gauge-geometry [startAngle]="-90" [endAngle]="-180">
35+
</dxo-circular-gauge-geometry>
2136
</dx-circular-gauge>
2237

2338
<dx-circular-gauge class="gauge" [value]="68">
24-
<dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="10">
25-
</dxo-scale>
26-
<dxo-geometry [startAngle]="0" [endAngle]="-90"> </dxo-geometry>
39+
<dxo-circular-gauge-scale
40+
[startValue]="0"
41+
[endValue]="100"
42+
[tickInterval]="10"
43+
>
44+
</dxo-circular-gauge-scale>
45+
<dxo-circular-gauge-geometry [startAngle]="0" [endAngle]="-90">
46+
</dxo-circular-gauge-geometry>
2747
</dx-circular-gauge>
2848
</div>

‎apps/demos/Demos/Gauges/BarGauge/Angular/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[endValue]="255"
88
[palette]="['#ff0000', '#00ff00', '#0000ff']"
99
>
10-
<dxo-label [visible]="false"></dxo-label>
10+
<dxo-bar-gauge-label [visible]="false"></dxo-bar-gauge-label>
1111
</dx-bar-gauge>
1212

1313
<div class="action-container">

‎apps/demos/Demos/Gauges/CircularGauge/Angular/app/app.component.html‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,37 @@
44
[value]="value.mean"
55
[subvalues]="[value.min, value.max]"
66
>
7-
<dxo-range-container>
8-
<dxi-range [startValue]="10" [endValue]="20" color="#0077BE"></dxi-range>
9-
<dxi-range [startValue]="20" [endValue]="30" color="#E6E200"></dxi-range>
10-
<dxi-range [startValue]="30" [endValue]="40" color="#77DD77"></dxi-range>
11-
</dxo-range-container>
7+
<dxo-circular-gauge-range-container>
8+
<dxi-circular-gauge-range
9+
[startValue]="10"
10+
[endValue]="20"
11+
color="#0077BE"
12+
></dxi-circular-gauge-range>
13+
<dxi-circular-gauge-range
14+
[startValue]="20"
15+
[endValue]="30"
16+
color="#E6E200"
17+
></dxi-circular-gauge-range>
18+
<dxi-circular-gauge-range
19+
[startValue]="30"
20+
[endValue]="40"
21+
color="#77DD77"
22+
></dxi-circular-gauge-range>
23+
</dxo-circular-gauge-range-container>
1224

13-
<dxo-scale [startValue]="10" [endValue]="40" [tickInterval]="5">
14-
<dxo-label [customizeText]="customizeText"></dxo-label>
15-
</dxo-scale>
16-
<dxo-tooltip [enabled]="true"></dxo-tooltip>
17-
<dxo-title text="Temperature in the Greenhouse">
18-
<dxo-font [size]="28"></dxo-font>
19-
</dxo-title>
25+
<dxo-circular-gauge-scale
26+
[startValue]="10"
27+
[endValue]="40"
28+
[tickInterval]="5"
29+
>
30+
<dxo-circular-gauge-label
31+
[customizeText]="customizeText"
32+
></dxo-circular-gauge-label>
33+
</dxo-circular-gauge-scale>
34+
<dxo-circular-gauge-tooltip [enabled]="true"></dxo-circular-gauge-tooltip>
35+
<dxo-circular-gauge-title text="Temperature in the Greenhouse">
36+
<dxo-circular-gauge-font [size]="28"></dxo-circular-gauge-font>
37+
</dxo-circular-gauge-title>
2038
</dx-circular-gauge>
2139

2240
<dx-select-box

‎apps/demos/Demos/Gauges/CustomLayout/Angular/app/app.component.html‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,39 @@
11
<dx-circular-gauge id="gauge" [value]="85" [subvalues]="[40, 90]">
2-
<dxo-subvalue-indicator [offset]="-25"></dxo-subvalue-indicator>
3-
<dxo-value-indicator [offset]="50"></dxo-value-indicator>
4-
<dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="10">
5-
<dxo-tick color="#536878"></dxo-tick>
6-
<dxo-label [indentFromTick]="3"></dxo-label>
7-
</dxo-scale>
8-
<dxo-range-container [offset]="10">
9-
<dxi-range [startValue]="0" [endValue]="30" color="#92000A"></dxi-range>
10-
<dxi-range [startValue]="30" [endValue]="70" color="#E6E200"></dxi-range>
11-
<dxi-range [startValue]="70" [endValue]="100" color="#77DD77"></dxi-range>
12-
</dxo-range-container>
13-
<dxo-export [enabled]="true"></dxo-export>
14-
<dxo-title text="Amount of Tickets Sold (with Min and Max Expected)">
15-
<dxo-font [size]="28"></dxo-font>
16-
</dxo-title>
2+
<dxo-circular-gauge-subvalue-indicator
3+
[offset]="-25"
4+
></dxo-circular-gauge-subvalue-indicator>
5+
<dxo-circular-gauge-value-indicator
6+
[offset]="50"
7+
></dxo-circular-gauge-value-indicator>
8+
<dxo-circular-gauge-scale
9+
[startValue]="0"
10+
[endValue]="100"
11+
[tickInterval]="10"
12+
>
13+
<dxo-circular-gauge-tick color="#536878"></dxo-circular-gauge-tick>
14+
<dxo-circular-gauge-label [indentFromTick]="3"></dxo-circular-gauge-label>
15+
</dxo-circular-gauge-scale>
16+
<dxo-circular-gauge-range-container [offset]="10">
17+
<dxi-circular-gauge-range
18+
[startValue]="0"
19+
[endValue]="30"
20+
color="#92000A"
21+
></dxi-circular-gauge-range>
22+
<dxi-circular-gauge-range
23+
[startValue]="30"
24+
[endValue]="70"
25+
color="#E6E200"
26+
></dxi-circular-gauge-range>
27+
<dxi-circular-gauge-range
28+
[startValue]="70"
29+
[endValue]="100"
30+
color="#77DD77"
31+
></dxi-circular-gauge-range>
32+
</dxo-circular-gauge-range-container>
33+
<dxo-circular-gauge-export [enabled]="true"></dxo-circular-gauge-export>
34+
<dxo-circular-gauge-title
35+
text="Amount of Tickets Sold (with Min and Max Expected)"
36+
>
37+
<dxo-circular-gauge-font [size]="28"></dxo-circular-gauge-font>
38+
</dxo-circular-gauge-title>
1739
</dx-circular-gauge>

‎apps/demos/Demos/Gauges/CustomLayoutLinearGauge/Angular/app/app.component.html‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,33 @@
11
<dx-linear-gauge id="gauge" [value]="17" [subvalues]="[5, 25]">
2-
<dxo-subvalue-indicator [offset]="-15"></dxo-subvalue-indicator>
3-
<dxo-value-indicator [offset]="20"></dxo-value-indicator>
4-
<dxo-range-container [offset]="10">
5-
<dxi-range [startValue]="0" [endValue]="5" color="#92000A"></dxi-range>
6-
<dxi-range [startValue]="5" [endValue]="20" color="#E6E200"></dxi-range>
7-
<dxi-range [startValue]="20" [endValue]="30" color="#77DD77"></dxi-range>
8-
</dxo-range-container>
9-
<dxo-scale [startValue]="0" [endValue]="30" [tickInterval]="5">
10-
<dxo-tick color="#536878"></dxo-tick>
11-
<dxo-label [indentFromTick]="-3"></dxo-label>
12-
</dxo-scale>
13-
<dxo-export [enabled]="true"></dxo-export>
14-
<dxo-title text="Issues Closed (with Min and Max Expected)">
15-
<dxo-font [size]="28"></dxo-font>
16-
</dxo-title>
2+
<dxo-linear-gauge-subvalue-indicator
3+
[offset]="-15"
4+
></dxo-linear-gauge-subvalue-indicator>
5+
<dxo-linear-gauge-value-indicator
6+
[offset]="20"
7+
></dxo-linear-gauge-value-indicator>
8+
<dxo-linear-gauge-range-container [offset]="10">
9+
<dxi-linear-gauge-range
10+
[startValue]="0"
11+
[endValue]="5"
12+
color="#92000A"
13+
></dxi-linear-gauge-range>
14+
<dxi-linear-gauge-range
15+
[startValue]="5"
16+
[endValue]="20"
17+
color="#E6E200"
18+
></dxi-linear-gauge-range>
19+
<dxi-linear-gauge-range
20+
[startValue]="20"
21+
[endValue]="30"
22+
color="#77DD77"
23+
></dxi-linear-gauge-range>
24+
</dxo-linear-gauge-range-container>
25+
<dxo-linear-gauge-scale [startValue]="0" [endValue]="30" [tickInterval]="5">
26+
<dxo-linear-gauge-tick color="#536878"></dxo-linear-gauge-tick>
27+
<dxo-linear-gauge-label [indentFromTick]="-3"></dxo-linear-gauge-label>
28+
</dxo-linear-gauge-scale>
29+
<dxo-linear-gauge-export [enabled]="true"></dxo-linear-gauge-export>
30+
<dxo-linear-gauge-title text="Issues Closed (with Min and Max Expected)">
31+
<dxo-linear-gauge-font [size]="28"></dxo-linear-gauge-font>
32+
</dxo-linear-gauge-title>
1733
</dx-linear-gauge>

‎apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/Angular/app/app.component.html‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,80 @@ <h3>Grades of Goods</h3>
33
</div>
44
<div id="gauge-demo">
55
<dx-circular-gauge id="triangleMarker" [value]="8" [subvalues]="[2, 8]">
6-
<dxo-subvalue-indicator type="triangleMarker" color="#8FBC8F">
7-
</dxo-subvalue-indicator>
8-
<dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry>
9-
<dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale>
6+
<dxo-circular-gauge-subvalue-indicator
7+
type="triangleMarker"
8+
color="#8FBC8F"
9+
>
10+
</dxo-circular-gauge-subvalue-indicator>
11+
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0">
12+
</dxo-circular-gauge-geometry>
13+
<dxo-circular-gauge-scale
14+
[startValue]="0"
15+
[endValue]="10"
16+
[tickInterval]="1"
17+
>
18+
</dxo-circular-gauge-scale>
1019
</dx-circular-gauge>
1120

1221
<dx-circular-gauge id="rectangleNeedle" [value]="9" [subvalues]="[2, 8]">
13-
<dxo-subvalue-indicator type="rectangleNeedle" color="#9B870C">
14-
</dxo-subvalue-indicator>
15-
<dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry>
16-
<dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale>
22+
<dxo-circular-gauge-subvalue-indicator
23+
type="rectangleNeedle"
24+
color="#9B870C"
25+
>
26+
</dxo-circular-gauge-subvalue-indicator>
27+
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0">
28+
</dxo-circular-gauge-geometry>
29+
<dxo-circular-gauge-scale
30+
[startValue]="0"
31+
[endValue]="10"
32+
[tickInterval]="1"
33+
>
34+
</dxo-circular-gauge-scale>
1735
</dx-circular-gauge>
1836

1937
<dx-circular-gauge id="triangleNeedle" [value]="5" [subvalues]="[2, 8]">
20-
<dxo-subvalue-indicator type="triangleNeedle" color="#779ECB">
21-
</dxo-subvalue-indicator>
22-
<dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry>
23-
<dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale>
38+
<dxo-circular-gauge-subvalue-indicator
39+
type="triangleNeedle"
40+
color="#779ECB"
41+
>
42+
</dxo-circular-gauge-subvalue-indicator>
43+
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0">
44+
</dxo-circular-gauge-geometry>
45+
<dxo-circular-gauge-scale
46+
[startValue]="0"
47+
[endValue]="10"
48+
[tickInterval]="1"
49+
>
50+
</dxo-circular-gauge-scale>
2451
</dx-circular-gauge>
2552

2653
<dx-circular-gauge id="textCloud" [value]="6" [subvalues]="[2, 8]">
27-
<dxo-subvalue-indicator type="textCloud" color="#f05b41">
28-
</dxo-subvalue-indicator>
29-
<dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry>
30-
<dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale>
54+
<dxo-circular-gauge-subvalue-indicator type="textCloud" color="#f05b41">
55+
</dxo-circular-gauge-subvalue-indicator>
56+
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0">
57+
</dxo-circular-gauge-geometry>
58+
<dxo-circular-gauge-scale
59+
[startValue]="0"
60+
[endValue]="10"
61+
[tickInterval]="1"
62+
>
63+
</dxo-circular-gauge-scale>
3164
</dx-circular-gauge>
3265

3366
<dx-circular-gauge id="twoColorNeedle" [value]="4" [subvalues]="[2, 8]">
34-
<dxo-subvalue-indicator
67+
<dxo-circular-gauge-subvalue-indicator
3568
type="twoColorNeedle"
3669
color="#779ECB"
3770
secondColor="#734F96"
3871
>
39-
</dxo-subvalue-indicator>
40-
<dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry>
41-
<dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale>
72+
</dxo-circular-gauge-subvalue-indicator>
73+
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0">
74+
</dxo-circular-gauge-geometry>
75+
<dxo-circular-gauge-scale
76+
[startValue]="0"
77+
[endValue]="10"
78+
[tickInterval]="1"
79+
>
80+
</dxo-circular-gauge-scale>
4281
</dx-circular-gauge>
4382
</div>

0 commit comments

Comments
 (0)