WebCompDev / COMPONENTS

Commit 21e3e3f2693cb79548bcfd1881dd2e20bceff19e

Authored by isisadmin
1 parent 01a6d2e5

fix controllet datalet selection controllet

Inline Side-by-side
Showing 4 changed files with 484 additions and 3 deletions
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @21e3e3f
... ... @@ -513,7 +513,7 @@
513 513 for (var i = 0; i < labels.length; i++)
514 514 this.params[labels[i].label] = labels[i].value;
515 515  
516   - var dataletParams ={
  516 + /*var dataletParams ={
517 517 component : this.selectedDatalet+"-datalet",
518 518 params : this.params,
519 519 fields : this.selectedFields,
... ... @@ -521,9 +521,11 @@
521 521 };
522 522  
523 523 ComponentService.deep_url = this.deepUrl;
524   - ComponentService.getComponent(dataletParams);
  524 + ComponentService.getComponent(dataletParams);*/
525 525  
526 526 // this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
  527 +
  528 + this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
527 529 },
528 530  
529 531 _loadDatalet : function(selectedFields){
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet_.html 0 → 100644
  View file @21e3e3f
  1 +<!--
  2 +@group ROUTETOPA Polymer Core Elements
  3 +
  4 +The `select-visualization-form-controllet` is a slider container of elements.
  5 +Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
  6 +slider with all components initialized with data and query attributes
  7 +
  8 +### Code
  9 +
  10 +Example
  11 +
  12 +@class select-visualization-form-controllet
  13 +
  14 +-->
  15 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  16 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  17 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  18 +<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
  19 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
  20 +
  21 +<dom-module id="datalet-selection-controllet">
  22 + <template>
  23 + <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
  24 + <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
  25 + <style is="custom-style">
  26 + body {
  27 + font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  28 + font-size: 14px;
  29 + margin: 0;
  30 + padding: 24px;
  31 + -webkit-tap-highlight-color: rgba(0,0,0,0);
  32 + -webkit-touch-callout: none;
  33 + }
  34 +
  35 + paper-input {
  36 + width: 80%;
  37 + }
  38 +
  39 + paper-checkbox {
  40 + display: block;
  41 + margin-bottom: 40px;
  42 + }
  43 +
  44 + </style>
  45 +
  46 + <!--<iron-ajax
  47 + auto
  48 + id="data_request"
  49 + url={{data_url}}
  50 + handle-as="json"
  51 + verbose="true"
  52 + on-response="this.handleResponseData"
  53 + debounce-duration="300">
  54 + </iron-ajax>
  55 +
  56 + <iron-ajax
  57 + auto
  58 + url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
  59 + handle-as="json"
  60 + on-response="handleResponseDatalets"
  61 + debounce-duration="300">
  62 + </iron-ajax>
  63 +
  64 + <iron-request id="xhr"></iron-request>-->
  65 +
  66 + <div class="panel panel-default">
  67 + <div class="panel-heading">
  68 + <h3 class="panel-title">Data source</h3>
  69 + </div>
  70 + <div class="panel-body">
  71 + <section>
  72 + <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>
  73 + </section>
  74 + </div>
  75 + </div>
  76 +
  77 + <div class="panel panel-default">
  78 + <div class="panel-heading">
  79 + <h3 class="panel-title">Selection data fileds to visualize</h3>
  80 + </div>
  81 + <div class="panel-body">
  82 + <section>
  83 + <div class="horizontal center-justified layout">
  84 + <div id="fields_placeholder" class="horizontal-section">
  85 + <!-- <template is="dom-repeat" items="{{fields}}">
  86 + <paper-checkbox>{{item}}</paper-checkbox>
  87 + </template>-->
  88 + </div>
  89 + </div>
  90 + </section>
  91 + </div>
  92 + </div>
  93 +
  94 + <div class="panel panel-default">
  95 + <div class="panel-heading">
  96 + <h3 class="panel-title">Visualization tools selection</h3>
  97 + </div>
  98 + <div class="panel-body">
  99 + <div id="datalets_menu" class="layout"></div>
  100 + </div>
  101 + </div>
  102 +
  103 + <section>
  104 + <!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->
  105 + <button id="goto" type="button" class="btn btn-primary">Go to visualization</button>
  106 + </section>
  107 + <content></content>
  108 + </template>
  109 +
  110 + <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
  111 + <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
  112 +
  113 + <script>
  114 +
  115 + DataletSelectionControllet = Polymer({
  116 + is: 'datalet-selection-controllet',
  117 + properties: {
  118 + /**
  119 + * It represent the data url from CKAN api
  120 + *
  121 + * @attribute data_url
  122 + * @type string
  123 + * @default 'null'
  124 + */
  125 + data_url: {
  126 + type: String,
  127 + value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
  128 + observer: '_data_urlChanged'
  129 + },
  130 + /**
  131 + * It stores all tools available in WebComponent server
  132 + *
  133 + * @attribute tools
  134 + * @type array
  135 + * @default 'null'
  136 + */
  137 + tools:{
  138 + type: Array,
  139 + value: []
  140 + },
  141 + /**
  142 + * It stores all fields related to data retrieved from CKAN api url
  143 + *
  144 + * @attribute fields
  145 + * @type array
  146 + * @default 'null'
  147 + */
  148 + fields:{
  149 + type: Array,
  150 + value: []
  151 + },
  152 + fieldsMap: {
  153 + type: Map,
  154 + value: null
  155 + }
  156 + },
  157 + /**
  158 + * data-url member changed watcher. It's called when data_url changes its value
  159 + *
  160 + * @method data_urlChanged
  161 + */
  162 + _data_urlChanged: function(newValue, oldValue){
  163 + //this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});
  164 + //get the data fields
  165 + var comp = this;
  166 + $.ajax({
  167 + url: newValue,
  168 + dataType: "json",
  169 + success: function(e){comp.handleResponseData(e)}
  170 + });
  171 + //get datalets list
  172 + $.ajax({
  173 + url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
  174 + dataType: "json",
  175 + success: function(e){comp.handleResponseDatalets(e)}
  176 + });
  177 + },
  178 + createFieldsContainer: function(id, heading){
  179 + var panelDefault = document.createElement('div');
  180 + panelDefault.className = 'panel panel-default';
  181 + var panelHeading = document. createElement('div');
  182 + panelHeading.className = 'panel-heading';
  183 + panelHeading.innerHTML = heading;
  184 + var panelBody = document. createElement('div');
  185 + panelBody.className = 'panel-body';
  186 + panelBody.id = id;
  187 + var fieldPanel = document.createElement('div');
  188 + fieldPanel.className = 'panel-body';
  189 +
  190 + panelBody.appendChild(fieldPanel);
  191 + panelDefault.appendChild(panelHeading);
  192 + panelDefault.appendChild(panelBody);
  193 +
  194 + return panelDefault;
  195 +
  196 + },
  197 + cretePaperCheckbox: function (id, label ) {
  198 + var html = '<paper-checkbox id="' + id + '" role="checkbox" tabindex="0" toggles="" aria-pressed="false" aria-disabled="false" aria-checked="false" aria-label="' + label + '" class="x-scope paper-checkbox-0">'
  199 + + '<div id="checkboxContainer" class="style-scope paper-checkbox">'
  200 + + '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'
  201 + + '<div id="background" class="style-scope paper-ripple"></div>'
  202 + + '<div id="waves" class="style-scope paper-ripple"></div>'
  203 + + '</paper-ripple>'
  204 + + '<div id="checkbox" class="style-scope paper-checkbox">'
  205 + + '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'
  206 + + '</div>'
  207 + + '</div>'
  208 + + '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'
  209 + + '</paper-checkbox>';
  210 +
  211 + return html;
  212 + },
  213 + createBootstrapCheckbox: function(id, label) {
  214 + return '<div class="checkbox checkbox-primary">'
  215 + + '<label class="checkbox-inline">'
  216 + + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label
  217 + + '</label>'
  218 + + '</div>';
  219 +
  220 + },
  221 + createBootstrapToggle: function(id, label) {
  222 + return '<div class="checkbox">'
  223 + + '<label style="padding-left: 3px; text-decoration: double;">'
  224 + + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" /> ' + label
  225 + + '</label>'
  226 + + '</div>';
  227 +
  228 + },
  229 + /**
  230 + * Callback to parse the data requested when data_url change its value
  231 + *
  232 + * @method handleResponseData
  233 + */
  234 + handleResponseData: function(e){
  235 + //crete root node and insert it in to shadow dom
  236 + var mainPanel = this.createFieldsContainer("root", "Data fields");
  237 + this.$.fields_placeholder.appendChild(mainPanel);
  238 + this.fieldsMap = new Map;
  239 + this.fieldsMap["root"] = mainPanel;
  240 + //call recursive analyze function for current json to get all fields user can select
  241 + this.analyzeObject("root", null, e);
  242 + },
  243 + analyzeObject: function(parent, curr_field, object) {
  244 + if(curr_field != null){
  245 + var parent_list = parent.split('.');
  246 + var ele = null;
  247 + if(object.constructor == Array || object.constructor == Object){
  248 + var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
  249 + this.fieldsMap[curr_field] = panel;
  250 + this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
  251 +
  252 + }else{
  253 + /*var checkbox = document.createElement('paper-checkbox');
  254 + checkbox.innerHTML = "<b>" + curr_field + '</b><br>';
  255 + checkbox.id = parent;
  256 + this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/
  257 + //Polymer.dom.flush();
  258 + //this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);
  259 + this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);
  260 +
  261 + }
  262 + }
  263 + if(object.constructor == Array || object.constructor == Object) {
  264 + var obj = (object.constructor == Array) ? object[0] : object;
  265 + for (var field in obj) {
  266 + if (obj[field] != null) {
  267 + parent_list = parent.split('.');
  268 + this.analyzeObject(parent + '.' + field, field, obj[field]);
  269 + }
  270 + }
  271 + }
  272 + },
  273 + /**
  274 + * Callback to parse the components response object
  275 + *
  276 + * @method handleResponseComponents
  277 + */
  278 + handleResponseDatalets: function(e){
  279 + this.tools = e;
  280 + /*html = '<paper-menu>';
  281 + for(i=0;i < e.length;i++){
  282 + html += '<paper-item>' + e[i] + '</paper-item>';
  283 + }
  284 + html += '</paper-menu>';*/
  285 + html = '<label for="datalets_selector">Available Datalets list:</label>'
  286 + + '<select class="form-control" id="datalets_selector">';
  287 + for(i=0;i < e.length;i++){
  288 + html += '<option>' + e[i] + '</option>';
  289 + }
  290 + html += '</select>';
  291 + $(this.$.datalets_menu).append(html);
  292 + },
  293 + /**
  294 + * Callback called when "Go to visualization" button is pressed
  295 + *
  296 + * @method handleResponseComponents
  297 + */
  298 + goto: function(){
  299 + var url = "http://service.routetopa.eu/oxwall/webcomp";
  300 + var query = "$result$records[";
  301 + var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");
  302 + for(i=0;i<cbs.length;i++){
  303 + if(cbs[i].checked){
  304 + query += cbs[i].id + ",";
  305 + }
  306 + }
  307 + query = query.slice(0,-1);
  308 + query += "]";
  309 +
  310 + var cmp = this.$.toolsmenu.selectedItemLabel;
  311 +
  312 + url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";
  313 +
  314 + window.location = url;
  315 + },
  316 + ready: function(){
  317 +
  318 + /*this.fields = [
  319 + {parent:"root", name :"No fields available"}
  320 + ];*/
  321 +
  322 + this.tools = [
  323 + 'No tools available'
  324 + ];
  325 +
  326 + //this.$.data_request.addEventListener('response', this.handleResponseData);
  327 +
  328 + /* var comp = this;
  329 + $.ajax({
  330 + url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
  331 + dataType: "json",
  332 + success: comp.handleResponseDatalets
  333 +
  334 + });*/
  335 + $(this.$.goto).click(this.goto());
  336 + }
  337 + });
  338 + </script>
  339 +</dom-module>
0 340 \ No newline at end of file
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet_2.html 0 → 100644
  View file @21e3e3f
  1 +<!--
  2 +@group ROUTETOPA Polymer Core Elements
  3 +
  4 +The `select-visualization-form-controllet` is a slider container of elements.
  5 +Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
  6 +slider with all components initialized with data and query attributes
  7 +
  8 +### Code
  9 +
  10 +Example
  11 +
  12 +@class select-visualization-form-controllet
  13 +
  14 +-->
  15 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  16 +<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
  17 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
  18 +
  19 +<dom-module id="datalet-selection-controllet">
  20 + <template>
  21 + <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
  22 + <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->
  23 + <style>
  24 + body {
  25 + font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  26 + font-size: 14px;
  27 + margin: 0;
  28 + padding: 24px;
  29 + -webkit-tap-highlight-color: rgba(0,0,0,0);
  30 + -webkit-touch-callout: none;
  31 + }
  32 +
  33 + paper-input {
  34 + width: 80%;
  35 + }
  36 +
  37 + paper-checkbox {
  38 + display: block;
  39 + margin-bottom: 40px;
  40 + }
  41 +
  42 + </style>
  43 +
  44 + <!--<iron-ajax
  45 + auto
  46 + id="data_request"
  47 + url={{dataUrl}}
  48 + handle-as="json"
  49 + verbose="true"
  50 + on-response="this.handleResponseData"
  51 + debounce-duration="300">
  52 + </iron-ajax>
  53 +
  54 + <iron-ajax
  55 + auto
  56 + url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
  57 + handle-as="json"
  58 + on-response="handleResponseDatalets"
  59 + debounce-duration="300">
  60 + </iron-ajax>
  61 +
  62 + <iron-request id="xhr"></iron-request>-->
  63 + </template>
  64 +
  65 + <script>
  66 +
  67 + DataletSelectionControllet = Polymer({
  68 + is: 'datalet-selection-controllet',
  69 + properties: {
  70 + /**
  71 + * It represent the data url from CKAN api
  72 + *
  73 + * @attribute dataUrl
  74 + * @type string
  75 + * @default 'null'
  76 + */
  77 + dataUrl: {
  78 + type: String,
  79 + value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
  80 + observer: '_data_urlChanged'
  81 + },
  82 + /**
  83 + * It stores all tools available in WebComponent server
  84 + *
  85 + * @attribute tools
  86 + * @type array
  87 + * @default 'null'
  88 + */
  89 + tools:{
  90 + type: Array,
  91 + value: []
  92 + },
  93 + /**
  94 + * It stores all fields related to data retrieved from CKAN api url
  95 + *
  96 + * @attribute fields
  97 + * @type array
  98 + * @default 'null'
  99 + */
  100 + fields:{
  101 + type: Array,
  102 + value: []
  103 + },
  104 + fieldsMap: {
  105 + type: Map,
  106 + value: null
  107 + }
  108 + }
  109 + });
  110 + </script>
  111 +</dom-module>
0 112 \ No newline at end of file
... ...
datalets/barchart-datalet/barchart-datalet.html
  View file @21e3e3f
... ... @@ -2,7 +2,7 @@
2 2 @license
3 3 The MIT License (MIT)
4 4  
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
6 6  
7 7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -57,6 +57,22 @@ Example:
57 57 var BarchartBehavior = {
58 58  
59 59  
  60 + setParameters: function(params)
  61 + {
  62 + //"description\":\"d\",\"title\":\"coseeee\",\"x-axis-label\":\"x\",\"y-axis-label\":\"y\",\"suffix\":\"e\"}'
  63 + this._component.chart.setTitle({text: params.title});
  64 + this._component.chart.xAxis[0].setTitle({text: params['x-axis-label']});
  65 + this._component.chart.yAxis[0].setTitle({text: params['y-axis-label']});
  66 +
  67 +
  68 + /*this._component.chart.tooltip.options.formatter = function() {
  69 + $.each(this.points,function(){
  70 + console.log(this.points);
  71 + });
  72 + return 'a';
  73 + }*/
  74 + },
  75 +
60 76 /**
61 77 * Bluid Highchart object
62 78 *
... ... @@ -114,6 +130,8 @@ Example:
114 130 },
115 131 series: this.properties.series.value
116 132 });
  133 +
  134 + this._component.chart = $(this._component.$.charts.$.container).highcharts();
117 135 }
118 136 };
119 137  
... ... @@ -176,6 +194,17 @@ Example:
176 194 behavior : {
177 195 type : Object,
178 196 value : {}
  197 + },
  198 + /**
  199 + * It's the component chart
  200 + *
  201 + * @attribute chart
  202 + * @type Object
  203 + * @default {}
  204 + */
  205 + chart : {
  206 + type : Object,
  207 + value : {}
179 208 }
180 209 },
181 210  
... ...