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 16  
17 17 :host {
18 18 display: block;
19   - /*background: #000;*/
  19 + background: #FFFFFF;
  20 + /*margin-top: 16px;;*/
20 21 }
21 22  
22 23 /* clearfix */
... ... @@ -28,7 +29,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 29 }
29 30  
30 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 39 ::content .grid-sizer {width: 200px;}
33 40 ::content .grid-item-w20 {width: 200px;}
34 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 49 ::content .grid-item-c4 {background-color: #2C29FF;}
43 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 62 ::content .room-subject
47 63 {
48 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 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 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 75 text-overflow: ellipsis;
72   - overflow: hidden;
73   - text-overflow:ellipsis;
74   - display:inline-block;
75 76 }
  77 +
76 78 ::content .room-timestamp
77 79 {
78 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 88 </style>
85 89  
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @4143bce
1   -/********************************************************************************************************************************
2 1 <!--<script src="../shared_js/jquery-1.11.2.min.js"></script>-->
3 2 <!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
4 3 <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
5 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 10 <link rel="import" href="../../bower_components/polymer/polymer.html">
11 11  
... ... @@ -106,6 +106,11 @@
106 106 dataletPreset : {
107 107 type : Object,
108 108 value : []
  109 + },
  110 +
  111 + localization : {
  112 + type : String,
  113 + value : "en"
109 114 }
110 115  
111 116 },
... ... @@ -117,25 +122,22 @@
117 122 // console.log(this.selectedDatalet);
118 123 this.dataUrl = this.dataletPreset["data-url"];
119 124 }
120   -
  125 + ln["localization"] = this.localization;
121 126 },
122 127  
123 128 _updateSlider : function(e){
124 129 switch (e.detail.selected) {
125 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 132 slider.chevronLeft("invisible");
129 133 slider.chevronRight(false);
130 134 if(slider.getPrevSelected() == 1)
131 135 slider.chevronRight(true);
132 136 break;
133 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 139 if(this.modify){
137 140 slider.chevronLeft("invisible");
138   -// slider.setAvatar("2");
139 141 }
140 142 else{
141 143 slider.chevronLeft(true);
... ... @@ -145,8 +147,7 @@
145 147 this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}});
146 148 break;
147 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 151 slider.chevronLeft(true);
151 152 slider.chevronRight("invisible");
152 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 21 <body>
22 22  
23 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 26 <script>
27 27  
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @4143bce
... ... @@ -203,7 +203,7 @@
203 203 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
204 204  
205 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 207 <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
208 208 <div class="inputs">
209 209 <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
... ... @@ -222,7 +222,7 @@
222 222 </paper-material>
223 223  
224 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 227 <div class="inputs">
228 228 <paper-input maxlength="32" label="title" class="base_input"></paper-input>
... ... @@ -232,7 +232,7 @@
232 232 <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea>
233 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 237 <template is="dom-repeat" items="{{labels}}" index-as="index">
238 238 <div class="inputs">
... ... @@ -255,12 +255,12 @@
255 255 <!--</template>-->
256 256  
257 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 259 <div id="datalet_selection_datalet_placeholder"></div>
260 260  
261 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 265 </div>
266 266  
... ... @@ -402,9 +402,15 @@
402 402 },
403 403  
404 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 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 416 _selectDatalet : function(e){
... ... @@ -596,6 +602,7 @@
596 602 },
597 603  
598 604 _showInfo : function(e){
  605 + var that = this;
599 606 var t = e.target;
600 607 if(t.tagName.indexOf("IRON-ICON") != -1)
601 608 t = $(e.target).parents("paper-icon-button")[0];
... ... @@ -607,8 +614,7 @@
607 614 dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
608 615  
609 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 618 this.$.dialog_info_input.open();
613 619  
614 620 var pos = t.getBoundingClientRect();
... ...
controllets/datalet-selection-controllet/demo/index.html
  View file @4143bce
... ... @@ -10,7 +10,7 @@
10 10  
11 11 <meta name="availableLanguages" content="en, it">
12 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 15 <link rel="import" href="../datalet-selection-controllet.html" />
16 16 </head>
... ...
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @4143bce
... ... @@ -127,9 +127,9 @@
127 127 <paper-material id="material_container" elevation="5">
128 128  
129 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 133 </paper-tabs>
134 134  
135 135 <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
... ... @@ -256,14 +256,17 @@
256 256  
257 257 this._loadTreeMap();
258 258  
259   - this._translate();
  259 + this.async(function(){this._translate();},100);
260 260 },
261 261  
262 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 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 272 _filterDatasets : function(e){
... ...
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
  View file @4143bce
... ... @@ -95,7 +95,8 @@ Example:
95 95 display: none;
96 96 }
97 97  
98   - ::content .card_grid .open{
  98 + ::content .card_grid .open
  99 + {
99 100 display: none;
100 101 }
101 102  
... ...
controllets/page-slider-controllet/demo/index.html
  View file @4143bce
... ... @@ -36,7 +36,7 @@
36 36 switch (e.detail.selected) {
37 37 case 0:
38 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 40 break;
41 41 case 1:
42 42 slider.setTitle("Title", "Subtitle");
... ...
controllets/page-slider-controllet/page-slider-controllet.html
  View file @4143bce
... ... @@ -15,9 +15,10 @@
15 15 <style is="custom-style">
16 16 paper-icon-button{
17 17 color: #00BCD4;
18   - height: 48px;
19   - width: 48px;
  18 + height: 64px;
  19 + width: 64px;
20 20 padding: 0px;
  21 + margin: 0px;
21 22 --paper-icon-button-ink-color: #00BCD4;
22 23 }
23 24  
... ... @@ -38,12 +39,12 @@
38 39  
39 40 .chevron-left{
40 41 float: left;
41   - margin-top: 8px;
  42 + /*margin-top: 8px;*/
42 43 }
43 44  
44 45 .chevron-right{
45 46 float: right;
46   - margin-top: 8px;
  47 + /*margin-top: 8px;*/
47 48 }
48 49  
49 50 .box{
... ... @@ -82,8 +83,8 @@
82 83 </style>
83 84  
84 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 89 <div class="box">
89 90 <div class="avatar">[[avatar]]</div>
... ... @@ -168,10 +169,12 @@
168 169  
169 170 if(flag == "invisible") {
170 171 buttons[0].style.visibility = "hidden";
  172 +// buttons[0].style.width = "0px";
171 173 return;
172 174 }
173 175 else
174 176 buttons[0].style.visibility = "visible";
  177 +// buttons[0].style.width = "64px";
175 178  
176 179 if(flag)
177 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 176 \ No newline at end of file
... ...
datalets/graph-datalet/demo/demo-clustering.html
  View file @4143bce
... ... @@ -3,7 +3,7 @@
3 3 <head>
4 4 <meta charset="UTF-8">
5 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 7 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
8 8 </head>
9 9 <script>
... ... @@ -11,11 +11,11 @@
11 11 var xhttp = new XMLHttpRequest();
12 12 xhttp.onreadystatechange = function() {
13 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 19 xhttp.send();
20 20 }
21 21  
... ...
datalets/graph-datalet/graph-datalet.html
  View file @4143bce
... ... @@ -96,18 +96,16 @@ Example:
96 96  
97 97 <script>
98 98  
99   - gnodes = [];
100   - glinks = [];
101   -
102   - width = undefined;
103   - height = undefined;
104   - svg = undefined;
105 99 _this = null;
106   - prev_selected_node = null;
107 100  
108 101 Polymer({
109 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 109 properties: {
112 110 /**
113 111 * It's the url for the preview
... ... @@ -116,11 +114,21 @@ Example:
116 114 * @type Strig
117 115 * @default ''
118 116 */
119   - data : {
  117 + graph : {
120 118 type : Object,
121 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 132 width: {
125 133 type: Number,
126 134 value: undefined
... ... @@ -128,7 +136,7 @@ Example:
128 136  
129 137 height : {
130 138 type : Number,
131   - type: undefined
  139 + value: undefined
132 140 },
133 141  
134 142 svg: {
... ... @@ -138,6 +146,11 @@ Example:
138 146 feelings:{
139 147 type: Array,
140 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 161 .append("g");
149 162  
150 163 //set initial zoom
151   - scale = (1.0);
  164 + var scale = (1.0);
152 165 //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
153   - translate = [100, 100];
  166 + var translate = [100, 100];
154 167 this.svg.transition()
155 168 .duration(750)
156 169 .attr("transform", "translate(" + translate + ")scale(" + scale + ")")
... ... @@ -163,8 +176,8 @@ Example:
163 176  
164 177 this.svg.append("rect")
165 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 183 var graph = {};
... ... @@ -174,15 +187,6 @@ Example:
174 187  
175 188 //pezzotto
176 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 190 this.svg.append("defs")
187 191 .append("pattern")
188 192 .attr("id","image_" + graph.nodes[i].id)
... ... @@ -203,7 +207,7 @@ Example:
203 207 return t.value ? t.value : 80
204 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 212 this.svg.selectAll(".link")
209 213 .attr("style", function(t){
... ... @@ -213,24 +217,18 @@ Example:
213 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 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 232 .attr("style", function (t) {
235 233 switch(parseInt(t.sentiment)){
236 234 case 1 :
... ... @@ -248,19 +246,16 @@ Example:
248 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 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 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 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 261 text: function (t)
... ... @@ -275,35 +270,37 @@ Example:
275 270 },
276 271  
277 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 305 mouseover : function (t) {
309 306 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
... ... @@ -328,16 +325,18 @@ Example:
328 325 },
329 326  
330 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 341 /* _this.$.dialog.close();
343 342 _this.$.dialog_title.innerHTML = t.name;
... ... @@ -350,6 +349,30 @@ Example:
350 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 377 * It is called after the element’s template has been stamped and all elements inside the element’s local
355 378 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
... ... @@ -364,26 +387,16 @@ Example:
364 387  
365 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 391 this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
376 392 width: "100%",
377 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 400 g.nodes[0].x = this.width / 2;
388 401 g.nodes[0].y = this.height / 8;
389 402 this.buildGraph(g);
... ...
datalets/graph-datalet/graph-with-clustering-datalet.html
  View file @4143bce
... ... @@ -97,6 +97,11 @@ Example:
97 97 Polymer({
98 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 105 properties: {
101 106 /**
102 107 * It's the url for the preview
... ... @@ -138,6 +143,7 @@ Example:
138 143 type: Array,
139 144 values: ["Agree", "Neutral", "Not agree"]
140 145 },
  146 +
141 147 prev_selected_node : {
142 148 type : Object,
143 149 value : null
... ... @@ -200,11 +206,11 @@ Example:
200 206 return fill(d);*/
201 207 switch((d % 3)){
202 208 case 0 :
203   - return "#1F77B4";
  209 + return "transparent";//"#1F77B4";//neutral
204 210 case 1 :
205   - return "#2CA02C";
  211 + return "#2CA02C";//agree
206 212 case 2:
207   - return "#FF1E1E";
  213 + return "transparent";//"#FF1E1E";//disagree
208 214 }
209 215 },
210 216  
... ... @@ -277,7 +283,6 @@ Example:
277 283  
278 284 for(var n=0; n < this.groups[g][s].values.length;n++)
279 285 nodesMap[this.groups[g][s].values[n].id] = node;
280   -
281 286 }
282 287 }
283 288 }
... ... @@ -322,7 +327,6 @@ Example:
322 327 .style("fill", "#60df20")
323 328 .style("opacity", .2)
324 329 .on("click", function(d) {
325   - alert(d.id);
326 330 });
327 331  
328 332  
... ... @@ -340,9 +344,11 @@ Example:
340 344 .on("mouseout", this.mouseout)
341 345 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
342 346 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
  347 + .attr("id", function (t) { return "g" + t.id;})
343 348 .append("circle")
344 349 .on("click", this.active)
345 350 .attr("id", function(t){ return t.id })
  351 + .attr("originalId", function (t) { return t.originalId;})
346 352 .attr("class", function (t) { return t.fixed ? "" : "drag"})
347 353 .attr("r", function (t){ return t.r ? t.r : 15 })
348 354 .attr("style", function (t) {
... ... @@ -517,6 +523,29 @@ Example:
517 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 550 * It is called after the element’s template has been stamped and all elements inside the element’s local
522 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 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 53 <template>
54 54  
55 55 <link rel="stylesheet" href="static/css/graphStyle.css">
... ... @@ -95,7 +95,7 @@ Example:
95 95 _this = null;
96 96  
97 97 Polymer({
98   - is : 'graph-with-clustering-datalet',
  98 + is : 'graph-with-clustering-extend-datalet',
99 99  
100 100 properties: {
101 101 /**
... ... @@ -111,8 +111,8 @@ Example:
111 111 },
112 112  
113 113 svgNodes : {
114   - type : Array,
115   - value : []
  114 + type : Array,
  115 + value : []
116 116 },
117 117  
118 118 svgLinks : {
... ... @@ -158,186 +158,246 @@ Example:
158 158 value: []
159 159 },
160 160  
161   - hulls : {
162   - type: Array,
163   - value: []
164   - },
165 161 hull : {
166 162 type : Array,
167 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 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 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 334 init : function(){
291 335  
292   - this.getNetwork();
  336 + var net = this.getNetwork();
293 337  
294 338 if(this.force != null) this.force.stop();
295 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 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 366 .append("line")
317 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 373 .append("g")
328 374 .on("mouseover", this.mouseover)
329 375 .on("mouseout", this.mouseout)
330 376 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
331 377 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
332 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 402 this.svg.style("opacity", 1e-6)
343 403 .transition()
... ... @@ -345,6 +405,8 @@ Example:
345 405 .style("opacity", 1);
346 406  
347 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 412 buildGraph: function (){
... ... @@ -355,7 +417,6 @@ Example:
355 417  
356 418 //set initial zoom
357 419 scale = (1.0);
358   - //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
359 420 translate = [0, 0];
360 421 this.svg.transition()
361 422 .duration(750)
... ... @@ -382,6 +443,15 @@ Example:
382 443 .append("feImage")
383 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 455 this.init();
386 456 },
387 457  
... ... @@ -400,87 +470,95 @@ Example:
400 470 },
401 471  
402 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 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 524 _this.$.dialog.close();
452   - _this.$.dialog_title.innerHTML = t.name;
  525 + _this.$.dialog_title.innerHTML = (t.name) ? t.name : "Cluster";
453 526 _this.$.dialog_content.innerHTML = t.content;
454 527  
455 528 _this.$.dialog.open();
456 529 },
457 530  
458 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 539 _this.$.dialog.close();
463 540 },
464 541  
465 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 564 _onCloseClick : function(){
... ... @@ -505,9 +583,9 @@ Example:
505 583 width: "100%",
506 584 height: "100%"
507 585 }).attr("viewBox", "0 0 " + this.width + " " + this.height)
508   - .attr("pointer-events", "all")
  586 + .attr("pointer-events", "all")
509 587 .attr("style", "transform:translate(0px)")
510   - .style("position", "absolute");
  588 + .style("position", "absolute");
511 589  
512 590 this.buildGraph();
513 591 }
... ...
demo.html
  View file @4143bce
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3 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 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 9 <link rel="import" href="bower_components/paper-item/paper-item.html">
8 10 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
9 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 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 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 19 <script type="text/javascript">
34   - selected_component_url = "";
35   -
36 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 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 56 </script>
52 57  
53 58 <style>
  59 +
54 60 body {
55 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 64 #toolbar{
73 65 background: #2196F3 ;
74 66 }
  67 +
75 68 #logo{
76 69 width: 56px;
77 70 height: 56px;
... ... @@ -81,90 +74,10 @@
81 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 77 </style>
137 78  
138 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 82 <paper-toolbar id="toolbar">
170 83 <paper-menu-button>
... ... @@ -175,380 +88,71 @@
175 88 </paper-menu>
176 89 </paper-menu-button>
177 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 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 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 157 </body>
554 158 </html>
555 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 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 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 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 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 0 \ No newline at end of file