SGH / COMPONENTS

Commit c1ea242d5679830d23ac146d52a0030993fe755d

Authored by Renato De Donato
2 parents 94601c1f 8fcc0f36

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 29 changed files with 946 additions and 83 deletions
bower_components/iron-list/demo/demo1.html 100644 → 100755
  View file @c1ea242
bower_components/paper-checkbox/paper-checkbox.css 100644 → 100755
  View file @c1ea242
bower_components/paper-item/paper-item-shared.css 100644 → 100755
  View file @c1ea242
bower_components/paper-radio-button/paper-radio-button.css 100644 → 100755
  View file @c1ea242
bower_components/paper-slider/paper-slider.css 100644 → 100755
  View file @c1ea242
bower_components/paper-toggle-button/paper-toggle-button.css 100644 → 100755
  View file @c1ea242
bower_components/prism/plugins/show-language/prism-show-language.min.css 100644 → 100755
  View file @c1ea242
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @c1ea242
@@ -27,10 +27,11 @@ @@ -27,10 +27,11 @@
27 } 27 }
28 28
29 .window { 29 .window {
  30 + display: none;
30 position: fixed; 31 position: fixed;
31 right: 0; 32 right: 0;
32 left: 0; 33 left: 0;
33 - top: 25%; 34 + top: 20%;
34 margin-right: auto; 35 margin-right: auto;
35 margin-left: auto; 36 margin-left: auto;
36 z-index: 1000; 37 z-index: 1000;
@@ -144,9 +145,9 @@ @@ -144,9 +145,9 @@
144 </style> 145 </style>
145 146
146 <template> 147 <template>
147 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> 148 + <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
148 <neon-animatable><div id="hidden"></div></neon-animatable> 149 <neon-animatable><div id="hidden"></div></neon-animatable>
149 - <neon-animatable> 150 + <neon-animatable>-->
150 <paper-material elevation="5" id="window" class="window"> 151 <paper-material elevation="5" id="window" class="window">
151 <div class="transparent"></div> 152 <div class="transparent"></div>
152 <paper-toolbar id="toolbar"> 153 <paper-toolbar id="toolbar">
@@ -155,12 +156,12 @@ @@ -155,12 +156,12 @@
155 </paper-toolbar> 156 </paper-toolbar>
156 <div id="container_content"><content></content></div> 157 <div id="container_content"><content></content></div>
157 </paper-material> 158 </paper-material>
158 - </neon-animatable>  
159 - </neon-animated-pages> 159 + <!--</neon-animatable>
  160 + </neon-animated-pages>-->
160 161
161 <div id="button_container" class="horizontal layout"> 162 <div id="button_container" class="horizontal layout">
162 <span class="button-container" id="open" on-click="_onOpenClick"> 163 <span class="button-container" id="open" on-click="_onOpenClick">
163 - <iron-icon id="button" icon="{{icon}}"></iron-icon> 164 + <iron-icon id="open_window_button" icon="{{icon}}"></iron-icon>
164 </span> 165 </span>
165 <div id="selected_item"></div> 166 <div id="selected_item"></div>
166 </div> 167 </div>
@@ -178,7 +179,8 @@ @@ -178,7 +179,8 @@
178 listeners:{ 179 listeners:{
179 'animated-button-container-controllet_element-selected' : '_elementSelected', 180 'animated-button-container-controllet_element-selected' : '_elementSelected',
180 'search-panel-controllet_content-changed' : '_handleSearch', 181 'search-panel-controllet_content-changed' : '_handleSearch',
181 - 'animated-button-container-controllet_close' : '_onCloseClick' 182 + 'animated-button-container-controllet_close' : '_onCloseClick',
  183 + 'animated-button-container-controllet_open-window' : '_onOpenClick'
182 }, 184 },
183 185
184 properties: { 186 properties: {
@@ -239,22 +241,24 @@ @@ -239,22 +241,24 @@
239 241
240 this.$.open.style.height = this.iconHeight + "px"; 242 this.$.open.style.height = this.iconHeight + "px";
241 this.$.open.style.width = this.iconWidth + "px"; 243 this.$.open.style.width = this.iconWidth + "px";
242 - this.$.open.style.backgroundColor = this.backgroundButtonColor;  
243 - this.$.button.style.width = this.iconWidth + "px";  
244 - this.$.button.style.height = this.iconHeight + "px"; 244 + this.$.open_window_button.style.backgroundColor = this.backgroundButtonColor;
  245 + this.$.open_window_button.style.width = this.iconWidth + "px";
  246 + this.$.open_window_button.style.height = this.iconHeight + "px";
245 this.$.button_container.style.height = this.iconHeight + "px"; 247 this.$.button_container.style.height = this.iconHeight + "px";
246 }, 248 },
247 249
248 _onOpenClick: function() { 250 _onOpenClick: function() {
249 - this.entryAnimation = 'fade-in-animation';  
250 - this.exitAnimation = 'fade-out-animation';  
251 - this.selected = 1; 251 + /*this.entryAnimation = 'fade-in-animation';
  252 + this.exitAnimation = 'fade-out-animation';*/
  253 + //this.selected = 1;
  254 + $(this.$.window).show();
252 }, 255 },
253 256
254 _onCloseClick: function(){ 257 _onCloseClick: function(){
255 /*this.entryAnimation = 'fade-out-animation'; 258 /*this.entryAnimation = 'fade-out-animation';
256 this.exitAnimation = 'fade-in-animation';*/ 259 this.exitAnimation = 'fade-in-animation';*/
257 - this.selected = 0; 260 + //this.selected = 0;
  261 + $(this.$.window).hide();
258 }, 262 },
259 263
260 _elementSelected: function(e){ 264 _elementSelected: function(e){
controllets/create-card-controllet/create-card-controllet.html
  View file @c1ea242
@@ -107,6 +107,18 @@ @@ -107,6 +107,18 @@
107 margin: 20px; 107 margin: 20px;
108 } 108 }
109 109
  110 + ::content #card_preview .modify{
  111 + display: none;
  112 + }
  113 +
  114 + ::content #card_preview .delete{
  115 + display: none;
  116 + }
  117 +
  118 + ::content #card_preview .fullscreen{
  119 + display: none;
  120 + }
  121 +
