@@ -8,7 +8,7 @@ import 'chartjs-web-components/src/base.js'
8
8
import '@polymer/app-layout/app-toolbar/app-toolbar.js'
9
9
import '@polymer/paper-tabs/paper-tabs.js'
10
10
import '@polymer/paper-tabs/paper-tab.js'
11
-
11
+ import '@polymer/paper-slider/paper-slider.js'
12
12
import '@polymer/iron-icon/iron-icon.js' ;
13
13
import '@polymer/iron-icons/iron-icons.js' ;
14
14
import '@polymer/paper-icon-button/paper-icon-button.js'
@@ -24,14 +24,11 @@ class TestAppApp extends PolymerElement {
24
24
dis play: block;
25
25
}
26
26
# chartbox {
27
- width : 70 % ;
28
- float : left;
27
+
28
+
29
29
}
30
30
31
- # optionbox {
32
- width : 25% ;
33
- float : left;
34
- }
31
+
35
32
36
33
body {
37
34
margin : 0px ;
@@ -53,9 +50,17 @@ class TestAppApp extends PolymerElement {
53
50
< app-toolbar >
54
51
< paper-icon-button icon ="close "> </ paper-icon-button >
55
52
< div main-title > App name</ div >
53
+ < paper-listbox selected ="{{dataset}} ">
54
+ < template is ="dom-repeat " items ="{{datasets}} ">
55
+ < paper-icon-button icon ="{{_symbolForIndex(index)}} "> </ paper-icon-button >
56
+ </ template >
57
+ </ paper-listbox >
58
+
56
59
</ app-toolbar >
57
60
< app-toolbar >
58
61
< div main-title > [[name]] SUPPLY </ div >
62
+ [[_durationForIndex(duration)]]
63
+ < paper-slider min ="0 ", max ="5 " value ="{{duration}} "> </ paper-slider >
59
64
</ app-toolbar >
60
65
< paper-tabs selected ="{{selectedToken}} " sticky >
61
66
< template is ="dom-repeat " items ="{{tokens}} ">
@@ -74,23 +79,7 @@ class TestAppApp extends PolymerElement {
74
79
data ="{{chartData}} "
75
80
options ="{{chartOptions}} ">
76
81
</ base-chart >
77
- </ div >
78
- < div id ="optionbox ">
79
- < paper-listbox selected ="{{dataset}} ">
80
- < template is ="dom-repeat " items ="{{datasets}} ">
81
- < paper-item > {{item}}</ paper-item >
82
- </ template >
83
-
84
- </ paper-listbox >
85
- < paper-listbox selected ="{{duration}} ">
86
- < template is ="dom-repeat " items ="{{durations}} ">
87
- < paper-item > {{item}}</ paper-item >
88
- </ template >
89
- </ paper-listbox >
90
-
91
-
92
- </ div >
93
-
82
+ </ div >
94
83
</ div >
95
84
</ app-header-layout >
96
85
` ;
@@ -108,6 +97,13 @@ class TestAppApp extends PolymerElement {
108
97
this . supply = res . result
109
98
} )
110
99
}
100
+ _symbolForIndex ( index ) {
101
+ return this . datasetsIcons [ index ]
102
+ }
103
+ _durationForIndex ( index ) {
104
+
105
+ return this . durations [ index ]
106
+ }
111
107
_changeOption ( ) {
112
108
let token = this . tokens [ this . selectedToken ] ;
113
109
this . _triggerHistory ( token ) ;
@@ -175,6 +171,12 @@ class TestAppApp extends PolymerElement {
175
171
}
176
172
static get properties ( ) {
177
173
return {
174
+ datasetsIcons : {
175
+ type : Array ,
176
+ value : [
177
+ 'euro-symbol' , 'forward' , 'fingerprint'
178
+ ]
179
+ } ,
178
180
datasets : {
179
181
type : Array ,
180
182
value : [
0 commit comments