WebCompDev / COMPONENTS

Commit 4143bce6bd05b955ea47ea91bb988bedab30fc42

Authored by lucvic
2 parents 8f4623a8 348eaf89

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

Inline Side-by-side
Showing 20 changed files with 992 additions and 1066 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @4143bce
@@ -16,7 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -16,7 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
16 16
17 :host { 17 :host {
18 display: block; 18 display: block;
19 - /*background: #000;*/ 19 + background: #FFFFFF;
  20 + /*margin-top: 16px;;*/
20 } 21 }
21 22
22 /* clearfix */ 23 /* clearfix */
@@ -28,7 +29,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -28,7 +29,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 } 29 }
29 30
30 /* ---- grid-item ---- */ 31 /* ---- grid-item ---- */
31 - ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;} 32 + ::content .grid-item {
  33 + float: left;
  34 + box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
  35 + border-top: 4px solid white;
  36 + border-left: 4px solid white;
  37 + cursor: pointer;
  38 + }
32 ::content .grid-sizer {width: 200px;} 39 ::content .grid-sizer {width: 200px;}
33 ::content .grid-item-w20 {width: 200px;} 40 ::content .grid-item-w20 {width: 200px;}
34 ::content .grid-item-w40 {width: 400px;} 41 ::content .grid-item-w40 {width: 400px;}
@@ -42,44 +49,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -42,44 +49,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
42 ::content .grid-item-c4 {background-color: #2C29FF;} 49 ::content .grid-item-c4 {background-color: #2C29FF;}
43 /* ---- grid-item ---- */ 50 /* ---- grid-item ---- */
44 51
45 - ::content .room-body {color:#FFFFFF;} 52 + ::content .room-body
  53 + {
  54 + height: calc(100% - 40px);/* 100% =*200/400 -4 border*/
  55 + width: calc(100% - 16px);
  56 + color:#FFFFFF;
  57 + padding: 8px;
  58 + word-wrap: break-word;
  59 + overflow: hidden;
  60 + text-overflow: ellipsis;
  61 + }
46 ::content .room-subject 62 ::content .room-subject
47 { 63 {
48 position: absolute; 64 position: absolute;
49 - width: 100%;  
50 - height: 30px;  
51 - bottom: 30px;  
52 - background-color: rgba(0,0,0,0.6); 65 + width: calc(100% - 16px);
  66 + height: 32px;
  67 + bottom: 32px;
  68 + background-color: rgba(0,0,0,0.8);
  69 + padding: 16px 0px 0px 16px;
53 color: #FFFFFF; 70 color: #FFFFFF;
54 - }  
55 - ::content .room-subject span  
56 - {  
57 - top: 5px;  
58 - left: 5px;  
59 - position: relative;  
60 - text-overflow: ellipsis; 71 + font-weight: 700;
  72 + white-space: nowrap;
  73 + word-wrap: break-word;
61 overflow: hidden; 74 overflow: hidden;
62 - white-space:nowrap;  
63 - text-overflow:ellipsis;  
64 - display:inline-block;  
65 - }  
66 - ::content .room-body span  
67 - {  
68 - top: 5px;  
69 - left: 5px;  
70 - position: relative;  
71 text-overflow: ellipsis; 75 text-overflow: ellipsis;
72 - overflow: hidden;  
73 - text-overflow:ellipsis;  
74 - display:inline-block;  
75 } 76 }
  77 +
76 ::content .room-timestamp 78 ::content .room-timestamp
77 { 79 {
78 position: absolute; 80 position: absolute;
79 - right:3px;  
80 - bottom: 3px;  
81 - font-size: 8px;  
82 - color: #CCCCCC; 81 + bottom: 0px;
  82 + right:0px;
  83 + color: #FFFFFF;
  84 + padding: 8px;
  85 + font-size: small;
  86 + line-height: 16px;
83 } 87 }
84 </style> 88 </style>
85 89
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @4143bce
1 -/********************************************************************************************************************************  
2 <!--<script src="../shared_js/jquery-1.11.2.min.js"></script>--> 1 <!--<script src="../shared_js/jquery-1.11.2.min.js"></script>-->
3 <!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>--> 2 <!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
4 <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> 3 <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
5 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> 4 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
6 5
7 -<script defer src="../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>  
8 -/******************************************************************************************************************************** 6 +<!--<script defer src="../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>-->
  7 +<script src="../../locales/lnHashMap.js"></script>
  8 +
9 9
10 <link rel="import" href="../../bower_components/polymer/polymer.html"> 10 <link rel="import" href="../../bower_components/polymer/polymer.html">
11 11
@@ -106,6 +106,11 @@ @@ -106,6 +106,11 @@
106 dataletPreset : { 106 dataletPreset : {
107 type : Object, 107 type : Object,
108 value : [] 108 value : []
  109 + },
  110 +
  111 + localization : {
  112 + type : String,
  113 + value : "en"
109 } 114 }
110 115
111 }, 116 },
@@ -117,25 +122,22 @@ @@ -117,25 +122,22 @@
117 // console.log(this.selectedDatalet); 122 // console.log(this.selectedDatalet);
118 this.dataUrl = this.dataletPreset["data-url"]; 123 this.dataUrl = this.dataletPreset["data-url"];
119 } 124 }
120 - 125 + ln["localization"] = this.localization;
121 }, 126 },
122 127
123 _updateSlider : function(e){ 128 _updateSlider : function(e){
124 switch (e.detail.selected) { 129 switch (e.detail.selected) {
125 case 0: 130 case 0:
126 - document.l10n.formatValues('slide1Title', 'slide1Subtitle').then(A => slider.setTitle(A[0], A[1]));  
127 -// slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset."); 131 + slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);
128 slider.chevronLeft("invisible"); 132 slider.chevronLeft("invisible");
129 slider.chevronRight(false); 133 slider.chevronRight(false);
130 if(slider.getPrevSelected() == 1) 134 if(slider.getPrevSelected() == 1)
131 slider.chevronRight(true); 135 slider.chevronRight(true);
132 break; 136 break;
133 case 1: 137 case 1:
134 - document.l10n.formatValues('slide2Title', 'slide2Subtitle').then(A => slider.setTitle(A[0], A[1]));  
135 -// slider.setTitle("SELECT DATA", "Select the fields from tree-view. The multi-table will show the values related to the selected fields."); 138 + slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);
136 if(this.modify){ 139 if(this.modify){
137 slider.chevronLeft("invisible"); 140 slider.chevronLeft("invisible");
138 -// slider.setAvatar("2");  
139 } 141 }
140 else{ 142 else{
141 slider.chevronLeft(true); 143 slider.chevronLeft(true);
@@ -145,8 +147,7 @@ @@ -145,8 +147,7 @@
145 this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}}); 147 this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}});
146 break; 148 break;
147 case 2: 149 case 2:
148 - document.l10n.formatValues('slide3Title', 'slide3Subtitle').then(A => slider.setTitle(A[0], A[1]));  
149 -// slider.setTitle("SELECT VISUALIZATION", "Select a visualization, fill out inputs and labels (optional)."); 150 + slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
150 slider.chevronLeft(true); 151 slider.chevronLeft(true);
151 slider.chevronRight("invisible"); 152 slider.chevronRight("invisible");
152 this.$.datalet_selection.setFields(tree_view_multi_table.getFlatFields()); 153 this.$.datalet_selection.setFields(tree_view_multi_table.getFlatFields());
controllets/data-sevc-controllet/demo/index.html
  View file @4143bce
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 <body> 21 <body>
22 22
23 <!--<span data-l10n-id="name"></span>--> 23 <!--<span data-l10n-id="name"></span>-->
24 - <data-sevc-controllet id="dsc" deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet> 24 + <data-sevc-controllet localization="it" id="dsc" deep-url="http://172.16.15.77/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.77/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
25 25
26 <script> 26 <script>
27 27
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @4143bce
@@ -203,7 +203,7 @@ @@ -203,7 +203,7 @@
203 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet> 203 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
204 204
205 <paper-material id="datalet_selection_inputs" elevation="5"> 205 <paper-material id="datalet_selection_inputs" elevation="5">
206 - <div class="input_header"><span data-l10n-id="inputs"></span></div> 206 + <div class="input_header"><span id="inputs"></span></div>
207 <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index"> 207 <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
208 <div class="inputs"> 208 <div class="inputs">
209 <paper-dropdown-menu id={{ddl_index}} label={{item.name}}> 209 <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
@@ -222,7 +222,7 @@ @@ -222,7 +222,7 @@
222 </paper-material> 222 </paper-material>
223 223
224 <paper-material id="datalet_selection_labels" elevation="5"> 224 <paper-material id="datalet_selection_labels" elevation="5">
225 - <div class="input_header"><span data-l10n-id="baseInfo"></span></div> 225 + <div class="input_header"><span id="baseInfo"></span></div>
226 226
227 <div class="inputs"> 227 <div class="inputs">
228 <paper-input maxlength="32" label="title" class="base_input"></paper-input> 228 <paper-input maxlength="32" label="title" class="base_input"></paper-input>
@@ -232,7 +232,7 @@ @@ -232,7 +232,7 @@
232 <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea> 232 <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea>
233 </div> 233 </div>
234 234
235 - <div class="input_header"><span data-l10n-id="layouts"></span></div> 235 + <div class="input_header"><span id="layouts"></span></div>
236 236
237 <template is="dom-repeat" items="{{labels}}" index-as="index"> 237 <template is="dom-repeat" items="{{labels}}" index-as="index">
238 <div class="inputs"> 238 <div class="inputs">
@@ -255,12 +255,12 @@ @@ -255,12 +255,12 @@
255 <!--</template>--> 255 <!--</template>-->
256 256
257 <paper-material id="datalet_selection_datalet" elevation="5"> 257 <paper-material id="datalet_selection_datalet" elevation="5">
258 - <div class="input_header"><span data-l10n-id="dataletPreview"></span></div> 258 + <div class="input_header"><span id="dataletPreview"></span></div>
259 <div id="datalet_selection_datalet_placeholder"></div> 259 <div id="datalet_selection_datalet_placeholder"></div>
260 260
261 </paper-material> 261 </paper-material>
262 262
263 - <paper-button id="add_button" disabled raised on-click="_addDatalet"><span data-l10n-id="addDatalet"></span></paper-button> 263 + <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
264 264
265 </div> 265 </div>
266 266
@@ -402,9 +402,15 @@ @@ -402,9 +402,15 @@
402 }, 402 },
403 403
404 _translate : function(){ 404 _translate : function(){
405 -// document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s)); 405 +
  406 + this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
  407 + this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
  408 + this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];
  409 + this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];
  410 + this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
  411 +
406 if(this.modify) 412 if(this.modify)
407 - document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s); 413 + this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
408 }, 414 },
409 415
410 _selectDatalet : function(e){ 416 _selectDatalet : function(e){
@@ -596,6 +602,7 @@ @@ -596,6 +602,7 @@
596 }, 602 },
597 603
598 _showInfo : function(e){ 604 _showInfo : function(e){
  605 + var that = this;
599 var t = e.target; 606 var t = e.target;
600 if(t.tagName.indexOf("IRON-ICON") != -1) 607 if(t.tagName.indexOf("IRON-ICON") != -1)
601 t = $(e.target).parents("paper-icon-button")[0]; 608 t = $(e.target).parents("paper-icon-button")[0];
@@ -607,8 +614,7 @@ @@ -607,8 +614,7 @@
607 dataset = $.grep(this.labels, function(e){ return e.name == name; })[0]; 614 dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
608 615
609 this.$.dialog_name.innerHTML = dataset.name; 616 this.$.dialog_name.innerHTML = dataset.name;
610 -// this.$.dialog_description.innerHTML = dataset.description;  
611 - document.l10n.formatValue(dataset.description).then(s => this.$.dialog_description.innerHTML = s); 617 + this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]];
612 this.$.dialog_info_input.open(); 618 this.$.dialog_info_input.open();
613 619
614 var pos = t.getBoundingClientRect(); 620 var pos = t.getBoundingClientRect();
controllets/datalet-selection-controllet/demo/index.html
  View file @4143bce
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 10
11 <meta name="availableLanguages" content="en, it"> 11 <meta name="availableLanguages" content="en, it">
12 <link rel="localization" href="../../../locales/it.l20n"> 12 <link rel="localization" href="../../../locales/it.l20n">
13 - <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script> 13 + <!--<script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>-->
14 14
15 <link rel="import" href="../datalet-selection-controllet.html" /> 15 <link rel="import" href="../datalet-selection-controllet.html" />
16 </head> 16 </head>
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @4143bce
@@ -127,9 +127,9 @@ @@ -127,9 +127,9 @@
127 <paper-material id="material_container" elevation="5"> 127 <paper-material id="material_container" elevation="5">
128 128
129 <paper-tabs selected="{{selected}}"> 129 <paper-tabs selected="{{selected}}">
130 - <paper-tab noink><span data-l10n-id="listView"></span></paper-tab>  
131 - <paper-tab noink><span data-l10n-id="treeMapView"></span></paper-tab>  
132 - <paper-tab noink disabled><span data-l10n-id="mostPopular"></span></paper-tab> 130 + <paper-tab noink><span id="listView"></span></paper-tab>
  131 + <paper-tab noink><span id="treeMapView"></span></paper-tab>
  132 + <!--<paper-tab noink disabled><span data-l10n-id="mostPopular"></span></paper-tab>-->
133 </paper-tabs> 133 </paper-tabs>
134 134
135 <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> 135 <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
@@ -256,14 +256,17 @@ @@ -256,14 +256,17 @@
256 256
257 this._loadTreeMap(); 257 this._loadTreeMap();
258 258
259 - this._translate(); 259 + this.async(function(){this._translate();},100);
260 }, 260 },
261 261
262 _translate : function(){ 262 _translate : function(){
263 - document.l10n.formatValue('availableDatasets').then(s => $("#_datasets")[0].setAttribute("label", s)); 263 + this.$._datasets.setAttribute("label", ln["availableDatasets_" + ln["localization"]]);
  264 + this.$.listView.innerHTML = ln["listView_" + ln["localization"]];
  265 + this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
  266 +
264 if(this.isSuggested) 267 if(this.isSuggested)
265 - document.l10n.formatValue('suggestedDatasets').then(s => $("#s_datasets")[0].setAttribute("label", s));  
266 - document.l10n.formatValue('selectedUrl').then(s => this.$.selected_url.setAttribute("label", s)); 268 + this.$$("#s_datasets").setAttribute("label", ln["suggestedDatasets_" + ln["localization"]]);
  269 + this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
267 }, 270 },
268 271
269 _filterDatasets : function(e){ 272 _filterDatasets : function(e){
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
  View file @4143bce
@@ -95,7 +95,8 @@ Example: @@ -95,7 +95,8 @@ Example:
95 display: none; 95 display: none;
96 } 96 }
97 97
98 - ::content .card_grid .open{ 98 + ::content .card_grid .open
  99 + {
99 display: none; 100 display: none;
100 } 101 }
101 102
controllets/page-slider-controllet/demo/index.html
  View file @4143bce
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 switch (e.detail.selected) { 36 switch (e.detail.selected) {
37 case 0: 37 case 0:
38 slider.setTitle("DATASET SOURCE", "Copy and paste/drag and drop in the textarea the url of datasource"); 38 slider.setTitle("DATASET SOURCE", "Copy and paste/drag and drop in the textarea the url of datasource");
39 - slider.chevronLeft(false); 39 + slider.chevronLeft("invisible");
40 break; 40 break;
41 case 1: 41 case 1:
42 slider.setTitle("Title", "Subtitle"); 42 slider.setTitle("Title", "Subtitle");
controllets/page-slider-controllet/page-slider-controllet.html
  View file @4143bce
@@ -15,9 +15,10 @@ @@ -15,9 +15,10 @@
15 <style is="custom-style"> 15 <style is="custom-style">
16 paper-icon-button{ 16 paper-icon-button{
17 color: #00BCD4; 17 color: #00BCD4;
18 - height: 48px;  
19 - width: 48px; 18 + height: 64px;
  19 + width: 64px;
20 padding: 0px; 20 padding: 0px;
  21 + margin: 0px;
21 --paper-icon-button-ink-color: #00BCD4; 22 --paper-icon-button-ink-color: #00BCD4;
22 } 23 }
23 24
@@ -38,12 +39,12 @@ @@ -38,12 +39,12 @@
38 39
39 .chevron-left{ 40 .chevron-left{
40 float: left; 41 float: left;
41 - margin-top: 8px; 42 + /*margin-top: 8px;*/
42 } 43 }
43 44
44 .chevron-right{ 45 .chevron-right{
45 float: right; 46 float: right;
46 - margin-top: 8px; 47 + /*margin-top: 8px;*/
47 } 48 }
48 49
49 .box{ 50 .box{
@@ -82,8 +83,8 @@ @@ -82,8 +83,8 @@
82 </style> 83 </style>
83 84
84 <div class="header"> 85 <div class="header">
85 - <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>  
86 - <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button> 86 + <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="arrow-back" title="back"></paper-icon-button>
  87 + <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="arrow-forward" title="forward"></paper-icon-button>
87 88
88 <div class="box"> 89 <div class="box">
89 <div class="avatar">[[avatar]]</div> 90 <div class="avatar">[[avatar]]</div>
@@ -168,10 +169,12 @@ @@ -168,10 +169,12 @@
168 169
169 if(flag == "invisible") { 170 if(flag == "invisible") {
170 buttons[0].style.visibility = "hidden"; 171 buttons[0].style.visibility = "hidden";
  172 +// buttons[0].style.width = "0px";
171 return; 173 return;
172 } 174 }
173 else 175 else
174 buttons[0].style.visibility = "visible"; 176 buttons[0].style.visibility = "visible";
  177 +// buttons[0].style.width = "64px";
175 178
176 if(flag) 179 if(flag)
177 buttons[0].removeAttribute("disabled"); 180 buttons[0].removeAttribute("disabled");
controllets/room-controllet/room-controllet.html 0 → 100644
  View file @4143bce
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
  4 +
  5 +<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
  6 +<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
  7 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  8 +
  9 +<dom-module id="room-controllet">
  10 +
  11 + <template>
  12 +
  13 + <style is="custom-style">
  14 +
  15 + iron-icon {
  16 + padding: 0px;
  17 + margin: 0px;
  18 + }
  19 +
  20 + iron-icon.this {
  21 + position: absolute;
  22 + top: -3px;
  23 + left: -3px;
  24 +
  25 + -moz-transform: scaleX(-1);
  26 + -o-transform: scaleX(-1);
  27 + -webkit-transform: scaleX(-1);
  28 + transform: scaleX(-1);
  29 + filter: FlipH;
  30 + -ms-filter: "FlipH";
  31 +
  32 + }
  33 +
  34 + paper-dialog {
  35 + margin: 0px;
  36 + }
  37 +
  38 + .room-tooltip {
  39 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  40 + position: absolute;
  41 + min-width: 250px;
  42 + top: 49px;
  43 + left: 98px;
  44 + padding: 16px;
  45 + }
  46 +
  47 + .div_icon{
  48 + display: inline-block;
  49 + height: 20px;
  50 + width: 20px;
  51 + margin:4px 6px 4px 2px;
  52 + }
  53 +
  54 + p {
  55 + padding-top: 8px;
  56 + margin: 0px;
  57 + white-space: nowrap;
  58 + }
  59 +
  60 + .ptop{
  61 + padding-top: 0px;
  62 + }
  63 +
  64 + </style>
  65 +
  66 + <div id={{roomId}} class$="grid-item {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip" style$="background-color: {{roomColor}};">
  67 + <div class="room-body">{{body}}</div>
  68 + <div class="room-subject"><span>{{subject}}</span></div>
  69 + <div class="room-timestamp">{{timestamp}}</div>
  70 +
  71 + <paper-dialog id="room_info" class="room-tooltip">
  72 + <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon>
  73 + <p class="ptop">This room <b style="color: #2196F3;">{{subject}}</b>,</p>
  74 + <p>created by <b style="color: #2196F3;">{{roomOwner}}</b> has:</p>
  75 + <p><iron-icon class="div_icon" style$="background-color: {{roomColor}};"></iron-icon><b style$="color: {{roomColor}};">{{_howMany(roomShape, 0)}} views</b> (<b style$="color: {{roomColor}};">{{roomViews}}</b>),</p>
  76 + <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howMany(roomShape, 1)}} comments</b> (<b>{{comments}}</b>) and</p>
  77 + <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howMany(roomShape, 2)}} datasets</b> (<b>{{datasets}}</b>).</p>
  78 + </paper-dialog>
  79 + </div>
  80 +
  81 + </template>
  82 +
  83 + <script>
  84 +
  85 + Polymer({
  86 +
  87 + is : 'room-controllet',
  88 +
  89 + properties : {
  90 +
  91 + roomId : {
  92 + type : Number,
  93 + value : undefined
  94 + },
  95 +
  96 + roomColor : {
  97 + type : String,
  98 + value : ""
  99 + },
  100 +
  101 + roomHeight : {
  102 + type : String,
  103 + value : ""
  104 + },
  105 +
  106 + roomWidth : {
  107 + type : String,
  108 + value : ""
  109 + },
  110 +
  111 + roomOwner : {
  112 + type : String,
  113 + value : ""
  114 + },
  115 +
  116 + roomShape : {
  117 + type : Array,
  118 + value : undefined
  119 + },
  120 +
  121 + body : {
  122 + type : String,
  123 + value : ""
  124 + },
  125 +
  126 + subject : {
  127 + type : String,
  128 + value : ""
  129 + },
  130 +
  131 + timestamp : {
  132 + type : String,
  133 + value : ""
  134 + },
  135 +
  136 + roomViews : {
  137 + type : Number,
  138 + value : undefined
  139 + },
  140 +
  141 + comments : {
  142 + type : Number,
  143 + value : undefined
  144 + },
  145 +
  146 + datasets : {
  147 + type : Number,
  148 + value : undefined
  149 + }
  150 +
  151 + },
  152 +
  153 + attached : function() {
  154 + console.log(this.views);
  155 + },
  156 +
  157 + _showTooltip: function() {
  158 + this.$.room_info.open();
  159 + },
  160 +
  161 + _hideTooltip: function() {
  162 + this.$.room_info.close();
  163 + },
  164 +
  165 + _howMany: function(A, i) {
  166 +// return this.roomShape[i];
  167 +// console.log(i);
  168 + return A[i];
  169 + }
  170 +
  171 + });
  172 +
  173 + </script>
  174 +
  175 +</dom-module>
