<link rel="import" href="../../bower_components/polymer/polymer.html" /> <link rel="import" href="../select-fields-controllet/select-fields-controllet.html" /> <link rel="import" href="../data-table-controllet/data-table-controllet.html" /> <link rel="import" href="../expert-query-controllet/expert-query-controllet.html" /> <link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html" /> <script type="text/javascript" src="../../alasql-utility/alasql.min.js"></script> <script type="text/javascript" src="../../alasql-utility/alasql-utility.js"></script> <script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script> <dom-module id="select-data-controllet"> <style is="custom-style"> #select_data_controllet_container { display: flex; flex-direction: row; margin-top: 8px; } #select_data_controllet_container * { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; } #select_data_controllet_container #fields_container { height: 100%; width: 20%; min-width: 192px; } #select_data_controllet_container #right_container { height: 100%; width: calc(80% - 24px); margin-left: 24px; } #select_data_controllet_container #table_container { height: calc(100% - 72px); width: 100%; } #select_data_controllet_container #expert_container { height: 48px; width: 100%; margin-top: 24px; } </style> <template> <providers-utility-controllet></providers-utility-controllet> <div id="select_data_controllet_container"> <div id="fields_container"> <select-fields-controllet id="select_fields"></select-fields-controllet> </div> <div id="right_container"> <div id="table_container"> <data-table-controllet id="data_table"></data-table-controllet> </div> <div id="expert_container"> <expert-query-controllet id="expert"></expert-query-controllet> </div> </div> </div> </template> <script> Polymer({ is : 'select-data-controllet', properties : { dataUrl : { type : String, value : undefined }, data : { type : Object, value : undefined }, filters : { type : Array, value : [] }, aggregators : { type : Array, value : [] }, selectedFields : { type : Array, value : [] } }, listeners: { 'expert-controllet_show': '_resizeExpertWindow', 'select-fields-controllet_selected-fields': '_updateFields', 'filters-controllet_filters': '_updateFilters', 'aggregators-controllet_aggregators': '_updateAggregators' }, ready : function() { }, attached : function(){ this._resize(); var that = this; window.addEventListener("resize", function() { that._resize(); }); }, getFields : function() { if(this.aggregators && this.aggregators.length) { var selectedFields = []; for (var i = 0; i < this.aggregators.length; i++) { if(this.aggregators[i]["operation"] == "GROUP BY") selectedFields.push(this.aggregators[i]["field"]); else selectedFields.push(this.aggregators[i]["operation"] + "(" + this.aggregators[i]["field"] + ")"); } return selectedFields; } return this.selectedFields; }, getSelectedFields : function() { return this.selectedFields; }, getFilters : function() { return this.filters; }, getAggregators : function() { return this.aggregators; }, getData : function() { var converter = new DataTypeConverter(); var data = alasql_QUERY(this.data, this.selectedFields, this.filters, null, null); var result = converter.inferJsonDataType(data, ["*"]); result = converter.cast(result); data = result.dataset; if(this.aggregators && this.aggregators.length) { data = alasql_QUERY(data, this.selectedFields, null, this.aggregators, null); result = converter.inferJsonDataType(data, ["*"]); result = converter.cast(result); data = result.dataset; } return data; }, setSelectedFields : function(selectedFields) { this.async(function() { var selectedIndices = utility_getSelectedIndices(this.fields, selectedFields); this.$.select_fields.setSelectFields(selectedIndices); }, 0); }, setFilters : function(filters) { this.$.expert.setFilters(filters); }, setAggregators : function(aggregators) { this.$.expert.setAggregators(aggregators); }, _resizeExpertWindow : function(e) { if(e.detail.show) { this.$.table_container.style.height = "calc(50% - 12px)"; this.$.expert_container.style.height = "calc(50% - 12px)"; } else { this.$.table_container.style.height = "calc(100% - 72px)"; this.$.expert_container.style.height = "48px"; } this.$.data_table._resize(); }, _updateFields : function(e) { var selectedFields = e.detail.selectedFields; this.selectedFields = utility_getSelectedFields(this.fields, selectedFields); this.$.data_table.setData(this.getData()); this.$.expert.setSelectedFields(this.selectedFields); }, _updateFilters : function(e) { this.filters = e.detail.filters; this.$.data_table.setData(this.getData()); }, _updateAggregators : function(e) { this.aggregators = e.detail.aggregators; this.$.data_table.setData(this.getData()); }, init : function() { if(this.dataUrl) { var that = this; $.ajax({ url: this.dataUrl, dataType: "json", success: function(data){ that.reset(); var f = Object.create(providerFactory); var provider = f.getProvider(that.dataUrl); data = provider.selectData(data); var converter = new DataTypeConverter(); var result = converter.inferJsonDataType(data, ["*"]); result = converter.cast(result); that.fields = utility_getFields(result.types); data = result.dataset; that.data = alasql_QUERY(data, that.fields, null, null, null); that.$.select_fields.setFields(that.fields); that.$.expert.setFields(that.fields); // that.$.expert.setSelectedFields(that.selectedFields); that.fire('data-ready', {ready : true}); }, error: function(){ that.fire('data-ready', {ready : false}); } }); } else { this.reset(); var converter = new DataTypeConverter(); var result = converter.inferJsonDataType(this.data, ["*"]); result = converter.cast(result); this.fields = utility_getFields(result.types); data = result.dataset; this.data = alasql_QUERY(data, this.fields, null, null, null); this.$.select_fields.setFields(this.fields); this.$.expert.setFields(this.fields); // this.$.expert.setSelectedFields(this.selectedFields); } }, reset : function() { this.filters = []; this.aggregators = []; this.selectedFields = []; this.$.select_fields.reset(); this.$.data_table.reset(); this.$.expert.reset(); }, _resize : function(){ var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; h = h - 64 - 8; //height with page scroller + margin-top $("#select_data_controllet_container").height(h); } }); </script> </dom-module>