From 21e3e3f2693cb79548bcfd1881dd2e20bceff19e Mon Sep 17 00:00:00 2001
From: isisadmin <isislab.unisa@gmail.com>
Date: Sat, 5 Dec 2015 06:48:40 +0100
Subject: [PATCH] fix controllet datalet selection controllet
---
controllets/datalet-selection-controllet/datalet-selection-controllet.html | 6 ++++--
controllets/datalet-selection-controllet/datalet-selection-controllet_.html | 339 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
controllets/datalet-selection-controllet/datalet-selection-controllet_2.html | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
datalets/barchart-datalet/barchart-datalet.html | 31 ++++++++++++++++++++++++++++++-
4 files changed, 484 insertions(+), 3 deletions(-)
create mode 100644 controllets/datalet-selection-controllet/datalet-selection-controllet_.html
create mode 100644 controllets/datalet-selection-controllet/datalet-selection-controllet_2.html
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet.html b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
index 8db35f6..0445384 100755
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet.html
+++ b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
@@ -513,7 +513,7 @@
for (var i = 0; i < labels.length; i++)
this.params[labels[i].label] = labels[i].value;
- var dataletParams ={
+ /*var dataletParams ={
component : this.selectedDatalet+"-datalet",
params : this.params,
fields : this.selectedFields,
@@ -521,9 +521,11 @@
};
ComponentService.deep_url = this.deepUrl;
- ComponentService.getComponent(dataletParams);
+ ComponentService.getComponent(dataletParams);*/
// this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
+
+ this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
},
_loadDatalet : function(selectedFields){
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet_.html b/controllets/datalet-selection-controllet/datalet-selection-controllet_.html
new file mode 100644
index 0000000..70de044
--- /dev/null
+++ b/controllets/datalet-selection-controllet/datalet-selection-controllet_.html
@@ -0,0 +1,339 @@
+<!--
+@group ROUTETOPA Polymer Core Elements
+
+The `select-visualization-form-controllet` is a slider container of elements.
+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
+slider with all components initialized with data and query attributes
+
+### Code
+
+Example
+
+@class select-visualization-form-controllet
+
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
+
+<dom-module id="datalet-selection-controllet">
+ <template>
+ <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
+ <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
+ <style is="custom-style">
+ body {
+ font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+ font-size: 14px;
+ margin: 0;
+ padding: 24px;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+ }
+
+ paper-input {
+ width: 80%;
+ }
+
+ paper-checkbox {
+ display: block;
+ margin-bottom: 40px;
+ }
+
+ </style>
+
+ <!--<iron-ajax
+ auto
+ id="data_request"
+ url={{data_url}}
+ handle-as="json"
+ verbose="true"
+ on-response="this.handleResponseData"
+ debounce-duration="300">
+ </iron-ajax>
+
+ <iron-ajax
+ auto
+ url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
+ handle-as="json"
+ on-response="handleResponseDatalets"
+ debounce-duration="300">
+ </iron-ajax>
+
+ <iron-request id="xhr"></iron-request>-->
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h3 class="panel-title">Data source</h3>
+ </div>
+ <div class="panel-body">
+ <section>
+ <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>
+ </section>
+ </div>
+ </div>
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h3 class="panel-title">Selection data fileds to visualize</h3>
+ </div>
+ <div class="panel-body">
+ <section>
+ <div class="horizontal center-justified layout">
+ <div id="fields_placeholder" class="horizontal-section">
+ <!-- <template is="dom-repeat" items="{{fields}}">
+ <paper-checkbox>{{item}}</paper-checkbox>
+ </template>-->
+ </div>
+ </div>
+ </section>
+ </div>
+ </div>
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h3 class="panel-title">Visualization tools selection</h3>
+ </div>
+ <div class="panel-body">
+ <div id="datalets_menu" class="layout"></div>
+ </div>
+ </div>
+
+ <section>
+ <!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->
+ <button id="goto" type="button" class="btn btn-primary">Go to visualization</button>
+ </section>
+ <content></content>
+ </template>
+
+ <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
+ <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
+
+ <script>
+
+ DataletSelectionControllet = Polymer({
+ is: 'datalet-selection-controllet',
+ properties: {
+ /**
+ * It represent the data url from CKAN api
+ *
+ * @attribute data_url
+ * @type string
+ * @default 'null'
+ */
+ data_url: {
+ type: String,
+ value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
+ observer: '_data_urlChanged'
+ },
+ /**
+ * It stores all tools available in WebComponent server
+ *
+ * @attribute tools
+ * @type array
+ * @default 'null'
+ */
+ tools:{
+ type: Array,
+ value: []
+ },
+ /**
+ * It stores all fields related to data retrieved from CKAN api url
+ *
+ * @attribute fields
+ * @type array
+ * @default 'null'
+ */
+ fields:{
+ type: Array,
+ value: []
+ },
+ fieldsMap: {
+ type: Map,
+ value: null
+ }
+ },
+ /**
+ * data-url member changed watcher. It's called when data_url changes its value
+ *
+ * @method data_urlChanged
+ */
+ _data_urlChanged: function(newValue, oldValue){
+ //this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});
+ //get the data fields
+ var comp = this;
+ $.ajax({
+ url: newValue,
+ dataType: "json",
+ success: function(e){comp.handleResponseData(e)}
+ });
+ //get datalets list
+ $.ajax({
+ url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
+ dataType: "json",
+ success: function(e){comp.handleResponseDatalets(e)}
+ });
+ },
+ createFieldsContainer: function(id, heading){
+ var panelDefault = document.createElement('div');
+ panelDefault.className = 'panel panel-default';
+ var panelHeading = document. createElement('div');
+ panelHeading.className = 'panel-heading';
+ panelHeading.innerHTML = heading;
+ var panelBody = document. createElement('div');
+ panelBody.className = 'panel-body';
+ panelBody.id = id;
+ var fieldPanel = document.createElement('div');
+ fieldPanel.className = 'panel-body';
+
+ panelBody.appendChild(fieldPanel);
+ panelDefault.appendChild(panelHeading);
+ panelDefault.appendChild(panelBody);
+
+ return panelDefault;
+
+ },
+ cretePaperCheckbox: function (id, label ) {
+ 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">'
+ + '<div id="checkboxContainer" class="style-scope paper-checkbox">'
+ + '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'
+ + '<div id="background" class="style-scope paper-ripple"></div>'
+ + '<div id="waves" class="style-scope paper-ripple"></div>'
+ + '</paper-ripple>'
+ + '<div id="checkbox" class="style-scope paper-checkbox">'
+ + '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'
+ + '</div>'
+ + '</div>'
+ + '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'
+ + '</paper-checkbox>';
+
+ return html;
+ },
+ createBootstrapCheckbox: function(id, label) {
+ return '<div class="checkbox checkbox-primary">'
+ + '<label class="checkbox-inline">'
+ + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label
+ + '</label>'
+ + '</div>';
+
+ },
+ createBootstrapToggle: function(id, label) {
+ return '<div class="checkbox">'
+ + '<label style="padding-left: 3px; text-decoration: double;">'
+ + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" /> ' + label
+ + '</label>'
+ + '</div>';
+
+ },
+ /**
+ * Callback to parse the data requested when data_url change its value
+ *
+ * @method handleResponseData
+ */
+ handleResponseData: function(e){
+ //crete root node and insert it in to shadow dom
+ var mainPanel = this.createFieldsContainer("root", "Data fields");
+ this.$.fields_placeholder.appendChild(mainPanel);
+ this.fieldsMap = new Map;
+ this.fieldsMap["root"] = mainPanel;
+ //call recursive analyze function for current json to get all fields user can select
+ this.analyzeObject("root", null, e);
+ },
+ analyzeObject: function(parent, curr_field, object) {
+ if(curr_field != null){
+ var parent_list = parent.split('.');
+ var ele = null;
+ if(object.constructor == Array || object.constructor == Object){
+ var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
+ this.fieldsMap[curr_field] = panel;
+ this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
+
+ }else{
+ /*var checkbox = document.createElement('paper-checkbox');
+ checkbox.innerHTML = "<b>" + curr_field + '</b><br>';
+ checkbox.id = parent;
+ this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/
+ //Polymer.dom.flush();
+ //this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);
+ this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);
+
+ }
+ }
+ if(object.constructor == Array || object.constructor == Object) {
+ var obj = (object.constructor == Array) ? object[0] : object;
+ for (var field in obj) {
+ if (obj[field] != null) {
+ parent_list = parent.split('.');
+ this.analyzeObject(parent + '.' + field, field, obj[field]);
+ }
+ }
+ }
+ },
+ /**
+ * Callback to parse the components response object
+ *
+ * @method handleResponseComponents
+ */
+ handleResponseDatalets: function(e){
+ this.tools = e;
+ /*html = '<paper-menu>';
+ for(i=0;i < e.length;i++){
+ html += '<paper-item>' + e[i] + '</paper-item>';
+ }
+ html += '</paper-menu>';*/
+ html = '<label for="datalets_selector">Available Datalets list:</label>'
+ + '<select class="form-control" id="datalets_selector">';
+ for(i=0;i < e.length;i++){
+ html += '<option>' + e[i] + '</option>';
+ }
+ html += '</select>';
+ $(this.$.datalets_menu).append(html);
+ },
+ /**
+ * Callback called when "Go to visualization" button is pressed
+ *
+ * @method handleResponseComponents
+ */
+ goto: function(){
+ var url = "http://service.routetopa.eu/oxwall/webcomp";
+ var query = "$result$records[";
+ var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");
+ for(i=0;i<cbs.length;i++){
+ if(cbs[i].checked){
+ query += cbs[i].id + ",";
+ }
+ }
+ query = query.slice(0,-1);
+ query += "]";
+
+ var cmp = this.$.toolsmenu.selectedItemLabel;
+
+ url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";
+
+ window.location = url;
+ },
+ ready: function(){
+
+ /*this.fields = [
+ {parent:"root", name :"No fields available"}
+ ];*/
+
+ this.tools = [
+ 'No tools available'
+ ];
+
+ //this.$.data_request.addEventListener('response', this.handleResponseData);
+
+ /* var comp = this;
+ $.ajax({
+ url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
+ dataType: "json",
+ success: comp.handleResponseDatalets
+
+ });*/
+ $(this.$.goto).click(this.goto());
+ }
+ });
+ </script>
+</dom-module>
\ No newline at end of file
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet_2.html b/controllets/datalet-selection-controllet/datalet-selection-controllet_2.html
new file mode 100644
index 0000000..b609eb3
--- /dev/null
+++ b/controllets/datalet-selection-controllet/datalet-selection-controllet_2.html
@@ -0,0 +1,111 @@
+<!--
+@group ROUTETOPA Polymer Core Elements
+
+The `select-visualization-form-controllet` is a slider container of elements.
+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
+slider with all components initialized with data and query attributes
+
+### Code
+
+Example
+
+@class select-visualization-form-controllet
+
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
+
+<dom-module id="datalet-selection-controllet">
+ <template>
+ <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
+ <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->
+ <style>
+ body {
+ font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+ font-size: 14px;
+ margin: 0;
+ padding: 24px;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+ }
+
+ paper-input {
+ width: 80%;
+ }
+
+ paper-checkbox {
+ display: block;
+ margin-bottom: 40px;
+ }
+
+ </style>
+
+ <!--<iron-ajax
+ auto
+ id="data_request"
+ url={{dataUrl}}
+ handle-as="json"
+ verbose="true"
+ on-response="this.handleResponseData"
+ debounce-duration="300">
+ </iron-ajax>
+
+ <iron-ajax
+ auto
+ url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
+ handle-as="json"
+ on-response="handleResponseDatalets"
+ debounce-duration="300">
+ </iron-ajax>
+
+ <iron-request id="xhr"></iron-request>-->
+ </template>
+
+ <script>
+
+ DataletSelectionControllet = Polymer({
+ is: 'datalet-selection-controllet',
+ properties: {
+ /**
+ * It represent the data url from CKAN api
+ *
+ * @attribute dataUrl
+ * @type string
+ * @default 'null'
+ */
+ dataUrl: {
+ type: String,
+ value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
+ observer: '_data_urlChanged'
+ },
+ /**
+ * It stores all tools available in WebComponent server
+ *
+ * @attribute tools
+ * @type array
+ * @default 'null'
+ */
+ tools:{
+ type: Array,
+ value: []
+ },
+ /**
+ * It stores all fields related to data retrieved from CKAN api url
+ *
+ * @attribute fields
+ * @type array
+ * @default 'null'
+ */
+ fields:{
+ type: Array,
+ value: []
+ },
+ fieldsMap: {
+ type: Map,
+ value: null
+ }
+ }
+ });
+ </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/barchart-datalet/barchart-datalet.html b/datalets/barchart-datalet/barchart-datalet.html
index c38feca..ed5632c 100755
--- a/datalets/barchart-datalet/barchart-datalet.html
+++ b/datalets/barchart-datalet/barchart-datalet.html
@@ -2,7 +2,7 @@
@license
The MIT License (MIT)
- Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+ Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@@ -57,6 +57,22 @@ Example:
var BarchartBehavior = {
+ setParameters: function(params)
+ {
+ //"description\":\"d\",\"title\":\"coseeee\",\"x-axis-label\":\"x\",\"y-axis-label\":\"y\",\"suffix\":\"e\"}'
+ this._component.chart.setTitle({text: params.title});
+ this._component.chart.xAxis[0].setTitle({text: params['x-axis-label']});
+ this._component.chart.yAxis[0].setTitle({text: params['y-axis-label']});
+
+
+ /*this._component.chart.tooltip.options.formatter = function() {
+ $.each(this.points,function(){
+ console.log(this.points);
+ });
+ return 'a';
+ }*/
+ },
+
/**
* Bluid Highchart object
*
@@ -114,6 +130,8 @@ Example:
},
series: this.properties.series.value
});
+
+ this._component.chart = $(this._component.$.charts.$.container).highcharts();
}
};
@@ -176,6 +194,17 @@ Example:
behavior : {
type : Object,
value : {}
+ },
+ /**
+ * It's the component chart
+ *
+ * @attribute chart
+ * @type Object
+ * @default {}
+ */
+ chart : {
+ type : Object,
+ value : {}
}
},
--
libgit2 0.21.4