WebCompDev / COMPONENTS

Commit fb05b400c1e8f4efa4ff29d6cbf0a9422590aa69

Authored by Renato De Donato
1 parent dcd5b28b

controllet 2.0, new datalets

Inline Side-by-side
Showing 48 changed files with 2750 additions and 2411 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @fb05b40
@@ -8,7 +8,8 @@ @@ -8,7 +8,8 @@
8 <link rel="import" href="../page-slider-controllet/page-slider-controllet.html"> 8 <link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
9 <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html"> 9 <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
10 <link rel="import" href="../select-data-controllet/select-data-controllet.html" /> 10 <link rel="import" href="../select-data-controllet/select-data-controllet.html" />
11 -<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html"> 11 +<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
  12 +<!--<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">-->
12 13
13 <dom-module id="data-sevc-controllet"> 14 <dom-module id="data-sevc-controllet">
14 15
@@ -32,7 +33,8 @@ @@ -32,7 +33,8 @@
32 33
33 <neon-animatable> 34 <neon-animatable>
34 35
35 - <datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet> 36 + <!--<datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>-->
  37 + <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></select-visualization-controllet>
36 38
37 </neon-animatable> 39 </neon-animatable>
38 40
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @fb05b40
@@ -226,7 +226,7 @@ @@ -226,7 +226,7 @@
226 <div class="inputs"> 226 <div class="inputs">
227 <paper-dropdown-menu id="group_by"> 227 <paper-dropdown-menu id="group_by">
228 <paper-menu class="dropdown-content"> 228 <paper-menu class="dropdown-content">
229 - <template is="dom-repeat" items={{selectedFields}}> 229 + <template is="dom-repeat" items={{fields}}>
230 <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item> 230 <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
231 </template> 231 </template>
232 </paper-menu> 232 </paper-menu>
controllets/filters-controllet/demo/index.html 100644 → 100755
  View file @fb05b40
controllets/filters-controllet/filters-controllet.html 100644 → 100755
  View file @fb05b40
controllets/items-vslider-controllet/items-vslider-controllet.html
  View file @fb05b40
@@ -17,8 +17,8 @@ @@ -17,8 +17,8 @@
17 <style is="custom-style"> 17 <style is="custom-style">
18 paper-icon-button{ 18 paper-icon-button{
19 color: #FFFFFF; 19 color: #FFFFFF;
20 - height: 48px;  
21 - width: 48px; 20 + height: 32px;/*48*/
  21 + width: 32px;/*48*/
22 padding: 0px; 22 padding: 0px;
23 margin: 0px; 23 margin: 0px;
24 --paper-icon-button-ink-color: white; 24 --paper-icon-button-ink-color: white;
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 #items_vslider_container{ 27 #items_vslider_container{
28 display: flex; 28 display: flex;
29 flex-direction: column; 29 flex-direction: column;
30 - height: 100vh; 30 + height: 100%;
31 width: 172px; 31 width: 172px;
32 background-color: #E0E0E0; 32 background-color: #E0E0E0;
33 } 33 }
@@ -39,18 +39,17 @@ @@ -39,18 +39,17 @@
39 39
40 .arrow-up{ 40 .arrow-up{
41 background-color: #2196F3; 41 background-color: #2196F3;
42 - padding-left: 63px; 42 + padding-left: 70px;/*62*/
43 } 43 }
44 44
45 .arrow-down{ 45 .arrow-down{
46 background-color: #2196F3; 46 background-color: #2196F3;
47 - padding-left: 63px; 47 + padding-left: 70px;
48 } 48 }
49 49
50 .content-card{ 50 .content-card{
51 position: relative; 51 position: relative;
52 float: left;/*firefox*/ 52 float: left;/*firefox*/
53 - /*margin : 16px;*/  
54 margin : 16px 16px 0px 16px; 53 margin : 16px 16px 0px 16px;
55 padding: 8px; 54 padding: 8px;
56 height: 124px; 55 height: 124px;
@@ -60,7 +59,6 @@ @@ -60,7 +59,6 @@
60 } 59 }
61 60
62 img{ 61 img{
63 - /*height: 100%;*/  
64 width: 100%; 62 width: 100%;
65 } 63 }
66 64
@@ -70,23 +68,24 @@ @@ -70,23 +68,24 @@
70 bottom: 16px; 68 bottom: 16px;
71 padding: 8px; 69 padding: 8px;
72 width: 124px; 70 width: 124px;
73 - background-color: #9E9E9E;  
74 - color: #FFFFFF;  
75 - opacity: 0.87; 71 + color: #000000;
  72 + background-color: rgba(158, 158, 158, 0.8);
76 z-index: 1; 73 z-index: 1;
77 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 74 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
78 font-size: 16px; 75 font-size: 16px;
  76 + line-height: 16px;
  77 + font-weight: 700;
79 } 78 }
80 79
81 .legend.selected { 80 .legend.selected {
82 - font-weight: 700;  
83 background-color: #2196F3; 81 background-color: #2196F3;
84 - opacity: 1; 82 + color: #FFFFFF;
85 } 83 }
86 84
87 #items_vslider_search{ 85 #items_vslider_search{
88 height: 48px; 86 height: 48px;
89 padding: 0px 8px; 87 padding: 0px 8px;
  88 + /*padding-top: 8px;*/
90 background-color: #B6B6B6; 89 background-color: #B6B6B6;
91 --paper-input-container-focus-color: #2196F3; 90 --paper-input-container-focus-color: #2196F3;
92 } 91 }
@@ -99,7 +98,7 @@ @@ -99,7 +98,7 @@
99 width: 24px; 98 width: 24px;
100 height: 24px; 99 height: 24px;
101 padding: 0px 4px; 100 padding: 0px 4px;
102 - color: #FFFFFF; 101 + color: #F44336;
103 --paper-icon-button-ink-color: #FFFFFF; 102 --paper-icon-button-ink-color: #FFFFFF;
104 } 103 }
105 </style> 104 </style>
@@ -108,7 +107,7 @@ @@ -108,7 +107,7 @@
108 107
109 <paper-material id="items_vslider_container" elevation="5"> 108 <paper-material id="items_vslider_container" elevation="5">
110 109
111 - <paper-input id="items_vslider_search" value={{filter}} no-label-float> <!--label="search"--> 110 + <paper-input id="items_vslider_search" value={{filter}} no-label-float label="">
112 <iron-icon class="search" icon="search" prefix></iron-icon> 111 <iron-icon class="search" icon="search" prefix></iron-icon>
113 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button> 112 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
114 </paper-input> 113 </paper-input>
@@ -179,19 +178,30 @@ @@ -179,19 +178,30 @@
179 }, 178 },
180 179
181 ready : function() { 180 ready : function() {
182 -// this._resize();  
183 $(this.$.div_datalets_container).perfectScrollbar(); 181 $(this.$.div_datalets_container).perfectScrollbar();
184 }, 182 },
185 183
186 attached : function() { 184 attached : function() {
187 -// this._resize();  
188 -// var that = this;  
189 -// window.addEventListener("resize", function() { that._resize(); });  
190 -  
191 if(this.preselectedDatalet){ 185 if(this.preselectedDatalet){
192 this._preselectDatalet(); 186 this._preselectDatalet();
193 this.preselectedDatalet = undefined; 187 this.preselectedDatalet = undefined;
194 } 188 }
  189 +
  190 + this._translate();
  191 + },
  192 +
  193 + _reset : function() {
  194 + if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){
  195 + var dataletCard = document.getElementById(this.selectedDatalet);
  196 + dataletCard.elevation = "1";
  197 + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
  198 + }
  199 + this.selectedDatalet = undefined;
  200 + this.filter = "";
  201 + },
  202 +
  203 + _translate : function(){
  204 + this.$.items_vslider_search.setAttribute("label", ln["search_" + ln["localization"]]);
195 }, 205 },
196 206
197 _clearInput : function() { 207 _clearInput : function() {
@@ -214,7 +224,10 @@ @@ -214,7 +224,10 @@
214 var datalets = new Array(); 224 var datalets = new Array();
215 for(var i=0; i < this.datalets.length; i++){ 225 for(var i=0; i < this.datalets.length; i++){
216 var datalet = this.datalets[i]; 226 var datalet = this.datalets[i];
217 - if(datalet.imageName.indexOf(this.filter) != -1) 227 + var imageName = this._getChartName(datalet.imageName).toLowerCase();
  228 + console.log(imageName);
  229 + console.log(this.filter);
  230 + if(imageName.indexOf(this.filter.toLowerCase()) > -1)
218 datalets.push(datalet); 231 datalets.push(datalet);
219 } 232 }
220 233
controllets/paper-card-controllet/paper-card-controllet.html
  View file @fb05b40
@@ -212,11 +212,14 @@ @@ -212,11 +212,14 @@
212 this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]); 212 this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]);
213 this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]); 213 this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]);
214 if(this.checkType(this.cardType, 'link')) 214 if(this.checkType(this.cardType, 'link'))
215 - this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); 215 + if(this.$$("#card_open_link"))
  216 + this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
216 if(this.checkType(this.cardType, 'text')) 217 if(this.checkType(this.cardType, 'text'))
217 - this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); 218 + if(this.$$("#card_open_text"))
  219 + this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
218 if(this.checkType(this.cardType, 'datalet')) 220 if(this.checkType(this.cardType, 'datalet'))
219 - this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); 221 + if(this.$$("#card_open_datalet"))
  222 + this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
220 }, 223 },
221 224
222 _changeWidth: function(){ 225 _changeWidth: function(){
controllets/select-dataset-controllet/demo/index.html
  View file @fb05b40
@@ -13,21 +13,59 @@ @@ -13,21 +13,59 @@
13 ln["localization"] = "en"; 13 ln["localization"] = "en";
14 </script> 14 </script>
15 15
16 - <link rel="import" href="../datalet-selection-controllet.html" /> 16 + <link rel="import" href="../select-dataset-controllet.html" />
17 </head> 17 </head>
18 18
19 <body> 19 <body>
20 20
21 -<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>--> 21 +<style>
22 22
23 -<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->  
24 -<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet> 23 + .container {
  24 + height: calc(90px * 5 - 8px);
  25 + width: 50%;
  26 + /*width: 400px;*/
  27 + position: relative;
  28 + top: 100px;
  29 + left:25%;
  30 + /*background-color: red;*/
  31 + }
  32 +
  33 +</style>
  34 +
  35 +<div class="container">
  36 + <select-dataset-controllet id="ds"></select-dataset-controllet>
  37 +</div>
  38 +
  39 +<script>
  40 + var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+
  41 + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
  42 + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
  43 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  44 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  45 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  46 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  47 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  48 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  49 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  50 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  51 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  52 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  53 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  54 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  55 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  56 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa";
  57 +
  58 + var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"};
  59 + var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
  60 + var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"};
  61 + var datasets = [dataset1, dataset2, dataset3];
  62 + var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
  63 +
  64 + var ds = document.getElementById('ds');
  65 + ds.setAttribute("items", JSON.stringify(datasets));
  66 +
  67 +</script>
25 68
26 </body> 69 </body>
27 70
28 -<!--urls:-->  
29 -<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->  
30 -<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->  
31 -<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->  
32 -<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',-->  
33 -<!--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',-->  
34 \ No newline at end of file 71 \ No newline at end of file
  72 +</html>
35 \ No newline at end of file 73 \ No newline at end of file
controllets/select-dataset-controllet/select-dataset-controllet.html
  View file @fb05b40
1 -<link rel="import" href="../../bower_components/polymer/polymer.html" />  
2 -  
3 -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />  
4 -  
5 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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">  
8 - 1 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  2 +<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  3 +<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
9 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> 4 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  5 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  6 +<link rel="import" href="../../bower_components/paper-styles/typography.html">
  7 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
10 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> 8 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
11 -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">  
12 -  
13 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
14 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
15 -  
16 -<link rel="import" href="../../bower_components/paper-button/paper-button.html"> 9 +<link rel="import" href="../../bower_components/iron-image/iron-image.html">
  10 +<link rel="import" href="../../bower_components/iron-list/iron-list.html">
17 11
18 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
19 -  
20 -<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />  
21 -  
22 -<script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
23 -  
24 -<dom-module id="datalet-selection-controllet">  
25 12
  13 +<dom-module id="select-dataset-controllet">
26 <template> 14 <template>
27 -  
28 - <style is="custom-style">  
29 - :host {  
30 - --paper-dropdown-menu-icon: {  
31 - color: #2196F3;  
32 - };  
33 - }  
34 -  
35 - #datalet_selection_container {  
36 - display: flex;  
37 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 15 + <style>
  16 + /*:host {*/
  17 + /*display: block;*/
  18 + /*@apply(--paper-font-common-base);*/
  19 + /*}*/
  20 + /*app-toolbar {*/
  21 + /*background-color: var(--google-green-700);*/
  22 + /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);*/
  23 + /*font-weight: bold;*/
  24 + /*color: white;*/
  25 + /*z-index: 1;*/
  26 + /*position: fixed;*/
  27 + /*top: 0;*/
  28 + /*left: 0;*/
  29 + /*right: 0;*/
  30 + /*}*/
  31 + /*app-toolbar paper-icon-button {*/
  32 + /*--paper-icon-button-ink-color: white;*/
  33 + /*}*/
  34 + /*iron-list {*/
  35 + /*padding-top: 64px;*/
  36 + /*--iron-list-items-container: {*/
  37 + /*max-width: 800px;*/
  38 + /*margin: auto;*/
  39 + /*margin-top: 60px;*/
  40 + /*margin-bottom: 60px;*/
  41 + /*border-bottom: 1px solid #ddd;*/
  42 + /*};*/
  43 + /*}*/
  44 + .item {
  45 + @apply(--layout-horizontal);
  46 + padding: 16px;
  47 + background-color: #FFFFFF;
  48 + border: 1px solid #B6B6B6;/*2196F3*/
  49 + cursor: pointer;
  50 + margin-bottom: 8px;
  51 + /*border-radius: 8px;*/
  52 + }
  53 +
  54 + /*.avatar {*/
  55 + /*height: 40px;*/
  56 + /*width: 40px;*/
  57 + /*border-radius: 20px;*/
  58 + /*box-sizing: border-box;*/
  59 + /*background-color: #DDD;*/
  60 + /*}*/
  61 + .pad {
  62 + /*padding: 0 16px;*/
  63 + @apply(--layout-flex);
  64 + @apply(--layout-vertical);
  65 + }
  66 + .primary {
  67 + /*font-size: 16px;*/
  68 + font-weight: bold;
  69 + /*padding-top: 5px;*/
  70 + }
  71 + .shortText/*, .longText*/ {
38 font-size: 16px; 72 font-size: 16px;
39 - margin-top: 8px;  
40 - }  
41 -  
42 - #items_vslider_controllet {  
43 - position: relative;  
44 - min-width: 172px;  
45 } 73 }
46 -  
47 - #datalet_selection_inputs {  
48 - position: relative;  
49 - height: 100vh;  
50 - margin-left: 32px;  
51 - min-width: 258px; 74 + .longText {
  75 + color: gray;
  76 + display: none;
52 } 77 }
53 -  
54 - #datalet_selection_labels { 78 + .item:hover .shortText::after {
  79 + content: ' [+]';
  80 + color: gray;
  81 + }
  82 + .item.expanded:hover .shortText::after {
  83 + content: '';
  84 + }
  85 + .item.expanded .longText {
  86 + display: block;
  87 + }
  88 + .item.expanded:hover .longText::after {
  89 + content: ' [–]';
  90 + }
  91 + /*.spacer {*/
  92 + /*@apply(--layout-flex);*/
  93 + /*}*/
  94 + /*@media (max-width: 460px) {*/
  95 + /*paper-toolbar .bottom.title {*/
  96 + /*font-size: 14px;*/
  97 + /*}*/
  98 + /*}*/
  99 +
  100 + /*.item.selected {*/
  101 + /*border: 1px solid #2196F3;/!**!/*/
  102 + /*}*/
  103 +
  104 + #list_container {
  105 + /*background-color: #ccc;*/
  106 + height: 100%;
  107 + width: calc(100% - 16px);
  108 + /*overflow: scroll;*/
55 position: relative; 109 position: relative;
56 - height: 100vh;  
57 - margin-left: 32px;  
58 - min-width: 258px;  
59 - }  
60 110
61 - #datalet_selection_column {  
62 - position: relative;  
63 - width: 100%;  
64 - margin-left: 32px;  
65 - } 111 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  112 + font-size: 16px;
  113 + line-height: 24px;/*???*/
66 114
67 - #datalet_selection_datalet {  
68 - position: relative;  
69 - height: 100vh;  
70 - width: 100%;  
71 - } 115 + margin: 8px;
72 116
73 - #datalet_selection_datalet_placeholder {  
74 - padding: 16px;  
75 } 117 }
76 118
77 - .inputs{  
78 - position: relative; 119 + #select_dataset_container {
  120 + /*padding: 8px;*/
  121 + /*background-color: #B6B6B6;*/
  122 + border: 4px solid #B6B6B6;/*2196F3*/
79 } 123 }
80 124
81 - .input_header {  
82 - height: 32px;  
83 - padding-top: 16px;  
84 - text-align: center;  
85 - font-weight: 700; 125 + #toolbar {
  126 + /*padding: 8px;*/
  127 + /*background-color: #B6B6B6;*/
  128 + width: calc(100% - 12px);
  129 + height: 20px;
86 background-color: #B6B6B6; 130 background-color: #B6B6B6;
87 - }  
88 131
89 - #expert_container {  
90 - display: none;  
91 - }  
92 -  
93 - #expert_header {  
94 - display: none;  
95 -  
96 - height: 32px;  
97 - padding-top: 16px;  
98 - margin-top: 8px;  
99 - text-align: center;  
100 - font-weight: 700;  
101 - color: #00BCD4;  
102 - cursor: pointer;  
103 - }  
104 -  
105 - .field_nema {  
106 - height: 40px;  
107 - padding-top: 8px;  
108 -  
109 - margin-top: 8px;  
110 - padding-left: 16px;  
111 - font-weight: 700;  
112 - color: #2196F3;  
113 - background-color: #E0E0E0;  
114 - }  
115 -  
116 - .info_button {  
117 - position: absolute;  
118 - top: 18px;  
119 - right: 0px;  
120 - }  
121 -  
122 - paper-input {  
123 - display: inline-block;  
124 - height: 48px;  
125 - /*padding: 0px 8px;*/  
126 - width: 210px;  
127 - padding-left: 8px;  
128 - padding-bottom: 8px;  
129 - --paper-input-container-focus-color: #2196F3;  
130 - }  
131 -  
132 - paper-input.base_input {  
133 - width: 242px;  
134 - }  
135 -  
136 - paper-textarea {  
137 - width: 242px;  
138 - padding-left: 8px;  
139 - padding-bottom: 4px;  
140 - --paper-input-container-focus-color: #2196F3;  
141 - }  
142 -  
143 - paper-dropdown-menu {  
144 - height: 48px;  
145 - width: 210px;;  
146 - padding-left: 8px;  
147 - padding-bottom: 8px;  
148 - --paper-input-container-focus-color: #2196F3;  
149 - }  
150 -  
151 - paper-item.iron-selected {  
152 - background-color: #2196F3;  
153 - color: #FFFFFF;  
154 - }  
155 -  
156 - paper-icon-button {  
157 - color: #2196F3;  
158 - --paper-icon-button-ink-color: #2196F3;  
159 - margin: 0px;  
160 - }  
161 -  
162 - paper-button {  
163 - position: absolute;  
164 - bottom: 16px;  
165 - right: 11px;  
166 -  
167 - height: 48px;  
168 - width: 172px;  
169 - background-color: #00BCD4;  
170 - color: white;  
171 - font-weight: 700;  
172 - padding: 16px;  
173 - }  
174 -  
175 - paper-button:hover {  
176 - background-color: #00AABF;  
177 -  
178 - box-shadow: 0px 8px 12px #888;  
179 - -webkit-box-shadow: 0px 8px 12px #888;  
180 - -moz-box-shadow: 0px 8px 12px #888; 132 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  133 + font-size: 16px;
  134 + font-weight: bold;
  135 + /*line-height: 24px;*/
  136 + padding-left: 12px;
  137 + padding-top: 12px;
  138 + padding-bottom: 12px;
181 } 139 }
182 -  
183 - paper-button[disabled] {  
184 - background-color: #B6B6B6; 140 + .ssssssssseeeel {
  141 + background-color: red;
185 } 142 }
186 143
187 - #dialog_info_input {  
188 - border: 2px solid #2196F3;  
189 - background-color: #E0E0E0;  
190 - min-width: 248px;  
191 - }  
192 </style> 144 </style>
193 145
194 - <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax> 146 + <div id="select_dataset_container">
195 147
196 - <div id="datalet_selection_container"> 148 + <div id="toolbar">
  149 + AVAILABLE DATASETS
197 150
198 - <div id="items_vslider_controllet">  
199 - <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>  
200 </div> 151 </div>
201 152
202 - <paper-material id="datalet_selection_inputs" elevation="5">  
203 - <div class="input_header"><span id="inputs"></span></div>  
204 - <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">  
205 - <div class="inputs">  
206 - <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>  
207 - <paper-menu class="dropdown-content">  
208 - <template is="dom-repeat" items={{fields}}>  
209 - <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>  
210 - <!--{{_fieldName(item)}}-->  
211 - </template>  
212 - </paper-menu>  
213 - </paper-dropdown-menu>  
214 - <div class="info_button">  
215 - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>  
216 - </div>  
217 - </div>  
218 - </template>  
219 -  
220 - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->  
221 -  
222 - <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>  
223 -  
224 - <div id="expert_container">  
225 -  
226 - <div class="inputs">  
227 - <paper-dropdown-menu id="group_by">  
228 - <paper-menu class="dropdown-content">  
229 - <template is="dom-repeat" items={{selectedFields}}>  
230 - <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>  
231 - </template>  
232 - </paper-menu>  
233 - </paper-dropdown-menu>  
234 - <div class="info_button">  
235 - <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>  
236 - </div>  
237 - </div>  
238 -  
239 - <template is="dom-repeat" items="{{groupedFields}}">  
240 - <div class="inputs">  
241 - <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">  
242 - <paper-menu class="dropdown-content">  
243 - <!--foreach functions-->  
244 - <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>  
245 - <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>  
246 - <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>  
247 - <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>  
248 - <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>  
249 - <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>  
250 - <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>  
251 - </paper-menu>  
252 - </paper-dropdown-menu>  
253 - <div class="info_button">  
254 - <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button> 153 + <div id="list_container">
  154 +
  155 + <!--<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>-->
  156 +
  157 + <!--<app-toolbar>-->
  158 + <!--<div title>Collapsable items</div>-->
  159 + <!--<paper-icon-button icon="search" alt="Search"></paper-icon-button>-->
  160 + <!--<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>-->
  161 + <!--</app-toolbar>-->
  162 +
  163 + <iron-list id="list" items="[[items]]" as="item" selection-enabled><!--multi-selection-->
  164 + <template>
  165 + <div>
  166 + <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" on-tap="_prova">
  167 + <!--<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>-->
  168 + <div class="pad">
  169 + <div class="primary">[[item.name]]</div>
  170 + <!--<div class="shortText">[[item.url]]</div>-->
  171 + <!--substring description-->
  172 + <div class="longText">[[item.description]]</div>
  173 + </div>
  174 + <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
