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