WebCompDev / COMPONENTS

Commit 3b5f486864864c74939b36bf741a67617fe6d4bc

Authored by Renato De Donato
1 parent 4cbf1380

co-datalets-creator

Inline Side-by-side
Showing 4 changed files with 435 additions and 6 deletions
controllets/data-sevc-controllet/co-datalets-creator-controllet.html
  View file @3b5f486
... ... @@ -40,7 +40,6 @@
40 40  
41 41 listeners : {
42 42 'page-slider-controllet_selected' : '_updateSlider',
43   - 'dataset-selection-controllet_data-url' : '_allowSecondStep',
44 43 'select-fields-controllet_selected-fields' : '_allowThirdStep',
45 44 'filters-controllet_filters': '_allowThirdStep'
46 45 },
... ... @@ -77,7 +76,10 @@
77 76 ready : function(){
78 77 ln["localization"] = this.localization;
79 78  
  79 + this.$.select_data.dataUrl = this.dataUrl;
80 80 this.$.select_data.init();
  81 + this.$.select_visualization.dataUrl = this.dataUrl;
  82 + this.$.select_visualization.init();
81 83 },
82 84  
83 85 _updateSlider : function(e){
... ... @@ -88,7 +90,7 @@
88 90 this.$.slider.chevronLeft("invisible");
89 91 this.$.slider.chevronRight(false);
90 92  
91   - if(this.$.slider.getPrevSelected() == 2)
  93 + if(this.$.slider.getPrevSelected() == 1)
92 94 this.$.slider.chevronRight(true);
93 95 break;
94 96 case 1:
... ...
controllets/data-sevc-controllet/demo/index.html
  View file @3b5f486
... ... @@ -21,8 +21,8 @@
21 21 <!--suggested-datasets='[{"resource_name":"SUGGESTED 1","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"},{"resource_name":"SUGGESTED 2","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"},{"resource_name":"SUGGESTED 3","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"}]'-->
22 22 <!--</data-sevc-controllet>-->
23 23  
24   - <co-datalets-creator-controllet data='[{"a":"0", "b":"1"},{"a":"2", "b":"3"}]' deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
25   - datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"
  24 + <co-datalets-creator-controllet data='[{"a":"0", "b":"1"},{"a":"2", "b":"3a"},{"a":"2", "b":"3"}]' deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
  25 + datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list">
26 26 </co-datalets-creator-controllet>
27 27  
28 28 </body>
... ...
controllets/select-visualization-controllet/select-visualization-controllet_old.html 0 → 100755
  View file @3b5f486
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  6 +
  7 +<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
  8 +<link rel="import" href="select-datalet-inputs_series.html" />
  9 +<link rel="import" href="select-datalet-inputs.html" />
  10 +<link rel="import" href="select-datalet-options.html" />
  11 +
  12 +<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
  13 +
  14 +<dom-module id="select-visualization-controllet">
  15 +
  16 + <template>
  17 +
  18 + <style is="custom-style">
  19 + #select_visualization_container {
  20 + display: flex;
  21 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  22 + font-size: 16px;
  23 + margin-top: 8px;
  24 + }
  25 +
  26 + #items_vslider_controllet {
  27 + position: relative;
  28 + min-width: 172px;
  29 + }
  30 +
  31 + #datalet_selection_inputs {
  32 + position: relative;
  33 + margin-left: 32px;
  34 + min-width: 258px;
  35 + }
  36 +
  37 + #datalet_selection_options {
  38 + position: relative;
  39 + margin-left: 32px;
  40 + min-width: 258px;
  41 + }
  42 +
  43 + #datalet_preview_container {
  44 + position: relative;
  45 + width: 100%;
  46 + margin-left: 32px;
  47 + }
  48 +
  49 + #datalet_selection_datalet {
  50 + position: relative;
  51 + height: 100vh;
  52 + width: 100%;
  53 + }
  54 +
  55 + #datalet_selection_datalet_placeholder {
  56 + padding: 16px;
  57 + }
  58 +
  59 + .input_header {
  60 + height: 32px;
  61 + padding-top: 16px;
  62 + text-align: center;
  63 + font-weight: 700;
  64 + background-color: #B6B6B6;
  65 + }
  66 +
  67 + paper-button {
  68 + position: absolute;
  69 + bottom: 16px;
  70 + right: 11px;
  71 +
  72 + height: 48px;
  73 + width: 172px;
  74 + background-color: #00BCD4;
  75 + color: white;
  76 + font-weight: 700;
  77 + padding: 16px;
  78 + }
  79 +
  80 + paper-button:hover {
  81 + background-color: #00AABF;
  82 +
  83 + box-shadow: 0px 8px 12px #888;
  84 + -webkit-box-shadow: 0px 8px 12px #888;
  85 + -moz-box-shadow: 0px 8px 12px #888;
  86 + }
  87 +
  88 + paper-button[disabled] {
  89 + background-color: #B6B6B6;
  90 + }
  91 + </style>
  92 +
  93 + <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
  94 +
  95 + <div id="select_visualization_container">
  96 +
  97 + <div id="items_vslider_controllet">
  98 + <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
  99 + </div>
  100 +
  101 + <div id="datalet_selection_inputs">
  102 + <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
  103 + <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>
  104 + </template>
  105 + <template is="dom-if" if="{{_checkType(type, 'default')}}">
  106 + <select-datalet-inputs id="inputs"></select-datalet-inputs>
  107 + </template>
  108 + <template is="dom-if" if="{{_checkType(type, '')}}">
  109 + <select-datalet-inputs></select-datalet-inputs>
  110 + </template>
  111 + </div>
  112 +
  113 + <div id="datalet_selection_options">
  114 + <select-datalet-options id="options"></select-datalet-options>
  115 + </div>
  116 +
  117 + <div id="datalet_preview_container">
  118 +
  119 + <paper-material id="datalet_selection_datalet" elevation="5">
  120 + <div class="input_header"><span id="dataletPreview"></span></div>
  121 + <div id="datalet_selection_datalet_placeholder"></div>
  122 + </paper-material>
  123 +
  124 + <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
  125 +
  126 + </div>
  127 +
  128 + </div>
  129 +
  130 + </template>
  131 +
  132 + <script>
  133 +
  134 + Polymer({
  135 +
  136 + is : 'select-visualization-controllet',
  137 +
  138 + properties : {
  139 +
  140 + deepUrl : {
  141 + type : String,
  142 + value : undefined
  143 + },
  144 +
  145 + dataletsListUrl : {
  146 + type : String,
  147 + value : undefined
  148 + },
  149 +
  150 + selectedDatalet : {
  151 + type : String,
  152 + value : undefined
  153 + },
  154 +
  155 + preselectedDatalet : {
  156 + type : String,
  157 + value : undefined
  158 + },
  159 +
  160 + type : {
  161 + type : String,
  162 + value : ""
  163 + },
  164 +
  165 + filters : {
  166 + type : Array,
  167 + value : []
  168 + },
  169 +
  170 + fields : {
  171 + type : Array,
  172 + value : []
  173 + },
  174 +
  175 + selectedFields : {
  176 + type : Array,
  177 + value : []
  178 + },
  179 +
  180 + dataletPreset : {
  181 + type : Object,
  182 + value : []
  183 + },
  184 +
  185 + dataUrl : {
  186 + type : String,
  187 + value : undefined
  188 + },
  189 +
  190 + params:{
  191 + type: Object,
  192 + value: undefined
  193 + },
  194 +
  195 + data : {
  196 + type : Object,
  197 + value : undefined
  198 + },
  199 +
  200 + },
  201 +
  202 + listeners: {
  203 +// 'select-fields-controllet_selected-fields': '_updateFields',
  204 +// 'filters-controllet_filters': '_updateFilters',
  205 + 'items-vslider-controllet_selected-datalet': '_selectDatalet',
  206 + 'select_visualization_inputs_ready': '_loadDatalet',
  207 + 'select_visualization_options_changed': '_tryLoadDatalet'
  208 + },
  209 +
  210 + ready : function() {
  211 + this._resize();
  212 +
  213 + $(this.$.datalet_selection_datalet).perfectScrollbar();
  214 +
  215 +// this.params = {'data-url' : this.dataUrl};//not here
  216 + },
  217 +
  218 + attached : function() {
  219 + this._resize();
  220 + var that = this;
  221 + window.addEventListener("resize", function() { that._resize(); });
  222 +
  223 + this._translate();
  224 + },
  225 +
  226 + setFilters : function(filters) {
  227 + this.filters = this._copy(filters);
  228 + },
  229 +
  230 + setFields : function(fields) {
  231 +// if (this.fields.length > 0 && JSON.stringify(this.fields) != JSON.stringify(fields))
  232 +// this.init();
  233 +
  234 + this.fields = this._copy(fields);
  235 +
  236 + var inputs = this._getInputs();
  237 + if (inputs)
  238 + inputs.setFields(this.fields);
  239 + },
  240 +
  241 + setData : function(data) {
  242 + this.data = this._copy(data);
  243 + },
  244 +
  245 + init : function() {
  246 + this.$.vslider._reset();
  247 + },
  248 +
  249 + show : function() {//show --> preselect
  250 +// if(this.preselectedDatalet)
  251 + if(this.dataletPreset)
  252 + this._preselectDatalet();
  253 +
  254 +// if (this.$.datalet_selection_datalet_placeholder.innerHTML == "") {
  255 +// var inputs = this._getInputs();
  256 +// inputs.fireReady();
  257 +// }
  258 + },
  259 +
  260 + _translate : function(){
  261 + if(this.preselectedDatalet)
  262 + this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
  263 + else
  264 + this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
  265 +
  266 + this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
  267 + },
  268 +
  269 + _selectDatalet : function(e){
  270 +
  271 + this.$.add_button.setAttribute("disabled", "true");
  272 +
  273 + this.selectedDatalet = e.detail.datalet;
  274 +
  275 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  276 +
  277 + if(!this.selectedDatalet){
  278 + this.type = "";
  279 + this.$.options.setOptions([]);
  280 + }
  281 + else{
  282 + this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
  283 + this.$.selectedDatalet_request.generateRequest();
  284 + }
  285 + },
  286 +
  287 + _handleSelectedDatalet : function(e){
  288 +
  289 + if(this.type != e.detail.response.type) {
  290 +
  291 + this.type = e.detail.response.type;
  292 +
  293 + this.async(function () {
  294 + var inputs = this._getInputs();
  295 + inputs.setFields(this.fields);
  296 + inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
  297 + }, 0);
  298 +
  299 + this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);
  300 + }
  301 + else {
  302 + this.$.options.checkOptions(e.detail.response.idm.inputs.layouts.input);
  303 + }
  304 +
  305 + this.async(function () {
  306 + var inputs = this._getInputs();
  307 + inputs.fireReady();
  308 + }, 0);
  309 +
  310 +// this.async(function () {
  311 +// if(this.preselectedDatalet)
  312 +// this._preselectDatalet();
  313 +// }, 1);
  314 + },
  315 +
  316 + _preselectDatalet : function() {
  317 + this.$.vslider._preselectDatalet();
  318 +
  319 + this.async(function () {
  320 + this.$.options._preselectOptions(this.dataletPreset);
  321 + }, 100);
  322 +
  323 + this.async(function () {
  324 + var inputs = this._getInputs();
  325 + inputs._preselectInputs(this.fields, this.dataletPreset["aggregators"], this.dataletPreset["orders"]);
  326 + this.dataletPreset = undefined;
  327 + }, 200);
  328 + },
  329 +
  330 + _tryLoadDatalet : function(){
  331 + var inputs = this._getInputs();
  332 + inputs.fireReady();
  333 + },
  334 +
  335 + _loadDatalet : function(e){
  336 + if(!e.detail.isReady) {
  337 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  338 + return;
  339 + }
  340 +
  341 + var inputs = this._getInputs();
  342 +
  343 + this.selectedFields = inputs.getSelectedFields();
  344 +
  345 + this.params = {'data-url' : this.dataUrl};//??????????????????
  346 +// this.params = {};
  347 +
  348 + this.params["filters"] = JSON.stringify(this.filters);
  349 + this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
  350 + this.params["orders"] = JSON.stringify(inputs.getOrders());
  351 +
  352 + this.params["export_menu"] = "0";
  353 +
  354 + var params = this.$.options.getParams();
  355 + for (var key in params) { this.params[key] = params[key]; }
  356 +
  357 + var data = alasql_complexSelectData(this.data, this.selectedFields, this.filters, inputs.getAggregators(), inputs.getOrders());
  358 + data = transformData(data, this.selectedFields, true);
  359 + this.params["data"] = JSON.stringify(data).replace(/'/g, "&#39;");
  360 +
  361 + var dataletParams ={
  362 + component: this.selectedDatalet+"-datalet",
  363 + fields: this.selectedFields,
  364 + params: this.params,
  365 + placeHolder: this.$.datalet_selection_datalet_placeholder,
  366 + };
  367 +
  368 + ComponentService.deep_url = this.deepUrl;
  369 + ComponentService.getComponent(dataletParams);
  370 +
  371 + this.$.add_button.removeAttribute("disabled");
  372 + },
  373 +
  374 + _addDatalet : function(){
  375 + delete this.params["export_menu"];
  376 +
  377 + var data = {
  378 + dataUrl: this.dataUrl,
  379 + datalet: this.selectedDatalet+"-datalet",
  380 + fields: this.selectedFields,
  381 + params: this.params,
  382 + staticData: JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
  383 + }
  384 +
  385 + this.fire('data-sevc-controllet.dataletCreated', {data : data});
  386 + },
  387 +
  388 + _checkType: function(type, check){
  389 + if (type == "multiseries" || type == "")
  390 + return (type == check);
  391 + else if(check == "default")
  392 + return true;
  393 + return false;
  394 + },
  395 +
  396 + _getInputs : function(){
  397 + if(this.type == "multiseries")
  398 + return this.$$("#inputs_series")
  399 + return this.$$("#inputs");
  400 + },
  401 +
  402 + _copy : function(o) {
  403 + var out, v, key;
  404 + out = Array.isArray(o) ? new Array(o.length) : {};
  405 + for (key in o) {
  406 + v = o[key];
  407 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  408 + }
  409 + return out;
  410 + },
  411 +
  412 + _resize : function(){
  413 + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
  414 + h = h - 64 - 8; //height with page scroller
  415 +
  416 + $("#items_vslider_controllet").height(h);//vslider controllet
  417 + $("#datalet_selection_inputs").height(h);
  418 + $("#datalet_selection_options").height(h);
  419 +
  420 + $("#datalet_selection_datalet").height(h);
  421 + }
  422 +
  423 + });
  424 +
  425 + </script>
  426 +
  427 +</dom-module>