110 122
111 </style> 123 </style>
112 124
@@ -123,12 +135,12 @@ @@ -123,12 +135,12 @@
123 </div> 135 </div>
124 136
125 <paper-material animated elevation="2"> 137 <paper-material animated elevation="2">
126 - <paper-textarea class="custom_textarea" id="title" 138 + <paper-textarea class="custom_textarea" id="cardTitle"
127 label="" 139 label=""
128 char-counter 140 char-counter
129 - maxlength="30" 141 + maxlength="25"
130 rows="1" 142 rows="1"
131 - value="{{title}}"> 143 + value="{{cardTitle}}">
132 144
133 </paper-textarea> 145 </paper-textarea>
134 </paper-material> 146 </paper-material>
@@ -223,7 +235,7 @@ @@ -223,7 +235,7 @@
223 value: "text" 235 value: "text"
224 }, 236 },
225 237
226 - title:{ 238 + cardTitle:{
227 type: String, 239 type: String,
228 value: "Title", 240 value: "Title",
229 observer : '_valueChanged' 241 observer : '_valueChanged'
@@ -251,6 +263,8 @@ @@ -251,6 +263,8 @@
251 }, 263 },
252 264
253 ready: function(){ 265 ready: function(){
  266 +
  267 + this._valueChanged('','');
254 }, 268 },
255 269
256 270
@@ -269,7 +283,7 @@ @@ -269,7 +283,7 @@
269 ' height="300"' + 283 ' height="300"' +
270 ' card-type="'+ this.type + '"' + 284 ' card-type="'+ this.type + '"' +
271 ' comment="'+ this.comment + '"' + 285 ' comment="'+ this.comment + '"' +
272 - ' card-title="'+ this.title + '">'; 286 + ' card-title="'+ this.cardTitle + '">';
273 if(this.type == 'link'){ 287 if(this.type == 'link'){
274 card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>'; 288 card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
275 }else{ 289 }else{
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @c1ea242
@@ -226,29 +226,6 @@ Example: @@ -226,29 +226,6 @@ Example:
226 overflow: auto; 226 overflow: auto;
227 } 227 }
228 228
229 - paper-tabs, paper-toolbar  
230 - {  
231 - background-color: var(--paper-blue-500);  
232 - color: #ffffff;  
233 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
234 - }  
235 -  
236 - paper-toolbar paper-tabs  
237 - {  
238 - box-shadow: none;  
239 - --paper-tabs-selection-bar-color : var(--google-gray-500);  
240 - }  
241 -  
242 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
243 - {  
244 - background-color: var(--google-gray-500);  
245 - }  
246 -  
247 - paper-tabs[align-bottom]  
248 - {  
249 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
250 - }  
251 -  
252 #idm_fields_main_container{ 229 #idm_fields_main_container{
253 position: relative; 230 position: relative;
254 height: 60vh; 231 height: 60vh;
@@ -282,6 +259,28 @@ Example: @@ -282,6 +259,28 @@ Example:
282 padding : 30px; 259 padding : 30px;
283 } 260 }
284 261
  262 + paper-tabs, paper-toolbar
  263 + {
  264 + background-color: var(--paper-blue-500);
  265 + color: #ffffff;
  266 + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  267 + --paper-tabs-selection-bar-color: var(--google-gray-500);
  268 + }
  269 +
  270 + paper-toolbar paper-tabs
  271 + {
  272 + box-shadow: none;
  273 + }
  274 +
  275 + paper-tabs[noink][no-bar] paper-tab.iron-selected
  276 + {
  277 + background-color: var(--google-gray-500);
  278 + }
  279 +
  280 + paper-tabs[align-bottom]
  281 + {
  282 + box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
  283 + }
285 </style> 284 </style>
286 285
287 <iron-ajax 286 <iron-ajax
@@ -627,7 +626,7 @@ Example: @@ -627,7 +626,7 @@ Example:
627 */ 626 */
628 paramsFields:{ 627 paramsFields:{
629 type: Object, 628 type: Object,
630 - value: {} 629 + value: undefined
631 }, 630 },
632 /** 631 /**
633 * It's used to store the tab index in the first pass 632 * It's used to store the tab index in the first pass
@@ -868,10 +867,15 @@ Example: @@ -868,10 +867,15 @@ Example:
868 867
869 switch(next_selected_pass){ 868 switch(next_selected_pass){
870 case 0: 869 case 0:
  870 + this.$.data_url.value = "";
  871 + this.$.fields_treeview.setAttribute("json-data", null);
  872 + this.$.fields_treeview.setAttribute("preselected-fields", null);
  873 + this.$.fields_treeview.ready();//chrome
871 return true; 874 return true;
872 case 1: 875 case 1:
873 - if(this.$.data_url.value == undefined){  
874 - this.$.message.text = "You have to select a dataset to access to pass 2."; 876 + var x = this.$.fields_treeview.getAttribute("json-data");
  877 + if(this.$.data_url.value == undefined || this.$.fields_treeview.getAttribute('json-data') == "null" || this.$.fields_treeview.getAttribute('json-data') == null){
  878 + 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.";
875 this.$.message.show(); 879 this.$.message.show();
876 return false; 880 return false;
877 }else{ 881 }else{
@@ -879,16 +883,25 @@ Example: @@ -879,16 +883,25 @@ Example:
879 } 883 }
880 884
881 case 2: 885 case 2:
882 - if(this.selectedFields.length == 0){ 886 + if(this.selectedFields == undefined || this.selectedFields.length == 0){
883 this.$.message.text = "You have to select a set of fields to access to pass 3."; 887 this.$.message.text = "You have to select a set of fields to access to pass 3.";
884 this.$.message.show(); 888 this.$.message.show();
885 return false; 889 return false;
886 }else{ 890 }else{
  891 + this.$.datalet_placeholder_2.innerHTML = "";
  892 + if(this.selectedDatalet != undefined) this.injectDatalet(this.$.datalet_placeholder);
887 return true; 893 return true;
888 } 894 }
889 case 3: 895 case 3:
890 - this.injectDatalet(this.$.datalet_placeholder_2);  
891 - return true; 896 + if(this.paramsFields == undefined){
  897 + 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.";
  898 + this.$.message.show();
  899 + return false;
  900 + }else{
  901 + this.$.datalet_placeholder.innerHTML = "";
  902 + this.injectDatalet(this.$.datalet_placeholder_2);
  903 + return true;
  904 + }
892 } 905 }
893 906
894 }, 907 },
@@ -1018,6 +1031,7 @@ Example: @@ -1018,6 +1031,7 @@ Example:
1018 _textElementChanged : function(e){ 1031 _textElementChanged : function(e){
1019 if(this.selected == 3) { 1032 if(this.selected == 3) {
1020 this.generateDataletPreview(); 1033 this.generateDataletPreview();
  1034 + this.$.datalet_placeholder.innerHTML = "";
1021 this.injectDatalet(this.$.datalet_placeholder_2); 1035 this.injectDatalet(this.$.datalet_placeholder_2);
1022 } 1036 }
1023 }, 1037 },
@@ -1052,7 +1066,7 @@ Example: @@ -1052,7 +1066,7 @@ Example:
1052 fields : this.selectedFields, 1066 fields : this.selectedFields,
1053 datalet : this.selectedDatalet, 1067 datalet : this.selectedDatalet,
1054 comment : this.$.commentArea.value, 1068 comment : this.$.commentArea.value,
1055 - staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data) 1069 + staticData : JSON.stringify(this.$.datalet_placeholder_2.children[1].behavior.data)
1056 } 1070 }
1057 1071
1058 this.fire('data-sevc-controllet.dataletCreated', {data : data}); 1072 this.fire('data-sevc-controllet.dataletCreated', {data : data});
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
  View file @c1ea242
@@ -64,7 +64,7 @@ Example: @@ -64,7 +64,7 @@ Example:
64 top: 8px; 64 top: 8px;
65 } 65 }
66 66
67 - .grid 67 + .card_grid
68 { 68 {
69 width: 100%; 69 width: 100%;
70 z-index: 0; 70 z-index: 0;
@@ -72,31 +72,41 @@ Example: @@ -72,31 +72,41 @@ Example:
72 padding: 5%; 72 padding: 5%;
73 } 73 }
74 74
75 - .grid:after { 75 + .card_grid:after {
76 content: ''; 76 content: '';
77 display: block; 77 display: block;
78 clear: both; 78 clear: both;
79 } 79 }
80 80
81 ::content .card{ 81 ::content .card{
82 - /* ms-transform: scale(0.80);  
83 - -moz-transform: scale(0.80);  
84 - -o-transform: scale(0.80);  
85 - -webkit-transform: scale(0.80);  
86 - transform: scale(0.80);  
87 - -ms-transform-origin: 0 0;  
88 - -moz-transform-origin: 0 0;  
89 - -o-transform-origin: 0 0;  
90 - -webkit-transform-origin: 0 0;  
91 - transform-origin: 0 0;*/  
92 margin: 10px; 82 margin: 10px;
93 float: left; 83 float: left;
94 } 84 }
95 85
  86 + ::content .card_grid .fullscreen{
  87 + display: none;
  88 + }
  89 +
  90 + ::content .card_grid .delete{
  91 + display: none;
  92 + }
  93 +
  94 + ::content .empty{
  95 + position: absolute;
  96 + right: 0;
  97 + left: 27%;
  98 + top: 40%;
  99 + margin-right: auto;
  100 + margin-left: auto;
  101 + font-family: 'Roboto', sans-serif;
  102 + font-weight: 500;
  103 + font-size: large;
  104 + }
  105 +
