WebCompDev / COMPONENTS

Commit 98d9d8a5a0757ad10fbd972befbc0c02bb476779

Authored by Renato De Donato
1 parent 052ca020
master ... v1.6 v1.4 v1.2

filters+groupby

Inline Side-by-side
Showing 23 changed files with 1566 additions and 281 deletions
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @98d9d8a
@@ -48,7 +48,6 @@ @@ -48,7 +48,6 @@
48 position: relative; 48 position: relative;
49 height: 100vh; 49 height: 100vh;
50 margin-left: 32px; 50 margin-left: 32px;
51 - /*width: 344px;*/  
52 min-width: 258px; 51 min-width: 258px;
53 } 52 }
54 53
@@ -56,7 +55,6 @@ @@ -56,7 +55,6 @@
56 position: relative; 55 position: relative;
57 height: 100vh; 56 height: 100vh;
58 margin-left: 32px; 57 margin-left: 32px;
59 - /*width: 344px;*/  
60 min-width: 258px; 58 min-width: 258px;
61 } 59 }
62 60
@@ -70,15 +68,6 @@ @@ -70,15 +68,6 @@
70 position: relative; 68 position: relative;
71 height: 100vh; 69 height: 100vh;
72 width: 100%; 70 width: 100%;
73 - /*margin-left: 32px;*/  
74 - /*margin-top: 32px;*/  
75 - /*margin-bottom: 32px;*/  
76 - }  
77 -  
78 - #datalet_selection_comment{  
79 - width: 100%;  
80 - /*height: 112px;*/  
81 - margin-bottom: 32px;  
82 } 71 }
83 72
84 #datalet_selection_datalet_placeholder { 73 #datalet_selection_datalet_placeholder {
@@ -87,31 +76,44 @@ @@ -87,31 +76,44 @@
87 76
88 .inputs{ 77 .inputs{
89 position: relative; 78 position: relative;
90 - /*margin-left: 16px;*/  
91 - /*margin-right: 16px;*/  
92 } 79 }
93 80
94 - /*.input_name{*/  
95 - /*height: 16px;*/  
96 - /*padding: 16px;*/  
97 - /*/!*background-color: #B6B6B6;*!/*/ 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 + }
98 92
99 - /*background-color: #2196F3;*/  
100 - /*color: #FFFFFF;*/  
101 - /*font-weight: 700;*/  
102 - /*}*/ 93 + #expert_header {
  94 + display: none;
103 95
104 - .input_header{  
105 height: 32px; 96 height: 32px;
106 padding-top: 16px; 97 padding-top: 16px;
107 - /*padding: 16px;*/  
108 - background-color: #B6B6B6; 98 + margin-top: 8px;
109 text-align: center; 99 text-align: center;
110 font-weight: 700; 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;
111 } 114 }
112 115
113 .info_button { 116 .info_button {
114 - /*background-color: red;*/  
115 position: absolute; 117 position: absolute;
116 top: 18px; 118 top: 18px;
117 right: 0px; 119 right: 0px;
@@ -132,24 +134,15 @@ @@ -132,24 +134,15 @@
132 } 134 }
133 135
134 paper-textarea { 136 paper-textarea {
135 - /*height: 48px;*/  
136 - /*padding: 0px 8px;*/  
137 width: 242px; 137 width: 242px;
138 padding-left: 8px; 138 padding-left: 8px;
139 padding-bottom: 4px; 139 padding-bottom: 4px;
140 --paper-input-container-focus-color: #2196F3; 140 --paper-input-container-focus-color: #2196F3;
141 } 141 }
142 142
143 - #datalet_selection_comment paper-input {  
144 - padding-bottom: 0px;  
145 - width: calc(100% - 16px);  
146 - }  
147 -  
148 paper-dropdown-menu { 143 paper-dropdown-menu {
149 - /*display: inline-block;*/  
150 height: 48px; 144 height: 48px;
151 width: 210px;; 145 width: 210px;;
152 - /*padding: 0px 8px;*/  
153 padding-left: 8px; 146 padding-left: 8px;
154 padding-bottom: 8px; 147 padding-bottom: 8px;
155 --paper-input-container-focus-color: #2196F3; 148 --paper-input-container-focus-color: #2196F3;
@@ -161,16 +154,12 @@ @@ -161,16 +154,12 @@
161 } 154 }
162 155
163 paper-icon-button { 156 paper-icon-button {
164 - /*display: inline-block;*/  
165 color: #2196F3; 157 color: #2196F3;
166 - /*color: #FFFFFF;*/  
167 --paper-icon-button-ink-color: #2196F3; 158 --paper-icon-button-ink-color: #2196F3;
168 margin: 0px; 159 margin: 0px;
169 - /*padding: 0px;*/  
170 } 160 }
171 161
172 paper-button { 162 paper-button {
173 - /*display: block;*/  
174 position: absolute; 163 position: absolute;
175 bottom: 16px; 164 bottom: 16px;
176 right: 11px; 165 right: 11px;
@@ -227,6 +216,49 @@ @@ -227,6 +216,49 @@
227 </div> 216 </div>
228 </div> 217 </div>
229 </template> 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="expert">ADVANCED: GROUP BY</span></div>
  223 +
  224 + <div id="expert_container">
  225 +
  226 + <div class="inputs">
  227 + <paper-dropdown-menu id="group_by" label="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="unsort"></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="CALCULATE">
  242 + <paper-menu class="dropdown-content">
  243 + <paper-item on-tap="_addGroupByInput">COUNT of {{_fieldName(item)}}</paper-item>
  244 + <paper-item on-tap="_addGroupByInput">SUM of {{_fieldName(item)}}</paper-item>
  245 + <paper-item on-tap="_addGroupByInput">MIN of {{_fieldName(item)}}</paper-item>
  246 + <paper-item on-tap="_addGroupByInput">MAX of {{_fieldName(item)}}</paper-item>
  247 + <paper-item on-tap="_addGroupByInput">AVG of {{_fieldName(item)}}</paper-item>
  248 + <paper-item on-tap="_addGroupByInput">FIRST of {{_fieldName(item)}}</paper-item>
  249 + <paper-item on-tap="_addGroupByInput">LAST of {{_fieldName(item)}}</paper-item>
  250 + </paper-menu>
  251 + </paper-dropdown-menu>
  252 + <div class="info_button">
  253 + <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title="unsort"></paper-icon-button>
  254 + </div>
  255 + </div>
  256 + </template>
  257 +
  258 + </div>
  259 +
  260 + <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
  261 +
230 </paper-material> 262 </paper-material>
231 263
232 <paper-material id="datalet_selection_labels" elevation="5"> 264 <paper-material id="datalet_selection_labels" elevation="5">
@@ -255,13 +287,6 @@ @@ -255,13 +287,6 @@
255 287
256 <div id="datalet_selection_column"> 288 <div id="datalet_selection_column">
257 289
258 - <!--<template is="dom-if" if={{modify}}>-->  
259 - <!--<paper-material id="datalet_selection_comment" elevation="5">-->  
260 - <!--<div class="input_header"><span data-l10n-id="comment"></span></div>-->  
261 - <!--<paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>-->  
262 - <!--</paper-material>-->  
263 - <!--</template>-->  
264 -  
265 <paper-material id="datalet_selection_datalet" elevation="5"> 290 <paper-material id="datalet_selection_datalet" elevation="5">
266 <div class="input_header"><span id="dataletPreview"></span></div> 291 <div class="input_header"><span id="dataletPreview"></span></div>
267 <div id="datalet_selection_datalet_placeholder"></div> 292 <div id="datalet_selection_datalet_placeholder"></div>
@@ -329,6 +354,21 @@ @@ -329,6 +354,21 @@
329 value : [] 354 value : []
330 }, 355 },
331 356
  357 + filters : {
  358 + type : Array,
  359 + value : []
  360 + },
  361 +
  362 + aggregators : {
  363 + type : Array,
  364 + value : []
  365 + },
  366 +
  367 + orders : {
  368 + type : Array,
  369 + value : []
  370 + },
  371 +
332 fields : { 372 fields : {
333 type : Array, 373 type : Array,
334 value : [] 374 value : []
@@ -339,6 +379,11 @@ @@ -339,6 +379,11 @@
339 value : [] 379 value : []
340 }, 380 },
341 381
  382 + groupedFields : {
  383 + type : Array,
  384 + value : []
  385 + },
  386 +
342 dataletPreset : { 387 dataletPreset : {
343 type : Object, 388 type : Object,
344 value : [] 389 value : []
@@ -359,6 +404,11 @@ @@ -359,6 +404,11 @@
359 value: undefined 404 value: undefined
360 }, 405 },
361 406
  407 + expert : {
  408 + type : Boolean,
  409 + value : false
  410 + },
  411 +
362 modify : { 412 modify : {
363 type : Boolean, 413 type : Boolean,
364 value : false 414 value : false
@@ -372,7 +422,57 @@ @@ -372,7 +422,57 @@
372 'change': '_paramsChanged' 422 'change': '_paramsChanged'
373 }, 423 },
374 424
375 - ready : function() {//console.log(this.dataletPreset); 425 + _showExpertMode : function() {
  426 + if(!this.expert) {
  427 + this.$.expert_header.style.color = "#000000";
  428 + this.$.expert_header.style.background = "#B6B6B6";
  429 + this.$.expert_container.style.display = "block";
  430 + }
  431 + else {
  432 + this.$.expert_header.style.color = "#00BCD4";
  433 + this.$.expert_header.style.background = "#FFFFFF";
  434 + this.$.expert_container.style.display = "none";
  435 + }
  436 +
  437 + this.expert = !this.expert;
  438 + },
  439 +
  440 + _showGroupedFields : function(e) {
  441 + var index = e.target.id;
  442 + var isSelected = false;
  443 + var temp = [];
  444 +
  445 + for (var i = 0; i < this.selectedFields.length; i++) {
  446 + if (this.selectedFields[i]) {
  447 + if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {
  448 + isSelected = true;
  449 + }
  450 + else {
  451 + temp.push(this.selectedFields[i])
  452 + }
  453 + }
  454 + }
  455 +
  456 + if (isSelected)
  457 + this.groupedFields = this._copy(temp);
  458 + else
  459 + this.groupedFields =[];
  460 +
  461 + this.async(function() {
  462 + var ddls = document.getElementsByTagName("paper-dropdown-menu");
  463 + for (var i = 0; i < ddls.length; i++){
  464 + var id = ddls[i].id;
  465 + if(id.indexOf("calculate") > -1) {
  466 + $(ddls[i]).find("paper-menu")[0].select(-1);
  467 + $(ddls[i]).find("paper-menu")[0].select(0);
  468 + }
  469 + }
  470 + }, 0);
  471 +
  472 + this._addGroupByInput();
  473 + },
  474 +
  475 + ready : function() {
376 this._resize(); 476 this._resize();
377 $(this.$.datalet_selection_inputs).perfectScrollbar(); 477 $(this.$.datalet_selection_inputs).perfectScrollbar();
378 $(this.$.datalet_selection_labels).perfectScrollbar(); 478 $(this.$.datalet_selection_labels).perfectScrollbar();
@@ -398,15 +498,26 @@ @@ -398,15 +498,26 @@
398 this._translate(); 498 this._translate();
399 }, 499 },
400 500
  501 + setFilters : function(filters) {
  502 + this.filters = filters;
  503 + },
  504 +