255 </div> 175 </div>
256 </div> 176 </div>
257 </template> 177 </template>
258 -  
259 - </div>  
260 -  
261 - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->  
262 -  
263 - </paper-material>  
264 -  
265 - <paper-material id="datalet_selection_labels" elevation="5">  
266 - <div class="input_header"><span id="baseInfo"></span></div>  
267 -  
268 - <div class="inputs">  
269 - <paper-input id="base_title" maxlength="32" class="base_input"></paper-input>  
270 - </div>  
271 -  
272 - <div class="inputs">  
273 - <paper-textarea id="base_description" maxlength="100" class="base_input"></paper-textarea>  
274 - </div>  
275 -  
276 - <div class="input_header"><span id="layouts"></span></div>  
277 -  
278 - <template is="dom-repeat" items="{{labels}}" index-as="index">  
279 - <div class="inputs">  
280 - <paper-input label={{_getLabelName(item.name)}}></paper-input>  
281 - <div class="info_button">  
282 - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>  
283 - </div>  
284 - </div>  
285 - </template>  
286 - </paper-material>  
287 -  
288 -  
289 - <div id="datalet_selection_column">  
290 -  
291 - <paper-material id="datalet_selection_datalet" elevation="5">  
292 - <div class="input_header"><span id="dataletPreview"></span></div>  
293 - <div id="datalet_selection_datalet_placeholder"></div>  
294 -  
295 - </paper-material>  
296 -  
297 - <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button> 178 + </iron-list>
298 179
299 </div> 180 </div>
300 181
301 - <paper-dialog id="dialog_info_input">  
302 - <h2 id="dialog_name"></h2>  
303 - <p id="dialog_description"></p>  
304 - </paper-dialog>  
305 -  
306 </div> 182 </div>
307 183
308 </template> 184 </template>
309 185
310 <script> 186 <script>
311 -  
312 - Polymer({  
313 -  
314 - is : 'datalet-selection-controllet',  
315 -  
316 - properties : {  
317 -  
318 - deepUrl : {  
319 - type : String,  
320 - value : undefined  
321 - },  
322 -  
323 - dataletsListUrl : {  
324 - type : String,  
325 - value : undefined  
326 - },  
327 -  
328 - selectedDatalet : {  
329 - type : String,  
330 - value : undefined  
331 - },  
332 -  
333 - preselectedDatalet : {  
334 - type : String,  
335 - value : undefined  
336 - },  
337 -  
338 - loadPreview : {  
339 - type : Boolean,  
340 - value : false  
341 - },  
342 -  
343 - type : {  
344 - type : String,  
345 - value : undefined  
346 - },  
347 -  
348 - inputs : {  
349 - type : Array,  
350 - value : []  
351 - },  
352 -  
353 - labels : {  
354 - type : Array,  
355 - value : []  
356 - },  
357 -  
358 - filters : {  
359 - type : Array,  
360 - value : []  
361 - },  
362 -  
363 - aggregators : {  
364 - type : Array,  
365 - value : []  
366 - },  
367 -  
368 - orders : {  
369 - type : Array,  
370 - value : []  
371 - },  
372 -  
373 - fields : {  
374 - type : Array,  
375 - value : []  
376 - },  
377 -  
378 - selectedFields : {  
379 - type : Array,  
380 - value : []  
381 - },  
382 -  
383 - groupedFields : {  
384 - type : Array,  
385 - value : []  
386 - },  
387 -  
388 - dataletPreset : {  
389 - type : Object,  
390 - value : [] 187 + HTMLImports.whenReady(function() {
  188 + Polymer({
  189 + is: 'select-dataset-controllet',
  190 + properties: {
  191 + items: {
  192 + type: Array,
  193 + value: [
  194 +// {"name": "Bob"},
  195 +// {"name": "Tim"},
  196 +// {"name": "Mike"}
  197 + ]
  198 + }
391 }, 199 },
392 -  
393 -// selectableFields : {  
394 -// type : Array,  
395 -// value : []  
396 -// },  
397 -  
398 - dataUrl : {  
399 - type : String,  
400 - value : undefined 200 + ready : function() {
  201 + $(this.$.list_container).perfectScrollbar();
401 }, 202 },
402 -  
403 - params:{  
404 - type: Object,  
405 - value: undefined 203 + _prova : function(e) {
  204 +// console.log(e.target);
  205 +// e.target.style.background = "#B6B6B6";
406 }, 206 },
407 207
408 - expert : {  
409 - type : Boolean,  
410 - value : false 208 + attached: function() {
  209 + // Use the document element
  210 + this.$.list.scrollTarget = this.ownerDocument.documentElement;
411 }, 211 },
412 -  
413 - functions : {  
414 - type : Array,  
415 - value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"] 212 + iconForItem: function(item) {
  213 + return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
416 }, 214 },
417 -  
418 - modify : {  
419 - type : Boolean,  
420 - value : false  
421 - }  
422 -  
423 - },  
424 -  
425 - listeners: {  
426 - 'items-vslider-controllet_selected-datalet': '_selectDatalet',  
427 -// 'tree-view-controllet_selected-fields': '_updateSelectedFields'  
428 - 'change': '_paramsChanged'  
429 - },  
430 -  
431 - _showExpertMode : function() {  
432 - if(!this.expert) {  
433 - this.$.expert_header.style.color = "#000000";  
434 - this.$.expert_header.style.background = "#B6B6B6";  
435 - this.$.expert_container.style.display = "block"; 215 + getClassForItem: function(item, selected) {
  216 + console.log(item);
  217 + console.log(selected);
  218 + return selected ? 'item expanded' : 'item';
436 } 219 }
437 - else {  
438 - this.$.expert_header.style.color = "#00BCD4";  
439 - this.$.expert_header.style.background = "#FFFFFF";  
440 - this.$.expert_container.style.display = "none";  
441 - }  
442 -  
443 - this.expert = !this.expert;  
444 - },  
445 -  
446 - _showGroupedFields : function(e) {  
447 - var index = e.target.id;  
448 - var temp = [];  
449 -  
450 -// var isSelected = false;  
451 -// for (var i = 0; i < this.selectedFields.length; i++) {  
452 -// if (this.selectedFields[i]) {  
453 -// if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {  
454 -// isSelected = true;  
455 -// }  
456 -// else {  
457 -// temp.push(this.selectedFields[i]);  
458 -// }  
459 -// }  
460 -// }  
461 -//  
462 -// if (isSelected)  
463 -// this.groupedFields = this._copy(temp);  
464 -// else  
465 -// this.groupedFields =[];  
466 -  
467 - for (var i = 0; i < this.selectedFields.length; i++) {  
468 - if (this.selectedFields[i]) {  
469 - if (i != index) {  
470 - temp.push(this.selectedFields[i]);  
471 - }  
472 - }  
473 - }  
474 -  
475 - this.groupedFields = this._copy(temp);  
476 -  
477 - this.async(function() {  
478 - var ddls = document.getElementsByTagName("paper-dropdown-menu");  
479 - for (var i = 0; i < ddls.length; i++){  
480 - var id = ddls[i].id;  
481 - if(id.indexOf("calculate") > -1) {  
482 - $(ddls[i]).find("paper-menu")[0].select(-1);  
483 - $(ddls[i]).find("paper-menu")[0].select(0);  
484 - }  
485 - }  
486 - }, 0);  
487 -  
488 - this._addGroupByInput();  
489 - },  
490 -  
491 - ready : function() {  
492 - this._resize();  
493 - $(this.$.datalet_selection_inputs).perfectScrollbar();  
494 - $(this.$.datalet_selection_labels).perfectScrollbar();  
495 - $(this.$.datalet_selection_datalet).perfectScrollbar();  
496 -  
497 - this.params = {'data-url' : this.dataUrl};  
498 -  
499 - //this.modify = true;//da eliminare in futuro  
500 - if(this.preselectedDatalet){  
501 - if(this.modify)  
502 - this._preselectDatalet();  
503 -  
504 - this.modify = true;  
505 - this.preselectedDatalet = undefined;  
506 - }  
507 - },  
508 -  
509 - attached : function() {  
510 - this._resize();  
511 - var that = this;  
512 - window.addEventListener("resize", function() { that._resize(); });  
513 -  
514 - this._translate();  
515 - },  
516 -  
517 - setFilters : function(filters) {  
518 - this.filters = filters;  
519 - },  
520 -  
521 - setFields : function(fields) {  
522 - this.fields = fields;  
523 - },  
524 -  
525 - reset : function() {  
526 - this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
527 - this.preselectedDatalet = undefined;  
528 - this.type = undefined;  
529 - this.inputs = [];  
530 - this.labels = [];  
531 - this.$.expert_header.style.display = "none";  
532 - this.expert = true;  
533 - this._showExpertMode();  
534 - this.loadPreview = false;  
535 - this.$.datalet_selection_datalet_placeholder.innerHTML = "";  
536 - this._resetGroupBy();  
537 - },  
538 -  
539 - _translate : function(){  
540 -  
541 - this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];  
542 - this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];  
543 - this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];  
544 - this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];  
545 - this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];  
546 -  
547 - this.$.base_title.label = ln["title_" + ln["localization"]];  
548 - this.$.base_description.label = ln["description_" + ln["localization"]];  
549 -  
550 - this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];  
551 - this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);  
552 -  
553 - if(this.modify)  
554 - this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];  
555 - },  
556 -  
557 - _selectDatalet : function(e){  
558 - this.$.add_button.setAttribute("disabled", "true");  
559 -  
560 - this.selectedDatalet = e.detail.datalet;  
561 -  
562 - this.$.datalet_selection_datalet_placeholder.innerHTML = "";  
563 -  
564 - if(!this.selectedDatalet){  
565 - this.type = undefined;  
566 - this.inputs = [];  
567 - this.labels = [];  
568 - this.$.expert_header.style.display = "none";  
569 - this.expert = true;  
570 - this._showExpertMode();  
571 - this.loadPreview = false;  
572 - }  
573 - else{  
574 - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";  
575 - this.$.selectedDatalet_request.generateRequest();  
576 - this.$.expert_header.style.display = "block";  
577 - }  
578 - },  
579 -  
580 - _preselectDatalet : function() {  
581 - this.type = "undefined";  
582 - this.$.selectedDatalet_request.url = this.deepUrl + this.preselectedDatalet + "-datalet";  
583 - this.$.selectedDatalet_request.generateRequest();  
584 -  
585 - this.selectedDatalet = this.preselectedDatalet;  
586 - this.selectedFields = this._copy(this.fields);  
587 -  
588 -// this.filters = JSON.parse(this.dataletPreset["filters"]);  
589 -// this.aggregators = JSON.parse(this.dataletPreset["aggregators"]);  
590 -// this.orders = JSON.parse(this.dataletPreset["orders"]);  
591 -  
592 - this.async(function() {  
593 - this.selectedFields = this._copy(this.fields);  
594 -  
595 - //set info labels options  
596 - var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");  
597 - textarea[0].value = this.dataletPreset["description"];  
598 -  
599 - var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");  
600 - inputs[0].value = this.dataletPreset["title"];  
601 -  
602 - for (var i = 1; i < inputs.length; i++)  
603 - inputs[i].value = this.dataletPreset[this.labels[i-1].name];  
604 -  
605 - //set inputs --> prima apri GB e riempi CALCULATE e poi gli ORDERBY???  
606 - var ddls = document.getElementsByTagName("paper-dropdown-menu");  
607 - for (var i = 0; i < ddls.length; i++) {  
608 - var id = ddls[i].id;  
609 - if (!isNaN(id)) {  
610 -// id = parseInt(id);  
611 - $(ddls[i]).find("paper-menu")[0].select(id);  
612 - }  
613 - else if (id.indexOf("group_by") > -1) {  
614 - ;  
615 - }  
616 - else if (id.indexOf("calculate") > -1) {  
617 - ;  
618 - }  
619 - }  
620 -  
621 - this.loadPreview = true;  
622 - this._loadDatalet(this.selectedFields);  
623 - }, 300);  
624 - },  
625 -  
626 - _handleSelectedDatalet : function(e){  
627 -  
628 - if(this.type != e.detail.response.type) {  
629 -  
630 - this.inputs = [];  
631 - this.labels = [];  
632 -  
633 - var inputs = e.detail.response.idm.inputs.input;  
634 -  
635 - if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"  
636 - var name = inputs.name;  
637 - var description = inputs.description;  
638 - var selection = inputs.selection;  
639 - inputs = [];  
640 - for (var i in this.fields)  
641 - inputs.push({name: name + " " + i, description: description, selection: selection});  
642 - }  
643 -  
644 - this.async(function(){  
645 - this.type = e.detail.response.type;  
646 - this.inputs = inputs;  
647 - this.labels = e.detail.response.idm.inputs.layouts.input;  
648 -  
649 - this.selectedFields = new Array(inputs.length);  
650 - },0);  
651 -  
652 - this._resetGroupBy();  
653 -  
654 - this.loadPreview = false;  
655 - }  
656 -  
657 - else if (this.loadPreview)  
658 - this._loadDatalet(this.selectedFields);  
659 - },  
660 -  
661 - _resetGroupBy : function(){  
662 - $(this.$.group_by).find("paper-menu")[0].select(-1);  
663 - this.groupedFields = [];  
664 - this.aggregators = [];  
665 - },  
666 -  
667 - _addGroupByInput : function(){  
668 - this.async(function() {//codice reprlicato!  
669 - var selectedFields = this.selectedFields;  
670 -  
671 - var load = true;  
672 -  
673 - if(this.inputs[0].selection == "*"){  
674 - var temp = [];  
675 - for (var i = 0; i < selectedFields.length; i++)  
676 - if(selectedFields[i])  
677 - temp.push(selectedFields[i]);  
678 - selectedFields = temp;  
679 - }  
680 - else {  
681 - for (var i = 0; i < selectedFields.length; i++)  
682 - if (!selectedFields[i]) {  
683 - load = false;  
684 - break;  
685 - }  
686 - }  
687 -  
688 - if(load){  
689 - this.loadPreview = true;  
690 - this._loadDatalet(selectedFields);  
691 - }  
692 - }, 0);  
693 - },  
694 -  
695 - _addOrder : function(e){  
696 - var t = e.target;  
697 - if(t.tagName.indexOf("IRON-ICON") > -1)  
698 - t = $(e.target).parents("paper-icon-button")[0];  
699 -  
700 - var icon = t.getAttribute("icon");  
701 - var name = t.getAttribute("id");  
702 -  
703 - if(name.indexOf("gb") > -1){  
704 - var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;  
705 - if(selectedItem)  
706 - name = selectedItem.textContent.trim();  
707 -// name = "[" + selectedItem.textContent.trim() + "]";  
708 - else  
709 - return;  
710 - }// else {  
711 -// var i = name;  
712 -// var ddl = $("#calculate_"+i);  
713 -//  
714 -// var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();  
715 -// var index = label.split(" ", 2).join(" ").length;  
716 -// var field = label.substring(index+1, label.length);  
717 -// var operation = label.substring(0, label.indexOf(" "));  
718 -// name = operation + "([" + field + "])";  
719 -// }  
720 -  
721 - if(icon.indexOf("unfold-more") > -1){  
722 - t.setAttribute("icon", "expand-less");  
723 - t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);  
724 - var orders = this.orders.filter(function (el) { return el.field !== name; });  
725 - orders.push({"field": name, "operation": "ASC"});  
726 - this.orders = this._copy(orders);  
727 - }  
728 - else if(icon.indexOf("expand-less") > -1){  
729 - t.setAttribute("icon", "expand-more");  
730 - t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);  
731 - var orders = this.orders.filter(function (el) { return el.field !== name; });  
732 - orders.push({"field": name, "operation": "DESC"});  
733 - this.orders = this._copy(orders);  
734 - }  
735 - else if(icon.indexOf("expand-more") > -1){  
736 - t.setAttribute("icon", "unfold-more");  
737 - t.setAttribute("title", ln["unsort_" + ln["localization"]]);  
738 - var orders = this.orders.filter(function (el) { return el.field !== name; });  
739 - this.orders = this._copy(orders);  
740 - }  
741 -  
742 - this._addGroupByInput();//no buoono  
743 -// if(load){  
744 -// this.loadPreview = true;  
745 -// this._loadDatalet(selectedFields);  
746 -// }  
747 - },  
748 -  
749 - _addInput : function(e){  
750 - var selectedFields = this._copy(this.selectedFields);  
751 -  
752 -// var index = $(e.target).parents("paper-dropdown-menu")[0].id;  
753 -// selectedFields[index] = e.target.innerHTML.trim();  
754 -  
755 - var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;  
756 - var index = e.target.id;  
757 - selectedFields[ddl_index] = this.fields[index];  
758 -  
759 - this.selectedFields = this._copy(selectedFields);  
760 -  
761 - var load = true;  
762 -  
763 - if(this.inputs[0].selection == "*"){  
764 - var temp = [];  
765 - for (var i = 0; i < selectedFields.length; i++)  
766 - if(selectedFields[i])  
767 - temp.push(selectedFields[i]);  
768 - selectedFields = temp;  
769 - }  
770 - else {  
771 - for (var i = 0; i < selectedFields.length; i++)  
772 - if (!selectedFields[i]) {  
773 - load = false;  
774 - break;  
775 - }  
776 - }  
777 -  
778 - this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators  
779 -  
780 - if(load){  
781 - this.loadPreview = true;  
782 - this._loadDatalet(selectedFields);  
783 - }  
784 - },  
785 -  
786 - _updateParams : function(){  
787 - var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");  
788 - this.params["description"] = textarea[0].value;  
789 -  
790 - if(!textarea[0].value)  
791 - this.params[textarea[0].label] = "";  
792 -  
793 - var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");  
794 - this.params["title"] = inputs[0].value;  
795 -  
796 - for (var i = 1; i < inputs.length; i++)  
797 - this.params[this.labels[i-1].name] = inputs[i].value;  
798 -  
799 - this.aggregators = [];  
800 -  
801 - var ddls = document.getElementsByTagName("paper-dropdown-menu");  
802 - for (var i = 0; i < ddls.length; i++){  
803 - var id = ddls[i].id;  
804 - if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {  
805 - var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();  
806 - this.aggregators.push({"field": label, "operation": "GROUP BY"});  
807 - }  
808 - if(id.indexOf("calculate") > -1) {  
809 - var menu = $(ddls[i]).find("paper-menu")[0];  
810 - var label = menu.selectedItem.textContent.trim();  
811 - var index = menu.selectedItem.id;  
812 - var ii = label.split(" ", 2).join(" ").length;  
813 - //attenzione BUG --> non funziona se la traduzione non ha solo 1 spazio  
814 - var field = label.substring(ii+1, label.length);  
815 -// var operation = label.substring(0, label.indexOf(" "));  
816 - this.aggregators.push({"field": field, "operation": this.functions[index]});  
817 - }  
818 - }  
819 - },  
820 -  
821 - _paramsChanged : function(){  
822 -  
823 - this._updateParams();  
824 -  
825 - if(this.$.datalet_selection_datalet_placeholder.children[1])  
826 - this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);  
827 - },  
828 -  
829 - _loadDatalet : function(selectedFields){  
830 -  
831 - this._updateParams();  
832 -  
833 - this.params["filters"] = JSON.stringify(this.filters);  
834 - this.params["aggregators"] = JSON.stringify(this.aggregators);  
835 - this.params["orders"] = JSON.stringify(this.orders);  
836 -  
837 -// this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';  
838 -// this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';  
839 -// this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]';  
840 -  
841 - //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';  
842 - //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]';  
843 -  
844 - var dataletParams ={  
845 - component : this.selectedDatalet+"-datalet",  
846 - params : this.params,  
847 - fields : selectedFields,  
848 - placeHolder : this.$.datalet_selection_datalet_placeholder  
849 - };  
850 -  
851 - ComponentService.deep_url = this.deepUrl;  
852 - ComponentService.getComponent(dataletParams);  
853 -  
854 - this.$.add_button.removeAttribute("disabled");  
855 - },  
856 -  
857 - _addDatalet : function(){  
858 -  
859 - this._updateParams();  
860 -  
861 - var selectedFields = [];  
862 - for (var i = 0; i < this.selectedFields.length; i++)  
863 - if(this.selectedFields[i])  
864 - selectedFields.push(this.selectedFields[i]);  
865 -  
866 - var data = {  
867 - dataUrl : this.dataUrl,  
868 - params : this.params,  
869 - fields : selectedFields,  
870 - datalet : this.selectedDatalet+"-datalet",  
871 -// comment : "",//DEPRECATED!!!  
872 - staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)  
873 - }  
874 -  
875 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
876 -  
877 - },  
878 -  
879 - _showInfo : function(e){  
880 -// var that = this;  
881 - var t = e.target;  
882 - if(t.tagName.indexOf("IRON-ICON") != -1)  
883 - t = $(e.target).parents("paper-icon-button")[0];  
884 -  
885 -// var name = t.getAttribute("title").replace(" info", "");  
886 - var name = t.getAttribute("id");  
887 -  
888 - var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];  
889 - if(!dataset)  
890 - dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];  
891 -  
892 - this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);  
893 - this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]];  
894 - this.$.dialog_info_input.open();  
895 -  
896 - var pos = t.getBoundingClientRect();  
897 - $("#dialog_info_input").css("top", pos.top - 4);  
898 - $("#dialog_info_input").css("left", pos.left - 4);  
899 - },  
900 -  
901 - _fieldName : function(field) {  
902 - if(!field)//when?  
903 - return "";  
904 - return field.substring(field.lastIndexOf(",")+1, field.length);  
905 - },  
906 -  
907 - _copy : function(o) {  
908 - var out, v, key;  
909 - out = Array.isArray(o) ? new Array(o.length) : {};  
910 - for (key in o) {  
911 - v = o[key];  
912 - out[key] = (typeof v === "object") ? this._copy(v) : v;  
913 - }  
914 - return out;  
915 - },  
916 -  
917 - _getLabelName: function(key) {  
918 - //* exceptions  
919 - if(key.indexOf("Cell") > -1) {  
920 - return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);  
921 - }  
922 - if(key.indexOf("Level") > -1) {  
923 - return ln["Level" + "_" +ln["localization"]] + key.slice(-2);  
924 - }  
925 -  
926 - return ln[key + "_" +ln["localization"]];  
927 - },  
928 -  
929 - _calculateLabel: function() {  
930 - return ln["calculate" + "_" +ln["localization"]];  
931 - },  
932 -  
933 - _operationName: function(index) {  
934 - var key = this.functions[index];  
935 - return ln[key + "_" +ln["localization"]];  
936 - },  
937 -  
938 - _resize : function(){  
939 - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;  
940 - h = h - 64 - 8; //height with page scroller  
941 -  
942 - $("#items_vslider_container").height(h);//vslider controllet  
943 -  
944 - $("#datalet_selection_inputs").height(h);  
945 - $("#datalet_selection_labels").height(h);  
946 - $("#datalet_selection_datalet").height(h);  
947 - }  
948 - 220 + });
949 }); 221 });
950 -  
951 </script> 222 </script>
952 -  
953 </dom-module> 223 </dom-module>
954 \ No newline at end of file 224 \ No newline at end of file
controllets/select-visualization-controllet/demo/index.html
  View file @fb05b40
@@ -13,19 +13,21 @@ @@ -13,19 +13,21 @@
13 ln["localization"] = "en"; 13 ln["localization"] = "en";
14 </script> 14 </script>
15 15
16 - <link rel="import" href="../datalet-selection-controllet.html" /> 16 + <link rel="import" href="../select-visualization-controllet.html" />
  17 + <link rel="import" href="../select-datalet-inputs_series.html" />
  18 + <link rel="import" href="../select-datalet-options.html" />
17 </head> 19 </head>
18 20
19 <body> 21 <body>
20 22
21 -<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->  
22 -  
23 -<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->  
24 -<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet> 23 +<select-visualization-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></select-visualization-controllet>
  24 +<!--<select-datalet-inputs_series></select-datalet-inputs_series>-->
  25 +<!--<select-datalet-options></select-datalet-options>-->
25 26
26 </body> 27 </body>
27 28
28 <!--urls:--> 29 <!--urls:-->
  30 +<!--https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee-->
29 <!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json--> 31 <!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
30 <!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1--> 32 <!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
31 <!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',--> 33 <!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
controllets/select-visualization-controllet/inputs-series.html deleted
View file @dcd5b28
1 -<link rel="import" href="../../bower_components/polymer/polymer.html" />  
2 -  
3 -<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html" />-->  
4 -  
5 -<!--<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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">-->  
8 -  
9 -<!--<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">-->  
10 -<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->  
11 -<!--<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">-->  
12 -  
13 -<!--<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">-->  
14 -<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->  
15 -  
16 -<!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->  
17 -  
18 -<!--<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">-->  
19 -  
20 -<!--<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />-->  
21 -  
22 -<!--<script src="../../../DEEPCLIENT/js/deepClient.js"></script>-->  
23 -  
24 -<dom-module id="select-visualization-controllet">  
25 -  
26 - <template>  
27 -  
28 - <style is="custom-style">  
29 - :host {  
30 - --paper-dropdown-menu-icon: {  
31 - color: #2196F3;  
32 - };  
33 - }  
34 -  
35 - #datalet_selection_container {  
36 - display: flex;  
37 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
38 - font-size: 16px;  
39 - margin-top: 8px;  
40 - }  
41 -  
42 - #items_vslider_controllet {  
43 - position: relative;  
44 - min-width: 172px;  
45 - }  
46 -  
47 - #datalet_selection_inputs {  
48 - position: relative;  
49 - height: 100vh;  
50 - margin-left: 32px;  
51 - min-width: 258px;  
52 - }  
53 -  
54 - #datalet_selection_labels {  
55 - position: relative;  
56 - height: 100vh;  
57 - margin-left: 32px;  
58 - min-width: 258px;  
59 - }  
60 -  
61 - #datalet_selection_column {  
62 - position: relative;  
63 - width: 100%;  
64 - margin-left: 32px;  
65 - }  
66 -  
67 - #datalet_selection_datalet {  
68 - position: relative;  
69 - height: 100vh;  
70 - width: 100%;  
71 - }  
72 -  
73 - #datalet_selection_datalet_placeholder {  
74 - padding: 16px;  
75 - }  
76 -  
77 - .inputs{  
78 - position: relative;  
79 - }  
80 -  
81 - .input_header {  
82 - height: 32px;  
83 - padding-top: 16px;  
84 - text-align: center;  
85 - font-weight: 700;  
86 - background-color: #B6B6B6;  
87 - }  
88 -  
89 - #expert_container {  
90 - display: none;  
91 - }  
92 -  
93 - #expert_header {  
94 - display: none;  
95 -  
96 - height: 32px;  
97 - padding-top: 16px;  
98 - margin-top: 8px;  
99 - text-align: center;  
100 - font-weight: 700;  
101 - color: #00BCD4;  
102 - cursor: pointer;  
103 - }  
104 -  
105 - .field_nema {  
106 - height: 40px;  
107 - padding-top: 8px;  
108 -  
109 - margin-top: 8px;  
110 - padding-left: 16px;  
111 - font-weight: 700;  
112 - color: #2196F3;  
113 - background-color: #E0E0E0;  
114 - }  
115 -  
116 - .info_button {  
117 - position: absolute;  
118 - top: 18px;  
119 - right: 0px;  
120 - }  
121 -  
122 - paper-input {  
123 - display: inline-block;  
124 - height: 48px;  
125 - /*padding: 0px 8px;*/  
126 - width: 210px;  
127 - padding-left: 8px;  
128 - padding-bottom: 8px;  
129 - --paper-input-container-focus-color: #2196F3;  
130 - }  
131 -  
132 - paper-input.base_input {  
133 - width: 242px;  
134 - }  
135 -  
136 - paper-textarea {  
137 - width: 242px;  
138 - padding-left: 8px;  
139 - padding-bottom: 4px;  
140 - --paper-input-container-focus-color: #2196F3;  
141 - }  
142 -  
143 - paper-dropdown-menu {  
144 - height: 48px;  
145 - width: 210px;;  
146 - padding-left: 8px;  
147 - padding-bottom: 8px;  
148 - --paper-input-container-focus-color: #2196F3;  
149 - }  
150 -  
151 - paper-item.iron-selected {  
152 - background-color: #2196F3;  
153 - color: #FFFFFF;  
154 - }  
155 -  
156 - paper-icon-button {  
157 - color: #2196F3;  
158 - --paper-icon-button-ink-color: #2196F3;  
159 - margin: 0px;  
160 - }  
161 -  
162 - paper-button {  
163 - position: absolute;  
164 - bottom: 16px;  
165 - right: 11px;  
166 -  
167 - height: 48px;  
168 - width: 172px;  
169 - background-color: #00BCD4;  
170 - color: white;  
171 - font-weight: 700;  
172 - padding: 16px;  
173 - }  
174 -  
175 - paper-button:hover {  
176 - background-color: #00AABF;  
177 -  
178 - box-shadow: 0px 8px 12px #888;  
179 - -webkit-box-shadow: 0px 8px 12px #888;  
180 - -moz-box-shadow: 0px 8px 12px #888;  
181 - }  
182 -  
183 - paper-button[disabled] {  
184 - background-color: #B6B6B6;  
185 - }  
186 -  
187 - #dialog_info_input {  
188 - border: 2px solid #2196F3;  
189 - background-color: #E0E0E0;  
190 - min-width: 248px;  
191 - }  
192 - </style>  
193 -  
194 - <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>  
195 -  
196 - <div id="datalet_selection_container">  
197 -  
198 - <paper-material id="datalet_selection_inputs" elevation="5">  
199 - <div class="input_header"><span id="inputs"></span></div>  
200 - <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">  
201 - <div class="inputs">  
202 - <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>  
203 - <paper-menu class="dropdown-content">  
204 - <template is="dom-repeat" items={{fields}}>  
205 - <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>  
206 - <!--{{_fieldName(item)}}-->  
207 - </template>  
208 - </paper-menu>  
209 - </paper-dropdown-menu>  
210 - <div class="info_button">  
211 - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>  
212 - </div>  
213 - </div>  
214 - </template>  
215 -  
216 - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->  
217 -  
218 - <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>  
219 -  
220 - <div id="expert_container">  
221 -  
222 - <div class="inputs">  
223 - <paper-dropdown-menu id="group_by">  
224 - <paper-menu class="dropdown-content">  
225 - <template is="dom-repeat" items={{fields}}>  
226 - <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>  
227 - </template>  
228 - </paper-menu>  
229 - </paper-dropdown-menu>  
230 - <div class="info_button">  
231 - <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>  
232 - </div>  
233 - </div>  
234 -  
235 - <template is="dom-repeat" items="{{groupedFields}}">  
236 - <div class="inputs">  
237 - <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">  
238 - <paper-menu class="dropdown-content">  
239 - <!--foreach functions-->  
240 - <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>  
241 - <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>  
242 - <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>  
243 - <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>  
244 - <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>  
245 - <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>  
246 - <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>  
247 - </paper-menu>  
248 - </paper-dropdown-menu>  
249 - <div class="info_button">  
250 - <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>  
251 - </div>  
252 - </div>  
253 - </template>  
254 -  
255 - </div>  
256 -  
257 - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->  
258 -  
259 - </paper-material>  
260 -  
261 -eeeeeeeeeeeeeeeeeeee  
262 - </div>  
263 -  
264 - </template>  
265 -  
266 - <script>  
267 -  
268 - Polymer({  
269 -  
270 - is : 'select-visualization-controllet',  
271 -  
272 - properties : {  
273 -  
274 - deepUrl : {  
275 - type : String,  
276 - value : undefined  
277 - },  
278 -  
279 - dataletsListUrl : {  
280 - type : String,  
281 - value : undefined  
282 - },  
283 -  
284 - selectedDatalet : {  
285 - type : String,  
286 - value : undefined  
287 - },  
288 -  
289 - preselectedDatalet : {  
290 - type : String,  
291 - value : undefined  
292 - },  
293 -  
294 - loadPreview : {  
295 - type : Boolean,  
296 - value : false  
297 - },  
298 -  
299 - type : {  
300 - type : String,  
301 - value : undefined  
302 - },  
303 -  
304 - inputs : {  
305 - type : Array,  
306 - value : []  
307 - },  
308 -  
309 - labels : {  
310 - type : Array,  
311 - value : []  
312 - },  
313 -  
314 - filters : {  
315 - type : Array,  
316 - value : []  
317 - },  
318 -  
319 - aggregators : {  
320 - type : Array,  
321 - value : []  
322 - },  
323 -  
324 - orders : {  
325 - type : Array,  
326 - value : []  
327 - },  
328 -  
329 - fields : {  
330 - type : Array,  
331 - value : []  
332 - },  
333 -  
334 - selectedFields : {  
335 - type : Array,  
336 - value : []  
337 - },  
338 -  
339 - groupedFields : {  
340 - type : Array,  
341 - value : []  
342 - },  
343 -  
344 - dataletPreset : {  
345 - type : Object,  
346 - value : []  
347 - },  
348 -  
349 - dataUrl : {  
350 - type : String,  
351 - value : undefined  
352 - },  
353 -  
354 - params:{  
355 - type: Object,  
356 - value: undefined  
357 - },  
358 -  
359 - expert : {  
360 - type : Boolean,  
361 - value : false  
362 - },  
363 -  
364 - functions : {  
365 - type : Array,  
366 - value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]  
367 - },  
368 -  
369 - modify : {  
370 - type : Boolean,  
371 - value : false  
372 - }  
373 -  
374 - },  
375 -  
376 - });  
377 -  
378 - </script>  
379 -  
380 -</dom-module>  
381 \ No newline at end of file 0 \ No newline at end of file
controllets/select-visualization-controllet/select-datalet-inputs.html 0 → 100644
  View file @fb05b40
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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">
  8 +
  9 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  10 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  11 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  12 +
  13 +<dom-module id="select-datalet-inputs">
  14 +
  15 + <template>
  16 +
  17 + <style is="custom-style">
  18 + :host {
  19 + --paper-dropdown-menu-icon: {
  20 + color: #2196F3;
  21 + };
  22 + }
  23 +
  24 + #inputs_container {
  25 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  26 + font-size: 16px;
  27 +
  28 + height: 100%;
  29 + width: 258px;
  30 + }
  31 +
  32 + .inputs{
  33 + position: relative;
  34 + }
  35 +
  36 + .input_header {
  37 + height: 32px;
  38 + padding-top: 16px;
  39 + text-align: center;
  40 + font-weight: 700;
  41 + background-color: #B6B6B6;
  42 + }
  43 +
  44 + #expert_container {
  45 + display: none;
  46 + }
  47 +
  48 + #expert_header {
  49 + height: 32px;
  50 + padding-top: 16px;
  51 + margin-top: 8px;
  52 + text-align: center;
  53 + font-weight: 700;
  54 + color: #00BCD4;
  55 + cursor: pointer;
  56 +
  57 + display: none;
  58 + }
  59 +
  60 + .info_button {
  61 + position: absolute;
  62 + top: 18px;
  63 + right: 0px;
  64 + }
  65 +
  66 + paper-dropdown-menu {
  67 + height: 48px;
  68 + width: 210px;;
  69 + padding-left: 8px;
  70 + padding-bottom: 8px;
  71 + --paper-input-container-focus-color: #2196F3;
  72 + }
  73 +
  74 + paper-item.iron-selected {
  75 + background-color: #2196F3;
  76 + color: #FFFFFF;
  77 + }
  78 +
  79 + paper-icon-button {
  80 + color: #2196F3;
  81 + --paper-icon-button-ink-color: #2196F3;
  82 + margin: 0px;
  83 + }
  84 + </style>
  85 +
  86 + <paper-material id="inputs_container" elevation="5">
  87 +
  88 + <div class="input_header"><span id="inputs"></span></div>
  89 +
  90 + <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
  91 + <div class="inputs">
  92 + <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
  93 + <paper-menu class="dropdown-content">
  94 + <template is="dom-repeat" items={{fields}}>
  95 + <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
  96 + </template>
  97 + </paper-menu>
  98 + </paper-dropdown-menu>
  99 + <div class="info_button">
  100 + <paper-icon-button id="{{ddl_index}}" on-click="_setOrders" icon="unfold-more" title=""></paper-icon-button>
  101 + </div>
  102 + </div>
  103 + </template>
  104 +
  105 + <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
  106 +
  107 + <div id="expert_container">
  108 +
  109 + <div class="inputs">
  110 + <paper-dropdown-menu id="group_by" disabled>
  111 + <paper-menu class="dropdown-content">
  112 + <template is="dom-repeat" items={{groupableFields}}>
  113 + <paper-item id={{index}} on-tap="_setAggregatorsFields">{{_fieldName(item)}}</paper-item>
  114 + </template>
  115 + </paper-menu>
  116 + </paper-dropdown-menu>
  117 + </div>
  118 +
  119 + <template is="dom-repeat" items="{{aggregateFields}}" as="field">
  120 + <div class="inputs">
  121 + <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
  122 + <paper-menu class="dropdown-content">
  123 + <template is="dom-repeat" items="{{functions}}">
  124 + <paper-item id={{index}} on-tap="_setAggregators">{{_operationName(index)}} : {{_fieldName(field)}}</paper-item>
  125 + </template>
  126 + </paper-menu>
  127 + </paper-dropdown-menu>
  128 + </div>
  129 + </template>
  130 +
  131 + </div>
  132 +
  133 + </paper-material>
  134 +
  135 +
  136 + </template>
  137 +
  138 + <script>
  139 +
  140 + Polymer({
  141 +
  142 + is : 'select-datalet-inputs',
  143 +
  144 + properties : {
  145 +
  146 + //INPUT
  147 + fields : {type : Array, value : []},
  148 +
  149 + //OUTPUT
  150 + selectedFields : {type : Array, value : []},
  151 + aggregators : {type : Array, value : []},
  152 + orders : {type : Array, value : []},
  153 +
  154 + expert : {
  155 + type : Boolean,
  156 + value : false
  157 + },
  158 +
  159 + functions : {
  160 + type : Array,
  161 + value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
  162 + },
  163 +
  164 + inputs : {
  165 + type : Array,
  166 + value : []
  167 + },
  168 +
  169 + groupableFields : {
  170 + type : Array,
  171 + value : []
  172 + },
  173 +
  174 + aggregateFields : {
  175 + type : Array,
  176 + value : []
  177 + }
  178 +
  179 + },
  180 +
  181 + ready : function() {
  182 + $(this.$.inputs_container).perfectScrollbar();
  183 + },
  184 +
  185 + attached : function() {
  186 + this._translate();
  187 + },
  188 +
  189 + getSelectedFields : function () {
  190 + return this.selectedFields.filter(function(field){ return field != "" });
  191 + },
  192 +
  193 + getAggregators : function () {
  194 + return this.aggregators;
  195 + },
  196 +
  197 + getOrders : function () {
  198 + return this.orders;
  199 + },
  200 +
  201 + setFields : function(fields) {
  202 + var temp = this._copy(fields);
  203 + temp.unshift("");
  204 + this.fields = this._copy(temp);
  205 +
  206 + this.$.expert_header.style.display = "block";
  207 +
  208 + this._reset();
  209 + },
  210 +
  211 + setInputs : function(inputs) {
  212 + var temp = this._copy(inputs);
  213 + if (inputs.constructor != Array) {//table --> 1 input
  214 + var name = inputs.name;
  215 + var description = inputs.description;
  216 + var selection = inputs.selection;
  217 + temp = [];
  218 + for (var i = 1; i < this.fields.length; i++)
  219 + temp.push({name: name + " " + i, description: description, selection: selection});
  220 + }
  221 + else if (inputs.length > 2 && inputs[2].selection == "*") {//map --> multiple baloon content
  222 + name = inputs[2].name;
  223 + description = inputs[2].description;
  224 + selection = inputs[2].selection;
  225 + temp = [inputs[0], inputs[1]];
  226 + for (var i = 3; i < this.fields.length; i++)
  227 + temp.push({name: name + " " + (i-2), description: description, selection: selection});
  228 + }
  229 +
  230 + this.inputs = this._copy(temp);
  231 +
  232 + this.selectedFields = new Array(temp.length);
  233 + },
  234 +
  235 + fireReady : function() {
  236 + if(this._isReady())
  237 + this.fire('select_visualization_inputs_ready');
  238 + },
  239 +
  240 + _isReady : function() {
  241 + var fire = true;
  242 + for (var i = 0; i < this.selectedFields.length; i++) {
  243 + if (!this.selectedFields[i] && this.inputs[i].selection != "*")
  244 + return false;
  245 + if(this.inputs[i].selection == "*")
  246 + fire = false;
  247 + }
  248 +
  249 + if(!fire) {
  250 + for (var i = 0; i < this.selectedFields.length; i++) {
  251 + if (this.selectedFields[i] && this.inputs[i].selection == "*") {
  252 + fire = true;
  253 + break;
  254 + }
  255 + }
  256 + }
  257 +
  258 + return fire;
  259 + },
  260 +
  261 + _reset : function() {
  262 + //this.fields = []; --> setFields
  263 + //this.inputs = []; --> setInputs
  264 + this.selectedFields = [];
  265 + this.aggregators = [];
  266 + //this.orders = []; --> _resetOrders
  267 + this._resetOrders();
  268 + this.expert = true;
  269 + this._showExpertMode();//expert --> false
  270 + this.groupableFields = [];
  271 + this.aggregateFields = [];
  272 +
  273 + this.async(function () {
  274 + //reset ddl
  275 + var ddls = document.getElementsByTagName("paper-dropdown-menu");
  276 + for (var i = 0; i < ddls.length; i++)
  277 + $(ddls[i]).find("paper-menu")[0].select(-1);
  278 + this.$.group_by.setAttribute("disabled", "");
  279 + //reset orders
  280 + this._resetOrders();
  281 + }, 1);
  282 + },
  283 +
  284 + _translate : function(){
  285 + this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
  286 + this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
  287 + this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
  288 + },
  289 +
  290 + _showExpertMode : function() {
  291 + if(!this.expert) {
  292 + this.$.expert_header.style.color = "#000000";
  293 + this.$.expert_header.style.background = "#B6B6B6";
  294 + this.$.expert_container.style.display = "block";
  295 + }
  296 + else {
  297 + this.$.expert_header.style.color = "#00BCD4";
  298 + this.$.expert_header.style.background = "#FFFFFF";
  299 + this.$.expert_container.style.display = "none";
  300 + }
  301 +
  302 + this.expert = !this.expert;
  303 + },
  304 +
  305 + _addInput : function(e){
  306 + var selectedFields = this._copy(this.selectedFields);
  307 +
  308 + var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
  309 + var index = e.target.id;
  310 + selectedFields[ddl_index] = this.fields[index];
  311 +
  312 + this.selectedFields = this._copy(selectedFields);
  313 +
  314 + if(!this._isReady()) {
  315 + this.$.group_by.setAttribute("disabled", "");
  316 +
  317 + this.groupableFields = [];
  318 + this.aggregateFields = [];
  319 + }
  320 + else {
  321 + this.$.group_by.removeAttribute("disabled");
  322 +
  323 + var groupableFields = [];
  324 + for (var i = 0; i < this.selectedFields.length; i++) {
  325 + if(this.selectedFields[i])
  326 + groupableFields.push(this.selectedFields[i]);
  327 + }
  328 + this.groupableFields = this._copy(groupableFields);
  329 + this.aggregateFields = [];
  330 +
  331 + this.async(function () {
  332 + var menu = $(this.$.group_by).find("paper-menu")[0];
  333 + menu.select(-1);
  334 + }, 0);
  335 + }
  336 + this._setAggregators();
  337 + },
  338 +
  339 + _setAggregatorsFields : function(e){
  340 + var index = e.target.id;
  341 + var aggregateFields = [];
  342 + for (var i = 0; i < this.groupableFields.length; i++) {
  343 + if (i != index && this.groupableFields[i])
  344 + aggregateFields.push(this.groupableFields[i]);
  345 + }
  346 + this.aggregateFields = this._copy(aggregateFields);
  347 +
  348 + this.async(function() {
  349 + var ddls = document.getElementsByTagName("paper-dropdown-menu");
  350 + for (var i = 0; i < ddls.length; i++){
  351 + var id = ddls[i].id;
  352 + if(id.indexOf("calculate") > -1) {
  353 + $(ddls[i]).find("paper-menu")[0].select(-1);
  354 + $(ddls[i]).find("paper-menu")[0].select(0);
  355 + }
  356 + }
  357 +
  358 + this._setAggregators();
  359 + }, 0);
  360 + },
  361 +
  362 + _setAggregators : function(){
  363 + this.async(function() {
  364 + this.aggregators = [];
  365 +
  366 + this._resetOrders();
  367 +
  368 + var gb_menu = $(this.$.group_by).find("paper-menu")[0];
  369 + var groupByField = this.groupableFields[gb_menu.selected];
  370 + if(groupByField) {
  371 + this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
  372 + for (var i = 0; i < this.aggregateFields.length; i++){
  373 + var c_menu = $("#calculate_"+i).find("paper-menu")[0];
  374 + var operationIndex = c_menu.selectedItem.id;
  375 + this.aggregators.push({"field": this.aggregateFields[i], "operation": this.functions[operationIndex]})
  376 + }
  377 + }
  378 +
  379 + this.fireReady();
  380 + }, 1);
  381 + },
  382 +
  383 + _setOrders : function(e){
  384 + var t = e.target;
  385 + if(t.tagName.indexOf("IRON-ICON") > -1)
  386 + t = $(e.target).parents("paper-icon-button")[0];
  387 +
  388 + var icon = t.getAttribute("icon");
  389 + var id = t.getAttribute("id");
  390 + var field = this.selectedFields[id];
  391 +
  392 + if(icon.indexOf("unfold-more") > -1){
  393 + t.setAttribute("icon", "expand-less");
  394 + t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
  395 + var orders = this.orders.filter(function (el) { return el.field !== field; });
  396 + orders.unshift({"field": field, "operation": "ASC"});
  397 + this.orders = this._copy(orders);
  398 + }
  399 + else if(icon.indexOf("expand-less") > -1){
  400 + t.setAttribute("icon", "expand-more");
  401 + t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
  402 + var orders = this.orders.filter(function (el) { return el.field !== field; });
  403 + orders.unshift({"field": field, "operation": "DESC"});
  404 + this.orders = this._copy(orders);
  405 + }
  406 + else if(icon.indexOf("expand-more") > -1){
  407 + t.setAttribute("icon", "unfold-more");
  408 + t.setAttribute("title", ln["unsort_" + ln["localization"]]);
  409 + var orders = this.orders.filter(function (el) { return el.field !== field; });
  410 + this.orders = this._copy(orders);
  411 + }
  412 +
  413 + this.fireReady();
  414 + },
  415 +
  416 + _resetOrders : function(){
  417 + var icons = this.$.inputs_container.querySelectorAll("paper-icon-button");
  418 + for (var i = 0; i < icons.length; i++){
  419 + icons[i].setAttribute("icon", "unfold-more");
  420 + icons[i].setAttribute("title", ln["unsort_" + ln["localization"]]);
  421 + }
  422 + this.orders = [];
  423 + },
  424 +
  425 + _fieldName : function(field) {
  426 + return field.substring(field.lastIndexOf(",")+1, field.length);
  427 + },
  428 +
  429 + _getLabelName: function(key) {
  430 + if(key.indexOf("Column") > -1) {
  431 + return ln["Column" + "_" +ln["localization"]] + key.slice(-2);
  432 + }
  433 + if(key.indexOf("BalloonContent") > -1) {
  434 + return ln["BalloonContent" + "_" +ln["localization"]] + key.slice(-2);
  435 + }
  436 +
  437 + return ln[key + "_" +ln["localization"]];
  438 + },
  439 +
  440 + _operationName: function(index) {
  441 + var key = this.functions[index];
  442 + return ln[key + "_" +ln["localization"]];
  443 + },
  444 +
  445 + _calculateLabel: function() {
  446 + return ln["calculate" + "_" +ln["localization"]];
  447 + },
  448 +
  449 + _copy : function(o) {
  450 + var out, v, key;
  451 + out = Array.isArray(o) ? new Array(o.length) : {};
  452 + for (key in o) {
  453 + v = o[key];
  454 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  455 + }
  456 + return out;
  457 + }
  458 +
  459 + });
  460 +
  461 + </script>
  462 +
  463 +</dom-module>