96 </style> 106 </style>
97 107
98 <div id="container" class="layout vertical"> 108 <div id="container" class="layout vertical">
99 - <div class="grid"> 109 + <div class="card_grid" id="card_grid">
100 <content></content> 110 <content></content>
101 </div> 111 </div>
102 </div> 112 </div>
@@ -130,6 +140,12 @@ Example: @@ -130,6 +140,12 @@ Example:
130 ready : function(){ 140 ready : function(){
131 var _this = this; 141 var _this = this;
132 var cards = document.querySelectorAll('paper-card-controllet'); 142 var cards = document.querySelectorAll('paper-card-controllet');
  143 +
  144 + if(cards.length == 0){
  145 +
  146 + this.$.card_grid.innerHTML += "<div class='empty'>There is nothing to show.</div>";
  147 + }
  148 +
133 for(var i = 0; i < cards.length; i++){ 149 for(var i = 0; i < cards.length; i++){
134 cards[i].addEventListener('click', function(e){ 150 cards[i].addEventListener('click', function(e){
135 _this._cardClick(e) 151 _this._cardClick(e)
controllets/paper-card-controllet/paper-card-controllet.html
  View file @c1ea242
@@ -18,9 +18,6 @@ @@ -18,9 +18,6 @@
18 --paper-fab-background: var(--accent-color); 18 --paper-fab-background: var(--accent-color);
19 font-family: 'Roboto', sans-serif; 19 font-family: 'Roboto', sans-serif;
20 padding-bottom: 30px; 20 padding-bottom: 30px;
21 -  
22 - /*Test*/  
23 -  
24 } 21 }
25 22
26 paper-material { 23 paper-material {
@@ -42,7 +39,8 @@ @@ -42,7 +39,8 @@
42 height: 50px; 39 height: 50px;
43 padding: 0 16px; 40 padding: 0 16px;
44 left: 0; right: 0; 41 left: 0; right: 0;
45 - z-index: 1; 42 + z-index: 1000;
  43 + word-wrap: break-word;
46 } 44 }
47 paper-fab { 45 paper-fab {
48 position: absolute; 46 position: absolute;
@@ -62,9 +60,11 @@ @@ -62,9 +60,11 @@
62 position:relative; 60 position:relative;
63 overflow: auto; 61 overflow: auto;
64 } 62 }
  63 +
65 ::content.buttons { 64 ::content.buttons {
66 margin-top: 8px; 65 margin-top: 8px;
67 } 66 }
  67 +
68 ::content paper-button, ::content paper-icon-button { 68 ::content paper-button, ::content paper-icon-button {
69 font-weight: 500; 69 font-weight: 500;
70 color: var(--accent-color); 70 color: var(--accent-color);
@@ -79,9 +79,10 @@ @@ -79,9 +79,10 @@
79 font-size: 10px; 79 font-size: 10px;
80 color: rgba(0,0,0,0.4); 80 color: rgba(0,0,0,0.4);
81 font-family: 'Roboto', sans-serif; 81 font-family: 'Roboto', sans-serif;
  82 + word-wrap: break-word;
82 } 83 }
83 84
84 - #delete{ 85 + .delete{
85 position: absolute; 86 position: absolute;
86 top: -12px; 87 top: -12px;
87 left: -12px; 88 left: -12px;
@@ -91,12 +92,57 @@ @@ -91,12 +92,57 @@
91 height: 24px; 92 height: 24px;
92 --paper-fab-background:#cccccc; 93 --paper-fab-background:#cccccc;
93 } 94 }
  95 +
  96 + .fullscreen{
  97 + position: absolute;
  98 + top: 36px;
  99 + right: 54px;
  100 + --iron-icon-height: 18px;
  101 + --iron-icon-width: 18px;
  102 + width: 24px;
  103 + height: 24px;
  104 + --paper-fab-background:#cccccc;
  105 + }
  106 +
  107 + #fullscreen_container{
  108 + position: fixed;
  109 + width: 80%;
  110 + /*height: 60%;*/
  111 + right: 0;
  112 + left: 0;
  113 + top: 5%;
  114 + margin-right: auto;
  115 + margin-left: auto;
  116 + z-index: 1100;
  117 + display: none;
  118 + padding: 40px;
  119 + line-height: 20px;
  120 + }
  121 +
  122 + .close_fullscreen{
  123 + position: absolute;
  124 + top: 5px;
  125 + right: 1vw;
  126 + --iron-icon-height: 18px;
  127 + --iron-icon-width: 18px;
  128 + width: 24px;
  129 + height: 24px;
  130 + --paper-fab-background:#cccccc;
  131 + }
  132 +
  133 + #fullscreen_content{
  134 + position: relative;
  135 + height: 100%;
  136 + width: 100%;
  137 + z-index: 1000;
  138 + }
  139 +
94 </style> 140 </style>
95 141
96 142
97 <paper-material animated elevation="{{elevation}}" flex> 143 <paper-material animated elevation="{{elevation}}" flex>
98 144
99 - <paper-fab id="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab> 145 + <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
100 146
101 <div class="vertical layout"> 147 <div class="vertical layout">
102 <div id="content"> 148 <div id="content">
@@ -107,29 +153,32 @@ @@ -107,29 +153,32 @@
107 153
108 <div class="legend horizontal layout center"> 154 <div class="legend horizontal layout center">
109 <span>{{cardTitle}}</span> 155 <span>{{cardTitle}}</span>
  156 +
  157 + <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab>
  158 +
110 <!-- Adding icon based on card type --> 159 <!-- Adding icon based on card type -->
111 160
112 <template is="dom-if" if="{{checkType(cardType, 'text')}}"> 161 <template is="dom-if" if="{{checkType(cardType, 'text')}}">
113 162
114 - <paper-fab mini icon="create" on-click="_handleDetailsClick"></paper-fab> 163 + <paper-fab class="modify" mini icon="create" on-click="_handleDetailsClick"></paper-fab>
115 164
116 </template> 165 </template>
117 166
118 <template is="dom-if" if="{{checkType(cardType, 'image')}}"> 167 <template is="dom-if" if="{{checkType(cardType, 'image')}}">
119 168
120 - <paper-fab mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab> 169 + <paper-fab class="modify" mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab>
121 170
122 </template> 171 </template>
123 172
124 <template is="dom-if" if="{{checkType(cardType, 'datalet')}}"> 173 <template is="dom-if" if="{{checkType(cardType, 'datalet')}}">
125 174
126 - <paper-fab mini icon="assessment" on-click="_handleDetailsClick"></paper-fab> 175 + <paper-fab class="modify" mini icon="assessment" on-click="_handleDetailsClick"></paper-fab>
127 176
128 </template> 177 </template>
129 178
130 <template is="dom-if" if="{{checkType(cardType, 'link')}}"> 179 <template is="dom-if" if="{{checkType(cardType, 'link')}}">
131 180
132 - <paper-fab mini icon="link" on-click="_handleDetailsClick"></paper-fab> 181 + <paper-fab class="modify" mini icon="link" on-click="_handleDetailsClick"></paper-fab>
133 182
134 </template> 183 </template>
135 184
@@ -143,6 +192,11 @@ @@ -143,6 +192,11 @@
143 </template> 192 </template>
144 </div> 193 </div>
145 194
  195 + <paper-material elevation="4" id="fullscreen_container">
  196 + <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>
  197 + <div id="fullscreen_content"></div>
  198 + </paper-material>
  199 +
146 </div> 200 </div>
147 </paper-material> 201 </paper-material>
148 202
@@ -181,7 +235,7 @@ @@ -181,7 +235,7 @@
181 235
182 }, 236 },
183 237
184 - ready: function(){ 238 + attached: function(){
185 if(this.cardType == "text"){ 239 if(this.cardType == "text"){
186 this.$.content.style.backgroundColor = "#ffc"; 240 this.$.content.style.backgroundColor = "#ffc";
187 } 241 }
@@ -209,8 +263,35 @@ @@ -209,8 +263,35 @@
209 }, 263 },
210 264
211 _handleDeleteClick: function(e){ 265 _handleDeleteClick: function(e){
212 - this.fire('paper-card-controllet_delete-clicked', {data : this});  
213 - } 266 + this.fire('paper-card-controllet_delete-clicked', {data : this});
  267 + },
  268 +
  269 + _handleFullscreenClick: function(e){
  270 +
  271 + switch(this.cardType){
  272 + case 'text':
  273 + this.$.fullscreen_content.style.backgroundColor = "#ffc";
  274 + break;
  275 + case 'link':
  276 + window.open(this.getAttribute('card-link'),'_blank');
  277 + return;
  278 + }
  279 +
  280 + var html = this.$.content.innerHTML;
  281 + this.$.content.innerHTML = "";
  282 + this.$.fullscreen_content.innerHTML = html;
  283 +
  284 + this.$.fullscreen_container.style.display = "inline-block";
  285 + },
  286 +
  287 + _handleCloseFullscreenClick: function(e){
  288 +
  289 + var html = this.$.fullscreen_content.innerHTML;
  290 + this.$.fullscreen_content.innerHTML = "";
  291 + this.$.content.innerHTML = html;
  292 +
  293 + this.$.fullscreen_container.style.display = "none";
  294 + }
