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 8 <link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
9 9 <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
10 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 14 <dom-module id="data-sevc-controllet">
14 15  
... ... @@ -32,7 +33,8 @@
32 33  
33 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 39 </neon-animatable>
38 40  
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @fb05b40
... ... @@ -226,7 +226,7 @@
226 226 <div class="inputs">
227 227 <paper-dropdown-menu id="group_by">
228 228 <paper-menu class="dropdown-content">
229   - <template is="dom-repeat" items={{selectedFields}}>
  229 + <template is="dom-repeat" items={{fields}}>
230 230 <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
231 231 </template>
232 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 17 <style is="custom-style">
18 18 paper-icon-button{
19 19 color: #FFFFFF;
20   - height: 48px;
21   - width: 48px;
  20 + height: 32px;/*48*/
  21 + width: 32px;/*48*/
22 22 padding: 0px;
23 23 margin: 0px;
24 24 --paper-icon-button-ink-color: white;
... ... @@ -27,7 +27,7 @@
27 27 #items_vslider_container{
28 28 display: flex;
29 29 flex-direction: column;
30   - height: 100vh;
  30 + height: 100%;
31 31 width: 172px;
32 32 background-color: #E0E0E0;
33 33 }
... ... @@ -39,18 +39,17 @@
39 39  
40 40 .arrow-up{
41 41 background-color: #2196F3;
42   - padding-left: 63px;
  42 + padding-left: 70px;/*62*/
43 43 }
44 44  
45 45 .arrow-down{
46 46 background-color: #2196F3;
47   - padding-left: 63px;
  47 + padding-left: 70px;
48 48 }
49 49  
50 50 .content-card{
51 51 position: relative;
52 52 float: left;/*firefox*/
53   - /*margin : 16px;*/
54 53 margin : 16px 16px 0px 16px;
55 54 padding: 8px;
56 55 height: 124px;
... ... @@ -60,7 +59,6 @@
60 59 }
61 60  
62 61 img{
63   - /*height: 100%;*/
64 62 width: 100%;
65 63 }
66 64  
... ... @@ -70,23 +68,24 @@
70 68 bottom: 16px;
71 69 padding: 8px;
72 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 73 z-index: 1;
77 74 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
78 75 font-size: 16px;
  76 + line-height: 16px;
  77 + font-weight: 700;
79 78 }
80 79  
81 80 .legend.selected {
82   - font-weight: 700;
83 81 background-color: #2196F3;
84   - opacity: 1;
  82 + color: #FFFFFF;
85 83 }
86 84  
87 85 #items_vslider_search{
88 86 height: 48px;
89 87 padding: 0px 8px;
  88 + /*padding-top: 8px;*/
90 89 background-color: #B6B6B6;
91 90 --paper-input-container-focus-color: #2196F3;
92 91 }
... ... @@ -99,7 +98,7 @@
99 98 width: 24px;
100 99 height: 24px;
101 100 padding: 0px 4px;
102   - color: #FFFFFF;
  101 + color: #F44336;
