| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 # Copyright 2016 The LUCI Authors. All rights reserved. | |
| 3 # Use of this source code is governed by the Apache v2.0 license that can be | |
| 4 # found in the LICENSE file. | |
| 5 --> | |
| 6 <!-- | |
| 7 This in an HTML Import-able file that contains the definition | |
| 8 of the following elements: | |
| 9 | |
| 10 <partial-line-chart> | |
| 11 | |
| 12 A wrapper around google-chart (line) that can show a subset of the passed in | |
| 13 data. | |
| 14 | |
| 15 Usage: | |
| 16 | |
| 17 <partial-line-chart></partial-line-chart> | |
| 18 | |
| 19 Properties: | |
| 20 all_data: Object, the data following the schema from | |
| 21 https://developers.google.com/chart/interactive/docs/datatables_dataview
s#javascriptliteral | |
| 22 names: Array<String>, the names of the data columns to show. If blank, | |
| 23 all will be shown. | |
| 24 title: String, the title of the line graph. | |
| 25 | |
| 26 Methods: | |
| 27 None. | |
| 28 | |
| 29 Events: | |
| 30 None. | |
| 31 --> | |
| 32 <link rel="import" href="../bower_components/google-chart/google-chart.html"> | |
| 33 | |
| 34 <dom-module id="partial-line-chart"> | |
| 35 <style> | |
| 36 google-chart { | |
| 37 width: 100%; | |
| 38 height: 250px; | |
| 39 } | |
| 40 </style> | |
| 41 <template> | |
| 42 | |
| 43 <google-chart id="chart" | |
| 44 type="line" | |
| 45 data="[[_data]]" | |
| 46 options="[[_options]]"> | |
| 47 </google-chart> | |
| 48 | |
| 49 </template> | |
| 50 <script> | |
| 51 (function() { | |
| 52 Polymer({ | |
| 53 is: 'partial-line-chart', | |
| 54 properties: { | |
| 55 // input | |
| 56 all_data: { | |
| 57 type: Object, | |
| 58 }, | |
| 59 names: { | |
| 60 type: Array, | |
| 61 }, | |
| 62 title: { | |
| 63 type: String, | |
| 64 }, | |
| 65 | |
| 66 // private | |
| 67 _data: { | |
| 68 type: Object, | |
| 69 computed: "trimData(all_data.*, names.*)" | |
| 70 }, | |
| 71 _options: { | |
| 72 type: Object, | |
| 73 computed: "_getOptions(title)", | |
| 74 }, | |
| 75 }, | |
| 76 | |
| 77 _getOptions: function(title) { | |
| 78 return { | |
| 79 "title": title, | |
| 80 "animation": { | |
| 81 "duration": 500, | |
| 82 "easing": "out" | |
| 83 }, | |
| 84 "legend": {"position": "bottom"} | |
| 85 }; | |
| 86 }, | |
| 87 | |
| 88 trimData: function() { | |
| 89 console.log(this.all_data); | |
| 90 var table = new google.visualization.DataTable(this.all_data); | |
| 91 if (!this.names || this.names.length === 0) { | |
| 92 return JSON.parse(table.toJSON()); | |
| 93 } | |
| 94 | |
| 95 var view = new google.visualization.DataView(table); | |
| 96 | |
| 97 var colsToShow = [0]; | |
| 98 var cols = this.all_data.cols; | |
| 99 for (var i = 1;i < cols.length; i++) { | |
| 100 if (this.names.indexOf(cols[i].id) !== -1) { | |
| 101 colsToShow.push(i); | |
| 102 } | |
| 103 } | |
| 104 | |
| 105 view.setColumns(colsToShow); | |
| 106 return JSON.parse(view.toDataTable().toJSON()); | |
| 107 }, | |
| 108 }); | |
| 109 })(); | |
| 110 </script> | |
| 111 </dom-module> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2177353002:
Add top level app element (Closed)
Base URL: https://chromium.googlesource.com/external/github.com/luci/luci-py@hello-oauth