214 }) 295 })
215 </script> 296 </script>
216 297
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
  View file @c1ea242
@@ -82,11 +82,13 @@ var AjaxJsonJsonPathBehavior = { @@ -82,11 +82,13 @@ var AjaxJsonJsonPathBehavior = {
82 */ 82 */
83 isFieldArray : function(field){ 83 isFieldArray : function(field){
84 if(field.length == 0) return false; 84 if(field.length == 0) return false;
  85 +
85 var obj = this.properties.json_results.value[field[0]]; 86 var obj = this.properties.json_results.value[field[0]];
86 for(var i=1; i < field.length; i++){ 87 for(var i=1; i < field.length; i++){
87 obj = (obj.constructor == Array) ? obj[0][field[i]] : obj[field[i]]; 88 obj = (obj.constructor == Array) ? obj[0][field[i]] : obj[field[i]];
88 } 89 }
89 90
  91 + if(obj == null) return false;
90 return (obj.constructor === Array && obj[0].constructor == Object) ? true : false; 92 return (obj.constructor === Array && obj[0].constructor == Object) ? true : false;
91 }, 93 },
92 94
datalets/base-datalet/base-datalet.html
  View file @c1ea242
@@ -104,7 +104,9 @@ Example : @@ -104,7 +104,9 @@ Example :
104 * 104 *
105 */ 105 */
106 ready: function(){ 106 ready: function(){
107 - this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2]; 107 + if(this.dataUrl != undefined){
  108 + this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
  109 + }
108 }, 110 },
109 /** 111 /**
110 * Set the domain url to show in the footer 112 * Set the domain url to show in the footer
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html 0 → 100644
  View file @c1ea242
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
  33 +
  34 +<!--
  35 +
  36 +`datasetexplorer-datalet` is a treemap datalet based on d3js treemap project http://bl.ocks.org/mbostock/4063582
  37 +A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value.
  38 +This is an enhanced version designed to help users to navigate associated dataset providers.
  39 +
  40 +At this moment it requires server-side elaboration, but later version will hopefully be completely client-side.
  41 +
  42 +Example:
  43 +
  44 + <datasetexplorer-datalet
  45 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  46 + fields='["field1","field2"]'>
  47 + </datasetexplorer-datalet>
  48 +
  49 +@element datasetexplorer-datalet
  50 +@status v0.1
  51 +@demo demo/index.html
  52 +@group datalets
  53 +-->
  54 +
  55 +<dom-module id="datasetexplorer-datalet">
  56 + <template>
  57 + <style is="custom-style">
  58 +
  59 + :host ::content h6 {
  60 + color: red;
  61 + }
  62 +
  63 + :host ::content #treemap_placeholder {
  64 + width: 100%;
  65 + height: 70%;
  66 + min-height: 500px;
  67 + background: #ddd;
  68 + }
  69 +
  70 + :host ::content text {
  71 + pointer-events: none;
  72 + }
  73 +
  74 + :host ::content .grandparent text {
  75 + font-weight: bold;
  76 + }
  77 +
  78 + :host ::content rect {
  79 + fill: none;
  80 + stroke: #fff;
  81 + }
  82 +
  83 + :host ::content rect.parent,
  84 + .grandparent rect {
  85 + stroke-width: 2px;
  86 + }
  87 +
  88 + :host ::content .grandparent rect {
  89 + fill: orange;
  90 + }
  91 +
  92 + :host ::content .grandparent:hover rect {
  93 + fill: #ee9700;
  94 + }
  95 +
  96 + :host ::content .children rect.parent,
  97 + .grandparent rect {
  98 + cursor: pointer;
  99 + }
  100 +
  101 + :host ::content .children rect.parent {
  102 + fill: #bbb;
  103 + -fill-opacity: .5;
  104 + fill-opacity: 1;
  105 + }
  106 +
  107 + :host ::content .children:hover rect.child {
  108 + fill: #bbb;
  109 + }
  110 + </style>
  111 + <div id="treemap_placeholder"></div>
  112 + <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
  113 + </template>
  114 +
  115 + <script src="http://deep.routetopa.eu/COMPONENTS/datalets/shared_js/d3.js"></script>
  116 + <script src="js/buildtreemap.js"></script>
  117 + <script>
  118 +
  119 + var DatasetexplorerBehavior = {
  120 +
  121 + map : {
  122 + name : "",
  123 + children : []
  124 + },
  125 +
  126 + transformData: function(e)
  127 + {
  128 + var treemapData = [];
  129 + DatasetexplorerBehavior.map.name = this._component.name;
  130 +
  131 + if(this.data.length > 1) {
  132 + for (i = 0; i < this.data.length; i++) {
  133 + var propName = this.data[i].name;
  134 +
  135 + for (var j = 0; j < this.data[i].data.length; j++) {
  136 + if (i == 0) treemapData[j] = {};
  137 + currObj = {};
  138 + currObj[propName] = this.data[i].data[j];
  139 + jQuery.extend(treemapData[j], currObj);
  140 + }
  141 + }
  142 + }else{
  143 + treemapData = this.data[0].data;
  144 + }
  145 +
  146 + this.map.children = [];
  147 +
  148 + for(var i = 0; i < treemapData.length; i++){
  149 + this.checkAggragationField(treemapData[i], this._component.fields.length - 1, this._component.fields.length - 1);
  150 + }
  151 +
  152 + var json = JSON.stringify(this.map);
  153 +
  154 + },
  155 +
  156 + findChild: function(child, category){
  157 + var children = child.children;
  158 + for (var i=0; i<children.length; i++) {
  159 + if (children[i].name == category)
  160 + return children[i];
  161 + }
  162 + var nchild = {name : category , children : []};
  163 + children.push(nchild);
  164 + return nchild;
  165 + },
  166 +
  167 + checkAggragationField: function(object, levels, value_index){
  168 + var curchild = this.map;
  169 + var keys = Object.keys(object);
  170 + for(var level= 0; level < levels; level++){
  171 +
  172 + var child = this.findChild(curchild, object[keys[level]]);
  173 + curchild = child;
  174 + }
  175 +
  176 + if (curchild.value === undefined)
  177 + curchild.value = 0;
  178 +
  179 + var value = curchild.value + parseFloat(object[keys[value_index]]);
  180 + curchild.children = null;
  181 + curchild.value = value;
  182 + },
  183 +
  184 + presentData: function(){
  185 + build(this.map, "treemap_placeholder");
  186 + }
  187 + };
  188 +
  189 +
  190 + Polymer({
  191 + is : 'datasetexplorer-datalet' ,
  192 +
  193 + properties: {
  194 + /**
  195 + * It's the name for treemap
  196 + *
  197 + * @attribute name
  198 + * @type String
  199 + * @default ''
  200 + */
  201 + name: {
  202 + type: String,
  203 + value: ""
  204 + },
  205 + /**
  206 + * It's the component behavior
  207 + *
  208 + * @attribute behavior
  209 + * @type Object
  210 + * @default {}
  211 + */
  212 + behavior : {
  213 + type : Object,
  214 + value : {}
  215 + }
  216 + },
  217 +
  218 + ready: function(){
  219 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatasetexplorerBehavior);
  220 + this.async(function(){this.behavior.init(this)},1000);
  221 + }
  222 +
  223 + });
  224 + </script>
  225 +</dom-module>
