| <!-- |
| This in an HTML Import-able file that contains the definitions |
| for the following elements: |
| |
| <word-cloud2-sk> |
| |
| Methods: |
| None. |
| |
| Properties: |
| items - A serialized map[string][]types.ValueWeight representing the |
| weights of all the parameter values, grouped by parameter key. Presumes |
| the ValueWeights are provided in descending order. |
| |
| For example: |
| |
| { |
| "cpu_or_gpu": [ |
| {"value":"CPU","weight":19}, |
| {"value":"GPU","weight":7}, |
| ], |
| "config": [ |
| ... |
| ], |
| ... |
| } |
| |
| Events: |
| None. |
| |
| --> |
| <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <dom-module id="word-cloud2-sk"> |
| <style include="iron-flex iron-flex-alignment"> |
| .param { |
| margin: 0.6em; |
| border: solid #eee 1px; |
| padding: 0.6em; |
| } |
| |
| .item { |
| margin: 0.6em; |
| } |
| </style> |
| <template> |
| <div class="layout horizontal wrap"> |
| <template is="dom-repeat" items="[[_items]]" as="item"> |
| <div class=item><h3>[[item.name]]</h3> |
| <div class="param layout vertical"> |
| <template is="dom-repeat" items="[[item.values]]" as="entry"> |
| <div style$="[[computeStyle(entry)]]">[[entry.value]]</div> |
| </template> |
| </div> |
| </div> |
| </template> |
| </div> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: 'word-cloud2-sk', |
| |
| properties: { |
| items: { |
| type: Object, |
| value: function() { return {}; }, |
| observer: "_itemsChange", |
| }, |
| _items: { |
| type: Array, |
| value: function() { return []; }, |
| }, |
| }, |
| |
| ready: function () { |
| this._items = []; |
| }, |
| |
| _itemsChange: function() { |
| // Convert map[string][]types.ValueWeight to an Array so it can be |
| // processed by polymer templating. |
| var ar = []; |
| Object.keys(this.items).forEach(function(key) { |
| ar.push({ |
| name: key, |
| values: this.items[key], |
| }); |
| }.bind(this)); |
| ar.sort(function(a,b) { |
| if (a.values[0].weight > b.values[0].weight) { |
| return -1; |
| } |
| if (a.values[0].weight < b.values[0].weight) { |
| return 1; |
| } |
| return a.name.localeCompare(b.name); |
| }); |
| |
| this._items = ar; |
| }, |
| |
| computeStyle: function (entry) { |
| return 'font-size: ' + entry.weight + 'px;'; |
| }, |
| }); |
| </script> |
| |