diff --git a/bower_components/iron-list/demo/demo1.html b/bower_components/iron-list/demo/demo1.html
old mode 100644
new mode 100755
index b7eb0b8..b7eb0b8
--- a/bower_components/iron-list/demo/demo1.html
+++ b/bower_components/iron-list/demo/demo1.html
diff --git a/bower_components/paper-checkbox/paper-checkbox.css b/bower_components/paper-checkbox/paper-checkbox.css
old mode 100644
new mode 100755
index c0b5194..c0b5194
--- a/bower_components/paper-checkbox/paper-checkbox.css
+++ b/bower_components/paper-checkbox/paper-checkbox.css
diff --git a/bower_components/paper-item/paper-item-shared.css b/bower_components/paper-item/paper-item-shared.css
old mode 100644
new mode 100755
index 8528d1a..8528d1a
--- a/bower_components/paper-item/paper-item-shared.css
+++ b/bower_components/paper-item/paper-item-shared.css
diff --git a/bower_components/paper-radio-button/paper-radio-button.css b/bower_components/paper-radio-button/paper-radio-button.css
old mode 100644
new mode 100755
index 852296e..852296e
--- a/bower_components/paper-radio-button/paper-radio-button.css
+++ b/bower_components/paper-radio-button/paper-radio-button.css
diff --git a/bower_components/paper-slider/paper-slider.css b/bower_components/paper-slider/paper-slider.css
old mode 100644
new mode 100755
index 6e9352b..6e9352b
--- a/bower_components/paper-slider/paper-slider.css
+++ b/bower_components/paper-slider/paper-slider.css
diff --git a/bower_components/paper-toggle-button/paper-toggle-button.css b/bower_components/paper-toggle-button/paper-toggle-button.css
old mode 100644
new mode 100755
index ad3a6b5..ad3a6b5
--- a/bower_components/paper-toggle-button/paper-toggle-button.css
+++ b/bower_components/paper-toggle-button/paper-toggle-button.css
diff --git a/bower_components/prism/plugins/show-language/prism-show-language.min.css b/bower_components/prism/plugins/show-language/prism-show-language.min.css
old mode 100644
new mode 100755
index 16a7f46..16a7f46
--- a/bower_components/prism/plugins/show-language/prism-show-language.min.css
+++ b/bower_components/prism/plugins/show-language/prism-show-language.min.css
diff --git a/controllets/animated-button-container-controllet/animated-button-container-controllet.html b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
index bffb89c..5f3d25f 100755
--- a/controllets/animated-button-container-controllet/animated-button-container-controllet.html
+++ b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
@@ -27,10 +27,11 @@
}
.window {
+ display: none;
position: fixed;
right: 0;
left: 0;
- top: 25%;
+ top: 20%;
margin-right: auto;
margin-left: auto;
z-index: 1000;
@@ -144,9 +145,9 @@
</style>
<template>
- <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
+ <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable><div id="hidden"></div></neon-animatable>
- <neon-animatable>
+ <neon-animatable>-->
<paper-material elevation="5" id="window" class="window">
<div class="transparent"></div>
<paper-toolbar id="toolbar">
@@ -155,12 +156,12 @@
</paper-toolbar>
<div id="container_content"><content></content></div>
</paper-material>
- </neon-animatable>
- </neon-animated-pages>
+ <!--</neon-animatable>
+ </neon-animated-pages>-->
<div id="button_container" class="horizontal layout">
<span class="button-container" id="open" on-click="_onOpenClick">
- <iron-icon id="button" icon="{{icon}}"></iron-icon>
+ <iron-icon id="open_window_button" icon="{{icon}}"></iron-icon>
</span>
<div id="selected_item"></div>
</div>
@@ -178,7 +179,8 @@
listeners:{
'animated-button-container-controllet_element-selected' : '_elementSelected',
'search-panel-controllet_content-changed' : '_handleSearch',
- 'animated-button-container-controllet_close' : '_onCloseClick'
+ 'animated-button-container-controllet_close' : '_onCloseClick',
+ 'animated-button-container-controllet_open-window' : '_onOpenClick'
},
properties: {
@@ -239,22 +241,24 @@
this.$.open.style.height = this.iconHeight + "px";
this.$.open.style.width = this.iconWidth + "px";
- this.$.open.style.backgroundColor = this.backgroundButtonColor;
- this.$.button.style.width = this.iconWidth + "px";
- this.$.button.style.height = this.iconHeight + "px";
+ this.$.open_window_button.style.backgroundColor = this.backgroundButtonColor;
+ this.$.open_window_button.style.width = this.iconWidth + "px";
+ this.$.open_window_button.style.height = this.iconHeight + "px";
this.$.button_container.style.height = this.iconHeight + "px";
},
_onOpenClick: function() {
- this.entryAnimation = 'fade-in-animation';
- this.exitAnimation = 'fade-out-animation';
- this.selected = 1;
+ /*this.entryAnimation = 'fade-in-animation';
+ this.exitAnimation = 'fade-out-animation';*/
+ //this.selected = 1;
+ $(this.$.window).show();
},
_onCloseClick: function(){
/*this.entryAnimation = 'fade-out-animation';
this.exitAnimation = 'fade-in-animation';*/
- this.selected = 0;
+ //this.selected = 0;
+ $(this.$.window).hide();
},
_elementSelected: function(e){
diff --git a/controllets/create-card-controllet/create-card-controllet.html b/controllets/create-card-controllet/create-card-controllet.html
index 07c75bb..fa819cd 100755
--- a/controllets/create-card-controllet/create-card-controllet.html
+++ b/controllets/create-card-controllet/create-card-controllet.html
@@ -107,6 +107,18 @@
margin: 20px;
}
+ ::content #card_preview .modify{
+ display: none;
+ }
+
+ ::content #card_preview .delete{
+ display: none;
+ }
+
+ ::content #card_preview .fullscreen{
+ display: none;
+ }
+
</style>
@@ -123,12 +135,12 @@
</div>
<paper-material animated elevation="2">
- <paper-textarea class="custom_textarea" id="title"
+ <paper-textarea class="custom_textarea" id="cardTitle"
label=""
char-counter
- maxlength="30"
+ maxlength="25"
rows="1"
- value="{{title}}">
+ value="{{cardTitle}}">
</paper-textarea>
</paper-material>
@@ -223,7 +235,7 @@
value: "text"
},
- title:{
+ cardTitle:{
type: String,
value: "Title",
observer : '_valueChanged'
@@ -251,6 +263,8 @@
},
ready: function(){
+
+ this._valueChanged('','');
},
@@ -269,7 +283,7 @@
' height="300"' +
' card-type="'+ this.type + '"' +
' comment="'+ this.comment + '"' +
- ' card-title="'+ this.title + '">';
+ ' card-title="'+ this.cardTitle + '">';
if(this.type == 'link'){
card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
}else{
diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index 99cb23d..aa4a2ad 100755
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -226,29 +226,6 @@ Example:
overflow: auto;
}
- paper-tabs, paper-toolbar
- {
- background-color: var(--paper-blue-500);
- color: #ffffff;
- box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
- }
-
- paper-toolbar paper-tabs
- {
- box-shadow: none;
- --paper-tabs-selection-bar-color : var(--google-gray-500);
- }
-
- paper-tabs[noink][no-bar] paper-tab.iron-selected
- {
- background-color: var(--google-gray-500);
- }
-
- paper-tabs[align-bottom]
- {
- box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
- }
-
#idm_fields_main_container{
position: relative;
height: 60vh;
@@ -282,6 +259,28 @@ Example:
padding : 30px;
}
+ paper-tabs, paper-toolbar
+ {
+ background-color: var(--paper-blue-500);
+ color: #ffffff;
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
+ --paper-tabs-selection-bar-color: var(--google-gray-500);
+ }
+
+ paper-toolbar paper-tabs
+ {
+ box-shadow: none;
+ }
+
+ paper-tabs[noink][no-bar] paper-tab.iron-selected
+ {
+ background-color: var(--google-gray-500);
+ }
+
+ paper-tabs[align-bottom]
+ {
+ box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
+ }
</style>
<iron-ajax
@@ -627,7 +626,7 @@ Example:
*/
paramsFields:{
type: Object,
- value: {}
+ value: undefined
},
/**
* It's used to store the tab index in the first pass
@@ -868,10 +867,15 @@ Example:
switch(next_selected_pass){
case 0:
+ this.$.data_url.value = "";
+ this.$.fields_treeview.setAttribute("json-data", null);
+ this.$.fields_treeview.setAttribute("preselected-fields", null);
+ this.$.fields_treeview.ready();//chrome
return true;
case 1:
- if(this.$.data_url.value == undefined){
- this.$.message.text = "You have to select a dataset to access to pass 2.";
+ var x = this.$.fields_treeview.getAttribute("json-data");
+ if(this.$.data_url.value == undefined || this.$.fields_treeview.getAttribute('json-data') == "null" || this.$.fields_treeview.getAttribute('json-data') == null){
+ this.$.message.text = "You have to select a dataset to access to pass 2. It's possible that the data you selected are not available.";
this.$.message.show();
return false;
}else{
@@ -879,16 +883,25 @@ Example:
}
case 2:
- if(this.selectedFields.length == 0){
+ if(this.selectedFields == undefined || this.selectedFields.length == 0){
this.$.message.text = "You have to select a set of fields to access to pass 3.";
this.$.message.show();
return false;
}else{
+ this.$.datalet_placeholder_2.innerHTML = "";
+ if(this.selectedDatalet != undefined) this.injectDatalet(this.$.datalet_placeholder);
return true;
}
case 3:
- this.injectDatalet(this.$.datalet_placeholder_2);
- return true;
+ if(this.paramsFields == undefined){
+ this.$.message.text = "You have to select a datalet and map the selected fields to datalets fields(by drag and drop) to access to pass 4.";
+ this.$.message.show();
+ return false;
+ }else{
+ this.$.datalet_placeholder.innerHTML = "";
+ this.injectDatalet(this.$.datalet_placeholder_2);
+ return true;
+ }
}
},
@@ -1018,6 +1031,7 @@ Example:
_textElementChanged : function(e){
if(this.selected == 3) {
this.generateDataletPreview();
+ this.$.datalet_placeholder.innerHTML = "";
this.injectDatalet(this.$.datalet_placeholder_2);
}
},
@@ -1052,7 +1066,7 @@ Example:
fields : this.selectedFields,
datalet : this.selectedDatalet,
comment : this.$.commentArea.value,
- staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)
+ staticData : JSON.stringify(this.$.datalet_placeholder_2.children[1].behavior.data)
}
this.fire('data-sevc-controllet.dataletCreated', {data : data});
diff --git a/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html b/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
index d14dd3d..7a8e621 100755
--- a/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
+++ b/controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
@@ -64,7 +64,7 @@ Example:
top: 8px;
}
- .grid
+ .card_grid
{
width: 100%;
z-index: 0;
@@ -72,31 +72,41 @@ Example:
padding: 5%;
}
- .grid:after {
+ .card_grid:after {
content: '';
display: block;
clear: both;
}
::content .card{
- /* ms-transform: scale(0.80);
- -moz-transform: scale(0.80);
- -o-transform: scale(0.80);
- -webkit-transform: scale(0.80);
- transform: scale(0.80);
- -ms-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;*/
margin: 10px;
float: left;
}
+ ::content .card_grid .fullscreen{
+ display: none;
+ }
+
+ ::content .card_grid .delete{
+ display: none;
+ }
+
+ ::content .empty{
+ position: absolute;
+ right: 0;
+ left: 27%;
+ top: 40%;
+ margin-right: auto;
+ margin-left: auto;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 500;
+ font-size: large;
+ }
+
</style>
<div id="container" class="layout vertical">
- <div class="grid">
+ <div class="card_grid" id="card_grid">
<content></content>
</div>
</div>
@@ -130,6 +140,12 @@ Example:
ready : function(){
var _this = this;
var cards = document.querySelectorAll('paper-card-controllet');
+
+ if(cards.length == 0){
+
+ this.$.card_grid.innerHTML += "<div class='empty'>There is nothing to show.</div>";
+ }
+
for(var i = 0; i < cards.length; i++){
cards[i].addEventListener('click', function(e){
_this._cardClick(e)
diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html
index f638998..64823d7 100755
--- a/controllets/paper-card-controllet/paper-card-controllet.html
+++ b/controllets/paper-card-controllet/paper-card-controllet.html
@@ -18,9 +18,6 @@
--paper-fab-background: var(--accent-color);
font-family: 'Roboto', sans-serif;
padding-bottom: 30px;
-
- /*Test*/
-
}
paper-material {
@@ -42,7 +39,8 @@
height: 50px;
padding: 0 16px;
left: 0; right: 0;
- z-index: 1;
+ z-index: 1000;
+ word-wrap: break-word;
}
paper-fab {
position: absolute;
@@ -62,9 +60,11 @@
position:relative;
overflow: auto;
}
+
::content.buttons {
margin-top: 8px;
}
+
::content paper-button, ::content paper-icon-button {
font-weight: 500;
color: var(--accent-color);
@@ -79,9 +79,10 @@
font-size: 10px;
color: rgba(0,0,0,0.4);
font-family: 'Roboto', sans-serif;
+ word-wrap: break-word;
}
- #delete{
+ .delete{
position: absolute;
top: -12px;
left: -12px;
@@ -91,12 +92,57 @@
height: 24px;
--paper-fab-background:#cccccc;
}
+
+ .fullscreen{
+ position: absolute;
+ top: 36px;
+ right: 54px;
+ --iron-icon-height: 18px;
+ --iron-icon-width: 18px;
+ width: 24px;
+ height: 24px;
+ --paper-fab-background:#cccccc;
+ }
+
+ #fullscreen_container{
+ position: fixed;
+ width: 80%;
+ /*height: 60%;*/
+ right: 0;
+ left: 0;
+ top: 5%;
+ margin-right: auto;
+ margin-left: auto;
+ z-index: 1100;
+ display: none;
+ padding: 40px;
+ line-height: 20px;
+ }
+
+ .close_fullscreen{
+ position: absolute;
+ top: 5px;
+ right: 1vw;
+ --iron-icon-height: 18px;
+ --iron-icon-width: 18px;
+ width: 24px;
+ height: 24px;
+ --paper-fab-background:#cccccc;
+ }
+
+ #fullscreen_content{
+ position: relative;
+ height: 100%;
+ width: 100%;
+ z-index: 1000;
+ }
+
</style>
<paper-material animated elevation="{{elevation}}" flex>
- <paper-fab id="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
+ <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
<div class="vertical layout">
<div id="content">
@@ -107,29 +153,32 @@
<div class="legend horizontal layout center">
<span>{{cardTitle}}</span>
+
+ <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab>
+
<!-- Adding icon based on card type -->
<template is="dom-if" if="{{checkType(cardType, 'text')}}">
- <paper-fab mini icon="create" on-click="_handleDetailsClick"></paper-fab>
+ <paper-fab class="modify" mini icon="create" on-click="_handleDetailsClick"></paper-fab>
</template>
<template is="dom-if" if="{{checkType(cardType, 'image')}}">
- <paper-fab mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab>
+ <paper-fab class="modify" mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab>
</template>
<template is="dom-if" if="{{checkType(cardType, 'datalet')}}">
- <paper-fab mini icon="assessment" on-click="_handleDetailsClick"></paper-fab>
+ <paper-fab class="modify" mini icon="assessment" on-click="_handleDetailsClick"></paper-fab>
</template>
<template is="dom-if" if="{{checkType(cardType, 'link')}}">
- <paper-fab mini icon="link" on-click="_handleDetailsClick"></paper-fab>
+ <paper-fab class="modify" mini icon="link" on-click="_handleDetailsClick"></paper-fab>
</template>
@@ -143,6 +192,11 @@
</template>
</div>
+ <paper-material elevation="4" id="fullscreen_container">
+ <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>
+ <div id="fullscreen_content"></div>
+ </paper-material>
+
</div>
</paper-material>
@@ -181,7 +235,7 @@
},
- ready: function(){
+ attached: function(){
if(this.cardType == "text"){
this.$.content.style.backgroundColor = "#ffc";
}
@@ -209,8 +263,35 @@
},
_handleDeleteClick: function(e){
- this.fire('paper-card-controllet_delete-clicked', {data : this});
- }
+ this.fire('paper-card-controllet_delete-clicked', {data : this});
+ },
+
+ _handleFullscreenClick: function(e){
+
+ switch(this.cardType){
+ case 'text':
+ this.$.fullscreen_content.style.backgroundColor = "#ffc";
+ break;
+ case 'link':
+ window.open(this.getAttribute('card-link'),'_blank');
+ return;
+ }
+
+ var html = this.$.content.innerHTML;
+ this.$.content.innerHTML = "";
+ this.$.fullscreen_content.innerHTML = html;
+
+ this.$.fullscreen_container.style.display = "inline-block";
+ },
+
+ _handleCloseFullscreenClick: function(e){
+
+ var html = this.$.fullscreen_content.innerHTML;
+ this.$.fullscreen_content.innerHTML = "";
+ this.$.content.innerHTML = html;
+
+ this.$.fullscreen_container.style.display = "none";
+ }
})
</script>
diff --git a/datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js b/datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
index 5aff92f..b5eef3e 100755
--- a/datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
+++ b/datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
@@ -82,11 +82,13 @@ var AjaxJsonJsonPathBehavior = {
*/
isFieldArray : function(field){
if(field.length == 0) return false;
+
var obj = this.properties.json_results.value[field[0]];
for(var i=1; i < field.length; i++){
obj = (obj.constructor == Array) ? obj[0][field[i]] : obj[field[i]];
}
+ if(obj == null) return false;
return (obj.constructor === Array && obj[0].constructor == Object) ? true : false;
},
diff --git a/datalets/base-datalet/base-datalet.html b/datalets/base-datalet/base-datalet.html
index 36426f6..935723c 100755
--- a/datalets/base-datalet/base-datalet.html
+++ b/datalets/base-datalet/base-datalet.html
@@ -104,7 +104,9 @@ Example :
*
*/
ready: function(){
- this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+ if(this.dataUrl != undefined){
+ this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+ }
},
/**
* Set the domain url to show in the footer
diff --git a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
new file mode 100644
index 0000000..2fd120a
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
@@ -0,0 +1,225 @@
+<!--
+@license
+ The MIT License (MIT)
+
+ 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
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
+
+<!--
+
+`datasetexplorer-datalet` is a treemap datalet based on d3js treemap project http://bl.ocks.org/mbostock/4063582
+A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value.
+This is an enhanced version designed to help users to navigate associated dataset providers.
+
+At this moment it requires server-side elaboration, but later version will hopefully be completely client-side.
+
+Example:
+
+ <datasetexplorer-datalet
+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+ fields='["field1","field2"]'>
+ </datasetexplorer-datalet>
+
+@element datasetexplorer-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module id="datasetexplorer-datalet">
+ <template>
+ <style is="custom-style">
+
+ :host ::content h6 {
+ color: red;
+ }
+
+ :host ::content #treemap_placeholder {
+ width: 100%;
+ height: 70%;
+ min-height: 500px;
+ background: #ddd;
+ }
+
+ :host ::content text {
+ pointer-events: none;
+ }
+
+ :host ::content .grandparent text {
+ font-weight: bold;
+ }
+
+ :host ::content rect {
+ fill: none;
+ stroke: #fff;
+ }
+
+ :host ::content rect.parent,
+ .grandparent rect {
+ stroke-width: 2px;
+ }
+
+ :host ::content .grandparent rect {
+ fill: orange;
+ }
+
+ :host ::content .grandparent:hover rect {
+ fill: #ee9700;
+ }
+
+ :host ::content .children rect.parent,
+ .grandparent rect {
+ cursor: pointer;
+ }
+
+ :host ::content .children rect.parent {
+ fill: #bbb;
+ -fill-opacity: .5;
+ fill-opacity: 1;
+ }
+
+ :host ::content .children:hover rect.child {
+ fill: #bbb;
+ }
+ </style>
+ <div id="treemap_placeholder"></div>
+ <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+ </template>
+
+ <script src="http://deep.routetopa.eu/COMPONENTS/datalets/shared_js/d3.js"></script>
+ <script src="js/buildtreemap.js"></script>
+ <script>
+
+ var DatasetexplorerBehavior = {
+
+ map : {
+ name : "",
+ children : []
+ },
+
+ transformData: function(e)
+ {
+ var treemapData = [];
+ DatasetexplorerBehavior.map.name = this._component.name;
+
+ if(this.data.length > 1) {
+ for (i = 0; i < this.data.length; i++) {
+ var propName = this.data[i].name;
+
+ for (var j = 0; j < this.data[i].data.length; j++) {
+ if (i == 0) treemapData[j] = {};
+ currObj = {};
+ currObj[propName] = this.data[i].data[j];
+ jQuery.extend(treemapData[j], currObj);
+ }
+ }
+ }else{
+ treemapData = this.data[0].data;
+ }
+
+ this.map.children = [];
+
+ for(var i = 0; i < treemapData.length; i++){
+ this.checkAggragationField(treemapData[i], this._component.fields.length - 1, this._component.fields.length - 1);
+ }
+
+ var json = JSON.stringify(this.map);
+
+ },
+
+ findChild: function(child, category){
+ var children = child.children;
+ for (var i=0; i<children.length; i++) {
+ if (children[i].name == category)
+ return children[i];
+ }
+ var nchild = {name : category , children : []};
+ children.push(nchild);
+ return nchild;
+ },
+
+ checkAggragationField: function(object, levels, value_index){
+ var curchild = this.map;
+ var keys = Object.keys(object);
+ for(var level= 0; level < levels; level++){
+
+ var child = this.findChild(curchild, object[keys[level]]);
+ curchild = child;
+ }
+
+ if (curchild.value === undefined)
+ curchild.value = 0;
+
+ var value = curchild.value + parseFloat(object[keys[value_index]]);
+ curchild.children = null;
+ curchild.value = value;
+ },
+
+ presentData: function(){
+ build(this.map, "treemap_placeholder");
+ }
+ };
+
+
+ Polymer({
+ is : 'datasetexplorer-datalet' ,
+
+ properties: {
+ /**
+ * It's the name for treemap
+ *
+ * @attribute name
+ * @type String
+ * @default ''
+ */
+ name: {
+ type: String,
+ value: ""
+ },
+ /**
+ * It's the component behavior
+ *
+ * @attribute behavior
+ * @type Object
+ * @default {}
+ */
+ behavior : {
+ type : Object,
+ value : {}
+ }
+ },
+
+ ready: function(){
+ this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatasetexplorerBehavior);
+ this.async(function(){this.behavior.init(this)},1000);
+ }
+
+ });
+ </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.png b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.png
new file mode 100644
index 0000000..a9fd8c6
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.png
diff --git a/datalets/datasetexplorer-datalet/demo/index.html b/datalets/datasetexplorer-datalet/demo/index.html
new file mode 100644
index 0000000..4345369
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/demo/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+
+ <script>
+ </script>
+
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+<link rel="import" href="../datasetexplorer-datalet.html" />
+
+<datasetexplorer-datalet
+ data-url="http://spod.routetopa.eu/openwall/api/datasetTree"
+ fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'
+></datasetexplorer-datalet>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/datasetexplorer-datalet/docs.html b/datalets/datasetexplorer-datalet/docs.html
new file mode 100644
index 0000000..4b99f6f
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/docs.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
+ <meta charset="UTF-8">
+</head>
+<body>
+
+<iron-component-page src="datasetexplorer-datalet.html"></iron-component-page>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/datasetexplorer-datalet/js/buildtreemap.js b/datalets/datasetexplorer-datalet/js/buildtreemap.js
new file mode 100644
index 0000000..1d96e46
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/js/buildtreemap.js
@@ -0,0 +1,220 @@
+/**
+ * Created by Utente on 17/07/2015.
+ */
+
+function build(root, place_holder) {
+
+ var plwidth = $("#" + place_holder).width(),
+ plheight = $("#" + place_holder).height();
+
+ var margin = {top: 20, right: 0, bottom: 0, left: 0},
+ //width = 960,
+ //height = 500 - margin.top - margin.bottom,
+ width = plwidth,
+ height = plheight - margin.top - margin.bottom,
+ formatNumber = d3.format(",d"),
+ transitioning;
+
+ var x = d3.scale.linear()
+ .domain([0, width])
+ .range([0, width]);
+
+ var y = d3.scale.linear()
+ .domain([0, height])
+ .range([0, height]);
+
+ var treemap = d3.layout.treemap()
+ .children(function(d, depth) { return depth ? null : d._children; })
+ .sort(function(a, b) { return a.value - b.value; })
+ .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
+ .round(false);
+
+ var svg = d3.select("#" + place_holder).append("svg")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.bottom + margin.top)
+ .style("margin-left", -margin.left + "px")
+ .style("margin.right", -margin.right + "px")
+ .append("g")
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+ .style("shape-rendering", "crispEdges");
+
+ var grandparent = svg.append("g")
+ .attr("class", "grandparent");
+
+ var dataletContainer = null;
+
+ grandparent.append("rect")
+ .attr("y", -margin.top)
+ .attr("width", width)
+ .attr("height", margin.top);
+
+ grandparent.append("text")
+ .attr("x", 6)
+ .attr("y", 6 - margin.top)
+ .attr("dy", ".75em");
+
+ //d3.json
+ initialize(root);
+ accumulate(root);
+ layout(root);
+ display(root);
+
+ function initialize(root) {
+ root.x = root.y = 0;
+ root.dx = width;
+ root.dy = height;
+ root.depth = 0;
+ }
+
+ // Aggregate the values for internal nodes. This is normally done by the
+ // treemap layout, but not here because of our custom implementation.
+ // We also take a snapshot of the original children (_children) to avoid
+ // the children being overwritten when when layout is computed.
+ function accumulate(d) {
+ return (d._children = d.children)
+ ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 5)
+ : d.value;
+ }
+
+ // Compute the treemap layout recursively such that each group of siblings
+ // uses the same size (1×1) rather than the dimensions of the parent cell.
+ // This optimizes the layout for the current zoom state. Note that a wrapper
+ // object is created for the parent node for each group of siblings so that
+ // the parent’s dimensions are not discarded as we recurse. Since each group
+ // of sibling was laid out in 1×1, we must rescale to fit using absolute
+ // coordinates. This lets us use a viewport to zoom.
+ function layout(d) {
+ if (d._children) {
+ treemap.nodes({_children: d._children});
+ var i = 0;
+ d._children.forEach(function(c) {
+ c.x = d.x + c.x * d.dx;
+ c.y = d.y + c.y * d.dy;
+ c.dx *= d.dx;
+ c.dy *= d.dy;
+ c.parent = d;
+ c.depth = d.depth + 1;
+ c.color = c.depth < 2
+ ? d3.scale.ordinal().domain(d3.range(d._children.length)).range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"])(i++)
+ //? interpolate(0, d._children.length, i++)
+ : d.color; //d3.rgb(d.color).brighter(.5);
+ layout(c);
+ });
+ }
+ }
+
+ function display(d) {0
+ grandparent
+ .datum(d.parent)
+ .on("click", transition)
+ .select("text")
+ .text(name(d));
+
+ var g1 = svg.insert("g", ".grandparent")
+ .datum(d)
+ .attr("class", "depth");
+
+ var g = g1.selectAll("g")
+ .data(d._children)
+ .enter().append("g");
+
+ g.filter(function(d) { return d._children; })
+ .classed("children", true)
+ .on("click", transition);
+
+ g.selectAll(".child")
+ .data(function(d) { return d._children || [d]; })
+ .enter().append("rect")
+ .attr("class", "child")
+ .call(rect);
+
+ g.append("rect")
+ .attr("class", "parent")
+ .call(rect)
+ .append("title")
+ .text(function(d) { return d.name; /*formatNumber(d.value);*/ });
+
+ g.append("text")
+ .attr("dy", ".75em")
+ .text(function(d) { return (d._children) ? d.name : ''; })
+ //.style("font-size", function(d) { return Math.min(16, (d.dx - 8) / this.getComputedTextLength() * 16) + "px"; })
+ .call(text)
+ ;
+
+ function transition(d) {
+ if (transitioning || !d) return;
+ transitioning = true;
+
+ if (dataletContainer) {
+ //svg.select("foreignObject")
+ //svg.remove(dataletContainer);
+ dataletContainer.remove();
+ dataletContainer = null;
+ }
+
+ var g2 = display(d),
+ t1 = g1.transition().duration(750),
+ t2 = g2.transition().duration(750);
+
+ // Update the domain only after entering new elements.
+ x.domain([d.x, d.x + d.dx]);
+ y.domain([d.y, d.y + d.dy]);
+
+ // Enable anti-aliasing during the transition.
+ svg.style("shape-rendering", null);
+
+ // Draw child nodes on top of parent nodes.
+ svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
+
+ // Fade-in entering text.
+ g2.selectAll("text").style("fill-opacity", 0);
+
+ // Transition to the new view.
+ t1.selectAll("text").call(text).style("fill-opacity", 0);
+ t2.selectAll("text").call(text).style("fill-opacity", 1);
+ t1.selectAll("rect").call(rect);
+ t2.selectAll("rect").call(rect);
+
+ // Remove the old node when the transition is finished.
+ t1.remove().each("end", function() {
+ svg.style("shape-rendering", "crispEdges");
+ transitioning = false;
+ });
+ }
+
+ if (!d._children[0]._children) {
+ var dataurl = d._children[0].name;
+ var pageurl = dataurl.replace(/\/download\/.*/, '');
+ dataletContainer = svg
+ .append("foreignObject")
+ .attr("width", 480)
+ .attr("height", 500)
+ .append("xhtml:body")
+ .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>');
+
+ }
+
+ return g;
+ }
+
+ function text(text) {
+ text.attr("x", function(d) { return x(d.x) + 6; })
+ .attr("y", function(d) { return y(d.y) + 6; })
+ ;
+ }
+
+ function rect(rect) {
+ rect.attr("x", function(d) { return x(d.x); })
+ .attr("y", function(d) { return y(d.y); })
+ .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
+ .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
+ .style("fill", function(d, i) { return d.color; })
+ ;
+ }
+
+ function name(d) {
+ return d.parent
+ ? name(d.parent) + "." + d.name
+ : d.name;
+ }
+};
\ No newline at end of file
diff --git a/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.png b/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.png
index 64aa93e..6690392 100755
--- a/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.png
+++ b/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.png
diff --git a/datalets/donutpie3dchart-datalet/donutpie3dchart-datalets.png b/datalets/donutpie3dchart-datalet/donutpie3dchart-datalets.png
deleted file mode 100644
index 64aa93e..0000000
--- a/datalets/donutpie3dchart-datalet/donutpie3dchart-datalets.png
+++ /dev/null
diff --git a/datalets/donutpie3dchart-datalet/info.xml b/datalets/donutpie3dchart-datalet/info.xml
new file mode 100755
index 0000000..eb5f7dd
--- /dev/null
+++ b/datalets/donutpie3dchart-datalet/info.xml
@@ -0,0 +1,35 @@
+<component>
+ <name>donutpie3dchart-datalet</name>
+ <attributes>
+ <attribute>
+ <name>data-url</name>
+ </attribute>
+ <attribute>
+ <name>fields</name>
+ </attribute>
+ </attributes>
+ <idm>
+ <inputs>
+ <input>
+ <name>Series</name>
+ <description>The chart series. Its values will be put on slice of each series.</description>
+ <scale>nominal</scale>
+ <role>domain</role>
+ <selection>11</selection>
+ </input>
+ <input>
+ <name>Size </name>
+ <description>The size for each series to create a concentric rings</description>
+ <scale>nominal</scale>
+ <role>domain</role>
+ <selection>11</selection>
+ </input>
+ <layouts>
+ <input>
+ <name>title</name>
+ <description>The label for the title of the chart</description>
+ </input>
+ </layouts>
+ </inputs>
+ </idm>
+</component>
\ No newline at end of file
diff --git a/datalets/piechart-datalet/demo/index.html b/datalets/piechart-datalet/demo/index.html
new file mode 100755
index 0000000..841a008
--- /dev/null
+++ b/datalets/piechart-datalet/demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+
+ <script>
+ </script>
+
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+<link rel="import" href="../piechart-datalet.html" />
+<piechart-datalet data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"
+ fields='["facet_groups,facets,facets,path","facet_groups,facets,facets,count"]'></piechart-datalet>
+</body>
+</html>
+
diff --git a/datalets/piechart-datalet/docs.html b/datalets/piechart-datalet/docs.html
new file mode 100755
index 0000000..e1c4208
--- /dev/null
+++ b/datalets/piechart-datalet/docs.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
+ <meta charset="UTF-8">
+</head>
+<body>
+
+<iron-component-page src="piechart-datalet.html"></iron-component-page>
+
+</body>
+</html>
diff --git a/datalets/piechart-datalet/piechart-datalet.html b/datalets/piechart-datalet/piechart-datalet.html
new file mode 100755
index 0000000..0d79b7a
--- /dev/null
+++ b/datalets/piechart-datalet/piechart-datalet.html
@@ -0,0 +1,150 @@
+<!--
+@license
+ The MIT License (MIT)
+
+ 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
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
+
+
+<!--
+`piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/>
+
+Example:
+
+ <piechart-datalet>
+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+ fields='["field1","field2"]'>
+ </piechart-datalet>
+
+@element piechart-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+<dom-module id="piechart-datalet">
+ <template>
+ <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+ </template>
+ <script>
+
+ var PiechartBehavior = {
+ /**
+ * Build Highchart object
+ *
+ * @method presentData
+ */
+ presentData: function(){
+
+ var PieSeries = [{"name": this.data[1].name, "data":[]}];
+
+ for(var i=0; i<this.data[0].data.length; i++)
+ {
+ var PieArr = [this.data[0].data[i], this.data[1].data[i]];
+ PieSeries[0].data.push(PieArr);
+ }
+
+ //Build Highchart element
+ $(this._component.$.charts.$.container).highcharts({
+ chart: {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false,
+ type: 'pie'
+ },
+ title: {
+ text: "" + this._component.title
+ },
+ plotOptions: {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ formatter: function() {
+ if (this.point.name.length > 10) {
+ return this.point.name.substr(0, 10) + "...";
+ } else {
+ return this.point.name;
+ }
+ }
+ },
+ showInLegend: true
+ }
+ },
+ //hide link HighChart
+ credits: {
+ enabled: false
+ },
+ series: PieSeries
+ });
+ }
+ };
+
+
+ PiechartDatalet = Polymer({
+ is: 'piechart-datalet',
+
+ properties: {
+ /**
+ * It's the component behavior
+ *
+ * @attribute behavior
+ * @type Object
+ * @default {}
+ */
+ behavior : {
+ type : Object,
+ value : {}
+ },
+ /**
+ * It's the title of the chart
+ *
+ * @attribute title
+ * @type Strig
+ * @default ''
+ */
+ title: {
+ type: String,
+ value: ""
+ }
+ },
+
+ /**
+ * 'ready' callback extend the PiechartComponentBehavior with HighchartsComponentBehavior and PiechartBehavior
+ * and run the Datalet workcycle.
+ *
+ * @method ready
+ */
+ ready: function(){
+ this.behavior = $.extend(true, {}, HighchartsComponentBehavior, PiechartBehavior);
+ this.async(function(){this.behavior.init(this)},1000);
+ }
+ });
+ </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/piechart-datalet/piechart-datalet.png b/datalets/piechart-datalet/piechart-datalet.png
new file mode 100755
index 0000000..ff424b8
--- /dev/null
+++ b/datalets/piechart-datalet/piechart-datalet.png
diff --git a/datalets/piechart-datalet/piechart-datalet.xml b/datalets/piechart-datalet/piechart-datalet.xml
new file mode 100755
index 0000000..646037c
--- /dev/null
+++ b/datalets/piechart-datalet/piechart-datalet.xml
@@ -0,0 +1,35 @@
+<component>
+<name>piechart-datalet</name>
+<attributes>
+<attribute>
+ <name>data-url</name>
+</attribute>
+<attribute>
+ <name>fields</name>
+</attribute>
+</attributes>
+<idm>
+<inputs>
+ <input>
+ <name>Series</name>
+ <description>The chart series. Its values will be put on slice of each series.</description>
+ <scale>nominal</scale>
+ <role>domain</role>
+ <selection>11</selection>
+ </input>
+ <input>
+ <name>Size </name>
+ <description>The size for each series to create a concentric rings</description>
+ <scale>nominal</scale>
+ <role>domain</role>
+ <selection>11</selection>
+ </input>
+ <layouts>
+ <input>
+ <name>title</name>
+ <description>The label for the title of the chart</description>
+ </input>
+ </layouts>
+</inputs>
+</idm>
+</component>
\ No newline at end of file
diff --git a/datalets/treemap-datalet/js/buildtreemap.js b/datalets/treemap-datalet/js/buildtreemap.js
index 6a6326c..6f522ca 100755
--- a/datalets/treemap-datalet/js/buildtreemap.js
+++ b/datalets/treemap-datalet/js/buildtreemap.js
@@ -3,12 +3,10 @@
*/
function build(root, place_holder) {
- var plwidth = $("#" + place_holder).width(),
- plheight = $("#" + place_holder).height();
+ var plwidth = $(place_holder).width();
+ var plheight = $(place_holder).height();
var margin = {top: 20, right: 0, bottom: 0, left: 0},
- //width = 960,
- //height = 500 - margin.top - margin.bottom,
width = plwidth,
height = plheight - margin.top - margin.bottom,
formatNumber = d3.format(",d"),
@@ -28,7 +26,7 @@ function build(root, place_holder) {
.ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
.round(false);
- var svg = d3.select("#" + place_holder).append("svg")
+ var svg = d3.select(place_holder).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("margin-left", -margin.left + "px")
diff --git a/datalets/treemap-datalet/treemap-datalet.html b/datalets/treemap-datalet/treemap-datalet.html
index 028a8d3..14434bb 100755
--- a/datalets/treemap-datalet/treemap-datalet.html
+++ b/datalets/treemap-datalet/treemap-datalet.html
@@ -142,7 +142,7 @@ Example:
this.map.children = [];
for(var i = 0; i < treemapData.length; i++){
- this.checkAggragationField(treemapData[i], this._component.fields.length , this._component.fields.length - 1);
+ this.checkAggragationField(treemapData[i], this.data.length , this.data.length - 1);
}
var json = JSON.stringify(this.map);
@@ -178,7 +178,8 @@ Example:
},
presentData: function(){
- build(this.map, "treemap_placeholder");
+ //build(this.map, "treemap_placeholder");
+ build(this.map, this._component.$.treemap_placeholder);
}
};