0 \ No newline at end of file 226 \ No newline at end of file
datalets/datasetexplorer-datalet/datasetexplorer-datalet.png 0 → 100644
View file @c1ea242

1.58 KB
datalets/datasetexplorer-datalet/demo/index.html 0 → 100644
  View file @c1ea242
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +
  7 + <script>
  8 + </script>
  9 +
  10 +</head>
  11 +<body>
  12 +
  13 +<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
  14 +<link rel="import" href="../datasetexplorer-datalet.html" />
  15 +
  16 +<datasetexplorer-datalet
  17 + data-url="http://spod.routetopa.eu/openwall/api/datasetTree"
  18 + fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'
  19 +></datasetexplorer-datalet>
  20 +
  21 +
  22 +</body>
  23 +</html>
0 \ No newline at end of file 24 \ No newline at end of file
datalets/datasetexplorer-datalet/docs.html 0 → 100644
  View file @c1ea242
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
  5 + <meta charset="UTF-8">
  6 +</head>
  7 +<body>
  8 +
  9 +<iron-component-page src="datasetexplorer-datalet.html"></iron-component-page>
  10 +
  11 +</body>
  12 +</html>
0 \ No newline at end of file 13 \ No newline at end of file
datalets/datasetexplorer-datalet/js/buildtreemap.js 0 → 100644
  View file @c1ea242
  1 +/**
  2 + * Created by Utente on 17/07/2015.
  3 + */
  4 +
  5 +function build(root, place_holder) {
  6 +
  7 + var plwidth = $("#" + place_holder).width(),
  8 + plheight = $("#" + place_holder).height();
  9 +
  10 + var margin = {top: 20, right: 0, bottom: 0, left: 0},
  11 + //width = 960,
  12 + //height = 500 - margin.top - margin.bottom,
  13 + width = plwidth,
  14 + height = plheight - margin.top - margin.bottom,
  15 + formatNumber = d3.format(",d"),
  16 + transitioning;
  17 +
  18 + var x = d3.scale.linear()
  19 + .domain([0, width])
  20 + .range([0, width]);
  21 +
  22 + var y = d3.scale.linear()
  23 + .domain([0, height])
  24 + .range([0, height]);
  25 +
  26 + var treemap = d3.layout.treemap()
  27 + .children(function(d, depth) { return depth ? null : d._children; })
  28 + .sort(function(a, b) { return a.value - b.value; })
  29 + .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
  30 + .round(false);
  31 +
  32 + var svg = d3.select("#" + place_holder).append("svg")
  33 + .attr("width", width + margin.left + margin.right)
  34 + .attr("height", height + margin.bottom + margin.top)
  35 + .style("margin-left", -margin.left + "px")
  36 + .style("margin.right", -margin.right + "px")
  37 + .append("g")
  38 + .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  39 + .style("shape-rendering", "crispEdges");
  40 +
  41 + var grandparent = svg.append("g")
  42 + .attr("class", "grandparent");
  43 +
  44 + var dataletContainer = null;
  45 +
  46 + grandparent.append("rect")
  47 + .attr("y", -margin.top)
  48 + .attr("width", width)
  49 + .attr("height", margin.top);
  50 +
  51 + grandparent.append("text")
  52 + .attr("x", 6)
  53 + .attr("y", 6 - margin.top)
  54 + .attr("dy", ".75em");
  55 +
  56 + //d3.json
  57 + initialize(root);
  58 + accumulate(root);
  59 + layout(root);
  60 + display(root);
  61 +
  62 + function initialize(root) {
  63 + root.x = root.y = 0;
  64 + root.dx = width;
  65 + root.dy = height;
  66 + root.depth = 0;
  67 + }
  68 +
  69 + // Aggregate the values for internal nodes. This is normally done by the
  70 + // treemap layout, but not here because of our custom implementation.
  71 + // We also take a snapshot of the original children (_children) to avoid
  72 + // the children being overwritten when when layout is computed.
  73 + function accumulate(d) {
  74 + return (d._children = d.children)
  75 + ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 5)
  76 + : d.value;
  77 + }
  78 +
  79 + // Compute the treemap layout recursively such that each group of siblings
  80 + // uses the same size (1×1) rather than the dimensions of the parent cell.
  81 + // This optimizes the layout for the current zoom state. Note that a wrapper
  82 + // object is created for the parent node for each group of siblings so that
  83 + // the parent’s dimensions are not discarded as we recurse. Since each group
  84 + // of sibling was laid out in 1×1, we must rescale to fit using absolute
  85 + // coordinates. This lets us use a viewport to zoom.
  86 + function layout(d) {
  87 + if (d._children) {
  88 + treemap.nodes({_children: d._children});
  89 + var i = 0;
  90 + d._children.forEach(function(c) {
  91 + c.x = d.x + c.x * d.dx;
  92 + c.y = d.y + c.y * d.dy;
  93 + c.dx *= d.dx;
  94 + c.dy *= d.dy;
  95 + c.parent = d;
  96 + c.depth = d.depth + 1;
  97 + c.color = c.depth < 2
  98 + ? d3.scale.ordinal().domain(d3.range(d._children.length)).range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"])(i++)
  99 + //? interpolate(0, d._children.length, i++)
  100 + : d.color; //d3.rgb(d.color).brighter(.5);
  101 + layout(c);
  102 + });
  103 + }
  104 + }
  105 +
  106 + function display(d) {0
  107 + grandparent
  108 + .datum(d.parent)
  109 + .on("click", transition)
  110 + .select("text")
  111 + .text(name(d));
  112 +
  113 + var g1 = svg.insert("g", ".grandparent")
  114 + .datum(d)
  115 + .attr("class", "depth");
  116 +
  117 + var g = g1.selectAll("g")
  118 + .data(d._children)
  119 + .enter().append("g");
  120 +
  121 + g.filter(function(d) { return d._children; })
  122 + .classed("children", true)
  123 + .on("click", transition);
  124 +
  125 + g.selectAll(".child")
  126 + .data(function(d) { return d._children || [d]; })
  127 + .enter().append("rect")
  128 + .attr("class", "child")
  129 + .call(rect);
  130 +
  131 + g.append("rect")
  132 + .attr("class", "parent")
  133 + .call(rect)
  134 + .append("title")
  135 + .text(function(d) { return d.name; /*formatNumber(d.value);*/ });
  136 +
  137 + g.append("text")
  138 + .attr("dy", ".75em")
  139 + .text(function(d) { return (d._children) ? d.name : ''; })
  140 + //.style("font-size", function(d) { return Math.min(16, (d.dx - 8) / this.getComputedTextLength() * 16) + "px"; })
  141 + .call(text)
  142 + ;
  143 +
  144 + function transition(d) {
  145 + if (transitioning || !d) return;
  146 + transitioning = true;
  147 +
  148 + if (dataletContainer) {
  149 + //svg.select("foreignObject")
  150 + //svg.remove(dataletContainer);
  151 + dataletContainer.remove();
  152 + dataletContainer = null;
  153 + }
  154 +
  155 + var g2 = display(d),
  156 + t1 = g1.transition().duration(750),
  157 + t2 = g2.transition().duration(750);
  158 +
  159 + // Update the domain only after entering new elements.
  160 + x.domain([d.x, d.x + d.dx]);
  161 + y.domain([d.y, d.y + d.dy]);
  162 +
  163 + // Enable anti-aliasing during the transition.
  164 + svg.style("shape-rendering", null);
  165 +
  166 + // Draw child nodes on top of parent nodes.
  167 + svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
  168 +
  169 + // Fade-in entering text.
  170 + g2.selectAll("text").style("fill-opacity", 0);
  171 +
  172 + // Transition to the new view.
  173 + t1.selectAll("text").call(text).style("fill-opacity", 0);
  174 + t2.selectAll("text").call(text).style("fill-opacity", 1);
  175 + t1.selectAll("rect").call(rect);
  176 + t2.selectAll("rect").call(rect);
  177 +
  178 + // Remove the old node when the transition is finished.
  179 + t1.remove().each("end", function() {
  180 + svg.style("shape-rendering", "crispEdges");
  181 + transitioning = false;
  182 + });
  183 + }
  184 +
  185 + if (!d._children[0]._children) {
  186 + var dataurl = d._children[0].name;
  187 + var pageurl = dataurl.replace(/\/download\/.*/, '');
  188 + dataletContainer = svg
  189 + .append("foreignObject")
  190 + .attr("width", 480)
  191 + .attr("height", 500)
  192 + .append("xhtml:body")
  193 + .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>');
  194 +
  195 + }
  196 +
  197 + return g;
  198 + }
  199 +
  200 + function text(text) {
  201 + text.attr("x", function(d) { return x(d.x) + 6; })
  202 + .attr("y", function(d) { return y(d.y) + 6; })
  203 + ;
  204 + }
  205 +
  206 + function rect(rect) {
  207 + rect.attr("x", function(d) { return x(d.x); })
  208 + .attr("y", function(d) { return y(d.y); })
  209 + .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
  210 + .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
  211 + .style("fill", function(d, i) { return d.color; })
  212 + ;
  213 + }
  214 +
  215 + function name(d) {
  216 + return d.parent
  217 + ? name(d.parent) + "." + d.name
  218 + : d.name;
  219 + }
  220 +};