0 \ No newline at end of file 176 \ No newline at end of file
datalets/graph-datalet/demo/demo-clustering.html
  View file @4143bce
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <title>Demo Graph with node clustering</title> 5 <title>Demo Graph with node clustering</title>
6 - <link rel="import" href="../graph-with-clustering-datalet.html"> 6 + <link rel="import" href="../graph-with-clustering-extend-datalet.html">
7 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script> 7 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
8 </head> 8 </head>
9 <script> 9 <script>
@@ -11,11 +11,11 @@ @@ -11,11 +11,11 @@
11 var xhttp = new XMLHttpRequest(); 11 var xhttp = new XMLHttpRequest();
12 xhttp.onreadystatechange = function() { 12 xhttp.onreadystatechange = function() {
13 if (xhttp.readyState == 4 && xhttp.status == 200) { 13 if (xhttp.readyState == 4 && xhttp.status == 200) {
14 - document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +  
15 - '\'></graph-with-clustering-datalet>'; 14 + document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-extend-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
  15 + '\'></graph-with-clustering-extend-datalet>';
16 } 16 }
17 }; 17 };
18 - xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=1&type=comments", true); 18 + xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=8&type=comments", true);
19 xhttp.send(); 19 xhttp.send();
20 } 20 }
21 21
datalets/graph-datalet/graph-datalet.html
  View file @4143bce