0 \ No newline at end of file 464 \ No newline at end of file
controllets/select-visualization-controllet/select-datalet-inputs_series.html 0 → 100644
  View file @fb05b40
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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">
  8 +
  9 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  10 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  11 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  12 +
  13 +<dom-module id="select-datalet-inputs_series">
  14 +
  15 + <template>
  16 +
  17 + <style is="custom-style">
  18 + :host {
  19 + --paper-dropdown-menu-icon: {
  20 + color: #2196F3;
  21 + };
  22 + }
  23 +
  24 + #inputs_series_container {
  25 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  26 + font-size: 16px;
  27 +
  28 + height: 100%;
  29 + width: 258px;
  30 + }
  31 +
  32 + .inputs{
  33 + position: relative;
  34 + }
  35 +
  36 + .input_header {
  37 + height: 32px;
  38 + padding-top: 16px;
  39 + text-align: center;
  40 + font-weight: 700;
  41 + background-color: #B6B6B6;
  42 + }
  43 +
  44 + #expert_container {
  45 + display: none;
  46 + }
  47 +
  48 + #expert_header {
  49 + height: 32px;
  50 + padding-top: 16px;
  51 + margin-top: 8px;
  52 + text-align: center;
  53 + font-weight: 700;
  54 + color: #00BCD4;
  55 + cursor: pointer;
  56 + }
  57 +
  58 + .info_button {
  59 + position: absolute;
  60 + top: 18px;
  61 + right: 0px;
  62 + }
  63 +
  64 + paper-dropdown-menu {
  65 + height: 48px;
  66 + width: 210px;;
  67 + padding-left: 8px;
  68 + padding-bottom: 8px;
  69 + --paper-input-container-focus-color: #2196F3;
  70 + }
  71 +
  72 + paper-item.iron-selected {
  73 + background-color: #2196F3;
  74 + color: #FFFFFF;
  75 + }
  76 +
  77 + paper-icon-button {
  78 + color: #2196F3;
  79 + --paper-icon-button-ink-color: #2196F3;
  80 + margin: 0px;
  81 + }
  82 + </style>
  83 +
  84 + <paper-material id="inputs_series_container" elevation="5">
  85 +
  86 + <div class="input_header"><span id="inputs"></span></div>
  87 +
  88 + <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
  89 + <div class="inputs">
  90 + <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
  91 + <paper-menu class="dropdown-content">
  92 + <template is="dom-repeat" items={{fields}}>
  93 + <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
  94 + </template>
  95 + </paper-menu>
  96 + </paper-dropdown-menu>
  97 + <div class="info_button">
  98 + <paper-icon-button id="{{ddl_index}}" on-click="_setOrders" icon="unfold-more" title=""></paper-icon-button>
  99 + </div>
  100 + </div>
  101 + </template>
  102 +
  103 + <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
  104 +
  105 + <div id="expert_container">
  106 +
  107 + <div class="inputs">
  108 + <paper-dropdown-menu id="group_by" disabled>
  109 + <paper-menu class="dropdown-content">
  110 + <template is="dom-repeat" items={{groupableFields}}>
  111 + <paper-item id={{index}} on-tap="_setAggregators">{{_fieldName(item)}}</paper-item>
  112 + </template>
  113 + </paper-menu>
  114 + </paper-dropdown-menu>
  115 + <div class="info_button">
  116 + <paper-icon-button id="gb" on-click="_setOrders" icon="unfold-more" title="" disabled></paper-icon-button>
  117 + </div>
  118 + </div>
  119 +
  120 + <template is="dom-repeat" items="{{aggregateFields}}" as="field">
  121 + <div class="inputs">
  122 + <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}" disabled>
  123 + <paper-menu class="dropdown-content">
  124 + <template is="dom-repeat" items="{{functions}}">
  125 + <paper-item id={{index}} on-tap="_setAggregators">{{_operationName(index)}} : {{_fieldName(field)}}</paper-item>
  126 + </template>
  127 + </paper-menu>
  128 + </paper-dropdown-menu>
  129 + </div>
  130 + </template>
  131 +
  132 + </div>
  133 +
  134 + </paper-material>
  135 +
  136 +
  137 + </template>
  138 +
  139 + <script>
  140 +
  141 + Polymer({
  142 +
  143 + is : 'select-datalet-inputs_series',
  144 +
  145 + properties : {
  146 +
  147 + //INPUT
  148 + fields : {type : Array, value : []},
  149 +
  150 + //OUTPUT
  151 + selectedFields : {type : Array, value : ["", ""]},
  152 + aggregators : {type : Array, value : []},
  153 + orders : {type : Array, value : []},
  154 +
  155 + expert : {
  156 + type : Boolean,
  157 + value : false
  158 + },
  159 +
  160 + functions : {
  161 + type : Array,
  162 + value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
  163 + },
  164 +
  165 + inputs : {
  166 + type : Array,
  167 + value : []
  168 + },
  169 +
  170 + groupableFields : {
  171 + type : Array,
  172 + value : []
  173 + },
  174 +
  175 + aggregateFields : {
  176 + type : Array,
  177 + value : [""]
  178 + }
  179 +
  180 + },
  181 +
  182 + ready : function() {
  183 + $(this.$.inputs_series_container).perfectScrollbar();
  184 + },
  185 +
  186 + attached : function() {
  187 + this._translate();
  188 + },
  189 +
  190 + getSelectedFields : function () {
  191 + var gb_menu = $(this.$.group_by).find("paper-menu")[0];
  192 + var c_menu = $("#calculate_0").find("paper-menu")[0];
  193 +
  194 + if(gb_menu.selectedItem && c_menu.selectedItem && gb_menu.selectedItem.id != 0) {
  195 + var groupByField = this.groupableFields[gb_menu.selected];
  196 + if (groupByField != this.selectedFields[0])
  197 + return [this.selectedFields[0], groupByField, this.selectedFields[1]];
  198 + }
  199 + return this.selectedFields;
  200 + },
  201 +
  202 + getAggregators : function () {
  203 + return this.aggregators;
  204 + },
  205 +
  206 + getOrders : function () {
  207 + return this.orders;
  208 + },
  209 +
  210 + setFields : function(fields) {
  211 + var temp = this._copy(fields);
  212 + temp.unshift("");
  213 + this.fields = this._copy(temp);
  214 +
  215 + this._reset();
  216 + },
  217 +
  218 + setInputs : function(inputs) {
  219 + this.inputs = this._copy(inputs);
  220 + },
  221 +
  222 + fireReady : function() {
  223 + if(this.selectedFields[0] != "" && this.selectedFields[1] != "")
  224 + this.fire('select_visualization_inputs_ready');
  225 + },
  226 +
  227 + _reset : function() {
  228 + //this.fields = []; --> setFields
  229 + //this.inputs = []; --> setInputs
  230 + this.selectedFields = ["", ""];
  231 + this.aggregators = [];
  232 + //this.orders = []; --> _resetOrders
  233 + this.expert = true;
  234 + this._showExpertMode();//expert --> false
  235 + this.groupableFields = [];
  236 + this.aggregateFields = [""];
  237 +
  238 + this.async(function () {
  239 + //reset ddl
  240 + var ddls = document.getElementsByTagName("paper-dropdown-menu");
  241 + for (var i = 0; i < ddls.length; i++)
  242 + $(ddls[i]).find("paper-menu")[0].select(-1);
  243 + this.$.group_by.setAttribute("disabled", "");
  244 + $("#calculate_0")[0].setAttribute("disabled", "");
  245 + //reset orders
  246 + this._resetOrders();
  247 + }, 1);
  248 + },
  249 +
  250 + _translate : function(){
  251 + this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
  252 + this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
  253 + this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
  254 + },
  255 +
  256 + _showExpertMode : function() {
  257 + if(!this.expert) {
  258 + this.$.expert_header.style.color = "#000000";
  259 + this.$.expert_header.style.background = "#B6B6B6";
  260 + this.$.expert_container.style.display = "block";
  261 + }
  262 + else {
  263 + this.$.expert_header.style.color = "#00BCD4";
  264 + this.$.expert_header.style.background = "#FFFFFF";
  265 + this.$.expert_container.style.display = "none";
  266 + }
  267 +
  268 + this.expert = !this.expert;
  269 + },
  270 +
  271 + _addInput : function(e){
  272 + var selectedFields = this._copy(this.selectedFields);
  273 +
  274 + var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
  275 + var index = e.target.id;
  276 + selectedFields[ddl_index] = this.fields[index];
  277 +
  278 + this.selectedFields = this._copy(selectedFields);
  279 +
  280 + if(this.selectedFields[0] == "" || this.selectedFields[1] == "") {
  281 + this.$.group_by.setAttribute("disabled", "");
  282 + $("#calculate_0")[0].setAttribute("disabled", "");
  283 +
  284 + this.groupableFields = [];
  285 + this.aggregateFields = [""];
  286 + var menu = $("#calculate_0").find("paper-menu")[0];
  287 + menu.select(-1);
  288 + }
  289 + else {
  290 + this.$.group_by.removeAttribute("disabled");
  291 + $("#calculate_0")[0].removeAttribute("disabled");
  292 +
  293 + var groupableFields = [];
  294 + for (var i = 0; i < this.fields.length; i++) {
  295 + if(this.fields[i] != this.selectedFields[1])
  296 + groupableFields.push(this.fields[i]);
  297 + }
  298 + this.groupableFields = this._copy(groupableFields);
  299 + this.aggregateFields = [this.selectedFields[1]];
  300 +
  301 + this.async(function () {
  302 + var menu = $(this.$.group_by).find("paper-menu")[0];
  303 + menu.select(-1);
  304 + var menu = $("#calculate_0").find("paper-menu")[0];
  305 + //var selected = menu.selected;
  306 + menu.select(-1);
  307 + //menu.select(selected);
  308 + }, 0);
  309 + }
  310 + this._setAggregators();
  311 + },
  312 +
  313 + _setAggregators : function(){
  314 + this.async(function() {
  315 + this.aggregators = [];
  316 +
  317 + this._resetOrders();
  318 +
  319 + $("#gb")[0].setAttribute("disabled", "");
  320 +
  321 + var gb_menu = $(this.$.group_by).find("paper-menu")[0];
  322 + var c_menu = $("#calculate_0").find("paper-menu")[0];
  323 +
  324 + if(gb_menu.selectedItem && c_menu.selectedItem && gb_menu.selectedItem.id != 0) {
  325 + var groupByField = this.groupableFields[gb_menu.selected];
  326 + var operationIndex = c_menu.selectedItem.id;
  327 +
  328 + if (groupByField == this.selectedFields[0]){// X Axis field
  329 + this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
  330 + }
  331 + else{
  332 + $("#gb")[0].removeAttribute("disabled");
  333 + this.aggregators.push({"field": this.selectedFields[0], "operation": "GROUP BY"});
  334 + this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
  335 + }
  336 +
  337 + this.aggregators.push({"field": this.selectedFields[1], "operation": this.functions[operationIndex]});
  338 + }
  339 +
  340 + this.fireReady();
  341 + }, 0);
  342 + },
  343 +
  344 + _setOrders : function(e){
  345 + var t = e.target;
  346 + if(t.tagName.indexOf("IRON-ICON") > -1)
  347 + t = $(e.target).parents("paper-icon-button")[0];
  348 +
  349 + var icon = t.getAttribute("icon");
  350 + var id = t.getAttribute("id");
  351 + var field;
  352 +
  353 + if(id == "gb"){
  354 + var gb_menu = $(this.$.group_by).find("paper-menu")[0];
  355 + field = this.groupableFields[gb_menu.selected];
  356 + }
  357 + else {
  358 + field = this.selectedFields[id];
  359 + }
  360 +
  361 + if(icon.indexOf("unfold-more") > -1){
  362 + t.setAttribute("icon", "expand-less");
  363 + t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
  364 + var orders = this.orders.filter(function (el) { return el.field !== field; });
  365 + orders.unshift({"field": field, "operation": "ASC"});
  366 + this.orders = this._copy(orders);
  367 + }
  368 + else if(icon.indexOf("expand-less") > -1){
  369 + t.setAttribute("icon", "expand-more");
  370 + t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
  371 + var orders = this.orders.filter(function (el) { return el.field !== field; });
  372 + orders.unshift({"field": field, "operation": "DESC"});
  373 + this.orders = this._copy(orders);
  374 + }
  375 + else if(icon.indexOf("expand-more") > -1){
  376 + t.setAttribute("icon", "unfold-more");
  377 + t.setAttribute("title", ln["unsort_" + ln["localization"]]);
  378 + var orders = this.orders.filter(function (el) { return el.field !== field; });
  379 + this.orders = this._copy(orders);
  380 + }
  381 +
  382 + this.fireReady();
  383 + },
  384 +
  385 + _resetOrders : function(){
  386 + var icons = this.$.inputs_series_container.querySelectorAll("paper-icon-button");
  387 + for (var i = 0; i < icons.length; i++){
  388 + icons[i].setAttribute("icon", "unfold-more");
  389 + icons[i].setAttribute("title", ln["unsort_" + ln["localization"]]);
  390 + }
  391 + this.orders = [];
  392 + },
  393 +
  394 + _fieldName : function(field) {
  395 + return field.substring(field.lastIndexOf(",")+1, field.length);
  396 + },
  397 +
  398 + _getLabelName: function(key) {
  399 + return ln[key + "_" +ln["localization"]];
  400 + },
  401 +
  402 + _operationName: function(index) {
  403 + var key = this.functions[index];
  404 + return ln[key + "_" +ln["localization"]];
  405 + },
  406 +
  407 + _calculateLabel: function() {
  408 + return ln["calculate" + "_" +ln["localization"]];
  409 + },
  410 +
  411 + _copy : function(o) {
  412 + var out, v, key;
  413 + out = Array.isArray(o) ? new Array(o.length) : {};
  414 + for (key in o) {
  415 + v = o[key];
  416 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  417 + }
  418 + return out;
  419 + }
  420 +
  421 + });
  422 +
  423 + </script>
  424 +
  425 +</dom-module>
0 \ No newline at end of file 426 \ No newline at end of file
controllets/select-visualization-controllet/select-datalet-options.html 0 → 100644
  View file @fb05b40
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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">
  8 +
  9 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  10 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  11 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  12 +
  13 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  14 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  15 +
  16 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
  17 +
  18 +<dom-module id="select-datalet-options">
  19 +
  20 + <template>
  21 +
  22 + <style is="custom-style">
  23 + :host {
  24 + --paper-dropdown-menu-icon: {
  25 + color: #2196F3;
  26 + };
  27 + }
  28 +
  29 + #select_datalet_options_container {
  30 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  31 + font-size: 16px;
  32 +
  33 + /*height: 100vh;*/
  34 + height: 100%;
  35 + width: 258px;
  36 + }
  37 +
  38 + .inputs{
  39 + position: relative;
  40 + }
  41 +
  42 + .input_header {
  43 + height: 32px;
  44 + padding-top: 16px;
  45 + text-align: center;
  46 + font-weight: 700;
  47 + background-color: #B6B6B6;
  48 + }
  49 +
  50 + .info_button {
  51 + position: absolute;
  52 + top: 18px;
  53 + right: 0px;
  54 + }
  55 +
  56 + #dialog_info_input {
  57 + display: flex;
  58 + flex-direction: column;
  59 + color: #000000;
  60 + border: 2px solid #2196F3;
  61 + background-color: #E0E0E0;
  62 + min-width: 244px;
  63 + padding: 8px;
  64 + }
  65 +
  66 + #dialog_name{
  67 + font-size: 24px;
  68 + line-height: 24px;
  69 + font-weight: 700;
  70 + padding: 0px;
  71 + margin: 0px;
  72 + }
  73 +
  74 + #dialog_description{
  75 +
  76 + font-size: 16px;
  77 + line-height: 16px;
  78 + font-weight: normal;
  79 + padding: 0px;
  80 + margin: 8px 0px 0px 0px;
  81 + }
  82 +
  83 + paper-dropdown-menu {
  84 + height: 48px;
  85 + width: 210px;;
  86 + padding-left: 8px;
  87 + padding-bottom: 8px;
  88 + --paper-input-container-focus-color: #2196F3;
  89 + }
  90 +
  91 + paper-item.iron-selected {
  92 + background-color: #2196F3;
  93 + color: #FFFFFF;
  94 + }
  95 +
  96 + paper-icon-button {
  97 + color: #2196F3;
  98 + --paper-icon-button-ink-color: #2196F3;
  99 + margin: 0px;
  100 + }
  101 +
  102 + paper-input {
  103 + display: inline-block;
  104 + height: 48px;
  105 + /*padding: 0px 8px;*/
  106 + width: 210px;
  107 + padding-left: 8px;
  108 + padding-bottom: 8px;
  109 + --paper-input-container-focus-color: #2196F3;
  110 + }
  111 +
  112 + paper-input.base_input {
  113 + width: 242px;
  114 + }
  115 +
  116 + paper-textarea {
  117 + width: 242px;
  118 + padding-left: 8px;
  119 + padding-bottom: 4px;
  120 + --paper-input-container-focus-color: #2196F3;
  121 + }
  122 + </style>
  123 +
  124 + <paper-material id="select_datalet_options_container" elevation="5">
  125 +
  126 + <div class="input_header"><span id="baseInfo"></span></div>
  127 +
  128 + <div class="inputs">
  129 + <paper-input id="base_title" maxlength="32" class="base_input" on-change="_updateParams"></paper-input>
  130 + </div>
  131 +
  132 + <div class="inputs">
  133 + <paper-textarea id="base_description" maxlength="100" class="base_input" on-change="_updateParams" value=""></paper-textarea>
  134 + </div>
  135 +
  136 + <div class="input_header"><span id="layouts"></span></div>
  137 +
  138 + <template is="dom-repeat" items={{options}} index-as="index">
  139 + <div class="inputs">
  140 + <template is="dom-if" if="{{_checkType(item.type, 'text')}}">
  141 + <paper-input label={{_getLabelName(item.name)}} on-change="_updateParams"></paper-input>
  142 + </template>
  143 +
  144 + <template is="dom-if" if="{{_checkType(item.type, 'list')}}">
  145 + <paper-dropdown-menu label={{_getLabelName(item.name)}}>
  146 + <paper-menu class="dropdown-content" selected = 0>
  147 + <!--<paper-item on-tap="_updateParams"></paper-item>-->
  148 + <template is="dom-repeat" items={{item.list.item}}>
  149 + <paper-item id={{index}} on-tap="_updateParams">{{item}}</paper-item>
  150 + </template>
  151 + </paper-menu>
  152 + </paper-dropdown-menu>
  153 + </template>
  154 +
  155 + <div class="info_button">
  156 + <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
  157 + </div>
  158 + </div>
  159 + </template>
  160 +
  161 + </paper-material>
  162 +
  163 + <paper-dialog id="dialog_info_input">
  164 + <span id="dialog_name"></span>
  165 + <span id="dialog_description"></span>
  166 + </paper-dialog>
  167 +
  168 + </template>
  169 +
  170 + <script>
  171 +
  172 + Polymer({
  173 +
  174 + is : 'select-datalet-options',
  175 +
  176 + properties : {
  177 +
  178 + options : {
  179 + type : Array,
  180 + value : []
  181 + },
  182 +
  183 + params : {
  184 + type : Object,
  185 + value : {}
  186 + }
  187 +
  188 + },
  189 +
  190 + ready : function() {
  191 + $(this.$.select_datalet_options_container).perfectScrollbar();
  192 + },
  193 +
  194 + attached : function() {
  195 + this._translate();
  196 + },
  197 +
  198 + setOptions : function(options) {
  199 + this.options = [];
  200 + this.async(function() {
  201 + this.options = options;
  202 + }, 0);
  203 +
  204 + this.params["title"] = "";
  205 + this.params["description"] = "";
  206 + },
  207 +
  208 + ceckOptions : function(options) {
  209 + if(options.length != this.options.length)
  210 + this.setOptions(options);
  211 + },
  212 +
  213 + getParams : function() {
  214 + return this.params;
  215 + },
  216 +
  217 + _reset : function() {
  218 + this.options = [];
  219 + this.params = [];
  220 + },
  221 +
  222 + _updateParams : function() {
  223 + this.async(function() {
  224 + var textarea = this.$.select_datalet_options_container.querySelectorAll("paper-textarea");
  225 + this.params["description"] = textarea[0].value;
  226 +
  227 + var inputs = this.$.select_datalet_options_container.querySelectorAll("paper-input");
  228 + this.params["title"] = inputs[0].value;
  229 +
  230 + for (var i = 1; i < inputs.length; i++)
  231 + this.params[this.options[i-1].name] = inputs[i].value;
  232 +
  233 + this.fire('select_visualization_options_changed');
  234 + }, 0);
  235 + },
  236 +
  237 + _translate : function(){
  238 + this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];
  239 + this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];
  240 +
  241 + this.$.base_title.label = ln["title_" + ln["localization"]];
  242 + this.$.base_description.label = ln["description_" + ln["localization"]];
  243 + },
  244 +
  245 + _checkType: function(type, check){
  246 + return (type == check);
  247 + },
  248 +
  249 + _getLabelName: function(key) {
  250 + return ln[key + "_" +ln["localization"]];
  251 + },
  252 +
  253 + _showInfo : function(e){
  254 + var t = e.target;
  255 + if(t.tagName.indexOf("IRON-ICON") != -1)
  256 + t = $(e.target).parents("paper-icon-button")[0];
  257 +
  258 + var name = t.getAttribute("id");
  259 +
  260 + this.$.dialog_name.innerHTML = ln[name + "_" + ln["localization"]];
  261 + this.$.dialog_description.innerHTML = ln[name + "_description_" + ln["localization"]];
  262 + this.$.dialog_info_input.open();
  263 +
  264 + var pos = t.getBoundingClientRect();
  265 + $("#dialog_info_input").css("top", pos.top - 4);
  266 + $("#dialog_info_input").css("left", pos.left - 4);
  267 + },
  268 +
  269 + });
  270 +
  271 + </script>
  272 +
  273 +</dom-module>
