Commit 98d9d8a5a0757ad10fbd972befbc0c02bb476779

Authored by Renato De Donato
1 parent 052ca020

filters+groupby

controllets/datalet-selection-controllet/datalet-selection-controllet.html
... ... @@ -48,7 +48,6 @@
48 48 position: relative;
49 49 height: 100vh;
50 50 margin-left: 32px;
51   - /*width: 344px;*/
52 51 min-width: 258px;
53 52 }
54 53  
... ... @@ -56,7 +55,6 @@
56 55 position: relative;
57 56 height: 100vh;
58 57 margin-left: 32px;
59   - /*width: 344px;*/
60 58 min-width: 258px;
61 59 }
62 60  
... ... @@ -70,15 +68,6 @@
70 68 position: relative;
71 69 height: 100vh;
72 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 73 #datalet_selection_datalet_placeholder {
... ... @@ -87,31 +76,44 @@
87 76  
88 77 .inputs{
89 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 96 height: 32px;
106 97 padding-top: 16px;
107   - /*padding: 16px;*/
108   - background-color: #B6B6B6;
  98 + margin-top: 8px;
109 99 text-align: center;
110 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 116 .info_button {
114   - /*background-color: red;*/
115 117 position: absolute;
116 118 top: 18px;
117 119 right: 0px;
... ... @@ -132,24 +134,15 @@
132 134 }
133 135  
134 136 paper-textarea {
135   - /*height: 48px;*/
136   - /*padding: 0px 8px;*/
137 137 width: 242px;
138 138 padding-left: 8px;
139 139 padding-bottom: 4px;
140 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 143 paper-dropdown-menu {
149   - /*display: inline-block;*/
150 144 height: 48px;
151 145 width: 210px;;
152   - /*padding: 0px 8px;*/
153 146 padding-left: 8px;
154 147 padding-bottom: 8px;
155 148 --paper-input-container-focus-color: #2196F3;
... ... @@ -161,16 +154,12 @@
161 154 }
162 155  
163 156 paper-icon-button {
164   - /*display: inline-block;*/
165 157 color: #2196F3;
166   - /*color: #FFFFFF;*/
167 158 --paper-icon-button-ink-color: #2196F3;
168 159 margin: 0px;
169   - /*padding: 0px;*/
170 160 }
171 161  
172 162 paper-button {
173   - /*display: block;*/
174 163 position: absolute;
175 164 bottom: 16px;
176 165 right: 11px;
... ... @@ -227,6 +216,49 @@
227 216 </div>
228 217 </div>
229 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 262 </paper-material>
231 263  
232 264 <paper-material id="datalet_selection_labels" elevation="5">
... ... @@ -255,13 +287,6 @@
255 287  
256 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 290 <paper-material id="datalet_selection_datalet" elevation="5">
266 291 <div class="input_header"><span id="dataletPreview"></span></div>
267 292 <div id="datalet_selection_datalet_placeholder"></div>
... ... @@ -329,6 +354,21 @@
329 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 372 fields : {
333 373 type : Array,
334 374 value : []
... ... @@ -339,6 +379,11 @@
339 379 value : []
340 380 },
341 381  
  382 + groupedFields : {
  383 + type : Array,
  384 + value : []
  385 + },
  386 +
342 387 dataletPreset : {
343 388 type : Object,
344 389 value : []
... ... @@ -359,6 +404,11 @@
359 404 value: undefined
360 405 },
361 406  
  407 + expert : {
  408 + type : Boolean,
  409 + value : false
  410 + },
  411 +
362 412 modify : {
363 413 type : Boolean,
364 414 value : false
... ... @@ -372,7 +422,57 @@
372 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 476 this._resize();
377 477 $(this.$.datalet_selection_inputs).perfectScrollbar();
378 478 $(this.$.datalet_selection_labels).perfectScrollbar();
... ... @@ -398,15 +498,26 @@
398 498 this._translate();
399 499 },
400 500  
  501 + setFilters : function(filters) {
  502 + this.filters = filters;
  503 + },
  504 +
401 505 setFields : function(fields) {
402 506 this.fields = fields;
403 507 },
404 508  
405 509 reset : function() {
406   - this.selectedDatalet = undefined;
  510 + this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  511 + this.preselectedDatalet = undefined;
  512 + this.type = undefined;
407 513 this.inputs = [];
408 514 this.labels = [];
  515 + this.$.expert_header.style.display = "none";
  516 + this.expert = true;
  517 + this._showExpertMode();
  518 + this.loadPreview = false;
409 519 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  520 + this._resetGroupBy();
410 521 },
411 522  
412 523 _translate : function(){
... ... @@ -435,11 +546,15 @@
435 546 this.type = undefined;
436 547 this.inputs = [];
437 548 this.labels = [];
  549 + this.$.expert_header.style.display = "none";
  550 + this.expert = true;
  551 + this._showExpertMode();
438 552 this.loadPreview = false;
439 553 }
440 554 else{
441 555 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
442 556 this.$.selectedDatalet_request.generateRequest();
  557 + this.$.expert_header.style.display = "block";
443 558 }
444 559 },
445 560  
... ... @@ -487,7 +602,6 @@
487 602 var selection = inputs.selection;
488 603 inputs = [];
489 604 for (var i in this.fields)
490   -// for (var i = 0; i < Math.max(this.fields.length, 8); i++)//error
491 605 inputs.push({name: name + " " + i, description: description, selection: selection});
492 606 }
493 607  
... ... @@ -499,6 +613,8 @@
499 613 this.selectedFields = new Array(inputs.length);
500 614 },0);
501 615  
  616 + this._resetGroupBy();
  617 +