0 428 \ No newline at end of file
... ...
locales/controllet_ln.js
  View file @3b5f486
... ... @@ -8,7 +8,7 @@ ln[&quot;localization&quot;] = &quot;en&quot;;
8 8 ln["slide1Title_en"] = "SELECT DATASET";
9 9 ln["slide1Subtitle_en"] = "Select a dataset from the list or copy and paste the url of dataset.";
10 10 ln["slide2Title_en"] = "SELECT DATA";
11   -ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
  11 +ln["slide2Subtitle_en"] = "Select the fields on the left. The table will show the values related to the selected fields.";
12 12 ln["slide3Title_en"] = "SELECT VISUALIZATION";
13 13 ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
14 14 ln["back_en"] = "Back";
... ... @@ -135,7 +135,7 @@ ln[&quot;donut_description_en&quot;] = &quot;If &#39;true&#39; Pie will become Donut! :)&quot;;
135 135 ln["slide1Title_it"] = "SELEZIONA IL DATASET";
136 136 ln["slide1Subtitle_it"] = "Seleziona il dataset dalla lista o copia e incolla la url del dataset.";
137 137 ln["slide2Title_it"] = "SELEZIONA I DATI";
138   -ln["slide2Subtitle_it"] = "Seleziona i campi dalla struttura ad albero. Nella tabella saranno mostrati i valori dei campi selezionati.";
  138 +ln["slide2Subtitle_it"] = "Seleziona i campi sulla sinistra. Nella tabella saranno mostrati i valori dei campi selezionati.";
139 139 ln["slide3Title_it"] = "SELEZIONA LA VISUALIZZAZIONE";
140 140 ln["slide3Subtitle_it"] = "Seleziona una visualizzazione, inserisci dati di input ed etichette (opzionale).";
141 141 ln["back_it"] = "Indietro";
... ...