0 \ No newline at end of file 221 \ No newline at end of file
datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.png
View file @c1ea242

50.5 KB | W: | H:

26.4 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/donutpie3dchart-datalet/donutpie3dchart-datalets.png deleted
View file @94601c1

50.5 KB
datalets/donutpie3dchart-datalet/info.xml 0 → 100755
  View file @c1ea242
  1 +<component>
  2 + <name>donutpie3dchart-datalet</name>
  3 + <attributes>
  4 + <attribute>
  5 + <name>data-url</name>
  6 + </attribute>
  7 + <attribute>
  8 + <name>fields</name>
  9 + </attribute>
  10 + </attributes>
  11 + <idm>
  12 + <inputs>
  13 + <input>
  14 + <name>Series</name>
  15 + <description>The chart series. Its values will be put on slice of each series.</description>
  16 + <scale>nominal</scale>
  17 + <role>domain</role>
  18 + <selection>11</selection>
  19 + </input>
  20 + <input>
  21 + <name>Size </name>
  22 + <description>The size for each series to create a concentric rings</description>
  23 + <scale>nominal</scale>
  24 + <role>domain</role>
  25 + <selection>11</selection>
  26 + </input>
  27 + <layouts>
  28 + <input>
  29 + <name>title</name>
  30 + <description>The label for the title of the chart</description>
  31 + </input>
  32 + </layouts>
  33 + </inputs>
  34 + </idm>
  35 +</component>