502 618 this.loadPreview = false;
503 619 }
504 620  
... ... @@ -506,6 +622,94 @@
506 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 713 _addInput : function(e){
510 714 var selectedFields = this._copy(this.selectedFields);
511 715  
... ... @@ -524,7 +728,7 @@
524 728 var temp = [];
525 729 for (var i = 0; i < selectedFields.length; i++)
526 730 if(selectedFields[i])
527   - temp.push(selectedFields[i]);
  731 + temp.push(selectedFields[i]);
528 732 selectedFields = temp;
529 733 }
530 734 else {
... ... @@ -535,11 +739,12 @@
535 739 }
536 740 }
537 741  
  742 + this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators
  743 +
538 744 if(load){
539   - this.loadPreview = true
  745 + this.loadPreview = true;
540 746 this._loadDatalet(selectedFields);
541 747 }
542   -
543 748 },
544 749  
545 750 _updateParams : function(){
... ... @@ -554,6 +759,25 @@
554 759  
555 760 for (var i = 1; i < inputs.length; i++)
556 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 783 _paramsChanged : function(){
... ... @@ -568,6 +792,17 @@
568 792  
569 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 806 var dataletParams ={
572 807 component : this.selectedDatalet+"-datalet",
573 808 params : this.params,
... ... @@ -578,16 +813,6 @@
578 813 ComponentService.deep_url = this.deepUrl;
579 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 816 this.$.add_button.removeAttribute("disabled");
592 817 },
593 818  
... ... @@ -600,8 +825,6 @@
600 825 if(this.selectedFields[i])
601 826 selectedFields.push(this.selectedFields[i]);
602 827  
603   -// console.log(this.params);
604   -
605 828 var data = {
606 829 dataUrl : this.dataUrl,
607 830 params : this.params,
... ... @@ -616,7 +839,7 @@
616 839 },
617 840  
618 841 _showInfo : function(e){
619   - var that = this;
  842 +// var that = this;
620 843 var t = e.target;
621 844 if(t.tagName.indexOf("IRON-ICON") != -1)
622 845 t = $(e.target).parents("paper-icon-button")[0];
... ... @@ -628,7 +851,7 @@
628 851 if(!dataset)
629 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 855 this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]];
633 856 this.$.dialog_info_input.open();
634 857  
... ... @@ -638,7 +861,9 @@
638 861 },
639 862  
640 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 869 _copy : function(o) {
... ... @@ -652,6 +877,14 @@
652 877 },
653 878  
654 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 888 return ln[key + "_" +ln["localization"]];
656 889 },
657 890  
... ... @@ -666,7 +899,7 @@
666 899 // if(this.modify)
667 900 // $("#datalet_selection_datalet").height(h-128);
668 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
... ... @@ -8,7 +8,7 @@
8 8 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
9 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 12 <script>
13 13 ln["localization"] = "en";
14 14 </script>
... ... @@ -18,7 +18,7 @@
18 18  
19 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 23 </body>
24 24  
... ...
controllets/filters-controllet/filters-controllet.html
... ... @@ -168,7 +168,7 @@
168 168  
169 169 operations : {
170 170 type : Array,
171   - value : ["=", "!=", ">", ">=", "<", "<=", "like"]
  171 + value : ["=", "!=", ">", ">=", "<", "<=", "contains", "start", "ends"]
172 172 },
173 173  
174 174 filters : {
... ... @@ -187,6 +187,10 @@
187 187 $(this.$.filters_panel).perfectScrollbar();
188 188 },
189 189  
  190 + attached : function() {
  191 +// this.fire('filters-controllet_filters', {filters: this.filters});
  192 + },
  193 +