@@ -96,18 +96,16 @@ Example: @@ -96,18 +96,16 @@ Example:
96 96
97 <script> 97 <script>
98 98
99 - gnodes = [];  
100 - glinks = [];  
101 -  
102 - width = undefined;  
103 - height = undefined;  
104 - svg = undefined;  
105 _this = null; 99 _this = null;
106 - prev_selected_node = null;  
107 100
108 Polymer({ 101 Polymer({
109 is : 'graph-datalet', 102 is : 'graph-datalet',
110 103
  104 + listeners: {
  105 + 'graph-datalet_on-node-hover' : '_onNodeHover',
  106 + 'graph-datalet_on-node-out' : '_onNodeOut'
  107 + },
  108 +
111 properties: { 109 properties: {
112 /** 110 /**
113 * It's the url for the preview 111 * It's the url for the preview
@@ -116,11 +114,21 @@ Example: @@ -116,11 +114,21 @@ Example:
116 * @type Strig 114 * @type Strig
117 * @default '' 115 * @default ''
118 */ 116 */
119 - data : { 117 + graph : {
120 type : Object, 118 type : Object,
121 value : undefined 119 value : undefined
122 }, 120 },
123 121
  122 + gnodes : {
  123 + type : Array,
  124 + value : []
  125 + },
  126 +
  127 + glinks : {
  128 + type : Array,
  129 + value : []
  130 + },
  131 +
124 width: { 132 width: {
125 type: Number, 133 type: Number,
126 value: undefined 134 value: undefined
@@ -128,7 +136,7 @@ Example: @@ -128,7 +136,7 @@ Example:
128 136
129 height : { 137 height : {
130 type : Number, 138 type : Number,
131 - type: undefined 139 + value: undefined
132 }, 140 },
133 141
134 svg: { 142 svg: {
@@ -138,6 +146,11 @@ Example: @@ -138,6 +146,11 @@ Example:
138 feelings:{ 146 feelings:{
139 type: Array, 147 type: Array,
140 values: ["Agree", "Neutral", "Not agree"] 148 values: ["Agree", "Neutral", "Not agree"]
  149 + },
  150 +
  151 + prev_selected_node : {
  152 + type : Object,
  153 + value : null
141 } 154 }
142 }, 155 },
143 156
@@ -148,9 +161,9 @@ Example: @@ -148,9 +161,9 @@ Example:
148 .append("g"); 161 .append("g");
149 162
150 //set initial zoom 163 //set initial zoom
151 - scale = (1.0); 164 + var scale = (1.0);
152 //translate = [(width-scale*width)/2, ((height-scale*height)/4)]; 165 //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
153 - translate = [100, 100]; 166 + var translate = [100, 100];
154 this.svg.transition() 167 this.svg.transition()
155 .duration(750) 168 .duration(750)
156 .attr("transform", "translate(" + translate + ")scale(" + scale + ")") 169 .attr("transform", "translate(" + translate + ")scale(" + scale + ")")
@@ -163,8 +176,8 @@ Example: @@ -163,8 +176,8 @@ Example:
163 176
164 this.svg.append("rect") 177 this.svg.append("rect")
165 .attr("fill", "white") 178 .attr("fill", "white")
166 - .attr("width", width)  
167 - .attr("height", height); 179 + .attr("width", this.width)
  180 + .attr("height", this.height);
168 181
169 182
170 var graph = {}; 183 var graph = {};
@@ -174,15 +187,6 @@ Example: @@ -174,15 +187,6 @@ Example:
174 187
175 //pezzotto 188 //pezzotto
176 for(var i =0; i < graph.nodes.length; i++){ 189 for(var i =0; i < graph.nodes.length; i++){
177 - /*this.svg.append("filter")  
178 - .attr("id","filter_" + graph.nodes[i].id)  
179 - .attr("x","0%")  
180 - .attr("y","0%")  
181 - .attr("width","100%")  
182 - .attr("height","100%")  
183 - .append("feImage")  
184 - .attr("xlink:href", graph.nodes[i].image);*/  
185 -  
186 this.svg.append("defs") 190 this.svg.append("defs")
187 .append("pattern") 191 .append("pattern")
188 .attr("id","image_" + graph.nodes[i].id) 192 .attr("id","image_" + graph.nodes[i].id)
@@ -203,7 +207,7 @@ Example: @@ -203,7 +207,7 @@ Example:
203 return t.value ? t.value : 80 207 return t.value ? t.value : 80
204 }).on("tick", this.tick).start(); 208 }).on("tick", this.tick).start();
205 209
206 - glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link"); 210 + this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
207 211
208 this.svg.selectAll(".link") 212 this.svg.selectAll(".link")
209 .attr("style", function(t){ 213 .attr("style", function(t){
@@ -213,24 +217,18 @@ Example: @@ -213,24 +217,18 @@ Example:
213 return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; 217 return "stroke-width:" + (t.size ? t.size : 1.0) + "px";
214 }); 218 });
215 219
216 - gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {  
217 - return t.fixed ? "node fixed" : "node"  
218 - })  
219 - .attr("name", function (t) {  
220 - return t.name ? t.name.split(" ").join("_").toLowerCase() : ""  
221 - }).on("mouseover", this.mouseover)  
222 - .on("mouseout", this.mouseout)  
223 - .on("click", this.active) 220 + this.gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g")
  221 + .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
  222 + .attr("id", function (t) { return "g" + t.id;})
  223 + .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
  224 + .on("mouseover", this.mouseover)
  225 + .on("mouseout", this.mouseout)
  226 + .on("click", this.active)
224 .append("circle") 227 .append("circle")
225 - .attr("id", function(t){  
226 - return t.id;  
227 - })  
228 - .attr("class", function (t) {  
229 - return t.fixed ? "" : "drag"  
230 - })  
231 - .attr("r", function (t) {  
232 - return t.r ? t.r : 15  
233 - }) 228 + .attr("id", function(t){ return t.id;})
  229 + .attr("originalId", function (t) { return t.originalId;})
  230 + .attr("class", function (t) { return t.fixed ? "" : "drag"})
  231 + .attr("r", function (t) {return t.r ? t.r : 15})
234 .attr("style", function (t) { 232 .attr("style", function (t) {
235 switch(parseInt(t.sentiment)){ 233 switch(parseInt(t.sentiment)){
236 case 1 : 234 case 1 :
@@ -248,19 +246,16 @@ Example: @@ -248,19 +246,16 @@ Example:
248 return "fill:" + t.color + "; stroke:white" 246 return "fill:" + t.color + "; stroke:white"
249 }); 247 });
250 248
251 - //d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter_' + t.id +')' : ""});  
252 d3.selectAll('circle').attr("style", function(t){ 249 d3.selectAll('circle').attr("style", function(t){
253 - return "fill :" + (t.image ? 'url(#image_' + t.id +')' : t.color)}); 250 + return "fill :" + (t.image ? 'url(#image_' + t.id +')' : t.color)
  251 + });
254 252
255 - //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);  
256 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); 253 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
257 254
258 - svg = this.svg;  
259 -  
260 }, 255 },
261 256
262 zoom: function() { 257 zoom: function() {
263 - svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 258 + _this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
264 }, 259 },
265 260
266 text: function (t) 261 text: function (t)
@@ -275,35 +270,37 @@ Example: @@ -275,35 +270,37 @@ Example:
275 }, 270 },
276 271
277 tick : function () { 272 tick : function () {
278 - // d3.select("svg").attr("style", "transform:translate(8%)");  
279 - d3.selectAll("g foreignObject").attr("x", function (t) {  
280 - return t.x + (t.r ? 0.8 * t.r : 15)  
281 - }).attr("y", function (t) {  
282 - return t.y - 20  
283 - }); 273 + if(_this.gnodes != undefined)
  274 + {
  275 + d3.selectAll("g foreignObject").attr("x", function (t) {
  276 + return t.x + (t.r ? 0.8 * t.r : 15)
  277 + }).attr("y", function (t) {
  278 + return t.y - 20
  279 + });
284 280
285 - d3.selectAll("#logo text").attr("x", function (t) {  
286 - return t.x + .7 * (t.r ? t.r : 15)  
287 - }).attr("y", function (t) {  
288 - return t.y  
289 - }); 281 + d3.selectAll("#logo text").attr("x", function (t) {
  282 + return t.x + .7 * (t.r ? t.r : 15)
  283 + }).attr("y", function (t) {
  284 + return t.y
  285 + });
290 286
291 287
292 - gnodes.attr("cx", function (t) {  
293 - return t.x = Math.max(25, Math.min(width - 50, t.x))  
294 - }).attr("cy", function (t) {  
295 - return t.y = Math.max(8, Math.min(600, t.y))  
296 - }); 288 + _this.gnodes.attr("cx", function (t) {
  289 + return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
  290 + }).attr("cy", function (t) {
  291 + return t.y = Math.max(8, Math.min(600, t.y))
  292 + });
297 293
298 - glinks.attr("x1", function (t) {  
299 - return t.source.x  
300 - }).attr("y1", function (t) {  
301 - return t.source.y  
302 - }).attr("x2", function (t) {  
303 - return t.target.x  
304 - }).attr("y2", function (t) {  
305 - return t.target.y  
306 - }) 294 + _this.glinks.attr("x1", function (t) {
  295 + return t.source.x
  296 + }).attr("y1", function (t) {
  297 + return t.source.y
  298 + }).attr("x2", function (t) {
  299 + return t.target.x
  300 + }).attr("y2", function (t) {
  301 + return t.target.y
  302 + });
  303 + }
307 }, 304 },
308 mouseover : function (t) { 305 mouseover : function (t) {
309 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic") 306 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
@@ -328,16 +325,18 @@ Example: @@ -328,16 +325,18 @@ Example:
328 }, 325 },
329 326
330 active : function (t) { 327 active : function (t) {
331 - _this.fire('graph-datalet_node-clicked', {node : t}); 328 + if(t.image) return;
332 329
333 - if(prev_selected_node != null){  
334 - prev_selected_node.style.fill = prev_selected_node.style.stroke;  
335 - prev_selected_node.style.stroke = "#FFFFFF"; 330 + _this.fire('graph-datalet_node-clicked', {node : t});
  331 +
  332 + if(_this.prev_selected_node != null){
  333 + _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
  334 + _this.prev_selected_node.style.stroke = "#FFFFFF";
336 } 335 }
337 336
338 - prev_selected_node = document.getElementById("" + t.id);  
339 - prev_selected_node.style.fill = "#FFFFFF"  
340 - prev_selected_node.style.stroke = t.color; 337 + _this.prev_selected_node = document.getElementById("" + t.id);
  338 + _this. prev_selected_node.style.fill = "#FFFFFF"
  339 + _this.prev_selected_node.style.stroke = t.color;
341 340
342 /* _this.$.dialog.close(); 341 /* _this.$.dialog.close();
343 _this.$.dialog_title.innerHTML = t.name; 342 _this.$.dialog_title.innerHTML = t.name;
@@ -350,6 +349,30 @@ Example: @@ -350,6 +349,30 @@ Example:
350 //_this.$.dialog.close(); 349 //_this.$.dialog.close();
351 }, 350 },
352 351
  352 + _onNodeHover : function(e){
  353 + try {
  354 + var nodeId = $("[originalId=" + e.detail.id + "]")[0].id;
  355 + var gNode = $("#g" + nodeId)[0];
  356 + var node = this.graph.nodes[nodeId];
  357 +
  358 + d3.select(gNode).selectAll("circle").transition().duration(600).ease("elastic")
  359 + .attr("r", function (t) {
  360 + return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
  361 + });
  362 +
  363 + _this.$.dialog.close();
  364 + _this.$.dialog_title.innerHTML = node.name;
  365 + _this.$.dialog_content.innerHTML = node.content;
  366 +
  367 + _this.$.dialog.open();
  368 + }catch(e){}
  369 +
  370 + },
  371 +
  372 + _onNodeOut : function(e){
  373 + this.mouseout();
  374 + },
  375 +
353 /** 376 /**
354 * It is called after the element’s template has been stamped and all elements inside the element’s local 377 * It is called after the element’s template has been stamped and all elements inside the element’s local
355 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values) 378 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
@@ -364,26 +387,16 @@ Example: @@ -364,26 +387,16 @@ Example:
364 387
365 _this = this; 388 _this = this;
366 389
367 - //this.height = 9 * this.width / 16;  
368 - //this.height = this.width;  
369 -  
370 - width = this.width;  
371 - height = this.height;  
372 -  
373 - //this.$.graph_content.style.height = height + "px";  
374 390
375 this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({ 391 this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
376 width: "100%", 392 width: "100%",
377 height: "100%" 393 height: "100%"
378 - }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");  
379 -  
380 - /*var g = JSON.parse(this.data);  
381 - g.nodes[0].x = this.width / 2;  
382 - g.nodes[0].y = this.height / 2;  
383 - this.buildGraph(g);*/ 394 + }).attr("viewBox", "0 0 " + this.width + " " + this.height)
  395 + .attr("pointer-events", "all")
  396 + .attr("style", "transform:translate(0px)")
  397 + .style("position", "absolute");
384 398
385 - var json = JSON.stringify(this.data);  
386 - var g = this.data; 399 + var g = this.graph;
387 g.nodes[0].x = this.width / 2; 400 g.nodes[0].x = this.width / 2;
388 g.nodes[0].y = this.height / 8; 401 g.nodes[0].y = this.height / 8;
389 this.buildGraph(g); 402 this.buildGraph(g);
datalets/graph-datalet/graph-with-clustering-datalet.html
  View file @4143bce
@@ -97,6 +97,11 @@ Example: @@ -97,6 +97,11 @@ Example:
97 Polymer({ 97 Polymer({
98 is : 'graph-with-clustering-datalet', 98 is : 'graph-with-clustering-datalet',
99 99
  100 + listeners: {
  101 + 'graph-datalet_on-node-select' : '_onNodeSelect',
  102 + 'graph-datalet_on-node-out' : '_onNodeOut'
  103 + },
  104 +
100 properties: { 105 properties: {
101 /** 106 /**
102 * It's the url for the preview 107 * It's the url for the preview
@@ -138,6 +143,7 @@ Example: @@ -138,6 +143,7 @@ Example:
138 type: Array, 143 type: Array,
139 values: ["Agree", "Neutral", "Not agree"] 144 values: ["Agree", "Neutral", "Not agree"]
140 }, 145 },
  146 +
141 prev_selected_node : { 147 prev_selected_node : {
142 type : Object, 148 type : Object,
143 value : null 149 value : null
@@ -200,11 +206,11 @@ Example: @@ -200,11 +206,11 @@ Example:
200 return fill(d);*/ 206 return fill(d);*/
201 switch((d % 3)){ 207 switch((d % 3)){
202 case 0 : 208 case 0 :
203 - return "#1F77B4"; 209 + return "transparent";//"#1F77B4";//neutral
204 case 1 : 210 case 1 :
205 - return "#2CA02C"; 211 + return "#2CA02C";//agree
206 case 2: 212 case 2:
207 - return "#FF1E1E"; 213 + return "transparent";//"#FF1E1E";//disagree
208 } 214 }
209 }, 215 },
210 216
@@ -277,7 +283,6 @@ Example: @@ -277,7 +283,6 @@ Example:
277 283
278 for(var n=0; n < this.groups[g][s].values.length;n++) 284 for(var n=0; n < this.groups[g][s].values.length;n++)
279 nodesMap[this.groups[g][s].values[n].id] = node; 285 nodesMap[this.groups[g][s].values[n].id] = node;
280 -  
281 } 286 }
282 } 287 }
283 } 288 }
@@ -322,7 +327,6 @@ Example: @@ -322,7 +327,6 @@ Example:
322 .style("fill", "#60df20") 327 .style("fill", "#60df20")
323 .style("opacity", .2) 328 .style("opacity", .2)
324 .on("click", function(d) { 329 .on("click", function(d) {
325 - alert(d.id);  
326 }); 330 });
327 331
328 332
@@ -340,9 +344,11 @@ Example: @@ -340,9 +344,11 @@ Example:
340 .on("mouseout", this.mouseout) 344 .on("mouseout", this.mouseout)
341 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"}) 345 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
342 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""}) 346 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
  347 + .attr("id", function (t) { return "g" + t.id;})
343 .append("circle") 348 .append("circle")
344 .on("click", this.active) 349 .on("click", this.active)
345 .attr("id", function(t){ return t.id }) 350 .attr("id", function(t){ return t.id })
  351 + .attr("originalId", function (t) { return t.originalId;})
346 .attr("class", function (t) { return t.fixed ? "" : "drag"}) 352 .attr("class", function (t) { return t.fixed ? "" : "drag"})
347 .attr("r", function (t){ return t.r ? t.r : 15 }) 353 .attr("r", function (t){ return t.r ? t.r : 15 })
348 .attr("style", function (t) { 354 .attr("style", function (t) {
@@ -517,6 +523,29 @@ Example: @@ -517,6 +523,29 @@ Example:
517 //_this.$.dialog.close(); 523 //_this.$.dialog.close();
518 }, 524 },
519 525
  526 + _onNodeSelect : function(e){
  527 + try {
  528 + var nodeId = $("[originalId=" + e.detail.id + "]")[0].id;
  529 + var gNode = $("#g" + nodeId)[0];
  530 + var node = this.graph.nodes[nodeId];
  531 +
  532 + d3.select(gNode).selectAll("circle").transition().duration(600).ease("elastic")
  533 + .attr("r", function (t) {
  534 + return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
  535 + });
  536 +
  537 + _this.$.dialog.close();
  538 + _this.$.dialog_title.innerHTML = node.name;
  539 + _this.$.dialog_content.innerHTML = node.content;
  540 +
  541 + _this.$.dialog.open();
  542 + }catch(e){}
  543 + },
  544 +
  545 + _onNodeOut : function(e){
  546 + this.mouseout();
  547 + },
  548 +
520 /** 549 /**
521 * It is called after the element’s template has been stamped and all elements inside the element’s local 550 * It is called after the element’s template has been stamped and all elements inside the element’s local
522 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values) 551 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
datalets/graph-datalet/graph-with-clustering-datalet_.html renamed to datalets/graph-datalet/graph-with-clustering-extend-datalet.html
  View file @4143bce
@@ -49,7 +49,7 @@ Example: @@ -49,7 +49,7 @@ Example:
49 @group datalets 49 @group datalets
50 --> 50 -->
51 51
52 -<dom-module id="graph-with-clustering-datalet"> 52 +<dom-module id="graph-with-clustering-extend-datalet">
53 <template> 53 <template>
54 54
55 <link rel="stylesheet" href="static/css/graphStyle.css"> 55 <link rel="stylesheet" href="static/css/graphStyle.css">
@@ -95,7 +95,7 @@ Example: @@ -95,7 +95,7 @@ Example:
95 _this = null; 95 _this = null;
96 96
97 Polymer({ 97 Polymer({
98 - is : 'graph-with-clustering-datalet', 98 + is : 'graph-with-clustering-extend-datalet',
99 99
100 properties: { 100 properties: {
101 /** 101 /**
@@ -111,8 +111,8 @@ Example: @@ -111,8 +111,8 @@ Example:
111 }, 111 },
112 112
113 svgNodes : { 113 svgNodes : {
114 - type : Array,  
115 - value : [] 114 + type : Array,
  115 + value : []
116 }, 116 },
117 117
118 svgLinks : { 118 svgLinks : {
@@ -158,186 +158,246 @@ Example: @@ -158,186 +158,246 @@ Example:
158 value: [] 158 value: []
159 }, 159 },
160 160
161 - hulls : {  
162 - type: Array,  
163 - value: []  
164 - },  
165 hull : { 161 hull : {
166 type : Array, 162 type : Array,
167 value : [] 163 value : []
  164 + },
  165 + /*test*/
  166 + hullg : {
  167 + type : Array,
  168 + value : []
  169 + },
168 170
  171 + offset :{
  172 + type : Number,
  173 + value : 15
  174 + },
  175 +
  176 + prevNetwork : {
  177 + type : Object,
  178 + value : undefined
169 } 179 }
170 - },  
171 180
172 - groupPath : function(d) {  
173 - return "M" +  
174 - d3.geom.hull(d.values.map(function(i) { return [i.x, i.y];}))  
175 - .join("L")  
176 - + "Z"; 181 + /*end test*/
177 }, 182 },
178 183
179 - groupFill : function(d, i) {  
180 - var fill = d3.scale.category10();  
181 - return fill(i & 3); 184 + convexHulls : function() {
  185 + var hullset = [];
  186 + for(var n in _this.hulls){
  187 + var vertices = [];
  188 + for(var v in _this.hulls[n]){
  189 + vertices.push([_this.hulls[n][v].x - _this.offset, _this.hulls[n][v].y - _this.offset]);
  190 + vertices.push([_this.hulls[n][v].x - _this.offset, _this.hulls[n][v].y + _this.offset]);
  191 + vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y - _this.offset]);
  192 + vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y + _this.offset]);
  193 + }
  194 + hullset.push({id : n, sentiment: _this.hulls[n][v].sentiment , path: d3.geom.hull(vertices)});
  195 + }
  196 + return hullset;