0 \ No newline at end of file 274 \ No newline at end of file
controllets/select-visualization-controllet/select-visualization-controllet.html
  View file @fb05b40
@@ -2,37 +2,21 @@ @@ -2,37 +2,21 @@
2 2
3 <link rel="import" href="../../bower_components/paper-material/paper-material.html" /> 3 <link rel="import" href="../../bower_components/paper-material/paper-material.html" />
4 4
5 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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">  
8 -  
9 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
10 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
11 -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">  
12 -  
13 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
14 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
15 -  
16 <link rel="import" href="../../bower_components/paper-button/paper-button.html"> 5 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
17 6
18 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
19 -  
20 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" /> 7 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
  8 +<link rel="import" href="select-datalet-inputs_series.html" />
  9 +<link rel="import" href="select-datalet-inputs.html" />
  10 +<link rel="import" href="select-datalet-options.html" />
21 11
22 <script src="../../../DEEPCLIENT/js/deepClient.js"></script> 12 <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
23 13
24 -<dom-module id="datalet-selection-controllet"> 14 +<dom-module id="select-visualization-controllet">
25 15
26 <template> 16 <template>
27 17
28 <style is="custom-style"> 18 <style is="custom-style">
29 - :host {  
30 - --paper-dropdown-menu-icon: {  
31 - color: #2196F3;  
32 - };  
33 - }  
34 -  
35 - #datalet_selection_container { 19 + #select_visualization_container {
36 display: flex; 20 display: flex;
37 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 21 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
38 font-size: 16px; 22 font-size: 16px;
@@ -46,19 +30,17 @@ @@ -46,19 +30,17 @@
46 30
47 #datalet_selection_inputs { 31 #datalet_selection_inputs {
48 position: relative; 32 position: relative;
49 - height: 100vh;  
50 margin-left: 32px; 33 margin-left: 32px;
51 min-width: 258px; 34 min-width: 258px;
52 } 35 }
53 36
54 - #datalet_selection_labels { 37 + #datalet_selection_options {
55 position: relative; 38 position: relative;
56 - height: 100vh;  
57 margin-left: 32px; 39 margin-left: 32px;
58 min-width: 258px; 40 min-width: 258px;
59 } 41 }
60 42
61 - #datalet_selection_column { 43 + #datalet_preview_container {
62 position: relative; 44 position: relative;
63 width: 100%; 45 width: 100%;
64 margin-left: 32px; 46 margin-left: 32px;
@@ -74,10 +56,6 @@ @@ -74,10 +56,6 @@
74 padding: 16px; 56 padding: 16px;
75 } 57 }
76 58
77 - .inputs{  
78 - position: relative;  
79 - }  
80 -  
81 .input_header { 59 .input_header {
82 height: 32px; 60 height: 32px;
83 padding-top: 16px; 61 padding-top: 16px;
@@ -86,78 +64,6 @@ @@ -86,78 +64,6 @@
86 background-color: #B6B6B6; 64 background-color: #B6B6B6;
87 } 65 }
88 66
89 - #expert_container {  
90 - display: none;  
91 - }  
92 -  
93 - #expert_header {  
94 - display: none;  
95 -  
96 - height: 32px;  
97 - padding-top: 16px;  
98 - margin-top: 8px;  
99 - text-align: center;  
100 - font-weight: 700;  
101 - color: #00BCD4;  
102 - cursor: pointer;  
103 - }  
104 -  
105 - .field_nema {  
106 - height: 40px;  
107 - padding-top: 8px;  
108 -  
109 - margin-top: 8px;  
110 - padding-left: 16px;  
111 - font-weight: 700;  
112 - color: #2196F3;  
113 - background-color: #E0E0E0;  
114 - }  
115 -  
116 - .info_button {  
117 - position: absolute;  
118 - top: 18px;  
119 - right: 0px;  
120 - }  
121 -  
122 - paper-input {  
123 - display: inline-block;  
124 - height: 48px;  
125 - width: 210px;  
126 - padding-left: 8px;  
127 - padding-bottom: 8px;  
128 - --paper-input-container-focus-color: #2196F3;  
129 - }  
130 -  
131 - paper-input.base_input {  
132 - width: 242px;  
133 - }  
134 -  
135 - paper-textarea {  
136 - width: 242px;  
137 - padding-left: 8px;  
138 - padding-bottom: 4px;  
139 - --paper-input-container-focus-color: #2196F3;  
140 - }  
141 -  
142 - paper-dropdown-menu {  
143 - height: 48px;  
144 - width: 210px;;  
145 - padding-left: 8px;  
146 - padding-bottom: 8px;  
147 - --paper-input-container-focus-color: #2196F3;  
148 - }  
149 -  
150 - paper-item.iron-selected {  
151 - background-color: #2196F3;  
152 - color: #FFFFFF;  
153 - }  
154 -  
155 - paper-icon-button {  
156 - color: #2196F3;  
157 - --paper-icon-button-ink-color: #2196F3;  
158 - margin: 0px;  
159 - }  
160 -  
161 paper-button { 67 paper-button {
162 position: absolute; 68 position: absolute;
163 bottom: 16px; 69 bottom: 16px;
@@ -182,125 +88,43 @@ @@ -182,125 +88,43 @@
182 paper-button[disabled] { 88 paper-button[disabled] {
183 background-color: #B6B6B6; 89 background-color: #B6B6B6;
184 } 90 }
185 -  
186 - #dialog_info_input {  
187 - border: 2px solid #2196F3;  
188 - background-color: #E0E0E0;  
189 - min-width: 248px;  
190 - }  
191 </style> 91 </style>
192 92
193 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax> 93 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
194 94
195 - <div id="datalet_selection_container"> 95 + <div id="select_visualization_container">
196 96
197 <div id="items_vslider_controllet"> 97 <div id="items_vslider_controllet">
198 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet> 98 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
199 </div> 99 </div>
200 100
201 - <paper-material id="datalet_selection_inputs" elevation="5">  
202 - <div class="input_header"><span id="inputs"></span></div>  
203 - <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">  
204 - <div class="inputs">  
205 - <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>  
206 - <paper-menu class="dropdown-content">  
207 - <template is="dom-repeat" items={{fields}}>  
208 - <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>  
209 - <!--{{_fieldName(item)}}-->  
210 - </template>  
211 - </paper-menu>  
212 - </paper-dropdown-menu>  
213 - <div class="info_button">  
214 - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>  
215 - </div>  
216 - </div> 101 + <div id="datalet_selection_inputs">
  102 + <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
  103 + <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>
217 </template> 104 </template>
218 -  
219 - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->  
220 -  
221 - <div id="expert_header" on-click="_showExpertMode"><span id="expert">ADVANCED: GROUP BY</span></div>  
222 -  
223 - <div id="expert_container">  
224 -  
225 - <div class="inputs">  
226 - <paper-dropdown-menu id="group_by" label="GROUP BY">  
227 - <paper-menu class="dropdown-content">  
228 - <template is="dom-repeat" items={{selectedFields}}>  
229 - <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>  
230 - </template>  
231 - </paper-menu>  
232 - </paper-dropdown-menu>  
233 - <div class="info_button">  
234 - <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title="unsort"></paper-icon-button>  
235 - </div>  
236 - </div>  
237 -  
238 - <template is="dom-repeat" items="{{groupedFields}}">  
239 - <div class="inputs">  
240 - <paper-dropdown-menu id="calculate_{{index}}" label="CALCULATE">  
241 - <paper-menu class="dropdown-content">  
242 - <paper-item on-tap="_addGroupByInput">COUNT of {{_fieldName(item)}}</paper-item>  
243 - <paper-item on-tap="_addGroupByInput">SUM of {{_fieldName(item)}}</paper-item>  
244 - <paper-item on-tap="_addGroupByInput">MIN of {{_fieldName(item)}}</paper-item>  
245 - <paper-item on-tap="_addGroupByInput">MAX of {{_fieldName(item)}}</paper-item>  
246 - <paper-item on-tap="_addGroupByInput">AVG of {{_fieldName(item)}}</paper-item>  
247 - <paper-item on-tap="_addGroupByInput">FIRST of {{_fieldName(item)}}</paper-item>  
248 - <paper-item on-tap="_addGroupByInput">LAST of {{_fieldName(item)}}</paper-item>  
249 - </paper-menu>  
250 - </paper-dropdown-menu>  
251 - <div class="info_button">  
252 - <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title="unsort"></paper-icon-button>  
253 - </div>  
254 - </div>  
255 - </template>  
256 -  
257 - </div>  
258 -  
259 - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->  
260 -  
261 - </paper-material>  
262 -  
263 - <paper-material id="datalet_selection_labels" elevation="5">  
264 - <div class="input_header"><span id="baseInfo"></span></div>  
265 -  
266 - <div class="inputs">  
267 - <paper-input id="base_title" maxlength="32" class="base_input"></paper-input>  
268 - </div>  
269 -  
270 - <div class="inputs">  
271 - <paper-textarea id="base_description" maxlength="100" class="base_input"></paper-textarea>  
272 - </div>  
273 -  
274 - <div class="input_header"><span id="layouts"></span></div>  
275 -  
276 - <template is="dom-repeat" items="{{labels}}" index-as="index">  
277 - <div class="inputs">  
278 - <paper-input label={{_getLabelName(item.name)}}></paper-input>  
279 - <div class="info_button">  
280 - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>  
281 - </div>  
282 - </div> 105 + <template is="dom-if" if="{{_checkType(type, 'default')}}">
  106 + <select-datalet-inputs id="inputs"></select-datalet-inputs>
  107 + </template>
  108 + <template is="dom-if" if="{{_checkType(type, '')}}">
  109 + <select-datalet-inputs></select-datalet-inputs>
283 </template> 110 </template>
284 - </paper-material> 111 + </div>
285 112
  113 + <div id="datalet_selection_options">
  114 + <select-datalet-options id="options"></select-datalet-options>
  115 + </div>
286 116
287 - <div id="datalet_selection_column"> 117 + <div id="datalet_preview_container">
288 118
289 <paper-material id="datalet_selection_datalet" elevation="5"> 119 <paper-material id="datalet_selection_datalet" elevation="5">
290 <div class="input_header"><span id="dataletPreview"></span></div> 120 <div class="input_header"><span id="dataletPreview"></span></div>
291 <div id="datalet_selection_datalet_placeholder"></div> 121 <div id="datalet_selection_datalet_placeholder"></div>
292 -  
293 </paper-material> 122 </paper-material>
294 123
295 <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button> 124 <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
296 125
297 </div> 126 </div>
298 127
299 - <paper-dialog id="dialog_info_input">  
300 - <h2 id="dialog_name"></h2>  
301 - <p id="dialog_description"></p>  
302 - </paper-dialog>  
303 -  
304 </div> 128 </div>
305 129
306 </template> 130 </template>
@@ -309,7 +133,7 @@ @@ -309,7 +133,7 @@
309 133
310 Polymer({ 134 Polymer({
311 135
312 - is : 'datalet-selection-controllet', 136 + is : 'select-visualization-controllet',
313 137
314 properties : { 138 properties : {
315 139
@@ -333,24 +157,9 @@ @@ -333,24 +157,9 @@
333 value : undefined 157 value : undefined
334 }, 158 },
335 159
336 - loadPreview : {  
337 - type : Boolean,  
338 - value : false  
339 - },  
340 -  
341 type : { 160 type : {
342 type : String, 161 type : String,
343 - value : undefined  
344 - },  
345 -  
346 - inputs : {  
347 - type : Array,  
348 - value : []  
349 - },  
350 -  
351 - labels : {  
352 - type : Array,  
353 - value : [] 162 + value : ""
354 }, 163 },
355 164
356 filters : { 165 filters : {
@@ -358,16 +167,6 @@ @@ -358,16 +167,6 @@
358 value : [] 167 value : []
359 }, 168 },
360 169
361 - aggregators : {  
362 - type : Array,  
363 - value : []  
364 - },  
365 -  
366 - orders : {  
367 - type : Array,  
368 - value : []  
369 - },  
370 -  
371 fields : { 170 fields : {
372 type : Array, 171 type : Array,
373 value : [] 172 value : []
@@ -378,21 +177,11 @@ @@ -378,21 +177,11 @@
378 value : [] 177 value : []
379 }, 178 },
380 179
381 - groupedFields : {  
382 - type : Array,  
383 - value : []  
384 - },  
385 -  
386 dataletPreset : { 180 dataletPreset : {
387 type : Object, 181 type : Object,
388 value : [] 182 value : []
389 }, 183 },
390 184
391 -// selectableFields : {  
392 -// type : Array,  
393 -// value : []  
394 -// },  
395 -  
396 dataUrl : { 185 dataUrl : {
397 type : String, 186 type : String,
398 value : undefined 187 value : undefined
@@ -401,92 +190,25 @@ @@ -401,92 +190,25 @@
401 params:{ 190 params:{
402 type: Object, 191 type: Object,
403 value: undefined 192 value: undefined
404 - },  
405 -  
406 - expert : {  
407 - type : Boolean,  
408 - value : false  
409 - },  
410 -  
411 - modify : {  
412 - type : Boolean,  
413 - value : false  
414 } 193 }
415 194
416 }, 195 },
417 196
418 listeners: { 197 listeners: {
419 'items-vslider-controllet_selected-datalet': '_selectDatalet', 198 'items-vslider-controllet_selected-datalet': '_selectDatalet',
420 -// 'tree-view-controllet_selected-fields': '_updateSelectedFields'  
421 - 'change': '_paramsChanged'  
422 - },  
423 -  
424 - _showExpertMode : function() {  
425 - if(!this.expert) {  
426 - this.$.expert_header.style.color = "#000000";  
427 - this.$.expert_header.style.background = "#B6B6B6";  
428 - this.$.expert_container.style.display = "block";  
429 - }  
430 - else {  
431 - this.$.expert_header.style.color = "#00BCD4";  
432 - this.$.expert_header.style.background = "#FFFFFF";  
433 - this.$.expert_container.style.display = "none";  
434 - }  
435 -  
436 - this.expert = !this.expert;  
437 - },  
438 -  
439 - _showGroupedFields : function(e) {  
440 - var index = e.target.id;  
441 - var isSelected = false;  
442 - var temp = [];  
443 -  
444 - for (var i = 0; i < this.selectedFields.length; i++) {  
445 - if (this.selectedFields[i]) {  
446 - if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {  
447 - isSelected = true;  
448 - }  
449 - else {  
450 - temp.push(this.selectedFields[i])  
451 - }  
452 - }  
453 - }  
454 -  
455 - if (isSelected)  
456 - this.groupedFields = this._copy(temp);  
457 - else  
458 - this.groupedFields =[];  
459 -  
460 - this.async(function() {  
461 - var ddls = document.getElementsByTagName("paper-dropdown-menu");  
462 - for (var i = 0; i < ddls.length; i++){  
463 - var id = ddls[i].id;  
464 - if(id.indexOf("calculate") > -1) {  
465 - $(ddls[i]).find("paper-menu")[0].select(-1);  
466 - $(ddls[i]).find("paper-menu")[0].select(0);  
467 - }  
468 - }  
469 - }, 0);  
470 -  
471 - this._addGroupByInput(); 199 + 'select_visualization_inputs_ready': '_loadDatalet',
  200 + 'select_visualization_options_changed': '_tryLoadDatalet',
472 }, 201 },
473 202
474 ready : function() { 203 ready : function() {
475 this._resize(); 204 this._resize();
476 - $(this.$.datalet_selection_inputs).perfectScrollbar();  
477 - $(this.$.datalet_selection_labels).perfectScrollbar(); 205 +
478 $(this.$.datalet_selection_datalet).perfectScrollbar(); 206 $(this.$.datalet_selection_datalet).perfectScrollbar();
479 207
480 this.params = {'data-url' : this.dataUrl}; 208 this.params = {'data-url' : this.dataUrl};
481 209
482 - //this.modify = true;//da eliminare in futuro  
483 - if(this.preselectedDatalet){  
484 - if(this.modify)  
485 - this._preselectDatalet();  
486 -  
487 - this.modify = true;  
488 - this.preselectedDatalet = undefined;  
489 - } 210 + if(this.preselectedDatalet)
  211 + this._preselectDatalet();
490 }, 212 },
491 213
492 attached : function() { 214 attached : function() {
@@ -498,43 +220,34 @@ @@ -498,43 +220,34 @@
498 }, 220 },
499 221
500 setFilters : function(filters) { 222 setFilters : function(filters) {
501 - this.filters = filters; 223 + this.filters = this._copy(filters);
502 }, 224 },
503 225
504 setFields : function(fields) { 226 setFields : function(fields) {
505 - this.fields = fields; 227 + this.fields = this._copy(fields);
  228 +
  229 + var inputs = this._getInputs();
  230 + if(inputs)
  231 + inputs.setFields(this.fields);
506 }, 232 },
507 233
508 reset : function() { 234 reset : function() {
509 - this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
510 - this.preselectedDatalet = undefined;  
511 - this.type = undefined;  
512 - this.inputs = [];  
513 - this.labels = [];  
514 - this.$.expert_header.style.display = "none";  
515 - this.expert = true;  
516 - this._showExpertMode();  
517 - this.loadPreview = false; 235 + this.$.vslider._reset();
  236 + this.type = "";
518 this.$.datalet_selection_datalet_placeholder.innerHTML = ""; 237 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
519 - this._resetGroupBy();  
520 }, 238 },
521 239
522 _translate : function(){ 240 _translate : function(){
  241 + if(this.preselectedDatalet)
  242 + this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
  243 + else
  244 + this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
523 245
524 - this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];  
525 - this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];  
526 - this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];  
527 - this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];  
528 this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]]; 246 this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
529 -  
530 - this.$.base_title.label = ln["title_" + ln["localization"]];  
531 - this.$.base_description.label = ln["description_" + ln["localization"]];  
532 -  
533 - if(this.modify)  
534 - this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];  
535 }, 247 },
536 248
537 _selectDatalet : function(e){ 249 _selectDatalet : function(e){
  250 +
538 this.$.add_button.setAttribute("disabled", "true"); 251 this.$.add_button.setAttribute("disabled", "true");
539 252
540 this.selectedDatalet = e.detail.datalet; 253 this.selectedDatalet = e.detail.datalet;
@@ -542,289 +255,79 @@ @@ -542,289 +255,79 @@
542 this.$.datalet_selection_datalet_placeholder.innerHTML = ""; 255 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
543 256
544 if(!this.selectedDatalet){ 257 if(!this.selectedDatalet){
545 - this.type = undefined;  
546 - this.inputs = [];  
547 - this.labels = [];  
548 - this.$.expert_header.style.display = "none";  
549 - this.expert = true;  
550 - this._showExpertMode();  
551 - this.loadPreview = false; 258 + this.type = "";
  259 + this.$.options.setOptions([]);
552 } 260 }
553 else{ 261 else{
554 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet"; 262 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
555 this.$.selectedDatalet_request.generateRequest(); 263 this.$.selectedDatalet_request.generateRequest();
556 - this.$.expert_header.style.display = "block";  
557 } 264 }
558 }, 265 },
559 266
560 _preselectDatalet : function() { 267 _preselectDatalet : function() {
561 - this.type = "undefined";  
562 - this.$.selectedDatalet_request.url = this.deepUrl + this.preselectedDatalet + "-datalet";  
563 - this.$.selectedDatalet_request.generateRequest(); 268 +// console.log("_preselectDatalet to implement");
  269 +// console.log(this.preselectedDatalet);
  270 +// console.log(this.fields);
  271 +// console.log(this.dataletPreset);
564 272
565 - this.selectedDatalet = this.preselectedDatalet;  
566 - this.selectedFields = this._copy(this.fields);  
567 -  
568 - this.async(function() {  
569 - this.selectedFields = this._copy(this.fields);  
570 -  
571 - var inputs = document.getElementsByTagName("paper-dropdown-menu");  
572 - for (var i = 0; i < inputs.length; i++)  
573 - $(inputs[i]).find("paper-menu")[0].select(i);  
574 -  
575 - //set info labels options  
576 - var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");  
577 - for (var i = 0; i < labels.length; i++)  
578 - labels[i].value = this.dataletPreset[labels[i].label]; 273 + var dataletParams ={
  274 + component : this.preselectedDatalet+"-datalet",
  275 + params : this.dataletPreset,
  276 + fields : this.fields,
  277 + placeHolder : this.$.datalet_selection_datalet_placeholder
  278 + };
579 279
580 - var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");  
581 - for (var i = 0; i < labels.length; i++)  
582 - labels[i].value = this.dataletPreset[labels[i].label]; 280 + ComponentService.deep_url = this.deepUrl;
  281 + ComponentService.getComponent(dataletParams);
583 282
584 - this.loadPreview = true;  
585 - this._loadDatalet(this.selectedFields);  
586 - }, 300); 283 + this.$.add_button.removeAttribute("disabled");
587 }, 284 },
588 285
589 _handleSelectedDatalet : function(e){ 286 _handleSelectedDatalet : function(e){
590 287
591 if(this.type != e.detail.response.type) { 288 if(this.type != e.detail.response.type) {
592 289
593 - this.inputs = [];  
594 - this.labels = [];  
595 -  
596 - var inputs = this._copy(e.detail.response.idm.inputs.input);  
597 -  
598 - if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"  
599 - var name = inputs.name;  
600 - var description = inputs.description;  
601 - var selection = inputs.selection;  
602 - inputs = [];  
603 - for (var i in this.fields)  
604 - inputs.push({name: name + " " + i, description: description, selection: selection});  
605 - }  
606 -  
607 - /**/  
608 - var computedInputs = [];  
609 - computedInputs.push(inputs[0]);  
610 -  
611 - for(var i = 0; i < inputs.length; i++) {  
612 - var input = inputs[i];  
613 - if(input.selection == "*") {  
614 - var name = input.name;  
615 - var description = input.description;  
616 - var selection = input.selection;  
617 - for(var j = 0; j < (this.fields.length - inputs.length +1); j++)  
618 - computedInputs.push({name: name + " " + j, description: description, selection: selection});  
619 - }  
620 - }  
621 -  
622 - if(computedInputs.length > inputs.length)  
623 - inputs = computedInputs;  
624 - /**/  
625 -  
626 - this.async(function(){  
627 - this.type = e.detail.response.type;  
628 - this.inputs = inputs;  
629 - this.labels = e.detail.response.idm.inputs.layouts.input;  
630 -  
631 - this.selectedFields = new Array(inputs.length);  
632 - },0);  
633 -  
634 - this._resetGroupBy();  
635 -  
636 - this.loadPreview = false;  
637 - } 290 + this.type = e.detail.response.type;
638 291
639 - else if (this.loadPreview)  
640 - this._loadDatalet(this.selectedFields);  
641 - },  
642 -  
643 - _resetGroupBy : function(){  
644 - $(this.$.group_by).find("paper-menu")[0].select(-1);  
645 - this.groupedFields = [];  
646 - this.aggregators = [];  
647 - }, 292 + this.async(function () {
  293 + var inputs = this._getInputs();
  294 + inputs.setFields(this.fields);
  295 + inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
  296 + }, 0);
648 297
649 - _addGroupByInput : function(){  
650 - this.async(function() {//codice reprlicato!  
651 - var selectedFields = this.selectedFields;  
652 -  
653 - var load = true;  
654 -  
655 - if(this.inputs[0].selection == "*"){  
656 - var temp = [];  
657 - for (var i = 0; i < selectedFields.length; i++)  
658 - if(selectedFields[i])  
659 - temp.push(selectedFields[i]);  
660 - selectedFields = temp;  
661 - }  
662 - else {  
663 - for (var i = 0; i < selectedFields.length; i++)  
664 - if (!selectedFields[i]) {  
665 - load = false;  
666 - break;  
667 - }  
668 - }  
669 -  
670 - if(load){  
671 - this.loadPreview = true;  
672 - this._loadDatalet(selectedFields);  
673 - }  
674 - }, 0);  
675 - },  
676 -  
677 - _addOrder : function(e){  
678 - var t = e.target;  
679 - if(t.tagName.indexOf("IRON-ICON") > -1)  
680 - t = $(e.target).parents("paper-icon-button")[0];  
681 -  
682 - var icon = t.getAttribute("icon");  
683 - var name = t.getAttribute("id");  
684 -  
685 - if(name.indexOf("gb") > -1){  
686 - var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;  
687 - if(selectedItem)  
688 - name = selectedItem.textContent.trim();  
689 -// name = "[" + selectedItem.textContent.trim() + "]";  
690 - else  
691 - return;  
692 - }// else {  
693 -// var i = name;  
694 -// var ddl = $("#calculate_"+i);  
695 -//  
696 -// var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();  
697 -// var index = label.split(" ", 2).join(" ").length;  
698 -// var field = label.substring(index+1, label.length);  
699 -// var operation = label.substring(0, label.indexOf(" "));  
700 -// name = operation + "([" + field + "])";  
701 -// }  
702 -  
703 - if(icon.indexOf("unfold-more") > -1){  
704 - t.setAttribute("icon", "expand-less");  
705 - t.setAttribute("title", "sort ascending");  
706 - var orders = this.orders.filter(function (el) { return el.field !== name; });  
707 - orders.push({"field": name, "operation": "ASC"});  
708 - this.orders = this._copy(orders);  
709 - }  
710 - else if(icon.indexOf("expand-less") > -1){  
711 - t.setAttribute("icon", "expand-more");  
712 - t.setAttribute("title", "sort descending");  
713 - var orders = this.orders.filter(function (el) { return el.field !== name; });  
714 - orders.push({"field": name, "operation": "DESC"});  
715 - this.orders = this._copy(orders);  
716 - }  
717 - else if(icon.indexOf("expand-more") > -1){  
718 - t.setAttribute("icon", "unfold-more");  
719 - t.setAttribute("title", "unsort");  
720 - var orders = this.orders.filter(function (el) { return el.field !== name; });  
721 - this.orders = this._copy(orders);  
722 - }  
723 -  
724 - this._addGroupByInput();//no buoono  
725 -// if(load){  
726 -// this.loadPreview = true;  
727 -// this._loadDatalet(selectedFields);  
728 -// }  
729 - },  
730 -  
731 - _addInput : function(e){  
732 - var selectedFields = this._copy(this.selectedFields);  
733 -  
734 -// var index = $(e.target).parents("paper-dropdown-menu")[0].id;  
735 -// selectedFields[index] = e.target.innerHTML.trim();  
736 -  
737 - var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;  
738 - var index = e.target.id;  
739 - selectedFields[ddl_index] = this.fields[index];  
740 -  
741 - this.selectedFields = this._copy(selectedFields);  
742 -  
743 - var load = true;  
744 -  
745 - if(this.inputs[0].selection == "*"){  
746 - var temp = [];  
747 - for (var i = 0; i < selectedFields.length; i++)  
748 - if(selectedFields[i])  
749 - temp.push(selectedFields[i]);  
750 - selectedFields = temp; 298 + this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);
751 } 299 }
752 else { 300 else {
753 - for (var i = 0; i < selectedFields.length; i++)  
754 - if (!selectedFields[i]) {  
755 - load = false;  
756 - break;  
757 - } 301 + this.$.options.ceckOptions(e.detail.response.idm.inputs.layouts.input);
758 } 302 }
759 303
760 - this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators  
761 -  
762 - if(load){  
763 - this.loadPreview = true;  
764 - this._loadDatalet(selectedFields);  
765 - }  
766 - },  
767 -  
768 - _updateParams : function(){  
769 - var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");  
770 - this.params["description"] = textarea[0].value;  
771 -  
772 - if(!textarea[0].value)  
773 - this.params[textarea[0].label] = "";  
774 -  
775 - var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");  
776 - this.params["title"] = inputs[0].value;  
777 -  
778 - for (var i = 1; i < inputs.length; i++)  
779 - this.params[this.labels[i-1].name] = inputs[i].value;  
780 -  
781 - this.aggregators = [];  
782 -  
783 - var ddls = document.getElementsByTagName("paper-dropdown-menu");  
784 - for (var i = 0; i < ddls.length; i++){  
785 - var id = ddls[i].id;  
786 - if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {  
787 - var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();  
788 - this.aggregators.push({"field": label, "operation": "GROUP BY"});  
789 - }  
790 - if(id.indexOf("calculate") > -1) {  
791 - var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();  
792 -// var field = label.substring(label.lastIndexOf(" ")+1, label.length);  
793 - var index = label.split(" ", 2).join(" ").length;  
794 - var field = label.substring(index+1, label.length);  
795 - var operation = label.substring(0, label.indexOf(" "));  
796 - this.aggregators.push({"field": field, "operation": operation});  
797 - }  
798 - } 304 + this.async(function () {
  305 + var inputs = this._getInputs();
  306 + inputs.fireReady();
  307 + }, 0);
799 }, 308 },
800 309
801 - _paramsChanged : function(){  
802 -  
803 - this._updateParams();  
804 -  
805 - if(this.$.datalet_selection_datalet_placeholder.children[1])  
806 - this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params); 310 + _tryLoadDatalet : function(){
  311 + var inputs = this._getInputs();
  312 + inputs.fireReady();
807 }, 313 },
808 314
809 - _loadDatalet : function(selectedFields){ 315 + _loadDatalet : function(){
  316 + var inputs = this._getInputs();
810 317
811 - this._updateParams(); 318 + this.selectedFields = inputs.getSelectedFields();
812 319
813 this.params["filters"] = JSON.stringify(this.filters); 320 this.params["filters"] = JSON.stringify(this.filters);
814 - this.params["aggregators"] = JSON.stringify(this.aggregators);  
815 - this.params["orders"] = JSON.stringify(this.orders);  
816 -  
817 -// this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';  
818 -// this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';  
819 -// this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]'; 321 + this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
  322 + this.params["orders"] = JSON.stringify(inputs.getOrders());
820 323
821 - //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';  
822 - //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]'; 324 + var params = this.$.options.getParams();
  325 + for (var key in params) { this.params[key] = params[key]; }
823 326
824 var dataletParams ={ 327 var dataletParams ={
825 component : this.selectedDatalet+"-datalet", 328 component : this.selectedDatalet+"-datalet",
826 params : this.params, 329 params : this.params,
827 - fields : selectedFields, 330 + fields : this.selectedFields,
828 placeHolder : this.$.datalet_selection_datalet_placeholder 331 placeHolder : this.$.datalet_selection_datalet_placeholder
829 }; 332 };
830 333
@@ -835,53 +338,29 @@ @@ -835,53 +338,29 @@
835 }, 338 },
836 339
837 _addDatalet : function(){ 340 _addDatalet : function(){
838 -  
839 - this._updateParams();  
840 -  
841 - var selectedFields = [];  
842 - for (var i = 0; i < this.selectedFields.length; i++)  
843 - if(this.selectedFields[i])  
844 - selectedFields.push(this.selectedFields[i]);  
845 -  
846 var data = { 341 var data = {
847 dataUrl : this.dataUrl, 342 dataUrl : this.dataUrl,
848 params : this.params, 343 params : this.params,
849 - fields : selectedFields, 344 + fields : this.selectedFields,
850 datalet : this.selectedDatalet+"-datalet", 345 datalet : this.selectedDatalet+"-datalet",
851 -// comment : "",//DEPRECATED!!!  
852 staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data) 346 staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
853 } 347 }
854 348
855 this.fire('data-sevc-controllet.dataletCreated', {data : data}); 349 this.fire('data-sevc-controllet.dataletCreated', {data : data});
856 -  
857 }, 350 },
858 351
859 - _showInfo : function(e){  
860 -// var that = this;  
861 - var t = e.target;  
862 - if(t.tagName.indexOf("IRON-ICON") != -1)  
863 - t = $(e.target).parents("paper-icon-button")[0];  
864 -  
865 -// var name = t.getAttribute("title").replace(" info", "");  
866 - var name = t.getAttribute("id");  
867 -  
868 - var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];  
869 - if(!dataset)  
870 - dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];  
871 -  
872 - this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);  
873 - this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]];  
874 - this.$.dialog_info_input.open();  
875 -  
876 - var pos = t.getBoundingClientRect();  
877 - $("#dialog_info_input").css("top", pos.top - 4);  
878 - $("#dialog_info_input").css("left", pos.left - 4); 352 + _checkType: function(type, check){
  353 + if (type == "multiseries" || type == "")
  354 + return (type == check);
  355 + else if(check == "default")
  356 + return true;
  357 + return false;
879 }, 358 },
880 359
881 - _fieldName : function(field) {  
882 - if(!field)//when?  
883 - return "";  
884 - return field.substring(field.lastIndexOf(",")+1, field.length); 360 + _getInputs : function(){
  361 + if(this.type == "multiseries")
  362 + return this.$$("#inputs_series")
  363 + return this.$$("#inputs");
885 }, 364 },
886 365
887 _copy : function(o) { 366 _copy : function(o) {
@@ -894,32 +373,14 @@ @@ -894,32 +373,14 @@
894 return out; 373 return out;
895 }, 374 },
896 375
897 - _getLabelName: function(key) {  
898 - //* exceptions  
899 - if(key.indexOf("Cell") > -1) {  
900 - return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);  
901 - }  
902 - if(key.indexOf("Level") > -1) {  
903 - return ln["Level" + "_" +ln["localization"]] + key.slice(-2);  
904 - }  
905 - if(key.indexOf("Category") > -1) {  
906 - return ln["Category" + "_" +ln["localization"]] + key.slice(-2);  
907 - }  
908 -  
909 - return ln[key + "_" +ln["localization"]];  
910 - },  
911 -  
912 _resize : function(){ 376 _resize : function(){
913 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; 377 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
914 h = h - 64 - 8; //height with page scroller 378 h = h - 64 - 8; //height with page scroller
915 379
916 - $("#items_vslider_container").height(h);//vslider controllet  
917 - 380 + $("#items_vslider_controllet").height(h);//vslider controllet
918 $("#datalet_selection_inputs").height(h); 381 $("#datalet_selection_inputs").height(h);
919 - $("#datalet_selection_labels").height(h);  
920 -// if(this.modify)  
921 -// $("#datalet_selection_datalet").height(h-128);  
922 -// else 382 + $("#datalet_selection_options").height(h);
  383 +
923 $("#datalet_selection_datalet").height(h); 384 $("#datalet_selection_datalet").height(h);
924 } 385 }
925 386
datalets/areachart-datalet/areachart-datalet.html
  View file @fb05b40
