Commit e5560059abbc401329b5803a0528c8e4cc02b531
Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS
Showing
27 changed files
with
1588 additions
and
485 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
| 1 | -<!--<script src="../shared_js/jquery-1.11.2.min.js"></script>--> | ||
| 2 | -<!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>--> | ||
| 3 | <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | 1 | <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> |
| 4 | <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | 2 | <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> |
| 5 | 3 | ||
| 6 | -<!--<script defer src="../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>--> | ||
| 7 | -<script src="../../locales/lnHashMap.js"></script> | ||
| 8 | - | 4 | +<script src="../../locales/controllet_ln.js"></script> |
| 9 | 5 | ||
| 10 | <link rel="import" href="../../bower_components/polymer/polymer.html"> | 6 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 11 | 7 | ||
| 12 | <link rel="import" href="../page-slider-controllet/page-slider-controllet.html"> | 8 | <link rel="import" href="../page-slider-controllet/page-slider-controllet.html"> |
| 13 | <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html"> | 9 | <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html"> |
| 14 | -<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" /> | 10 | +<link rel="import" href="../select-data-controllet/select-data-controllet.html" /> |
| 15 | <link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html"> | 11 | <link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html"> |
| 16 | 12 | ||
| 17 | <dom-module id="data-sevc-controllet"> | 13 | <dom-module id="data-sevc-controllet"> |
| @@ -23,20 +19,20 @@ | @@ -23,20 +19,20 @@ | ||
| 23 | <neon-animatable> | 19 | <neon-animatable> |
| 24 | 20 | ||
| 25 | <template is="dom-if" if={{!modify}}> | 21 | <template is="dom-if" if={{!modify}}> |
| 26 | - <dataset-selection-controllet id="dataset_selection" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet> | 22 | + <dataset-selection-controllet id="select_dataset" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet> |
| 27 | </template> | 23 | </template> |
| 28 | 24 | ||
| 29 | </neon-animatable> | 25 | </neon-animatable> |
| 30 | 26 | ||
| 31 | <neon-animatable> | 27 | <neon-animatable> |
| 32 | 28 | ||
| 33 | - <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}} preselected-fields={{selectedFields}}></tree-view-multi-table-controllet> | 29 | + <select-data-controllet id="select_data" data-url={{dataUrl}} preselected-fields={{selectedFields}} datalet-preset="{{dataletPreset}}"></select-data-controllet> |
| 34 | 30 | ||
| 35 | </neon-animatable> | 31 | </neon-animatable> |
| 36 | 32 | ||
| 37 | <neon-animatable> | 33 | <neon-animatable> |
| 38 | 34 | ||
| 39 | - <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet> | 35 | + <datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet> |
| 40 | 36 | ||
| 41 | </neon-animatable> | 37 | </neon-animatable> |
| 42 | 38 | ||
| @@ -119,7 +115,6 @@ | @@ -119,7 +115,6 @@ | ||
| 119 | if(this.selectedDatalet){ | 115 | if(this.selectedDatalet){ |
| 120 | this.modify = true; | 116 | this.modify = true; |
| 121 | this.$.slider.selected = 1; | 117 | this.$.slider.selected = 1; |
| 122 | -// console.log(this.selectedDatalet); | ||
| 123 | this.dataUrl = this.dataletPreset["data-url"]; | 118 | this.dataUrl = this.dataletPreset["data-url"]; |
| 124 | } | 119 | } |
| 125 | ln["localization"] = this.localization; | 120 | ln["localization"] = this.localization; |
| @@ -143,15 +138,18 @@ | @@ -143,15 +138,18 @@ | ||
| 143 | slider.chevronLeft(true); | 138 | slider.chevronLeft(true); |
| 144 | } | 139 | } |
| 145 | slider.chevronRight(false); | 140 | slider.chevronRight(false); |
| 146 | - this.$.tree_view_multi_table.ready(); | ||
| 147 | - this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}}); | 141 | + this.$.select_data.ready(); |
| 142 | +// this.async(function () {this.dataletPreset["filters"] = undefined;}, 1000); | ||
| 143 | + this._allowThirdStep({detail: {fields: select_data.getFlatFields()}}); | ||
| 144 | + this._allowThirdStep({detail: {fields: select_data.getFlatFields()}}); | ||
| 148 | break; | 145 | break; |
| 149 | case 2: | 146 | case 2: |
| 150 | slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]); | 147 | slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]); |
| 151 | slider.chevronLeft(true); | 148 | slider.chevronLeft(true); |
| 152 | slider.chevronRight("invisible"); | 149 | slider.chevronRight("invisible"); |
| 153 | - this.$.datalet_selection.setFields(tree_view_multi_table.getFlatFields()); | ||
| 154 | - this.$.datalet_selection.ready(); | 150 | + this.$.select_visualization.setFields(select_data.getFlatFields()); |
| 151 | + this.$.select_visualization.setFilters(select_data.getFilters()); | ||
| 152 | + this.$.select_visualization.ready(); | ||
| 155 | } | 153 | } |
| 156 | }, | 154 | }, |
| 157 | 155 | ||
| @@ -165,16 +163,16 @@ | @@ -165,16 +163,16 @@ | ||
| 165 | // this.dataUrl = e.detail.url | 163 | // this.dataUrl = e.detail.url |
| 166 | // this.jsonData = JSON.stringify(data); | 164 | // this.jsonData = JSON.stringify(data); |
| 167 | slider.chevronRight(true); | 165 | slider.chevronRight(true); |
| 168 | - dataset_selection.$.selected_url.invalid = false; | 166 | + select_dataset.$.selected_url.invalid = false; |
| 169 | }, | 167 | }, |
| 170 | error: function(){ | 168 | error: function(){ |
| 171 | // this.jsonData = undefined; | 169 | // this.jsonData = undefined; |
| 172 | slider.chevronRight(false); | 170 | slider.chevronRight(false); |
| 173 | - dataset_selection.$.selected_url.invalid = true; | 171 | + select_dataset.$.selected_url.invalid = true; |
| 174 | } | 172 | } |
| 175 | }); | 173 | }); |
| 176 | 174 | ||
| 177 | - this.$.datalet_selection.reset(); | 175 | + this.$.select_visualization.reset(); |
| 178 | }, | 176 | }, |
| 179 | 177 | ||
| 180 | _allowThirdStep : function(e){ | 178 | _allowThirdStep : function(e){ |
| @@ -182,6 +180,8 @@ | @@ -182,6 +180,8 @@ | ||
| 182 | slider.chevronRight(true); | 180 | slider.chevronRight(true); |
| 183 | else | 181 | else |
| 184 | slider.chevronRight(false); | 182 | slider.chevronRight(false); |
| 183 | + | ||
| 184 | + //this.$.select_visualization.reset(); | ||
| 185 | } | 185 | } |
| 186 | 186 | ||
| 187 | }); | 187 | }); |
controllets/datalet-selection-controllet/datalet-selection-controllet.html
| @@ -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">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
| @@ -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&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
| @@ -106,7 +106,7 @@ | @@ -106,7 +106,7 @@ | ||
| 106 | 106 | ||
| 107 | <div id="filters_container"> | 107 | <div id="filters_container"> |
| 108 | 108 | ||
| 109 | - <div id="filters_header" class="filters_header" on-click="_showFiltersPanel"><span id="filters">ADVANCED: FILTERS</span></div> | 109 | + <div id="filters_header" class="filters_header" on-click="_showFiltersPanel"><span id="filters">ADD FILTERS</span></div> |
| 110 | 110 | ||
| 111 | <div id="filters_panel"> | 111 | <div id="filters_panel"> |
| 112 | 112 | ||
| @@ -114,7 +114,7 @@ | @@ -114,7 +114,7 @@ | ||
| 114 | <tr> | 114 | <tr> |
| 115 | <th> | 115 | <th> |
| 116 | <paper-dropdown-menu id="filter_field" label="Field"> | 116 | <paper-dropdown-menu id="filter_field" label="Field"> |
| 117 | - <paper-menu class="dropdown-content"> | 117 | + <paper-menu id="filter_field_menu" class="dropdown-content"> |
| 118 | <template is="dom-repeat" items={{fields}}> | 118 | <template is="dom-repeat" items={{fields}}> |
| 119 | <paper-item id={{index}} on-tap="">{{_fieldName(item)}}</paper-item> | 119 | <paper-item id={{index}} on-tap="">{{_fieldName(item)}}</paper-item> |
| 120 | </template> | 120 | </template> |
| @@ -123,7 +123,7 @@ | @@ -123,7 +123,7 @@ | ||
| 123 | </th> | 123 | </th> |
| 124 | <th> | 124 | <th> |
| 125 | <paper-dropdown-menu id="filter_operation" label="Operation"> | 125 | <paper-dropdown-menu id="filter_operation" label="Operation"> |
| 126 | - <paper-menu class="dropdown-content"> | 126 | + <paper-menu id="filter_operation_menu" class="dropdown-content"> |
| 127 | <template is="dom-repeat" items={{operations}}> | 127 | <template is="dom-repeat" items={{operations}}> |
| 128 | <paper-item id={{index}} on-tap="">{{item}}</paper-item> | 128 | <paper-item id={{index}} on-tap="">{{item}}</paper-item> |
| 129 | </template> | 129 | </template> |
| @@ -131,7 +131,7 @@ | @@ -131,7 +131,7 @@ | ||
| 131 | </paper-dropdown-menu> | 131 | </paper-dropdown-menu> |
| 132 | </th> | 132 | </th> |
| 133 | <th> | 133 | <th> |
| 134 | - <paper-input id="filter_value" class="base_input"></paper-input> | 134 | + <paper-input id="filter_value" label="Value" class="base_input" maxlength="16" auto-validate pattern="^[_a-zA-Z0-9]*" error-message="Invalid value!"></paper-input> |
| 135 | </th> | 135 | </th> |
| 136 | <th class="filters_cell_button"> | 136 | <th class="filters_cell_button"> |
| 137 | <paper-icon-button on-click="_addFilter" icon="add-circle" class="add"></paper-icon-button> | 137 | <paper-icon-button on-click="_addFilter" icon="add-circle" class="add"></paper-icon-button> |
| @@ -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 : { |
| @@ -220,8 +220,14 @@ | @@ -220,8 +220,14 @@ | ||
| 220 | var value = this.$.filter_value.value; | 220 | var value = this.$.filter_value.value; |
| 221 | 221 | ||
| 222 | var filters = this.filters; | 222 | var filters = this.filters; |
| 223 | - filters.push({field: field, operation: operation, value: value}); | 223 | + filters.push({"field": field, "operation": operation, "value": value}); |
| 224 | this.filters = this._copy(filters); | 224 | this.filters = this._copy(filters); |
| 225 | + | ||
| 226 | + this.$.filter_field_menu.select(-1); | ||
| 227 | + this.$.filter_operation_menu.select(-1); | ||
| 228 | + this.$.filter_value.value = ""; | ||
| 229 | + | ||
| 230 | + this.fire('filters-controllet_filters', {filters: this.filters}); | ||
| 225 | }, | 231 | }, |
| 226 | 232 | ||
| 227 | _deleteFilter : function(e) { | 233 | _deleteFilter : function(e) { |
| @@ -230,6 +236,8 @@ | @@ -230,6 +236,8 @@ | ||
| 230 | var filters = this.filters; | 236 | var filters = this.filters; |
| 231 | filters.splice(index, 1); | 237 | filters.splice(index, 1); |
| 232 | this.filters = this._copy(filters); | 238 | this.filters = this._copy(filters); |
| 239 | + | ||
| 240 | + this.fire('filters-controllet_filters', {filters: this.filters}); | ||
| 233 | }, | 241 | }, |
| 234 | 242 | ||
| 235 | _copy : function(o) { | 243 | _copy : function(o) { |
controllets/multi-table-controllet/demo/index.html
| @@ -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&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&limit=10000"></multi-table-controllet> | ||
| 31 | + </div> | ||
| 14 | 32 | ||
| 15 | <script> | 33 | <script> |
| 16 | 34 |
controllets/multi-table-controllet/multi-table-controllet.html
| @@ -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/demo/index.html
| @@ -13,8 +13,8 @@ | @@ -13,8 +13,8 @@ | ||
| 13 | 13 | ||
| 14 | <body> | 14 | <body> |
| 15 | 15 | ||
| 16 | - <select-data-controllet id="tvmt" root-name="data" opened-path="records,geometry" preselected-fields='["nhits", "records,datasetid", "records,recordid"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse"></select-data-controllet> | ||
| 17 | - <!--<tree-view-multi-table-controllet id="tvmt" root-name="data" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5"></tree-view-multi-table-controllet>--> | 16 | + <!--<select-data-controllet id="tvmt" root-name="data" opened-path="records,geometry" preselected-fields='["nhits", "records,datasetid", "records,recordid"]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5"></select-data-controllet>--> |
| 17 | + <select-data-controllet id="tvmt" root-name="data" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5"></select-data-controllet> | ||
| 18 | 18 | ||
| 19 | <script> | 19 | <script> |
| 20 | var tvmt = document.getElementById('tvmt'); | 20 | var tvmt = document.getElementById('tvmt'); |
controllets/select-data-controllet/select-data-controllet.html
| @@ -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
| @@ -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 |
controllets/tree-view-multi-table-controllet/demo/index.html deleted
| 1 | -<html> | ||
| 2 | - | ||
| 3 | -<head> | ||
| 4 | - <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | ||
| 5 | - | ||
| 6 | - <script src="../../shared_js/jquery-1.11.2.min.js"></script> | ||
| 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 | - | ||
| 11 | - <link rel="import" href="../../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" /> | ||
| 12 | -</head> | ||
| 13 | - | ||
| 14 | -<body> | ||
| 15 | - | ||
| 16 | - <tree-view-multi-table-controllet id="tvmt" root-name="data" opened-path="records,geometry" preselected-fields='["nhits", "records,datasetid", "records,recordid"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse"></tree-view-multi-table-controllet> | ||
| 17 | - <!--<tree-view-multi-table-controllet id="tvmt" root-name="data" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5"></tree-view-multi-table-controllet>--> | ||
| 18 | - | ||
| 19 | - <script> | ||
| 20 | - var tvmt = document.getElementById('tvmt'); | ||
| 21 | - | ||
| 22 | - tvmt.addEventListener("tree-view-controllet_selected-fields", function (e) { | ||
| 23 | - console.log(tvmt.getFlatFields()); | ||
| 24 | - console.log(tvmt.getFields()); | ||
| 25 | - }); | ||
| 26 | - | ||
| 27 | - </script> | ||
| 28 | - | ||
| 29 | -</body> | ||
| 30 | - | ||
| 31 | -</html> | ||
| 32 | - | ||
| 33 | -<!--urls:--> | ||
| 34 | -<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1--> | ||
| 35 | -<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',--> | ||
| 36 | -<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',--> | ||
| 37 | -<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015',--> | ||
| 38 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html" /> | ||
| 2 | - | ||
| 3 | -<link rel="import" href="../../bower_components/paper-material/paper-material.html" /> | ||
| 4 | - | ||
| 5 | -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html" /> | ||
| 6 | -<link rel="import" href="../multi-table-controllet/multi-table-controllet.html" /> | ||
| 7 | - | ||
| 8 | -<dom-module id="tree-view-multi-table-controllet"> | ||
| 9 | - | ||
| 10 | - <style is="custom-style"> | ||
| 11 | - .div_container { | ||
| 12 | - display: flex; | ||
| 13 | - flex-direction: row; | ||
| 14 | - } | ||
| 15 | - #material_tree_view { | ||
| 16 | - position: relative; | ||
| 17 | - width: 25%; | ||
| 18 | - min-width: 200px; | ||
| 19 | - height: 100vh; | ||
| 20 | - } | ||
| 21 | - #material_multi_table { | ||
| 22 | - position: relative; | ||
| 23 | - width: 75%; | ||
| 24 | - | ||
| 25 | - margin-left: 64px; | ||
| 26 | - margin-top: 8px; | ||
| 27 | - } | ||
| 28 | - </style> | ||
| 29 | - | ||
| 30 | - <template> | ||
| 31 | - | ||
| 32 | - <div class="div_container"> | ||
| 33 | - <paper-material id="material_tree_view" elevation="5"> | ||
| 34 | - <tree-view-controllet id="tree_view" root-name={{rootName}} opened-path={{openedPath}} preselected-fields={{preselectedFields}}></tree-view-controllet> | ||
| 35 | - </paper-material> | ||
| 36 | - <paper-material id="material_multi_table" elevation="5"> | ||
| 37 | - <multi-table-controllet id="multi_table" data-url={{dataUrl}}></multi-table-controllet> | ||
| 38 | - </paper-material> | ||
| 39 | - </div> | ||
| 40 | - | ||
| 41 | - </template> | ||
| 42 | - | ||
| 43 | - <script> | ||
| 44 | - Polymer({ | ||
| 45 | - | ||
| 46 | - is : 'tree-view-multi-table-controllet', | ||
| 47 | - | ||
| 48 | - properties : { | ||
| 49 | - | ||
| 50 | - rootName : { | ||
| 51 | - type : String, | ||
| 52 | - value : "root" | ||
| 53 | - }, | ||
| 54 | - | ||
| 55 | - preselectedFields : { | ||
| 56 | - type : Array, | ||
| 57 | - value : [] | ||
| 58 | - }, | ||
| 59 | - | ||
| 60 | - openedPath : { | ||
| 61 | - type : String, | ||
| 62 | - value : undefined | ||
| 63 | - }, | ||
| 64 | - | ||
| 65 | - dataUrl : { | ||
| 66 | - type : String, | ||
| 67 | - value : undefined, | ||
| 68 | - observer : '_init' | ||
| 69 | - } | ||
| 70 | - | ||
| 71 | - }, | ||
| 72 | - | ||
| 73 | - listeners: { | ||
| 74 | - 'tree-view-controllet_selected-fields': '_updateSelectedFields' | ||
| 75 | - }, | ||
| 76 | - | ||
| 77 | - ready : function() { | ||
| 78 | -// if(this.dataUrl) | ||
| 79 | -// this._init(); | ||
| 80 | - | ||
| 81 | - $(this.$.material_tree_view).perfectScrollbar(); | ||
| 82 | - $(this.$.material_multi_table).perfectScrollbar(); | ||
| 83 | - }, | ||
| 84 | - | ||
| 85 | - attached : function(){ | ||
| 86 | - this._resize(); | ||
| 87 | - var that = this; | ||
| 88 | - window.addEventListener("resize", function() { that._resize(); }); | ||
| 89 | - }, | ||
| 90 | - | ||
| 91 | - getFields : function() { | ||
| 92 | - return this.$.tree_view.getFields(); | ||
| 93 | - }, | ||
| 94 | - | ||
| 95 | - getFlatFields : function() { | ||
| 96 | - return this.$.tree_view.getFlatFields(); | ||
| 97 | - }, | ||
| 98 | - | ||
| 99 | - _init : function() { | ||
| 100 | - var tree = document.getElementById('tree_view'); | ||
| 101 | - var that = this; | ||
| 102 | - | ||
| 103 | - $.ajax({ | ||
| 104 | - url: this.dataUrl, | ||
| 105 | - dataType: "json", | ||
| 106 | - success: function(data){ | ||
| 107 | - that.rootName = "data" | ||
| 108 | - data = that._filterJson(data); | ||
| 109 | - tree.setAttribute("json-data", JSON.stringify(data)); | ||
| 110 | - tree.selectedFields = []; | ||
| 111 | - that._updateSelectedFields(); | ||
| 112 | - tree.ready(); | ||
| 113 | - } | ||
| 114 | - }); | ||
| 115 | - | ||
| 116 | - this.$.multi_table.ready(); | ||
| 117 | - }, | ||
| 118 | - | ||
| 119 | - _filterJson : function(data){ | ||
| 120 | -// console.log(data); | ||
| 121 | -// console.log(this.dataUrl); | ||
| 122 | - if(data.result != undefined && data.result.resource_id != undefined) { | ||
| 123 | - this.rootName = "result,records" | ||
| 124 | - return data.result.records; | ||
| 125 | - } | ||
| 126 | - return data; | ||
| 127 | - }, | ||
| 128 | - | ||
| 129 | - _updateSelectedFields : function() { | ||
| 130 | - var fields = this.$.tree_view.getFields(); | ||
| 131 | - this.$.multi_table.setSelectedFields(fields); | ||
| 132 | - }, | ||
| 133 | - | ||
| 134 | - _resize : function(){ | ||
| 135 | - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; | ||
| 136 | - h = h - 64; //height with page scroller | ||
| 137 | - $("#material_tree_view").height(h); | ||
| 138 | - } | ||
| 139 | - | ||
| 140 | - }); | ||
| 141 | - | ||
| 142 | - </script> | ||
| 143 | - | ||
| 144 | -</dom-module> | ||
| 145 | \ No newline at end of file | 0 | \ No newline at end of file |
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 | \ No newline at end of file | 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,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
| @@ -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
| @@ -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
| @@ -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
| @@ -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
| @@ -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
| @@ -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
| 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
| 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
| 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
| 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
| @@ -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
| @@ -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
| @@ -120,6 +120,7 @@ ln["modifyDatalet_en"] = "MODIFY"; | @@ -120,6 +120,7 @@ ln["modifyDatalet_en"] = "MODIFY"; | ||
| 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["description_en"] = "description"; | @@ -139,11 +140,13 @@ ln["description_en"] = "description"; | ||
| 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"; |