103 102 --paper-icon-button-ink-color: #FFFFFF;
104 103 }
105 104 </style>
... ... @@ -108,7 +107,7 @@
108 107  
109 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 111 <iron-icon class="search" icon="search" prefix></iron-icon>
113 112 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
114 113 </paper-input>
... ... @@ -179,19 +178,30 @@
179 178 },
180 179  
181 180 ready : function() {
182   -// this._resize();
183 181 $(this.$.div_datalets_container).perfectScrollbar();
184 182 },
185 183  
186 184 attached : function() {
187   -// this._resize();
188   -// var that = this;
189   -// window.addEventListener("resize", function() { that._resize(); });
190   -
191 185 if(this.preselectedDatalet){
192 186 this._preselectDatalet();
193 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 207 _clearInput : function() {
... ... @@ -214,7 +224,10 @@
214 224 var datalets = new Array();
215 225 for(var i=0; i < this.datalets.length; i++){
216 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 231 datalets.push(datalet);
219 232 }
220 233  
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @fb05b40
... ... @@ -212,11 +212,14 @@
212 212 this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]);
213 213 this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]);
214 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 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 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 225 _changeWidth: function(){
... ...
controllets/select-dataset-controllet/demo/index.html
  View file @fb05b40
... ... @@ -13,21 +13,59 @@
13 13 ln["localization"] = "en";
14 14 </script>
15 15  
16   - <link rel="import" href="../datalet-selection-controllet.html" />
  16 + <link rel="import" href="../select-dataset-controllet.html" />
17 17 </head>
18 18  
19 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 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 71 \ No newline at end of file
  72 +</html>
35 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 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 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 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 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 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 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 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 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 175 </div>
256 176 </div>
257 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 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 182 </div>
307 183  
308 184 </template>
309 185  
310 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 222 </script>
952   -
953 223 </dom-module>
954 224 \ No newline at end of file
... ...
controllets/select-visualization-controllet/demo/index.html
  View file @fb05b40
... ... @@ -13,19 +13,21 @@
13 13 ln["localization"] = "en";
14 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 19 </head>
18 20  
19 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 27 </body>
27 28  
28 29 <!--urls:-->
  30 +<!--https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee-->
29 31 <!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
30 32 <!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
31 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 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 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 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 274 \ No newline at end of file
... ...
controllets/select-visualization-controllet/select-visualization-controllet.html
  View file @fb05b40
... ... @@ -2,37 +2,21 @@
2 2  
3 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 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 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 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 16 <template>
27 17  
28 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 20 display: flex;
37 21 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
38 22 font-size: 16px;
... ... @@ -46,19 +30,17 @@
46 30  
47 31 #datalet_selection_inputs {
48 32 position: relative;
49   - height: 100vh;
50 33 margin-left: 32px;
51 34 min-width: 258px;
52 35 }
53 36  
54   - #datalet_selection_labels {
  37 + #datalet_selection_options {
55 38 position: relative;
56   - height: 100vh;
57 39 margin-left: 32px;
58 40 min-width: 258px;
59 41 }
60 42  
61   - #datalet_selection_column {
  43 + #datalet_preview_container {