@@ -62,7 +62,7 @@ Example: @@ -62,7 +62,7 @@ Example:
62 * @method transformData 62 * @method transformData
63 */ 63 */
64 presentData: function(){ 64 presentData: function(){
65 - $(this._component.$.charts.$.container).highcharts({ 65 + options = {
66 chart: { 66 chart: {
67 type: 'area', 67 type: 'area',
68 zoomType: 'xy' 68 zoomType: 'xy'
@@ -91,7 +91,16 @@ Example: @@ -91,7 +91,16 @@ Example:
91 }, 91 },
92 plotOptions: { 92 plotOptions: {
93 area: { 93 area: {
94 - 94 + marker: {
  95 + enabled: false,
  96 + symbol: 'circle',
  97 + radius: 2,
  98 + states: {
  99 + hover: {
  100 + enabled: true
  101 + }
  102 + }
  103 + }
95 } 104 }
96 }, 105 },
97 legend: { 106 legend: {
@@ -99,17 +108,22 @@ Example: @@ -99,17 +108,22 @@ Example:
99 align: 'right', 108 align: 'right',
100 verticalAlign: 'top', 109 verticalAlign: 'top',
101 x: -40, 110 x: -40,
102 - y: 100, 111 + y: 80,
103 floating: true, 112 floating: true,
104 borderWidth: 1, 113 borderWidth: 1,
105 - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 114 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
106 shadow: true 115 shadow: true
107 }, 116 },
108 credits: { 117 credits: {
109 enabled: false 118 enabled: false
110 }, 119 },
111 - series: this.properties.series.value//this._component.series  
112 - }); 120 + series: this.properties.series.value
  121 + };
  122 +
  123 + if(this._component.theme != "themeBase" && this._component.theme != "")
  124 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  125 +
  126 + $(this._component.$.charts.$.container).highcharts(options);
113 } 127 }
114 }; 128 };
115 129
@@ -150,6 +164,21 @@ Example: @@ -150,6 +164,21 @@ Example:
150 suffix : { 164 suffix : {
151 type : String, 165 type : String,
152 value : "units" 166 value : "units"
  167 + },
  168 + theme : {
  169 + type : String,
  170 + value : ""
  171 + },
  172 + /**
  173 + * It's the component behavior
  174 + *
  175 + * @attribute behavior
  176 + * @type Object
  177 + * @default {}
  178 + */
  179 + behavior : {
  180 + type : Object,
  181 + value : {}
153 } 182 }
154 }, 183 },
155 /** 184 /**
datalets/areachart-datalet/areachart-datalet.png 100755 → 100644
View file @fb05b40

449 Bytes | W: | H:

607 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/areachart_stacked-datalet/areachart_stacked-datalet.html 0 → 100755
  View file @fb05b40
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  33 +
  34 +<!--
  35 +
  36 +`areachart-datalet` is a areachart datalet based on highcharts project http://www.highcharts.com/
  37 +
  38 +Example:
  39 +
  40 + <areachart-datalet
  41 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  42 + fields='["field1","field2"]'>
  43 + </areachart-datalet>
  44 +
  45 +@element areachart-datalet
  46 +@status v0.1
  47 +@demo demo/index.html
  48 +@group datalets
  49 +-->
  50 +
  51 +<dom-module name="areachart_stacked-datalet">
  52 + <template>
  53 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
  54 + </template>
  55 + <script>
  56 +
  57 + var AreachartStackedBehavior = {
  58 +
  59 + /**
  60 + * Bluid Highchart object
  61 + *
  62 + * @method transformData
  63 + */
  64 + presentData: function(){
  65 + options = {
  66 + chart: {
  67 + type: 'area',
  68 + zoomType: 'xy',
  69 + },
  70 + title: {
  71 + text: this._component.title
  72 + },
  73 + xAxis: {
  74 + categories: this.properties.categories.value,
  75 + title: {
  76 + text: this._component.yAxisLabel
  77 + }
  78 + },
  79 + yAxis: {
  80 + min: 0,
  81 + title: {
  82 + text: this._component.xAxisLabel,
  83 + },
  84 + },
  85 + tooltip: {
  86 + valueSuffix: ' ' + this._component.suffix
  87 + },
  88 + plotOptions: {
  89 + series: {
  90 + stacking: this._component.stack
  91 + },
  92 + area: {
  93 + marker: {
  94 + enabled: false,
  95 + symbol: 'circle',
  96 + radius: 2,
  97 + states: {
  98 + hover: {
  99 + enabled: true
  100 + }
  101 + }
  102 + }
  103 + }
  104 +// bar: {
  105 +// dataLabels: {
  106 +// enabled: true
  107 +// }
  108 +// }
  109 + },
  110 + series: this.properties.series.value
  111 + };
  112 +
  113 + if(this._component.theme != "themeBase" && this._component.theme != "")
  114 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  115 +
  116 + $(this._component.$.charts.$.container).highcharts(options);
  117 + }
  118 + };
  119 +
  120 + AreachartStackedDatalet = Polymer({
  121 + is: 'areachart_stacked-datalet',
  122 +
  123 + properties: {
  124 + /**
  125 + * It's the label for X axis
  126 + *
  127 + * @attribute xAxisLabel
  128 + * @type String
  129 + * @default ''
  130 + */
  131 + xAxisLabel: {
  132 + type: String,
  133 + value: ""
  134 + },
  135 + /**
  136 + * It's the label for Y axis
  137 + *
  138 + * @attribute yAxisLabel
  139 + * @type String
  140 + * @default ''
  141 + */
  142 + yAxisLabel: {
  143 + type: String,
  144 + value: ""
  145 + },
  146 + /**
  147 + * It's the values suffix
  148 + *
  149 + * @attribute suffix
  150 + * @type Strig
  151 + * @default 'units'
  152 + */
  153 + suffix : {
  154 + type : String,
  155 + value : ""
  156 + },
  157 +
  158 + stack : {
  159 + type : String,
  160 + value : "normal"
  161 + },
  162 +
  163 + theme : {
  164 + type : String,
  165 + value : ""
  166 + },
  167 + /**
  168 + * It's the component behavior
  169 + *
  170 + * @attribute behavior
  171 + * @type Object
  172 + * @default {}
  173 + */
  174 + behavior : {
  175 + type : Object,
  176 + value : {}
  177 + }
  178 +
  179 + },
  180 +
  181 + /**
  182 + * 'ready' callback extend the areachartComponentBehavior with HighchartsComponentBehavior and areachartBehavior
  183 + * and run the Datalet workcycle.
  184 + *
  185 + * @method ready
  186 + */
  187 + ready: function(){
  188 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, AreachartStackedBehavior);
  189 + this.async(function(){this.behavior.init(this)},0);
  190 + }
  191 + });
  192 + </script>
  193 +</dom-module>
0 \ No newline at end of file 194 \ No newline at end of file
datalets/areachart_stacked-datalet/areachart_stacked-datalet.png 0 → 100644
View file @fb05b40

925 Bytes
datalets/bar-chart-datalet/bar-chart-datalet.png deleted
View file @dcd5b28

526 Bytes
datalets/barchart-datalet/barchart-datalet.html
  View file @fb05b40
@@ -62,8 +62,7 @@ Example: @@ -62,8 +62,7 @@ Example:
62 * @method transformData 62 * @method transformData
63 */ 63 */
64 presentData: function(){ 64 presentData: function(){
65 -  
66 - $(this._component.$.charts.$.container).highcharts({ 65 + options = {
67 chart: { 66 chart: {
68 type: 'bar', 67 type: 'bar',
69 zoomType: 'xy' 68 zoomType: 'xy'
@@ -102,18 +101,22 @@ Example: @@ -102,18 +101,22 @@ Example:
102 align: 'right', 101 align: 'right',
103 verticalAlign: 'top', 102 verticalAlign: 'top',
104 x: -40, 103 x: -40,
105 - y: 100, 104 + y: 80,
106 floating: true, 105 floating: true,
107 borderWidth: 1, 106 borderWidth: 1,
108 - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 107 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
109 shadow: true 108 shadow: true
110 }, 109 },
111 credits: { 110 credits: {
112 enabled: false 111 enabled: false
113 }, 112 },
114 series: this.properties.series.value 113 series: this.properties.series.value
115 - }); 114 + };
  115 +
  116 + if(this._component.theme != "themeBase" && this._component.theme != "")
  117 + jQuery.extend(true, options, Highcharts[this._component.theme]);
116 118
  119 + $(this._component.$.charts.$.container).highcharts(options);
117 } 120 }
118 }; 121 };
119 122
@@ -121,51 +124,26 @@ Example: @@ -121,51 +124,26 @@ Example:
121 is: 'barchart-datalet', 124 is: 'barchart-datalet',
122 125
123 properties: { 126 properties: {
124 - /**  
125 - * It's the label for X axis  
126 - *  
127 - * @attribute xAxisLabel  
128 - * @type String  
129 - * @default ''  
130 - */  
131 xAxisLabel: { 127 xAxisLabel: {
132 type: String, 128 type: String,
133 value: "" 129 value: ""
134 }, 130 },
135 - /**  
136 - * It's the label for Y axis  
137 - *  
138 - * @attribute yAxisLabel  
139 - * @type String  
140 - * @default ''  
141 - */  
142 yAxisLabel: { 131 yAxisLabel: {
143 type: String, 132 type: String,
144 value: "" 133 value: ""
145 }, 134 },
146 - /**  
147 - * It's the values suffix  
148 - *  
149 - * @attribute suffix  
150 - * @type Strig  
151 - * @default 'units'  
152 - */  
153 suffix : { 135 suffix : {
154 type : String, 136 type : String,
155 - value : "units" 137 + value : ""
  138 + },
  139 + theme : {
  140 + type : String,
  141 + value : ""
156 }, 142 },
157 - /**  
158 - * It's the component behavior  
159 - *  
160 - * @attribute behavior  
161 - * @type Object  
162 - * @default {}  
163 - */  
164 behavior : { 143 behavior : {
165 type : Object, 144 type : Object,
166 value : {} 145 value : {}
167 } 146 }
168 -  
169 }, 147 },
170 148
171 /** 149 /**
datalets/barchart-datalet/barchart-datalet.png 100755 → 100644
View file @fb05b40

526 Bytes | W: | H:

459 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/bar-chart-datalet/bar-chart-datalet.html renamed to datalets/barchart_stacked-datalet/barchart_stacked-datalet.html
  View file @fb05b40
@@ -48,13 +48,13 @@ Example: @@ -48,13 +48,13 @@ Example:
48 @group datalets 48 @group datalets
49 --> 49 -->
50 50
51 -<dom-module name="bar-chart-datalet"> 51 +<dom-module name="barchart_stacked-datalet">
52 <template> 52 <template>
53 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet> 53 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
54 </template> 54 </template>
55 <script> 55 <script>
56 56
57 - var Bar_chartBehavior = { 57 + var BarchartStackedBehavior = {
58 58
59 /** 59 /**
60 * Bluid Highchart object 60 * Bluid Highchart object
@@ -62,94 +62,51 @@ Example: @@ -62,94 +62,51 @@ Example:
62 * @method transformData 62 * @method transformData
63 */ 63 */
64 presentData: function(){ 64 presentData: function(){
65 -  
66 -// var a = "theme";//default  
67 -// var a = "themeDarkUnika";  
68 - var a = "themeSandSignika";  
69 -// var a = "themeGridLight";  
70 -  
71 - Highcharts.setOptions(Highcharts[a]);  
72 -  
73 - $(this._component.$.charts.$.container).highcharts({ 65 + options = {
74 chart: { 66 chart: {
75 type: 'bar', 67 type: 'bar',
76 - zoomType: 'xy' 68 + zoomType: 'xy',
77 }, 69 },
78 title: { 70 title: {
79 text: this._component.title 71 text: this._component.title
80 }, 72 },
81 xAxis: { 73 xAxis: {
82 categories: this.properties.categories.value, 74 categories: this.properties.categories.value,
83 -// categories: ['Cinesi', 'Albanesi', 'Rumeni', 'Pakistani', 'Marocchini', 'Altri stranieri'],  
84 title: { 75 title: {
85 - text: this._component.xAxisLabel 76 + text: this._component.yAxisLabel
86 } 77 }
87 }, 78 },
88 yAxis: { 79 yAxis: {
89 min: 0, 80 min: 0,
90 title: { 81 title: {
91 - text: this._component.yAxisLabel,  
92 - align: 'high' 82 + text: this._component.xAxisLabel,
93 }, 83 },
94 - labels: {  
95 - overflow: 'justify'  
96 - }  
97 }, 84 },
98 tooltip: { 85 tooltip: {
99 valueSuffix: ' ' + this._component.suffix 86 valueSuffix: ' ' + this._component.suffix
100 }, 87 },
101 plotOptions: { 88 plotOptions: {
102 - bar: {  
103 - dataLabels: {  
104 - enabled: true  
105 - }  
106 - }  
107 -//  
108 -// series: {  
109 -// stacking: 'normal' 89 + series: {
  90 + stacking: this._component.stack
  91 + },
  92 +// bar: {
  93 +// dataLabels: {
  94 +// enabled: true
  95 +// }
110 // } 96 // }
111 }, 97 },
112 - legend: {  
113 - layout: 'vertical',  
114 - align: 'right',  
115 - verticalAlign: 'top',  
116 - x: -40,  
117 - y: 40,  
118 - floating: true,  
119 - borderWidth: 1,  
120 - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),  
121 - shadow: true  
122 - },  
123 - credits: {  
124 - enabled: false  
125 - },  
126 -  
127 series: this.properties.series.value 98 series: this.properties.series.value
128 -// series: [{  
129 -// name: '2010',  
130 -// data: [107, 31, 635, 203, 2]  
131 -// }, {  
132 -// name: '2011',  
133 -// data: [1353, 156, 947, 408, 6]  
134 -// }, {  
135 -// name: '2012',  
136 -// data: [133, 156, 947, 408, 64]  
137 -// }, {  
138 -// name: '2013',  
139 -// data: [133, 156, 947, 48, 6]  
140 -// }, {  
141 -// name: '2014',  
142 -// data: [1052, 954, 4250, 740, 38]  
143 -// }]  
144 - });  
145 - 99 + };
146 100
  101 + if(this._component.theme != "themeBase" && this._component.theme != "")
  102 + jQuery.extend(true, options, Highcharts[this._component.theme]);
147 103
  104 + $(this._component.$.charts.$.container).highcharts(options);
148 } 105 }
149 }; 106 };
150 107
151 - BarchartDatalet = Polymer({  
152 - is: 'bar-chart-datalet', 108 + BarchartStackedDatalet = Polymer({
  109 + is: 'barchart_stacked-datalet',
153 110
154 properties: { 111 properties: {
155 /** 112 /**
@@ -183,7 +140,17 @@ Example: @@ -183,7 +140,17 @@ Example:
183 */ 140 */
184 suffix : { 141 suffix : {
185 type : String, 142 type : String,
186 - value : "units" 143 + value : ""
  144 + },
  145 +
  146 + stack : {
  147 + type : String,
  148 + value : "normal"
  149 + },
  150 +
  151 + theme : {
  152 + type : String,
  153 + value : ""
187 }, 154 },
188 /** 155 /**
189 * It's the component behavior 156 * It's the component behavior
@@ -206,7 +173,7 @@ Example: @@ -206,7 +173,7 @@ Example:
206 * @method ready 173 * @method ready
207 */ 174 */
208 ready: function(){ 175 ready: function(){
209 - this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bar_chartBehavior); 176 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartStackedBehavior);
210 this.async(function(){this.behavior.init(this)},0); 177 this.async(function(){this.behavior.init(this)},0);
211 } 178 }
212 }); 179 });
datalets/barchart_stacked-datalet/barchart_stacked-datalet.png 0 → 100644
View file @fb05b40

45.4 KB
datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
  View file @fb05b40
@@ -101,12 +101,6 @@ var AjaxJsonAlasqlBehavior = { @@ -101,12 +101,6 @@ var AjaxJsonAlasqlBehavior = {
101 for (var i=0; i < this._component.fields.length; i++) 101 for (var i=0; i < this._component.fields.length; i++)
102 fields.push(this._fieldName(this._component.fields[i], provider)); 102 fields.push(this._fieldName(this._component.fields[i], provider));
103 103
104 - //if(aggregators)  
105 - // for (var i=0; i < aggregators.length; i++)  
106 - // aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);  
107 -  
108 - //var jsonData = [this.properties.json_results.value];  
109 -  
110 //jsdatachecker 104 //jsdatachecker
111 var _converter = new DataTypeConverter(); 105 var _converter = new DataTypeConverter();
112 var path2 = this._arrayPath(provider); 106 var path2 = this._arrayPath(provider);
@@ -155,65 +149,46 @@ var AjaxJsonAlasqlBehavior = { @@ -155,65 +149,46 @@ var AjaxJsonAlasqlBehavior = {
155 pureSelect = pureSelect.slice(0, -2); 149 pureSelect = pureSelect.slice(0, -2);
156 150
157 //GROUP BY 151 //GROUP BY
158 - //var groupBy = "";  
159 - //if(aggregators && aggregators.length) {  
160 - //  
161 - // for (var i=0; i < aggregators.length; i++)  
162 - // aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);  
163 - //  
164 - // groupBy = "GROUP BY " + aggregators[0]["field"];  
165 - // select = "SELECT " + aggregators[0]["field"];  
166 - // for (var i = 1; i < aggregators.length; i++)  
167 - // select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];  
168 - //}  
169 -  
170 - //var groupBy = "";  
171 - //if(aggregators && aggregators.length) {  
172 - //  
173 - // groupBy = "GROUP BY " + this._fieldName(aggregators[0]["field"], "");  
174 - // select = "SELECT " + this._fieldName(aggregators[0]["field"], provider) + " as " + this._fieldName(aggregators[0]["field"], "");  
175 - // for (var i = 1; i < aggregators.length; i++)  
176 - // select += ", " + aggregators[i]["operation"] + "(" + this._fieldName(aggregators[i]["field"], provider) + ") as " + this._fieldName(aggregators[i]["field"], "");  
177 - //}  
178 -  
179 - //GROUP BY  
180 var groupBy = ""; 152 var groupBy = "";
  153 + var select = "";
181 if(aggregators && aggregators.length) { 154 if(aggregators && aggregators.length) {
182 155
183 for (var i=0; i < aggregators.length; i++) 156 for (var i=0; i < aggregators.length; i++)
184 aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], ""); 157 aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], "");
185 158
186 groupBy = "GROUP BY " + aggregators[0]["field"]; 159 groupBy = "GROUP BY " + aggregators[0]["field"];
187 - var select = "SELECT " + aggregators[0]["field"]; 160 + select = "SELECT " + aggregators[0]["field"];
188 for (var i = 1; i < aggregators.length; i++) 161 for (var i = 1; i < aggregators.length; i++)
189 select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"]; 162 select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
  163 +
  164 + if(aggregators[1] && aggregators[1]["operation"] == "GROUP BY") {
  165 + groupBy = "GROUP BY " + aggregators[0]["field"] + ", " + aggregators[1]["field"];
  166 + select = "SELECT " + aggregators[0]["field"] + ", " + aggregators[1]["field"];
  167 + for (var i = 2; i < aggregators.length; i++)
  168 + select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
  169 + }
190 } 170 }
191 171
192 //QUERY 172 //QUERY
193 var path = this._path(this._component.fields[0], provider); 173 var path = this._path(this._component.fields[0], provider);
  174 + var query;
194 175
195 - console.log('SELECT '+ path +' FROM ?');  
196 - var res = alasql("SELECT "+ path +" FROM ?", [jsonData]); 176 + query = "SELECT "+ path +" FROM ?";
  177 + //console.log(query);
  178 + var res = alasql(query, [jsonData]);
197 179
198 var records = res[0][path]; 180 var records = res[0][path];
199 181
200 - //console.log(select + ' FROM ? ' + where + ' ' + groupBy + ' ' + orderBy + '');  
201 - //var obj = alasql(select + " FROM ? " + where + " " + groupBy + " " + orderBy + "", [records]);  
202 -  
203 - console.log(pureSelect + ' FROM ? ' + where);  
204 - var obj = alasql(pureSelect + " FROM ? " + where, [records]); 182 + query = pureSelect + " FROM ? " + where + " " + orderBy;
  183 + //console.log(query);
  184 + var obj = alasql(query, [records]);
