OLD | NEW |
| (Empty) |
1 <!-- | |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | |
3 // Use of this source code is governed by a BSD-style license that can be | |
4 // found in the LICENSE file. | |
5 --> | |
6 <import src="/sky/framework/elements/sky-element.sky" /> | |
7 | |
8 <sky-element attributes="change:number"> | |
9 <template> | |
10 <style> | |
11 :host { | |
12 width: 40px; | |
13 height: 40px; | |
14 display: flex; | |
15 align-items: center; | |
16 justify-content: center; | |
17 border-radius: 40px; | |
18 border: 1px solid transparent; | |
19 } | |
20 #arrow { | |
21 width: 0; | |
22 height: 0; | |
23 border-left: 9px solid transparent; | |
24 border-right: 9px solid transparent; | |
25 } | |
26 .up { | |
27 margin-bottom: 3px; | |
28 border-bottom: 9px solid white; | |
29 } | |
30 .down { | |
31 margin-top: 3px; | |
32 border-top: 9px solid white; | |
33 } | |
34 </style> | |
35 <div id="arrow" /> | |
36 </template> | |
37 <script> | |
38 import "dart:sky"; | |
39 import "dart:math"; | |
40 | |
41 final List<String> _kRedColors = [ | |
42 '#E57373', | |
43 '#EF5350', | |
44 '#F44336', | |
45 '#E53935', | |
46 '#D32F2F', | |
47 '#C62828', | |
48 '#B71C1C', | |
49 ]; | |
50 | |
51 final List<String> _kGreenColors = [ | |
52 '#81C784', | |
53 '#66BB6A', | |
54 '#4CAF50', | |
55 '#43A047', | |
56 '#388E3C', | |
57 '#2E7D32', | |
58 '#1B5E20', | |
59 ]; | |
60 | |
61 int _colorIndexForPercentChange(double percentChange) { | |
62 // Currently the max is 10%. | |
63 double maxPercent = 10.0; | |
64 return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floo
r()); | |
65 } | |
66 | |
67 String _colorForPercentChange(double percentChange) { | |
68 if (percentChange > 0) | |
69 return _kGreenColors[_colorIndexForPercentChange(percentChange)]; | |
70 return _kRedColors[_colorIndexForPercentChange(percentChange)]; | |
71 } | |
72 | |
73 @Tagname('stock-arrow') | |
74 class StockArrow extends SkyElement { | |
75 Element _arrow; | |
76 | |
77 void _updateArrow(double percentChange) { | |
78 String border = _colorForPercentChange(percentChange).toString(); | |
79 String type = percentChange > 0 ? 'bottom' : 'top'; | |
80 _arrow.style['border-$type-color'] = border; | |
81 style['border-color'] = border; | |
82 _arrow.setAttribute('class', percentChange > 0 ? 'up' : 'down'); | |
83 } | |
84 | |
85 void shadowRootReady() { | |
86 _arrow = shadowRoot.getElementById('arrow'); | |
87 _updateArrow(change); | |
88 } | |
89 | |
90 void changeChanged(double oldValue, double newValue) { | |
91 if (_arrow != null) | |
92 _updateArrow(newValue); | |
93 } | |
94 } | |
95 | |
96 _init(script) => register(script, StockArrow); | |
97 </script> | |
98 </sky-element> | |
OLD | NEW |