401 setFields : function(fields) { 505 setFields : function(fields) {
402 this.fields = fields; 506 this.fields = fields;
403 }, 507 },
404 508
405 reset : function() { 509 reset : function() {
406 - this.selectedDatalet = undefined; 510 + this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  511 + this.preselectedDatalet = undefined;
  512 + this.type = undefined;
407 this.inputs = []; 513 this.inputs = [];
408 this.labels = []; 514 this.labels = [];
  515 + this.$.expert_header.style.display = "none";
  516 + this.expert = true;
  517 + this._showExpertMode();
  518 + this.loadPreview = false;
409 this.$.datalet_selection_datalet_placeholder.innerHTML = ""; 519 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  520 + this._resetGroupBy();
410 }, 521 },
411 522
412 _translate : function(){ 523 _translate : function(){
@@ -435,11 +546,15 @@ @@ -435,11 +546,15 @@
435 this.type = undefined; 546 this.type = undefined;
436 this.inputs = []; 547 this.inputs = [];
437 this.labels = []; 548 this.labels = [];
  549 + this.$.expert_header.style.display = "none";
  550 + this.expert = true;
  551 + this._showExpertMode();
438 this.loadPreview = false; 552 this.loadPreview = false;
439 } 553 }
440 else{ 554 else{
441 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet"; 555 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
442 this.$.selectedDatalet_request.generateRequest(); 556 this.$.selectedDatalet_request.generateRequest();
  557 + this.$.expert_header.style.display = "block";
443 } 558 }
444 }, 559 },
445 560
@@ -487,7 +602,6 @@ @@ -487,7 +602,6 @@
487 var selection = inputs.selection; 602 var selection = inputs.selection;
488 inputs = []; 603 inputs = [];
489 for (var i in this.fields) 604 for (var i in this.fields)
490 -// for (var i = 0; i < Math.max(this.fields.length, 8); i++)//error  
491 inputs.push({name: name + " " + i, description: description, selection: selection}); 605 inputs.push({name: name + " " + i, description: description, selection: selection});
492 } 606 }
493 607
@@ -499,6 +613,8 @@ @@ -499,6 +613,8 @@
499 this.selectedFields = new Array(inputs.length); 613 this.selectedFields = new Array(inputs.length);
500 },0); 614 },0);
501 615
  616 + this._resetGroupBy();
  617 +
502 this.loadPreview = false; 618 this.loadPreview = false;
503 } 619 }
504 620
@@ -506,6 +622,94 @@ @@ -506,6 +622,94 @@
506 this._loadDatalet(this.selectedFields); 622 this._loadDatalet(this.selectedFields);
507 }, 623 },
508 624
  625 + _resetGroupBy : function(){
  626 + $(this.$.group_by).find("paper-menu")[0].select(-1);
  627 + this.groupedFields = [];
  628 + this.aggregators = [];
  629 + },
  630 +
  631 + _addGroupByInput : function(){
  632 + this.async(function() {//codice reprlicato!
  633 + var selectedFields = this.selectedFields;
  634 +
  635 + var load = true;
  636 +
  637 + if(this.inputs[0].selection == "*"){
  638 + var temp = [];
  639 + for (var i = 0; i < selectedFields.length; i++)
  640 + if(selectedFields[i])
  641 + temp.push(selectedFields[i]);
  642 + selectedFields = temp;
  643 + }
  644 + else {
  645 + for (var i = 0; i < selectedFields.length; i++)
  646 + if (!selectedFields[i]) {
  647 + load = false;
  648 + break;
  649 + }
  650 + }
  651 +
  652 + if(load){
  653 + this.loadPreview = true;
  654 + this._loadDatalet(selectedFields);
  655 + }
  656 + }, 0);
  657 + },
  658 +
  659 + _addOrder : function(e){
  660 + var t = e.target;
  661 + if(t.tagName.indexOf("IRON-ICON") > -1)
  662 + t = $(e.target).parents("paper-icon-button")[0];
  663 +
  664 + var icon = t.getAttribute("icon");
  665 + var name = t.getAttribute("id");
  666 +
  667 + if(name.indexOf("gb") > -1){
  668 + var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;
  669 + if(selectedItem)
  670 + name = selectedItem.textContent.trim();
  671 +// name = "[" + selectedItem.textContent.trim() + "]";
  672 + else
  673 + return;
  674 + }// else {
  675 +// var i = name;
  676 +// var ddl = $("#calculate_"+i);
  677 +//
  678 +// var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();
  679 +// var index = label.split(" ", 2).join(" ").length;
  680 +// var field = label.substring(index+1, label.length);
  681 +// var operation = label.substring(0, label.indexOf(" "));
  682 +// name = operation + "([" + field + "])";
  683 +// }
  684 +
  685 + if(icon.indexOf("unfold-more") > -1){
  686 + t.setAttribute("icon", "expand-less");
  687 + t.setAttribute("title", "sort ascending");
  688 + var orders = this.orders.filter(function (el) { return el.field !== name; });
  689 + orders.push({"field": name, "operation": "ASC"});
  690 + this.orders = this._copy(orders);
  691 + }
  692 + else if(icon.indexOf("expand-less") > -1){
  693 + t.setAttribute("icon", "expand-more");
  694 + t.setAttribute("title", "sort descending");
  695 + var orders = this.orders.filter(function (el) { return el.field !== name; });
  696 + orders.push({"field": name, "operation": "DESC"});
  697 + this.orders = this._copy(orders);
  698 + }
  699 + else if(icon.indexOf("expand-more") > -1){
  700 + t.setAttribute("icon", "unfold-more");
  701 + t.setAttribute("title", "unsort");
  702 + var orders = this.orders.filter(function (el) { return el.field !== name; });
  703 + this.orders = this._copy(orders);
  704 + }
  705 +
  706 + this._addGroupByInput();//no buoono
  707 +// if(load){
  708 +// this.loadPreview = true;
  709 +// this._loadDatalet(selectedFields);
  710 +// }
  711 + },
  712 +
509 _addInput : function(e){ 713 _addInput : function(e){
510 var selectedFields = this._copy(this.selectedFields); 714 var selectedFields = this._copy(this.selectedFields);
511 715
@@ -524,7 +728,7 @@ @@ -524,7 +728,7 @@
524 var temp = []; 728 var temp = [];
525 for (var i = 0; i < selectedFields.length; i++) 729 for (var i = 0; i < selectedFields.length; i++)
526 if(selectedFields[i]) 730 if(selectedFields[i])
527 - temp.push(selectedFields[i]); 731 + temp.push(selectedFields[i]);
528 selectedFields = temp; 732 selectedFields = temp;
529 } 733 }
530 else { 734 else {
@@ -535,11 +739,12 @@ @@ -535,11 +739,12 @@
535 } 739 }
536 } 740 }
537 741
  742 + this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators
  743 +
538 if(load){ 744 if(load){
539 - this.loadPreview = true 745 + this.loadPreview = true;
540 this._loadDatalet(selectedFields); 746 this._loadDatalet(selectedFields);
541 } 747 }
542 -  
543 }, 748 },
544 749
545 _updateParams : function(){ 750 _updateParams : function(){
@@ -554,6 +759,25 @@ @@ -554,6 +759,25 @@
554 759
555 for (var i = 1; i < inputs.length; i++) 760 for (var i = 1; i < inputs.length; i++)
556 this.params[this.labels[i-1].name] = inputs[i].value; 761 this.params[this.labels[i-1].name] = inputs[i].value;
  762 +
  763 + this.aggregators = [];
  764 +
  765 + var ddls = document.getElementsByTagName("paper-dropdown-menu");
  766 + for (var i = 0; i < ddls.length; i++){
  767 + var id = ddls[i].id;
  768 + if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {
  769 + var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
  770 + this.aggregators.push({"field": label, "operation": "GROUP BY"});
  771 + }
  772 + if(id.indexOf("calculate") > -1) {
  773 + var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
  774 +// var field = label.substring(label.lastIndexOf(" ")+1, label.length);
  775 + var index = label.split(" ", 2).join(" ").length;
  776 + var field = label.substring(index+1, label.length);
  777 + var operation = label.substring(0, label.indexOf(" "));
  778 + this.aggregators.push({"field": field, "operation": operation});
  779 + }
  780 + }
557 }, 781 },
558 782
559 _paramsChanged : function(){ 783 _paramsChanged : function(){
@@ -568,6 +792,17 @@ @@ -568,6 +792,17 @@
568 792
569 this._updateParams(); 793 this._updateParams();
570 794
  795 + this.params["filters"] = JSON.stringify(this.filters);
  796 + this.params["aggregators"] = JSON.stringify(this.aggregators);
  797 + this.params["orders"] = JSON.stringify(this.orders);
  798 +
  799 +// this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';
  800 +// this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';
  801 +// this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]';
  802 +
  803 + //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';
  804 + //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]';
  805 +
571 var dataletParams ={ 806 var dataletParams ={
572 component : this.selectedDatalet+"-datalet", 807 component : this.selectedDatalet+"-datalet",
573 params : this.params, 808 params : this.params,
@@ -578,16 +813,6 @@ @@ -578,16 +813,6 @@
578 ComponentService.deep_url = this.deepUrl; 813 ComponentService.deep_url = this.deepUrl;
579 ComponentService.getComponent(dataletParams); 814 ComponentService.getComponent(dataletParams);
580 815
581 -// console.log(this.params);  
582 -  
583 -  
584 -// this.async(function(){  
585 -// if(this.$.datalet_selection_datalet_placeholder.children[1])  
586 -// this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);  
587 -// this.$.add_button.removeAttribute("disabled");  
588 -// }, 300);  
589 -  
590 -// this.async(function(){this.$.add_button.removeAttribute("disabled");}, 300);  
591 this.$.add_button.removeAttribute("disabled"); 816 this.$.add_button.removeAttribute("disabled");
592 }, 817 },
593 818
@@ -600,8 +825,6 @@ @@ -600,8 +825,6 @@
600 if(this.selectedFields[i]) 825 if(this.selectedFields[i])
601 selectedFields.push(this.selectedFields[i]); 826 selectedFields.push(this.selectedFields[i]);
602 827
603 -// console.log(this.params);  
604 -  
605 var data = { 828 var data = {
606 dataUrl : this.dataUrl, 829 dataUrl : this.dataUrl,
607 params : this.params, 830 params : this.params,
@@ -616,7 +839,7 @@ @@ -616,7 +839,7 @@
616 }, 839 },
617 840
618 _showInfo : function(e){ 841 _showInfo : function(e){
619 - var that = this; 842 +// var that = this;
620 var t = e.target; 843 var t = e.target;
621 if(t.tagName.indexOf("IRON-ICON") != -1) 844 if(t.tagName.indexOf("IRON-ICON") != -1)
622 t = $(e.target).parents("paper-icon-button")[0]; 845 t = $(e.target).parents("paper-icon-button")[0];
@@ -628,7 +851,7 @@ @@ -628,7 +851,7 @@
628 if(!dataset) 851 if(!dataset)
629 dataset = $.grep(this.labels, function(e){ return e.name == name; })[0]; 852 dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
630 853
631 - this.$.dialog_name.innerHTML = ln[dataset.name + "_" + ln["localization"]]; 854 + this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);
632 this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]]; 855 this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]];
633 this.$.dialog_info_input.open(); 856 this.$.dialog_info_input.open();
634 857
@@ -638,7 +861,9 @@ @@ -638,7 +861,9 @@
638 }, 861 },
639 862
640 _fieldName : function(field) { 863 _fieldName : function(field) {
641 - return field.substring(field.lastIndexOf(",")+1, field.length);; 864 + if(!field)//when?
  865 + return "";
  866 + return field.substring(field.lastIndexOf(",")+1, field.length);
642 }, 867 },
643 868
644 _copy : function(o) { 869 _copy : function(o) {
@@ -652,6 +877,14 @@ @@ -652,6 +877,14 @@
652 }, 877 },
653 878
654 _getLabelName: function(key) { 879 _getLabelName: function(key) {
  880 + //* exceptions
  881 + if(key.indexOf("Cell") > -1) {
  882 + return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);
  883 + }
  884 + if(key.indexOf("Level") > -1) {
  885 + return ln["Level" + "_" +ln["localization"]] + key.slice(-2);
  886 + }
  887 +
655 return ln[key + "_" +ln["localization"]]; 888 return ln[key + "_" +ln["localization"]];
656 }, 889 },
657 890
@@ -666,7 +899,7 @@ @@ -666,7 +899,7 @@
666 // if(this.modify) 899 // if(this.modify)
667 // $("#datalet_selection_datalet").height(h-128); 900 // $("#datalet_selection_datalet").height(h-128);
668 // else 901 // else
669 - $("#datalet_selection_datalet").height(h); 902 + $("#datalet_selection_datalet").height(h);
670 } 903 }
671 904
672 }); 905 });
controllets/datalet-selection-controllet/demo/index.html
  View file @98d9d8a
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> 8 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
9 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> 9 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
10 10
11 - <script src="../../../locales/lnHashMap.js"></script> 11 + <script src="../../../locales/controllet_ln.js"></script>
12 <script> 12 <script>
13 ln["localization"] = "en"; 13 ln["localization"] = "en";
14 </script> 14 </script>
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 18
19 <body> 19 <body>
20 20
21 -<datalet-selection-controllet deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list" fields='["result,records,Lat","result,records,Lng"]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"></datalet-selection-controllet> 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 22
23 </body> 23 </body>
24 24
controllets/filters-controllet/filters-controllet.html
  View file @98d9d8a