182 }, 197 },
183 198
184 - createHulls : function(nodes){  
185 - this.svg.selectAll("path")  
186 - .data(nodes)  
187 - .attr("d", this.groupPath)  
188 - .enter().insert("path", "g")  
189 - //.style("fill", _this.groupFill)  
190 - .style("fill", "#60df20")  
191 - //.style("stroke", _this.groupFill)  
192 - .style("stroke", "#60df20")  
193 - .style("stroke-width", 30)  
194 - .style("stroke-linejoin", "round")  
195 - .style("opacity", .2)  
196 - .attr("d", this.groupPath); 199 + fill : function(d){
  200 + switch(((d - 1) % 3)){
  201 + case 0 :
  202 + return "#1F77B4";
  203 + case 1 :
  204 + return "#2CA02C";
  205 + case 2:
  206 + return "#FF1E1E";
  207 + }
197 }, 208 },
198 209
199 - getNetwork : function(){  
200 -  
201 - var nodes = [], links = [], prevLevel = 1, prevGroupIndex = 1;  
202 -  
203 - //for(var i=0; i < 27; i++) groups.push({key : "" + i , values : []}); 210 + drawCluster : function(d) {
  211 + var curve = d3.svg.line()
  212 + .interpolate("cardinal-closed")
  213 + .tension(.85);
204 214
205 - //nodes.push(this.graph.nodes[0]) 215 + return curve(d.path); // 0.8
  216 + },
206 217
  218 + getGroups : function(){
207 for(var i= 0,j=0; i < this.graph.nodes.length;i++,j+=3){ 219 for(var i= 0,j=0; i < this.graph.nodes.length;i++,j+=3){
208 - var node = this.graph.nodes[i];  
209 - var l = node.level;  
210 - var sentiment = node.sentiment;  
211 - var id = node.id;  
212 - var father = node.father;  
213 -  
214 - this.groups.push([{key : "" + j, values : []}, {key : "" + (j + 1), values : []}, {key : "" + (j + 2), values : []}]);  
215 - if(this.graph.nodes[i].father != null){  
216 - switch (parseInt(this.graph.nodes[i].sentiment)){  
217 - case 1:  
218 - this.groups[this.graph.nodes[i].father.id][0].values.push(this.graph.nodes[i]);  
219 - break;  
220 - case 2:  
221 - this.groups[this.graph.nodes[i].father.id][1].values.push(this.graph.nodes[i]);  
222 - break;  
223 - case 3:  
224 - this.groups[this.graph.nodes[i].father.id][2].values.push(this.graph.nodes[i]);  
225 - break;  
226 - }  
227 - }  
228 220
229 - /*var node = this.graph.nodes[i];  
230 - var l = node.level;  
231 - var sentiment = node.sentiment;  
232 - var id = node.id; 221 + var f = this.graph.nodes[i].father;
  222 + if(f != null) {
  223 + while (f.sentiment == this.graph.nodes[i].sentiment) f = f.father;
  224 + }
233 225
234 - var gi = (((this.graph.nodes[i].level - 1) * 3) + parseInt(this.graph.nodes[i].sentiment));  
235 - groups[gi].values.push(node);*/ 226 + if(f != null){
  227 + if(this.groups[f.id] == undefined){
  228 + this.groups[f.id] = ([
  229 + {key: "" + j, values: [], extend: false},
  230 + {key: "" + (j + 1), values: [],extend: false},
  231 + {key: "" + (j + 2), values: [], extend: false}
  232 + ]);
  233 + }
  234 + this.graph.nodes[i].group = f.id;
  235 + this.groups[f.id][parseInt(this.graph.nodes[i].sentiment) - 1].values.push(this.graph.nodes[i]);
236 236
  237 + }else{
  238 + this.graph.nodes[i].group = 0;
  239 + }
237 } 240 }
  241 + },
  242 +
  243 + getNetwork : function(){
  244 + var nodes = [], links = [];
  245 + var nodesMap = [];
  246 +
  247 + //Associate the root to first node
  248 + var root = ({
  249 + id: 0,
  250 + group: 0,
  251 + name : this.graph.nodes[0].name,
  252 + content : this.graph.nodes[0].content,
  253 + r: this.graph.nodes[0].r,
  254 + });
  255 + nodes.push(root);
  256 + nodesMap[0] = root;
238 257
239 this.hulls = []; 258 this.hulls = [];
240 - var index = 0;  
241 - for(var i=0; i < _this.groups.length; i++){  
242 - for(var j=0; j < _this.groups[i].length;j++){  
243 - if(_this.groups[i][j].values.length != 0) {  
244 - if(_this.groups[i][j].values.length > 0){  
245 - _this.groups[i][j].key = "" + index;  
246 - index++;  
247 - this.hulls.push(_this.groups[i][j]); 259 + for(var g in this.groups){
  260 + for(var s in this.groups[g]) {
  261 + if(this.groups[g][s].values.length > 0) {
  262 + if(this.groups[g][s].extend || this.groups[g][s].values.length == 1 ){
  263 + this.hulls[g + "-" + s] = [];
  264 + for(var n=0; n < this.groups[g][s].values.length;n++) {
  265 + var node = ({
  266 + id: g + "-" + s + "-" + n,
  267 + group: g + "-" + s,
  268 + sentiment: parseInt(s) + 1,
  269 + r: this.groups[g][s].values[n].r,
  270 + name : this.groups[g][s].values[n].name,
  271 + content : this.groups[g][s].values[n].content
  272 + });
  273 + nodes.push(node);
  274 + nodesMap[this.groups[g][s].values[n].id] = node;
  275 + this.hulls[g + "-" + s].push(node);
  276 + }
  277 + }else{
  278 + var r = 0;
  279 + for(var n=0; n < this.groups[g][s].values.length;n++) r+= Math.sqrt(this.groups[g][s].values[n].r);
  280 +
  281 + var node = ({
  282 + id : g + "-"+ s,
  283 + group: g,
  284 + sentiment: parseInt(s) + 1,
  285 + nodes: this.groups[g][s].values,
  286 + r: (r < 4) ? 4 : r,
  287 + content : "This node contains " + this.groups[g][s].values.length + " nodes",
  288 + extend: false
  289 + });
  290 +
  291 + nodes.push(node);
  292 +
  293 + for(var n=0; n < this.groups[g][s].values.length;n++)
  294 + nodesMap[this.groups[g][s].values[n].id] = node;
248 } 295 }
249 } 296 }
250 } 297 }
251 } 298 }
252 - },  
253 299
254 - /*TEST*/  
255 - convexHulls : function(nodes, index, offset) {  
256 - var hulls = {};  
257 -  
258 - // create point sets  
259 - for (var k=0; k<nodes.length; ++k) {  
260 - var n = nodes[k];  
261 - if (n.size) continue;  
262 - var i = index(n),  
263 - l = hulls[i] || (hulls[i] = []);  
264 - l.push([n.x-offset, n.y-offset]);  
265 - l.push([n.x-offset, n.y+offset]);  
266 - l.push([n.x+offset, n.y-offset]);  
267 - l.push([n.x+offset, n.y+offset]); 300 + for(var e = 0; e < this.graph.links.length; e++){
  301 + if(this.graph.nodes[this.graph.links[e].source.id].group != this.graph.nodes[this.graph.links[e].target.id].group) {
  302 + var id = nodesMap[this.graph.links[e].source.id].id + "-" + nodesMap[this.graph.links[e].target.id].id;
  303 + var link = this.findLink(links, id);
  304 + if(link != null)
  305 + link.size += 3;
  306 + else
  307 + links.push({
  308 + id: id,
  309 + source: nodesMap[this.graph.links[e].source.id],
  310 + target: nodesMap[this.graph.links[e].target.id],
  311 + size : 1
  312 + });
  313 + }else{
  314 + links.push({
  315 + source: nodesMap[this.graph.links[e].source.id],
  316 + target: nodesMap[this.graph.links[e].target.id],
  317 + size : 1
  318 + });
  319 + }
268 } 320 }
269 321
270 - // create convex hulls  
271 - var hullset = [];  
272 - for (i in hulls) {  
273 - hullset.push({group: i, path: d3.geom.hull(hulls[i])});  
274 - }  
275 - return hullset;  
276 - }, 322 + return {nodes : nodes, links : links};
  323 + //return {nodes : this.graph.nodes, links : this.graph.links};
277 324
278 - drawCluster : function(d) {  
279 - return this.curve(d.path); // 0.8  
280 }, 325 },
281 326
282 - curve : function(d){  
283 - var curve = d3.svg.line()  
284 - .interpolate("cardinal-closed")  
285 - .tension(.85);  
286 - return curve(d); 327 + findLink : function(links, id){
  328 + for(var i=0; i<links.length;i++){
  329 + if(links[i].id == id) return links[i];
  330 + }
  331 + return null;
287 }, 332 },
288 - /*END TEST*/  
289 333
290 init : function(){ 334 init : function(){
291 335
292 - this.getNetwork(); 336 + var net = this.getNetwork();
293 337
294 if(this.force != null) this.force.stop(); 338 if(this.force != null) this.force.stop();
295 force = d3.layout.force() 339 force = d3.layout.force()
296 - .nodes(this.graph.nodes)  
297 - .links(this.graph.links)  
298 - .size([this.width, this.height])  
299 - .charge(-1e3)  
300 - .friction(.7)  
301 - .linkDistance(function (t){ return t.value ? t.value : 80})  
302 - .on("tick", this.tick).start();  
303 -  
304 - _this.svg.selectAll("path").remove();  
305 - _this.hull = _this.svg.append("path")  
306 - .style("fill", "#60df20")  
307 - .style("stroke", "#60df20")  
308 - .style("stroke-width", 30) 340 + .nodes(net.nodes)
  341 + .links(net.links)
  342 + .size([this.width, this.height])
  343 + .charge(-1e3)
  344 + .friction(.7)
  345 + .linkDistance(function (t){ return t.value ? t.value : 80})
  346 + .on("tick", this.tick).start();
  347 +
  348 + this.hullg.selectAll("path.hull").remove();
  349 + this.hull = this.hullg.selectAll("path.hull")
  350 + .data(this.convexHulls)
  351 + .enter().append("path")
309 .attr("class", "hull") 352 .attr("class", "hull")
310 - .style("stroke-linejoin", "round")  
311 - .style("opacity", .2);  
312 - 353 + .attr("d", this.drawCluster)
  354 + .style("fill", "#60df20")
  355 + .style("opacity", .2)
  356 + .on("click", function(d) {
  357 + var gids = d.id.split("-");
  358 + _this.groups[parseInt(gids[0])][parseInt(gids[1])].extend = false;
  359 + _this.init();
  360 + });
  361 +
313 362
314 - this.svg.selectAll(".link").data(this.graph.links).remove();  
315 - this.svgLinks = this.svg.selectAll(".link").data(this.graph.links).enter() 363 + this.svg.selectAll(".link").data((this.prevNetwork != undefined) ? this.prevNetwork.links : net.links).remove();
  364 + this.svgLinks = this.svg.selectAll(".link").data(net.links);
  365 + this.svgLinks.enter()
316 .append("line") 366 .append("line")
317 .attr("class", "link") 367 .attr("class", "link")
318 - /* .attr("x1", function(d) { return d.source.x; })  
319 - .attr("y1", function(d) { return d.source.y; })  
320 - .attr("x2", function(d) { return d.target.x; })  
321 - .attr("y2", function(d) { return d.target.y; })*/  
322 - .attr("style", function(t){ return "stroke:" + t.color })  
323 - .style("stroke-width", function(d) { return d.size || 1; });  
324 -  
325 - this.svg.selectAll(".node").data(this.graph.nodes).remove();  
326 - this.svgNodes = this.svg.selectAll(".node").data(this.graph.nodes).enter() 368 + .attr("style", function(t){ return "stroke:#999999"; /*+ t.color*/ })
  369 + .style("stroke-width", function(d) { return d.size || 0.3; });
  370 +
  371 + this.svg.selectAll(".node").data((this.prevNetwork != undefined) ? this.prevNetwork.nodes : net.nodes).remove();
  372 + this.svgNodes = this.svg.selectAll(".node").data(net.nodes).enter()
327 .append("g") 373 .append("g")
328 .on("mouseover", this.mouseover) 374 .on("mouseover", this.mouseover)
329 .on("mouseout", this.mouseout) 375 .on("mouseout", this.mouseout)
330 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"}) 376 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
331 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""}) 377 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
332 .append("circle") 378 .append("circle")
333 - .on("click", this.active)  
334 - .attr("id", function(t){ return t.id })  
335 - .attr("class", function (t) { return t.fixed ? "" : "drag"})  
336 - .attr("r", function (t){ return t.r ? t.r : 15 })  
337 - .attr("style", function (t) { return t.color ? "fill:" + t.color : !1 + "; stroke:white"})  
338 - .attr("filter", function(t){return t.image ? 'url(#filter1)' : ""});  
339 -  
340 - //d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); 379 + .on("click", this.active)
  380 + .attr("id", function(t){ return t.id })
  381 + .attr("class", function (t) { return t.fixed ? "" : "drag"})
  382 + .attr("r", function (t){ return t.r ? t.r : 15 })
  383 + .attr("style", function (t) {
  384 + switch(parseInt(t.sentiment)){
  385 + case 1 :
  386 + t.color = "#1F77B4";
  387 + break;
  388 + case 2 :
  389 + t.color = "#2CA02C";
  390 + break;
  391 + case 3:
  392 + t.color = "#D62728";
  393 + break;
  394 + default:
  395 + t.color = "#333";
  396 + }
  397 + //return t.color ? "fill:" + t.color : !1 + "; stroke:white"
  398 + return "fill:" + t.color + "; stroke:white"
  399 + })
  400 + .attr("filter", function(t){return t.image ? 'url(#filter1)' : ""});
341 401
342 this.svg.style("opacity", 1e-6) 402 this.svg.style("opacity", 1e-6)
343 .transition() 403 .transition()
@@ -345,6 +405,8 @@ Example: @@ -345,6 +405,8 @@ Example:
345 .style("opacity", 1); 405 .style("opacity", 1);
346 406
347 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); 407 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
  408 +
  409 + this.prevNetwork = net;
