Skip to content

Commit c97a762

Browse files
authored
Update Chart/Scheduler/DropdownBox/Lookup demos syntax (#31772)
1 parent 20f9e36 commit c97a762

File tree

103 files changed

+1469
-1189
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+1469
-1189
lines changed

apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.html

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,24 @@
44
dataSource="../../../../data/simpleJSON.json"
55
[rotated]="true"
66
>
7-
<dxi-series color="#79cac4" type="bar" argumentField="day" valueField="sales">
8-
<dxo-label [visible]="true" backgroundColor="#c18e92"></dxo-label>
9-
</dxi-series>
10-
<dxo-argument-axis>
11-
<dxo-label [customizeText]="customizeText"></dxo-label>
12-
</dxo-argument-axis>
13-
<dxi-value-axis>
14-
<dxo-tick [visible]="false"></dxo-tick>
15-
<dxo-label [visible]="false"></dxo-label>
16-
</dxi-value-axis>
17-
<dxo-export [enabled]="true"></dxo-export>
18-
<dxo-legend [visible]="false"></dxo-legend>
7+
<dxi-chart-series
8+
color="#79cac4"
9+
type="bar"
10+
argumentField="day"
11+
valueField="sales"
12+
>
13+
<dxo-chart-label
14+
[visible]="true"
15+
backgroundColor="#c18e92"
16+
></dxo-chart-label>
17+
</dxi-chart-series>
18+
<dxo-chart-argument-axis>
19+
<dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
20+
</dxo-chart-argument-axis>
21+
<dxi-chart-value-axis>
22+
<dxo-chart-tick [visible]="false"></dxo-chart-tick>
23+
<dxo-chart-label [visible]="false"></dxo-chart-label>
24+
</dxi-chart-value-axis>
25+
<dxo-chart-export [enabled]="true"></dxo-chart-export>
26+
<dxo-chart-legend [visible]="false"></dxo-chart-legend>
1927
</dx-chart>
Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
<dx-chart id="chart" [dataSource]="dataSource">
2-
<dxo-argument-axis argumentType="datetime"> </dxo-argument-axis>
3-
<dxi-value-axis position="right"> </dxi-value-axis>
4-
<dxo-title text="Apple Stock Price" subtitle="AAPL"></dxo-title>
5-
<dxo-legend [visible]="false"></dxo-legend>
6-
<dxo-common-series-settings argumentField="date" type="line">
7-
</dxo-common-series-settings>
8-
<dxi-series valueField="close" name="AAPL"></dxi-series>
9-
<dxo-common-annotation-settings
2+
<dxo-chart-argument-axis argumentType="datetime"> </dxo-chart-argument-axis>
3+
<dxi-chart-value-axis position="right"> </dxi-chart-value-axis>
4+
<dxo-chart-title text="Apple Stock Price" subtitle="AAPL"></dxo-chart-title>
5+
<dxo-chart-legend [visible]="false"></dxo-chart-legend>
6+
<dxo-chart-common-series-settings argumentField="date" type="line">
7+
</dxo-chart-common-series-settings>
8+
<dxi-chart-series valueField="close" name="AAPL"></dxi-chart-series>
9+
<dxo-chart-common-annotation-settings
1010
series="AAPL"
1111
type="image"
1212
[customizeTooltip]="customizeTooltip"
1313
>
14-
<dxo-font [size]="16" [weight]="600"></dxo-font>
15-
<dxo-image [width]="50.5" [height]="105.75"></dxo-image>
16-
</dxo-common-annotation-settings>
17-
<dxi-annotation
14+
<dxo-chart-font [size]="16" [weight]="600"></dxo-chart-font>
15+
<dxo-chart-image [width]="50.5" [height]="105.75"></dxo-chart-image>
16+
</dxo-chart-common-annotation-settings>
17+
<dxi-chart-annotation
1818
type="text"
1919
text="WWDC 2017"
2020
[argument]="appleWWDCDate"
2121
description="The Apple Worldwide Developers Conference was held from June 5 to June 9, 2017 at the San Jose Convention Center in San Jose, California, which was the first time since 2002 that the conference took place in the city. Software announcements included iOS 11, watchOS 4, macOS High Sierra, and updates to tvOS. Hardware announcements included updates to iMac, MacBook and MacBook Pro, as well as the new iMac Pro, 10.5-inch iPad Pro and smart speaker HomePod. Fall Out Boy performed at the Bash held in Discovery Meadow on June 8"
22-
></dxi-annotation>
23-
<dxi-annotation
22+
></dxi-chart-annotation>
23+
<dxi-chart-annotation
2424
type="text"
2525
text="Apple TV+ announced"
2626
[argument]="appleTVAnnouncementDate"
2727
description="Apple TV+ is an upcoming over-the-top ad-free subscription video on demand web television service announced by Apple Inc. in 2019 during their March 25 Apple Special Event held at Steve Jobs Theater."
28-
></dxi-annotation>
29-
<dxi-annotation
28+
></dxi-chart-annotation>
29+
<dxi-chart-annotation
3030
[argument]="watchReleaseDate"
3131
[paddingTopBottom]="5"
3232
description="Apple Watch is a line of smartwatches designed, developed, and marketed by Apple Inc. It incorporates fitness tracking and health-oriented capabilities with integration with iOS and other Apple products and services. The Apple Watch was released on April 24, 2015 and quickly became the best-selling wearable device with 4.2 million sold in the second quarter of the 2015 fiscal year"
3333
>
34-
<dxo-image
34+
<dxo-chart-image
3535
url="../../../../images/Charts/Annotation/apple-watch.png"
36-
></dxo-image>
37-
</dxi-annotation>
38-
<dxi-annotation
36+
></dxo-chart-image>
37+
</dxi-chart-annotation>
38+
<dxi-chart-annotation
3939
[argument]="seReleaseDate"
4040
description="The iPhone SE (Special Edition) is a smartphone that was designed and marketed by Apple Inc. It is part of the ninth generation of the iPhone alongside the iPhone 6S. It was announced on March 21, 2016 at the Town Hall auditorium in the Apple Campus by Apple executive Greg Joswiak, with pre-orders beginning on March 24, and official release on March 31, 2016. It was re-released almost a year later on March 24, 2017 with larger storage capacities. The iPhone SE shares the same physical design and dimensions as the iPhone 5S, but has upgraded internal hardware, including the newer Apple A9 system-on-chip, greater battery capacity, and a 12-megapixel rear camera that can record 4K video. Along with the iPhone 6S and the iPhone X, the iPhone SE was discontinued by Apple on September 12, 2018"
4141
>
42-
<dxo-image
42+
<dxo-chart-image
4343
url="../../../../images/Charts/Annotation/iphone-se.png"
44-
></dxo-image>
45-
</dxi-annotation>
46-
<dxi-annotation
44+
></dxo-chart-image>
45+
</dxi-chart-annotation>
46+
<dxi-chart-annotation
4747
[argument]="xReleaseDate"
4848
[offsetY]="110"
4949
description="iPhone X (Roman numeral 'X' pronounced 'ten') is a smartphone designed, developed, and marketed by Apple Inc. It was the eleventh generation of the iPhone. It was announced on September 12, 2017, alongside the iPhone 8 and iPhone 8 Plus, at the Steve Jobs Theater in the Apple Park campus. The phone was released on November 3, 2017, marking the iPhone series' tenth anniversary"
5050
>
51-
<dxo-image
51+
<dxo-chart-image
5252
url="../../../../images/Charts/Annotation/iphone-x.png"
53-
></dxo-image>
54-
</dxi-annotation>
53+
></dxo-chart-image>
54+
</dxi-chart-annotation>
5555
</dx-chart>

apps/demos/Demos/Charts/Area/Angular/app/app.component.html

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,25 @@
44
palette="Harmony Light"
55
[dataSource]="populationData"
66
>
7-
<dxi-series valueField="y1564" name="15-64 years"></dxi-series>
8-
<dxi-series valueField="y014" name="0-14 years"></dxi-series>
9-
<dxi-series valueField="y65" name="65 years and older"></dxi-series>
10-
<dxo-common-series-settings
7+
<dxi-chart-series valueField="y1564" name="15-64 years"></dxi-chart-series>
8+
<dxi-chart-series valueField="y014" name="0-14 years"></dxi-chart-series>
9+
<dxi-chart-series
10+
valueField="y65"
11+
name="65 years and older"
12+
></dxi-chart-series>
13+
<dxo-chart-common-series-settings
1114
#commonSeries
1215
argumentField="country"
1316
[type]="types[0]"
1417
>
15-
</dxo-common-series-settings>
16-
<dxo-margin [bottom]="20"></dxo-margin>
17-
<dxo-argument-axis [valueMarginsEnabled]="false"></dxo-argument-axis>
18-
<dxo-export [enabled]="true"></dxo-export>
19-
<dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
20-
</dxo-legend>
18+
</dxo-chart-common-series-settings>
19+
<dxo-chart-margin [bottom]="20"></dxo-chart-margin>
20+
<dxo-chart-argument-axis
21+
[valueMarginsEnabled]="false"
22+
></dxo-chart-argument-axis>
23+
<dxo-chart-export [enabled]="true"></dxo-chart-export>
24+
<dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
25+
</dxo-chart-legend>
2126
</dx-chart>
2227
<div class="options">
2328
<div class="caption">Options</div>

apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<dx-chart id="chart" [dataSource]="data">
2-
<dxo-title text="Life Expectancy vs. Birth Rates"></dxo-title>
3-
<dxo-zoom-and-pan
2+
<dxo-chart-title text="Life Expectancy vs. Birth Rates"></dxo-chart-title>
3+
<dxo-chart-zoom-and-pan
44
valueAxis="both"
55
argumentAxis="both"
66
[dragToZoom]="true"
77
[allowMouseWheel]="true"
88
panKey="shift"
9-
></dxo-zoom-and-pan>
10-
<dxo-common-series-settings
9+
></dxo-chart-zoom-and-pan>
10+
<dxo-chart-common-series-settings
1111
type="scatter"
1212
argumentField="life_exp"
1313
valueField="birth_rate"
1414
>
15-
<dxo-point [size]="8"></dxo-point>
16-
</dxo-common-series-settings>
17-
<dxo-series-template nameField="year"></dxo-series-template>
18-
<dxo-crosshair [enabled]="true">
19-
<dxo-label [visible]="true"></dxo-label>
20-
</dxo-crosshair>
21-
<dxo-tooltip
15+
<dxo-chart-point [size]="8"></dxo-chart-point>
16+
</dxo-chart-common-series-settings>
17+
<dxo-chart-series-template nameField="year"></dxo-chart-series-template>
18+
<dxo-chart-crosshair [enabled]="true">
19+
<dxo-chart-label [visible]="true"></dxo-chart-label>
20+
</dxo-chart-crosshair>
21+
<dxo-chart-tooltip
2222
[enabled]="true"
2323
[customizeTooltip]="customizeTooltip"
24-
></dxo-tooltip>
25-
<dxo-argument-axis title="Life Expectancy"> </dxo-argument-axis>
26-
<dxi-value-axis title="Birth Rate"> </dxi-value-axis>
27-
<dxo-legend position="inside">
28-
<dxo-border [visible]="true"></dxo-border>
29-
</dxo-legend>
24+
></dxo-chart-tooltip>
25+
<dxo-chart-argument-axis title="Life Expectancy"> </dxo-chart-argument-axis>
26+
<dxi-chart-value-axis title="Birth Rate"> </dxi-chart-value-axis>
27+
<dxo-chart-legend position="inside">
28+
<dxo-chart-border [visible]="true"></dxo-chart-border>
29+
</dxo-chart-legend>
3030
</dx-chart>
3131
<dx-button
3232
id="reset-zoom"

apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
palette="soft"
55
title="Percent of Total Energy Production"
66
>
7-
<dxi-series valueField="oil" name="Oil Production"></dxi-series>
8-
<dxi-series valueField="gas" name="Gas Production"></dxi-series>
9-
<dxi-series valueField="coal" name="Coal Production"></dxi-series>
10-
<dxo-common-series-settings
7+
<dxi-chart-series valueField="oil" name="Oil Production"></dxi-chart-series>
8+
<dxi-chart-series valueField="gas" name="Gas Production"></dxi-chart-series>
9+
<dxi-chart-series valueField="coal" name="Coal Production"></dxi-chart-series>
10+
<dxo-chart-common-series-settings
1111
argumentField="state"
1212
type="bar"
1313
[ignoreEmptyPoints]="true"
1414
>
15-
</dxo-common-series-settings>
16-
<dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
17-
</dxo-legend>
18-
<dxo-export [enabled]="true"></dxo-export>
15+
</dxo-chart-common-series-settings>
16+
<dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
17+
</dxo-chart-legend>
18+
<dxo-chart-export [enabled]="true"></dxo-chart-export>
1919
</dx-chart>

apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.html

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<dx-chart id="chart" [dataSource]="dataSource">
2-
<dxo-common-series-settings type="scatter"></dxo-common-series-settings>
3-
<dxi-series argumentField="x1" valueField="y1"></dxi-series>
4-
<dxi-series argumentField="x2" valueField="y2">
5-
<dxo-point symbol="triangleDown"></dxo-point>
6-
</dxi-series>
7-
<dxo-argument-axis
2+
<dxo-chart-common-series-settings
3+
type="scatter"
4+
></dxo-chart-common-series-settings>
5+
<dxi-chart-series argumentField="x1" valueField="y1"></dxi-chart-series>
6+
<dxi-chart-series argumentField="x2" valueField="y2">
7+
<dxo-chart-point symbol="triangleDown"></dxo-chart-point>
8+
</dxi-chart-series>
9+
<dxo-chart-argument-axis
810
#argument
911
[visualRange]="[-20, 20]"
1012
[offset]="0"
1113
[customPosition]="0"
1214
>
13-
</dxo-argument-axis>
14-
<dxi-value-axis
15+
</dxo-chart-argument-axis>
16+
<dxi-chart-value-axis
1517
#value
1618
[visualRange]="[-20, 20]"
1719
[endOnTick]="false"
1820
[offset]="0"
1921
[customPosition]="0"
2022
>
21-
</dxi-value-axis>
22-
<dxo-legend [visible]="false"></dxo-legend>
23+
</dxi-chart-value-axis>
24+
<dxo-chart-legend [visible]="false"></dxo-chart-legend>
2325
</dx-chart>
2426
<div class="options">
2527
<div class="caption">Options</div>

apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.html

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@
33
title="Ice Hockey World Championship Gold Medal Winners"
44
[dataSource]="dataSource"
55
>
6-
<dxo-common-series-settings type="bar" argumentField="country">
7-
<dxo-label visible="true"></dxo-label>
8-
</dxo-common-series-settings>
9-
<dxi-series name="Gold" valueField="gold" color="#ffd700"> </dxi-series>
10-
<dxi-series name="Silver" valueField="silver" color="#c0c0c0"> </dxi-series>
11-
<dxi-series name="Bronze" valueField="bronze" color="#cd7f32"> </dxi-series>
12-
<dxo-argument-axis>
13-
<dxo-label [visible]="true" template="labelTemplate"></dxo-label>
14-
</dxo-argument-axis>
6+
<dxo-chart-common-series-settings type="bar" argumentField="country">
7+
<dxo-chart-label visible="true"></dxo-chart-label>
8+
</dxo-chart-common-series-settings>
9+
<dxi-chart-series name="Gold" valueField="gold" color="#ffd700">
10+
</dxi-chart-series>
11+
<dxi-chart-series name="Silver" valueField="silver" color="#c0c0c0">
12+
</dxi-chart-series>
13+
<dxi-chart-series name="Bronze" valueField="bronze" color="#cd7f32">
14+
</dxi-chart-series>
15+
<dxo-chart-argument-axis>
16+
<dxo-chart-label
17+
[visible]="true"
18+
template="labelTemplate"
19+
></dxo-chart-label>
20+
</dxo-chart-argument-axis>
1521
<svg overflow="visible" *dxTemplate="let data of 'labelTemplate'">
1622
<image
1723
filter="url(#DevExpress_shadow_filter)"
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<dx-chart id="chart" [dataSource]="userData" palette="soft">
2-
<dxo-title
2+
<dxo-chart-title
33
text="Age Breakdown of Facebook Users in the U.S."
44
subtitle="as of January 2017"
55
>
6-
</dxo-title>
7-
<dxo-common-series-settings
6+
</dxo-chart-title>
7+
<dxo-chart-common-series-settings
88
argumentField="age"
99
type="bar"
1010
valueField="number"
1111
[ignoreEmptyPoints]="true"
1212
>
13-
</dxo-common-series-settings>
14-
<dxo-series-template nameField="age"></dxo-series-template>
13+
</dxo-chart-common-series-settings>
14+
<dxo-chart-series-template nameField="age"></dxo-chart-series-template>
1515
</dx-chart>

apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
title="The Most Populated Countries by Continents"
77
[customizePoint]="customizePoint"
88
>
9-
<dxi-series type="bar"></dxi-series>
10-
<dxo-legend [visible]="false"></dxo-legend>
11-
<dxi-value-axis [showZero]="false"></dxi-value-axis>
9+
<dxi-chart-series type="bar"></dxi-chart-series>
10+
<dxo-chart-legend [visible]="false"></dxo-chart-legend>
11+
<dxi-chart-value-axis [showZero]="false"></dxi-chart-value-axis>
1212
</dx-chart>
1313
<dx-button
1414
class="button-container"

apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.html

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@
55
[barGroupWidth]="18"
66
title="Population Pyramid For Norway 2016"
77
>
8-
<dxo-common-series-settings argumentField="age" type="stackedbar">
9-
</dxo-common-series-settings>
10-
<dxi-series valueField="male" name="Male" color="#3F7FBF"> </dxi-series>
11-
<dxi-series valueField="female" name="Female" color="#F87CCC"> </dxi-series>
12-
<dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
13-
</dxo-tooltip>
14-
<dxi-value-axis>
15-
<dxo-label [customizeText]="customizeLabel"></dxo-label>
16-
</dxi-value-axis>
17-
<dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
18-
<dxo-margin [left]="50"></dxo-margin>
19-
</dxo-legend>
8+
<dxo-chart-common-series-settings argumentField="age" type="stackedbar">
9+
</dxo-chart-common-series-settings>
10+
<dxi-chart-series valueField="male" name="Male" color="#3F7FBF">
11+
</dxi-chart-series>
12+
<dxi-chart-series valueField="female" name="Female" color="#F87CCC">
13+
</dxi-chart-series>
14+
<dxo-chart-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
15+
</dxo-chart-tooltip>
16+
<dxi-chart-value-axis>
17+
<dxo-chart-label [customizeText]="customizeLabel"></dxo-chart-label>
18+
</dxi-chart-value-axis>
19+
<dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
20+
<dxo-chart-margin [left]="50"></dxo-chart-margin>
21+
</dxo-chart-legend>
2022
</dx-chart>

0 commit comments

Comments
 (0)