@@ -168,7 +168,7 @@ @@ -168,7 +168,7 @@
168 168
169 operations : { 169 operations : {
170 type : Array, 170 type : Array,
171 - value : ["=", "!=", ">", ">=", "<", "<=", "like"] 171 + value : ["=", "!=", ">", ">=", "<", "<=", "contains", "start", "ends"]
172 }, 172 },
173 173
174 filters : { 174 filters : {
@@ -187,6 +187,10 @@ @@ -187,6 +187,10 @@
187 $(this.$.filters_panel).perfectScrollbar(); 187 $(this.$.filters_panel).perfectScrollbar();
188 }, 188 },
189 189
  190 + attached : function() {
  191 +// this.fire('filters-controllet_filters', {filters: this.filters});
  192 + },
  193 +
190 setFields : function(fields) { 194 setFields : function(fields) {
191 this.fields = this._copy(fields); 195 this.fields = this._copy(fields);
192 }, 196 },
@@ -215,13 +219,16 @@ @@ -215,13 +219,16 @@
215 }, 219 },
216 220
217 _addFilter : function() { 221 _addFilter : function() {
  222 +// var field = "["+this.$.filter_field.value+"]";
218 var field = this.$.filter_field.value; 223 var field = this.$.filter_field.value;
219 var operation = this.$.filter_operation.value; 224 var operation = this.$.filter_operation.value;
220 var value = this.$.filter_value.value; 225 var value = this.$.filter_value.value;
221 226
222 var filters = this.filters; 227 var filters = this.filters;
223 - filters.push({field: field, operation: operation, value: value}); 228 + filters.push({"field": field, "operation": operation, "value": value});
224 this.filters = this._copy(filters); 229 this.filters = this._copy(filters);
  230 +
  231 + this.fire('filters-controllet_filters', {filters: this.filters});
225 }, 232 },
226 233
227 _deleteFilter : function(e) { 234 _deleteFilter : function(e) {
@@ -230,6 +237,8 @@ @@ -230,6 +237,8 @@
230 var filters = this.filters; 237 var filters = this.filters;
231 filters.splice(index, 1); 238 filters.splice(index, 1);
232 this.filters = this._copy(filters); 239 this.filters = this._copy(filters);
  240 +
  241 + this.fire('filters-controllet_filters', {filters: this.filters});
233 }, 242 },
234 243
235 _copy : function(o) { 244 _copy : function(o) {
controllets/multi-table-controllet/demo/index.html
  View file @98d9d8a
@@ -5,12 +5,30 @@ @@ -5,12 +5,30 @@
5 5
6 <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 6 <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
7 7
  8 + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  9 + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  10 +
8 <link rel="import" href="../multi-table-controllet.html" /> 11 <link rel="import" href="../multi-table-controllet.html" />
9 </head> 12 </head>
10 13
11 <body> 14 <body>
12 15
13 - <multi-table-controllet id="multi" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"></multi-table-controllet> 16 + <style>
  17 +
  18 + .container {
  19 + height: 400px;
  20 + width: 50%;
  21 + /*width: 400px;*/
  22 + position: relative;
  23 + top: 100px;
  24 + left:25%;
  25 + }
  26 +
  27 + </style>
  28 +
  29 + <div class="container">
  30 + <multi-table-controllet id="multi" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"></multi-table-controllet>
  31 + </div>
14 32
15 <script> 33 <script>
16 34
controllets/multi-table-controllet/multi-table-controllet.html
  View file @98d9d8a
@@ -14,14 +14,15 @@ @@ -14,14 +14,15 @@
14 <template> 14 <template>
15 15
16 <style is="custom-style"> 16 <style is="custom-style">
17 - paper-tabs{ 17 +
  18 + paper-tabs {
18 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 19 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
19 font-size: 16px; 20 font-size: 16px;
20 font-weight: bold; 21 font-weight: bold;
21 --paper-tabs-selection-bar-color: #2196F3; 22 --paper-tabs-selection-bar-color: #2196F3;
22 } 23 }
23 24
24 - paper-tab{ 25 + paper-tab {
25 transition: all 1.0s; 26 transition: all 1.0s;
26 } 27 }
27 28
@@ -29,25 +30,44 @@ @@ -29,25 +30,44 @@
29 background-color: #B6B6B6; 30 background-color: #B6B6B6;
30 } 31 }
31 32
32 - paper-tab:hover{ 33 + paper-tab:hover {
33 color: #2196F3; 34 color: #2196F3;
34 } 35 }
  36 +
  37 + #multi_table_container {
  38 + height: 100%;
  39 + width: 100%;
  40 +
  41 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  42 + font-size: 16px;
  43 + }
  44 +
  45 + #multi_table_tables {
  46 + position: relative;
  47 + height: calc(100% - 48px);
  48 + }
  49 +
35 </style> 50 </style>
36 51
37 - <paper-tabs selected="{{selected}}">  
38 - <template id="dom-tabs" is="dom-repeat" items="{{_toArrayTabs(selectedFields)}}">  
39 - <paper-tab noink>{{item.name}}</paper-tab>  
40 - </template>  
41 - </paper-tabs> 52 + <div id="multi_table_container">
42 53
43 - <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">  
44 - <template id="dom-pages" is="dom-repeat" items="{{_toArrayPages(selectedFields)}}">  
45 - <neon-animatable>  
46 - <dynamic-datatable-datalet id="{{item.name}}" data-url={{dataUrl}} fields$='{{_getFields(item.value)}}'></dynamic-datatable-datalet>  
47 - </neon-animatable>  
48 - </template> 54 + <paper-tabs selected="{{selected}}">
  55 + <template id="dom-tabs" is="dom-repeat" items="{{_toArrayTabs(selectedFields)}}">
  56 + <paper-tab noink>{{item.name}}</paper-tab>
  57 + </template>
  58 + </paper-tabs>
49 59
50 - </neon-animated-pages> 60 + <div id="multi_table_tables">
  61 + <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  62 + <template id="dom_pages" is="dom-repeat" items="{{_toArrayPages(selectedFields)}}">
  63 + <neon-animatable>
  64 + <dynamic-datatable-datalet id="{{item.name}}" data-url={{dataUrl}} fields$='{{_getFields(item.value)}}' filters$='{{_getFilters(item.value)}}'></dynamic-datatable-datalet>
  65 + </neon-animatable>
  66 + </template>
  67 + </neon-animated-pages>
  68 + </div>
  69 +
  70 + </div>
51 71
52 </template> 72 </template>
53 73
@@ -85,6 +105,10 @@ @@ -85,6 +105,10 @@
85 'dom-change': '_onDomChange' 105 'dom-change': '_onDomChange'
86 }, 106 },
87 107
  108 + ready : function() {
  109 + $(this.$.multi_table_tables).perfectScrollbar();
  110 + },
  111 +
88 setSelectedFields : function(selectedFields) { 112 setSelectedFields : function(selectedFields) {
89 this.toSelect = this._calculateSelected(this.selectedFields, selectedFields); 113 this.toSelect = this._calculateSelected(this.selectedFields, selectedFields);
90 this.selectedFields = this._copy(selectedFields); 114 this.selectedFields = this._copy(selectedFields);
@@ -141,24 +165,28 @@ @@ -141,24 +165,28 @@
141 }, 165 },
142 166
143 _onDomChange : function(e) { 167 _onDomChange : function(e) {
144 - if (e.target.id == "dom-pages") 168 + if (e.target.id == "dom_pages")
145 this.async(function () {this.selected = this.toSelect;}, 0); 169 this.async(function () {this.selected = this.toSelect;}, 0);
146 }, 170 },
147 171
148 - _toArrayTabs: function(obj) { 172 + _toArrayTabs : function(obj) {
149 return Object.keys(obj).map(function(key) { 173 return Object.keys(obj).map(function(key) {
150 return {name: key.replace(/,/g, " / "), value: obj[key]}; 174 return {name: key.replace(/,/g, " / "), value: obj[key]};
151 }); 175 });
152 }, 176 },
153 177
154 - _toArrayPages: function(obj) { 178 + _toArrayPages : function(obj) {
155 return Object.keys(obj).map(function(key) { 179 return Object.keys(obj).map(function(key) {
156 return {name: key, value: obj[key]}; 180 return {name: key, value: obj[key]};
157 }); 181 });
158 }, 182 },
159 183
160 - _getFields: function(value) { 184 + _getFields : function(value) {
161 return value; 185 return value;
  186 + },
  187 +
  188 + _getFilters : function(value) {
  189 + return JSON.stringify(this.filters);
162 } 190 }
163 191
164 }); 192 });
controllets/select-data-controllet/select-data-controllet.html
  View file @98d9d8a
@@ -83,19 +83,33 @@ @@ -83,19 +83,33 @@
83 type : String, 83 type : String,
84 value : undefined, 84 value : undefined,
85 observer : '_init' 85 observer : '_init'
86 - } 86 + },
  87 +
  88 + filters : {
  89 + type : Array,
  90 + value : undefined
  91 + },