348 }, 410 },
349 411
350 buildGraph: function (){ 412 buildGraph: function (){
@@ -355,7 +417,6 @@ Example: @@ -355,7 +417,6 @@ Example:
355 417
356 //set initial zoom 418 //set initial zoom
357 scale = (1.0); 419 scale = (1.0);
358 - //translate = [(width-scale*width)/2, ((height-scale*height)/4)];  
359 translate = [0, 0]; 420 translate = [0, 0];
360 this.svg.transition() 421 this.svg.transition()
361 .duration(750) 422 .duration(750)
@@ -382,6 +443,15 @@ Example: @@ -382,6 +443,15 @@ Example:
382 .append("feImage") 443 .append("feImage")
383 .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png"); 444 .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
384 445
  446 + for (var i = 0; i < this.graph.links.length; ++i) {
  447 + var o = this.graph.links[i];
  448 + o.source = this.graph.nodes[o.source];
  449 + o.target = this.graph.nodes[o.target];
  450 + }
  451 +
  452 + this.hullg = this.svg.append("g");
  453 +
  454 + this.getGroups();
385 this.init(); 455 this.init();
386 }, 456 },
387 457
@@ -400,87 +470,95 @@ Example: @@ -400,87 +470,95 @@ Example:
400 }, 470 },
401 471
402 tick : function () { 472 tick : function () {
403 - // d3.select("svg").attr("style", "transform:translate(8%)");  
404 - d3.selectAll("g foreignObject").attr("x", function (t) {  
405 - return t.x + (t.r ? 0.8 * t.r : 15)  
406 - }).attr("y", function (t) {  
407 - return t.y - 20  
408 - });  
409 -  
410 - d3.selectAll("#logo text").attr("x", function (t) {  
411 - return t.x + .7 * (t.r ? t.r : 15)  
412 - }).attr("y", function (t) {  
413 - return t.y  
414 - });  
415 -  
416 - _this.svgNodes.attr("cx", function (t) {  
417 - return t.x = Math.max(25, Math.min(_this.width - 50, t.x))  
418 - }).attr("cy", function (t) {  
419 - return t.y = Math.max(8, Math.min(600, t.y))  
420 - });  
421 -  
422 - _this.svgLinks.attr("x1", function (t) {  
423 - return t.source.x  
424 - }).attr("y1", function (t) {  
425 - return t.source.y  
426 - }).attr("x2", function (t) {  
427 - return t.target.x  
428 - }).attr("y2", function (t) {  
429 - return t.target.y  
430 - });  
431 -  
432 - //create hulls  
433 - //var n = [{key : "0", values : [ _this.graph.nodes[14], _this.graph.nodes[15], _this.graph.nodes[16],_this.graph.nodes[17], _this.graph.nodes[18]]}]; 473 + if(_this.hull != undefined) {
  474 + if (!_this.hull.empty()) {
  475 + _this.hull.data(_this.convexHulls)
  476 + .style("fill", function (d) {
  477 + return _this.fill(d.sentiment);
  478 + })
  479 + .attr("d", _this.drawCluster);
  480 + }
434 481
435 - //_this.createHulls([_this.hulls[2]]);  
436 - //_this.createHulls(_this.hulls);  
437 482
438 - var vertices = [];  
439 - for(var i=0; i < _this.groups[0][0].values.length;i++){  
440 - vertices.push([_this.groups[0][0].values[i].x, _this.groups[0][0].values[i].y]); 483 + d3.selectAll("g foreignObject").attr("x", function (t) {
  484 + return t.x + (t.r ? 0.8 * t.r : 15)
  485 + }).attr("y", function (t) {
  486 + return t.y - 20
  487 + });
  488 +
  489 + d3.selectAll("#logo text").attr("x", function (t) {
  490 + return t.x + .7 * (t.r ? t.r : 15)
  491 + }).attr("y", function (t) {
  492 + return t.y
  493 + });
  494 +
  495 + _this.svgNodes.attr("cx", function (t) {
  496 + return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
  497 + }).attr("cy", function (t) {
  498 + return t.y = Math.max(8, Math.min(600, t.y))
  499 + });
  500 +
  501 + _this.svgLinks.attr("x1", function (t) {
  502 + return t.source.x
  503 + }).attr("y1", function (t) {
  504 + return t.source.y
  505 + }).attr("x2", function (t) {
  506 + return t.target.x
  507 + }).attr("y2", function (t) {
  508 + return t.target.y
  509 + });
441 } 510 }
442 - _this.hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; }); 511 +
443 }, 512 },
444 513
445 mouseover : function (t) { 514 mouseover : function (t) {
446 - d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {  
447 - //return 1 == t.fixed ? 1.4 * t.r : 15  
448 - return 1 == t.fixed ? 1.4 * t.r : t.r + 10;  
449 - }); 515 + d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
  516 + .attr("r", function (t) {
  517 + return (t.extend == undefined) ? t.r + 1 : t.r + 10;
  518 + })
  519 + /*.attr("style", function(t){
  520 + return (t.extend == undefined) ? "fill:#FFFFFF; stroke:" + t.color : "fill:" + t.color + "; stroke:#FFFFFF";
  521 + })*/;
  522 +
450 523
451 _this.$.dialog.close(); 524 _this.$.dialog.close();
452 - _this.$.dialog_title.innerHTML = t.name; 525 + _this.$.dialog_title.innerHTML = (t.name) ? t.name : "Cluster";
453 _this.$.dialog_content.innerHTML = t.content; 526 _this.$.dialog_content.innerHTML = t.content;
454 527
455 _this.$.dialog.open(); 528 _this.$.dialog.open();
456 }, 529 },
457 530
458 mouseout : function () { 531 mouseout : function () {
459 - d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {  
460 - return t.r ? t.r : 15  
461 - }); 532 + d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400)
  533 + .attr("r", function (t) {
  534 + return t.r ? t.r : 15
  535 + })
  536 + /*.attr("style", function(t){
  537 + return (t.extend == undefined) ? "stroke:#FFFFFF; fill:" + t.color : "stroke:#FFFFFF; fill:" + t.color;
  538 + })*/;
462 _this.$.dialog.close(); 539 _this.$.dialog.close();
463 }, 540 },
464 541
465 active : function (t) { 542 active : function (t) {
466 543
467 - _this.init();  
468 - _this.fire('graph-datalet_node-clicked', {node : t}); 544 + if(t.extend == undefined)
  545 + {
  546 + _this.init();
  547 + _this.fire('graph-datalet_node-clicked', {node : t});
469 548
470 - if(_this.prev_selected_node != null){  
471 - _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;  
472 - _this.prev_selected_node.style.stroke = "#FFFFFF";  
473 - }  
474 -  
475 - _this.prev_selected_node = document.getElementById("" + t.id);  
476 - _this.prev_selected_node.style.fill = "#FFFFFF"  
477 - _this.prev_selected_node.style.stroke = t.color;  
478 -  
479 - /* _this.$.dialog.close();  
480 - _this.$.dialog_title.innerHTML = t.name;  
481 - _this.$.dialog_content.innerHTML = t.content; 549 + if(_this.prev_selected_node != null){
  550 + _this.prev_selected_node.style.fill = _this.prev_selected_node.color;
  551 + _this.prev_selected_node.style.stroke = "#FFFFFF";
  552 + }
482 553
483 - _this.$.dialog.open();*/ 554 + _this.prev_selected_node = document.getElementById("" + t.id);
  555 + _this.prev_selected_node.style.fill = "#FFFFFF";
  556 + _this.prev_selected_node.style.stroke = t.color;
  557 + }else{
  558 + var gids = t.id.split("-");
  559 + _this.groups[gids[0]][gids[1]].extend = true;
  560 + _this.init();
  561 + }
484 }, 562 },
485 563
486 _onCloseClick : function(){ 564 _onCloseClick : function(){
@@ -505,9 +583,9 @@ Example: @@ -505,9 +583,9 @@ Example:
505 width: "100%", 583 width: "100%",
506 height: "100%" 584 height: "100%"
507 }).attr("viewBox", "0 0 " + this.width + " " + this.height) 585 }).attr("viewBox", "0 0 " + this.width + " " + this.height)
508 - .attr("pointer-events", "all") 586 + .attr("pointer-events", "all")
509 .attr("style", "transform:translate(0px)") 587 .attr("style", "transform:translate(0px)")
510 - .style("position", "absolute"); 588 + .style("position", "absolute");
511 589
512 this.buildGraph(); 590 this.buildGraph();
513 } 591 }
demo.html
  View file @4143bce
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
  4 + <meta charset="UTF-8">
  5 +
  6 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  7 +
4 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html"> 8 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
5 - <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">  
6 - <link rel="import" href="bower_components/paper-menu/paper-menu.html">  
7 <link rel="import" href="bower_components/paper-item/paper-item.html"> 9 <link rel="import" href="bower_components/paper-item/paper-item.html">
8 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 10 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
9 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 11 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
10 - <link rel="import" href="bower_components/paper-styles/color.html">  
11 - <link rel="import" href="bower_components/paper-input/paper-textarea.html">  
12 - <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">  
13 - <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">  
14 -  
15 - <link rel="import" href="controllets/animated-button-container-controllet/animated-button-container-controllet.html">  
16 - <link rel="import" href="controllets/items-list-controllet/item-list-controllet.html">  
17 - <link rel="import" href="controllets/draggable-element-controllet/draggable-element-controllet.html">  
18 - <link rel="import" href="controllets/treeview-controllet/treeview-controllet.html">  
19 - <link rel="import" href="controllets/text-element-controllet/text-element-controllet.html"> 12 + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
20 13
21 - <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>  
22 <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 14 <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
23 - <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
24 - <script src="../DEEPCLIENT/js/deepClient.js"></script> 15 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
25 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script> 16 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
26 17
27 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
28 - <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
29 - <link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">  
30 - <meta charset="UTF-8">  
31 -  
32 18
33 <script type="text/javascript"> 19 <script type="text/javascript">
34 - selected_component_url = "";  
35 -  
36 $(document).ready(function () { 20 $(document).ready(function () {
37 - window.addEventListener("treeview-controllet_fileds-selected", DEEP._fieldsSelected, false);  
38 - window.addEventListener("items-list-controllet_item-selected", DEEP._dataletSelected, false);  
39 - window.addEventListener("draggable-element-controllet_content-dragged", DEEP._fieldsMapped, false);  
40 - window.addEventListener("text-element-controllet_content-changed", DEEP._textElementChanged, false);  
41 -  
42 editAreaLoader.init({ 21 editAreaLoader.init({
43 - id : "sbiricuda" // textarea id  
44 - ,syntax: "html" // syntax to be uses for highgliting  
45 - ,start_highlight: true // to display with highlight mode on start-up  
46 - ,syntax: "html"  
47 - ,replace_tab_by_spaces: 4,  
48 - isEditable : false, 22 + id : "sbiricuda", // textarea id
  23 + syntax: "html", // syntax to be uses for highgliting
  24 + start_highlight: true, // to display with highlight mode on start-up
  25 + replace_tab_by_spaces: 4,
  26 + isEditable : false
49 }); 27 });
50 }); 28 });
  29 +
  30 + var createHTML = function(e)
  31 + {
  32 + var dataletHTML = "";
  33 +
  34 + dataletHTML = '<' + e.detail.data.datalet;
  35 +
  36 + for (var property in e.detail.data.params) {
  37 + if (e.detail.data.params.hasOwnProperty(property)) {
  38 + if(property != "_colorIndex")
  39 + dataletHTML += ' ' + property + '="' + e.detail.data.params[property] + '"';
  40 + }
  41 + }
  42 +
  43 + dataletHTML += ' fields=\'' + JSON.stringify(e.detail.data.fields) + '\'';
  44 + dataletHTML += ' data=\'' + e.detail.data.staticData + '\'>';
  45 + dataletHTML += '</'+e.detail.data.datalet+'>';
  46 +
  47 + var dataletImport = '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +
  48 + '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +
  49 + '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n';
  50 +
  51 + var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
  52 +
  53 + editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
  54 + }
  55 +
51 </script> 56 </script>
52 57
53 <style> 58 <style>
  59 +
54 body { 60 body {
55 font-family: 'Roboto', sans-serif; 61 font-family: 'Roboto', sans-serif;
56 } 62 }
57 63
58 - .avatar  
59 - {  
60 - display: inline-block;  
61 - height: 0.5em;  
62 - width: 0.5em;  
63 - border-radius: 50%;  
64 - /*background: #3f51b5;*/  
65 - color: white;  
66 - line-height: 2em;  
67 - font-size: 1.87em;  
68 - text-align: center;  
69 - margin-right: 5px;  
70 - }  
71 -  
72 #toolbar{ 64 #toolbar{
73 background: #2196F3 ; 65 background: #2196F3 ;
74 } 66 }
  67 +