205 185
206 if (groupBy != "") { 186 if (groupBy != "") {
207 - console.log(select + ' FROM ? ' + groupBy + ' ' + orderBy + '');  
208 - obj = alasql(select + " FROM ? " + groupBy + " " + orderBy + "", [obj]); 187 + query = select + " FROM ? " + groupBy + " " + orderBy;
  188 + //console.log(query);
  189 + obj = alasql(query, [obj]);
209 } 190 }
210 191
211 - //TEST  
212 - //var query = "SELECT [preteur], [annee] as [annee], SUM([capital_restant_du]) as [capital_restant_du] FROM ? GROUP BY [preteur], [annee]"  
213 - //var obj = alasql(query, [obj]);  
214 - //console.log(obj);  
215 - //this.data = obj;  
216 -  
217 //PUSH DATA 192 //PUSH DATA
218 if(!obj || obj.length == 0) 193 if(!obj || obj.length == 0)
219 this.data = [] 194 this.data = []
datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior_old2.js 0 → 100755
  View file @fb05b40
  1 +/*
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +*/
  25 +
  26 +/**
  27 + * Developed by :
  28 + * ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 + *
  30 +*/
  31 +
  32 +
  33 +var AjaxJsonAlasqlBehavior = {
  34 +
  35 + properties: {
  36 +
  37 + /**
  38 + * It contains the json data from async xhr call returned from core-ajax core component
  39 + *
  40 + * @attribute json_results
  41 + * @type object
  42 + * @default 'null'.
  43 + */
  44 + json_results: {
  45 + type: Object,
  46 + value: {}
  47 + }
  48 +
  49 + },
  50 +
  51 + /**
  52 + * Make an AJAX call to the dataset URL
  53 + *
  54 + * @method requestData
  55 + */
  56 + requestData: function(){
  57 +
  58 + var comp = this;
  59 +
  60 + $.ajax({
  61 + url: this._component.dataUrl,
  62 + dataType: "json",
  63 + success: function(e){
  64 + comp.handleResponse(e);
  65 + }
  66 + });
  67 + },
  68 +
  69 + /**
  70 + * Called when core-ajax component receive the json data from called url.
  71 + *
  72 + * @method handleResponse
  73 + */
  74 + handleResponse: function(e) {
  75 + this.properties.json_results.value = e;
  76 + this.runWorkcycle();
  77 + },
  78 +
  79 + /**
  80 + * selectData built a JSONPATH query based on the user selected fields then extract data from the JSON response.
  81 + * This method built an objects <name, data> for every user selected field and push it into the data array.
  82 + *
  83 + * @method selectData
  84 + */
  85 + selectData : function() {
  86 + this._component.fields = JSON.parse(this._component.fields);
  87 + var provider = this._getProvider(this._component.fields[0]);
  88 +
  89 + var filters = JSON.parse(this._component.getAttribute("filters"));
  90 + var aggregators = JSON.parse(this._component.getAttribute("aggregators"));
  91 + var orders = JSON.parse(this._component.getAttribute("orders"));
  92 +
  93 + //preview my space
  94 + if(filters && filters[0] && filters[0].constructor == Array){
  95 + filters = filters[0];
  96 + aggregators = aggregators[0];
  97 + orders = orders[0];
  98 + }
  99 +
  100 + var fields = [];
  101 + for (var i=0; i < this._component.fields.length; i++)
  102 + fields.push(this._fieldName(this._component.fields[i], provider));
  103 +
  104 + //if(aggregators)
  105 + // for (var i=0; i < aggregators.length; i++)
  106 + // aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);
  107 +
  108 + //var jsonData = [this.properties.json_results.value];
  109 +
  110 + //jsdatachecker
  111 + var _converter = new DataTypeConverter();
  112 + var path2 = this._arrayPath(provider);
  113 + var processingResult = _converter.inferJsonDataType(this.properties.json_results.value, path2);
  114 + var processingResults = _converter.convert(processingResult);
  115 + var jsonData = [processingResults.dataset];
  116 +
  117 + //WHERE
  118 + var where = "";
  119 + if(filters && filters.length) {
  120 +
  121 + for (var i=0; i < filters.length; i++)
  122 + filters[i]["field"] = this._fieldName(filters[i]["field"], provider);
  123 +
  124 + where = "WHERE ";
  125 + for (var i=0; i < filters.length; i++) {
  126 + if(filters[i]["operation"] == "contains")
  127 + where += filters[i]["field"] + " like '%" + filters[i]["value"] + "%' AND ";
  128 + else if(filters[i]["operation"] == "start")
  129 + where += filters[i]["field"] + " like '" + filters[i]["value"] + "%' AND ";
  130 + else if(filters[i]["operation"] == "ends")
  131 + where += filters[i]["field"] + " like '%" + filters[i]["value"] + "' AND ";
  132 + else
  133 + where += filters[i]["field"] + " " + filters[i]["operation"] + " " + filters[i]["value"] + " AND ";
  134 + }
  135 + where = where.slice(0, -5);
  136 + }
  137 +
  138 + //ORDER BY
  139 + var orderBy = "";
  140 + if(orders && orders.length) {
  141 +
  142 + for (var i=0; i < orders.length; i++)
  143 + orders[i]["field"] = this._fieldName(orders[i]["field"], "");
  144 +
  145 + orderBy = "ORDER BY ";
  146 + for (var i = 0; i < orders.length; i++)
  147 + orderBy += orders[i]["field"] + " " + orders[i]["operation"] + ", ";
  148 + orderBy = orderBy.slice(0, -2);
  149 + }
  150 +
  151 + //SELECT
  152 + var pureSelect = "SELECT ";
  153 + for (var i = 0; i < fields.length; i++)
  154 + pureSelect += fields[i] + " as " + this._fieldName(this._component.fields[i], "") + ", ";
  155 + pureSelect = pureSelect.slice(0, -2);
  156 +
  157 + //GROUP BY
  158 + //var groupBy = "";
  159 + //if(aggregators && aggregators.length) {
  160 + //
  161 + // for (var i=0; i < aggregators.length; i++)
  162 + // aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);
  163 + //
  164 + // groupBy = "GROUP BY " + aggregators[0]["field"];
  165 + // select = "SELECT " + aggregators[0]["field"];
  166 + // for (var i = 1; i < aggregators.length; i++)
  167 + // select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
  168 + //}
  169 +
  170 + //var groupBy = "";
  171 + //if(aggregators && aggregators.length) {
  172 + //
  173 + // groupBy = "GROUP BY " + this._fieldName(aggregators[0]["field"], "");
  174 + // select = "SELECT " + this._fieldName(aggregators[0]["field"], provider) + " as " + this._fieldName(aggregators[0]["field"], "");
  175 + // for (var i = 1; i < aggregators.length; i++)
  176 + // select += ", " + aggregators[i]["operation"] + "(" + this._fieldName(aggregators[i]["field"], provider) + ") as " + this._fieldName(aggregators[i]["field"], "");
  177 + //}
  178 +
  179 + //GROUP BY
  180 + var groupBy = "";
  181 + if(aggregators && aggregators.length) {
  182 +
  183 + for (var i=0; i < aggregators.length; i++)
  184 + aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], "");
  185 +
  186 + groupBy = "GROUP BY " + aggregators[0]["field"];
  187 + var select = "SELECT " + aggregators[0]["field"];
  188 + for (var i = 1; i < aggregators.length; i++)
  189 + select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
  190 + }
  191 +
  192 + //QUERY
  193 + var path = this._path(this._component.fields[0], provider);
  194 +
  195 + console.log('SELECT '+ path +' FROM ?');
  196 + var res = alasql("SELECT "+ path +" FROM ?", [jsonData]);
  197 +
  198 + var records = res[0][path];
  199 +
  200 + //console.log(select + ' FROM ? ' + where + ' ' + groupBy + ' ' + orderBy + '');
  201 + //var obj = alasql(select + " FROM ? " + where + " " + groupBy + " " + orderBy + "", [records]);
  202 +
  203 + console.log(pureSelect + ' FROM ? ' + where);
  204 + var obj = alasql(pureSelect + " FROM ? " + where, [records]);
  205 +
  206 + if (groupBy != "") {
  207 + console.log(select + ' FROM ? ' + groupBy + ' ' + orderBy + '');
  208 + obj = alasql(select + " FROM ? " + groupBy + " " + orderBy + "", [obj]);
  209 + }
  210 +
  211 + //TEST
  212 + //var query = "SELECT [preteur], [annee] as [annee], SUM([capital_restant_du]) as [capital_restant_du] FROM ? GROUP BY [preteur], [annee]"
  213 + //var obj = alasql(query, [obj]);
  214 + //console.log(obj);
  215 + //this.data = obj;
  216 +
  217 + //PUSH DATA
  218 + if(!obj || obj.length == 0)
  219 + this.data = []
  220 + else
  221 + this._pushData(obj, fields);
  222 +
  223 + this._deleteWaitImage();
  224 + },
  225 +
  226 + _pushData : function(obj, keys) {
  227 + this.data = [];
  228 +
  229 + if (typeof keys == 'undefined')
  230 + keys = Object.keys(obj[0]);
  231 +
  232 + for (var key in keys){
  233 +
  234 + var name = keys[key].replace(/(\[|\]|fields->)/g, "");
  235 + var data = [];
  236 +
  237 + for (var i in obj) {
  238 + data.push(obj[i][name]);
  239 + }
  240 +
  241 + this.data.push({
  242 + name: name,
  243 + data: data
  244 + });
  245 + }
  246 + },
  247 +
  248 + _getProvider : function(field) {
  249 + if(field.indexOf("result,records") > -1)
  250 + return "ckan";
  251 + else if(field.indexOf("records,fields") > -1)
  252 + return "openDataSoft";
  253 + else
  254 + return "provider";
  255 + },
  256 +
  257 + _fieldName : function(field, provider) {
  258 + if(provider.indexOf("ckan") > -1) {
  259 + return "[" + field.substring(field.lastIndexOf(",") + 1, field.length) + "]";
  260 + }
  261 + else if(provider.indexOf("openDataSoft") > -1) {
  262 + return "fields->[" + field.substring(field.lastIndexOf(",") + 1, field.length)+ "]";
  263 + }
  264 + else {
  265 + return "[" + field.substring(field.lastIndexOf(",") + 1, field.length) + "]";
  266 + }
  267 + },
  268 +
  269 + _path : function(field, provider) {
  270 + if(provider.indexOf("ckan") > -1) {
  271 + return "result->records"
  272 + }
  273 + else if(provider.indexOf("openDataSoft") > -1) {
  274 + return "records";
  275 + }
  276 + else {
  277 + return field.substring(0, field.lastIndexOf(",")).replace(",", "->");
  278 + }
  279 + },
  280 +
  281 + _arrayPath : function(provider) {
  282 + if(provider.indexOf("ckan") > -1) {
  283 + return ["result", "records", "*"];
  284 + }
  285 + else if(provider.indexOf("openDataSoft") > -1) {
  286 + return ["records", "fields", "*"];
  287 + }
  288 + else {
  289 + return ["*"];
  290 + }
  291 + },
  292 +
  293 + /**
  294 + * Delete a image after loading a datalet
  295 + */
  296 + _deleteWaitImage : function() {
  297 + $("img[src$='spin.svg']").remove();
  298 + }
  299 +
  300 +};
0 \ No newline at end of file 301 \ No newline at end of file
datalets/base-datalet/base-datalet.html
  View file @fb05b40
@@ -182,23 +182,12 @@ Example : @@ -182,23 +182,12 @@ Example :
182 } 182 }
183 }, 183 },
184 184
185 - attached: function(){  
186 -// if(this.title == undefined)  
187 -// this.title = "";  
188 -//  
189 -// if(this.description == undefined)  
190 -// this.description = "";  
191 -//  
192 -// if(this.title != "" && this.description != "")  
193 -// this.description = "- " + this.description;  
194 - },  
195 -  
196 /** 185 /**
197 * Set the domain url to show in the footer 186 * Set the domain url to show in the footer
198 */ 187 */
199 - setDomain: function(url){  
200 - this.$.domain.textContent = url;  
201 - }, 188 +// setDomain: function(url){
  189 +// this.$.domain.textContent = url;
  190 +// },
202 191
203 hideFooter: function() { 192 hideFooter: function() {
204 this.$.base_datalet_container.innerHTML = ""; 193 this.$.base_datalet_container.innerHTML = "";
datalets/base-datalet/static/js/BaseDataletBehavior.js
  View file @fb05b40
@@ -67,19 +67,27 @@ var BaseDataletBehavior ={ @@ -67,19 +67,27 @@ var BaseDataletBehavior ={
67 data: { 67 data: {
68 type: Array, 68 type: Array,
69 value: [] 69 value: []
  70 + },
  71 + title: {
  72 + type: String,
  73 + value: ""
  74 + },
  75 + description: {
  76 + type: String,
  77 + value: ""
70 } 78 }
71 79
72 }, 80 },
73 81
74 - factoryImpl: function(data_url, fields) {  
75 - this.data_url = data_url;  
76 - this.fields = fields;  
77 - }, 82 + //factoryImpl: function(data_url, fields) {
  83 + // this.dataUrl = data_url;
  84 + // this.fields = fields;
  85 + //},
78 86
79 - setParameters: function(params)  
80 - {  
81 - this.title = params['title'];  
82 - this.description = params['description'];  
83 - } 87 + //setParameters: function(params)
  88 + //{
  89 + // this.title = params['title'];
  90 + // this.description = params['description'];
  91 + //}
84 92
85 }; 93 };
86 \ No newline at end of file 94 \ No newline at end of file
datalets/columnchart-datalet/columnchart-datalet.html
  View file @fb05b40