87 92
88 }, 93 },
89 94
90 listeners: { 95 listeners: {
91 - 'tree-view-controllet_selected-fields': '_updateSelectedFields' 96 + 'tree-view-controllet_selected-fields': '_updateSelectedFields',
  97 + 'filters-controllet_filters': '_updateFilters'
92 }, 98 },
93 99
94 ready : function() { 100 ready : function() {
95 -// if(this.dataUrl)  
96 -// this._init();  
97 -  
98 $(this.$.material_tree_view).perfectScrollbar(); 101 $(this.$.material_tree_view).perfectScrollbar();
  102 +
  103 + if(this.filters == undefined){
  104 + if(this.dataletPreset["filters"] != undefined)
  105 + this.filters = JSON.parse(this.dataletPreset["filters"]);
  106 + else
  107 + this.filters = [];
  108 + }
  109 +
  110 + this.$.filters.filters = this.filters;
  111 + this.$.multi_table.filters = this.filters;
  112 + this._refreshTables();
99 }, 113 },
100 114
101 attached : function(){ 115 attached : function(){
@@ -104,6 +118,10 @@ @@ -104,6 +118,10 @@
104 window.addEventListener("resize", function() { that._resize(); }); 118 window.addEventListener("resize", function() { that._resize(); });
105 }, 119 },
106 120
  121 + getFilters : function() {
  122 + return this.$.filters.getFilters();
  123 + },
  124 +
107 getFields : function() { 125 getFields : function() {
108 return this.$.tree_view.getFields(); 126 return this.$.tree_view.getFields();
109 }, 127 },
@@ -113,19 +131,20 @@ @@ -113,19 +131,20 @@
113 }, 131 },
114 132
115 _init : function() { 133 _init : function() {
116 - var tree = document.getElementById('tree_view');  
117 var that = this; 134 var that = this;
118 135
119 $.ajax({ 136 $.ajax({
120 url: this.dataUrl, 137 url: this.dataUrl,
121 dataType: "json", 138 dataType: "json",
122 success: function(data){ 139 success: function(data){
123 - that.rootName = "data"  
124 - data = that._filterJson(data);  
125 - tree.setAttribute("json-data", JSON.stringify(data));  
126 - tree.selectedFields = []; 140 + that.rootName = "data";
  141 + var data = that._filterJson(data);
  142 + that.$.tree_view.setAttribute("json-data", JSON.stringify(data));
  143 + that.$.tree_view.selectedFields = [];
127 that._updateSelectedFields(); 144 that._updateSelectedFields();
128 - tree.ready(); 145 + that.$.tree_view.ready();
  146 + that.$.filters.filters = [];
  147 + that.$.multi_table.filters = [];
129 } 148 }
130 }); 149 });
131 150
@@ -133,8 +152,6 @@ @@ -133,8 +152,6 @@
133 }, 152 },
134 153
135 _filterJson : function(data){ 154 _filterJson : function(data){
136 -// console.log(data);  
137 -// console.log(this.dataUrl);  
138 if(data.result != undefined && data.result.resource_id != undefined) { 155 if(data.result != undefined && data.result.resource_id != undefined) {
139 this.rootName = "result,records" 156 this.rootName = "result,records"
140 return data.result.records; 157 return data.result.records;
@@ -150,6 +167,20 @@ @@ -150,6 +167,20 @@
150 this.$.filters.setFields(flatFields); 167 this.$.filters.setFields(flatFields);
151 }, 168 },
152 169
  170 + _updateFilters : function(e) {
  171 + this.filters = e.detail.filters;
  172 + this.$.multi_table.filters = e.detail.filters;
  173 + this._refreshTables();
  174 + },
  175 +
  176 + _refreshTables : function() {
  177 + this.$.multi_table.setSelectedFields([]);
  178 + this.async(function () {
  179 + var fields = this.$.tree_view.getFields();
  180 + this.$.multi_table.setSelectedFields(fields);
  181 + }, 0);
  182 + },
  183 +
153 _resize : function(){ 184 _resize : function(){
154 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; 185 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
155 h = h - 64; //height with page scroller 186 h = h - 64; //height with page scroller
controllets/tree-view-controllet/demo/index.html
  View file @98d9d8a
@@ -27,7 +27,8 @@ @@ -27,7 +27,8 @@
27 27
28 <div id="tree_container"> 28 <div id="tree_container">
29 29
30 - <tree-view-controllet id="tree" root-name="data" opened-path="records,geometry" preselected-fields='["records,datasetid", "records,recordid", "nhits"]'></tree-view-controllet> 30 + <!--<tree-view-controllet id="tree" root-name="data" opened-path="records,geometry" preselected-fields='["records,datasetid", "records,recordid", "nhits"]'></tree-view-controllet>-->
  31 + <tree-view-controllet id="tree" root-name="create-datalet-controllet"></tree-view-controllet>
31 32
32 </div> 33 </div>
33 34
@@ -38,24 +39,31 @@ @@ -38,24 +39,31 @@
38 39
39 </div> 40 </div>
40 41
  42 +
41 <script> 43 <script>
  44 +
  45 + var json = {"select-dataset-controllet": "s", "select-data-controllet": {"tree-view-controllet": "", "multi-table-controllet": "", "filters-controllet": ""}, "select-visualization-controllet": {"items-vslider-controllet": ""}};
42 var tree = document.getElementById('tree'); 46 var tree = document.getElementById('tree');
43 - var fields = document.getElementById('fields'); 47 + tree.setAttribute("json-data", JSON.stringify(json));
  48 + tree.ready();
44 49
45 - $.ajax({  
46 - url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',  
47 - dataType: "json",  
48 - success: function(data){  
49 - tree.setAttribute("json-data", JSON.stringify(data));  
50 - tree.ready();//chrome  
51 - }  
52 - });  
53 -  
54 - tree.addEventListener("tree-view-controllet_selected-fields", function (e) {  
55 - fields.innerHTML = e.detail.fields;  
56 -// console.log(tree.getFlatFields());  
57 -// console.log(tree.getFields());//firefox console.log does not recognize associative array?  
58 - }); 50 +// var tree = document.getElementById('tree');
  51 + var fields = document.getElementById('fields');
  52 +//
  53 +// $.ajax({
  54 +// url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab',
  55 +// dataType: "json",
  56 +// success: function(data){
  57 +// tree.setAttribute("json-data", JSON.stringify(data));
  58 +// tree.ready();//chrome
  59 +// }
  60 +// });
  61 +//
  62 +// tree.addEventListener("tree-view-controllet_selected-fields", function (e) {
  63 +// fields.innerHTML = e.detail.fields;
  64 +//// console.log(tree.getFlatFields());
  65 +//// console.log(tree.getFields());//firefox console.log does not recognize associative array?
  66 +// });
59 67
60 </script> 68 </script>
61 69
datalets/bar-chart-datalet/bar-chart-datalet.html 0 โ†’ 100755
  View file @98d9d8a
  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 +`barchart-datalet` is a barchart datalet based on highcharts project http://www.highcharts.com/
  37 +
  38 +Example:
  39 +
  40 + <barchart-datalet
  41 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  42 + fields='["field1","field2"]'>
  43 + </barchart-datalet>
  44 +
  45 +@element barchart-datalet
  46 +@status v0.1
  47 +@demo demo/index.html
  48 +@group datalets
  49 +-->
  50 +
  51 +<dom-module name="bar-chart-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 Bar_chartBehavior = {
  58 +
  59 + /**
  60 + * Bluid Highchart object
  61 + *
  62 + * @method transformData
  63 + */
  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({
  74 + chart: {
  75 + type: 'bar',
  76 + zoomType: 'xy'
  77 + },
  78 + title: {
  79 + text: this._component.title
  80 + },
  81 + xAxis: {
  82 +// categories: this.properties.categories.value,
  83 + categories: ['Cinesi', 'Albanesi', 'Rumeni', 'Pakistani', 'Marocchini', 'Altri stranieri'],
  84 + title: {
  85 + text: this._component.xAxisLabel
  86 + }
  87 + },
  88 + yAxis: {
  89 + min: 0,
  90 + title: {
  91 + text: this._component.yAxisLabel,
  92 + align: 'high'
  93 + },
  94 + labels: {
  95 + overflow: 'justify'
  96 + }
  97 + },
  98 + tooltip: {
  99 + valueSuffix: ' ' + this._component.suffix
  100 + },
  101 + plotOptions: {
  102 + bar: {
  103 + dataLabels: {
  104 + enabled: true
  105 + }
  106 + }
  107 + },
  108 + legend: {
  109 + layout: 'vertical',
  110 + align: 'right',
  111 + verticalAlign: 'top',
  112 + x: -40,
  113 + y: 40,
  114 + floating: true,
  115 + borderWidth: 1,
  116 + backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
  117 + shadow: true
  118 + },
  119 + credits: {
  120 + enabled: false
  121 + },
  122 +// series: this.properties.series.value
  123 + series: [{
  124 + name: '2010',
  125 + data: [107, 31, 635, 203, 2]
  126 + }, {
  127 + name: '2011',
  128 + data: [1353, 156, 947, 408, 6]
  129 + }, {
  130 + name: '2012',
  131 + data: [133, 156, 947, 408, 64]
  132 + }, {
  133 + name: '2013',
  134 + data: [133, 156, 947, 48, 6]
  135 + }, {
  136 + name: '2014',
  137 + data: [1052, 954, 4250, 740, 38]
  138 + }]
  139 + });
  140 +
  141 +
  142 +
  143 + }
  144 + };
  145 +
  146 + BarchartDatalet = Polymer({
  147 + is: 'bar-chart-datalet',
  148 +
  149 + properties: {
  150 + /**
  151 + * It's the label for X axis
  152 + *
  153 + * @attribute xAxisLabel
  154 + * @type String
  155 + * @default ''
  156 + */
  157 + xAxisLabel: {
  158 + type: String,
  159 + value: ""
  160 + },
  161 + /**
  162 + * It's the label for Y axis
  163 + *
  164 + * @attribute yAxisLabel
  165 + * @type String
  166 + * @default ''
  167 + */
  168 + yAxisLabel: {
  169 + type: String,
  170 + value: ""
  171 + },
  172 + /**
  173 + * It's the values suffix
  174 + *
  175 + * @attribute suffix
  176 + * @type Strig
  177 + * @default 'units'
  178 + */
  179 + suffix : {
  180 + type : String,
  181 + value : "units"
  182 + },
  183 + /**
  184 + * It's the component behavior
  185 + *
  186 + * @attribute behavior
  187 + * @type Object
  188 + * @default {}
  189 + */
  190 + behavior : {
  191 + type : Object,
  192 + value : {}
  193 + }
  194 +
  195 + },
  196 +
  197 + /**
  198 + * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
  199 + * and run the Datalet workcycle.
  200 + *
  201 + * @method ready
  202 + */
  203 + ready: function(){
  204 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bar_chartBehavior);
  205 + this.async(function(){this.behavior.init(this)},0);
  206 + }
  207 + });
  208 + </script>
  209 +</dom-module>
0 \ No newline at end of file 210 \ No newline at end of file
datalets/bar-chart-datalet/bar-chart-datalet.png 0 โ†’ 100755
View file @98d9d8a

526 Bytes
datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
  View file @98d9d8a
@@ -45,6 +45,7 @@ var AjaxJsonAlasqlBehavior = { @@ -45,6 +45,7 @@ var AjaxJsonAlasqlBehavior = {
45 type: Object, 45 type: Object,
46 value: {} 46 value: {}
47 } 47 }
  48 +
48 }, 49 },
49 50
50 /** 51 /**
@@ -74,23 +75,6 @@ var AjaxJsonAlasqlBehavior = { @@ -74,23 +75,6 @@ var AjaxJsonAlasqlBehavior = {
74 this.properties.json_results.value = e; 75 this.properties.json_results.value = e;
75 this.runWorkcycle(); 76 this.runWorkcycle();
76 }, 77 },
77 - /**  
78 - * Check if input field(passed as an array of separated value that mach with field path in received object) is an array of objet.  
79 - * The field is checked on current json object retrieved from the async request.  
80 - *  
81 - * @param field  
82 - */  
83 - isFieldArray : function(field){  
84 - if(field.length == 0) return false;  
85 -  
86 - var obj = this.properties.json_results.value[field[0]];  
87 - for(var i=1; i < field.length; i++){  
88 - obj = (obj.constructor == Array) ? obj[0][field[i]] : obj[field[i]];  
89 - }  
90 -  
91 - if(obj == null) return false;  
92 - return (obj.constructor === Array && obj[0].constructor == Object) ? true : false;  
93 - },  
94 78
95 /** 79 /**
96 * selectData built a JSONPATH query based on the user selected fields then extract data from the JSON response. 80 * selectData built a JSONPATH query based on the user selected fields then extract data from the JSON response.
@@ -99,89 +83,98 @@ var AjaxJsonAlasqlBehavior = { @@ -99,89 +83,98 @@ var AjaxJsonAlasqlBehavior = {
99 * @method selectData 83 * @method selectData
100 */ 84 */
101 selectData : function() { 85 selectData : function() {
102 -  
103 - this.data = []; 86 + var jsonData = [this.properties.json_results.value];
104 87
105 this._component.fields = JSON.parse(this._component.fields); 88 this._component.fields = JSON.parse(this._component.fields);
106 89
107 - var jsonData = [this.properties.json_results.value]; 90 + var fields = [];
  91 + for (var i=0; i < this._component.fields.length; i++){
  92 + fields.push("["+this._fieldName(this._component.fields[i])+"]");
  93 + }
108 94
109 - var res = alasql('SELECT result->records FROM ?', [jsonData]);  
110 -  
111 - var records = res[0]["result->records"];  
112 -  
113 - var obj = alasql('SELECT Lat, COUNT(Lng) as CLng \  
114 - FROM ? \  
115 - WHERE Lat >= 53.298164\  
116 - GROUP BY Lat \  
117 - ORDER BY Lng ASC', [records]);  
118 - console.log(obj);  
119 - console.log(JSON.stringify(obj));  
120 -  
121 - this.pushData(obj);  
122 -  
123 - //var jsonArray = [  
124 - // { "user": { "id": 100, "screen_name": "pippo" }, "text": "bla bla" , "num": 5},  
125 - // { "user": { "id": 130, "screen_name": "pippo" }, "text": "gigggggggggginho", "num": 2 },  
126 - // { "user": { "id": 155, "screen_name": "ciao" }, "text": "kabushiki kaisha", "num": 44 },  
127 - // { "user": { "id": 301, "screen_name": "wow" }, "text": "halo reach", "num": 51 }  
128 - //];  
129 - //  
130 - //var data=[  
131 - // { "category" : "Search Engines", "hits" : 5, "bytes" : 50189 },  
132 - // { "category" : "Content Server", "hits" : 10, "bytes" : 17308 },  
133 - // { "category" : "Content Server", "hits" : 1, "bytes" : 47412 },  
134 - // { "category" : "Search Engines", "hits" : 1, "bytes" : 7601 },  
135 - // { "category" : "Business", "hits" : 1, "bytes" : 2847 },  
136 - // { "category" : "Content Server", "hits" : 1, "bytes" : 24210 },  
137 - // { "category" : "Internet Services", "hits" : 1, "bytes" : 3690 },  
138 - // { "category" : "Search Engines", "hits" : 6, "bytes" : 613036 },  
139 - // { "category" : "Search Engines", "hits" : 1, "bytes" : 2858 }  
140 - //];  
141 - //  
142 - //var res = alasql('SELECT category, sum(hits) AS hits, sum(bytes) as bytes \  
143 - //FROM ? \  
144 - //GROUP BY category \  
145 - //ORDER BY bytes DESC',[data]);  
146 - //  
147 - //  
148 - //var res = alasql('SELECT user->screen_name as name, user->id as id, text, num \  
149 - //FROM ? ORDER BY num DESC', [jsonArray]);  
150 -  
151 - //jsonPath  
152 -  
153 - //for (var i = 0; i < this._component.fields.length; i++) {  
154 - // var query = "$";  
155 - // var query_elements = this._component.fields[i].split(',');  
156 - // for (var j = 0; j < query_elements.length; j++) {  
157 - // query += "['" + query_elements[j] + "']";  
158 - // if (this.isFieldArray(query_elements.slice(0, j + 1))) {  
159 - // query += "[*]";  
160 - // }  
161 - // }  
162 - // this.data.push({  
163 - // name: query_elements[query_elements.length - 1],  
164 - // data: jsonPath(this.properties.json_results.value, query)  
165 - // });  
166 - //}  
167 -  
168 - this.deleteWaitImage(); 95 + //console.log(fields);
  96 +
  97 + var path = this._path(this._component.fields[0]);
  98 + var filters = JSON.parse(this._component.getAttribute("filters"));
  99 + var aggregators = JSON.parse(this._component.getAttribute("aggregators"));
  100 + var orders = JSON.parse(this._component.getAttribute("orders"));
  101 +
  102 + //WHERE
  103 + var where = "";
  104 + if(filters && filters.length) {
  105 + where = "WHERE ";
  106 + for (var i=0; i < filters.length; i++) {
  107 + if(filters[i]["operation"] == "contains")
  108 + where += "[" + filters[i]["field"] + "] like '%" + filters[i]["value"] + "%' AND ";
  109 + else if(filters[i]["operation"] == "start")
  110 + where += "[" + filters[i]["field"] + "] like '" + filters[i]["value"] + "%' AND ";
  111 + else if(filters[i]["operation"] == "ends")
  112 + where += "[" + filters[i]["field"] + "] like '%" + filters[i]["value"] + "' AND ";
  113 + else
  114 + where += "[" + filters[i]["field"] + "] " + filters[i]["operation"] + " " + filters[i]["value"] + " AND ";
  115 + }
  116 + where = where.slice(0, -5);
  117 + }
  118 +
  119 + //ORDER BY
  120 + var orderBy = "";
  121 + if(orders && orders.length) {
  122 + orderBy = "ORDER BY ";
  123 + for (var i = 0; i < orders.length; i++)
  124 + orderBy += "[" + orders[i]["field"] + "] " + orders[i]["operation"] + ", ";
  125 + orderBy = orderBy.slice(0, -2);
  126 + }
  127 +
  128 + //SELECT;
  129 + var select = "SELECT ";
  130 + for (var i = 0; i < fields.length; i++)
  131 + select += fields[i] + ", ";
  132 + select = select.slice(0, -2);
  133 +
  134 + //GROUP BY
  135 + var groupBy = "";
  136 + if(aggregators && aggregators.length) {
  137 + groupBy = "GROUP BY [" + aggregators[0]["field"] + "]";
  138 + select = "SELECT [" + aggregators[0]["field"] + "]";
  139 + for (var i = 1; i < aggregators.length; i++)
  140 + select += ", " + aggregators[i]["operation"] + "([" + aggregators[i]["field"] + "]) as [" + aggregators[i]["field"] + "]";
  141 + }
  142 +
  143 + //QUERY
  144 + console.log('SELECT '+ path +' FROM ?');
  145 + var res = alasql("SELECT "+ path +" FROM ?", [jsonData]);
  146 +
  147 + var records = res[0][path];
  148 +
  149 + console.log(select + ' FROM ? ' + where + ' ' + groupBy + ' ' + orderBy + '');
  150 + var obj = alasql(select + " FROM ? " + where + " " + groupBy + " " + orderBy + "", [records]);
  151 +
  152 + //var query = "SELECT [Lat], COUNT([Lng]) as Lng FROM ? GROUP BY [Lat] ORDER BY Lng";
  153 + //console.log(query);
  154 + //var obj = alasql(query, [records]);
  155 +
  156 + this._pushData(obj);
  157 +
  158 + this._deleteWaitImage();
169 }, 159 },
170 160
171 - pushData : function(obj) {  
172 - //qui รจ possibile modificare valori nulli o errati 161 + _pushData : function(obj) {
  162 + this.data = [];
173 163
174 for (var key in Object.keys(obj[0])){ 164 for (var key in Object.keys(obj[0])){
175 165
176 var name = Object.keys(obj[0])[key]; 166 var name = Object.keys(obj[0])[key];
177 var data = []; 167 var data = [];
  168 + var value;
178 169
179 for (var i in obj) { 170 for (var i in obj) {
180 data.push(obj[i][name]); 171 data.push(obj[i][name]);
  172 + //value = obj[i][name];
  173 + //if(!isNaN(value) && value != "")
  174 + // value = parseFloat(obj[i][name]);
  175 + //data.push(value);
181 } 176 }
182 177
183 - //console.log(data);//attenzione i dati vengono ORDINATI ALTROVE!  
184 -  
185 this.data.push({ 178 this.data.push({
186 name: name, 179 name: name,
187 data: data 180 data: data
@@ -189,10 +182,19 @@ var AjaxJsonAlasqlBehavior = { @@ -189,10 +182,19 @@ var AjaxJsonAlasqlBehavior = {
189 } 182 }
190 }, 183 },
191 184
  185 + _fieldName : function(field) {
  186 + return field.substring(field.lastIndexOf(",")+1, field.length);
  187 + },
  188 +
  189 + _path : function(field) {
  190 + return field.substring(0, field.lastIndexOf(",")).replace(",", "->");
  191 + },
  192 +
192 /** 193 /**
193 * Delete a image after loading a datalet 194 * Delete a image after loading a datalet
194 */ 195 */
195 - deleteWaitImage : function() { 196 + _deleteWaitImage : function() {
196 $("img[src$='spin.svg']").remove(); 197 $("img[src$='spin.svg']").remove();
197 } 198 }
  199 +
198 }; 200 };
199 \ No newline at end of file 201 \ No newline at end of file
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
  View file @98d9d8a
@@ -121,13 +121,13 @@ var AjaxJsonJsonPathBehavior = { @@ -121,13 +121,13 @@ var AjaxJsonJsonPathBehavior = {
121 data: jsonPath(this.properties.json_results.value, query) 121 data: jsonPath(this.properties.json_results.value, query)
122 }); 122 });
123 } 123 }
124 - this.deleteWaitImage(); 124 + this._deleteWaitImage();
125 }, 125 },
126 126
127 /** 127 /**
128 * Delete a image after loading a datalet 128 * Delete a image after loading a datalet
129 */ 129 */
130 - deleteWaitImage : function() { 130 + _deleteWaitImage : function() {
131 $("img[src$='spin.svg']").remove(); 131 $("img[src$='spin.svg']").remove();
132 } 132 }
133 }; 133 };
134 \ No newline at end of file 134 \ No newline at end of file
datalets/base-datalet/static/js/WorkcycleBehavior.js
  View file @98d9d8a