0 \ No newline at end of file 36 \ No newline at end of file
datalets/piechart-datalet/demo/index.html 0 → 100755
  View file @c1ea242
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +
  7 + <script>
  8 + </script>
  9 +
  10 +</head>
  11 +<body>
  12 +
  13 +<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
  14 +<link rel="import" href="../piechart-datalet.html" />
  15 +<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"
  16 + fields='["facet_groups,facets,facets,path","facet_groups,facets,facets,count"]'></piechart-datalet>
  17 +</body>
  18 +</html>
  19 +
datalets/piechart-datalet/docs.html 0 → 100755
  View file @c1ea242
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
  5 + <meta charset="UTF-8">
  6 +</head>
  7 +<body>
  8 +
  9 +<iron-component-page src="piechart-datalet.html"></iron-component-page>
  10 +
  11 +</body>
  12 +</html>
datalets/piechart-datalet/piechart-datalet.html 0 → 100755
  View file @c1ea242
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  32 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  33 +
  34 +
  35 +<!--
  36 +`piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/>
  37 +
  38 +Example:
  39 +
  40 + <piechart-datalet>
  41 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  42 + fields='["field1","field2"]'>
  43 + </piechart-datalet>
  44 +
  45 +@element piechart-datalet
  46 +@status v0.1
  47 +@demo demo/index.html
  48 +@group datalets
  49 +-->
  50 +<dom-module id="piechart-datalet">
  51 + <template>
  52 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
  53 + </template>
  54 + <script>
  55 +
  56 + var PiechartBehavior = {
  57 + /**
  58 + * Build Highchart object
  59 + *
  60 + * @method presentData
  61 + */
  62 + presentData: function(){
  63 +
  64 + var PieSeries = [{"name": this.data[1].name, "data":[]}];
  65 +
  66 + for(var i=0; i<this.data[0].data.length; i++)
  67 + {
  68 + var PieArr = [this.data[0].data[i], this.data[1].data[i]];
  69 + PieSeries[0].data.push(PieArr);
  70 + }
  71 +
  72 + //Build Highchart element
  73 + $(this._component.$.charts.$.container).highcharts({
  74 + chart: {
  75 + plotBackgroundColor: null,
  76 + plotBorderWidth: null,
  77 + plotShadow: false,
  78 + type: 'pie'
  79 + },
  80 + title: {
  81 + text: "" + this._component.title
  82 + },
  83 + plotOptions: {
  84 + pie: {
  85 + allowPointSelect: true,
  86 + cursor: 'pointer',
  87 + dataLabels: {
  88 + enabled: true,
  89 + formatter: function() {
  90 + if (this.point.name.length > 10) {
  91 + return this.point.name.substr(0, 10) + "...";
  92 + } else {
  93 + return this.point.name;
  94 + }
  95 + }
  96 + },
  97 + showInLegend: true
  98 + }
  99 + },
  100 + //hide link HighChart
  101 + credits: {
  102 + enabled: false
  103 + },
  104 + series: PieSeries
  105 + });
  106 + }
  107 + };
  108 +
  109 +
  110 + PiechartDatalet = Polymer({
  111 + is: 'piechart-datalet',
  112 +
  113 + properties: {
  114 + /**
  115 + * It's the component behavior
  116 + *
  117 + * @attribute behavior
  118 + * @type Object
  119 + * @default {}
  120 + */
  121 + behavior : {
  122 + type : Object,
  123 + value : {}
  124 + },
  125 + /**
  126 + * It's the title of the chart
  127 + *
  128 + * @attribute title
  129 + * @type Strig
  130 + * @default ''
  131 + */
  132 + title: {
  133 + type: String,
  134 + value: ""
  135 + }
  136 + },
  137 +
  138 + /**
  139 + * 'ready' callback extend the PiechartComponentBehavior with HighchartsComponentBehavior and PiechartBehavior
  140 + * and run the Datalet workcycle.
  141 + *
  142 + * @method ready
  143 + */
  144 + ready: function(){
  145 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, PiechartBehavior);
  146 + this.async(function(){this.behavior.init(this)},1000);
  147 + }
  148 + });
  149 + </script>
  150 +</dom-module>
0 \ No newline at end of file 151 \ No newline at end of file
datalets/piechart-datalet/piechart-datalet.png 0 → 100755
View file @c1ea242

7.47 KB
datalets/piechart-datalet/piechart-datalet.xml 0 → 100755
  View file @c1ea242
  1 +<component>
  2 +<name>piechart-datalet</name>
  3 +<attributes>
  4 +<attribute>
  5 + <name>data-url</name>
  6 +</attribute>
  7 +<attribute>
  8 + <name>fields</name>
  9 +</attribute>
  10 +</attributes>
  11 +<idm>
  12 +<inputs>
  13 + <input>
  14 + <name>Series</name>
  15 + <description>The chart series. Its values will be put on slice of each series.</description>
  16 + <scale>nominal</scale>
  17 + <role>domain</role>
  18 + <selection>11</selection>
  19 + </input>
  20 + <input>
  21 + <name>Size </name>
  22 + <description>The size for each series to create a concentric rings</description>
  23 + <scale>nominal</scale>
  24 + <role>domain</role>
  25 + <selection>11</selection>
  26 + </input>
  27 + <layouts>
  28 + <input>
  29 + <name>title</name>
  30 + <description>The label for the title of the chart</description>
  31 + </input>
  32 + </layouts>
  33 +</inputs>
  34 +</idm>
  35 +</component>
0 \ No newline at end of file 36 \ No newline at end of file
datalets/treemap-datalet/js/buildtreemap.js
  View file @c1ea242
@@ -3,12 +3,10 @@ @@ -3,12 +3,10 @@
3 */ 3 */
4 4
5 function build(root, place_holder) { 5 function build(root, place_holder) {
6 - var plwidth = $("#" + place_holder).width(),  
7 - plheight = $("#" + place_holder).height(); 6 + var plwidth = $(place_holder).width();
  7 + var plheight = $(place_holder).height();
8 8
9 var margin = {top: 20, right: 0, bottom: 0, left: 0}, 9 var margin = {top: 20, right: 0, bottom: 0, left: 0},
10 - //width = 960,  
11 - //height = 500 - margin.top - margin.bottom,  
12 width = plwidth, 10 width = plwidth,
13 height = plheight - margin.top - margin.bottom, 11 height = plheight - margin.top - margin.bottom,
14 formatNumber = d3.format(",d"), 12 formatNumber = d3.format(",d"),
@@ -28,7 +26,7 @@ function build(root, place_holder) { @@ -28,7 +26,7 @@ function build(root, place_holder) {
28 .ratio(height / width * 0.5 * (1 + Math.sqrt(5))) 26 .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
29 .round(false); 27 .round(false);
30 28
31 - var svg = d3.select("#" + place_holder).append("svg") 29 + var svg = d3.select(place_holder).append("svg")
32 .attr("width", width + margin.left + margin.right) 30 .attr("width", width + margin.left + margin.right)
33 .attr("height", height + margin.bottom + margin.top) 31 .attr("height", height + margin.bottom + margin.top)
34 .style("margin-left", -margin.left + "px") 32 .style("margin-left", -margin.left + "px")
datalets/treemap-datalet/treemap-datalet.html
  View file @c1ea242
@@ -142,7 +142,7 @@ Example: @@ -142,7 +142,7 @@ Example:
142 this.map.children = []; 142 this.map.children = [];
143 143
144 for(var i = 0; i < treemapData.length; i++){ 144 for(var i = 0; i < treemapData.length; i++){
145 - this.checkAggragationField(treemapData[i], this._component.fields.length , this._component.fields.length - 1); 145 + this.checkAggragationField(treemapData[i], this.data.length , this.data.length - 1);
146 } 146 }
147 147
148 var json = JSON.stringify(this.map); 148 var json = JSON.stringify(this.map);
@@ -178,7 +178,8 @@ Example: @@ -178,7 +178,8 @@ Example:
178 }, 178 },
179 179
180 presentData: function(){ 180 presentData: function(){
181 - build(this.map, "treemap_placeholder"); 181 + //build(this.map, "treemap_placeholder");
  182 + build(this.map, this._component.$.treemap_placeholder);
182 } 183 }
183 }; 184 };
184 185