75 #logo{ 68 #logo{
76 width: 56px; 69 width: 56px;
77 height: 56px; 70 height: 56px;
@@ -81,90 +74,10 @@ @@ -81,90 +74,10 @@
81 background-position: center center; 74 background-position: center center;
82 75
83 } 76 }
84 - .area_container  
85 - {  
86 - overflow: hidden;  
87 - margin : 0.8em;  
88 - padding : 0.8em;  
89 - border-width: 1em;  
90 - border-radius: 0.125rem;  
91 - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);  
92 - }  
93 -  
94 - #visualization_slider_area  
95 - {  
96 - min-width: 566px;  
97 - height: 100px;  
98 - }  
99 - .content-card {  
100 - position: relative;  
101 - float: left;  
102 - margin: .2em;  
103 - width: 14%;  
104 - min-height: 100px;  
105 - height: 40%;  
106 - background: #fff;  
107 - -moz-border-radius: 0.125rem;  
108 - -webkit-border-radius: 0.125rem;  
109 - border-radius: 0.125rem;  
110 - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
111 - -webkit-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
112 - -moz-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
113 - padding: 1em;  
114 - }  
115 -  
116 - .content-selected{  
117 - position: relative;  
118 - float: left;  
119 - top : 5%;  
120 - margin : .2em;  
121 - width: 14%;  
122 - height: 40%;  
123 -  
124 - background: #fff;  
125 - border-style: solid;  
126 - border-width: 0.03em;  
127 - -moz-border-radius: 0.125rem;; /* Firefox */  
128 - -webkit-border-radius: 0.125rem;; /* Safari, Chrome */  
129 - border-radius: 0.125rem;  
130 - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
131 - -webkit-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
132 - -moz-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
133 - padding: 1em;  
134 - }  
135 -  
136 </style> 77 </style>
137 78
138 </head> 79 </head>
139 -<body unresolved>  
140 -  
141 -<template id="DEEP" is="dom-bind">  
142 -  
143 - <iron-ajax  
144 - auto  
145 - id="data_request"  
146 - url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"  
147 - verbose="true"  
148 - on-response="handleResponseData"  
149 - debounce-duration="300">  
150 - </iron-ajax>  
151 -  
152 - <iron-ajax  
153 - id="datales_list_request"  
154 - auto  
155 - url={{datasetsList}}  
156 - handle-as="json"  
157 - on-response="handleResponseDatalets"  
158 - debounce-duration="300">  
159 - </iron-ajax>  
160 -  
161 - <iron-ajax  
162 - id="selected_datalet_request"  
163 - url={{deepUrl}}  
164 - verbose="true"  
165 - on-response="handleSelectedDatalet"  
166 - debounce-duration="300">  
167 - </iron-ajax> 80 +<body>
168 81
169 <paper-toolbar id="toolbar"> 82 <paper-toolbar id="toolbar">
170 <paper-menu-button> 83 <paper-menu-button>
@@ -175,380 +88,71 @@ @@ -175,380 +88,71 @@
175 </paper-menu> 88 </paper-menu>
176 </paper-menu-button> 89 </paper-menu-button>
177 <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span> 90 <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
178 - <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" ></paper-icon-button></a> 91 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>
179 </paper-toolbar> 92 </paper-toolbar>
180 - <div id="main_content">  
181 - <div class="vertical justified layout" style="margin-top: 40px;">  
182 -  
183 - <div class="horizontal layout area_container">  
184 - <p>  
185 - Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,  
186 - query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).  
187 - Datalet are reusable since they can be placed in every web page, like institutional web-sites,  
188 - blogs, forums and so on, without any knowledge on how it effectively is implemented.  
189 - </p>  
190 - </div>  
191 -  
192 - <div class="horizontal layout">  
193 - <paper-textarea style="width: 80%;margin-top: 8px;" id="data_url" label="Dataset api data url" floatingLabel value="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f" on-change="_textElementChanged"></paper-textarea>  
194 - <paper-dropdown-menu style="width: 20%;" id="datasets-sources" label="Example datasets">  
195 - <paper-menu class="dropdown-content">  
196 - <template is="dom-repeat" items="[[Datasets.names]]" as="dataset" index-as="i">  
197 - <paper-item id="[[i]]" on-tap="_datasourceSelected">[[dataset]]</paper-item>  
198 - </template>  
199 - </paper-menu>  
200 - </paper-dropdown-menu>  
201 - </div>  
202 -  
203 - <div class="horizontal layout">  
204 -  
205 - <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
206 - <treeview-controllet id="fields_treeview"></treeview-controllet>  
207 - </div>  
208 -  
209 - <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="table_fields_container" class="area_container flex2child">  
210 - <div id="table_component_place_holder"></div>  
211 - </div>  
212 -  
213 - </div>  
214 -  
215 - <div class="horizontal layout">  
216 -  
217 - <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_params_main_placeholder" class="area_container flexchild" style="min-width:300px">  
218 - <div class="">  
219 - <div id="visualization_slider_area" class="area_container"></div>  
220 - <div id="fields_mapping_area" class="area_container horizontal layout">  
221 -  
222 - <div id="selected_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">  
223 - <div class="title">  
224 - <div class="medium">Selected fields</div>  
225 - </div>  
226 - <div id="selected_fields_container" class="area_container"></div>  
227 - </div>  
228 -  
229 - <div id="idm_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">  
230 - <div class="title">  
231 - <div class="medium">Datalet fields</div>  
232 - </div>  
233 - <div id="datalet_idm_fields_container" class="area_container"></div>  
234 - </div>  
235 - </div>  
236 - <div id="idm_layout_main_container" class="area_container" style="position:relative;min-height: 20vh;max-height: 20vh;">  
237 - <div class="title">  
238 - <div class="medium">Layout fields</div>  
239 - </div>  
240 - <div id="idm_layout_container" class="area_container"></div>  
241 - </div>  
242 - </div>  
243 -  
244 - </div>  
245 -  
246 - <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_main_container" class="area_container flex2child">  
247 - </div>  
248 -  
249 - </div>  
250 -  
251 - <div class="horizontal layout">  
252 - <div id="code_area" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" class="area_container flex2child">  
253 - <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50">  
254 - Copy and paste this code to inject the datalet in you page.  
255 - </textarea>  
256 - </div>  
257 - </div>  
258 -  
259 - </div>  
260 93
  94 + <div class="">
  95 + <p>
  96 + Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
  97 + query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
  98 + Datalet are reusable since they can be placed in every web page, like institutional web-sites,
  99 + blogs, forums and so on, without any knowledge on how it effectively is implemented.
  100 + </p>