@@ -101,7 +101,7 @@ var WorkcycleBehavior = { @@ -101,7 +101,7 @@ var WorkcycleBehavior = {
101 if(this._component.data === undefined || this._component.data == ""){ 101 if(this._component.data === undefined || this._component.data == ""){
102 this.requestData(); 102 this.requestData();
103 }else{ 103 }else{
104 - this.deleteWaitImage(); 104 + this._deleteWaitImage();
105 this.data = JSON.parse(this._component.data); 105 this.data = JSON.parse(this._component.data);
106 this.transformData(); 106 this.transformData();
107 this.presentData(); 107 this.presentData();
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
  View file @98d9d8a
@@ -226,7 +226,7 @@ Example: @@ -226,7 +226,7 @@ Example:
226 data: jsonPath(this.properties.json_results.value, query) 226 data: jsonPath(this.properties.json_results.value, query)
227 }); 227 });
228 } 228 }
229 - this.deleteWaitImage(); 229 + this._deleteWaitImage();
230 } 230 }
231 231
232 }; 232 };
datalets/datatable-datalet/datatable-datalet.html
  View file @98d9d8a
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 * 28 *
29 --> 29 -->
30 30
31 -<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> 31 +<link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html">
32 32
33 <!-- 33 <!--
34 The `datatable-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer. 34 The `datatable-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer.
@@ -54,7 +54,7 @@ Example: @@ -54,7 +54,7 @@ Example:
54 54
55 <table id="datatable" class="stripe row-border" cellspacing="0" style="height: auto; width: auto;"> 55 <table id="datatable" class="stripe row-border" cellspacing="0" style="height: auto; width: auto;">
56 </table> 56 </table>
57 - <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet> 57 + <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-alasql-datalet>
58 </template> 58 </template>
59 59
60 <script type="text/javascript" src="js/DataTables/datatables.js"></script> 60 <script type="text/javascript" src="js/DataTables/datatables.js"></script>
@@ -83,35 +83,8 @@ Example: @@ -83,35 +83,8 @@ Example:
83 } 83 }
84 html += '</tbody>'; 84 html += '</tbody>';
85 85
86 -  
87 -// if(!this.data || this.data[0] == undefined) return;  
88 -// html = "";  
89 -// html += '<thead>'+  
90 -// '<tr>';  
91 -// for(var x = 0; x<this.data.length; x++){  
92 -// html += '<th>' + this.data[x].name + '</th>';  
93 -// }  
94 -// html += '</tr>' +  
95 -// '</thead>' +  
96 -// '<tfoot>' +  
97 -// '<tr>';  
98 -// for(var x = 0; x<this.data.length; x++){  
99 -// html += '<th>' + this.data[x].name + '</th>';  
100 -// }  
101 -// html += '</tr>' +  
102 -// '</tfoot>' +  
103 -// '<tbody>';  
104 -// for(var i = 0; i<this.data[0].data.length; i++){  
105 -// html += '<tr>';  
106 -// for(var x = 0; x<this.data.length; x++){  
107 -// html += '<td>' + this.data[x].data[i] + '</td>';  
108 -// }  
109 -// html += '</tr>';  
110 -// }  
111 -// html += '</tbody>';  
112 -  
113 $(this._component.$.datatable).html(html); 86 $(this._component.$.datatable).html(html);
114 - $(this._component.$.datatable).DataTable(); 87 + $(this._component.$.datatable).DataTable({"order": []});
115 } 88 }
116 }; 89 };
117 90
@@ -133,7 +106,7 @@ Example: @@ -133,7 +106,7 @@ Example:
133 }, 106 },
134 107
135 ready: function(){ 108 ready: function(){
136 - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatatableBehavior); 109 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, DatatableBehavior);
137 this.async(function(){this.behavior.init(this)},0); 110 this.async(function(){this.behavior.init(this)},0);
138 } 111 }
139 }); 112 });
datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
  View file @98d9d8a
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 * 28 *
29 --> 29 -->
30 30
31 -<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> 31 +<link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html">
32 32
33 <!-- 33 <!--
34 The `datatable-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer. 34 The `datatable-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer.
@@ -54,7 +54,7 @@ Example: @@ -54,7 +54,7 @@ Example:
54 54
55 <span id="_span"></span> 55 <span id="_span"></span>
56 56
57 - <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet> 57 + <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-alasql-datalet>
58 </template> 58 </template>
59 59
60 <script type="text/javascript" src="js/DataTables/datatables.js"></script> 60 <script type="text/javascript" src="js/DataTables/datatables.js"></script>
@@ -84,7 +84,7 @@ Example: @@ -84,7 +84,7 @@ Example:
84 html += '</tbody></table>'; 84 html += '</tbody></table>';
85 85
86 $(this._component.$._span).html(html); 86 $(this._component.$._span).html(html);
87 - $(this._component.$._span.childNodes[0]).DataTable(); 87 + $(this._component.$._span.childNodes[0]).DataTable({"order": []});
88 }, 88 },
89 89
90 _destroy: function(){ 90 _destroy: function(){
@@ -118,12 +118,16 @@ Example: @@ -118,12 +118,16 @@ Example:
118 observer: '_reload' 118 observer: '_reload'
119 } 119 }
120 120
  121 +// filters : {
  122 +// observer: '_reload'
  123 +// }
  124 +