190 194 setFields : function(fields) {
191 195 this.fields = this._copy(fields);
192 196 },
... ... @@ -215,13 +219,16 @@
215 219 },
216 220  
217 221 _addFilter : function() {
  222 +// var field = "["+this.$.filter_field.value+"]";
218 223 var field = this.$.filter_field.value;
219 224 var operation = this.$.filter_operation.value;
220 225 var value = this.$.filter_value.value;
221 226  
222 227 var filters = this.filters;
223   - filters.push({field: field, operation: operation, value: value});
  228 + filters.push({"field": field, "operation": operation, "value": value});
224 229 this.filters = this._copy(filters);
  230 +
  231 + this.fire('filters-controllet_filters', {filters: this.filters});
225 232 },
226 233  
227 234 _deleteFilter : function(e) {
... ... @@ -230,6 +237,8 @@
230 237 var filters = this.filters;
231 238 filters.splice(index, 1);
232 239 this.filters = this._copy(filters);
  240 +
  241 + this.fire('filters-controllet_filters', {filters: this.filters});
233 242 },
234 243  
235 244 _copy : function(o) {
... ...
controllets/multi-table-controllet/demo/index.html
... ... @@ -5,12 +5,30 @@
5 5  
6 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 11 <link rel="import" href="../multi-table-controllet.html" />
9 12 </head>
10 13  
11 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 33 <script>
16 34  
... ...
controllets/multi-table-controllet/multi-table-controllet.html
... ... @@ -14,14 +14,15 @@
14 14 <template>
15 15  
16 16 <style is="custom-style">
17   - paper-tabs{
  17 +
  18 + paper-tabs {
18 19 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
19 20 font-size: 16px;
20 21 font-weight: bold;
21 22 --paper-tabs-selection-bar-color: #2196F3;
22 23 }
23 24  
24   - paper-tab{
  25 + paper-tab {
25 26 transition: all 1.0s;
26 27 }
27 28  
... ... @@ -29,25 +30,44 @@
29 30 background-color: #B6B6B6;
30 31 }
31 32  
32   - paper-tab:hover{
  33 + paper-tab:hover {
33 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 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 72 </template>
53 73  
... ... @@ -85,6 +105,10 @@
85 105 'dom-change': '_onDomChange'
86 106 },
87 107  
  108 + ready : function() {
  109 + $(this.$.multi_table_tables).perfectScrollbar();
  110 + },
  111 +
88 112 setSelectedFields : function(selectedFields) {
89 113 this.toSelect = this._calculateSelected(this.selectedFields, selectedFields);
90 114 this.selectedFields = this._copy(selectedFields);
... ... @@ -141,24 +165,28 @@
141 165 },
142 166  
143 167 _onDomChange : function(e) {
144   - if (e.target.id == "dom-pages")
  168 + if (e.target.id == "dom_pages")
145 169 this.async(function () {this.selected = this.toSelect;}, 0);
146 170 },
147 171  
148   - _toArrayTabs: function(obj) {
  172 + _toArrayTabs : function(obj) {
149 173 return Object.keys(obj).map(function(key) {
150 174 return {name: key.replace(/,/g, " / "), value: obj[key]};
151 175 });
152 176 },
153 177  
154   - _toArrayPages: function(obj) {
  178 + _toArrayPages : function(obj) {
155 179 return Object.keys(obj).map(function(key) {
156 180 return {name: key, value: obj[key]};
157 181 });
158 182 },
159 183  
160   - _getFields: function(value) {
  184 + _getFields : function(value) {
161 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
... ... @@ -83,19 +83,33 @@
83 83 type : String,
84 84 value : undefined,
85 85 observer : '_init'
86   - }
  86 + },
  87 +
  88 + filters : {
  89 + type : Array,
  90 + value : undefined
  91 + },
87 92  
88 93 },
89 94  
90 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 100 ready : function() {
95   -// if(this.dataUrl)
96   -// this._init();
97   -
98 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 115 attached : function(){
... ... @@ -104,6 +118,10 @@
104 118 window.addEventListener("resize", function() { that._resize(); });
105 119 },
106 120  
  121 + getFilters : function() {
  122 + return this.$.filters.getFilters();
  123 + },
  124 +
107 125 getFields : function() {
108 126 return this.$.tree_view.getFields();
109 127 },
... ... @@ -113,19 +131,20 @@
113 131 },
114 132  
115 133 _init : function() {
116   - var tree = document.getElementById('tree_view');
117 134 var that = this;
118 135  
119 136 $.ajax({
120 137 url: this.dataUrl,
121 138 dataType: "json",
122 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 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 152 },
134 153  
135 154 _filterJson : function(data){
136   -// console.log(data);
137   -// console.log(this.dataUrl);
138 155 if(data.result != undefined && data.result.resource_id != undefined) {
139 156 this.rootName = "result,records"
140 157 return data.result.records;
... ... @@ -150,6 +167,20 @@
150 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 184 _resize : function(){
154 185 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
155 186 h = h - 64; //height with page scroller
... ...
controllets/tree-view-controllet/demo/index.html
... ... @@ -27,7 +27,8 @@
27 27  
28 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 33 </div>
33 34  
... ... @@ -38,24 +39,31 @@
38 39  
39 40 </div>
40 41  
  42 +
41 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 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 68 </script>
61 69  
... ...
datalets/bar-chart-datalet/bar-chart-datalet.html 0 โ†’ 100755
  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 210 \ No newline at end of file
... ...
datalets/bar-chart-datalet/bar-chart-datalet.png 0 โ†’ 100755

526 Bytes

datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
... ... @@ -45,6 +45,7 @@ var AjaxJsonAlasqlBehavior = {
45 45 type: Object,
46 46 value: {}
47 47 }
  48 +
48 49 },
49 50  
50 51 /**
... ... @@ -74,23 +75,6 @@ var AjaxJsonAlasqlBehavior = {
74 75 this.properties.json_results.value = e;
75 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 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 83 * @method selectData
100 84 */
101 85 selectData : function() {
102   -
103   - this.data = [];
  86 + var jsonData = [this.properties.json_results.value];
104 87  
105 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 164 for (var key in Object.keys(obj[0])){
175 165  
176 166 var name = Object.keys(obj[0])[key];
177 167 var data = [];
  168 + var value;
178 169  
179 170 for (var i in obj) {
180 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 178 this.data.push({
186 179 name: name,
187 180 data: data
... ... @@ -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 194 * Delete a image after loading a datalet
194 195 */
195   - deleteWaitImage : function() {
  196 + _deleteWaitImage : function() {
196 197 $("img[src$='spin.svg']").remove();
197 198 }
  199 +
198 200 };
199 201 \ No newline at end of file
... ...
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
... ... @@ -121,13 +121,13 @@ var AjaxJsonJsonPathBehavior = {
121 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 128 * Delete a image after loading a datalet
129 129 */
130   - deleteWaitImage : function() {
  130 + _deleteWaitImage : function() {
131 131 $("img[src$='spin.svg']").remove();
132 132 }
133 133 };
134 134 \ No newline at end of file
... ...
datalets/base-datalet/static/js/WorkcycleBehavior.js
... ... @@ -101,7 +101,7 @@ var WorkcycleBehavior = {
101 101 if(this._component.data === undefined || this._component.data == ""){
102 102 this.requestData();
103 103 }else{
104   - this.deleteWaitImage();
  104 + this._deleteWaitImage();
105 105 this.data = JSON.parse(this._component.data);
106 106 this.transformData();
107 107 this.presentData();
... ...
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
... ... @@ -226,7 +226,7 @@ Example:
226 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
... ... @@ -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 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 54  
55 55 <table id="datatable" class="stripe row-border" cellspacing="0" style="height: auto; width: auto;">
56 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 58 </template>
59 59  
60 60 <script type="text/javascript" src="js/DataTables/datatables.js"></script>
... ... @@ -83,35 +83,8 @@ Example:
83 83 }
84 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 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 106 },
134 107  
135 108 ready: function(){
136   - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatatableBehavior);
  109 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, DatatableBehavior);
137 110 this.async(function(){this.behavior.init(this)},0);
138 111 }
139 112 });
... ...
datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
... ... @@ -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 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 54  
55 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 58 </template>
59 59  
60 60 <script type="text/javascript" src="js/DataTables/datatables.js"></script>
... ... @@ -84,7 +84,7 @@ Example:
84 84 html += '</tbody></table>';
85 85  
86 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 90 _destroy: function(){
... ... @@ -118,12 +118,16 @@ Example:
118 118 observer: '_reload'
119 119 }
120 120  
  121 +// filters : {
  122 +// observer: '_reload'
  123 +// }
  124 +
121 125 },
122 126  
123 127 ready: function(){
124 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 131 this.async(function(){this.behavior.init(this)}, 0);
128 132 },
129 133  
... ...
datalets/highcharts-datalet/highcharts-datalet.html
... ... @@ -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 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 57  
58 58 <template>
59 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 61 </template>
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 66  
66 67 <script>
67 68 var HighchartsBehavior = {
... ... @@ -87,24 +88,24 @@ Example :
87 88 /**
88 89 * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged.
89 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 110 * Populate the categories and the series array.
110 111 *
... ... @@ -121,16 +122,16 @@ Example :
121 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 136 this.properties.series.value.push(this.data[i]);
136 137 }
... ... @@ -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 161 HighchartsDatalet = Polymer({
161 162 is : 'highcharts-datalet'
... ...
datalets/highcharts-datalet/themes/dark_unica.js 0 โ†’ 100644
  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 211 \ No newline at end of file
... ...
datalets/highcharts-datalet/themes/grid_light.js 0 โ†’ 100644
  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 72 \ No newline at end of file
... ...
datalets/highcharts-datalet/themes/sand_signika.js 0 โ†’ 100644
  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 102 \ No newline at end of file
... ...
datalets/highcharts-datalet/themes/themes.js 0 โ†’ 100644
  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 385 \ No newline at end of file
... ...
datalets/leafletjs-datalet/leafletjs-datalet.html
... ... @@ -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 56 </style>
57 57  
58 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 61 </template>
62 62  
... ... @@ -165,7 +165,7 @@ Example:
165 165 * @method ready
166 166 */
167 167 attached: function(){
168   - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior);
  168 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, leafletjsBehavior);
169 169 this.behavior.init(this);
170 170 }
171 171 });
... ...
datalets/treemap-datalet/treemap-datalet.html
... ... @@ -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 105 }
106 106 </style>
107 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 109 </template>
110 110  
111 111 <script src="../shared_js/d3.js"></script>
... ... @@ -201,7 +201,7 @@ Example:
201 201 },
202 202  
203 203 ready: function(){
204   - this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior);
  204 + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, TreemapBehavior);
205 205 this.async(function(){this.behavior.init(this)},0);
206 206 },
207 207  
... ...
locales/controllet_ln.js
... ... @@ -120,6 +120,7 @@ ln[&quot;modifyDatalet_en&quot;] = &quot;MODIFY&quot;;
120 120  
121 121 ln["datatable_en"] = "table";
122 122 ln["barchart_en"] = "bar-chart";
  123 +//ln["bar-chart_en"] = "DDR bar-chart";
123 124 ln["columnchart_en"] = "column-chart";
124 125 ln["linechart_en"] = "line-chart";
125 126 ln["column3Dchart_en"] = "3D column-chart";
... ... @@ -139,11 +140,13 @@ ln[&quot;description_en&quot;] = &quot;description&quot;;
139 140 ln["Cell_en"] = "Cell";
140 141 ln["Level_en"] = "Level";
141 142 ln["Categories_en"] = "Categories";
  143 +//ln["Category_en"] = "Category";
142 144 ln["Series_en"] = "Series";
143 145 ln["x-axis-label_en"] = "X axis label";
144 146 ln["y-axis-label_en"] = "Y axis label";
145 147 ln["z-axis-label_en"] = "Z axis label";
146 148 ln["suffix_en"] = "Suffix";
  149 +//ln["theme_en"] = "Theme";
147 150 ln["Size_en"] = "Size";
148 151 ln["Latitude_en"] = "Latitude";
149 152 ln["Longitude_en"] = "Longitude";
... ...