261 </div> 101 </div>
262 -</template>  
263 -<script>  
264 -  
265 - //DEEP.deepUrl = "http://deep.routetopa.eu/DEEP/";  
266 - //DEEP.datasetsList = "http://deep.routetopa.eu/DEEP/datalets-list";  
267 - DEEP.deepUrl = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/";  
268 - DEEP.datasetsList = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list";  
269 -  
270 - DEEP.Datasets = {  
271 - names:[  
272 - 'Italy - Consuntivo entrate 2009',  
273 - 'Italy - Consuntivo entrate 2010',  
274 - 'Italy - Consuntivo entrate 2011',  
275 - 'Italy - Consuntivo entrate 2012',  
276 - 'Italy - Consuntivo entrate 2014',  
277 - 'Holland - Vestigingen register gemeente Groningen',  
278 - 'Holland - Woonruimte gemeente Groningen',  
279 - 'Ireland - SDCC Traffic Cameras',  
280 - 'Ireland - Derelict Site Register',  
281 - 'Ireland - Dublin City Council Commencement Notices',  
282 - 'Ireland - Dublin City Council Planning Applications',  
283 - 'Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',  
284 - 'Ireland - Fingal Council Planning Applications for last 7 years',  
285 - 'Ireland - Planning Register',  
286 - 'Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures',  
287 - 'Bubble example',  
288 - 'Issy - 3d pie chart'  
289 - ],  
290 - urls: [  
291 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f',  
292 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda',  
293 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89',  
294 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee',  
295 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',  
296 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd',  
297 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f',  
298 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52',  
299 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc',  
300 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075',  
301 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e',  
302 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff',  
303 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441',  
304 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d',  
305 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6',  
306 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',  
307 - "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"  
308 - ]  
309 - };  
310 -  
311 - DEEP.selected_fields = undefined;  
312 -  
313 - DEEP.handleResponseData = function(e){  
314 - DEEP.$.fields_treeview.init(e.detail.response);  
315 - $("#fields_placeholder").perfectScrollbar();  
316 - $("#table_fields_container").perfectScrollbar();  
317 - };  
318 -  
319 - DEEP.handleResponseDatalets = function(e){  
320 - DEEP.datalets_list = new Array();  
321 - for(var i=0;i < e.detail.response.length;i++){  
322 - var datalet_info = { name : e.detail.response[i].name ,  
323 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
324 - };  
325 -  
326 - DEEP.datalets_list.push(datalet_info);  
327 - }  
328 102
329 - DEEP.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
330 - '<items-list-controllet' +  
331 - ' replace-string="-datalet"' +  
332 - ' items=\'' + JSON.stringify(DEEP.datalets_list) + '\'>' +  
333 - '</items-list-controllet>' +  
334 - '</animated-button-container-controllet>';  
335 - };  
336 -  
337 - DEEP.handleSelectedDatalet = function(e){  
338 -  
339 - var response = e.detail.response;  
340 - DEEP.$.datalet_idm_fields_container.innerHTML = "";  
341 - DEEP.$.idm_layout_container.innerHTML = "";  
342 -  
343 - var input;  
344 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
345 -  
346 - if(response.idm.inputs.input.constructor == Object) {  
347 - if(response.idm.inputs.input.selection == "*")  
348 - {  
349 - var fields = this.$.selected_fields_container.querySelectorAll('draggable-element-controllet');  
350 - input = response.idm.inputs.input;  
351 - response.idm.inputs.input = new Array();  
352 - for(var i=0;i<fields.length;i++){  
353 - var newInput = jQuery.extend(true, {}, input);  
354 - newInput.name = input.name + ' ' + (i + 1);  
355 - response.idm.inputs.input.push(newInput);  
356 - }  
357 - }  
358 - }  
359 -  
360 - var heading;  
361 - var id;  
362 -  
363 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
364 - var html = '<draggable-element-controllet is-target="true" ';  
365 - input = response.idm.inputs.input[i];  
366 -  
367 - heading = ' heading="' + input.name + '"';  
368 - id = ' id="' + (i + 1) + '"';  
369 -  
370 - html += heading + id;  
371 - html += ' description="' + input.description + '"' +  
372 - ' number="' + (i + 1) + '"';  
373 -  
374 - if(DEEP.selected_fields != undefined) {  
375 - if(this.selected_fields[i] != undefined) {  
376 - html += ' value="' + this.selected_fields[i] + '"' +  
377 - ' label="' + this.selected_fields[i].split(",")[this.selected_fields[i].split(",").length - 1] + '"';  
378 - }  
379 - }  
380 -  
381 - html += '></draggable-element-controllet>';  
382 - this.$.datalet_idm_fields_container.innerHTML += html;  
383 -  
384 - }  
385 -  
386 - if(layouts.input != undefined) {  
387 - if(layouts.input.constructor == Object){  
388 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
389 - }  
390 -  
391 - html = '<text-element-controllet ';  
392 - for (var i = 0; i < layouts.input.length; i++) {  
393 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
394 - 'description="' + layouts.input[i].description + '" ' +  
395 - 'number="' + (i + 1) + '" ';  
396 -  
397 - html += '></text-element-controllet>';  
398 - }  
399 - DEEP.$.idm_layout_container.innerHTML = html;  
400 - }  
401 -  
402 - if(DEEP.selected_fields != undefined) DEEP.generateDataletPreview();  
403 -  
404 - $("#selected_fields_main_container").perfectScrollbar();  
405 - $("#idm_fields_main_container").perfectScrollbar();  
406 - $("#idm_layout_main_container").perfectScrollbar();  
407 - $("#datalet_params_main_placeholder").perfectScrollbar();  
408 - };  
409 -  
410 - DEEP._urlChanged = function(event){  
411 - DEEP.$.data_request.url = event.target.value;  
412 - DEEP.$.data_request.generateRequest();  
413 - DEEP.$.table_component_place_holder.innerHTML = "";  
414 - };  
415 -  
416 - DEEP._datasourceSelected = function(event){  
417 - DEEP.$.data_url.value = DEEP.Datasets.urls[parseInt(event.target.id)];  
418 - DEEP.$.data_request.url = DEEP.Datasets.urls[parseInt(event.target.id)];  
419 - DEEP.$.data_request.generateRequest();  
420 - DEEP.$.table_component_place_holder.innerHTML = "";  
421 - };  
422 -  
423 - DEEP._fieldsSelected = function(e){  
424 -  
425 - DEEP.$.selected_fields_container.innerHTML = "";  
426 - for(var i=0;i<e.detail.fields.length;i++) {  
427 - DEEP.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
428 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
429 - '"></draggable-element-controllet><br>';  
430 - }  
431 -  
432 - ComponentService.deep_url = DEEP.deepUrl;  
433 -  
434 - ComponentService.getComponent({  
435 - component : "datatable-datalet",  
436 - params :{  
437 - 'data-url' : DEEP.$.data_url.value  
438 - },  
439 - fields : e.detail.fields,  
440 - placeHolder : DEEP.$.table_component_place_holder  
441 - });  
442 -  
443 - };  
444 -  
445 - DEEP._dataletSelected = function(e){  
446 - DEEP.selected_datalet = e.detail.datalet;  
447 - DEEP.$.selected_datalet_request.url = DEEP.deepUrl + e.detail.datalet;  
448 - DEEP.$.selected_datalet_request.generateRequest();  
449 - };  
450 -  
451 - DEEP._fieldsMapped = function(e){  
452 - DEEP.generateDataletPreview();  
453 - };  
454 -  
455 - DEEP.timer = 0;  
456 - DEEP._textElementChanged = function(e){  
457 - clearTimeout (DEEP.timer);  
458 - DEEP.timer = setTimeout(DEEP.generateDataletPreview, 1500);  
459 - };  
460 -  
461 - DEEP.getXMLHttpRequest = function()  
462 - {  
463 - if (window.XMLHttpRequest) {  
464 - return new XMLHttpRequest();  
465 - }  
466 - else {  
467 - try {  
468 - return new ActiveXObject("MSXML2.XMLHTTP.3.0");  
469 - }  
470 - catch(ex) {  
471 - return null;  
472 - }  
473 - }  
474 - };  
475 -  
476 - DEEP.generateDataletPreview = function(){  
477 -  
478 - var input_mapped_fields = Polymer.dom(DEEP.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
479 - DEEP.selected_fields = Array();  
480 -  
481 - for (var i = 0; i < input_mapped_fields.length; i++) {  
482 - if (input_mapped_fields[i].value != "") {  
483 - DEEP.selected_fields.push(input_mapped_fields[i].value);  
484 - }  
485 - }  
486 -  
487 - var input_layouts_fields = Polymer.dom(DEEP.$.idm_layout_container).querySelectorAll('text-element-controllet');  
488 - DEEP.params_fields = {'data-url' : DEEP.$.data_url.value};  
489 -  
490 - for (var i = 0; i < input_layouts_fields.length; i++) {  
491 - if (input_layouts_fields[i].value != "") {  
492 - DEEP.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
493 - }  
494 - }  
495 -  
496 - ComponentService.deep_url = DEEP.deepUrl;  
497 - ComponentService.getComponent({  
498 - component : DEEP.selected_datalet,  
499 - params : DEEP.params_fields,  
500 - fields : DEEP.selected_fields,  
501 - placeHolder : DEEP.$.datalet_main_container  
502 - });  
503 -  
504 - var request = DEEP.getXMLHttpRequest();  
505 -  
506 - request.onreadystatechange = function(){  
507 - if(request.readyState == 4){  
508 - try {  
509 - var resp = JSON.parse(request.response);  
510 - var link = '<link rel="import" href="' + resp.bridge_link + resp.component_link +'">\n';  
511 -  
512 - //Build datalet injecting html code  
513 - var datalet_code = link + '<' + DEEP.selected_datalet;  
514 - var keys = Object.keys(DEEP.params_fields);  
515 - for(var i = 0; i < keys.length; i++){  
516 - datalet_code += ' ' + keys[i] + '=\'' + DEEP.params_fields[keys[i]] +'\'';  
517 - }  
518 - datalet_code += " fields='" + JSON.stringify(DEEP.selected_fields) + "'></" + DEEP.selected_datalet + ">";  
519 -  
520 - //'<!-- ADD THE POLYFILL TO YOUR PAGE - https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.14/webcomponents.min.js -->\n'  
521 -  
522 - DEEP.$.code_area.innerHTML = '<textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50" autofocus="false">' +  
523 - '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +  
524 - '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +  
525 - '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n'  
526 - + datalet_code +  
527 - '</textarea>';  
528 -  
529 - editAreaLoader.init({  
530 - id : "sbiricuda" // textarea id  
531 - ,syntax: "html" // syntax to be uses for highgliting  
532 - ,start_highlight: true // to display with highlight mode on start-up  
533 - ,syntax: "html"  
534 - ,replace_tab_by_spaces: 4,  
535 - isEditable : false,  
536 - });  
537 -  
538 - } catch (e){  
539 - var resp = {  
540 - status: 'error',  
541 - data: 'Unknown error occurred: [' + request.response + ']'  
542 - };  
543 - }  
544 - }};  
545 -  
546 - request.open('GET', DEEP.deepUrl + DEEP.selected_datalet);  
547 - request.send();  
548 -  
549 - }; 103 + <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='
  104 + <head>
  105 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  106 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  107 + <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />
  108 + <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  109 + <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  110 + <script type="text/javascript">
  111 + $(document).ready(function () {
  112 +
  113 + var datasets = [
  114 + {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},
  115 + {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},
  116 + {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},
  117 + {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},
  118 + {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  119 + {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},
  120 + {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},
  121 + {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},
  122 + {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},
  123 + {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},
  124 + {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},
  125 + {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},
  126 + {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},
  127 + {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},
  128 + {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},
  129 + {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  130 + {decription:"", name:"Issy - 3d pie chart", 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"}
  131 + ];
  132 +
  133 + var dsc = document.getElementById("dsc");
  134 + dsc.setAttribute("datasets", JSON.stringify(datasets));
  135 +
  136 + window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
  137 +
  138 + });
  139 + </script>
  140 + </head>
  141 + <body>
  142 + <data-sevc-controllet localization="en" id="dsc" deep-url="http://deep.routetopa.eu/DEEP/" datalets-list-url="http://deep.routetopa.eu/DEEP/datalets-list"></data-sevc-controllet>
  143 + </body>
  144 + '>
  145 + </iframe>
  146 +
  147 + <div id="code_area">
  148 + <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">
  149 +Copy and paste this code to inject the datalet in you page.
  150 + </textarea>
  151 + </div>
550 152
551 -</script> 153 + <!--<div>
  154 + <textarea style="width: 90%; margin-left:10px; height: 110px" id="code-textarea"></textarea>
  155 + </div>-->
552 156
553 </body> 157 </body>
554 </html> 158 </html>
555 \ No newline at end of file 159 \ No newline at end of file
locales/en.l20n deleted
View file @8f4623a
1 -<slide1Title "SELECT DATASET">  
2 -<slide1Subtitle "Search or copy and paste the url of dataset.">  
3 -<slide2Title "SELECT DATA">  
4 -<slide2Subtitle "Select the fields from tree-view. The multi-table will show the values related to the selected fields.">  
5 -<slide3Title "SELECT VISUALIZATION">  
6 -<slide3Subtitle "Select a visualization, fill out inputs and labels (optional).">  
7 -  
8 -<listView "LIST VIEW">  
9 -<treeMapView "TREE MAP VIEW">  
10 -<mostPopular "MOST POPULAR">  
11 -<availableDatasets "Available datasets">  
12 -<suggestedDatasets "Suggested datasets">  
13 -<selectedUrl "Selected url">  
14 -  
15 -<inputs "INPUTS">  
16 -<layouts "LABELS / OPTIONS">  
17 -<baseInfo "BASE INFO">  
18 -<comment "COMMENT">  
19 -<commentLabel "comment (max 100 characters)">  
20 -<dataletPreview "PREVIEW">  
21 -<addDatalet "ADD">  
22 -<modifyDatalet "MODIFY">  
23 -  
24 -<cellDescription "The cell of table.">  
25 -<levelDescription "It is the level field that the datalet will use to group the values at corrisponding field number level.">  
26 -  
27 -<categoriesDescription "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.">  
28 -<seriesDescription "The chart series. Its values will be put in the vertical axis.">  
29 -  
30 -<XAxisLabelDescription "The label for the X axis.">  
31 -<YAxisLabelDescription "The label for the Y axis.">  
32 -<suffixDescription "The values suffix (eg units, dollars, euro, ...).">  
33 -  
34 -<pieSeriesDescription "The chart series. Its values will be put on slice of each series.">  
35 -<pieSizeDescription "The size for each series to create a concentric rings.">  
36 -  
37 -<bubbleCategoriesDescription "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.">  
38 -<bubbleYValuesDescription "The chart plots y values. Its values will be put in the vertical axis.">  
39 -<bubbleZValuesDescription "The chart plots z value. Its values represent the size of the bubble.">  
40 -<bubbleSeriesDescription "The chart series. Its values visualize multi- series bubbles chart.">  
41 -  
42 -<scatterCategoriesDescription "The chart categories. You need one value for each series.">  
43 -<scatterXValuesDescription "The chart plots x values. Its values will be put in the horizontal axis.">  
44 -<scatterYValuesDescription "The chart plots y value. Its values will be put in the vertical axis.">  
45 -  
46 -<heatmapCategoriesDescription "The chart categories. Its values will be put in the horizontal axis.">  
47 -  
48 -  
49 -<LatitudeDescription "It is latitude of the points you want to show in the map.">  
50 -<LongitudeDescription "It is longitude of the points you want to show in the map.">  
51 -<BalloonContentDescription "It is the text associated to the marker or the link to the image related to the camera associated to each points.">  
52 \ No newline at end of file 0 \ No newline at end of file
locales/fr.l20n deleted
View file @8f4623a
1 -<slide1Title "SELECTIONNER UN JEU DE DONNEES">  
2 -<slide1Subtitle "Rechercher ou copier/coller l’url du jeu de données.">  
3 -<slide2Title "SELECTIONNER DONNEES">  
4 -<slide2Subtitle "Sélectionner les champs à partir de l’arborescence. Une fenêtre vous indiquera les valeurs relatives aux champs sélectionnés.">  
5 -<slide3Title "SELECTIONNER UN MODE DE VISUALISATION">  
6 -<slide3Subtitle "Sélectionner un mode de visualisation, remplir les entrées et les vignettes (optionnel).">  
7 -  
8 -<listView "VUE EN LISTE">  
9 -<treeMapView "VUE EN ARBORESCENCE">  
10 -<mostPopular "LES PLUS POPULAIRES">  
11 -<availableDatasets "Jeux de données disponibles">  
12 -<suggestedDatasets "Jeux de données suggérés">  
13 -<selectedUrl "Sélectionner URL">  
14 -  
15 -<inputs "SORTIES">  
16 -<layouts "VIGNETTES/OPTIONSs">  
17 -<baseInfo "INFORMATION DE BASE">  
18 -<comment "COMMENTAIRES">  
19 -<commentLabel "Commentaires (maximum 100 caractères) ">  
20 -<dataletPreview "PREVISUALISATION">  
21 -<addDatalet "AJOUTER">  
22 -<modifyDatalet "MODIFIER">  
23 -  
24 -<cellDescription "Cellules du tableau.">  
25 -<levelDescription "C’est le niveau local que le graphique utilisera pour grouper les valeurs correspondantes au nombre de niveaux de champs">  
26 -  
27 -<categoriesDescription "Catégories de graphiques. Ses valeurs seront insérées dans l’axe horizontal. Vous devez insérer une valeur pour chaque série.">  
28 -<seriesDescription "Catégories de graphique. Ses valeurs seront insérées dans l’axe vertical.">  
29 -  
30 -<XAxisLabelDescription "Vignette pour l’axe X.">  
31 -<YAxisLabelDescription "Vignette pour l’axe Y.">  
32 -<suffixDescription "Unités de mesures (ex: dollars, euros.">  
33 -  
34 -<pieSeriesDescription "Série de graphiques. Ses valeurs seront intégrées au sein des segments de chaque série.">  
35 -<pieSizeDescription "Taille de chaque série afin de créer un anneau concentrique.">  
36 -  
37 -<bubbleCategoriesDescription "Catégories de graphique. Ses valeurs seront insérées dans l’axe horizontal. Vous devez insérer une valeur pour chaque série.">  
38 -<bubbleYValuesDescription "Le graphique présente les valeurs Y. Ses valeurs seront insérées dans l’axe vertical.">  
39 -<bubbleZValuesDescription "Le graphique présente les valeurs Z. Ses valeurs représentent la taille des bulles.">  
40 -<bubbleSeriesDescription "The chart series. Its values visualize multi- series bubbles chart.">  
41 -  
42 -<scatterCategoriesDescription "The chart categories. You need one value for each series.">  
43 -<scatterXValuesDescription "The chart plots x values. Its values will be put in the horizontal axis.">  
44 -<scatterYValuesDescription "The chart plots y value. Its values will be put in the vertical axis.">  
45 -  
46 -<heatmapCategoriesDescription "The chart categories. Its values will be put in the horizontal axis.">  
47 -  
48 -<LatitudeDescription "Latitude des points que vous souhaitez montrer sur la carte.">  
49 -<LongitudeDescription "Longitude des points que vous souhaitez montrer sur la carte.">  
50 -<BalloonContentDescription "It is the text associated to the marker or the link to the image related to the camera associated to each points.">  
51 \ No newline at end of file 0 \ No newline at end of file
locales/it.l20n deleted
View file @8f4623a
1 -<slide1Title "SELEZIONA IL DATASET">  
2 -<slide1Subtitle "Ricerca o copia e incolla la url del dataset.">  
3 -<slide2Title "SELEZIONA I DATI">  
4 -<slide2Subtitle "Seleziona i campi dalla struttura ad albero. Nella tabella saranno mostrati i valori dei campi selezionati.">  
5 -<slide3Title "SELEZIONA LA VISUALIZZAZIONE">  
6 -<slide3Subtitle "Seleziona una visualizzazione, inserisci dati di input ed etichette (opzionale).">  
7 -  
8 -<listView "ELENCO">  
9 -<treeMapView "GRAFICO AD ALBERO">  
10 -<mostPopular "I PIÙ VISTI">  
11 -<availableDatasets "Dataset disponibili">  
12 -<suggestedDatasets "Dataset suggeriti">  
13 -<selectedUrl "Url selezionata">  
14 -  
15 -<inputs "DATI DI INPUT">  
16 -<layouts "ETICHETTE / OPZIONI">  
17 -<baseInfo "INFORMAZIONI DI BASE">  
18 -<comment "COMMENTO">  
19 -<commentLabel "commento (massimo 100 caratteri)">  
20 -<dataletPreview "ANTEPRIMA">  
21 -<addDatalet "AGGIUNGI">  
22 -<modifyDatalet "MODIFICA">  
23 -  
24 -<cellDescription "Cella della tabella.">  
25 -<levelDescription "Livello utilizzato per il raggruppamento dei valori corrispondenti.">  
26 -  
27 -<categoriesDescription "Categorie del grafico. I valori saranno inseriti sull’asse orizzontale. Inserire un valore per ciascuna serie.">  
28 -<seriesDescription "Serie del grafico. I valori saranno inseriti sull’asse verticale.">  
29 -  
30 -<XAxisLabelDescription "Etichetta asse X.">  
31 -<YAxisLabelDescription "Etichetta asse Y.">  
32 -<suffixDescription "Suffisso valore (e.g. unità di misura, dollari, euro,…).">  
33 -  
34 -<pieSeriesDescription "Serie del grafico. I valori saranno inseriti sulla porzione corrispondente alla relativa serie.">  
35 -<pieSizeDescription "Dimensione di ciascuna serie per creare anelli concentrici">  
36 -  
37 -<bubbleCategoriesDescription "Serie del grafico. Inserire un valore per ciascuna serie.">  
38 -<bubbleYValuesDescription "Valori y del grafico. I valori saranno inseriti sull’asse verticale">  
39 -<bubbleZValuesDescription "Valori z del grafico. I valori rappresentano la dimensione della bolla.">  
40 -<bubbleSeriesDescription "Serie del grafico. I valori visualizzano un grafico a bolle a serie multipla.">  
41 -  
42 -<scatterCategoriesDescription "Categorie del grafico. Inserire un valore per ciascuna serie.">  
43 -<scatterXValuesDescription "Serie del grafico. I valori saranno inseriti sull’asse orizzontale.">  
44 -<scatterYValuesDescription "Serie del grafico. I valori saranno inseriti sull’asse verticale..">  
45 -  
46 -<heatmapCategoriesDescription "Categorie del grafico. I valori saranno inseriti sull’asse orizzontale.">  
47 -  
48 -<LatitudeDescription "Latitudine del punto da riportare sulla mappa.">  
49 -<LongitudeDescription "Longitudine del punto da riportare sulla mappa.">  
50 -<BalloonContentDescription "Descrizione del segnaposto o link all'immagine che visualizza il luogo specificato sulla mappa.">  
51 \ No newline at end of file 0 \ No newline at end of file
locales/lnHashMap.js 0 → 100644
  View file @4143bce
  1 +var ln = [];
  2 +
  3 +/* IT */
  4 +ln["slide1Title_it"] = "SELEZIONA IL DATASET";
  5 +ln["slide1Subtitle_it"] = "Ricerca o copia e incolla la url del dataset.";
  6 +ln["slide2Title_it"] = "SELEZIONA I DATI";
  7 +ln["slide2Subtitle_it"] = "Seleziona i campi dalla struttura ad albero. Nella tabella saranno mostrati i valori dei campi selezionati.";
  8 +ln["slide3Title_it"] = "SELEZIONA LA VISUALIZZAZIONE";
  9 +ln["slide3Subtitle_it"] = "Seleziona una visualizzazione, inserisci dati di input ed etichette (opzionale).";
  10 +
  11 +ln["listView_it"] = "ELENCO";
  12 +ln["treeMapView_it"] = "GRAFICO AD ALBERO";
  13 +ln["mostPopular_it"] = "I PIÙ VISTI";
  14 +ln["availableDatasets_it"] = "Dataset disponibili";
  15 +ln["suggestedDatasets_it"] = "Dataset suggeriti";
  16 +ln["selectedUrl_it"] = "Url selezionata";
  17 +
  18 +ln["inputs_it"] = "DATI DI INPUT";
  19 +ln["layouts_it"] = "ETICHETTE / OPZIONI";
  20 +ln["baseInfo_it"] = "INFORMAZIONI DI BASE";
  21 +ln["comment_it"] = "COMMENTO";
  22 +ln["commentLabel_it"] = "commento (massimo 100 caratteri)";
  23 +ln["dataletPreview_it"] = "ANTEPRIMA";
  24 +ln["addDatalet_it"] = "AGGIUNGI";
  25 +ln["modifyDatalet_it"] = "MODIFICA";
  26 +
  27 +ln["cellDescription_it"] = "Cella della tabella.";
  28 +ln["levelDescription_it"] = "Livello utilizzato per il raggruppamento dei valori corrispondenti.";
  29 +
  30 +ln["categoriesDescription_it"] = "Categorie del grafico. I valori saranno inseriti sull’asse orizzontale. Inserire un valore per ciascuna serie.";
  31 +ln["seriesDescription_it"] = "Serie del grafico. I valori saranno inseriti sull’asse verticale.";
  32 +
  33 +ln["XAxisLabelDescription_it"] = "Etichetta asse X.";
  34 +ln["YAxisLabelDescription_it"] = "Etichetta asse Y.";
  35 +ln["suffixDescription_it"] = "Suffisso valore (e.g. unità di misura, dollari, euro,…).";
  36 +
  37 +ln["pieSeriesDescription_it"] = "Serie del grafico. I valori saranno inseriti sulla porzione corrispondente alla relativa serie.";
  38 +ln["pieSizeDescription_it"] = "Dimensione di ciascuna serie per creare anelli concentrici";
  39 +
  40 +ln["bubbleCategoriesDescription_it"] = "Serie del grafico. Inserire un valore per ciascuna serie.";
  41 +ln["bubbleYValuesDescription_it"] = "Valori y del grafico. I valori saranno inseriti sull’asse verticale";
  42 +ln["bubbleZValuesDescription_it"] = "Valori z del grafico. I valori rappresentano la dimensione della bolla.";
  43 +ln["bubbleSeriesDescription_it"] = "Serie del grafico. I valori visualizzano un grafico a bolle a serie multipla.";
  44 +
  45 +ln["scatterCategoriesDescription_it"] = "Categorie del grafico. Inserire un valore per ciascuna serie.";
  46 +ln["scatterXValuesDescription_it"] = "Serie del grafico. I valori saranno inseriti sull’asse orizzontale.";
  47 +ln["scatterYValuesDescription_it"] = "Serie del grafico. I valori saranno inseriti sull’asse verticale..";
  48 +
  49 +ln["heatmapCategoriesDescription_it"] = "Categorie del grafico. I valori saranno inseriti sull’asse orizzontale.";
  50 +
  51 +ln["LatitudeDescription_it"] = "Latitudine del punto da riportare sulla mappa.";
  52 +ln["LongitudeDescription_it"] = "Longitudine del punto da riportare sulla mappa.";
  53 +ln["BalloonContentDescription_it"] = "Descrizione del segnaposto o link all'immagine che visualizza il luogo specificato sulla mappa.";
  54 +
  55 +/* EN */
  56 +ln["slide1Title_en"] = "SELECT DATASET";
  57 +ln["slide1Subtitle_en"] = "Search or copy and paste the url of dataset.";
  58 +ln["slide2Title_en"] = "SELECT DATA";
  59 +ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
  60 +ln["slide3Title_en"] = "SELECT VISUALIZATION";
  61 +ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
  62 +
  63 +ln["listView_en"] = "LIST VIEW";
  64 +ln["treeMapView_en"] = "TREE MAP VIEW";
  65 +ln["mostPopular_en"] = "MOST POPULAR";
  66 +ln["availableDatasets_en"] = "Available datasets";
  67 +ln["suggestedDatasets_en"] = "Suggested datasets";
  68 +ln["selectedUrl_en"] = "Selected url";
  69 +
  70 +ln["inputs_en"] = "INPUTS";
  71 +ln["layouts_en"] = "LABELS / OPTIONS";
  72 +ln["baseInfo_en"] = "BASE INFO";
  73 +ln["comment_en"] = "COMMENT";
  74 +ln["commentLabel_en"] = "comment (max 100 characters)";
  75 +ln["dataletPreview_en"] = "PREVIEW";
  76 +ln["addDatalet_en"] = "ADD";
  77 +ln["modifyDatalet_en"] = "MODIFY";
  78 +
  79 +ln["cellDescription_en"] = "The cell of table.";
  80 +ln["levelDescription_en"] = "It is the level field that the datalet will use to group the values at corrisponding field number level.";
  81 +
  82 +ln["categoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";
  83 +ln["seriesDescription_en"] = "The chart series. Its values will be put in the vertical axis.";
  84 +
  85 +ln["XAxisLabelDescription_en"] = "The label for the X axis.";
  86 +ln["YAxisLabelDescription_en"] = "The label for the Y axis.";
  87 +ln["suffixDescription_en"] = "The values suffix (eg units, dollars, euro, ...).";
  88 +
  89 +ln["pieSeriesDescription_en"] = "The chart series. Its values will be put on slice of each series.";
  90 +ln["pieSizeDescription_en"] = "The size for each series to create a concentric rings.";
  91 +
  92 +ln["bubbleCategoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";
  93 +ln["bubbleYValuesDescription_en"] = "The chart plots y values. Its values will be put in the vertical axis.";
  94 +ln["bubbleZValuesDescription_en"] = "The chart plots z value. Its values represent the size of the bubble.";
  95 +ln["bubbleSeriesDescription_en"] = "The chart series. Its values visualize multi- series bubbles chart.";
  96 +
  97 +ln["scatterCategoriesDescription_en"] = "The chart categories. You need one value for each series.";
  98 +ln["scatterXValuesDescription_en"] = "The chart plots x values. Its values will be put in the horizontal axis.";
  99 +ln["scatterYValuesDescription_en"] = "The chart plots y value. Its values will be put in the vertical axis.";
  100 +
  101 +ln["heatmapCategoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis.";
  102 +
  103 +ln["LatitudeDescription_en"] = "It is latitude of the points you want to show in the map.";
  104 +ln["LongitudeDescription_en"] = "It is longitude of the points you want to show in the map.";
  105 +ln["BalloonContentDescription_en"] = "It is the text associated to the marker or the link to the image related to the camera associated to each points.";
  106 +
  107 +
  108 +/* FR */
  109 +ln["slide1Title_fr"] = "SELECTIONNER UN JEU DE DONNEES";
  110 +ln["slide1Subtitle_fr"] = "Rechercher ou copier/coller l’url du jeu de données.";
  111 +ln["slide2Title_fr"] = "SELECTIONNER DONNEES";
  112 +ln["slide2Subtitle_fr"] = "Sélectionner les champs à partir de l’arborescence. Une fenêtre vous indiquera les valeurs relatives aux champs sélectionnés.";
  113 +ln["slide3Title_fr"] = "SELECTIONNER UN MODE DE VISUALISATION";
  114 +ln["slide3Subtitle_fr"] = "Sélectionner un mode de visualisation, remplir les entrées et les vignettes (optionnel).";
  115 +
  116 +ln["listView_fr"] = "VUE EN LISTE";
  117 +ln["treeMapView_fr"] = "VUE EN ARBORESCENCE";
  118 +ln["mostPopular_fr"] = "LES PLUS POPULAIRES";
  119 +ln["availableDatasets_fr"] = "Jeux de données disponibles";
  120 +ln["suggestedDatasets_fr"] = "Jeux de données suggérés";
  121 +ln["selectedUrl_fr"] = "Sélectionner URL";
  122 +
  123 +ln["inputs_fr"] = "SORTIES";
  124 +ln["layouts_fr"] = "VIGNETTES/OPTIONSs";
  125 +ln["baseInfo_fr"] = "INFORMATION DE BASE";
  126 +ln["comment_fr"] = "COMMENTAIRES";
  127 +ln["commentLabel_fr"] = "Commentaires (maximum 100 caractères)";
  128 +ln["dataletPreview_fr"] = "PREVISUALISATION";
  129 +ln["addDatalet_fr"] = "AJOUTER";
  130 +ln["modifyDatalet_fr"] = "MODIFIER";
  131 +
  132 +ln["cellDescription_fr"] = "Cellules du tableau.";
  133 +ln["levelDescription_fr"] = "C’est le niveau local que le graphique utilisera pour grouper les valeurs correspondantes au nombre de niveaux de champs";
  134 +
  135 +ln["categoriesDescription_fr"] = "Catégories de graphiques. Ses valeurs seront insérées dans l’axe horizontal. Vous devez insérer une valeur pour chaque série.";
  136 +ln["seriesDescription_fr"] = "Catégories de graphique. Ses valeurs seront insérées dans l’axe vertical.";
  137 +
  138 +ln["XAxisLabelDescription_fr"] = "Vignette pour l’axe X.";
  139 +ln["YAxisLabelDescription_fr"] = "Vignette pour l’axe Y.";
  140 +ln["suffixDescription_fr"] = "Unités de mesures (ex: dollars, euros.";
  141 +
  142 +ln["pieSeriesDescription_fr"] = "Série de graphiques. Ses valeurs seront intégrées au sein des segments de chaque série.";
  143 +ln["pieSizeDescription_fr"] = "Taille de chaque série afin de créer un anneau concentrique.";
  144 +
  145 +ln["bubbleCategoriesDescription_fr"] = "Catégories de graphique. Ses valeurs seront insérées dans l’axe horizontal. Vous devez insérer une valeur pour chaque série.";
  146 +ln["bubbleYValuesDescription_fr"] = "Le graphique présente les valeurs Y. Ses valeurs seront insérées dans l’axe vertical.";
  147 +ln["bubbleZValuesDescription_fr"] = "Le graphique présente les valeurs Z. Ses valeurs représentent la taille des bulles.";
  148 +ln["bubbleSeriesDescription_fr"] = "The chart series. Its values visualize multi- series bubbles chart.";
  149 +
  150 +ln["scatterCategoriesDescription_fr"] = "The chart categories. You need one value for each series.";
  151 +ln["scatterXValuesDescription_fr"] = "The chart plots x values. Its values will be put in the horizontal axis.";
  152 +ln["scatterYValuesDescription_fr"] = "The chart plots y value. Its values will be put in the vertical axis.";
  153 +
  154 +ln["heatmapCategoriesDescription_fr"] = "The chart categories. Its values will be put in the horizontal axis.";
  155 +
  156 +ln["LatitudeDescription_fr"] = "Latitude des points que vous souhaitez montrer sur la carte.";
  157 +ln["LongitudeDescription_fr"] = "Longitude des points que vous souhaitez montrer sur la carte.";
  158 +ln["BalloonContentDescription_fr"] = "It is the text associated to the marker or the link to the image related to the camera associated to each points.";
  159 +
  160 +/* NL */
  161 +ln["slide1Title_nl"] = "SELECT DATASET";
  162 +ln["slide1Subtitle_nl"] = "Search or copy and paste the url of dataset.";
  163 +ln["slide2Title_nl"] = "SELECT DATA";
  164 +ln["slide2Subtitle_nl"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
  165 +ln["slide3Title_nl"] = "SELECT VISUALIZATION";
  166 +ln["slide3Subtitle_nl"] = "Select a visualization, fill out inputs and labels (optional).";
  167 +
  168 +ln["listView_nl"] = "LIST VIEW";
  169 +ln["treeMapView_nl"] = "TREE MAP VIEW";
  170 +ln["mostPopular_nl"] = "MOST POPULAR";
  171 +ln["availableDatasets_nl"] = "Available datasets";
  172 +ln["suggestedDatasets_nl"] = "Suggested datasets";
  173 +ln["selectedUrl_nl"] = "Selected url";
  174 +
  175 +ln["inputs_nl"] = "INPUTS";
  176 +ln["layouts_nl"] = "LABELS / OPTIONS";
  177 +ln["baseInfo_nl"] = "BASE INFO";
  178 +ln["comment_nl"] = "COMMENT";
  179 +ln["commentLabel_nl"] = "comment (max 100 characters)";
  180 +ln["dataletPreview_nl"] = "PREVIEW";
  181 +ln["addDatalet_nl"] = "ADD";
  182 +ln["modifyDatalet_nl"] = "MODIFY";
  183 +
  184 +ln["cellDescription_nl"] = "The cell of table.";
  185 +ln["levelDescription_nl"] = "It is the level field that the datalet will use to group the values at corrisponding field number level.";
  186 +
  187 +ln["categoriesDescription_nl"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";
  188 +ln["seriesDescription_nl"] = "The chart series. Its values will be put in the vertical axis.";
  189 +
  190 +ln["XAxisLabelDescription_nl"] = "The label for the X axis.";
  191 +ln["YAxisLabelDescription_nl"] = "The label for the Y axis.";
  192 +ln["suffixDescription_nl"] = "The values suffix (eg units, dollars, euro, ...).";
  193 +
  194 +ln["pieSeriesDescription_nl"] = "The chart series. Its values will be put on slice of each series.";
  195 +ln["pieSizeDescription_nl"] = "The size for each series to create a concentric rings.";
  196 +
  197 +ln["bubbleCategoriesDescription_nl"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";
  198 +ln["bubbleYValuesDescription_nl"] = "The chart plots y values. Its values will be put in the vertical axis.";
  199 +ln["bubbleZValuesDescription_nl"] = "The chart plots z value. Its values represent the size of the bubble.";
  200 +ln["bubbleSeriesDescription_nl"] = "The chart series. Its values visualize multi- series bubbles chart.";
  201 +
  202 +ln["scatterCategoriesDescription_nl"] = "The chart categories. You need one value for each series.";
  203 +ln["scatterXValuesDescription_nl"] = "The chart plots x values. Its values will be put in the horizontal axis.";
  204 +ln["scatterYValuesDescription_nl"] = "The chart plots y value. Its values will be put in the vertical axis.";
  205 +
  206 +ln["heatmapCategoriesDescription_nl"] = "The chart categories. Its values will be put in the horizontal axis.";
  207 +
  208 +ln["LatitudeDescription_nl"] = "It is latitude of the points you want to show in the map.";
  209 +ln["LongitudeDescription_nl"] = "It is longitude of the points you want to show in the map.";
  210 +ln["BalloonContentDescription_nl"] = "It is the text associated to the marker or the link to the image related to the camera associated to each points.";
0 \ No newline at end of file 211 \ No newline at end of file
locales/nl.l20n deleted
View file @8f4623a
1 -<slide1Title "SELECT DATASET">  
2 -<slide1Subtitle "Search or copy and paste the url of dataset.">  
3 -<slide2Title "SELECT DATA">  
4 -<slide2Subtitle "Select the fields from tree-view. The multi-table will show the values related to the selected fields.">  
5 -<slide3Title "SELECT VISUALIZATION">  
6 -<slide3Subtitle "Select a visualization, fill out inputs and labels (optional).">  
7 -  
8 -<listView "LIST VIEW">  
9 -<treeMapView "TREE MAP VIEW">  
10 -<mostPopular "MOST POPULAR">  
11 -<availableDatasets "Available datasets">  
12 -<suggestedDatasets "Suggested datasets">  
13 -<selectedUrl "Selected url">  
14 -  
15 -<inputs "INPUTS">  
16 -<layouts "LABELS / OPTIONS">  
17 -<baseInfo "BASE INFO">  
18 -<comment "COMMENT">  
19 -<commentLabel "comment (max 100 characters)">  
20 -<dataletPreview "PREVIEW">  
21 -<addDatalet "ADD">  
22 -<modifyDatalet "MODIFY">  
23 -  
24 -<cellDescription "The cell of table.">  
25 -<levelDescription "It is the level field that the datalet will use to group the values at corrisponding field number level.">  
26 -  
27 -<categoriesDescription "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.">  
28 -<seriesDescription "The chart series. Its values will be put in the vertical axis.">  
29 -  
30 -<XAxisLabelDescription "The label for the X axis.">  
31 -<YAxisLabelDescription "The label for the Y axis.">  
32 -<suffixDescription "The values suffix (eg units, dollars, euro, ...).">  
33 -  
34 -<pieSeriesDescription "The chart series. Its values will be put on slice of each series.">  
35 -<pieSizeDescription "The size for each series to create a concentric rings.">  
36 -  
37 -<bubbleCategoriesDescription "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.">  
38 -<bubbleYValuesDescription "The chart plots y values. Its values will be put in the vertical axis.">  
39 -<bubbleZValuesDescription "The chart plots z value. Its values represent the size of the bubble.">  
40 -<bubbleSeriesDescription "The chart series. Its values visualize multi- series bubbles chart.">  
41 -  
42 -<scatterCategoriesDescription "The chart categories. You need one value for each series.">  
43 -<scatterXValuesDescription "The chart plots x values. Its values will be put in the horizontal axis.">  
44 -<scatterYValuesDescription "The chart plots y value. Its values will be put in the vertical axis.">  
45 -  
46 -<heatmapCategoriesDescription "The chart categories. Its values will be put in the horizontal axis.">  
47 -  
48 -<LatitudeDescription "It is latitude of the points you want to show in the map.">  
49 -<LongitudeDescription "It is longitude of the points you want to show in the map.">  
50 -<BalloonContentDescription "It is the text associated to the marker or the link to the image related to the camera associated to each points.">  
51 \ No newline at end of file 0 \ No newline at end of file