121 }, 125 },
122 126
123 ready: function(){ 127 ready: function(){
124 $(this).find("base-datalet")[0].hideFooter(); 128 $(this).find("base-datalet")[0].hideFooter();
125 129
126 - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DynamicDatatableBehavior); 130 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, DynamicDatatableBehavior);
127 this.async(function(){this.behavior.init(this)}, 0); 131 this.async(function(){this.behavior.init(this)}, 0);
128 }, 132 },
129 133
datalets/highcharts-datalet/highcharts-datalet.html
  View file @98d9d8a
@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 * 29 *
30 --> 30 -->
31 31
32 -<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> 32 +<link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html">
33 33
34 <!-- 34 <!--
35 The `highcharts-datalet` uses the base-ajax-json-jsonpath-datalet as data retriving and selection mechanism. It defines the common properties 35 The `highcharts-datalet` uses the base-ajax-json-jsonpath-datalet as data retriving and selection mechanism. It defines the common properties
@@ -57,11 +57,12 @@ Example : @@ -57,11 +57,12 @@ Example :
57 57
58 <template> 58 <template>
59 <div id="container" style="width:auto; height:auto;"></div> 59 <div id="container" style="width:auto; height:auto;"></div>
60 - <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet> 60 + <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-alasql-datalet>
61 </template> 61 </template>
62 62
63 <script src="static/js/highcharts.js"></script> 63 <script src="static/js/highcharts.js"></script>
64 <script src="static/js/exporting.js"></script> 64 <script src="static/js/exporting.js"></script>
  65 + <script src="themes/themes.js"></script>