62 44 position: relative;
63 45 width: 100%;
64 46 margin-left: 32px;
... ... @@ -74,10 +56,6 @@
74 56 padding: 16px;
75 57 }
76 58  
77   - .inputs{
78   - position: relative;
79   - }
80   -
81 59 .input_header {
82 60 height: 32px;
83 61 padding-top: 16px;
... ... @@ -86,78 +64,6 @@
86 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 67 paper-button {
162 68 position: absolute;
163 69 bottom: 16px;
... ... @@ -182,125 +88,43 @@
182 88 paper-button[disabled] {
183 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 91 </style>
192 92  
193 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 97 <div id="items_vslider_controllet">
198 98 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
199 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 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 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 119 <paper-material id="datalet_selection_datalet" elevation="5">
290 120 <div class="input_header"><span id="dataletPreview"></span></div>
291 121 <div id="datalet_selection_datalet_placeholder"></div>
292   -
293 122 </paper-material>
294 123  
295 124 <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
296 125  
297 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 128 </div>
305 129  
306 130 </template>
... ... @@ -309,7 +133,7 @@
309 133  
310 134 Polymer({
311 135  
312   - is : 'datalet-selection-controllet',
  136 + is : 'select-visualization-controllet',
313 137  
314 138 properties : {
315 139  
... ... @@ -333,24 +157,9 @@
333 157 value : undefined
334 158 },
335 159  
336   - loadPreview : {
337   - type : Boolean,
338   - value : false
339   - },
340   -
341 160 type : {
342 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 165 filters : {
... ... @@ -358,16 +167,6 @@
358 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 170 fields : {
372 171 type : Array,
373 172 value : []
... ... @@ -378,21 +177,11 @@
378 177 value : []
379 178 },
380 179  
381   - groupedFields : {
382   - type : Array,
383   - value : []
384   - },
385   -
386 180 dataletPreset : {
387 181 type : Object,
388 182 value : []
389 183 },
390 184  
391   -// selectableFields : {
392   -// type : Array,
393   -// value : []
394   -// },
395   -
396 185 dataUrl : {
397 186 type : String,
398 187 value : undefined
... ... @@ -401,92 +190,25 @@
401 190 params:{
402 191 type: Object,
403 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 197 listeners: {
419 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 203 ready : function() {
475 204 this._resize();
476   - $(this.$.datalet_selection_inputs).perfectScrollbar();
477   - $(this.$.datalet_selection_labels).perfectScrollbar();
  205 +
478 206 $(this.$.datalet_selection_datalet).perfectScrollbar();
479 207  
480 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 214 attached : function() {
... ... @@ -498,43 +220,34 @@
498 220 },
499 221  
500 222 setFilters : function(filters) {
501   - this.filters = filters;
  223 + this.filters = this._copy(filters);
502 224 },
503 225  
504 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 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 237 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
519   - this._resetGroupBy();
520 238 },
521 239  
522 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 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 249 _selectDatalet : function(e){
  250 +
538 251 this.$.add_button.setAttribute("disabled", "true");
539 252  
540 253 this.selectedDatalet = e.detail.datalet;
... ... @@ -542,289 +255,79 @@
542 255 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
543 256  
544 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 261 else{
554 262 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
555 263 this.$.selectedDatalet_request.generateRequest();
556   - this.$.expert_header.style.display = "block";
557 264 }
558 265 },
559 266  
560 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 286 _handleSelectedDatalet : function(e){
590 287  
591 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 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 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 327 var dataletParams ={
825 328 component : this.selectedDatalet+"-datalet",
826 329 params : this.params,
827   - fields : selectedFields,
  330 + fields : this.selectedFields,
828 331 placeHolder : this.$.datalet_selection_datalet_placeholder
829 332 };
830 333  
... ... @@ -835,53 +338,29 @@
835 338 },
836 339  
837 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 341 var data = {
847 342 dataUrl : this.dataUrl,
848 343 params : this.params,
849   - fields : selectedFields,
  344 + fields : this.selectedFields,
850 345 datalet : this.selectedDatalet+"-datalet",
851   -// comment : "",//DEPRECATED!!!
852 346 staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
853 347 }
854 348  
855 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 366 _copy : function(o) {
... ... @@ -894,32 +373,14 @@
894 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 376 _resize : function(){
913 377 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
914 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 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 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 62 * @method transformData
63 63 */
64 64 presentData: function(){
65   - $(this._component.$.charts.$.container).highcharts({
  65 + options = {
66 66 chart: {
67 67 type: 'area',
68 68 zoomType: 'xy'
... ... @@ -91,7 +91,16 @@ Example:
91 91 },
92 92 plotOptions: {
93 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 106 legend: {
... ... @@ -99,17 +108,22 @@ Example:
99 108 align: 'right',
100 109 verticalAlign: 'top',
101 110 x: -40,
102   - y: 100,
  111 + y: 80,
103 112 floating: true,
104 113 borderWidth: 1,
105   - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
  114 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
106 115 shadow: true
107 116 },
108 117 credits: {
109 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 164 suffix : {
151 165 type : String,
152 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 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 62 * @method transformData
63 63 */
64 64 presentData: function(){
65   -
66   - $(this._component.$.charts.$.container).highcharts({
  65 + options = {
67 66 chart: {
68 67 type: 'bar',
69 68 zoomType: 'xy'
... ... @@ -102,18 +101,22 @@ Example:
102 101 align: 'right',
103 102 verticalAlign: 'top',
104 103 x: -40,
105   - y: 100,
  104 + y: 80,
106 105 floating: true,
107 106 borderWidth: 1,
108   - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
  107 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
109 108 shadow: true
110 109 },
111 110 credits: {
112 111 enabled: false
113 112 },
114 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 124 is: 'barchart-datalet',
122 125  
123 126 properties: {
124   - /**
125   - * It's the label for X axis
126   - *
127   - * @attribute xAxisLabel
128   - * @type String
129   - * @default ''
130   - */
131 127 xAxisLabel: {
132 128 type: String,
133 129 value: ""
134 130 },
135   - /**
136   - * It's the label for Y axis
137   - *
138   - * @attribute yAxisLabel
139   - * @type String
140   - * @default ''
141   - */
142 131 yAxisLabel: {
143 132 type: String,
144 133 value: ""
145 134 },
146   - /**
147   - * It's the values suffix
148   - *
149   - * @attribute suffix
150   - * @type Strig
151   - * @default 'units'
152   - */
153 135 suffix : {
154 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 143 behavior : {
165 144 type : Object,
166 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 48 @group datalets
49 49 -->
50 50  
51   -<dom-module name="bar-chart-datalet">
  51 +<dom-module name="barchart_stacked-datalet">
52 52 <template>
53 53 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
54 54 </template>
55 55 <script>
56 56  
57   - var Bar_chartBehavior = {
  57 + var BarchartStackedBehavior = {
58 58  
59 59 /**
60 60 * Bluid Highchart object
... ... @@ -62,94 +62,51 @@ Example:
62 62 * @method transformData
63 63 */
64 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 66 chart: {
75 67 type: 'bar',
76   - zoomType: 'xy'
  68 + zoomType: 'xy',
77 69 },
78 70 title: {
79 71 text: this._component.title
80 72 },
81 73 xAxis: {
82 74 categories: this.properties.categories.value,
83   -// categories: ['Cinesi', 'Albanesi', 'Rumeni', 'Pakistani', 'Marocchini', 'Altri stranieri'],
84 75 title: {
85   - text: this._component.xAxisLabel
  76 + text: this._component.yAxisLabel
86 77 }
87 78 },
88 79 yAxis: {
89 80 min: 0,
90 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 85 tooltip: {
99 86 valueSuffix: ' ' + this._component.suffix
100 87 },
101 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 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 111 properties: {
155 112 /**
... ... @@ -183,7 +140,17 @@ Example:
183 140 */
184 141 suffix : {
185 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 156 * It's the component behavior
... ... @@ -206,7 +173,7 @@ Example:
206 173 * @method ready
207 174 */
208 175 ready: function(){
209   - this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bar_chartBehavior);
  176 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartStackedBehavior);
210 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 101 for (var i=0; i < this._component.fields.length; i++)
102 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 104 //jsdatachecker
111 105 var _converter = new DataTypeConverter();
112 106 var path2 = this._arrayPath(provider);
... ... @@ -155,65 +149,46 @@ var AjaxJsonAlasqlBehavior = {
155 149 pureSelect = pureSelect.slice(0, -2);
156 150  
157 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 152 var groupBy = "";
  153 + var select = "";
181 154 if(aggregators && aggregators.length) {
182 155  
183 156 for (var i=0; i < aggregators.length; i++)
184 157 aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], "");
185 158  
186 159 groupBy = "GROUP BY " + aggregators[0]["field"];
187   - var select = "SELECT " + aggregators[0]["field"];
  160 + select = "SELECT " + aggregators[0]["field"];
188 161 for (var i = 1; i < aggregators.length; i++)
189 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 172 //QUERY
193 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 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 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 192 //PUSH DATA
218 193 if(!obj || obj.length == 0)
219 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 301 \ No newline at end of file
... ...
datalets/base-datalet/base-datalet.html
  View file @fb05b40
... ... @@ -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 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 192 hideFooter: function() {
204 193 this.$.base_datalet_container.innerHTML = "";
... ...
datalets/base-datalet/static/js/BaseDataletBehavior.js
  View file @fb05b40
... ... @@ -67,19 +67,27 @@ var BaseDataletBehavior ={
67 67 data: {
68 68 type: Array,
69 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 94 \ No newline at end of file
... ...
datalets/columnchart-datalet/columnchart-datalet.html
  View file @fb05b40
... ... @@ -63,7 +63,7 @@ Example:
63 63 * @method transformData
64 64 */
65 65 presentData: function(){
66   - $(this._component.$.charts.$.container).highcharts({
  66 + options = {
67 67 chart: {
68 68 type: 'column',
69 69 zoomType: 'xy',
... ... @@ -75,7 +75,8 @@ Example:
75 75 categories: this.properties.categories.value,
76 76 title: {
77 77 text: this._component.xAxisLabel
78   - }
  78 + },
  79 +// crosshair: true
79 80 },
80 81 yAxis: {
81 82 min: 0,
... ... @@ -87,11 +88,25 @@ Example:
87 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 105 tooltip: {
91 106 valueSuffix: ' ' + this._component.suffix
92 107 },
93 108 plotOptions: {
94   - bar: {
  109 + column: {
95 110 dataLabels: {
96 111 enabled: true
97 112 }
... ... @@ -102,21 +117,25 @@ Example:
102 117 align: 'right',
103 118 verticalAlign: 'top',
104 119 x: -40,
105   - y: 100,
  120 + y: 80,
106 121 floating: true,
107 122 borderWidth: 1,
108   - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
  123 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
109 124 shadow: true
110 125 },
111 126 credits: {
112 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 139 LinechartDatalet = Polymer({
121 140 is: 'columnchart-datalet',
122 141  
... ... @@ -152,7 +171,12 @@ Example:
152 171 */
153 172 suffix : {
154 173 type : String,
155   - value : "units"
  174 + value : ""
  175 + },
  176 +
  177 + theme : {
  178 + type : String,
  179 + value : ""
156 180 },
157 181 /**
158 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 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 114 :host ::content .children:hover rect.child {
115 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 125 </style>
118 126 <div id="treemap_placeholder">
119 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 140 .attr("onmousemove", function(d) {
141 141 //var data = ["lvl", "name", "color", "description", "logoUrl", "datasets", "datasetUrl"];
142 142 var data = ["", d.name, d.color, "", "", d.value, ""];
143   - console.log(d);
  143 + //console.log(d);
144 144 data[2] = ["#000000"];
145 145 var id = (d.name) ? d.name.split(':')[1] : undefined;
146 146 if (d.depth == 1) {
... ... @@ -170,6 +170,14 @@ function build2(root, meta, place_holder, select_listener, width, height) {
170 170 .attr("dy", ".75em")
171 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 181 function transition(d) {
174 182 if (transitioning || !d) return;
175 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 30 -->
31 31  
32 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 63 * @method presentData
67 64 */
68 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 77 chart: {
81 78 type: 'heatmap',
82 79 marginTop: 40,
83   - marginBottom: 80,
  80 +// marginBottom: 80,
84 81 plotBorderWidth: 1
85 82 },
86 83  
87 84 title: {
88   - text: this._component.Title
  85 + text: this._component.title
89 86 },
90 87  
91 88 xAxis: {
92   - categories: this.properties.categories.value,
  89 + categories: Xcategories,
93 90 title: {
94 91 text: this._component.xAxisLabel
95 92 }
96 93 },
97 94  
98 95 yAxis: {
99   - categories: campi,
100   - //categories: this.properties.categories.value,
  96 + categories: Ycategories,
101 97 title: {
102 98 text: this._component.yAxisLabel
103 99 }
... ... @@ -117,33 +113,27 @@ Example:
117 113 y: 25,
118 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 120 credits: {
135 121 enabled: false
136 122 },
137 123 series: [{
138   - //name: 'Popolazione',
139 124 borderWidth: 1,
140   - data: serie,
  125 + data: series,
141 126 dataLabels: {
142 127 enabled: true,
143 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 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 168 * It's the values suffix
190 169 *
191 170 * @attribute suffix
... ... @@ -196,6 +175,10 @@ Example:
196 175 type : String,
197 176 value : ""
198 177 },
  178 + theme : {
  179 + type : String,
  180 + value : ""
  181 + },
199 182 /**
200 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 57 \ No newline at end of file
... ...
datalets/highcharts-datalet/highcharts-datalet.html
  View file @fb05b40
... ... @@ -62,7 +62,7 @@ Example :
62 62  
63 63 <script src="static/js/highcharts.js"></script>
64 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 67 <script>
68 68 var HighchartsBehavior = {
... ... @@ -79,35 +79,35 @@ Example :
79 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 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 112 * Populate the categories and the series array.
113 113 *
... ... @@ -115,45 +115,89 @@ Example :
115 115 *
116 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 11 * Dark theme for Highcharts JS
3 12 * @author Torstein Honsi
... ... @@ -221,12 +230,11 @@ Highcharts.createElement(&#39;link&#39;, {
221 230 type: 'text/css'
222 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 239 Highcharts.themeSandSignika = {
232 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 62 * @method presentData
63 63 */
64 64 presentData: function(){
65   -
66   - $(this._component.$.charts.$.container).highcharts({
67   - title: {
68   - text: "" + this._component.title
69   - },
  65 + options = {
70 66 chart: {
71 67 zoomType: 'xy'
72 68 },
  69 + title: {
  70 + text: this._component.title
  71 + },
73 72 xAxis: {
74 73 categories: this.properties.categories.value,//this._component.categories,
75 74 title: {
... ... @@ -77,14 +76,14 @@ Example:
77 76 }
78 77 },
79 78 yAxis: {
  79 + min: 0,
80 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 88 tooltip: {
90 89 valueSuffix: ' ' + this._component.suffix
... ... @@ -94,17 +93,22 @@ Example:
94 93 align: 'right',
95 94 verticalAlign: 'top',
96 95 x: -40,
97   - y: 100,
  96 + y: 80,
98 97 floating: true,
99 98 borderWidth: 1,
100   - backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
  99 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
101 100 shadow: true
102 101 },
103 102 credits: {
104 103 enabled: false
105 104 },
106 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 150 type : String,
147 151 value : "units"
148 152 },
  153 + theme : {
  154 + type : String,
  155 + value : ""
  156 + },
149 157 /**
150 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 31 <link rel="import" href="../../bower_components/polymer/polymer.html">
32 32 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
33 33  
34   -
35 34 <!--
36 35 `piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/>
37 36  
... ... @@ -60,49 +59,65 @@ Example:
60 59 * @method presentData
61 60 */
62 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 87 chart: {
75   - plotBackgroundColor: null,
76   - plotBorderWidth: null,
77   - plotShadow: false,
78   - type: 'pie'
  88 + type: 'pie',
  89 + zoomType: 'xy',
79 90 },
80 91 title: {
81   - text: "" + this._component.title
  92 + text: this._component.title
  93 + },
  94 + tooltip: {
  95 + valueSuffix: ' ' + this._component.suffix
82 96 },
83 97 plotOptions: {
84 98 pie: {
  99 + innerSize: innerSize,
85 100 allowPointSelect: true,
86 101 cursor: 'pointer',
87 102 dataLabels: {
88 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 111 credits: {
102 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 126 is: 'piechart-datalet',
112 127  
113 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 141 behavior : {
122 142 type : Object,
123 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 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 105 ln["slide1Title_it"] = "SELEZIONA IL DATASET";
5 106 ln["slide1Subtitle_it"] = "Ricerca o copia e incolla la url del dataset.";
6 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 211 ln["LongitudeDescription_it"] = "Longitudine del punto da riportare sulla mappa.";
111 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 216 ln["slide1Title_fr"] = "SELECTIONNER UN JEU DE DONNEES";
228 217 ln["slide1Subtitle_fr"] = "Rechercher ou copier/coller l’url du jeu de données.";
229 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 322 ln["LongitudeDescription_fr"] = "Longitude des points que vous souhaitez montrer sur la carte.";
334 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 327 ln["slide1Title_nl"] = "SELECTEER DATASET";
338 328 ln["slide1Subtitle_nl"] = "Zoek of kopieer en plak de url van de dataset.";
339 329 ln["slide2Title_nl"] = "SELECTEER DATA";
... ...