@@ -63,7 +63,7 @@ Example: @@ -63,7 +63,7 @@ Example:
63 * @method transformData 63 * @method transformData
64 */ 64 */
65 presentData: function(){ 65 presentData: function(){
66 - $(this._component.$.charts.$.container).highcharts({ 66 + options = {
67 chart: { 67 chart: {
68 type: 'column', 68 type: 'column',
69 zoomType: 'xy', 69 zoomType: 'xy',
@@ -75,7 +75,8 @@ Example: @@ -75,7 +75,8 @@ Example:
75 categories: this.properties.categories.value, 75 categories: this.properties.categories.value,
76 title: { 76 title: {
77 text: this._component.xAxisLabel 77 text: this._component.xAxisLabel
78 - } 78 + },
  79 +// crosshair: true
79 }, 80 },
80 yAxis: { 81 yAxis: {
81 min: 0, 82 min: 0,
@@ -87,11 +88,25 @@ Example: @@ -87,11 +88,25 @@ Example:
87 overflow: 'justify' 88 overflow: 'justify'
88 } 89 }
89 }, 90 },
  91 +// tooltip: {
  92 +// headerFormat: '<span style="font-size:16px; font-weight: bold">{point.key}</span><table style="font-size:16px; white-space: nowrap ">',
  93 +// pointFormat: '<tr style="color:{series.color}"><td>{series.name}: </td>' +
  94 +// '<td>{point.y} ' + this._component.suffix + '</span></td></tr>',
  95 +// footerFormat: '</table>',
  96 +// shared: true,
  97 +// useHTML: true
  98 +// },
  99 +// plotOptions: {
  100 +// column: {
  101 +// pointPadding: 0.2,
  102 +// borderWidth: 0
  103 +// }
  104 +// },
90 tooltip: { 105 tooltip: {
91 valueSuffix: ' ' + this._component.suffix 106 valueSuffix: ' ' + this._component.suffix
92 }, 107 },
93 plotOptions: { 108 plotOptions: {
94 - bar: { 109 + column: {
95 dataLabels: { 110 dataLabels: {
96 enabled: true 111 enabled: true
97 } 112 }
@@ -102,21 +117,25 @@ Example: @@ -102,21 +117,25 @@ Example:
102 align: 'right', 117 align: 'right',
103 verticalAlign: 'top', 118 verticalAlign: 'top',
104 x: -40, 119 x: -40,
105 - y: 100, 120 + y: 80,
106 floating: true, 121 floating: true,
107 borderWidth: 1, 122 borderWidth: 1,
108 - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 123 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
109 shadow: true 124 shadow: true
110 }, 125 },
111 credits: { 126 credits: {
112 enabled: false 127 enabled: false
113 }, 128 },
114 - series: this.properties.series.value//this._component.series  
115 - }); 129 + series: this.properties.series.value
  130 + };
  131 +
  132 + if(this._component.theme != "themeBase" && this._component.theme != "")
  133 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  134 +
  135 + $(this._component.$.charts.$.container).highcharts(options);
116 } 136 }
117 }; 137 };
118 138
119 -  
120 LinechartDatalet = Polymer({ 139 LinechartDatalet = Polymer({
121 is: 'columnchart-datalet', 140 is: 'columnchart-datalet',
122 141
@@ -152,7 +171,12 @@ Example: @@ -152,7 +171,12 @@ Example:
152 */ 171 */
153 suffix : { 172 suffix : {
154 type : String, 173 type : String,
155 - value : "units" 174 + value : ""
  175 + },
  176 +
  177 + theme : {
  178 + type : String,
  179 + value : ""
156 }, 180 },
157 /** 181 /**
158 * It's the component behavior 182 * It's the component behavior
datalets/columnchart-datalet/columnchart-datalet.png 100755 → 100644
View file @fb05b40

506 Bytes | W: | H:

427 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.html 0 → 100755
  View file @fb05b40
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  33 +
  34 +<!--
  35 +
  36 +`columnchart-datalet` is a columnchart datalet based on highcharts project http://www.highcharts.com/
  37 +
  38 +Example:
  39 +
  40 + <columnchart-datalet
  41 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  42 + fields='["field1","field2"]'>
  43 + </columnchart-datalet>
  44 +
  45 +@element columnchart-datalet
  46 +@status v0.1
  47 +@demo demo/index.html
  48 +@group datalets
  49 +-->
  50 +
  51 +<dom-module name="columnchart_stacked-datalet">
  52 + <template>
  53 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
  54 + </template>
  55 + <script>
  56 +
  57 + var ColumnchartStackedBehavior = {
  58 +
  59 + /**
  60 + * Bluid Highchart object
  61 + *
  62 + * @method transformData
  63 + */
  64 + presentData: function(){
  65 + options = {
  66 + chart: {
  67 + type: 'column',
  68 + zoomType: 'xy',
  69 + },
  70 + title: {
  71 + text: this._component.title
  72 + },
  73 + xAxis: {
  74 + categories: this.properties.categories.value,
  75 + title: {
  76 + text: this._component.yAxisLabel
  77 + }
  78 + },
  79 + yAxis: {
  80 + min: 0,
  81 + title: {
  82 + text: this._component.xAxisLabel,
  83 + },
  84 + },
  85 + tooltip: {
  86 + valueSuffix: ' ' + this._component.suffix
  87 + },
  88 + plotOptions: {
  89 + series: {
  90 + stacking: this._component.stack
  91 + },
  92 +// column: {
  93 +// dataLabels: {
  94 +// enabled: true
  95 +// }
  96 +// }
  97 + },
  98 + series: this.properties.series.value
  99 + };
  100 +
  101 + if(this._component.theme != "themeBase" && this._component.theme != "")
  102 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  103 +
  104 + $(this._component.$.charts.$.container).highcharts(options);
  105 + }
  106 + };
  107 +
  108 + ColumnchartStackedDatalet = Polymer({
  109 + is: 'columnchart_stacked-datalet',
  110 +
  111 + properties: {
  112 + /**
  113 + * It's the label for X axis
  114 + *
  115 + * @attribute xAxisLabel
  116 + * @type String
  117 + * @default ''
  118 + */
  119 + xAxisLabel: {
  120 + type: String,
  121 + value: ""
  122 + },
  123 + /**
  124 + * It's the label for Y axis
  125 + *
  126 + * @attribute yAxisLabel
  127 + * @type String
  128 + * @default ''
  129 + */
  130 + yAxisLabel: {
  131 + type: String,
  132 + value: ""
  133 + },
  134 + /**
  135 + * It's the values suffix
  136 + *
  137 + * @attribute suffix
  138 + * @type Strig
  139 + * @default 'units'
  140 + */
  141 + suffix : {
  142 + type : String,
  143 + value : ""
  144 + },
  145 +
  146 + stack : {
  147 + type : String,
  148 + value : "normal"
  149 + },
  150 +
  151 + theme : {
  152 + type : String,
  153 + value : ""
  154 + },
  155 + /**
  156 + * It's the component behavior
  157 + *
  158 + * @attribute behavior
  159 + * @type Object
  160 + * @default {}
  161 + */
  162 + behavior : {
  163 + type : Object,
  164 + value : {}
  165 + }
  166 +
  167 + },
  168 +
  169 + /**
  170 + * 'ready' callback extend the VolumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
  171 + * and run the Datalet workcycle.
  172 + *
  173 + * @method ready
  174 + */
  175 + ready: function(){
  176 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, ColumnchartStackedBehavior);
  177 + this.async(function(){this.behavior.init(this)},0);
  178 + }
  179 + });
  180 + </script>
  181 +</dom-module>
0 \ No newline at end of file 182 \ No newline at end of file
datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.png 0 → 100644
View file @fb05b40

60.4 KB
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
  View file @fb05b40
@@ -114,6 +114,14 @@ Example: @@ -114,6 +114,14 @@ Example:
114 :host ::content .children:hover rect.child { 114 :host ::content .children:hover rect.child {
115 fill: #bbb; 115 fill: #bbb;
116 } 116 }
  117 +
  118 + /*:host ::content .children svg.foreignObject {*/
  119 + /*font: 9px sans-serif;*/
  120 + /*text-overflow: ellipsis;*/
  121 + /*text-align: left;*/
  122 + /*word-wrap: break-word;*/
  123 + /*overflow: hidden;*/
  124 + /*}*/
117 </style> 125 </style>
118 <div id="treemap_placeholder"> 126 <div id="treemap_placeholder">
119 <treemap-tooltip id="treemap_tooltip"></treemap-tooltip> 127 <treemap-tooltip id="treemap_tooltip"></treemap-tooltip>
datalets/datasetexplorer-datalet/js/buildtreemap2.js
  View file @fb05b40
@@ -140,7 +140,7 @@ function build2(root, meta, place_holder, select_listener, width, height) { @@ -140,7 +140,7 @@ function build2(root, meta, place_holder, select_listener, width, height) {
140 .attr("onmousemove", function(d) { 140 .attr("onmousemove", function(d) {
141 //var data = ["lvl", "name", "color", "description", "logoUrl", "datasets", "datasetUrl"]; 141 //var data = ["lvl", "name", "color", "description", "logoUrl", "datasets", "datasetUrl"];
142 var data = ["", d.name, d.color, "", "", d.value, ""]; 142 var data = ["", d.name, d.color, "", "", d.value, ""];
143 - console.log(d); 143 + //console.log(d);
144 data[2] = ["#000000"]; 144 data[2] = ["#000000"];
145 var id = (d.name) ? d.name.split(':')[1] : undefined; 145 var id = (d.name) ? d.name.split(':')[1] : undefined;
146 if (d.depth == 1) { 146 if (d.depth == 1) {
@@ -170,6 +170,14 @@ function build2(root, meta, place_holder, select_listener, width, height) { @@ -170,6 +170,14 @@ function build2(root, meta, place_holder, select_listener, width, height) {
170 .attr("dy", ".75em") 170 .attr("dy", ".75em")
171 .call(text); 171 .call(text);
172 172
  173 + //g.append("svg")
  174 + // .attr("class", "foreignObject")
  175 + // .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
  176 + // .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
  177 + // .append("text")
  178 + // .attr("dy", ".75em")
  179 + // .call(text);
  180 +
173 function transition(d) { 181 function transition(d) {
174 if (transitioning || !d) return; 182 if (transitioning || !d) return;
175 transitioning = true; 183 transitioning = true;
datalets/datatable-datalet/datatable-datalet.png 100755 → 100644
View file @fb05b40

5.56 KB | W: | H:

380 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/heatmap-datalet/heatmap-datalet.html
  View file @fb05b40
@@ -30,10 +30,7 @@ @@ -30,10 +30,7 @@
30 --> 30 -->
31 31
32 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> 32 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
33 -<script src="https://code.highcharts.com/highcharts-more.js"></script>  
34 -<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>  
35 -  
36 -<!--script src="https://code.highcharts.com/modules/heatmap.js"></script> 33 +<script src="js/heatmap.js"></script>
37 34
38 <!-- 35 <!--
39 36
@@ -66,38 +63,37 @@ Example: @@ -66,38 +63,37 @@ Example:
66 * @method presentData 63 * @method presentData
67 */ 64 */
68 presentData: function(){ 65 presentData: function(){
69 - campi = [];  
70 - serie = [];  
71 -  
72 - for (i = 0; i < this.properties.series.value.length; i++) {  
73 - campi.push(this.properties.series.value[i].name);  
74 - for (j = 0; j < this.properties.series.value[i].data.length; j++) {  
75 - serie.push([j,i,this.properties.series.value[i].data[j]]) 66 + var Xcategories = this.properties.categories.value
  67 + var Ycategories = [];
  68 + var series = [];
  69 + for (var i = 0; i < this.properties.series.value.length; i++) {
  70 + Ycategories.push(this.properties.series.value[i].name);
  71 + for (var j = 0; j < this.properties.series.value[i].data.length; j++) {
  72 + series.push([j, i,this.properties.series.value[i].data[j]]);
  73 + }
76 } 74 }
77 - }  
78 75
79 - $(this._component.$.charts.$.container).highcharts({ 76 + options = {
80 chart: { 77 chart: {
81 type: 'heatmap', 78 type: 'heatmap',
82 marginTop: 40, 79 marginTop: 40,
83 - marginBottom: 80, 80 +// marginBottom: 80,
84 plotBorderWidth: 1 81 plotBorderWidth: 1
85 }, 82 },
86 83
87 title: { 84 title: {
88 - text: this._component.Title 85 + text: this._component.title
89 }, 86 },
90 87
91 xAxis: { 88 xAxis: {
92 - categories: this.properties.categories.value, 89 + categories: Xcategories,
93 title: { 90 title: {
94 text: this._component.xAxisLabel 91 text: this._component.xAxisLabel
95 } 92 }
96 }, 93 },
97 94
98 yAxis: { 95 yAxis: {
99 - categories: campi,  
100 - //categories: this.properties.categories.value, 96 + categories: Ycategories,
101 title: { 97 title: {
102 text: this._component.yAxisLabel 98 text: this._component.yAxisLabel
103 } 99 }
@@ -117,33 +113,27 @@ Example: @@ -117,33 +113,27 @@ Example:
117 y: 25, 113 y: 25,
118 symbolHeight: 280 114 symbolHeight: 280
119 }, 115 },
120 - /*tooltip: {  
121 - formatter: function () {  
122 - return '<b>' + this.series.xAxis.categories[this.point.x] + '</b><br>Abitanti: <b>' + this._component.prototype.xAxis  
123 - this.point.value + '</b><br>Anno <b>' + this.series.yAxis.categories[this.point.y] + '</b>';  
124 - }*/  
125 -  
126 - //},  
127 - /* tooltip: {  
128 - formatter: function () {  
129 - return '<b>' + this.series.xAxis.categories[this.point.x] + this._component.prototype.xAxis  
130 - this.point.value + this.series.yAxis.categories[this.point.y];  
131 - }  
132 -*/  
133 - //}, 116 + tooltip: {
  117 + valueSuffix: ' ' + this._component.suffix
  118 + },
  119 +
134 credits: { 120 credits: {
135 enabled: false 121 enabled: false
136 }, 122 },
137 series: [{ 123 series: [{
138 - //name: 'Popolazione',  
139 borderWidth: 1, 124 borderWidth: 1,
140 - data: serie, 125 + data: series,
141 dataLabels: { 126 dataLabels: {
142 enabled: true, 127 enabled: true,
143 color: '#000000' 128 color: '#000000'
144 } 129 }
145 }] 130 }]
146 - }); 131 + };
  132 +
  133 + if(this._component.theme != "themeBase" && this._component.theme != "")
  134 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  135 +
  136 + $(this._component.$.charts.$.container).highcharts(options);
147 } 137 }
148 }; 138 };
149 139
@@ -175,17 +165,6 @@ Example: @@ -175,17 +165,6 @@ Example:
175 value: "" 165 value: ""
176 }, 166 },
177 /** 167 /**
178 - * It's the title of the chart  
179 - *  
180 - * @attribute title  
181 - * @type String  
182 - * @default ''  
183 - */  
184 - Title: {  
185 - type: String,  
186 - value: ""  
187 - },  
188 - /**  
189 * It's the values suffix 168 * It's the values suffix
190 * 169 *
191 * @attribute suffix 170 * @attribute suffix
@@ -196,6 +175,10 @@ Example: @@ -196,6 +175,10 @@ Example:
196 type : String, 175 type : String,
197 value : "" 176 value : ""
198 }, 177 },
  178 + theme : {
  179 + type : String,
  180 + value : ""
  181 + },
199 /** 182 /**
200 * It's the component behavior 183 * It's the component behavior
201 * 184 *
datalets/heatmap-datalet/heatmap-datalet.png 100755 → 100644
View file @fb05b40

5.51 KB | W: | H:

479 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/heatmap-datalet/js/heatmap.js 0 → 100644
  View file @fb05b40
  1 +/*
  2 + Highmaps JS v1.1.6 (2015-06-12)
  3 + Highmaps as a plugin for Highcharts 4.0.x or Highstock 2.0.x (x being the patch version of this file)
  4 +
  5 + (c) 2011-2014 Torstein Honsi
  6 +
  7 + License: www.highcharts.com/license
  8 + */
  9 +(function(l){function I(a,b){var c,d,e,f,g=!1,h=a.x,j=a.y;for(c=0,d=b.length-1;c<b.length;d=c++)e=b[c][1]>j,f=b[d][1]>j,e!==f&&h<(b[d][0]-b[c][0])*(j-b[c][1])/(b[d][1]-b[c][1])+b[c][0]&&(g=!g);return g}function J(a,b,c,d,e,f,g,h){return["M",a+e,b,"L",a+c-f,b,"C",a+c-f/2,b,a+c,b+f/2,a+c,b+f,"L",a+c,b+d-g,"C",a+c,b+d-g/2,a+c-g/2,b+d,a+c-g,b+d,"L",a+h,b+d,"C",a+h/2,b+d,a,b+d-h/2,a,b+d-h,"L",a,b+e,"C",a,b+e/2,a+e/2,b,a+e,b,"Z"]}var o=l.Axis,r=l.Chart,w=l.Color,t=l.Point,F=l.Pointer,C=l.Legend,G=l.LegendSymbolMixin,
  10 + N=l.Renderer,y=l.Series,H=l.SVGRenderer,K=l.VMLRenderer,L=l.addEvent,i=l.each,D=l.error,p=l.extend,u=l.extendClass,n=l.merge,m=l.pick,z=l.getOptions(),k=l.seriesTypes,v=z.plotOptions,s=l.wrap,q=function(){};s(o.prototype,"getSeriesExtremes",function(a){var b=this.isXAxis,c,d,e=[],f;b&&i(this.series,function(a,b){if(a.useMapGeometry)e[b]=a.xData,a.xData=[]});a.call(this);if(b&&(c=m(this.dataMin,Number.MAX_VALUE),d=m(this.dataMax,-Number.MAX_VALUE),i(this.series,function(a,b){if(a.useMapGeometry)c=
  11 + Math.min(c,m(a.minX,c)),d=Math.max(d,m(a.maxX,c)),a.xData=e[b],f=!0}),f))this.dataMin=c,this.dataMax=d});s(o.prototype,"setAxisTranslation",function(a){var b=this.chart,c=b.plotWidth/b.plotHeight,b=b.xAxis[0],d;a.call(this);this.coll==="yAxis"&&b.transA!==void 0&&i(this.series,function(a){a.preserveAspectRatio&&(d=!0)});if(d&&(this.transA=b.transA=Math.min(this.transA,b.transA),a=c/((b.max-b.min)/(this.max-this.min)),a=a<1?this:b,c=(a.max-a.min)*a.transA,a.pixelPadding=a.len-c,a.minPixelPadding=a.pixelPadding/
  12 + 2,c=a.fixTo)){c=c[1]-a.toValue(c[0],!0);c*=a.transA;if(Math.abs(c)>a.minPixelPadding||a.min===a.dataMin&&a.max===a.dataMax)c=0;a.minPixelPadding-=c}});s(o.prototype,"render",function(a){a.call(this);this.fixTo=null});var B=l.ColorAxis=function(){this.isColorAxis=!0;this.init.apply(this,arguments)};p(B.prototype,o.prototype);p(B.prototype,{defaultColorAxisOptions:{lineWidth:0,gridLineWidth:1,tickPixelInterval:72,startOnTick:!0,endOnTick:!0,offset:0,marker:{animation:{duration:50},color:"gray",width:0.01},
  13 + labels:{overflow:"justify"},minColor:"#EFEFFF",maxColor:"#003875",tickLength:5},init:function(a,b){var c=a.options.legend.layout!=="vertical",d;d=n(this.defaultColorAxisOptions,{side:c?2:1,reversed:!c},b,{isX:c,opposite:!c,showEmpty:!1,title:null,isColor:!0});o.prototype.init.call(this,a,d);b.dataClasses&&this.initDataClasses(b);this.initStops(b);this.isXAxis=!0;this.horiz=c;this.zoomEnabled=!1},tweenColors:function(a,b,c){var d;!b.rgba.length||!a.rgba.length?a=b.raw||"none":(a=a.rgba,b=b.rgba,d=
  14 + b[3]!==1||a[3]!==1,a=(d?"rgba(":"rgb(")+Math.round(b[0]+(a[0]-b[0])*(1-c))+","+Math.round(b[1]+(a[1]-b[1])*(1-c))+","+Math.round(b[2]+(a[2]-b[2])*(1-c))+(d?","+(b[3]+(a[3]-b[3])*(1-c)):"")+")");return a},initDataClasses:function(a){var b=this,c=this.chart,d,e=0,f=this.options,g=a.dataClasses.length;this.dataClasses=d=[];this.legendItems=[];i(a.dataClasses,function(a,j){var i,a=n(a);d.push(a);if(!a.color)f.dataClassColor==="category"?(i=c.options.colors,a.color=i[e++],e===i.length&&(e=0)):a.color=
  15 + b.tweenColors(w(f.minColor),w(f.maxColor),g<2?0.5:j/(g-1))})},initStops:function(a){this.stops=a.stops||[[0,this.options.minColor],[1,this.options.maxColor]];i(this.stops,function(a){a.color=w(a[1])})},setOptions:function(a){o.prototype.setOptions.call(this,a);this.options.crosshair=this.options.marker;this.coll="colorAxis"},setAxisSize:function(){var a=this.legendSymbol,b=this.chart,c,d,e;if(a)this.left=c=a.attr("x"),this.top=d=a.attr("y"),this.width=e=a.attr("width"),this.height=a=a.attr("height"),
  16 + this.right=b.chartWidth-c-e,this.bottom=b.chartHeight-d-a,this.len=this.horiz?e:a,this.pos=this.horiz?c:d},toColor:function(a,b){var c,d=this.stops,e,f=this.dataClasses,g,h;if(f)for(h=f.length;h--;){if(g=f[h],e=g.from,d=g.to,(e===void 0||a>=e)&&(d===void 0||a<=d)){c=g.color;if(b)b.dataClass=h;break}}else{this.isLog&&(a=this.val2lin(a));c=1-(this.max-a)/(this.max-this.min||1);for(h=d.length;h--;)if(c>d[h][0])break;e=d[h]||d[h+1];d=d[h+1]||e;c=1-(d[0]-c)/(d[0]-e[0]||1);c=this.tweenColors(e.color,d.color,
  17 + c)}return c},getOffset:function(){var a=this.legendGroup,b=this.chart.axisOffset[this.side];if(a){o.prototype.getOffset.call(this);if(!this.axisGroup.parentGroup)this.axisGroup.add(a),this.gridGroup.add(a),this.labelGroup.add(a),this.added=!0,this.labelLeft=0,this.labelRight=this.width;this.chart.axisOffset[this.side]=b}},setLegendColor:function(){var a,b=this.options;a=this.reversed;a=this.horiz?[+a,0,+!a,0]:[0,+!a,0,+a];this.legendColor={linearGradient:{x1:a[0],y1:a[1],x2:a[2],y2:a[3]},stops:b.stops||
  18 +[[0,b.minColor],[1,b.maxColor]]}},drawLegendSymbol:function(a,b){var c=a.padding,d=a.options,e=this.horiz,f=m(d.symbolWidth,e?200:12),g=m(d.symbolHeight,e?12:200),h=m(d.labelPadding,e?16:30),d=m(d.itemDistance,10);this.setLegendColor();b.legendSymbol=this.chart.renderer.rect(0,a.baseline-11,f,g).attr({zIndex:1}).add(b.legendGroup);b.legendSymbol.getBBox();this.legendItemWidth=f+c+(e?d:h);this.legendItemHeight=g+c+(e?h:0)},setState:q,visible:!0,setVisible:q,getSeriesExtremes:function(){var a;if(this.series.length)a=
  19 + this.series[0],this.dataMin=a.valueMin,this.dataMax=a.valueMax},drawCrosshair:function(a,b){var c=b&&b.plotX,d=b&&b.plotY,e,f=this.pos,g=this.len;if(b)e=this.toPixels(b[b.series.colorKey]),e<f?e=f-2:e>f+g&&(e=f+g+2),b.plotX=e,b.plotY=this.len-e,o.prototype.drawCrosshair.call(this,a,b),b.plotX=c,b.plotY=d,this.cross&&this.cross.attr({fill:this.crosshair.color}).add(this.legendGroup)},getPlotLinePath:function(a,b,c,d,e){return typeof e==="number"?this.horiz?["M",e-4,this.top-6,"L",e+4,this.top-6,e,
  20 + this.top,"Z"]:["M",this.left,e,"L",this.left-6,e+6,this.left-6,e-6,"Z"]:o.prototype.getPlotLinePath.call(this,a,b,c,d)},update:function(a,b){var c=this.chart,d=c.legend;i(this.series,function(a){a.isDirtyData=!0});if(a.dataClasses)i(d.allItems,function(a){a.isDataClass&&a.legendGroup.destroy()}),c.isDirtyLegend=!0;c.options[this.coll]=n(this.userOptions,a);o.prototype.update.call(this,a,b);this.legendItem&&(this.setLegendColor(),d.colorizeItem(this,!0))},getDataClassLegendSymbols:function(){var a=
  21 + this,b=this.chart,c=this.legendItems,d=b.options.legend,e=d.valueDecimals,f=d.valueSuffix||"",g;c.length||i(this.dataClasses,function(d,j){var x=!0,A=d.from,m=d.to;g="";A===void 0?g="< ":m===void 0&&(g="> ");A!==void 0&&(g+=l.numberFormat(A,e)+f);A!==void 0&&m!==void 0&&(g+=" - ");m!==void 0&&(g+=l.numberFormat(m,e)+f);c.push(p({chart:b,name:g,options:{},drawLegendSymbol:G.drawRectangle,visible:!0,setState:q,isDataClass:!0,setVisible:function(){x=this.visible=!x;i(a.series,function(a){i(a.points,
  22 + function(a){a.dataClass===j&&a.setVisible(x)})});b.legend.colorizeItem(this,x)}},d))});return c},name:""});i(["fill","stroke"],function(a){HighchartsAdapter.addAnimSetter(a,function(b){b.elem.attr(a,B.prototype.tweenColors(w(b.start),w(b.end),b.pos))})});s(r.prototype,"getAxes",function(a){var b=this.options.colorAxis;a.call(this);this.colorAxis=[];b&&new B(this,b)});s(C.prototype,"getAllItems",function(a){var b=[],c=this.chart.colorAxis[0];c&&(c.options.dataClasses?b=b.concat(c.getDataClassLegendSymbols()):
  23 + b.push(c),i(c.series,function(a){a.options.showInLegend=!1}));return b.concat(a.call(this))});C={pointAttrToOptions:{stroke:"borderColor","stroke-width":"borderWidth",fill:"color",dashstyle:"dashStyle"},pointArrayMap:["value"],axisTypes:["xAxis","yAxis","colorAxis"],optionalAxis:"colorAxis",trackerGroups:["group","markerGroup","dataLabelsGroup"],getSymbol:q,parallelArrays:["x","y","value"],colorKey:"value",translateColors:function(){var a=this,b=this.options.nullColor,c=this.colorAxis,d=this.colorKey;
  24 + i(this.data,function(e){var f=e[d];if(f=f===null?b:c&&f!==void 0?c.toColor(f,e):e.color||a.color)e.color=f})}};p(r.prototype,{renderMapNavigation:function(){var a=this,b=this.options.mapNavigation,c=b.buttons,d,e,f,g,h=function(){this.handler.call(a)};if(m(b.enableButtons,b.enabled)&&!a.renderer.forExport)for(d in c)if(c.hasOwnProperty(d))f=n(b.buttonOptions,c[d]),e=f.theme,e.style=n(f.theme.style,f.style),g=e.states,e=a.renderer.button(f.text,0,0,h,e,g&&g.hover,g&&g.select,0,d==="zoomIn"?"topbutton":
  25 + "bottombutton").attr({width:f.width,height:f.height,title:a.options.lang[d],zIndex:5}).add(),e.handler=f.onclick,e.align(p(f,{width:e.width,height:2*e.height}),null,f.alignTo)},fitToBox:function(a,b){i([["x","width"],["y","height"]],function(c){var d=c[0],c=c[1];a[d]+a[c]>b[d]+b[c]&&(a[c]>b[c]?(a[c]=b[c],a[d]=b[d]):a[d]=b[d]+b[c]-a[c]);a[c]>b[c]&&(a[c]=b[c]);a[d]<b[d]&&(a[d]=b[d])});return a},mapZoom:function(a,b,c,d,e){var f=this.xAxis[0],g=f.max-f.min,h=m(b,f.min+g/2),j=g*a,g=this.yAxis[0],i=g.max-
  26 + g.min,A=m(c,g.min+i/2);i*=a;h=this.fitToBox({x:h-j*(d?(d-f.pos)/f.len:0.5),y:A-i*(e?(e-g.pos)/g.len:0.5),width:j,height:i},{x:f.dataMin,y:g.dataMin,width:f.dataMax-f.dataMin,height:g.dataMax-g.dataMin});if(d)f.fixTo=[d-f.pos,b];if(e)g.fixTo=[e-g.pos,c];a!==void 0?(f.setExtremes(h.x,h.x+h.width,!1),g.setExtremes(h.y,h.y+h.height,!1)):(f.setExtremes(void 0,void 0,!1),g.setExtremes(void 0,void 0,!1));this.redraw()}});s(r.prototype,"render",function(a){var b=this,c=b.options.mapNavigation;b.renderMapNavigation();
  27 + a.call(b);(m(c.enableDoubleClickZoom,c.enabled)||c.enableDoubleClickZoomTo)&&L(b.container,"dblclick",function(a){b.pointer.onContainerDblClick(a)});m(c.enableMouseWheelZoom,c.enabled)&&L(b.container,document.onmousewheel===void 0?"DOMMouseScroll":"mousewheel",function(a){b.pointer.onContainerMouseWheel(a);return!1})});p(F.prototype,{onContainerDblClick:function(a){var b=this.chart,a=this.normalize(a);b.options.mapNavigation.enableDoubleClickZoomTo?b.pointer.inClass(a.target,"highcharts-tracker")&&
  28 +b.hoverPoint.zoomTo():b.isInsidePlot(a.chartX-b.plotLeft,a.chartY-b.plotTop)&&b.mapZoom(0.5,b.xAxis[0].toValue(a.chartX),b.yAxis[0].toValue(a.chartY),a.chartX,a.chartY)},onContainerMouseWheel:function(a){var b=this.chart,c,a=this.normalize(a);c=a.detail||-(a.wheelDelta/120);b.isInsidePlot(a.chartX-b.plotLeft,a.chartY-b.plotTop)&&b.mapZoom(Math.pow(2,c),b.xAxis[0].toValue(a.chartX),b.yAxis[0].toValue(a.chartY),a.chartX,a.chartY)}});s(F.prototype,"init",function(a,b,c){a.call(this,b,c);if(m(c.mapNavigation.enableTouchZoom,
  29 + c.mapNavigation.enabled))this.pinchX=this.pinchHor=this.pinchY=this.pinchVert=this.hasZoom=!0});s(F.prototype,"pinchTranslate",function(a,b,c,d,e,f,g){a.call(this,b,c,d,e,f,g);this.chart.options.chart.type==="map"&&this.hasZoom&&(a=d.scaleX>d.scaleY,this.pinchTranslateDirection(!a,b,c,d,e,f,g,a?d.scaleX:d.scaleY))});var E=document.documentElement.style.vectorEffect!==void 0;v.map=n(v.scatter,{allAreas:!0,animation:!1,nullColor:"#F8F8F8",borderColor:"silver",borderWidth:1,marker:null,stickyTracking:!1,
  30 + dataLabels:{formatter:function(){return this.point.value},inside:!0,verticalAlign:"middle",crop:!1,overflow:!1,padding:0},turboThreshold:0,tooltip:{followPointer:!0,pointFormat:"{point.name}: {point.value}<br/>"},states:{normal:{animation:!0},hover:{brightness:0.2,halo:null}}});var M=u(t,{applyOptions:function(a,b){var c=t.prototype.applyOptions.call(this,a,b),d=this.series,e=d.joinBy;if(d.mapData)if(e=c[e[1]]!==void 0&&d.mapMap[c[e[1]]]){if(d.xyFromShape)c.x=e._midX,c.y=e._midY;p(c,e)}else c.value=
  31 + c.value||null;return c},setVisible:function(a){var b=this,c=a?"show":"hide";i(["graphic","dataLabel"],function(a){if(b[a])b[a][c]()})},onMouseOver:function(a){clearTimeout(this.colorInterval);if(this.value!==null)t.prototype.onMouseOver.call(this,a);else this.series.onMouseOut(a)},onMouseOut:function(){var a=this,b=+new Date,c=w(a.color),d=w(a.pointAttr.hover.fill),e=a.series.options.states.normal.animation,f=e&&(e.duration||500),g;if(f&&c.rgba.length===4&&d.rgba.length===4&&a.state!=="select")g=
  32 + a.pointAttr[""].fill,delete a.pointAttr[""].fill,clearTimeout(a.colorInterval),a.colorInterval=setInterval(function(){var e=(new Date-b)/f,g=a.graphic;e>1&&(e=1);g&&g.attr("fill",B.prototype.tweenColors.call(0,d,c,e));e>=1&&clearTimeout(a.colorInterval)},13);t.prototype.onMouseOut.call(a);if(g)a.pointAttr[""].fill=g},zoomTo:function(){var a=this.series;a.xAxis.setExtremes(this._minX,this._maxX,!1);a.yAxis.setExtremes(this._minY,this._maxY,!1);a.chart.redraw()}});k.map=u(k.scatter,n(C,{type:"map",
  33 + pointClass:M,supportsDrilldown:!0,getExtremesFromAll:!0,useMapGeometry:!0,forceDL:!0,searchPoint:q,preserveAspectRatio:!0,getBox:function(a){var b=Number.MAX_VALUE,c=-b,d=b,e=-b,f=b,g=b,h=this.xAxis,j=this.yAxis,x;i(a||[],function(a){if(a.path){if(typeof a.path==="string")a.path=l.splitPath(a.path);var h=a.path||[],j=h.length,i=!1,k=-b,n=b,p=-b,o=b,q=a.properties;if(!a._foundBox){for(;j--;)typeof h[j]==="number"&&!isNaN(h[j])&&(i?(k=Math.max(k,h[j]),n=Math.min(n,h[j])):(p=Math.max(p,h[j]),o=Math.min(o,
  34 + h[j])),i=!i);a._midX=n+(k-n)*(a.middleX||q&&q["hc-middle-x"]||0.5);a._midY=o+(p-o)*(a.middleY||q&&q["hc-middle-y"]||0.5);a._maxX=k;a._minX=n;a._maxY=p;a._minY=o;a.labelrank=m(a.labelrank,(k-n)*(p-o));a._foundBox=!0}c=Math.max(c,a._maxX);d=Math.min(d,a._minX);e=Math.max(e,a._maxY);f=Math.min(f,a._minY);g=Math.min(a._maxX-a._minX,a._maxY-a._minY,g);x=!0}});if(x){this.minY=Math.min(f,m(this.minY,b));this.maxY=Math.max(e,m(this.maxY,-b));this.minX=Math.min(d,m(this.minX,b));this.maxX=Math.max(c,m(this.maxX,
  35 + -b));if(h&&h.options.minRange===void 0)h.minRange=Math.min(5*g,(this.maxX-this.minX)/5,h.minRange||b);if(j&&j.options.minRange===void 0)j.minRange=Math.min(5*g,(this.maxY-this.minY)/5,j.minRange||b)}},getExtremes:function(){y.prototype.getExtremes.call(this,this.valueData);this.chart.hasRendered&&this.isDirtyData&&this.getBox(this.options.data);this.valueMin=this.dataMin;this.valueMax=this.dataMax;this.dataMin=this.minY;this.dataMax=this.maxY},translatePath:function(a){var b=!1,c=this.xAxis,d=this.yAxis,
  36 + e=c.min,f=c.transA,c=c.minPixelPadding,g=d.min,h=d.transA,d=d.minPixelPadding,j,i=[];if(a)for(j=a.length;j--;)typeof a[j]==="number"?(i[j]=b?(a[j]-e)*f+c:(a[j]-g)*h+d,b=!b):i[j]=a[j];return i},setData:function(a,b){var c=this.options,d=c.mapData,e=c.joinBy,f=e===null,g=[],h,j,k;f&&(e="_i");e=this.joinBy=l.splat(e);e[1]||(e[1]=e[0]);a&&i(a,function(b,c){typeof b==="number"&&(a[c]={value:b});if(f)a[c]._i=c});this.getBox(a);if(d){if(d.type==="FeatureCollection"){if(d["hc-transform"])for(h in this.chart.mapTransforms=
  37 + j=d["hc-transform"],j)if(j.hasOwnProperty(h)&&h.rotation)h.cosAngle=Math.cos(h.rotation),h.sinAngle=Math.sin(h.rotation);d=l.geojson(d,this.type,this)}this.getBox(d);this.mapData=d;this.mapMap={};for(k=0;k<d.length;k++)h=d[k],j=h.properties,h._i=k,e[0]&&j&&j[e[0]]&&(h[e[0]]=j[e[0]]),this.mapMap[h[e[0]]]=h;c.allAreas&&(a=a||[],e[1]&&i(a,function(a){g.push(a[e[1]])}),g="|"+g.join("|")+"|",i(d,function(b){(!e[0]||g.indexOf("|"+b[e[0]]+"|")===-1)&&a.push(n(b,{value:null}))}))}y.prototype.setData.call(this,
  38 + a,b)},drawGraph:q,drawDataLabels:q,doFullTranslate:function(){return this.isDirtyData||this.chart.isResizing||this.chart.renderer.isVML||!this.baseTrans},translate:function(){var a=this,b=a.xAxis,c=a.yAxis,d=a.doFullTranslate();a.generatePoints();i(a.data,function(e){e.plotX=b.toPixels(e._midX,!0);e.plotY=c.toPixels(e._midY,!0);if(d)e.shapeType="path",e.shapeArgs={d:a.translatePath(e.path)},E&&(e.shapeArgs["vector-effect"]="non-scaling-stroke")});a.translateColors()},drawPoints:function(){var a=this,
  39 + b=a.xAxis,c=a.yAxis,d=a.group,e=a.chart,f=e.renderer,g,h=this.baseTrans;if(!a.transformGroup)a.transformGroup=f.g().attr({scaleX:1,scaleY:1}).add(d),a.transformGroup.survive=!0;a.doFullTranslate()?(e.hasRendered&&a.pointAttrToOptions.fill==="color"&&i(a.points,function(a){a.graphic&&a.graphic.attr("fill",a.color)}),E||i(a.points,function(b){b=b.pointAttr[""];b["stroke-width"]===a.pointAttr[""]["stroke-width"]&&(b["stroke-width"]="inherit")}),a.group=a.transformGroup,k.column.prototype.drawPoints.apply(a),
  40 + a.group=d,i(a.points,function(a){a.graphic&&(a.name&&a.graphic.addClass("highcharts-name-"+a.name.replace(" ","-").toLowerCase()),a.properties&&a.properties["hc-key"]&&a.graphic.addClass("highcharts-key-"+a.properties["hc-key"].toLowerCase()),E||(a.graphic["stroke-widthSetter"]=q))}),this.baseTrans={originX:b.min-b.minPixelPadding/b.transA,originY:c.min-c.minPixelPadding/c.transA+(c.reversed?0:c.len/c.transA),transAX:b.transA,transAY:c.transA},this.transformGroup.animate({translateX:0,translateY:0,
  41 + scaleX:1,scaleY:1})):(g=b.transA/h.transAX,d=c.transA/h.transAY,b=b.toPixels(h.originX,!0),c=c.toPixels(h.originY,!0),g>0.99&&g<1.01&&d>0.99&&d<1.01&&(d=g=1,b=Math.round(b),c=Math.round(c)),this.transformGroup.animate({translateX:b,translateY:c,scaleX:g,scaleY:d}));E||a.group.element.setAttribute("stroke-width",a.options.borderWidth/(g||1));this.drawMapDataLabels()},drawMapDataLabels:function(){y.prototype.drawDataLabels.call(this);this.dataLabelsGroup&&this.dataLabelsGroup.clip(this.chart.clipRect)},
  42 + render:function(){var a=this,b=y.prototype.render;a.chart.renderer.isVML&&a.data.length>3E3?setTimeout(function(){b.call(a)}):b.call(a)},animate:function(a){var b=this.options.animation,c=this.group,d=this.xAxis,e=this.yAxis,f=d.pos,g=e.pos;if(this.chart.renderer.isSVG)b===!0&&(b={duration:1E3}),a?c.attr({translateX:f+d.len/2,translateY:g+e.len/2,scaleX:0.001,scaleY:0.001}):(c.animate({translateX:f,translateY:g,scaleX:1,scaleY:1},b),this.animate=null)},animateDrilldown:function(a){var b=this.chart.plotBox,
  43 + c=this.chart.drilldownLevels[this.chart.drilldownLevels.length-1],d=c.bBox,e=this.chart.options.drilldown.animation;if(!a)a=Math.min(d.width/b.width,d.height/b.height),c.shapeArgs={scaleX:a,scaleY:a,translateX:d.x,translateY:d.y},i(this.points,function(a){a.graphic&&a.graphic.attr(c.shapeArgs).animate({scaleX:1,scaleY:1,translateX:0,translateY:0},e)}),this.animate=null},drawLegendSymbol:G.drawRectangle,animateDrillupFrom:function(a){k.column.prototype.animateDrillupFrom.call(this,a)},animateDrillupTo:function(a){k.column.prototype.animateDrillupTo.call(this,
  44 + a)}}));v.mapline=n(v.map,{lineWidth:1,fillColor:"none"});k.mapline=u(k.map,{type:"mapline",pointAttrToOptions:{stroke:"color","stroke-width":"lineWidth",fill:"fillColor",dashstyle:"dashStyle"},drawLegendSymbol:k.line.prototype.drawLegendSymbol});v.mappoint=n(v.scatter,{dataLabels:{enabled:!0,formatter:function(){return this.point.name},crop:!1,defer:!1,overflow:!1,style:{color:"#000000"}}});k.mappoint=u(k.scatter,{type:"mappoint",forceDL:!0,pointClass:u(t,{applyOptions:function(a,b){var c=t.prototype.applyOptions.call(this,
  45 + a,b);a.lat!==void 0&&a.lon!==void 0&&(c=p(c,this.series.chart.fromLatLonToPoint(c)));return c}})});if(k.bubble)v.mapbubble=n(v.bubble,{animationLimit:500,tooltip:{pointFormat:"{point.name}: {point.z}"}}),k.mapbubble=u(k.bubble,{pointClass:u(t,{applyOptions:function(a,b){var c;a.lat!==void 0&&a.lon!==void 0?(c=t.prototype.applyOptions.call(this,a,b),c=p(c,this.series.chart.fromLatLonToPoint(c))):c=M.prototype.applyOptions.call(this,a,b);return c},ttBelow:!1}),xyFromShape:!0,type:"mapbubble",pointArrayMap:["z"],
  46 + getMapData:k.map.prototype.getMapData,getBox:k.map.prototype.getBox,setData:k.map.prototype.setData});z.plotOptions.heatmap=n(z.plotOptions.scatter,{animation:!1,borderWidth:0,nullColor:"#F8F8F8",dataLabels:{formatter:function(){return this.point.value},inside:!0,verticalAlign:"middle",crop:!1,overflow:!1,padding:0},marker:null,pointRange:null,tooltip:{pointFormat:"{point.x}, {point.y}: {point.value}<br/>"},states:{normal:{animation:!0},hover:{halo:!1,brightness:0.2}}});k.heatmap=u(k.scatter,n(C,
  47 + {type:"heatmap",pointArrayMap:["y","value"],hasPointSpecificOptions:!0,supportsDrilldown:!0,getExtremesFromAll:!0,directTouch:!0,init:function(){var a;k.scatter.prototype.init.apply(this,arguments);a=this.options;this.pointRange=a.pointRange=m(a.pointRange,a.colsize||1);this.yAxis.axisPointRange=a.rowsize||1},translate:function(){var a=this.options,b=this.xAxis,c=this.yAxis;this.generatePoints();i(this.points,function(d){var e=(a.colsize||1)/2,f=(a.rowsize||1)/2,g=Math.round(b.len-b.translate(d.x-
  48 + e,0,1,0,1)),e=Math.round(b.len-b.translate(d.x+e,0,1,0,1)),h=Math.round(c.translate(d.y-f,0,1,0,1)),f=Math.round(c.translate(d.y+f,0,1,0,1));d.plotX=d.clientX=(g+e)/2;d.plotY=(h+f)/2;d.shapeType="rect";d.shapeArgs={x:Math.min(g,e),y:Math.min(h,f),width:Math.abs(e-g),height:Math.abs(f-h)}});this.translateColors();this.chart.hasRendered&&i(this.points,function(a){a.shapeArgs.fill=a.options.color||a.color})},drawPoints:k.column.prototype.drawPoints,animate:q,getBox:q,drawLegendSymbol:G.drawRectangle,
  49 + getExtremes:function(){y.prototype.getExtremes.call(this,this.valueData);this.valueMin=this.dataMin;this.valueMax=this.dataMax;y.prototype.getExtremes.call(this)}}));r.prototype.transformFromLatLon=function(a,b){if(window.proj4===void 0)return D(21),{x:0,y:null};var c=window.proj4(b.crs,[a.lon,a.lat]),d=b.cosAngle||b.rotation&&Math.cos(b.rotation),e=b.sinAngle||b.rotation&&Math.sin(b.rotation),c=b.rotation?[c[0]*d+c[1]*e,-c[0]*e+c[1]*d]:c;return{x:((c[0]-(b.xoffset||0))*(b.scale||1)+(b.xpan||0))*
  50 +(b.jsonres||1)+(b.jsonmarginX||0),y:(((b.yoffset||0)-c[1])*(b.scale||1)+(b.ypan||0))*(b.jsonres||1)-(b.jsonmarginY||0)}};r.prototype.transformToLatLon=function(a,b){if(window.proj4===void 0)D(21);else{var c={x:((a.x-(b.jsonmarginX||0))/(b.jsonres||1)-(b.xpan||0))/(b.scale||1)+(b.xoffset||0),y:((-a.y-(b.jsonmarginY||0))/(b.jsonres||1)+(b.ypan||0))/(b.scale||1)+(b.yoffset||0)},d=b.cosAngle||b.rotation&&Math.cos(b.rotation),e=b.sinAngle||b.rotation&&Math.sin(b.rotation),c=window.proj4(b.crs,"WGS84",
  51 + b.rotation?{x:c.x*d+c.y*-e,y:c.x*e+c.y*d}:c);return{lat:c.y,lon:c.x}}};r.prototype.fromPointToLatLon=function(a){var b=this.mapTransforms,c;if(b){for(c in b)if(b.hasOwnProperty(c)&&b[c].hitZone&&I({x:a.x,y:-a.y},b[c].hitZone.coordinates[0]))return this.transformToLatLon(a,b[c]);return this.transformToLatLon(a,b["default"])}else D(22)};r.prototype.fromLatLonToPoint=function(a){var b=this.mapTransforms,c,d;if(!b)return D(22),{x:0,y:null};for(c in b)if(b.hasOwnProperty(c)&&b[c].hitZone&&(d=this.transformFromLatLon(a,
  52 + b[c]),I({x:d.x,y:-d.y},b[c].hitZone.coordinates[0])))return d;return this.transformFromLatLon(a,b["default"])};l.geojson=function(a,b,c){var d=[],e=[],f=function(a){var b=0,c=a.length;for(e.push("M");b<c;b++)b===1&&e.push("L"),e.push(a[b][0],-a[b][1])},b=b||"map";i(a.features,function(a){var c=a.geometry,j=c.type,c=c.coordinates,a=a.properties,k;e=[];b==="map"||b==="mapbubble"?(j==="Polygon"?(i(c,f),e.push("Z")):j==="MultiPolygon"&&(i(c,function(a){i(a,f)}),e.push("Z")),e.length&&(k={path:e})):b===
  53 +"mapline"?(j==="LineString"?f(c):j==="MultiLineString"&&i(c,f),e.length&&(k={path:e})):b==="mappoint"&&j==="Point"&&(k={x:c[0],y:-c[1]});k&&d.push(p(k,{name:a.name||a.NAME,properties:a}))});if(c&&a.copyrightShort)c.chart.mapCredits='<a href="http://www.highcharts.com">Highcharts</a> © <a href="'+a.copyrightUrl+'">'+a.copyrightShort+"</a>",c.chart.mapCreditsFull=a.copyright;return d};s(r.prototype,"showCredits",function(a,b){if(z.credits.text===this.options.credits.text&&this.mapCredits)b.text=this.mapCredits,
  54 + b.href=null;a.call(this,b);this.credits&&this.credits.attr({title:this.mapCreditsFull})});p(z.lang,{zoomIn:"Zoom in",zoomOut:"Zoom out"});z.mapNavigation={buttonOptions:{alignTo:"plotBox",align:"left",verticalAlign:"top",x:0,width:18,height:18,style:{fontSize:"15px",fontWeight:"bold",textAlign:"center"},theme:{"stroke-width":1}},buttons:{zoomIn:{onclick:function(){this.mapZoom(0.5)},text:"+",y:0},zoomOut:{onclick:function(){this.mapZoom(2)},text:"-",y:28}}};l.splitPath=function(a){var b,a=a.replace(/([A-Za-z])/g,
  55 + " $1 "),a=a.replace(/^\s*/,"").replace(/\s*$/,""),a=a.split(/[ ,]+/);for(b=0;b<a.length;b++)/[a-zA-Z]/.test(a[b])||(a[b]=parseFloat(a[b]));return a};l.maps={};H.prototype.symbols.topbutton=function(a,b,c,d,e){return J(a-1,b-1,c,d,e.r,e.r,0,0)};H.prototype.symbols.bottombutton=function(a,b,c,d,e){return J(a-1,b-1,c,d,0,0,e.r,e.r)};N===K&&i(["topbutton","bottombutton"],function(a){K.prototype.symbols[a]=H.prototype.symbols[a]});l.Map=function(a,b){var c={endOnTick:!1,gridLineWidth:0,lineWidth:0,minPadding:0,
  56 + maxPadding:0,startOnTick:!1,title:null,tickPositions:[]},d;d=a.series;a.series=null;a=n({chart:{panning:"xy",type:"map"},xAxis:c,yAxis:n(c,{reversed:!0})},a,{chart:{inverted:!1,alignTicks:!1}});a.series=d;return new r(a,b)}})(Highcharts);
0 \ No newline at end of file 57 \ No newline at end of file
datalets/highcharts-datalet/highcharts-datalet.html
  View file @fb05b40
@@ -62,7 +62,7 @@ Example : @@ -62,7 +62,7 @@ Example :
62 62
63 <script src="static/js/highcharts.js"></script> 63 <script src="static/js/highcharts.js"></script>
64 <script src="static/js/exporting.js"></script> 64 <script src="static/js/exporting.js"></script>
65 - <script src="themes/themes.js"></script> 65 + <script src="static/themes/themes.js"></script>
66 66
67 <script> 67 <script>
68 var HighchartsBehavior = { 68 var HighchartsBehavior = {
@@ -79,35 +79,35 @@ Example : @@ -79,35 +79,35 @@ Example :
79 value: [] 79 value: []
80 }, 80 },
81 81
82 - series_type:{  
83 - type: String,  
84 - value: "line"//spline,time  
85 - } 82 +// series_type:{
  83 +// type: String,
  84 +// value: "line"//spline,time
  85 +// }
86 86
87 }, 87 },
88 /** 88 /**
89 * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged. 89 * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged.
90 */ 90 */
91 - jNumConverter: function(num) {  
92 - //lat-long  
93 - if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)  
94 - return num;  
95 -  
96 - num = num.replace(/[^0-9\.]/, '');  
97 -  
98 - var jNum = "";  
99 - for (var i = 0; i < num.length; i++) {  
100 - if(num[i].match(/[\.,]/g))  
101 - if (i == num.length - 3)  
102 - jNum += ".";  
103 - else  
104 - ;  
105 - else if (!isNaN(num[i]))  
106 - jNum += num[i];  
107 - }  
108 -  
109 - return jNum;  
110 - }, 91 +// jNumConverter: function(num) {
  92 +// //lat-long
  93 +// if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)
  94 +// return num;
  95 +//
  96 +// num = num.replace(/[^0-9\.]/, '');
  97 +//
  98 +// var jNum = "";
  99 +// for (var i = 0; i < num.length; i++) {
  100 +// if(num[i].match(/[\.,]/g))
  101 +// if (i == num.length - 3)
  102 +// jNum += ".";
  103 +// else
  104 +// ;
  105 +// else if (!isNaN(num[i]))
  106 +// jNum += num[i];
  107 +// }
  108 +//
  109 +// return jNum;
  110 +// },
111 /** 111 /**
112 * Populate the categories and the series array. 112 * Populate the categories and the series array.
113 * 113 *
@@ -115,45 +115,89 @@ Example : @@ -115,45 +115,89 @@ Example :
115 * 115 *
116 * @param {Event} e 116 * @param {Event} e
117 */ 117 */
118 - transformData: function () {  
119 -  
120 - if(this.data.length == 0) return;  
121 -  
122 - this.properties.categories.value = this.data[0].data; 118 +// transformData: function () {
  119 +//
  120 +// if(this.data.length == 0) return;
  121 +//
  122 +// this.properties.categories.value = this.data[0].data;
  123 +//
  124 +// for (var i = 1; i < this.data.length; i++)
  125 +// {
  126 +// this.data[i].data.every(function (element, index, array) {
  127 +// try {
  128 +// var e = HighchartsBehavior.jNumConverter(element);
  129 +// (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :
  130 +// array[index] = parseFloat(element);
  131 +// }catch(e){
  132 +// //console.log("Parsing data error. Highchart-datalet.selectData");
  133 +// }
  134 +// return true;
  135 +// });
  136 +//
  137 +// this.properties.series.value.push(this.data[i]);
  138 +// }
  139 +// },
123 140
124 - for (var i = 1; i < this.data.length; i++)  
125 - {  
126 - this.data[i].data.every(function (element, index, array) {  
127 - try {  
128 - var e = HighchartsBehavior.jNumConverter(element);  
129 - (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :  
130 - array[index] = parseFloat(element);  
131 - }catch(e){  
132 - //console.log("Parsing data error. Highchart-datalet.selectData");  
133 - }  
134 - return true;  
135 - }); 141 + transformData: function () {
  142 + if(this.data.length == 0)
  143 + return;
136 144
137 - this.properties.series.value.push(this.data[i]); 145 + if(this.data.length == 2){
  146 + this.properties.categories.value = this.data[0].data;
  147 + this.properties.series.value = [this.data[1]];
138 } 148 }
139 - },  
140 -  
141 - setParameters: function(params)  
142 - {  
143 - this._component.title = params['title'];  
144 - this._component.description = params['description'];  
145 149
146 - var chart = $(this._component.$.charts.$.container).highcharts();  
147 -  
148 - chart.setTitle({text: params['title']});  
149 - chart.xAxis[0].setTitle({text: params['x-axis-label']});  
150 - chart.yAxis[0].setTitle({text: params['y-axis-label']});  
151 -  
152 - chart.tooltip.options.formatter = function() {  
153 - return this.x + '<br/><br/><span style="fill:#7cb5ec" x="8" dy="15">●</span> ' + this.series.name + ': <b>' + this.y + ' ' + params['suffix'] + '</b>'; 150 + if(this.data.length == 3){//multi series
  151 + var x = this.data[0]["data"];
  152 + var gb = this.data[1]["data"];
  153 + var y = this.data[2]["data"];
  154 +
  155 + var categories = x.filter(function(item, pos) {
  156 + return x.indexOf(item) == pos;
  157 + })
  158 +
  159 + var s = gb.filter(function(item, pos) {
  160 + return gb.indexOf(item) == pos;
  161 + })
  162 +
  163 + var series = [];
  164 + for(var i = 0; i < s.length; i++) {
  165 + series.push({name: s[i], data: new Array(categories.length+1).join('0').split('').map(parseFloat)});
  166 + }
  167 +
  168 + for (var i = 0; i < y.length; i++){
  169 + var index = categories.indexOf(x[i]);
  170 + var s = series.filter(function( obj ) {
  171 + return obj.name == gb[i];
  172 + });
  173 + s[0]["data"][index] = y[i];
  174 + }
  175 +
  176 + this.properties.categories.value = categories;
  177 + this.properties.series.value = series;
154 } 178 }
  179 + },
155 180
156 - } 181 +// setParameters: function(params)
  182 +// {
  183 +// this._component.title = params['title'];
  184 +// this._component.description = params['description'];
  185 +//
  186 +// var chart = $(this._component.$.charts.$.container).highcharts();
  187 +//
  188 +// chart.setTitle({text: params['title']});
  189 +// chart.xAxis[0].setTitle({text: params['x-axis-label']});
  190 +// chart.yAxis[0].setTitle({text: params['y-axis-label']});
  191 +//
  192 +// chart.tooltip.options.formatter = function() {
  193 +// return this.x + '<br/><br/><span style="fill:#7cb5ec" x="8" dy="15">●</span> ' + this.series.name + ': <b>' + this.y + ' ' + params['suffix'] + '</b>';
  194 +// }
  195 +//
  196 +// //theme default
  197 +// Highcharts.setOptions(Highcharts[params['theme']]);
  198 +//
  199 +// this._component.stack = params['stack'];
  200 +// }
157 201
158 }; 202 };
159 203
datalets/highcharts-datalet/themes/dark_unica.js renamed to datalets/highcharts-datalet/static/themes/themeDarkUnika.js 100644 → 100755
  View file @fb05b40
datalets/highcharts-datalet/themes/grid_light.js renamed to datalets/highcharts-datalet/static/themes/themeGridLight.js 100644 → 100755
  View file @fb05b40
datalets/highcharts-datalet/themes/sand_signika.js renamed to datalets/highcharts-datalet/static/themes/themeSandSignika.js 100644 → 100755
  View file @fb05b40
datalets/highcharts-datalet/themes/themes.js renamed to datalets/highcharts-datalet/static/themes/themes.js 100644 → 100755
  View file @fb05b40
  1 +Highcharts.themeSpod = {
  2 + colors: ["#2196F3", "#00BCD4", "#B6B6B6", "#F44336", "#FFEB3B", "#4CAF50", "#FF9800", "#795548", "#9C27B0", "#E91E63"],
  3 + chart: {
  4 + style: {
  5 + fontFamily: "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
  6 + }
  7 + }
  8 +}
  9 +
1 /** 10 /**
2 * Dark theme for Highcharts JS 11 * Dark theme for Highcharts JS
3 * @author Torstein Honsi 12 * @author Torstein Honsi
@@ -221,12 +230,11 @@ Highcharts.createElement(&#39;link&#39;, { @@ -221,12 +230,11 @@ Highcharts.createElement(&#39;link&#39;, {
221 type: 'text/css' 230 type: 'text/css'
222 }, null, document.getElementsByTagName('head')[0]); 231 }, null, document.getElementsByTagName('head')[0]);
223 232
224 -// Add the background image to the container  
225 -Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {  
226 - proceed.call(this);  
227 - this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';  
228 -});  
229 - 233 +//Add the background image to the container
  234 +//Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
  235 +// proceed.call(this);
  236 +// this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
  237 +//});
230 238
231 Highcharts.themeSandSignika = { 239 Highcharts.themeSandSignika = {
232 colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", 240 colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
datalets/leafletjs-datalet/leafletjs-datalet.png 100755 → 100644
View file @fb05b40

130 KB | W: | H:

5.32 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/linechart-datalet/linechart-datalet.html
  View file @fb05b40
@@ -62,14 +62,13 @@ Example: @@ -62,14 +62,13 @@ Example:
62 * @method presentData 62 * @method presentData
63 */ 63 */
64 presentData: function(){ 64 presentData: function(){
65 -  
66 - $(this._component.$.charts.$.container).highcharts({  
67 - title: {  
68 - text: "" + this._component.title  
69 - }, 65 + options = {
70 chart: { 66 chart: {
71 zoomType: 'xy' 67 zoomType: 'xy'
72 }, 68 },
  69 + title: {
  70 + text: this._component.title
  71 + },
73 xAxis: { 72 xAxis: {
74 categories: this.properties.categories.value,//this._component.categories, 73 categories: this.properties.categories.value,//this._component.categories,
75 title: { 74 title: {
@@ -77,14 +76,14 @@ Example: @@ -77,14 +76,14 @@ Example:
77 } 76 }
78 }, 77 },
79 yAxis: { 78 yAxis: {
  79 + min: 0,
80 title: { 80 title: {
81 - text: this._component.yAxisLabel 81 + text: this._component.yAxisLabel,
  82 + align: 'high'
82 }, 83 },
83 - plotLines: [{  
84 - value: 0,  
85 - width: 1,  
86 - color: '#808080'  
87 - }] 84 + labels: {
  85 + overflow: 'justify'
  86 + }
88 }, 87 },
89 tooltip: { 88 tooltip: {
90 valueSuffix: ' ' + this._component.suffix 89 valueSuffix: ' ' + this._component.suffix
@@ -94,17 +93,22 @@ Example: @@ -94,17 +93,22 @@ Example:
94 align: 'right', 93 align: 'right',
95 verticalAlign: 'top', 94 verticalAlign: 'top',
96 x: -40, 95 x: -40,
97 - y: 100, 96 + y: 80,
98 floating: true, 97 floating: true,
99 borderWidth: 1, 98 borderWidth: 1,
100 - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 99 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
101 shadow: true 100 shadow: true
102 }, 101 },
103 credits: { 102 credits: {
104 enabled: false 103 enabled: false
105 }, 104 },
106 series: this.properties.series.value 105 series: this.properties.series.value
107 - }); 106 + };
  107 +
  108 + if(this._component.theme != "themeBase" && this._component.theme != "")
  109 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  110 +
  111 + $(this._component.$.charts.$.container).highcharts(options);
108 } 112 }
109 }; 113 };
110 114
@@ -146,6 +150,10 @@ Example: @@ -146,6 +150,10 @@ Example:
146 type : String, 150 type : String,
147 value : "units" 151 value : "units"
148 }, 152 },
  153 + theme : {
  154 + type : String,
  155 + value : ""
  156 + },
149 /** 157 /**
150 * It's the component behavior 158 * It's the component behavior
151 * 159 *
datalets/linechart-datalet/linechart-datalet.png 100755 → 100644
View file @fb05b40

3.46 KB | W: | H:

854 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/piechart-datalet/piechart-datalet.html
  View file @fb05b40
@@ -31,7 +31,6 @@ @@ -31,7 +31,6 @@
31 <link rel="import" href="../../bower_components/polymer/polymer.html"> 31 <link rel="import" href="../../bower_components/polymer/polymer.html">
32 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> 32 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
33 33
34 -  
35 <!-- 34 <!--
36 `piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/> 35 `piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/>
37 36
@@ -60,49 +59,65 @@ Example: @@ -60,49 +59,65 @@ Example:
60 * @method presentData 59 * @method presentData
61 */ 60 */
62 presentData: function(){ 61 presentData: function(){
  62 + var series = [{"name": this.data[1].name, "data": []}];
  63 +
  64 + var sum = 0;
  65 + for(var i = 0; i < this.data[0].data.length; i++)
  66 + sum += this.data[1].data[i];
  67 +
  68 + var other = ['other', 0];
  69 + for(var i = 0; i < this.data[0].data.length; i++) {
  70 + if (this.data[0].data.length <= 20 || this.data[1].data[i] / sum >= 0.02) {
  71 + var slice = ['' + this.data[0].data[i], this.data[1].data[i]];
  72 + series[0].data.push(slice);
  73 + }
  74 + else {
  75 + other[1] += this.data[1].data[i];
  76 + }
  77 + }
63 78
64 - var PieSeries = [{"name": this.data[1].name, "data":[]}]; 79 + if(other[1] > 0)
  80 + series[0].data.push(other);
65 81
66 - for(var i=0; i<this.data[0].data.length; i++)  
67 - {  
68 - var PieArr = [this.data[0].data[i], this.data[1].data[i]];  
69 - PieSeries[0].data.push(PieArr);  
70 - } 82 + var innerSize = 0;
  83 + if(this._component.donut == "true")
  84 + innerSize = 100;
71 85
72 - //Build Highchart element  
73 - $(this._component.$.charts.$.container).highcharts({ 86 + options = {
74 chart: { 87 chart: {
75 - plotBackgroundColor: null,  
76 - plotBorderWidth: null,  
77 - plotShadow: false,  
78 - type: 'pie' 88 + type: 'pie',
  89 + zoomType: 'xy',
79 }, 90 },
80 title: { 91 title: {
81 - text: "" + this._component.title 92 + text: this._component.title
  93 + },
  94 + tooltip: {
  95 + valueSuffix: ' ' + this._component.suffix
82 }, 96 },
83 plotOptions: { 97 plotOptions: {
84 pie: { 98 pie: {
  99 + innerSize: innerSize,
85 allowPointSelect: true, 100 allowPointSelect: true,
86 cursor: 'pointer', 101 cursor: 'pointer',
87 dataLabels: { 102 dataLabels: {
88 enabled: true, 103 enabled: true,
89 - formatter: function() {  
90 - if (this.point.name.length > 10) {  
91 - return this.point.name.substr(0, 10) + "...";  
92 - } else {  
93 - return this.point.name;  
94 - } 104 + format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  105 + style: {
  106 + color: (Highcharts[this._component.theme] && Highcharts[this._component.theme].contrastTextColor) || 'black'
95 } 107 }
96 - },  
97 - showInLegend: true 108 + }
98 } 109 }
99 }, 110 },
100 - //hide link HighChart  
101 credits: { 111 credits: {
102 enabled: false 112 enabled: false
103 }, 113 },
104 - series: PieSeries  
105 - }); 114 + series: series
  115 + };
  116 +
  117 + if(this._component.theme != "themeBase" && this._component.theme != "")
  118 + jQuery.extend(true, options, Highcharts[this._component.theme]);
  119 +
  120 + $(this._component.$.charts.$.container).highcharts(options);
106 } 121 }
107 }; 122 };
108 123
@@ -111,13 +126,18 @@ Example: @@ -111,13 +126,18 @@ Example:
111 is: 'piechart-datalet', 126 is: 'piechart-datalet',
112 127
113 properties: { 128 properties: {
114 - /**  
115 - * It's the component behavior  
116 - *  
117 - * @attribute behavior  
118 - * @type Object  
119 - * @default {}  
120 - */ 129 + suffix : {
  130 + type : String,
  131 + value : ""
  132 + },
  133 + theme : {
  134 + type : String,
  135 + value : ""
  136 + },
  137 + donut : {
  138 + type : String,
  139 + value : "false"
  140 + },
121 behavior : { 141 behavior : {
122 type : Object, 142 type : Object,
123 value : {} 143 value : {}
datalets/piechart-datalet/piechart-datalet.png 100755 → 100644
View file @fb05b40

7.47 KB | W: | H:

788 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
locales/controllet_ln.js
  View file @fb05b40
1 var ln = []; 1 var ln = [];
2 2
3 -/* IT */ 3 +/******** EN ********/
  4 +
  5 +//PAGE SLIDER
  6 +ln["slide1Title_en"] = "SELECT DATASET";
  7 +ln["slide1Subtitle_en"] = "Search or copy and paste the url of dataset.";
  8 +ln["slide2Title_en"] = "SELECT DATA";
  9 +ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
  10 +ln["slide3Title_en"] = "SELECT VISUALIZATION";
  11 +ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
  12 +ln["back_en"] = "Back";
  13 +ln["forward_en"] = "Forward";
  14 +
  15 +//SELECT DATASET
  16 +ln["listView_en"] = "LIST VIEW";
  17 +ln["treeMapView_en"] = "TREE MAP VIEW";
  18 +ln["availableDatasets_en"] = "Available datasets";
  19 +ln["suggestedDatasets_en"] = "Suggested datasets";
  20 +ln["selectedUrl_en"] = "Selected url";
  21 +ln["wrongUrl_en"] = "Invalid url or data provider not supported yet.";
  22 +
  23 +//SELECT DATA
  24 +ln["addFilters_en"] = "ADD FILTERS";
  25 +
  26 +//filters
  27 +ln["filterField_en"] = "Field";
  28 +ln["filterOperation_en"] = "Operation";
  29 +ln["filterValue_en"] = "Value";
  30 +ln["contains_en"] = "contains";
  31 +ln["start_en"] = "start with";
  32 +ln["ends_en"] = "ends with";
  33 +
  34 +//SELECT VISUALIZATION
  35 +ln["inputs_en"] = "INPUTS";
  36 +ln["baseInfo_en"] = "BASE INFO";
  37 +ln["layouts_en"] = "LABELS / OPTIONS";
  38 +ln["dataletPreview_en"] = "DATALET PREVIEW";
  39 +ln["addDatalet_en"] = "ADD";
  40 +ln["modifyDatalet_en"] = "MODIFY";
  41 +
  42 +//vslider
  43 +ln["search_en"] = "Search";
  44 +
  45 +ln["datatable_en"] = "Table";
  46 +ln["barchart_en"] = "Bar";
  47 +ln["columnchart_en"] = "Column";
  48 +ln["areachart_en"] = "Area";
  49 +ln["linechart_en"] = "Line";
  50 +ln["heatmap_en"] = "Heat Map";
  51 +ln["barchart_stacked_en"] = "Stacked Bar";
  52 +ln["columnchart_stacked_en"] = "Stacked Column";
  53 +ln["areachart_stacked_en"] = "Stacked Area";
  54 +ln["piechart_en"] = "Pie";
  55 +//ln["scatterchart_en"] = "Scatter";
  56 +//ln["bubblechart_en"] = "Bubble";
  57 +//ln["treemap_en"] = "Tree Map";
  58 +ln["leafletjs_en"] = "Map";
  59 +
  60 +//inputs
  61 +ln["sortAscending_en"] = "sorted ascending";
  62 +ln["sortDescending_en"] = "sorted descending";
  63 +ln["unsort_en"] = "unsorted";
  64 +
  65 +ln["groupBy_en"] = "GROUP BY";
  66 +ln["calculate_en"] = "CALCULATE";
  67 +
  68 +ln["COUNT_en"] = "COUNT of";
  69 +ln["SUM_en"] = "SUM of";
  70 +ln["MIN_en"] = "MIN of";
  71 +ln["MAX_en"] = "MAX of";
  72 +ln["AVG_en"] = "AVG of";
  73 +ln["FIRST_en"] = "FIRST of";
  74 +ln["LAST_en"] = "LAST of";
  75 +
  76 +ln["XAxis_en"] = "X AXIS";
  77 +ln["YAxis_en"] = "Y AXIS (numeric)";
  78 +ln["Column_en"] = "COLUMN";
  79 +ln["SliceLabels_en"] = "LABELS";
  80 +ln["SliceSizes_en"] = "SIZES (numeric)";
  81 +ln["Latitude_en"] = "LATITUDE";
  82 +ln["Longitude_en"] = "LONGITUDE";
  83 +ln["BalloonContent_en"] = "BALLOON CONTENT";
  84 +
  85 +//options
  86 +ln["title_en"] = "Title"
  87 +ln["description_en"] = "Description";
  88 +
  89 +ln["x-axis-label_en"] = "X Axis Label";
  90 +ln["y-axis-label_en"] = "Y Axis Label";
  91 +ln["suffix_en"] = "Tooltip Suffix";
  92 +ln["theme_en"] = "Theme";
  93 +ln["stack_en"] = "Stack";
  94 +ln["donut_en"] = "Donut";
  95 +
  96 +ln["x-axis-label_description_en"] = "X Axis Label";
  97 +ln["y-axis-label_description_en"] = "Y Axis Label";
  98 +ln["suffix_description_en"] = "Tooltip Suffix";
  99 +ln["theme_description_en"] = "Theme";
  100 +ln["stack_description_en"] = "Stack";
  101 +ln["donut_description_en"] = "Donut";
  102 +
  103 +/******** IT ********/
  104 +
4 ln["slide1Title_it"] = "SELEZIONA IL DATASET"; 105 ln["slide1Title_it"] = "SELEZIONA IL DATASET";
5 ln["slide1Subtitle_it"] = "Ricerca o copia e incolla la url del dataset."; 106 ln["slide1Subtitle_it"] = "Ricerca o copia e incolla la url del dataset.";
6 ln["slide2Title_it"] = "SELEZIONA I DATI"; 107 ln["slide2Title_it"] = "SELEZIONA I DATI";
@@ -110,120 +211,8 @@ ln[&quot;LatitudeDescription_it&quot;] = &quot;Latitudine del punto da riportare sulla mappa.&quot;; @@ -110,120 +211,8 @@ ln[&quot;LatitudeDescription_it&quot;] = &quot;Latitudine del punto da riportare sulla mappa.&quot;;
110 ln["LongitudeDescription_it"] = "Longitudine del punto da riportare sulla mappa."; 211 ln["LongitudeDescription_it"] = "Longitudine del punto da riportare sulla mappa.";
111 ln["BalloonContentDescription_it"] = "Descrizione del segnaposto o link all'immagine che visualizza il luogo specificato sulla mappa."; 212 ln["BalloonContentDescription_it"] = "Descrizione del segnaposto o link all'immagine che visualizza il luogo specificato sulla mappa.";
112 213
113 -/* EN */  
114 -ln["slide1Title_en"] = "SELECT DATASET";  
115 -ln["slide1Subtitle_en"] = "Search or copy and paste the url of dataset.";  
116 -ln["slide2Title_en"] = "SELECT DATA";  
117 -ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";  
118 -ln["slide3Title_en"] = "SELECT VISUALIZATION";  
119 -ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";  
120 -  
121 -ln["back_en"] = "BACK";  
122 -ln["forward_en"] = "FORWARD";  
123 -  
124 -ln["listView_en"] = "LIST VIEW";  
125 -ln["treeMapView_en"] = "TREE MAP VIEW";  
126 -ln["mostPopular_en"] = "MOST POPULAR";  
127 -ln["availableDatasets_en"] = "Available datasets";  
128 -ln["suggestedDatasets_en"] = "Suggested datasets";  
129 -ln["selectedUrl_en"] = "Selected url";  
130 -ln["wrongUrl_en"] = "Invalid url or data provider not supported yet.";  
131 -  
132 -ln["inputs_en"] = "INPUTS";  
133 -ln["layouts_en"] = "LABELS / OPTIONS";  
134 -ln["baseInfo_en"] = "BASE INFO";  
135 -ln["comment_en"] = "COMMENT";  
136 -ln["commentLabel_en"] = "comment (max 100 characters)";  
137 -ln["dataletPreview_en"] = "PREVIEW";  
138 -ln["addDatalet_en"] = "ADD";  
139 -ln["modifyDatalet_en"] = "MODIFY"; 214 +/******** FR ********/
140 215
141 -ln["addFilters_en"] = "ADD FILTERS";  
142 -ln["filterField_en"] = "Field";  
143 -ln["filterOperation_en"] = "Operation";  
144 -ln["filterValue_en"] = "Value";  
145 -ln["contains_en"] = "contains";  
146 -ln["start_en"] = "start with";  
147 -ln["ends_en"] = "ends with";  
148 -ln["sortAscending_en"] = "sorted ascending";  
149 -ln["sortDescending_en"] = "sorted descending";  
150 -ln["unsort_en"] = "unsorted";  
151 -ln["groupBy_en"] = "GROUP BY";  
152 -ln["calculate_en"] = "CALCULATE";  
153 -ln["COUNT_en"] = "COUNT of";  
154 -ln["SUM_en"] = "SUM of";  
155 -ln["MIN_en"] = "MIN of";  
156 -ln["MAX_en"] = "MAX of";  
157 -ln["AVG_en"] = "AVG of";  
158 -ln["FIRST_en"] = "FIRST of";  
159 -ln["LAST_en"] = "LAST of";  
160 -  
161 -ln["datatable_en"] = "table";  
162 -ln["barchart_en"] = "bar-chart";  
163 -//ln["bar-chart_en"] = "DDR bar-chart";  
164 -ln["columnchart_en"] = "column-chart";  
165 -ln["linechart_en"] = "line-chart";  
166 -ln["column3Dchart_en"] = "3D column-chart";  
167 -ln["areachart_en"] = "area-chart";  
168 -ln["donutpie3dchart_en"] = "3D donutpie-chart";  
169 -ln["piechart_en"] = "pie-chart";  
170 -ln["treemap_en"] = "tree-map";  
171 -ln["leafletjs_en"] = "map";  
172 -ln["bubble3d_en"] = "3D bubble-chart";  
173 -ln["bubblechart_en"] = "bubble-chart";  
174 -ln["scatterchart_en"] = "scatter-chart";  
175 -ln["heatmap_en"] = "heat-map";  
176 -  
177 -ln["title_en"] = "title";  
178 -ln["description_en"] = "description";  
179 -  
180 -ln["Cell_en"] = "Cell";  
181 -ln["Level_en"] = "Level";  
182 -ln["Categories_en"] = "Categories";  
183 -//ln["Category_en"] = "Category";  
184 -ln["Series_en"] = "Series";  
185 -ln["x-axis-label_en"] = "X axis label";  
186 -ln["y-axis-label_en"] = "Y axis label";  
187 -ln["z-axis-label_en"] = "Z axis label";  
188 -ln["suffix_en"] = "Suffix";  
189 -//ln["theme_en"] = "Theme";  
190 -ln["Size_en"] = "Size";  
191 -ln["Latitude_en"] = "Latitude";  
192 -ln["Longitude_en"] = "Longitude";  
193 -ln["Balloon content_en"] = "Balloon content";  
194 -ln["X values_en"] = "X values";  
195 -ln["Y values_en"] = "Y values";  
196 -ln["Z values_en"] = "Z values";  
197 -  
198 -ln["cellDescription_en"] = "The cell of table.";  
199 -ln["levelDescription_en"] = "It is the level field that the datalet will use to group the values at corrisponding field number level.";  
200 -  
201 -ln["categoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";  
202 -ln["seriesDescription_en"] = "The chart series. Its values will be put in the vertical axis.";  
203 -  
204 -ln["XAxisLabelDescription_en"] = "The label for the X axis.";  
205 -ln["YAxisLabelDescription_en"] = "The label for the Y axis.";  
206 -ln["suffixDescription_en"] = "The values suffix (eg units, dollars, euro, ...).";  
207 -  
208 -ln["pieSeriesDescription_en"] = "The chart series. Its values will be put on slice of each series.";  
209 -ln["pieSizeDescription_en"] = "The size for each series to create a concentric rings.";  
210 -  
211 -ln["bubbleCategoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";  
212 -ln["bubbleYValuesDescription_en"] = "The chart plots y values. Its values will be put in the vertical axis.";  
213 -ln["bubbleZValuesDescription_en"] = "The chart plots z value. Its values represent the size of the bubble.";  
214 -ln["bubbleSeriesDescription_en"] = "The chart series. Its values visualize multi- series bubbles chart.";  
215 -  
216 -ln["scatterCategoriesDescription_en"] = "The chart categories. You need one value for each series.";  
217 -ln["scatterXValuesDescription_en"] = "The chart plots x values. Its values will be put in the horizontal axis.";  
218 -ln["scatterYValuesDescription_en"] = "The chart plots y value. Its values will be put in the vertical axis.";  
219 -  
220 -ln["heatmapCategoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis.";  
221 -  
222 -ln["LatitudeDescription_en"] = "It is latitude of the points you want to show in the map.";  
223 -ln["LongitudeDescription_en"] = "It is longitude of the points you want to show in the map.";  
224 -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.";  
225 -  
226 -/* FR */  
227 ln["slide1Title_fr"] = "SELECTIONNER UN JEU DE DONNEES"; 216 ln["slide1Title_fr"] = "SELECTIONNER UN JEU DE DONNEES";
228 ln["slide1Subtitle_fr"] = "Rechercher ou copier/coller l’url du jeu de données."; 217 ln["slide1Subtitle_fr"] = "Rechercher ou copier/coller l’url du jeu de données.";
229 ln["slide2Title_fr"] = "SELECTIONNER DONNEES"; 218 ln["slide2Title_fr"] = "SELECTIONNER DONNEES";
@@ -333,7 +322,8 @@ ln[&quot;LatitudeDescription_fr&quot;] = &quot;Latitude des points que vous souhaitez montrer s @@ -333,7 +322,8 @@ ln[&quot;LatitudeDescription_fr&quot;] = &quot;Latitude des points que vous souhaitez montrer s
333 ln["LongitudeDescription_fr"] = "Longitude des points que vous souhaitez montrer sur la carte."; 322 ln["LongitudeDescription_fr"] = "Longitude des points que vous souhaitez montrer sur la carte.";
334 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."; 323 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.";
335 324
336 -/* NL */ 325 +/******** NL ********/
  326 +
337 ln["slide1Title_nl"] = "SELECTEER DATASET"; 327 ln["slide1Title_nl"] = "SELECTEER DATASET";
338 ln["slide1Subtitle_nl"] = "Zoek of kopieer en plak de url van de dataset."; 328 ln["slide1Subtitle_nl"] = "Zoek of kopieer en plak de url van de dataset.";
339 ln["slide2Title_nl"] = "SELECTEER DATA"; 329 ln["slide2Title_nl"] = "SELECTEER DATA";