65 66
66 <script> 67 <script>
67 var HighchartsBehavior = { 68 var HighchartsBehavior = {
@@ -87,24 +88,24 @@ Example : @@ -87,24 +88,24 @@ Example :
87 /** 88 /**
88 * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged. 89 * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged.
89 */ 90 */
90 - jNumConverter: function(num) {  
91 - //lat-long  
92 - if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)  
93 - return num;  
94 -  
95 - var jNum = "";  
96 - for (var i = 0; i < num.length; i++) {  
97 - if(num[i].match(/[\.,]/g))  
98 - if (i == num.length - 3)  
99 - jNum += ".";  
100 - else  
101 - ;  
102 - else if (!isNaN(num[i]))  
103 - jNum += num[i];  
104 - }  
105 -  
106 - return jNum;  
107 - }, 91 +// jNumConverter: function(num) {
  92 +// //lat-long
  93 +// if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)
  94 +// return num;
  95 +//
  96 +// var jNum = "";
  97 +// for (var i = 0; i < num.length; i++) {
  98 +// if(num[i].match(/[\.,]/g))
  99 +// if (i == num.length - 3)
  100 +// jNum += ".";
  101 +// else
  102 +// ;
  103 +// else if (!isNaN(num[i]))
  104 +// jNum += num[i];
  105 +// }
  106 +//
  107 +// return jNum;
  108 +// },
108 /** 109 /**
109 * Populate the categories and the series array. 110 * Populate the categories and the series array.
110 * 111 *
@@ -121,16 +122,16 @@ Example : @@ -121,16 +122,16 @@ Example :
121 for (var i = 1; i < this.data.length; i++) 122 for (var i = 1; i < this.data.length; i++)
122 { 123 {
123 124
124 - this.data[i].data.every(function (element, index, array) {  
125 - try {  
126 - var e = HighchartsBehavior.jNumConverter(element);  
127 - (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :  
128 - array[index] = parseFloat(element);  
129 - }catch(e){  
130 - //console.log("Parsing data error. Highchart-datalet.selectData");  
131 - }  
132 - return true;  
133 - }); 125 +// this.data[i].data.every(function (element, index, array) {
  126 +// try {
  127 +// var e = HighchartsBehavior.jNumConverter(element);
  128 +// (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :
  129 +// array[index] = parseFloat(element);
  130 +// }catch(e){
  131 +// //console.log("Parsing data error. Highchart-datalet.selectData");
  132 +// }
  133 +// return true;
  134 +// });
134 135
135 this.properties.series.value.push(this.data[i]); 136 this.properties.series.value.push(this.data[i]);
136 } 137 }
@@ -155,7 +156,7 @@ Example : @@ -155,7 +156,7 @@ Example :
155 156
156 }; 157 };
157 158
158 - var HighchartsComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, HighchartsBehavior); 159 + var HighchartsComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, HighchartsBehavior);
159 160
160 HighchartsDatalet = Polymer({ 161 HighchartsDatalet = Polymer({
161 is : 'highcharts-datalet' 162 is : 'highcharts-datalet'
datalets/highcharts-datalet/themes/dark_unica.js 0 โ†’ 100644
  View file @98d9d8a
  1 +/**
  2 + * Dark theme for Highcharts JS
  3 + * @author Torstein Honsi
  4 + */
  5 +
  6 +// Load the fonts
  7 +Highcharts.createElement('link', {
  8 + href: '//fonts.googleapis.com/css?family=Unica+One',
  9 + rel: 'stylesheet',
  10 + type: 'text/css'
  11 +}, null, document.getElementsByTagName('head')[0]);
  12 +
  13 +Highcharts.themeDarkUnika = {
  14 + colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  15 + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  16 + chart: {
  17 + backgroundColor: {
  18 + linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
  19 + stops: [
  20 + [0, '#2a2a2b'],
  21 + [1, '#3e3e40']
  22 + ]
  23 + },
  24 + style: {
  25 + fontFamily: "'Unica One', sans-serif"
  26 + },
  27 + plotBorderColor: '#606063'
  28 + },
  29 + title: {
  30 + style: {
  31 + color: '#E0E0E3',
  32 + textTransform: 'uppercase',
  33 + fontSize: '20px'
  34 + }
  35 + },
  36 + subtitle: {
  37 + style: {
  38 + color: '#E0E0E3',
  39 + textTransform: 'uppercase'
  40 + }
  41 + },
  42 + xAxis: {
  43 + gridLineColor: '#707073',
  44 + labels: {
  45 + style: {
  46 + color: '#E0E0E3'
  47 + }
  48 + },
  49 + lineColor: '#707073',
  50 + minorGridLineColor: '#505053',
  51 + tickColor: '#707073',
  52 + title: {
  53 + style: {
  54 + color: '#A0A0A3'
  55 +
  56 + }
  57 + }
  58 + },
  59 + yAxis: {
  60 + gridLineColor: '#707073',
  61 + labels: {
  62 + style: {
  63 + color: '#E0E0E3'
  64 + }
  65 + },
  66 + lineColor: '#707073',
  67 + minorGridLineColor: '#505053',
  68 + tickColor: '#707073',
  69 + tickWidth: 1,
  70 + title: {
  71 + style: {
  72 + color: '#A0A0A3'
  73 + }
  74 + }
  75 + },
  76 + tooltip: {
  77 + backgroundColor: 'rgba(0, 0, 0, 0.85)',
  78 + style: {
  79 + color: '#F0F0F0'
  80 + }
  81 + },
  82 + plotOptions: {
  83 + series: {
  84 + dataLabels: {
  85 + color: '#B0B0B3'
  86 + },
  87 + marker: {
  88 + lineColor: '#333'
  89 + }
  90 + },
  91 + boxplot: {
  92 + fillColor: '#505053'
  93 + },
  94 + candlestick: {
  95 + lineColor: 'white'
  96 + },
  97 + errorbar: {
  98 + color: 'white'
  99 + }
  100 + },
  101 + legend: {
  102 + itemStyle: {
  103 + color: '#E0E0E3'
  104 + },
  105 + itemHoverStyle: {
  106 + color: '#FFF'
  107 + },
  108 + itemHiddenStyle: {
  109 + color: '#606063'
  110 + }
  111 + },
  112 + credits: {
  113 + style: {
  114 + color: '#666'
  115 + }
  116 + },
  117 + labels: {
  118 + style: {
  119 + color: '#707073'
  120 + }
  121 + },
  122 +
  123 + drilldown: {
  124 + activeAxisLabelStyle: {
  125 + color: '#F0F0F3'
  126 + },
  127 + activeDataLabelStyle: {
  128 + color: '#F0F0F3'
  129 + }
  130 + },
  131 +
  132 + navigation: {
  133 + buttonOptions: {
  134 + symbolStroke: '#DDDDDD',
  135 + theme: {
  136 + fill: '#505053'
  137 + }
  138 + }
  139 + },
  140 +
  141 + // scroll charts
  142 + rangeSelector: {
  143 + buttonTheme: {
  144 + fill: '#505053',
  145 + stroke: '#000000',
  146 + style: {
  147 + color: '#CCC'
  148 + },
  149 + states: {
  150 + hover: {
  151 + fill: '#707073',
  152 + stroke: '#000000',
  153 + style: {
  154 + color: 'white'
  155 + }
  156 + },
  157 + select: {
  158 + fill: '#000003',
  159 + stroke: '#000000',
  160 + style: {
  161 + color: 'white'
  162 + }
  163 + }
  164 + }
  165 + },
  166 + inputBoxBorderColor: '#505053',
  167 + inputStyle: {
  168 + backgroundColor: '#333',
  169 + color: 'silver'
  170 + },
  171 + labelStyle: {
  172 + color: 'silver'
  173 + }
  174 + },
  175 +
  176 + navigator: {
  177 + handles: {
  178 + backgroundColor: '#666',
  179 + borderColor: '#AAA'
  180 + },
  181 + outlineColor: '#CCC',
  182 + maskFill: 'rgba(255,255,255,0.1)',
  183 + series: {
  184 + color: '#7798BF',
  185 + lineColor: '#A6C7ED'
  186 + },
  187 + xAxis: {
  188 + gridLineColor: '#505053'
  189 + }
  190 + },
  191 +
  192 + scrollbar: {
  193 + barBackgroundColor: '#808083',
  194 + barBorderColor: '#808083',
  195 + buttonArrowColor: '#CCC',
  196 + buttonBackgroundColor: '#606063',
  197 + buttonBorderColor: '#606063',
  198 + rifleColor: '#FFF',
  199 + trackBackgroundColor: '#404043',
  200 + trackBorderColor: '#404043'
  201 + },
  202 +
  203 + // special colors for some of the
  204 + legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
  205 + background2: '#505053',
  206 + dataLabelsColor: '#B0B0B3',
  207 + textColor: '#C0C0C0',
  208 + contrastTextColor: '#F0F0F3',
  209 + maskColor: 'rgba(255,255,255,0.3)'
  210 +};
0 \ No newline at end of file 211 \ No newline at end of file
datalets/highcharts-datalet/themes/grid_light.js 0 โ†’ 100644
  View file @98d9d8a
  1 +/**
  2 + * Grid-light theme for Highcharts JS
  3 + * @author Torstein Honsi
  4 + */
  5 +
  6 +// Load the fonts
  7 +Highcharts.createElement('link', {
  8 + href: '//fonts.googleapis.com/css?family=Dosis:400,600',
  9 + rel: 'stylesheet',
  10 + type: 'text/css'
  11 +}, null, document.getElementsByTagName('head')[0]);
  12 +
  13 +Highcharts.themeGridLight = {
  14 + colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  15 + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  16 + chart: {
  17 + backgroundColor: null,
  18 + style: {
  19 + fontFamily: "Dosis, sans-serif"
  20 + }
  21 + },
  22 + title: {
  23 + style: {
  24 + fontSize: '16px',
  25 + fontWeight: 'bold',
  26 + textTransform: 'uppercase'
  27 + }
  28 + },
  29 + tooltip: {
  30 + borderWidth: 0,
  31 + backgroundColor: 'rgba(219,219,216,0.8)',
  32 + shadow: false
  33 + },
  34 + legend: {
  35 + itemStyle: {
  36 + fontWeight: 'bold',
  37 + fontSize: '13px'
  38 + }
  39 + },
  40 + xAxis: {
  41 + gridLineWidth: 1,
  42 + labels: {
  43 + style: {
  44 + fontSize: '12px'
  45 + }
  46 + }
  47 + },
  48 + yAxis: {
  49 + minorTickInterval: 'auto',
  50 + title: {
  51 + style: {
  52 + textTransform: 'uppercase'
  53 + }
  54 + },
  55 + labels: {
  56 + style: {
  57 + fontSize: '12px'
  58 + }
  59 + }
  60 + },
  61 + plotOptions: {
  62 + candlestick: {
  63 + lineColor: '#404048'
  64 + }
  65 + },
  66 +
  67 +
  68 + // General
  69 + background2: '#F0F0EA'
  70 +
  71 +};
0 \ No newline at end of file 72 \ No newline at end of file
datalets/highcharts-datalet/themes/sand_signika.js 0 โ†’ 100644
  View file @98d9d8a
  1 +/**
  2 + * Sand-Signika theme for Highcharts JS
  3 + * @author Torstein Honsi
  4 + */
  5 +
  6 +// Load the fonts
  7 +Highcharts.createElement('link', {
  8 + href: '//fonts.googleapis.com/css?family=Signika:400,700',
  9 + rel: 'stylesheet',
  10 + type: 'text/css'
  11 +}, null, document.getElementsByTagName('head')[0]);
  12 +
  13 +// Add the background image to the container
  14 +Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
  15 + proceed.call(this);
  16 + this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
  17 +});
  18 +
  19 +
  20 +Highcharts.themeSandSignika = {
  21 + colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  22 + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  23 + chart: {
  24 + backgroundColor: null,
  25 + style: {
  26 + fontFamily: "Signika, serif"
  27 + }
  28 + },
  29 + title: {
  30 + style: {
  31 + color: 'black',
  32 + fontSize: '16px',
  33 + fontWeight: 'bold'
  34 + }
  35 + },
  36 + subtitle: {
  37 + style: {
  38 + color: 'black'
  39 + }
  40 + },
  41 + tooltip: {
  42 + borderWidth: 0
  43 + },
  44 + legend: {
  45 + itemStyle: {
  46 + fontWeight: 'bold',
  47 + fontSize: '13px'
  48 + }
  49 + },
  50 + xAxis: {
  51 + labels: {
  52 + style: {
  53 + color: '#6e6e70'
  54 + }
  55 + }
  56 + },
  57 + yAxis: {
  58 + labels: {
  59 + style: {
  60 + color: '#6e6e70'
  61 + }
  62 + }
  63 + },
  64 + plotOptions: {
  65 + series: {
  66 + shadow: true
  67 + },
  68 + candlestick: {
  69 + lineColor: '#404048'
  70 + },
  71 + map: {
  72 + shadow: false
  73 + }
  74 + },
  75 +
  76 + // Highstock specific
  77 + navigator: {
  78 + xAxis: {
  79 + gridLineColor: '#D0D0D8'
  80 + }
  81 + },
  82 + rangeSelector: {
  83 + buttonTheme: {
  84 + fill: 'white',
  85 + stroke: '#C0C0C8',
  86 + 'stroke-width': 1,
  87 + states: {
  88 + select: {
  89 + fill: '#D0D0D8'
  90 + }
  91 + }
  92 + }
  93 + },
  94 + scrollbar: {
  95 + trackBorderColor: '#C0C0C8'
  96 + },
  97 +
  98 + // General
  99 + background2: '#E0E0E8'
  100 +
  101 +};
0 \ No newline at end of file 102 \ No newline at end of file
datalets/highcharts-datalet/themes/themes.js 0 โ†’ 100644
  View file @98d9d8a
  1 +/**
  2 + * Dark theme for Highcharts JS
  3 + * @author Torstein Honsi
  4 + */
  5 +
  6 +// Load the fonts
  7 +Highcharts.createElement('link', {
  8 + href: '//fonts.googleapis.com/css?family=Unica+One',
  9 + rel: 'stylesheet',
  10 + type: 'text/css'
  11 +}, null, document.getElementsByTagName('head')[0]);
  12 +
  13 +Highcharts.themeDarkUnika = {
  14 + colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  15 + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  16 + chart: {
  17 + backgroundColor: {
  18 + linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
  19 + stops: [
  20 + [0, '#2a2a2b'],
  21 + [1, '#3e3e40']
  22 + ]
  23 + },
  24 + style: {
  25 + fontFamily: "'Unica One', sans-serif"
  26 + },
  27 + plotBorderColor: '#606063'
  28 + },
  29 + title: {
  30 + style: {
  31 + color: '#E0E0E3',
  32 + textTransform: 'uppercase',
  33 + fontSize: '20px'
  34 + }
  35 + },
  36 + subtitle: {
  37 + style: {
  38 + color: '#E0E0E3',
  39 + textTransform: 'uppercase'
  40 + }
  41 + },
  42 + xAxis: {
  43 + gridLineColor: '#707073',
  44 + labels: {
  45 + style: {
  46 + color: '#E0E0E3'
  47 + }
  48 + },
  49 + lineColor: '#707073',
  50 + minorGridLineColor: '#505053',
  51 + tickColor: '#707073',
  52 + title: {
  53 + style: {
  54 + color: '#A0A0A3'
  55 +
  56 + }
  57 + }
  58 + },
  59 + yAxis: {
  60 + gridLineColor: '#707073',
  61 + labels: {
  62 + style: {
  63 + color: '#E0E0E3'
  64 + }
  65 + },
  66 + lineColor: '#707073',
  67 + minorGridLineColor: '#505053',
  68 + tickColor: '#707073',
  69 + tickWidth: 1,
  70 + title: {
  71 + style: {
  72 + color: '#A0A0A3'
  73 + }
  74 + }
  75 + },
  76 + tooltip: {
  77 + backgroundColor: 'rgba(0, 0, 0, 0.85)',
  78 + style: {
  79 + color: '#F0F0F0'
  80 + }
  81 + },
  82 + plotOptions: {
  83 + series: {
  84 + dataLabels: {
  85 + color: '#B0B0B3'
  86 + },
  87 + marker: {
  88 + lineColor: '#333'
  89 + }
  90 + },
  91 + boxplot: {
  92 + fillColor: '#505053'
  93 + },
  94 + candlestick: {
  95 + lineColor: 'white'
  96 + },
  97 + errorbar: {
  98 + color: 'white'
  99 + }
  100 + },
  101 + legend: {
  102 + itemStyle: {
  103 + color: '#E0E0E3'
  104 + },
  105 + itemHoverStyle: {
  106 + color: '#FFF'
  107 + },
  108 + itemHiddenStyle: {
  109 + color: '#606063'
  110 + }
  111 + },
  112 + credits: {
  113 + style: {
  114 + color: '#666'
  115 + }
  116 + },
  117 + labels: {
  118 + style: {
  119 + color: '#707073'
  120 + }
  121 + },
  122 +
  123 + drilldown: {
  124 + activeAxisLabelStyle: {
  125 + color: '#F0F0F3'
  126 + },
  127 + activeDataLabelStyle: {
  128 + color: '#F0F0F3'
  129 + }
  130 + },
  131 +
  132 + navigation: {
  133 + buttonOptions: {
  134 + symbolStroke: '#DDDDDD',
  135 + theme: {
  136 + fill: '#505053'
  137 + }
  138 + }
  139 + },
  140 +
  141 + // scroll charts
  142 + rangeSelector: {
  143 + buttonTheme: {
  144 + fill: '#505053',
  145 + stroke: '#000000',
  146 + style: {
  147 + color: '#CCC'
  148 + },
  149 + states: {
  150 + hover: {
  151 + fill: '#707073',
  152 + stroke: '#000000',
  153 + style: {
  154 + color: 'white'
  155 + }
  156 + },
  157 + select: {
  158 + fill: '#000003',
  159 + stroke: '#000000',
  160 + style: {
  161 + color: 'white'
  162 + }
  163 + }
  164 + }
  165 + },
  166 + inputBoxBorderColor: '#505053',
  167 + inputStyle: {
  168 + backgroundColor: '#333',
  169 + color: 'silver'
  170 + },
  171 + labelStyle: {
  172 + color: 'silver'
  173 + }
  174 + },
  175 +
  176 + navigator: {
  177 + handles: {
  178 + backgroundColor: '#666',
  179 + borderColor: '#AAA'
  180 + },
  181 + outlineColor: '#CCC',
  182 + maskFill: 'rgba(255,255,255,0.1)',
  183 + series: {
  184 + color: '#7798BF',
  185 + lineColor: '#A6C7ED'
  186 + },
  187 + xAxis: {
  188 + gridLineColor: '#505053'
  189 + }
  190 + },
  191 +
  192 + scrollbar: {
  193 + barBackgroundColor: '#808083',
  194 + barBorderColor: '#808083',
  195 + buttonArrowColor: '#CCC',
  196 + buttonBackgroundColor: '#606063',
  197 + buttonBorderColor: '#606063',
  198 + rifleColor: '#FFF',
  199 + trackBackgroundColor: '#404043',
  200 + trackBorderColor: '#404043'
  201 + },
  202 +
  203 + // special colors for some of the
  204 + legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
  205 + background2: '#505053',
  206 + dataLabelsColor: '#B0B0B3',
  207 + textColor: '#C0C0C0',
  208 + contrastTextColor: '#F0F0F3',
  209 + maskColor: 'rgba(255,255,255,0.3)'
  210 +};
  211 +
  212 +/**
  213 + * Sand-Signika theme for Highcharts JS
  214 + * @author Torstein Honsi
  215 + */
  216 +
  217 +// Load the fonts
  218 +Highcharts.createElement('link', {
  219 + href: '//fonts.googleapis.com/css?family=Signika:400,700',
  220 + rel: 'stylesheet',
  221 + type: 'text/css'
  222 +}, null, document.getElementsByTagName('head')[0]);
  223 +
  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 +
  230 +
  231 +Highcharts.themeSandSignika = {
  232 + colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  233 + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  234 + chart: {
  235 + backgroundColor: null,
  236 + style: {
  237 + fontFamily: "Signika, serif"
  238 + }
  239 + },
  240 + title: {
  241 + style: {
  242 + color: 'black',
  243 + fontSize: '16px',
  244 + fontWeight: 'bold'
  245 + }
  246 + },
  247 + subtitle: {
  248 + style: {
  249 + color: 'black'
  250 + }
  251 + },
  252 + tooltip: {
  253 + borderWidth: 0
  254 + },
  255 + legend: {
  256 + itemStyle: {
  257 + fontWeight: 'bold',
  258 + fontSize: '13px'
  259 + }
  260 + },
  261 + xAxis: {
  262 + labels: {
  263 + style: {
  264 + color: '#6e6e70'
  265 + }
  266 + }
  267 + },
  268 + yAxis: {
  269 + labels: {
  270 + style: {
  271 + color: '#6e6e70'
  272 + }
  273 + }
  274 + },
  275 + plotOptions: {
  276 + series: {
  277 + shadow: true
  278 + },
  279 + candlestick: {
  280 + lineColor: '#404048'
  281 + },
  282 + map: {
  283 + shadow: false
  284 + }
  285 + },
  286 +
  287 + // Highstock specific
  288 + navigator: {
  289 + xAxis: {
  290 + gridLineColor: '#D0D0D8'
  291 + }
  292 + },
  293 + rangeSelector: {
  294 + buttonTheme: {
  295 + fill: 'white',
  296 + stroke: '#C0C0C8',
  297 + 'stroke-width': 1,
  298 + states: {
  299 + select: {
  300 + fill: '#D0D0D8'
  301 + }
  302 + }
  303 + }
  304 + },
  305 + scrollbar: {
  306 + trackBorderColor: '#C0C0C8'
  307 + },
  308 +
  309 + // General
  310 + background2: '#E0E0E8'
  311 +
  312 +};
  313 +
  314 +/**
  315 + * Grid-light theme for Highcharts JS
  316 + * @author Torstein Honsi
  317 + */
  318 +
  319 +// Load the fonts
  320 +Highcharts.createElement('link', {
  321 + href: '//fonts.googleapis.com/css?family=Dosis:400,600',
  322 + rel: 'stylesheet',
  323 + type: 'text/css'
  324 +}, null, document.getElementsByTagName('head')[0]);
  325 +
  326 +Highcharts.themeGridLight = {
  327 + colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  328 + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  329 + chart: {
  330 + backgroundColor: null,
  331 + style: {
  332 + fontFamily: "Dosis, sans-serif"
  333 + }
  334 + },
  335 + title: {
  336 + style: {
  337 + fontSize: '16px',
  338 + fontWeight: 'bold',
  339 + textTransform: 'uppercase'
  340 + }
  341 + },
  342 + tooltip: {
  343 + borderWidth: 0,
  344 + backgroundColor: 'rgba(219,219,216,0.8)',
  345 + shadow: false
  346 + },
  347 + legend: {
  348 + itemStyle: {
  349 + fontWeight: 'bold',
  350 + fontSize: '13px'
  351 + }
  352 + },
  353 + xAxis: {
  354 + gridLineWidth: 1,
  355 + labels: {
  356 + style: {
  357 + fontSize: '12px'
  358 + }
  359 + }
  360 + },
  361 + yAxis: {
  362 + minorTickInterval: 'auto',
  363 + title: {
  364 + style: {
  365 + textTransform: 'uppercase'
  366 + }
  367 + },
  368 + labels: {
  369 + style: {
  370 + fontSize: '12px'
  371 + }
  372 + }
  373 + },
  374 + plotOptions: {
  375 + candlestick: {
  376 + lineColor: '#404048'
  377 + }
  378 + },
  379 +
  380 +
  381 + // General
  382 + background2: '#F0F0EA'
  383 +
  384 +};
0 \ No newline at end of file 385 \ No newline at end of file
datalets/leafletjs-datalet/leafletjs-datalet.html
  View file @98d9d8a
@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 * 29 *
30 --> 30 -->
31 31
32 -<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> 32 +<link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html">
33 33
34 <!-- 34 <!--
35 35
@@ -56,7 +56,7 @@ Example: @@ -56,7 +56,7 @@ Example:
56 </style> 56 </style>
57 57
58 <div id="leafletjs"></div> 58 <div id="leafletjs"></div>
59 - <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet> 59 + <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-alasql-datalet>
60 60
61 </template> 61 </template>
62 62
@@ -165,7 +165,7 @@ Example: @@ -165,7 +165,7 @@ Example:
165 * @method ready 165 * @method ready
166 */ 166 */
167 attached: function(){ 167 attached: function(){
168 - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior); 168 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, leafletjsBehavior);
169 this.behavior.init(this); 169 this.behavior.init(this);
170 } 170 }
171 }); 171 });
datalets/treemap-datalet/treemap-datalet.html
  View file @98d9d8a
@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 * 29 *
30 --> 30 -->
31 31
32 -<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> 32 +<link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html">
33 33
34 <!-- 34 <!--
35 35
@@ -105,7 +105,7 @@ Example: @@ -105,7 +105,7 @@ Example:
105 } 105 }
106 </style> 106 </style>
107 <div id="treemap_placeholder"></div> 107 <div id="treemap_placeholder"></div>
108 - <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet> 108 + <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-alasql-datalet>
109 </template> 109 </template>
110 110
111 <script src="../shared_js/d3.js"></script> 111 <script src="../shared_js/d3.js"></script>
@@ -201,7 +201,7 @@ Example: @@ -201,7 +201,7 @@ Example:
201 }, 201 },
202 202
203 ready: function(){ 203 ready: function(){
204 - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior); 204 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, TreemapBehavior);
205 this.async(function(){this.behavior.init(this)},0); 205 this.async(function(){this.behavior.init(this)},0);
206 }, 206 },
207 207
locales/controllet_ln.js
  View file @98d9d8a
@@ -120,6 +120,7 @@ ln[&quot;modifyDatalet_en&quot;] = &quot;MODIFY&quot;; @@ -120,6 +120,7 @@ ln[&quot;modifyDatalet_en&quot;] = &quot;MODIFY&quot;;
120 120
121 ln["datatable_en"] = "table"; 121 ln["datatable_en"] = "table";
122 ln["barchart_en"] = "bar-chart"; 122 ln["barchart_en"] = "bar-chart";
  123 +//ln["bar-chart_en"] = "DDR bar-chart";
123 ln["columnchart_en"] = "column-chart"; 124 ln["columnchart_en"] = "column-chart";
124 ln["linechart_en"] = "line-chart"; 125 ln["linechart_en"] = "line-chart";
125 ln["column3Dchart_en"] = "3D column-chart"; 126 ln["column3Dchart_en"] = "3D column-chart";
@@ -139,11 +140,13 @@ ln[&quot;description_en&quot;] = &quot;description&quot;; @@ -139,11 +140,13 @@ ln[&quot;description_en&quot;] = &quot;description&quot;;
139 ln["Cell_en"] = "Cell"; 140 ln["Cell_en"] = "Cell";
140 ln["Level_en"] = "Level"; 141 ln["Level_en"] = "Level";
141 ln["Categories_en"] = "Categories"; 142 ln["Categories_en"] = "Categories";
  143 +//ln["Category_en"] = "Category";
142 ln["Series_en"] = "Series"; 144 ln["Series_en"] = "Series";
143 ln["x-axis-label_en"] = "X axis label"; 145 ln["x-axis-label_en"] = "X axis label";
144 ln["y-axis-label_en"] = "Y axis label"; 146 ln["y-axis-label_en"] = "Y axis label";
145 ln["z-axis-label_en"] = "Z axis label"; 147 ln["z-axis-label_en"] = "Z axis label";
146 ln["suffix_en"] = "Suffix"; 148 ln["suffix_en"] = "Suffix";
  149 +//ln["theme_en"] = "Theme";
147 ln["Size_en"] = "Size"; 150 ln["Size_en"] = "Size";
148 ln["Latitude_en"] = "Latitude"; 151 ln["Latitude_en"] = "Latitude";
149 ln["Longitude_en"] = "Longitude"; 152 ln["Longitude_en"] = "Longitude";