Commit 93a54ea84d1b6534d91eed90224fd5f5b6ffdd8e

Authored by mwasiluk
2 parents 6d875d89 c8382405

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Showing 60 changed files with 5516 additions and 1031 deletions
alasql-utility/alasql-utility.js
1 1 function alasql_QUERY (data, fields, filters, aggregators, orders) {
2   - if(fields.length == 0)
  2 + if(fields && fields.length == 0)
3 3 return [];
4 4  
5   - var _fields = _addParenthesis(fields);
  5 + return alasql(alasql_QUERY_string(fields, filters, aggregators, orders), [data]);
  6 +}
  7 +
  8 +function alasql_QUERY_string (fields, filters, aggregators, orders) {
6 9  
7   - var select = _alasql_SELECT(_fields);
  10 + if(fields) {
  11 + var _fields = _addParenthesis(fields);
  12 + var select = _alasql_SELECT(_fields);
  13 + }
8 14  
9 15 var where = "";
10 16 if(filters && filters.length) {
... ... @@ -28,7 +34,7 @@ function alasql_QUERY (data, fields, filters, aggregators, orders) {
28 34  
29 35 var query = select + " FROM ?" + where + " " + groupBy + " " + orderBy;
30 36  
31   - return alasql(query, [data]);
  37 + return query;
32 38 }
33 39  
34 40 function _alasql_SELECT (fields) {
... ... @@ -44,16 +50,19 @@ function _alasql_SELECT (fields) {
44 50 }
45 51  
46 52 function _alasql_WHERE (filters) {
47   - var where = " WHERE ";
48   - var logicalOperator;
  53 + //var logicalOperator;
  54 + //
  55 + ///*DEPRECATED*/if(filters[0].logicalOperator == undefined) {
  56 + // logicalOperator = "AND"
  57 + //}
  58 + //else {
  59 + // logicalOperator = filters[0].logicalOperator;
  60 + // filters = filters.slice(1);
  61 + //}
49 62  
50   - /*DEPRECATED*/if(filters[0].logicalOperator == undefined) {
51   - logicalOperator = "AND"
52   - }
53   - else {
54   - logicalOperator = filters[0].logicalOperator;
55   - filters = filters.slice(1);
56   - }
  63 + var where = " WHERE ";
  64 + var logicalOperator = filters[0].logicalOperator;
  65 + filters = filters.slice(1);
57 66  
58 67 for (var i=0; i < filters.length; i++)
59 68 filters[i]["field"] = _normalizeField(filters[i]["field"]);
... ... @@ -87,7 +96,8 @@ function _alasql_GROUPBY (aggregators) {
87 96 groupBy += aggregators[i]["field"] + ", ";
88 97 }
89 98 else
90   - select += aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"] + ", ";
  99 + //select += aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"] + ", ";
  100 + select += aggregators[i]["operation"] + "(" + aggregators[i]["field"] + "), ";
91 101 }
92 102  
93 103 return [select.slice(0, -2), groupBy.slice(0, -2)];
... ... @@ -118,7 +128,7 @@ function _normalizeField (field) {
118 128 return "[" + field + "]";
119 129 }
120 130  
121   -function alasql_transformData (data, fields, truncate) {
  131 +function alasql_transformData (data, fields, round) {
122 132 if(!data || data.length == 0)
123 133 return [];
124 134  
... ... @@ -129,11 +139,11 @@ function alasql_transformData (data, fields, truncate) {
129 139 var field = fields[i];
130 140 var values = [];
131 141  
132   - for (var i in data) {
133   - var v = data[i][field];
134   - if(truncate)
  142 + for (var j in data) {
  143 + var v = data[j][field];
  144 + if(round)
135 145 if(!isNaN(v) && v % 1 != 0)
136   - v = Math.floor(v * 100) / 100;
  146 + v = Math.round(v * 1000000) / 1000000;
137 147 values.push(v);
138 148 }
139 149  
... ...
bower_components/paper-listbox/.bower.json 0 โ†’ 100644
  1 +{
  2 + "name": "paper-listbox",
  3 + "version": "1.1.2",
  4 + "description": "Implements an accessible material design listbox",
  5 + "authors": "The Polymer Authors",
  6 + "keywords": [
  7 + "web-components",
  8 + "polymer",
  9 + "listbox"
  10 + ],
  11 + "main": [
  12 + "paper-listbox.html",
  13 + "paper-sublistbox.html"
  14 + ],
  15 + "private": true,
  16 + "repository": {
  17 + "type": "git",
  18 + "url": "git://github.com/PolymerElements/paper-listbox"
  19 + },
  20 + "license": "http://polymer.github.io/LICENSE.txt",
  21 + "homepage": "https://github.com/PolymerElements/paper-listbox",
  22 + "ignore": [],
  23 + "dependencies": {
  24 + "polymer": "Polymer/polymer#^1.1.0",
  25 + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
  26 + "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
  27 + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
  28 + "paper-styles": "PolymerElements/paper-styles#^1.0.0"
  29 + },
  30 + "devDependencies": {
  31 + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
  32 + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
  33 + "paper-item": "PolymerElements/paper-item#^1.0.0",
  34 + "test-fixture": "PolymerElements/test-fixture#^1.0.0",
  35 + "web-component-tester": "Polymer/web-component-tester#^3.4.0",
  36 + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  37 + },
  38 + "_release": "1.1.2",
  39 + "_resolution": {
  40 + "type": "version",
  41 + "tag": "v1.1.2",
  42 + "commit": "b0fde50f57db3e8e4926e9d046be9d3c159a2bff"
  43 + },
  44 + "_source": "git://github.com/polymerelements/paper-listbox.git",
  45 + "_target": "~1.1.2",
  46 + "_originalSource": "polymerelements/paper-listbox",
  47 + "_direct": true
  48 +}
0 49 \ No newline at end of file
... ...
bower_components/paper-listbox/.gitignore 0 โ†’ 100644
  1 +bower_components/
... ...
bower_components/paper-listbox/.travis.yml 0 โ†’ 100644
  1 +language: node_js
  2 +sudo: false
  3 +cache:
  4 + directories:
  5 + - node_modules
  6 +matrix:
  7 + include:
  8 + - node_js: stable
  9 + script: xvfb-run -a wct --simpleOutput -l firefox -l chrome
  10 + addons:
  11 + firefox: latest
  12 + apt:
  13 + sources:
  14 + - google-chrome
  15 + packages:
  16 + - google-chrome-stable
  17 + - node_js: node
  18 + script:
  19 + - |
  20 + if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
  21 + wct --simpleOutput -s 'Windows 10/microsoftedge' -s 'Windows 8.1/internet explorer@11' -s 'Windows 7/internet explorer@10' -s 'OS X 10.10/safari@8' -s 'OS X 10.9/safari@7'
  22 + fi
  23 +before_script:
  24 +- npm install bower
  25 +- npm install web-component-tester
  26 +- export PATH=$PWD/node_modules/.bin:$PATH
  27 +- bower install
  28 +env:
  29 + global:
  30 + - secure: uR09ZOD9Sm4HB8QLY2CAr2dWkjxzCggAQF7Tf9mjyk6ZFdzIkktv/IG5Q6ywUPrBwEgpR15a//vknAh1e96w2sdsU7x4SHdnVFV46mN0i3higjiQ0V6qSbFKH0Lom89yh3+nQtmJ8JCF/zWRYGsgpfUC/O3kRQv0ghZ0pjWeO57pvSv8mOTRMUi34cSJchBDZj9U1CzJqJYakST30XBMDHabqm6wbIqvSDve9duPiFPJi6GloRfMXxzC+Lt+WpEdjiYuZ33cmqepW3TEQf0TiZFqg9aQcBINv8723O9IcInvylXmtHRCBikCqoXE6xUNDJZWXbjxzNOwiFO4WSF9t1M7il99ByE3r4MwHlmKTCwHUb4VTvfXy1Ad+sZ0dwDJl92CmTd1/jJGXLXrqUjnUTDFucH4OxQPWtSPxOINzxBebXq+x+cpjdZPe5wp0BpcNiYN0QBNOT08C9B+vLw+/cSn5FXkYO/T+8F/Lhu6SYN1ZQ3HGpjUsNpqhEJgw+l6syQoIZfs3xN6mWqWFbs1RgtGJNrJRwn8umH1I8xy+5yZaif88RhoqTSZnTIkVWMF3/USEDZlhPv+iivFn3Oq3sAopxbR39s9KAGCMu9XdaJk/WA8crS3Jeeq+78tknrpO0VTth8DY6fHY/dV56ZJrc8wHO5souGzg2NLC+D/X20=
  31 + - secure: k4qJ+VUFYDfWN1FEGqDSLXz6s6zb9fQu9Pwc+b4EMCvhC4Tfhdk7LbGDaw8cnBuDEA1jA9NvmbNN5PqvQ65MxTtPOWpQ/G2N08x9BVJ/u/MkWIY5/LZZoabaiHj4pQAA10sBEeBnhOhfKjNHT3H9s1lo2aWTucc+27fhiWsf2Kmkc4meYU9HKLazrCh+34neOdrkLAMA0EGIEn8OSsmDNhaY5yL71X3wil3qNvfpzXIy0ceAPvLqhM4WvEEYSeel7AohlSyTSC/9GdBvdqN6UmPKJTrk1J2wMsAMcznWDjashORcf/PaVVg4WHfYEBuDk7ECnX+G3Zb02hhw1JnVP+zK/wI9vwwkQXvYqNa+Q+713cWuGXYgVwH2TXKpsO6u69WHw50yKn6k+oOqDvX5SzRgOouFaHFO4GAllgFuX4iAltpluE+aE7I98C968FI3JrHEhCSxH8NlmmPRx794MKUsXBzPLeZ8CqrFs2llvBjVif0vJkad+X4xSxXgxs7SzK0sQS+CtKG3EFLMRNqi9OR98LRFgmkwM7OtOABnZ49lVXqrIaBk0quKAvjSg6PPXf4BUOJdvs8G91N1sf80XOfMj22iGdVUVnmwcktfhdwbm+hN5ToGgbVFTpYOM45+husfmUn7DamYmPudN2EJoawqe44zD6MfjfwqjJCv5Dk=
... ...
bower_components/paper-listbox/README.md 0 โ†’ 100644
  1 +# paper-listbox
  2 +
  3 +![Build status](https://api.travis-ci.org/PolymerElements/paper-listbox.svg?branch=master)
  4 +
  5 +`<paper-listbox>` implements an accessible listbox control with Material Design styling.
... ...
bower_components/paper-listbox/bower.json 0 โ†’ 100644
  1 +{
  2 + "name": "paper-listbox",
  3 + "version": "1.1.2",
  4 + "description": "Implements an accessible material design listbox",
  5 + "authors": "The Polymer Authors",
  6 + "keywords": [
  7 + "web-components",
  8 + "polymer",
  9 + "listbox"
  10 + ],
  11 + "main": [
  12 + "paper-listbox.html",
  13 + "paper-sublistbox.html"
  14 + ],
  15 + "private": true,
  16 + "repository": {
  17 + "type": "git",
  18 + "url": "git://github.com/PolymerElements/paper-listbox"
  19 + },
  20 + "license": "http://polymer.github.io/LICENSE.txt",
  21 + "homepage": "https://github.com/PolymerElements/paper-listbox",
  22 + "ignore": [],
  23 + "dependencies": {
  24 + "polymer": "Polymer/polymer#^1.1.0",
  25 + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
  26 + "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
  27 + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
  28 + "paper-styles": "PolymerElements/paper-styles#^1.0.0"
  29 + },
  30 + "devDependencies": {
  31 + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
  32 + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
  33 + "paper-item": "PolymerElements/paper-item#^1.0.0",
  34 + "test-fixture": "PolymerElements/test-fixture#^1.0.0",
  35 + "web-component-tester": "Polymer/web-component-tester#^3.4.0",
  36 + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  37 + }
  38 +}
... ...
bower_components/paper-listbox/demo/index.html 0 โ†’ 100644
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 +
  14 + <meta charset="utf-8">
  15 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  17 +
  18 + <title>paper-listbox demo</title>
  19 +
  20 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  21 +
  22 + <link rel="import" href="../../paper-item/paper-item.html">
  23 + <link rel="import" href="../../iron-collapse/iron-collapse.html">
  24 + <link rel="import" href="../paper-listbox.html">
  25 + <link rel="import" href="../../paper-styles/demo-pages.html">
  26 +
  27 + <style is="custom-style">
  28 + .horizontal-section {
  29 + padding: 0 !important;
  30 + }
  31 +
  32 + .avatar {
  33 + display: inline-block;
  34 + width: 40px;
  35 + height: 40px;
  36 + border-radius: 50%;
  37 + overflow: hidden;
  38 + background: #ccc;
  39 + }
  40 +
  41 + paper-item {
  42 + --paper-item: {
  43 + cursor: pointer;
  44 + };
  45 + }
  46 +
  47 + .sublist {
  48 + padding-left: 20px;
  49 + padding-right: 20px;
  50 +
  51 + }
  52 + </style>
  53 +</head>
  54 +<body unresolved>
  55 + <div class="horizontal-section-container">
  56 + <div>
  57 + <h4>Standard</h4>
  58 + <div class="horizontal-section">
  59 + <paper-listbox>
  60 + <paper-item>Inbox</paper-item>
  61 + <paper-item>Starred</paper-item>
  62 + <paper-item>Sent mail</paper-item>
  63 + <paper-item>Drafts</paper-item>
  64 + </paper-listbox>
  65 + </div>
  66 + </div>
  67 +
  68 + <div>
  69 + <h4>Pre-selected</h4>
  70 + <div class="horizontal-section">
  71 + <paper-listbox selected="0">
  72 + <paper-item>Inbox</paper-item>
  73 + <paper-item disabled>Starred</paper-item>
  74 + <paper-item>Sent mail</paper-item>
  75 + <paper-item>Drafts</paper-item>
  76 + </paper-listbox>
  77 + </div>
  78 + </div>
  79 +
  80 + <div>
  81 + <h4>Multi-select</h4>
  82 + <div class="horizontal-section">
  83 + <paper-listbox multi>
  84 + <paper-item>Bold</paper-item>
  85 + <paper-item>Italic</paper-item>
  86 + <paper-item>Underline</paper-item>
  87 + <paper-item>Strikethrough</paper-item>
  88 + </paper-listbox>
  89 + </div>
  90 + </div>
  91 + </div>
  92 +</body>
  93 +</html>
... ...
bower_components/paper-listbox/hero.svg 0 โ†’ 100644
  1 +<?xml version="1.0" encoding="utf-8"?>
  2 +<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  3 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5 + viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
  6 +<g id="background" display="none">
  7 + <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
  8 +</g>
  9 +<g id="label">
  10 +</g>
  11 +<g id="art">
  12 + <g>
  13 + <circle cx="86.5" cy="39" r="4"/>
  14 + <path d="M138,44c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
  15 + c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,37.3,100,36,98,36v-2
  16 + c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
  17 + c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V44z"/>
  18 + <circle cx="86.5" cy="63" r="4"/>
  19 + <path d="M138,68c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
  20 + c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,61.3,100,60,98,60v-2
  21 + c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
  22 + c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V68z"/>
  23 + <circle cx="86.5" cy="88" r="4"/>
  24 + <path d="M138,93c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
  25 + c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,86.3,100,85,98,85v-2
  26 + c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
  27 + c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V93z"/>
  28 + <path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
  29 + </g>
  30 + <g id="ic_x5F_add_x0D_">
  31 + </g>
  32 +</g>
  33 +<g id="Guides">
  34 +</g>
  35 +</svg>
... ...
bower_components/paper-listbox/index.html 0 โ†’ 100644
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 +
  14 + <meta charset="utf-8">
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 +
  17 + <title>paper-listbox</title>
  18 +
  19 + <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../polymer/polymer.html">
  22 + <link rel="import" href="../iron-component-page/iron-component-page.html">
  23 +
  24 +</head>
  25 +<body>
  26 +
  27 + <iron-component-page></iron-component-page>
  28 +
  29 +</body>
  30 +</html>
... ...
bower_components/paper-listbox/paper-listbox.html 0 โ†’ 100644
  1 +<!--
  2 +@license
  3 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 +Code distributed by Google as part of the polymer project is also
  8 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 +-->
  10 +
  11 +<link rel="import" href="../polymer/polymer.html">
  12 +<link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
  13 +<link rel="import" href="../paper-styles/default-theme.html">
  14 +
  15 +<!--
  16 +Material design: [Menus](https://www.google.com/design/spec/components/menus.html)
  17 +
  18 +`<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item
  19 +is highlighted, and the selected item has bolded text.
  20 +
  21 + <paper-listbox>
  22 + <paper-item>Item 1</paper-item>
  23 + <paper-item>Item 2</paper-item>
  24 + </paper-listbox>
  25 +
  26 +An initial selection can be specified with the `selected` attribute.
  27 +
  28 + <paper-listbox selected="0">
  29 + <paper-item>Item 1</paper-item>
  30 + <paper-item>Item 2</paper-item>
  31 + </paper-listbox>
  32 +
  33 +Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,
  34 +and multiple item can be selected.
  35 +
  36 + <paper-listbox multi>
  37 + <paper-item>Item 1</paper-item>
  38 + <paper-item>Item 2</paper-item>
  39 + </paper-listbox>
  40 +
  41 +### Styling
  42 +
  43 +The following custom properties and mixins are available for styling:
  44 +
  45 +Custom property | Description | Default
  46 +----------------|-------------|----------
  47 +`--paper-listbox-background-color` | Menu background color | `--primary-background-color`
  48 +`--paper-listbox-color` | Menu foreground color | `--primary-text-color`
  49 +`--paper-listbox` | Mixin applied to the listbox | `{}`
  50 +
  51 +### Accessibility
  52 +
  53 +`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have
  54 +`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and
  55 +down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
  56 +of a listbox item will also focus it.
  57 +
  58 +@group Paper Elements
  59 +@element paper-listbox
  60 +@hero hero.svg
  61 +@demo demo/index.html
  62 +-->
  63 +
  64 +<dom-module id="paper-listbox">
  65 + <template>
  66 + <style>
  67 + :host {
  68 + display: block;
  69 + padding: 8px 0;
  70 +
  71 + background: var(--paper-listbox-background-color, --primary-background-color);
  72 + color: var(--paper-listbox-color, --primary-text-color);
  73 +
  74 + @apply(--paper-listbox);
  75 + }
  76 + </style>
  77 +
  78 + <content></content>
  79 + </template>
  80 +
  81 + <script>
  82 + (function() {
  83 + Polymer({
  84 + is: 'paper-listbox',
  85 +
  86 + behaviors: [
  87 + Polymer.IronMenuBehavior
  88 + ],
  89 +
  90 + hostAttributes: {
  91 + role: 'listbox'
  92 + }
  93 + });
  94 + })();
  95 + </script>
  96 +</dom-module>
... ...
bower_components/paper-listbox/test/index.html 0 โ†’ 100644
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 + <head>
  13 +
  14 + <title>paper-listbox tests</title>
  15 +
  16 + <meta charset="utf-8">
  17 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  18 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  19 +
  20 + <script src="../../web-component-tester/browser.js"></script>
  21 +
  22 + </head>
  23 + <body>
  24 +
  25 + <script>
  26 +
  27 + WCT.loadSuites([
  28 + 'paper-listbox.html'
  29 + ]);
  30 +
  31 + </script>
  32 +
  33 + </body>
  34 +</html>
... ...
bower_components/paper-listbox/test/paper-listbox.html 0 โ†’ 100644
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 + <head>
  13 +
  14 + <title>paper-listbox tests</title>
  15 +
  16 + <meta charset="utf-8">
  17 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  18 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  19 +
  20 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  21 + <script src="../../web-component-tester/browser.js"></script>
  22 +
  23 + <link rel="import" href="../paper-listbox.html">
  24 +
  25 + </head>
  26 + <body>
  27 +
  28 + <test-fixture id="basic">
  29 + <template>
  30 + <paper-listbox selected="0">
  31 + <div role="option">item 1</div>
  32 + <div role="option">item 2</div>
  33 + <div role="option">item 3</div>
  34 + </paper-listbox>
  35 + </template>
  36 + </test-fixture>
  37 +
  38 + <script>
  39 +
  40 + suite('<paper-listbox>', function() {
  41 + var listbox;
  42 +
  43 + setup(function() {
  44 + listbox = fixture('basic');
  45 + });
  46 +
  47 + test('selected item has an appropriate className', function(done) {
  48 + Polymer.Base.async(function() {
  49 + assert(listbox.selectedItem.classList.contains('iron-selected'));
  50 + done();
  51 + }, 1);
  52 + });
  53 +
  54 + test('has listbox aria role', function() {
  55 + assert(listbox.getAttribute('role') === 'listbox');
  56 + });
  57 +
  58 + a11ySuite('basic');
  59 + });
  60 +
  61 + </script>
  62 +
  63 + </body>
  64 +</html>
... ...
controllets/aggregators-controllet/aggregators-controllet.html 0 โ†’ 100755
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  4 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  5 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  6 +
  7 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  8 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  9 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  10 +
  11 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  12 +
  13 +<dom-module id="aggregators-controllet">
  14 +
  15 + <template>
  16 +
  17 + <style is="custom-style">
  18 +
  19 + #aggregators_container {
  20 + height: 100%;
  21 + width: 100%;
  22 + position: relative;
  23 + }
  24 +
  25 + #aggregators_container * {
  26 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  27 + font-size: 16px;
  28 + line-height: 24px;
  29 + }
  30 +
  31 + paper-dropdown-menu {
  32 + width: 100%;
  33 + --paper-input-container-focus-color: #2196F3;
  34 + }
  35 +
  36 + :host {
  37 + --paper-dropdown-menu-icon: {
  38 + color: #2196F3;
  39 + };
  40 + }
  41 +
  42 + paper-item {
  43 + min-width: 128px;
  44 + white-space: nowrap;
  45 + }
  46 +
  47 + paper-item.iron-selected {
  48 + background-color: #2196F3;
  49 + color: #FFFFFF;
  50 + }
  51 +
  52 + paper-input {
  53 + width: 100%;
  54 + --paper-input-container-focus-color: #2196F3;
  55 + }
  56 +
  57 + paper-button {
  58 + position: absolute;
  59 + bottom: 0;
  60 + right: 0;
  61 + margin: 0 8px 8px 0;
  62 + height: 48px;
  63 + padding: 12px;
  64 + color: #FFFFFF;
  65 + background: #2196F3;
  66 + font-weight: 700;
  67 +
  68 + min-width: 216px;
  69 + }
  70 +
  71 + paper-button.disabled {
  72 + background-color: #B6B6B6;
  73 + }
  74 +
  75 + iron-icon[icon=group-work] {
  76 + height: 32px;
  77 + width: 32px;
  78 + color: #FFFFFF;
  79 + margin-top: -4px;
  80 + }
  81 +
  82 + paper-button:hover {
  83 + box-shadow: 0px 8px 12px #888;
  84 + -webkit-box-shadow: 0px 8px 12px #888;
  85 + -moz-box-shadow: 0px 8px 12px #888;
  86 + }
  87 +
  88 + paper-icon-button {
  89 + padding: 4px;
  90 + }
  91 +
  92 + paper-icon-button.add {
  93 + color: #2196F3;
  94 + --paper-icon-button-ink-color: #2196F3;
  95 + }
  96 +
  97 + paper-icon-button.cancel {
  98 + color: #F44336;
  99 + --paper-icon-button-ink-color: #F44336;
  100 + }
  101 +
  102 + #aggregators_container .row {
  103 + display: flex;
  104 + height: 60px;
  105 + width: 100%;
  106 + }
  107 +
  108 + #aggregators_container .ddl_container {
  109 + display: flex;
  110 + height: 60px;
  111 + width: 25%;
  112 + padding: 0px 8px;
  113 + }
  114 +
  115 + #aggregators_container .add_container {
  116 + height: 40px;
  117 + width: 40px;
  118 + padding: 10px 0px;
  119 + }
  120 +
  121 + #aggregators_container .row2 {
  122 + display: flex;
  123 + height: 48px;
  124 + width: 100%;
  125 + }
  126 +
  127 + #aggregators_container .row2 .highlighted {
  128 + color: #2196F3;
  129 + font-weight: 700;
  130 + }
  131 +
  132 + #aggregators_container .aggregator {
  133 + height: 24px;
  134 + width: calc(75% - 16px);
  135 + padding: 12px 8px;
  136 + }
  137 +
  138 + #aggregators_container .remove_container {
  139 + height: 40px;
  140 + width: 40px;
  141 + padding: 4px 8px;
  142 + }
  143 +
  144 + </style>
  145 +
  146 + <div id="aggregators_container">
  147 +
  148 + <div class="row">
  149 + <div class="ddl_container">
  150 + <paper-dropdown-menu id="aggregator_groupby" label="GROUP BY">
  151 + <paper-menu id="aggregator_groupby_menu" class="dropdown-content">
  152 + <template is="dom-repeat" items={{selectedFields}}>
  153 + <paper-item id={{index}}>{{item}}</paper-item>
  154 + </template>
  155 + </paper-menu>
  156 + </paper-dropdown-menu>
  157 + </div>
  158 +
  159 + <div class="ddl_container"></div>
  160 + <div class="ddl_container"></div>
  161 +
  162 + <div class="ddl_container">
  163 + <div class="add_container">
  164 + <paper-icon-button on-click="_addGroupBy" icon="add-circle" class="add"></paper-icon-button>
  165 + </div>
  166 + </div>
  167 + </div>
  168 +
  169 + <div class="row">
  170 + <div class="ddl_container">
  171 + <paper-dropdown-menu id="aggregator_calculate" label="CALCULATE">
  172 + <paper-menu id="aggregator_calculate_menu" class="dropdown-content">
  173 + <template is="dom-repeat" items={{operations}}>
  174 + <paper-item id={{index}}>{{_getOperationlName(item)}}</paper-item>
  175 + </template>
  176 + </paper-menu>
  177 + </paper-dropdown-menu>
  178 + </div>
  179 + <div class="ddl_container">
  180 + <paper-dropdown-menu id="aggregator_field" label="Field">
  181 + <paper-menu id="aggregator_field_menu" class="dropdown-content">
  182 + <template is="dom-repeat" items={{selectedFields}}>
  183 + <paper-item id={{index}}>{{item}}</paper-item>
  184 + </template>
  185 + </paper-menu>
  186 + </paper-dropdown-menu>
  187 + </div>
  188 +
  189 + <div class="ddl_container"></div>
  190 +
  191 + <div class="ddl_container">
  192 + <div class="add_container">
  193 + <paper-icon-button on-click="_addCalculate" icon="add-circle" class="add"></paper-icon-button>
  194 + </div>
  195 + </div>
  196 + </div>
  197 +
  198 + <template is="dom-repeat" items={{aggregators}}>
  199 + <div class="row2">
  200 + <div class="aggregator">
  201 + <span class="highlighted">{{_calculate(item.operation)}} {{_getOperationlName(item.operation)}}</span> {{item.field}}
  202 + </div>
  203 + <div class="remove_container">
  204 + <paper-icon-button on-click="_deleteAggregator" icon="cancel" class="cancel"></paper-icon-button>
  205 + </div>
  206 + </div>
  207 + </template>
  208 +
  209 + <paper-button id="disable_aggregators" raised on-click="_disableAggregators"><iron-icon icon="group-work"></iron-icon>&nbsp; <span id="disable_enable"></span></paper-button>
  210 +
  211 + </div>
  212 +
  213 + </template>
  214 +
  215 + <script>
  216 +
  217 + Polymer({
  218 +
  219 + is : 'aggregators-controllet',
  220 +
  221 + properties : {
  222 +
  223 + fields : {
  224 + type : Array,
  225 + value : []
  226 + },
  227 +
  228 + selectedFields : {
  229 + type : Array,
  230 + value : []
  231 + },
  232 +
  233 + operations : {
  234 + type : Array,
  235 + value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
  236 + },
  237 +
  238 + aggregators : {
  239 + type : Array,
  240 + value : []
  241 + }
  242 +
  243 + },
  244 +
  245 + ready : function() {
  246 + $(this.$.aggregators_container).perfectScrollbar();
  247 + },
  248 +
  249 + attached : function() {
  250 + this._translate();
  251 + },
  252 +
  253 + setFields : function(fields) {
  254 + this.fields = this._copy(fields);
  255 + },
  256 +
  257 + setSelectedFields : function(selectedFields) {
  258 + this.selectedFields = this._copy(selectedFields);
  259 + },
  260 +
  261 + setAggregators : function(aggregators) {
  262 + if(aggregators && aggregators.length > 0) {
  263 + this.aggregators = this._copy(aggregators);
  264 + this._fire();
  265 + }
  266 + },
  267 +
  268 + getAggregators : function() {
  269 + if(this.aggregators.length > 0 && this.aggregators[0].operation == "GROUP BY")
  270 + return this.aggregators;
  271 + return [];
  272 + },
  273 +
  274 + reset : function() {
  275 + this.fields = [];
  276 + this.selectedFields = [];
  277 + this.aggregators = [];
  278 + },
  279 +
  280 + _translate : function() {
  281 + this.$.aggregator_groupby.setAttribute("label", ln["GROUP BY_" + ln["localization"]]);
  282 + this.$.aggregator_calculate.setAttribute("label", ln["CALCULATE_" + ln["localization"]]);
  283 + this.$.aggregator_field.setAttribute("label", ln["aggregatorField_" + ln["localization"]]);
  284 +
  285 + this.$.disable_enable.innerHTML = ln["disableGroupBy_" + ln["localization"]];
  286 + },
  287 +
  288 + _calculate: function(operation) {
  289 + if(operation.indexOf("GROUP BY") > -1)
  290 + return "";
  291 + return ln["Calculate_" + ln["localization"]] + " ";
  292 + },
  293 +
  294 + _getOperationlName: function(operation) {
  295 + return ln[operation + "_" + ln["localization"]];
  296 + },
  297 +
  298 + _fire : function() {
  299 + this.$.disable_enable.innerHTML = ln["disableGroupBy_" + ln["localization"]];
  300 + this.$.disable_aggregators.className = this.$.disable_aggregators.className.replace(" disabled", "");
  301 +
  302 + if(this.aggregators.length > 0 && this.aggregators[0].operation == "GROUP BY")
  303 + this.fire('aggregators-controllet_aggregators', {aggregators: this.aggregators});
  304 + else
  305 + this.fire('aggregators-controllet_aggregators', {aggregators: []});
  306 + },
  307 +
  308 + _addGroupBy : function() {
  309 + if (this.$.aggregator_groupby_menu.selectedItem) {
  310 + var field = this.$.aggregator_groupby.value;
  311 +
  312 + this.aggregators.unshift({"field": field, "operation": "GROUP BY"});//insert as last GB
  313 +
  314 + this.$.aggregator_groupby_menu.select(-1);
  315 +
  316 + this._fire();
  317 +
  318 + this._renderAggregators();
  319 + }
  320 + },
  321 +
  322 + _addCalculate : function() {
  323 + if (this.$.aggregator_calculate_menu.selectedItem && this.$.aggregator_field.selectedItem) {
  324 + var field = this.$.aggregator_field.value;
  325 + var id = this.$.aggregator_calculate.selectedItem.id;
  326 + var operation = this.operations[id];
  327 +
  328 + this.aggregators.push({"field": field, "operation": operation});
  329 +
  330 + this.$.aggregator_field_menu.select(-1);
  331 + this.$.aggregator_calculate_menu.select(-1);
  332 +
  333 + this._fire();
  334 +
  335 + this._renderAggregators();
  336 + }
  337 + },
  338 +
  339 + _deleteAggregator : function(e) {
  340 + var index = e.model.index;
  341 +
  342 + this.aggregators.splice(index, 1);
  343 +
  344 + this._fire();
  345 +
  346 + this._renderAggregators();
  347 + },
  348 +
  349 +// _addAggregator : function() {
  350 +// if (this.$.aggregator_operation_menu.selectedItem && this.$.aggregator_field.selectedItem) {
  351 +// var field = this.$.aggregator_field.value;
  352 +// var id = this.$.aggregator_operation.selectedItem.id;
  353 +// var operation = this.operations[id];
  354 +//
  355 +// this.aggregators.push({"field": field, "operation": operation});
  356 +//
  357 +// this.$.aggregator_field_menu.select(-1);
  358 +// this.$.aggregator_operation_menu.select(-1);
  359 +//
  360 +// this._fire();
  361 +//
  362 +// this._renderAggregators();
  363 +// }
  364 +// },
  365 +//
  366 +// _deleteAggregator : function(e) {
  367 +// var index = e.model.index;
  368 +//
  369 +// this.aggregators.splice(index, 1);
  370 +//
  371 +// this._fire();
  372 +//
  373 +// this._renderAggregators();
  374 +// },
  375 +
  376 + _renderAggregators : function() {
  377 + var aggregators = this._copy(this.aggregators);
  378 + this.aggregators = [];
  379 + this.async(function() {
  380 + this.aggregators = aggregators;
  381 + }, 0);
  382 + },
  383 +
  384 + _disableAggregators : function() {
  385 + var classes = this.$.disable_aggregators.className;
  386 + if (classes.indexOf("disabled") > -1) {
  387 + this._fire();
  388 + }
  389 + else {
  390 + this.$.disable_enable.innerHTML = ln["enableGroupBy_" + ln["localization"]];
  391 + this.$.disable_aggregators.className = classes + " disabled";
  392 + this.fire('aggregators-controllet_aggregators', {aggregators: []});
  393 + }
  394 + },
  395 +
  396 + _copy : function(o) {
  397 + var out, v, key;
  398 + out = Array.isArray(o) ? [] : {};
  399 + for (key in o) {
  400 + v = o[key];
  401 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  402 + }
  403 + return out;
  404 + }
  405 +
  406 + });
  407 +
  408 + </script>
  409 +
  410 +</dom-module>
0 411 \ No newline at end of file
... ...
controllets/aggregators-controllet/demo/index.html 0 โ†’ 100755
  1 +<html>
  2 +
  3 +<head>
  4 + <script src="../../shared_js/jquery-1.11.2.min.js"></script>
  5 +
  6 + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  7 +
  8 + <link rel="import" href="../aggregators-controllet.html"/>
  9 +
  10 + <script src="../../../locales/controllet_ln.js"></script>
  11 +
  12 + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  13 + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 +</head>
  15 +
  16 +<body>
  17 +
  18 + <style>
  19 +
  20 + .container {
  21 + height: 400px;
  22 + width: 1200px;
  23 + /*width: 400px;*/
  24 + position: relative;
  25 + top: 100px;
  26 + left:300px;
  27 + }
  28 +
  29 + </style>
  30 +
  31 + <div class="container">
  32 + <aggregators-controllet id="aggregators_controllet"></aggregators-controllet>
  33 + </div>
  34 +
  35 + <script>
  36 + ln["localization"] = "en";
  37 +
  38 + var fields = ["aaa","bbb", "ccc", "ddd", "eee", "fff"];
  39 + var selectedFields = ["ccc","aaa", "eee"];
  40 +
  41 +// var aggregators_controllet = document.getElementById('aggregators_controllet');
  42 +
  43 + aggregators_controllet.setFields(fields);
  44 + aggregators_controllet.setSelectedFields(selectedFields);
  45 +
  46 +// aggregators_controllet.aggregators = [{logicalOperator: "OR"}, {field: "Lat", operation: "<=", value: "16"}, {field: "Long", operation: "!=", value: "32"}, {field: "Sbiricos", operation: "!=", value: "12AAA32+DAO"}];
  47 +// filters_controllet.logicalOperator = "or";
  48 +
  49 +// var filters = filters_controllet.getFilters();
  50 +//
  51 +// console.log(filters);
  52 +
  53 + </script>
  54 +
  55 +</body>
  56 +
  57 +</html>
0 58 \ No newline at end of file
... ...
controllets/data-sevc-controllet/co-datalets-creator-controllet.html
... ... @@ -41,7 +41,8 @@
41 41 listeners : {
42 42 'page-slider-controllet_selected' : '_updateSlider',
43 43 'select-fields-controllet_selected-fields' : '_allowThirdStep',
44   - 'filters-controllet_filters': '_allowThirdStep'
  44 + 'filters-controllet_filters': '_allowThirdStep',
  45 + 'aggregators-controllet_aggregators': '_allowThirdStep'
45 46 },
46 47  
47 48 properties : {
... ... @@ -104,13 +105,15 @@
104 105  
105 106 _allowThirdStep : function(){
106 107 this.$.slider.chevronRight(false);
107   - var fields = this.$.select_data.getSelectedFields();
  108 + var selectedFields = this.$.select_data.getSelectedFields();
108 109 var filters = this.$.select_data.getFilters();
  110 + var aggregators = this.$.select_data.getAggregators();
109 111 var data = this.$.select_data.getData();
110   - if(fields.length > 0) {
  112 + if(selectedFields.length > 0) {
111 113 this.$.select_visualization.init();
112   - this.$.select_visualization.setFields(fields);
  114 + this.$.select_visualization.setSelectedFields(selectedFields);
113 115 this.$.select_visualization.setFilters(filters);
  116 + this.$.select_visualization.setAggregators(aggregators);
114 117 this.$.select_visualization.setData(data);
115 118 this.$.slider.chevronRight(true);
116 119 }
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
... ... @@ -50,6 +50,7 @@
50 50 'dataset-selection-controllet_data-url' : '_allowSecondStep',
51 51 'select-fields-controllet_selected-fields' : '_allowThirdStep',
52 52 'filters-controllet_filters': '_allowThirdStep',
  53 + 'aggregators-controllet_aggregators': '_allowThirdStep',
53 54 'data-ready': '_dataReady'
54 55 },
55 56  
... ... @@ -138,13 +139,15 @@
138 139  
139 140 _allowThirdStep : function(){
140 141 this.$.slider.chevronRight(false);
141   - var fields = this.$.select_data.getSelectedFields();
  142 + var selectedFields = this.$.select_data.getSelectedFields();
142 143 var filters = this.$.select_data.getFilters();
  144 + var aggregators = this.$.select_data.getAggregators();
143 145 var data = this.$.select_data.getData();
144   - if(fields.length > 0) {
  146 + if(selectedFields.length > 0) {
145 147 this.$.select_visualization.init();
146   - this.$.select_visualization.setFields(fields);
  148 + this.$.select_visualization.setSelectedFields(selectedFields);
147 149 this.$.select_visualization.setFilters(filters);
  150 + this.$.select_visualization.setAggregators(aggregators);
148 151 this.$.select_visualization.setData(data);
149 152 this.$.slider.chevronRight(true);
150 153 }
... ...
controllets/datalet-preview-controllet/datalet-preview-controllet.html 0 โ†’ 100644
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  6 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  7 +
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
  9 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  10 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  11 +
  12 +<dom-module id="datalet-preview-controllet">
  13 +
  14 + <template>
  15 +
  16 + <style is="custom-style">
  17 + #preview_container {
  18 + height: 100%;
  19 + width: 100%;
  20 + }
  21 +
  22 + #preview_container * {
  23 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  24 + font-size: 16px;
  25 + line-height: 24px;
  26 + }
  27 +
  28 + #preview_container #neon_container {
  29 + height: calc(100% - 48px);
  30 + width: 100%;
  31 + }
  32 +
  33 + #preview_container #preview, #preview_container #info {
  34 + position: relative;
  35 + height: calc(100% - 32px);
  36 + width: calc(100% - 32px);
  37 + padding: 16px;
  38 + }
  39 +
  40 + #preview_container #info_container {
  41 + display: flex;
  42 + flex-direction: row;
  43 + }
  44 +
  45 + #preview_container #datalet_img{
  46 + min-height: 124px;
  47 + width: 124px;
  48 + position:relative;
  49 + }
  50 +
  51 + #preview_container img{
  52 + max-width: 124px;
  53 + position: absolute;
  54 + top: 0;
  55 + bottom: 0;
  56 + margin: auto;
  57 + }
  58 +
  59 + #preview_container #datalet_base_info {
  60 + width: calc(100% - 124px - 16px);
  61 + margin-left: 16px;
  62 + }
  63 +
  64 + #preview_container #datalet_name{
  65 + font-size: 32px;
  66 + line-height: 48px;
  67 + color: #2196F3;
  68 + }
  69 +
  70 + #preview_container #datalet_description{
  71 + }
  72 +
  73 + #preview_container #datalet_inputs{
  74 + margin-top: 16px;
  75 + }
  76 +
  77 + #preview_container .input_label {
  78 + color: #2196F3;
  79 + font-weight: 700;
  80 + }
  81 +
  82 + #preview_container ul {
  83 + list-style-type: disc;
  84 + }
  85 +
  86 + #preview_container li {
  87 + font-weight: 700;
  88 + }
  89 +
  90 + paper-tabs {
  91 + background: #B6B6B6;
  92 + /*--paper-tabs-selection-bar-color: #00BCD4;*/
  93 + }
  94 +
  95 + paper-tab {
  96 + font-weight: 700;
  97 + border-right: 2px solid #FFFFFF;
  98 + /*--paper-tab-ink: #2196F3;*/
  99 + }
  100 +
  101 + paper-tab:nth-child(2) {
  102 + border-right: 0;
  103 + }
  104 +
  105 + paper-tab.iron-selected {
  106 + color: #FFFFFF;
  107 + background: #2196F3;;
  108 + }
  109 +
  110 + paper-tab:not(.iron-selected):hover {
  111 + color: #2196F3;
  112 + }
  113 +
  114 + </style>
  115 +
  116 + <paper-material id="preview_container" elevation="5">
  117 +
  118 + <paper-tabs selected="{{tabIndex}}" no-bar>
  119 + <paper-tab noink><span id="previewTab"></span></paper-tab>
  120 + <paper-tab noink><span id="infoTab"></span></paper-tab>
  121 + </paper-tabs>
  122 +
  123 + <neon-animated-pages id="neon_container" selected="{{_getNeonIndex(tabIndex)}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  124 +
  125 + <neon-animatable>
  126 + <div id="preview">
  127 +
  128 + </div>
  129 + </neon-animatable>
  130 +
  131 + <neon-animatable>
  132 + <div id="info">
  133 + <div id="info_container">
  134 + <div id="datalet_img">
  135 + <img src="{{dataletImg}}">
  136 + </div>
  137 + <div id="datalet_base_info">
  138 + <div id="datalet_name">
  139 + {{dataletName}}
  140 + </div>
  141 + <div id="datalet_description">
  142 + {{dataletDescription}}
  143 + </div>
  144 + </div>
  145 + </div>
  146 + <div id="datalet_inputs">
  147 + <span id="inputs" class="input_label"></span>
  148 + <ul>
  149 + <template is="dom-repeat" items="{{inputs}}">
  150 + <li>{{_getInputName(item.name)}}</li>
  151 + {{_getInputDescription(item.name)}}
  152 + </template>
  153 + </ul>
  154 + <span id="options" class="input_label"></span>
  155 + <ul>
  156 + <template is="dom-repeat" items="{{options}}">
  157 + <li>{{_getInputName(item.name)}}</li>
  158 + {{_getInputDescription(item.name)}}
  159 + </template>
  160 + </ul>
  161 + </div>
  162 + </div>
  163 + </neon-animatable>
  164 +
  165 + </neon-animated-pages>
  166 +
  167 + </paper-material>
  168 +
  169 + </template>
  170 +
  171 + <script>
  172 +
  173 + Polymer({
  174 +
  175 + is : 'datalet-preview-controllet',
  176 +
  177 + properties : {
  178 +
  179 + deepUrl : {
  180 + type : String,
  181 + value : undefined
  182 + },
  183 +
  184 + tabIndex: {
  185 + type: Number,
  186 + value: 0
  187 + }
  188 +
  189 + },
  190 +
  191 + ready : function() {
  192 + $(this.$.preview).perfectScrollbar();
  193 + $(this.$.info).perfectScrollbar();
  194 + },
  195 +
  196 + attached : function() {
  197 + this._translate();
  198 + },
  199 +
  200 + _translate : function(){
  201 + this.$.previewTab.innerHTML = ln["previewTab_" + ln["localization"]];
  202 + this.$.infoTab.innerHTML = ln["infoTab_" + ln["localization"]];
  203 + },
  204 +
  205 + loadDatalet : function(dataletParams){
  206 + this._setTabindex(0);
  207 +
  208 + dataletParams.placeHolder = this.$.preview;
  209 +
  210 + ComponentService.deep_url = this.deepUrl;
  211 + ComponentService.getComponent(dataletParams);
  212 + },
  213 +
  214 + eraseDatalet : function(){
  215 + this.$.preview.innerHTML = "";
  216 + },
  217 +
  218 + loadInfo : function(selectedDatalet){
  219 + this._setTabindex(1);
  220 +
  221 + this.dataletImg = (selectedDatalet.bridge_link + selectedDatalet.component_link).replace("html", "png");
  222 + this.dataletName = this._getChartName(selectedDatalet.name.replace("-datalet", ""));
  223 + this.dataletDescription = this._getChartName(selectedDatalet.name.replace("-datalet", "Description"));
  224 +
  225 + var inputs = selectedDatalet.idm.inputs.input;
  226 + var options = [];
  227 + if(selectedDatalet.idm.inputs.layouts)
  228 + options = selectedDatalet.idm.inputs.layouts.input;
  229 +
  230 + if(!(inputs instanceof Array))
  231 + inputs = [inputs];
  232 +
  233 + if(!(options instanceof Array))
  234 + options = [options];
  235 +
  236 + this.inputs = inputs;
  237 + this.options = options;
  238 +
  239 + this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
  240 + if(this.options.length > 0)
  241 + this.$.options.innerHTML = ln["options_" + ln["localization"]];
  242 + else
  243 + this.$.options.innerHTML = "";
  244 + },
  245 +
  246 + eraseInfo : function(){
  247 + this.dataletImg = "";
  248 + this.dataletName = "";
  249 + this.dataletDescription = "";
  250 +
  251 + this.inputs = [];
  252 + this.options = [];
  253 +
  254 + this.$.inputs.innerHTML = "";
  255 + this.$.options.innerHTML = "";
  256 + },
  257 +
  258 + _getChartName: function(key) {
  259 + return ln[key + "_" +ln["localization"]];
  260 + },
  261 +
  262 +// _getInputRichName : function(item) {
  263 +// var name = ln[item.name + "_" +ln["localization"]];
  264 +// if(item.type != "TEXT")
  265 +// name += " [" + item.type + "]";
  266 +// if(item.selection == "?")
  267 +// name += " [OPT]";
  268 +// return name;
  269 +// },
  270 +
  271 + _getInputName : function(name) {
  272 + return ln[name + "_" +ln["localization"]];
  273 + },
  274 +
  275 + _getInputDescription : function(name) {
  276 + return ln[name + "Description_" +ln["localization"]];
  277 + },
  278 +
  279 + _setTabindex : function(tabIndex) {
  280 + this.debounce('_filter', function () {
  281 + this.tabIndex = -1;
  282 + this.tabIndex = tabIndex;
  283 + }, 0);
  284 + },
  285 +
  286 + _getNeonIndex : function(tabIndex){
  287 + if(tabIndex == -1)
  288 + return 0;
  289 + return tabIndex;
  290 + }
  291 +
  292 + });
  293 +
  294 + </script>
  295 +
  296 +</dom-module>
0 297 \ No newline at end of file
... ...
controllets/datalet-preview-controllet/index/index.html 0 โ†’ 100644
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +</head>
  7 +<body>
  8 +
  9 +</body>
  10 +</html>
0 11 \ No newline at end of file
... ...
controllets/datalets-modifier-controllet/datalets-modifier-controllet.html
... ... @@ -42,6 +42,7 @@
42 42 'page-slider-controllet_selected' : '_updateSlider',
43 43 'select-fields-controllet_selected-fields' : '_allowThirdStep',
44 44 'filters-controllet_filters': '_allowThirdStep',
  45 + 'aggregators-controllet_aggregators': '_allowThirdStep',
45 46 'data-ready': '_preselect'
46 47 },
47 48  
... ... @@ -96,6 +97,8 @@
96 97 _preselect : function(){
97 98 this.$.select_data.setSelectedFields(this.selectedFields);
98 99 this.$.select_data.setFilters(JSON.parse(this.dataletPreset["filters"]));
  100 + this.$.select_data.setAggregators(JSON.parse(this.dataletPreset["aggregators"]));
  101 +// this.$.select_visualization.preselect();
99 102 },
100 103  
101 104 _updateSlider : function(e){
... ... @@ -114,23 +117,27 @@
114 117  
115 118 this.$.slider.chevronLeft(true);
116 119 this.$.slider.chevronRight("invisible");
117   -
118   - /**/this.$.select_visualization.show();//resize
  120 +
  121 + this.$.select_visualization.preselect();
119 122 }
120 123 },
121 124  
122 125 _allowThirdStep : function(){
123   - this.$.slider.chevronRight(false);
124   - var fields = this.$.select_data.getSelectedFields();
125   - var filters = this.$.select_data.getFilters();
126   - var data = this.$.select_data.getData();
127   - if(fields.length > 0) {
128   - this.$.select_visualization.init();
129   - this.$.select_visualization.setFields(fields);
130   - this.$.select_visualization.setFilters(filters);
131   - this.$.select_visualization.setData(data);
132   - this.$.slider.chevronRight(true);
133   - }
  126 +// this.debounce('_allowThirdStep', function () { console.log("_allowThirdStep");
  127 + this.$.slider.chevronRight(false);
  128 + var selectedFields = this.$.select_data.getSelectedFields();
  129 + var filters = this.$.select_data.getFilters();
  130 + var aggregators = this.$.select_data.getAggregators();
  131 + var data = this.$.select_data.getData();
  132 + if(selectedFields.length > 0) {
  133 + this.$.select_visualization.init();
  134 + this.$.select_visualization.setSelectedFields(selectedFields);
  135 + this.$.select_visualization.setFilters(filters);
  136 + this.$.select_visualization.setAggregators(aggregators);
  137 + this.$.select_visualization.setData(data);
  138 + this.$.slider.chevronRight(true);
  139 + }
  140 +// }, 300);
134 141 }
135 142  
136 143 });
... ...
controllets/expert-query-controllet/demo/index.html 0 โ†’ 100755
  1 +<html>
  2 +
  3 +<head>
  4 + <script src="../../shared_js/jquery-1.11.2.min.js"></script>
  5 +
  6 + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  7 +
  8 + <link rel="import" href="../expert-query-controllet.html"/>
  9 +
  10 + <script src="../../../locales/controllet_ln.js"></script>
  11 +
  12 + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  13 + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 +</head>
  15 +
  16 +<body>
  17 +
  18 + <style>
  19 +
  20 + .container {
  21 + height: 400px;
  22 + width: 1200px;
  23 + position: relative;
  24 + top: 100px;
  25 + left:300px;
  26 + }
  27 +
  28 + </style>
  29 +
  30 + <div class="container">
  31 + <expert-query-controllet id="query"></expert-query-controllet>
  32 + </div>
  33 +
  34 + <script>
  35 + ln["localization"] = "en";
  36 +
  37 + var fields = ["aaa","bbb", "ccc", "ddd", "eee", "fff"];
  38 + var selectedFields = ["ccc","aaa", "eee"];
  39 +
  40 +// query.setFields(fields);
  41 +// query.setSelectedFields(selectedFields);
  42 + </script>
  43 +
  44 +</body>
  45 +
  46 +</html>
0 47 \ No newline at end of file
... ...
controllets/expert-query-controllet/expert-query-controllet.html 0 โ†’ 100755
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  6 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  7 +
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
  9 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  10 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  11 +
  12 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
  13 +
  14 +<link rel="import" href="../filters-controllet/filters-controllet.html" />
  15 +<link rel="import" href="../aggregators-controllet/aggregators-controllet.html" />
  16 +
  17 +<script type="text/javascript" src="../../alasql-utility/alasql.min.js"></script>
  18 +<script type="text/javascript" src="../../alasql-utility/alasql-utility.js"></script>
  19 +
  20 +<dom-module id="expert-query-controllet">
  21 +
  22 + <template>
  23 +
  24 + <style is="custom-style">
  25 +
  26 + #expert_container {
  27 + display: none;
  28 + height: 100%;
  29 + width: 100%;
  30 + }
  31 +
  32 + #expert_container * {
  33 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  34 + font-size: 16px;
  35 + line-height: 24px;
  36 + }
  37 +
  38 + #expert_container #neon_container {
  39 + height: calc(100% - 48px);
  40 + width: 100%;
  41 + }
  42 +
  43 + #header_open {
  44 + display: flex;
  45 + /*background: #B6B6B6;*/
  46 + /*border: 1px solid #b6b6b6;*/
  47 + /*height: 46px;*/
  48 + }
  49 +
  50 + #expert_container paper-tabs {
  51 + /*height: 46px;*/
  52 + width: calc(100% - 48px);
  53 + }
  54 +
  55 + #expert_container #query_container {
  56 + padding: 28px 8px 0px 8px;
  57 + }
  58 +
  59 + #expert_container_close {
  60 + height: 48px;
  61 + width: 100%;
  62 +
  63 + display: flex;
  64 + }
  65 +
  66 + #expert_container_close * {
  67 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  68 + font-size: 16px;
  69 + line-height: 24px;
  70 + }
  71 +
  72 + #expert_container_close #header_close {
  73 + height: 24px;
  74 + width: calc(100% - 384px);
  75 + padding: 12px 0px;
  76 + text-align: center;
  77 + font-weight: 700;
  78 +
  79 + color: #00BCD4;
  80 + background: #FFFFFF;
  81 + cursor: pointer;
  82 + }
  83 +
  84 + #expert_container_close #space {
  85 + width: 192px;
  86 + }
  87 +
  88 + paper-tooltip {
  89 + --paper-tooltip-background: black;
  90 + }
  91 +
  92 + paper-tooltip p {
  93 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  94 + font-size: 16px;
  95 + line-height: 24px;
  96 +
  97 + margin: 0;
  98 + padding: 0;
  99 + }
  100 +
  101 + paper-icon-button {
  102 + height: 48px;
  103 + width: 48px;
  104 + padding: 8px;
  105 + color: #2196F3;
  106 + --paper-icon-button-ink-color: #2196F3;
  107 + }
  108 +
  109 + paper-icon-button.disabled{
  110 + color: #B6B6B6;
  111 + }
  112 +
  113 + paper-icon-button[icon=fullscreen],
  114 + paper-icon-button[icon=fullscreen-exit] {
  115 + height: 48px;
  116 + width: 48px;
  117 + padding: 8px;
  118 + color: #00BCD4;
  119 + --paper-icon-button-ink-color: #00BCD4;
  120 + }
  121 +
  122 + paper-icon-button[icon=fullscreen] {
  123 + margin-left: 48px;
  124 + }
  125 +
  126 + paper-tabs {
  127 + background: #B6B6B6;
  128 + /*--paper-tabs-selection-bar-color: #00BCD4;*/
  129 + }
  130 +
  131 + paper-tab {
  132 + font-weight: 700;
  133 + border-right: 2px solid #FFFFFF;
  134 + /*--paper-tab-ink: #2196F3;*/
  135 + }
  136 +
  137 + paper-tab:nth-child(3) {
  138 + border-right: 0;
  139 + }
  140 +
  141 + paper-tab.iron-selected {
  142 + color: #FFFFFF;
  143 + background: #2196F3;;
  144 + }
  145 +
  146 + paper-tab:not(.iron-selected):hover {
  147 + color: #2196F3;
  148 + }
  149 +
  150 + </style>
  151 +
  152 + <paper-material id="expert_container_close" elevation="5">
  153 + <div id="space"></div>
  154 +
  155 + <div id="header_close" on-click="_fullscreen"><span id="expert"></span></div>
  156 +
  157 + <paper-icon-button id="disable_filters" class=" disabled" icon="filter-list" on-click="_disableFilters"></paper-icon-button>
  158 + <paper-icon-button id="disable_aggregators" class=" disabled" icon="group-work" on-click="_disableAggregators"></paper-icon-button>
  159 + <paper-icon-button icon="fullscreen" on-click="_fullscreen"></paper-icon-button>
  160 + </paper-material>
  161 +
  162 + <paper-tooltip for="disable_filters" offset="12" position="top"><p><span id="tooltip_filters"></span></p></paper-tooltip>
  163 + <paper-tooltip for="disable_aggregators" offset="12" position="top"><p><span id="tooltip_aggregators"></span></p></paper-tooltip>
  164 +
  165 + <paper-material id="expert_container" elevation="5">
  166 +
  167 + <div id="header_open">
  168 + <paper-tabs selected="{{tabIndex}}" no-bar>
  169 + <paper-tab noink><span id="filtersTab"></span></paper-tab>
  170 + <paper-tab noink><span id="groupByTab"></span></paper-tab>
  171 + <paper-tab noink><span id="queryTab"></span></paper-tab>
  172 + </paper-tabs>
  173 +
  174 + <paper-icon-button icon="fullscreen-exit" on-click="_fullscreenExit"></paper-icon-button>
  175 + </div>
  176 +
  177 + <neon-animated-pages id="neon_container" selected="{{tabIndex}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  178 +
  179 + <neon-animatable>
  180 + <filters-controllet id="filters"></filters-controllet>
  181 + </neon-animatable>
  182 +
  183 + <neon-animatable>
  184 + <aggregators-controllet id="aggregators"></aggregators-controllet>
  185 + </neon-animatable>
  186 +
  187 + <neon-animatable>
  188 + <div id="query_container"></div>
  189 + </neon-animatable>
  190 +
  191 + </neon-animated-pages>
  192 +
  193 +
  194 + </paper-material>
  195 +
  196 + </template>
  197 +
  198 + <script>
  199 +
  200 + Polymer({
  201 +
  202 + is : 'expert-query-controllet',
  203 +
  204 + properties : {
  205 +
  206 + tabIndex: {
  207 + type: Number,
  208 + value: -1
  209 + },
  210 +
  211 + fields : {
  212 + type : Array,
  213 + value : []
  214 + },
  215 +
  216 + selectedFields : {
  217 + type : Array,
  218 + value : []
  219 + },
  220 +
  221 + filters : {
  222 + type : Array,
  223 + value : []
  224 + },
  225 +
  226 + aggregators : {
  227 + type : Array,
  228 + value : []
  229 + }
  230 +
  231 + },
  232 +
  233 + listeners: {
  234 + 'filters-controllet_filters': '_updateFilters',
  235 + 'aggregators-controllet_aggregators': '_updateAggregators'
  236 + },
  237 +
  238 + ready : function() {
  239 + },
  240 +
  241 + attached : function() {
  242 + this._translate();
  243 + },
  244 +
  245 + setFields : function(fields) {
  246 + this.fields = fields;
  247 +
  248 + this.$.filters.setFields(fields);
  249 + this.$.aggregators.setFields(fields);
  250 + },
  251 +
  252 + setSelectedFields : function(selectedFields) {
  253 + this.selectedFields = selectedFields;
  254 +
  255 + this.$.filters.setSelectedFields(selectedFields);
  256 + this.$.aggregators.setSelectedFields(selectedFields);
  257 +
  258 + this._updateQuery();
  259 + },
  260 +
  261 + setFilters : function(filters) {
  262 + this.async(function() {
  263 + this.$.filters.setFilters(filters);
  264 + }, 0);
  265 + },
  266 +
  267 + setAggregators : function(aggregators) {
  268 + this.async(function() {
  269 + this.$.aggregators.setAggregators(aggregators);
  270 + }, 0);
  271 + },
  272 +
  273 + reset : function() {
  274 + this.$.filters.reset();
  275 + this.$.aggregators.reset();
  276 + this.fields = [];
  277 + this.selectedFields = [];
  278 + this.filters = [];
  279 + this.aggregators = [];
  280 +// this.query = "";
  281 + },
  282 +
  283 + _translate : function() {
  284 + this.$.expert.innerHTML = ln["expert_" + ln["localization"]];
  285 + this.$.filtersTab.innerHTML = ln["filters_" + ln["localization"]];
  286 + this.$.groupByTab.innerHTML = ln["groupBy_" + ln["localization"]];
  287 + this.$.queryTab.innerHTML = ln["query_" + ln["localization"]];
  288 + this.$.tooltip_filters.innerHTML = ln["enableFilters_" + ln["localization"]];
  289 + this.$.tooltip_aggregators.innerHTML = ln["enableGroupBy_" + ln["localization"]];
  290 + },
  291 +
  292 + _fullscreen : function() {
  293 + this.$.expert_container_close.style.display = "none";
  294 + this.$.expert_container.style.display = "block";
  295 +
  296 + if(this.tabIndex == -1)
  297 + this.tabIndex = 0;
  298 +
  299 + this.fire('expert-controllet_show', {show: true});
  300 + },
  301 +
  302 + _fullscreenExit : function() {
  303 + this.$.expert_container_close.style.display = "flex";
  304 + this.$.expert_container.style.display = "none";
  305 +
  306 + this.fire('expert-controllet_show', {show: false});
  307 + },
  308 +
  309 + _updateFilters : function(e) {
  310 + this.filters = e.detail.filters;
  311 + this._updateQuery();
  312 + this._disableFiltersIcon(e.detail.filters);
  313 + },
  314 +
  315 + _disableFilters : function() {
  316 + this.$.filters._disableFilters();
  317 + },
  318 +
  319 + _disableFiltersIcon : function(filters) {
  320 + var classes = this.$.disable_filters.className;
  321 + if (filters.length > 1) {
  322 + this.$.disable_filters.className = classes.replace(" disabled", "");
  323 + this.$.tooltip_filters.innerHTML = ln["disableFilters_" + ln["localization"]];
  324 + }
  325 + else if (classes.indexOf("disabled") == -1) {
  326 + this.$.disable_filters.className = classes + " disabled";
  327 + this.$.tooltip_filters.innerHTML = ln["enableFilters_" + ln["localization"]];
  328 + }
  329 + },
  330 +
  331 + _updateAggregators : function(e) {
  332 + this.aggregators = e.detail.aggregators;
  333 + this._updateQuery();
  334 + this._disableAggregatorsIcon(e.detail.aggregators);
  335 + },
  336 +
  337 + _disableAggregators : function() {
  338 + this.$.aggregators._disableAggregators();
  339 + },
  340 +
  341 + _disableAggregatorsIcon : function(aggregators) {
  342 + var classes = this.$.disable_aggregators.className;
  343 + if (aggregators.length > 0) {
  344 + this.$.disable_aggregators.className = classes.replace(" disabled", "");
  345 + this.$.tooltip_aggregators.innerHTML = ln["disableGroupBy_" + ln["localization"]];
  346 + }
  347 + else if (classes.indexOf("disabled") == -1) {
  348 + this.$.disable_aggregators.className = classes + " disabled";
  349 + this.$.tooltip_aggregators.innerHTML = ln["enableGroupBy_" + ln["localization"]];
  350 + }
  351 + },
  352 +
  353 + _updateQuery : function() {
  354 + if(this.selectedFields.length)
  355 + this.$.query_container.innerHTML = alasql_QUERY_string(this.selectedFields, this.filters, this.aggregators, null)
  356 + .replace('SELECT', '<span style="color:#2196F3; font-weight: 700;">SELECT</span>')
  357 +// .replace('FROM ?', '<br><br><span style="color:#2196F3; font-weight: 700;">FROM</span> dataset')
  358 + .replace('FROM ?', '')
  359 + .replace('WHERE', '<br><br><span style="color:#2196F3; font-weight: 700;">WHERE</span>')
  360 + .replace('GROUP BY', '<br><br><span style="color:#2196F3; font-weight: 700;">GROUP BY</span>')
  361 + .replace(/\[/g, '')
  362 + .replace(/\]/g, '');
  363 + else
  364 + this.$.query_container.innerHTML = "";
  365 + }
  366 +
  367 + });
  368 +
  369 + </script>
  370 +
  371 +</dom-module>
0 372 \ No newline at end of file
... ...
controllets/filters-controllet/filters-controllet.html
1 1 <link rel="import" href="../../bower_components/polymer/polymer.html" />
2 2  
3   -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
4   -
5 3 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
6 4 <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
7 5 <link rel="import" href="../../bower_components/paper-item/paper-item.html">
... ... @@ -19,8 +17,9 @@
19 17 <style is="custom-style">
20 18  
21 19 #filters_container {
22   - height: 48px;
  20 + height: 100%;
23 21 width: 100%;
  22 + position: relative;
24 23 }
25 24  
26 25 #filters_container * {
... ... @@ -29,37 +28,6 @@
29 28 line-height: 24px;
30 29 }
31 30  
32   - #filters_container #header {
33   - height: 32px;
34   - padding-top: 16px;
35   - text-align: center;
36   - font-weight: 700;
37   -
38   - background: #FFFFFF;
39   - color: #00BCD4;
40   - cursor: pointer;
41   - }
42   -
43   - #filters_container #header.hide{
44   - color: #00BCD4;
45   - background: #FFFFFF;
46   - }
47   -
48   - /*#filters_container #header.hide:hover{*/
49   - /*}*/
50   -
51   - #filters_container #header.show{
52   - color: #000000;
53   - background: #B6B6B6;
54   - }
55   -
56   - #filters_container #panel {
57   - display: none;
58   - position: relative;
59   - height: calc(100% - 48px);
60   - background: #FFFFFF;
61   - }
62   -
63 31 paper-dropdown-menu {
64 32 width: 100%;
65 33 --paper-input-container-focus-color: #2196F3;
... ... @@ -87,11 +55,34 @@
87 55 }
88 56  
89 57 paper-button {
90   - margin: 0px;
91   - height: 44px;
  58 + margin: 0;
  59 + height: 48px;
  60 + padding: 12px;
92 61 color: #FFFFFF;
93 62 background: #2196F3;
94 63 font-weight: 700;
  64 +
  65 + min-width: 96px;
  66 + }
  67 +
  68 + paper-button#disable_filters {
  69 + position: absolute;
  70 + bottom: 0;
  71 + right: 0;
  72 + margin: 0 8px 8px 0;
  73 +
  74 + min-width: 192px;
  75 + }
  76 +
  77 + paper-button#disable_filters.disabled {
  78 + background-color: #B6B6B6;
  79 + }
  80 +
  81 + iron-icon[icon=filter-list] {
  82 + height: 32px;
  83 + width: 32px;
  84 + color: #FFFFFF;
  85 + margin-top: -4px;
95 86 }
96 87  
97 88 paper-button:hover {
... ... @@ -138,7 +129,8 @@
138 129 height: 44px;
139 130 width: calc(100% - 40px);
140 131 padding: 8px 0px;
141   - text-align: right;
  132 + /*text-align: right;*/
  133 + text-align: center;
142 134 }
143 135  
144 136 #filters_container .row2 {
... ... @@ -147,7 +139,7 @@
147 139 width: 100%;
148 140 }
149 141  
150   - #filters_container .row2 .highlighted {
  142 + .highlighted {
151 143 color: #2196F3;
152 144 font-weight: 700;
153 145 }
... ... @@ -162,16 +154,11 @@
162 154 height: 40px;
163 155 width: 40px;
164 156 padding: 4px 8px;
165   -
166 157 }
167 158  
168 159 </style>
169 160  
170   - <paper-material id="filters_container" elevation="5">
171   -
172   - <div id="header" class="hide" on-click="_showFiltersPanel"><span id="filters"><span id="addFilters"></span></span></div>
173   -
174   - <div id="panel">
  161 + <div id="filters_container">
175 162  
176 163 <div class="row">
177 164 <div class="ddl_container">
... ... @@ -209,7 +196,7 @@
209 196 <template is="dom-if" if="{{index}}"><!--excludes logicalOperator-->
210 197 <div class="row2">
211 198 <div class="filter">
212   - {{item.field}}&nbsp;&nbsp;&nbsp;<span class="highlighted">{{_getOperationlName(item.operation)}}</span>&nbsp;&nbsp;&nbsp;"{{item.value}}"&nbsp;&nbsp;&nbsp;<span class="highlighted">{{_getLogicalOperator(index)}}</span>
  199 + {{item.field}} <span class="highlighted">{{_getOperationlName(item.operation)}}</span> "{{item.value}}" <span class="highlighted">{{_getLogicalOperator(index)}}</span>
213 200 </div>
214 201 <div class="remove_container">
215 202 <paper-icon-button on-click="_deleteFilter" icon="cancel" class="cancel"></paper-icon-button>
... ... @@ -218,9 +205,9 @@
218 205 </template>
219 206 </template>
220 207  
221   - </div>
  208 + <paper-button id="disable_filters" raised on-click="_disableFilters"><iron-icon icon="filter-list"></iron-icon>&nbsp; <span id="disable_enable"></span></paper-button>
222 209  
223   - </paper-material>
  210 + </div>
224 211  
225 212 </template>
226 213  
... ... @@ -245,18 +232,12 @@
245 232 filters : {
246 233 type : Array,
247 234 value : [{logicalOperator: "AND"}]
248   - },
249   -
250   - show : {
251   - type : Boolean,
252   - value : false
253 235 }
254 236  
255 237 },
256 238  
257 239 ready : function() {
258   - $(this.$.panel).perfectScrollbar();
259   -// this._showFiltersPanel();gi
  240 + $(this.$.filters_container).perfectScrollbar();
260 241 this.logicalOperator = "AND";
261 242 },
262 243  
... ... @@ -266,7 +247,10 @@
266 247  
267 248 setFields : function(fields) {
268 249 this.fields = this._copy(fields);
269   - this.fields = fields;
  250 + },
  251 +
  252 + setSelectedFields : function(selectedFields) {
  253 + this.selectedFields = this._copy(selectedFields);
270 254 },
271 255  
272 256 setFilters : function(filters) {
... ... @@ -283,43 +267,26 @@
283 267  
284 268 reset : function() {
285 269 this.fields = [];
  270 + this.selectedFields = [];
286 271 this.filters = [{logicalOperator: "AND"}];
287 272 },
288 273  
289 274 _translate : function() {
290   - this.$.addFilters.innerHTML = ln["expertAddFilters_" + ln["localization"]];
291 275 this.$.filter_field.setAttribute("label", ln["filterField_" + ln["localization"]]);
292 276 this.$.filter_operation.setAttribute("label", ln["filterOperation_" + ln["localization"]]);
293 277 this.$.filter_value.setAttribute("label", ln["filterValue_" + ln["localization"]]);
  278 +
  279 + this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
294 280 },
295 281  
296 282 _fieldName : function(field) {
297 283 return field.substring(field.lastIndexOf(",")+1, field.length);
298 284 },
299 285  
300   - _showFiltersPanel : function() {
301   -// ? filter class hiddend & hover:
302   -
303   - if(!this.show) {
304   - this.$.filters_container.style.height = "100%";
305   - $(this.$.header).removeClass("hide");
306   - $(this.$.header).addClass("show");
307   - this.$.panel.style.display = "block";
308   -
309   - }
310   - else {
311   - this.$.filters_container.style.height = "48px";
312   - $(this.$.header).removeClass("show");
313   - $(this.$.header).addClass("hide");
314   - this.$.panel.style.display = "none";
315   - }
316   -
317   - this.fire('filters-controllet_show', {show: this.show});
318   -
319   - this.show = !this.show;
320   - },
321   -
322 286 _fire : function() {
  287 + this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
  288 + this.$.disable_filters.className = this.$.disable_filters.className.replace(" disabled", "");
  289 +
323 290 if (this.filters.length > 1)
324 291 this.fire('filters-controllet_filters', {filters: this.filters});
325 292 else
... ... @@ -331,13 +298,8 @@
331 298 var field = this.$.filter_field.value;
332 299 var id = this.$.filter_operation.selectedItem.id;
333 300 var operation = this.operations[id];
334   -// var operation = this.$.filter_operation.value;
335 301 var value = this.$.filter_value.value;
336 302  
337   -// var filters = this.filters;
338   -// filters.push({"field": field, "operation": operation, "value": value});
339   -// this.filters = filters;
340   -
341 303 this.filters.push({"field": field, "operation": operation, "value": value});
342 304  
343 305 this.$.filter_field_menu.select(-1);
... ... @@ -353,10 +315,6 @@
353 315 _deleteFilter : function(e) {
354 316 var index = e.model.index;
355 317  
356   -// var filters = this.filters;
357   -// filters.splice(index, 1);
358   -// this.filters = this._copy(filters);
359   -
360 318 this.filters.splice(index, 1);
361 319  
362 320 this._fire();
... ... @@ -366,28 +324,8 @@
366 324  
367 325 _getOperationlName: function(operation) {
368 326 return ln[operation + "_" + ln["localization"]];
369   -// if(operation.indexOf("not") > -1)
370   -// return ln["notContains_" + ln["localization"]];
371   -// if(operation.indexOf("contains") > -1)
372   -// return ln["contains_" + ln["localization"]];
373   -// if(operation.indexOf("start") > -1)
374   -// return ln["start_" + ln["localization"]];
375   -// if(operation.indexOf("ends") > -1)
376   -// return ln["ends_" + ln["localization"]];
377   -// return operation;
378 327 },
379 328  
380   -// _changeLogicalOperator : function() {
381   -// if(this.logicalOperator == "AND")
382   -// this.logicalOperator = "OR";
383   -// else
384   -// this.logicalOperator = "AND";
385   -//
386   -// this._fire();
387   -//
388   -// this._renderFilters();
389   -// },
390   -
391 329 _changeLogicalOperator : function() {
392 330 if(this.logicalOperator == "AND")
393 331 this.logicalOperator = "OR";
... ... @@ -416,6 +354,20 @@
416 354 return this.filters[0].logicalOperator;
417 355 },
418 356  
  357 + _disableFilters : function() {
  358 + var classes = this.$.disable_filters.className;
  359 + if (classes.indexOf("disabled") > -1) {
  360 +// this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
  361 +// this.$.disable_filters.className = classes.replace(" disabled", "");
  362 + this._fire();
  363 + }
  364 + else {
  365 + this.$.disable_enable.innerHTML = ln["enableFilters_" + ln["localization"]];
  366 + this.$.disable_filters.className = classes + " disabled";
  367 + this.fire('filters-controllet_filters', {filters: []});
  368 + }
  369 + },
  370 +
419 371 _copy : function(o) {
420 372 var out, v, key;
421 373 out = Array.isArray(o) ? [] : {};
... ...
controllets/filters-controllet/filters-controllet_old.html 0 โ†’ 100755
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  6 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  7 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  8 +
  9 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  10 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  11 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  12 +
  13 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  14 +
  15 +<dom-module id="filters-controllet">
  16 +
  17 + <template>
  18 +
  19 + <style is="custom-style">
  20 +
  21 + #filters_container {
  22 + height: 48px;
  23 + width: 100%;
  24 + }
  25 +
  26 + #filters_container * {
  27 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  28 + font-size: 16px;
  29 + line-height: 24px;
  30 + }
  31 +
  32 + #filters_container #header {
  33 + height: 32px;
  34 + padding-top: 16px;
  35 + text-align: center;
  36 + font-weight: 700;
  37 +
  38 + background: #FFFFFF;
  39 + color: #00BCD4;
  40 + cursor: pointer;
  41 + }
  42 +
  43 + #filters_container #header.hide{
  44 + color: #00BCD4;
  45 + background: #FFFFFF;
  46 + }
  47 +
  48 + /*#filters_container #header.hide:hover{*/
  49 + /*}*/
  50 +
  51 + #filters_container #header.show{
  52 + color: #000000;
  53 + background: #B6B6B6;
  54 + }
  55 +
  56 + #filters_container #panel {
  57 + display: none;
  58 + position: relative;
  59 + height: calc(100% - 48px);
  60 + background: #FFFFFF;
  61 + }
  62 +
  63 + paper-dropdown-menu {
  64 + width: 100%;
  65 + --paper-input-container-focus-color: #2196F3;
  66 + }
  67 +
  68 + :host {
  69 + --paper-dropdown-menu-icon: {
  70 + color: #2196F3;
  71 + };
  72 + }
  73 +
  74 + paper-item {
  75 + min-width: 128px;
  76 + white-space: nowrap;
  77 + }
  78 +
  79 + paper-item.iron-selected {
  80 + background-color: #2196F3;
  81 + color: #FFFFFF;
  82 + }
  83 +
  84 + paper-input {
  85 + width: 100%;
  86 + --paper-input-container-focus-color: #2196F3;
  87 + }
  88 +
  89 + paper-button {
  90 + margin: 0px;
  91 + height: 44px;
  92 + color: #FFFFFF;
  93 + background: #2196F3;
  94 + font-weight: 700;
  95 + }
  96 +
  97 + paper-button:hover {
  98 + box-shadow: 0px 8px 12px #888;
  99 + -webkit-box-shadow: 0px 8px 12px #888;
  100 + -moz-box-shadow: 0px 8px 12px #888;
  101 + }
  102 +
  103 + paper-icon-button {
  104 + padding: 4px;
  105 + }
  106 +
  107 + paper-icon-button.add {
  108 + color: #2196F3;
  109 + --paper-icon-button-ink-color: #2196F3;
  110 + }
  111 +
  112 + paper-icon-button.cancel {
  113 + color: #F44336;
  114 + --paper-icon-button-ink-color: #F44336;
  115 + }
  116 +
  117 + #filters_container .row {
  118 + display: flex;
  119 + height: 60px;
  120 + width: 100%;
  121 + }
  122 +
  123 + #filters_container .ddl_container {
  124 + display: flex;
  125 + height: 60px;
  126 + width: 25%;
  127 + padding: 0px 8px;
  128 + }
  129 +
  130 + #filters_container .add_container {
  131 + height: 40px;
  132 + width: 40px;
  133 + padding: 10px 0px;
  134 + }
  135 +
  136 + #filters_container .andOr_container {
  137 + display: inline-block;
  138 + height: 44px;
  139 + width: calc(100% - 40px);
  140 + padding: 8px 0px;
  141 + text-align: right;
  142 + }
  143 +
  144 + #filters_container .row2 {
  145 + display: flex;
  146 + height: 48px;
  147 + width: 100%;
  148 + }
  149 +
  150 + #filters_container .row2 .highlighted {
  151 + color: #2196F3;
  152 + font-weight: 700;
  153 + }
  154 +
  155 + #filters_container .filter {
  156 + height: 24px;
  157 + width: calc(75% - 16px);
  158 + padding: 12px 8px;
  159 + }
  160 +
  161 + #filters_container .remove_container {
  162 + height: 40px;
  163 + width: 40px;
  164 + padding: 4px 8px;
  165 +
  166 + }
  167 +
  168 + </style>
  169 +
  170 + <paper-material id="filters_container" elevation="5">
  171 +
  172 + <div id="header" class="hide" on-click="_showFiltersPanel"><span id="filters"><span id="addFilters"></span></span></div>
  173 +
  174 + <div id="panel">
  175 +
  176 + <div class="row">
  177 + <div class="ddl_container">
  178 + <paper-dropdown-menu id="filter_field" label="Field">
  179 + <paper-menu id="filter_field_menu" class="dropdown-content">
  180 + <template is="dom-repeat" items={{fields}}>
  181 + <paper-item id={{index}}>{{_fieldName(item)}}</paper-item>
  182 + </template>
  183 + </paper-menu>
  184 + </paper-dropdown-menu>
  185 + </div>
  186 + <div class="ddl_container">
  187 + <paper-dropdown-menu id="filter_operation" label="Operation">
  188 + <paper-menu id="filter_operation_menu" class="dropdown-content">
  189 + <template is="dom-repeat" items={{operations}}>
  190 + <paper-item id={{index}}>{{_getOperationlName(item)}}</paper-item>
  191 + </template>
  192 + </paper-menu>
  193 + </paper-dropdown-menu>
  194 + </div>
  195 + <div class="ddl_container">
  196 + <paper-input id="filter_value" label="Value" class="base_input" maxlength="32" auto-validate pattern="^[.:,;+-_ a-zA-Z0-9]*" error-message="Invalid value!"></paper-input>
  197 + </div>
  198 + <div class="ddl_container">
  199 + <div class="add_container">
  200 + <paper-icon-button on-click="_addFilter" icon="add-circle" class="add"></paper-icon-button>
  201 + </div>
  202 + <div class="andOr_container">
  203 + <paper-button raised on-click="_changeLogicalOperator"><span id="andOr">{{logicalOperator}}</span></paper-button>
  204 + </div>
  205 + </div>
  206 + </div>
  207 +
  208 + <template is="dom-repeat" items={{filters}}>
  209 + <template is="dom-if" if="{{index}}"><!--excludes logicalOperator-->
  210 + <div class="row2">
  211 + <div class="filter">
  212 + {{item.field}}&nbsp;&nbsp;&nbsp;<span class="highlighted">{{_getOperationlName(item.operation)}}</span>&nbsp;&nbsp;&nbsp;"{{item.value}}"&nbsp;&nbsp;&nbsp;<span class="highlighted">{{_getLogicalOperator(index)}}</span>
  213 + </div>
  214 + <div class="remove_container">
  215 + <paper-icon-button on-click="_deleteFilter" icon="cancel" class="cancel"></paper-icon-button>
  216 + </div>
  217 + </div>
  218 + </template>
  219 + </template>
  220 +
  221 + </div>
  222 +
  223 + </paper-material>
  224 +
  225 + </template>
  226 +
  227 + <script>
  228 +
  229 + Polymer({
  230 +
  231 + is : 'filters-controllet',
  232 +
  233 + properties : {
  234 +
  235 + fields : {
  236 + type : Array,
  237 + value : []
  238 + },
  239 +
  240 + operations : {
  241 + type : Array,
  242 + value : ["=", "!=", ">", ">=", "<", "<=", "contains", "notContains", "start", "ends"]
  243 + },
  244 +
  245 + filters : {
  246 + type : Array,
  247 + value : [{logicalOperator: "AND"}]
  248 + },
  249 +
  250 + show : {
  251 + type : Boolean,
  252 + value : false
  253 + }
  254 +
  255 + },
  256 +
  257 + ready : function() {
  258 + $(this.$.panel).perfectScrollbar();
  259 +// this._showFiltersPanel();gi
  260 + this.logicalOperator = "AND";
  261 + },
  262 +
  263 + attached : function() {
  264 + this._translate();
  265 + },
  266 +
  267 + setFields : function(fields) {
  268 + this.fields = this._copy(fields);
  269 + this.fields = fields;
  270 + },
  271 +
  272 + setFilters : function(filters) {
  273 + if(filters && filters.length > 0) {
  274 + this.filters = this._copy(filters);
  275 + this.logicalOperator = this.filters[0].logicalOperator;
  276 + this._fire();
  277 + }
  278 + },
  279 +
  280 + getFilters : function() {
  281 + return this.filters;
  282 + },
  283 +
  284 + reset : function() {
  285 + this.fields = [];
  286 + this.filters = [{logicalOperator: "AND"}];
  287 + },
  288 +
  289 + _translate : function() {
  290 + this.$.addFilters.innerHTML = ln["expertAddFilters_" + ln["localization"]];
  291 + this.$.filter_field.setAttribute("label", ln["filterField_" + ln["localization"]]);
  292 + this.$.filter_operation.setAttribute("label", ln["filterOperation_" + ln["localization"]]);
  293 + this.$.filter_value.setAttribute("label", ln["filterValue_" + ln["localization"]]);
  294 + },
  295 +
  296 + _fieldName : function(field) {
  297 + return field.substring(field.lastIndexOf(",")+1, field.length);
  298 + },
  299 +
  300 + _showFiltersPanel : function() {
  301 +// ? filter class hiddend & hover:
  302 +
  303 + if(!this.show) {
  304 + this.$.filters_container.style.height = "100%";
  305 + $(this.$.header).removeClass("hide");
  306 + $(this.$.header).addClass("show");
  307 + this.$.panel.style.display = "block";
  308 +
  309 + }
  310 + else {
  311 + this.$.filters_container.style.height = "48px";
  312 + $(this.$.header).removeClass("show");
  313 + $(this.$.header).addClass("hide");
  314 + this.$.panel.style.display = "none";
  315 + }
  316 +
  317 + this.fire('filters-controllet_show', {show: this.show});
  318 +
  319 + this.show = !this.show;
  320 + },
  321 +
  322 + _fire : function() {
  323 + if (this.filters.length > 1)
  324 + this.fire('filters-controllet_filters', {filters: this.filters});
  325 + else
  326 + this.fire('filters-controllet_filters', {filters: []});
  327 + },
  328 +
  329 + _addFilter : function() {
  330 + if (this.$.filter_field.selectedItem && this.$.filter_operation_menu.selectedItem && this.$.filter_value.value != "" && !this.$.filter_value.invalid) {
  331 + var field = this.$.filter_field.value;
  332 + var id = this.$.filter_operation.selectedItem.id;
  333 + var operation = this.operations[id];
  334 +// var operation = this.$.filter_operation.value;
  335 + var value = this.$.filter_value.value;
  336 +
  337 +// var filters = this.filters;
  338 +// filters.push({"field": field, "operation": operation, "value": value});
  339 +// this.filters = filters;
  340 +
  341 + this.filters.push({"field": field, "operation": operation, "value": value});
  342 +
  343 + this.$.filter_field_menu.select(-1);
  344 + this.$.filter_operation_menu.select(-1);
  345 + this.$.filter_value.value = "";
  346 +
  347 + this._fire();
  348 +
  349 + this._renderFilters();
  350 + }
  351 + },
  352 +
  353 + _deleteFilter : function(e) {
  354 + var index = e.model.index;
  355 +
  356 +// var filters = this.filters;
  357 +// filters.splice(index, 1);
  358 +// this.filters = this._copy(filters);
  359 +
  360 + this.filters.splice(index, 1);
  361 +
  362 + this._fire();
  363 +
  364 + this._renderFilters();
  365 + },
  366 +
  367 + _getOperationlName: function(operation) {
  368 + return ln[operation + "_" + ln["localization"]];
  369 +// if(operation.indexOf("not") > -1)
  370 +// return ln["notContains_" + ln["localization"]];
  371 +// if(operation.indexOf("contains") > -1)
  372 +// return ln["contains_" + ln["localization"]];
  373 +// if(operation.indexOf("start") > -1)
  374 +// return ln["start_" + ln["localization"]];
  375 +// if(operation.indexOf("ends") > -1)
  376 +// return ln["ends_" + ln["localization"]];
  377 +// return operation;
  378 + },
  379 +
  380 +// _changeLogicalOperator : function() {
  381 +// if(this.logicalOperator == "AND")
  382 +// this.logicalOperator = "OR";
  383 +// else
  384 +// this.logicalOperator = "AND";
  385 +//
  386 +// this._fire();
  387 +//
  388 +// this._renderFilters();
  389 +// },
  390 +
  391 + _changeLogicalOperator : function() {
  392 + if(this.logicalOperator == "AND")
  393 + this.logicalOperator = "OR";
  394 + else
  395 + this.logicalOperator = "AND";
  396 +
  397 + this.filters[0] = {logicalOperator: this.logicalOperator}
  398 +
  399 + this._fire();
  400 +
  401 + this._renderFilters();
  402 + },
  403 +
  404 + _renderFilters : function() {
  405 + var filters = this.filters.slice();
  406 + this.filters = [];
  407 + this.async(function() {
  408 + this.filters = filters;
  409 + }, 0);
  410 + },
  411 +
  412 + _getLogicalOperator : function(index) {
  413 + if(index == this.filters.length -1)
  414 + return "";
  415 + else
  416 + return this.filters[0].logicalOperator;
  417 + },
  418 +
  419 + _copy : function(o) {
  420 + var out, v, key;
  421 + out = Array.isArray(o) ? [] : {};
  422 + for (key in o) {
  423 + v = o[key];
  424 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  425 + }
  426 + return out;
  427 + }
  428 +
  429 + });
  430 +
  431 + </script>
  432 +
  433 +</dom-module>
0 434 \ No newline at end of file
... ...
controllets/items-vslider-controllet/demo/index.html
... ... @@ -8,12 +8,19 @@
8 8 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
9 9 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
10 10  
  11 + <script src="../../../locales/controllet_ln.js"></script>
  12 +
11 13 <link rel="import" href="../items-vslider-controllet.html" />
12 14 </head>
13 15  
14 16 <body>
15 17  
16   -<items-vslider-controllet datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></items-vslider-controllet>
  18 +<items-vslider-controllet id="ivs" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></items-vslider-controllet>
  19 +
  20 +<script>
  21 + var ivs = document.getElementById('ivs');
  22 + ivs.setEnabledDatalets(["TEXT", "TEXT"]);
  23 +</script>
17 24  
18 25 </body>
19 26  
... ...
controllets/items-vslider-controllet/items-vslider-controllet.html
... ... @@ -10,13 +10,15 @@
10 10  
11 11 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
12 12  
  13 +<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>
  14 +
13 15 <dom-module id="items-vslider-controllet">
14 16  
15 17 <template>
16 18  
17 19 <style is="custom-style">
18 20 paper-icon-button{
19   - color: #FFFFFF;
  21 + /*color: #FFFFFF;*/
20 22 height: 32px;/*48*/
21 23 width: 32px;/*48*/
22 24 padding: 0px;
... ... @@ -58,6 +60,20 @@
58 60 background-color: #FFFFFF;
59 61 }
60 62  
  63 + .content-card-disabled{
  64 + position: relative;
  65 + float: left;/*firefox*/
  66 + margin : 16px 16px 0px 16px;
  67 + padding: 8px;
  68 + height: 124px;
  69 + width: 124px;
  70 + cursor: pointer;
  71 + background-color: #FFFFFF;
  72 +
  73 + opacity: 0.5;
  74 + pointer-events:none;
  75 + }
  76 +
61 77 img{
62 78 width: 100%;
63 79 }
... ... @@ -70,7 +86,8 @@
70 86 width: 124px;
71 87 color: #000000;
72 88 background-color: rgba(158, 158, 158, 0.8);/*9E*/
73   - /*background-color: rgba(182, 182, 182, 0.9);/!*B&*!/*/
  89 + /*background-color: #B6B6B6;*/
  90 + /*opacity: 0.9;*/
74 91 z-index: 1;
75 92 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
76 93 font-size: 16px;
... ... @@ -79,10 +96,12 @@
79 96 }
80 97  
81 98 .legend.selected {
82   - background-color: #2196F3;
83   - /*background-color: rgba(33, 150, 243, 0.8);*/
84 99 color: #FFFFFF;
  100 + background-color: #2196F3;
  101 + opacity: 0.9;
85 102  
  103 + /*background: black;*/
  104 + /*color: #2196F3;*/
86 105 }
87 106  
88 107 #items_vslider_search{
... ... @@ -94,7 +113,7 @@
94 113 }
95 114  
96 115 .search{
97   - color: #FFFFFF
  116 + /*color: #FFFFFF*/
98 117 }
99 118  
100 119 .clear {
... ... @@ -121,7 +140,7 @@
121 140  
122 141 <div id="div_datalets_container" class="flex">
123 142 <template is="dom-repeat" items="{{filteredDatalets}}">
124   - <paper-material id={{item.imageName}} elevation="1" class='content-card' on-click="_selectDatalet">
  143 + <paper-material id={{item.imageName}} elevation="1" class$="{{item.class}}" on-click="_selectDatalet">
125 144 <div class="legend">{{_getChartName(item.imageName)}}</div>
126 145 <div><img src={{item.imageUrl}}></div>
127 146 </paper-material>
... ... @@ -174,6 +193,7 @@
174 193 value : "",
175 194 observer : '_filterDatalets'
176 195 }
  196 +
177 197 },
178 198  
179 199 listeners: {
... ... @@ -185,15 +205,34 @@
185 205 },
186 206  
187 207 attached : function() {
188   -// if(this.preselectedDatalet){
  208 +// if(this.preselectedDatalet)
189 209 // this._preselectDatalet();
190   -// this.preselectedDatalet = undefined;
191   -// }
192 210  
193 211 this._translate();
194 212 },
195 213  
196   - _reset : function() {
  214 +// _preselectDatalet : function(){
  215 +// this.async(function() {
  216 +// var dataletCard = document.getElementById(this.preselectedDatalet);
  217 +// dataletCard.elevation = "5";
  218 +// dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
  219 +// this.selectedDatalet = this.preselectedDatalet;
  220 +//
  221 +// this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
  222 +// this.preselectedDatalet = undefined;
  223 +// }, 300);
  224 +// },
  225 +
  226 + preselectDatalet : function(preselectedDatalet){
  227 + var dataletCard = document.getElementById(preselectedDatalet);
  228 + dataletCard.elevation = "5";
  229 + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
  230 + this.selectedDatalet = preselectedDatalet;
  231 +
  232 + this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
  233 + },
  234 +
  235 + reset : function() {
197 236 if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){
198 237 var dataletCard = document.getElementById(this.selectedDatalet);
199 238 dataletCard.elevation = "1";
... ... @@ -216,27 +255,85 @@
216 255 _getDatalets : function(e){
217 256 var datalets = new Array();
218 257 for(var i=0; i < e.detail.response.length; i++){
219   - var datalet = { imageName : e.detail.response[i].name.replace("-datalet", ""), imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png" };
  258 + var datalet = {
  259 + imageName : e.detail.response[i].name.replace("-datalet", ""),
  260 + imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png",
  261 + inputTypes : this._getInputTypes(e.detail.response[i].idm.inputs.input),
  262 + class : "content-card"
  263 + };
  264 +
220 265 if(e.detail.response[i].type != "hidden")
221 266 datalets.push(datalet);
222 267 }
223 268  
224 269 this.datalets = datalets;
225   - this.filteredDatalets = datalets;
  270 + /**/this.filteredDatalets = datalets;
  271 + },
  272 +
  273 + _getInputTypes : function(inputs){
  274 + var inputTypes = [];
  275 + for(var i=0; i < inputs.length; i++) {
  276 + if(inputs[i].selection != "?" /*&& inputs[i].selection != "*"*/)
  277 + inputTypes.push(inputs[i].type);
  278 + }
  279 + return inputTypes;
  280 + },
  281 +
  282 + setEnabledDatalets : function(fields){
  283 + var dataTypes = [];
  284 + for(var i=0; i < fields.length; i++)
  285 + dataTypes.push(fields[i].type);
  286 +
  287 + this.async(function() {
  288 +// console.log(DataTypeHierarchy.canConvert("TEXT", "NUMBER"));
  289 +// console.log(DataTypeHierarchy.canConvert("NUMBER", "TEXT"));
  290 +
  291 + for(var i=0; i < this.datalets.length; i++) {
  292 + if(!this._enebled(this.datalets[i].inputTypes, dataTypes))
  293 + this.datalets[i]["class"] = "content-card-disabled";
  294 + else
  295 + this.datalets[i]["class"] = "content-card";
  296 + }
  297 +
  298 + this._filterDatalets();
  299 + }, 1);//remove async
  300 + },
  301 +
  302 + _enebled : function(inputTypes, dataTypes){
  303 + if((inputTypes.indexOf("NUMBER") > -1) && !(dataTypes.indexOf("NUMBER") > -1))
  304 + return false;
  305 + return true;
226 306 },
227 307  
  308 +// _enebled : function(dataTypes, inputTypes){
  309 +// var enabled = true;
  310 +// for(var i=0; i < inputTypes.length; i++) {
  311 +// var canConvert = false;
  312 +// for(var j=0; j < dataTypes.length; j++) {
  313 +// if(DataTypeHierarchy.canConvert(dataTypes[j], inputTypes[i])) {
  314 +// canConvert = true;
  315 +// break;
  316 +// }
  317 +// }
  318 +// if(!canConvert)
  319 +// enabled = false;
  320 +// }
  321 +// return enabled;
  322 +// },
  323 +
228 324 _filterDatalets : function(){
229 325 var datalets = new Array();
230 326 for(var i=0; i < this.datalets.length; i++){
231 327 var datalet = this.datalets[i];
232 328 var imageName = this._getChartName(datalet.imageName).toLowerCase();
233   -// console.log(imageName);
234   -// console.log(this.filter);
235 329 if(imageName.indexOf(this.filter.toLowerCase()) > -1)
236 330 datalets.push(datalet);
237 331 }
238 332  
239   - this.filteredDatalets = datalets;
  333 + this.filteredDatalets = [];
  334 + this.async(function() {
  335 + this.filteredDatalets = datalets;
  336 + }, 0);
240 337  
241 338 $("#div_datalets_container").animate({ scrollTop: 0}, 0);
242 339 },
... ... @@ -278,32 +375,13 @@
278 375 this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
279 376 },
280 377  
281   - _preselectDatalet : function(){
282   -// this.async(function() {
283   - var dataletCard = document.getElementById(this.preselectedDatalet);
284   -// console.log(dataletCard);
285   -// console.log(this.preselectedDatalet);
286   -// var id = "#"+this.preselectedDatalet;
287   -// var dataletCard = $(id);
288   -// var dataletCard = this.$$("#datatable");
289   -// console.log(dataletCard);
290 378  
291   - dataletCard.elevation = "5";
292   - dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
293   -
294   -// dataletCard.find(".legend")[0].className += " selected";
295   - this.selectedDatalet = this.preselectedDatalet;
296   -
297   - this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
298   -// }, 500);
299   - },
300 379  
301 380 _getImageUrl : function(index){
302 381 return this.datalets[index].imageUrl;
303 382 },
304 383  
305 384 _onPrevClick : function() {
306   -
307 385 var container = $("#div_datalets_container");
308 386 var h = container.height();
309 387 var dataletPerPage = parseInt(h/156);
... ...
controllets/page-slider-controllet/page-slider-controllet.html
... ... @@ -8,6 +8,8 @@
8 8 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
9 9 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
10 10  
  11 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
  12 +
11 13 <dom-module id="page-slider-controllet">
12 14  
13 15 <template>
... ... @@ -30,6 +32,19 @@
30 32 color: #B6B6B6;
31 33 }
32 34  
  35 + paper-tooltip {
  36 + --paper-tooltip-background: black;
  37 + }
  38 +
  39 + paper-tooltip p {
  40 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  41 + font-size: 16px;
  42 + line-height: 24px;
  43 +
  44 + margin: 0;
  45 + padding: 0;
  46 + }
  47 +
33 48 .header{
34 49 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
35 50 width: 100%;
... ... @@ -96,6 +111,9 @@
96 111 </div>
97 112 </div>
98 113  
  114 + <paper-tooltip for="slider_chevron_left" position="right" offset="0"><p><span id="back"></span></p></paper-tooltip>
  115 + <paper-tooltip for="slider_chevron_right" position="left" offset="-16"><p><span id="forward"></span></p></paper-tooltip>
  116 +
99 117 <neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
100 118 <content></content>
101 119 </neon-animated-pages>
... ... @@ -160,8 +178,11 @@
160 178 attached : function() {
161 179 this.fire('page-slider-controllet_selected', {selected : this.selected});
162 180  
163   - this.$.slider_chevron_left.setAttribute("title", ln["back_" + ln["localization"]]);
164   - this.$.slider_chevron_right.setAttribute("title", ln["forward_" + ln["localization"]]);
  181 +// this.$.slider_chevron_left.setAttribute("title", ln["back_" + ln["localization"]]);
  182 +// this.$.slider_chevron_right.setAttribute("title", ln["forward_" + ln["localization"]]);
  183 +
  184 + this.$.back.innerHTML = ln["back_" + ln["localization"]];
  185 + this.$.forward.innerHTML = ln["forward_" + ln["localization"]];
165 186 },
166 187  
167 188 setTitle : function(title, subtitle) {
... ...
controllets/search-panel-controllet/search-panel-controllet.html
... ... @@ -36,6 +36,7 @@
36 36 <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
37 37 <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
38 38 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  39 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
39 40  
40 41 <!--
41 42 `text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements.
... ... @@ -62,14 +63,19 @@ Example:
62 63 <style is="custom-style">
63 64  
64 65 paper-input.search-text{
65   - --paper-input-container-input-color: #ffffff;
66   - --paper-input-container-focus-color: #ffffff;
67   - --paper-input-container-color: #ffffff;
  66 + --paper-input-container-input-color: var(--search-box-container-color,#ffffff);
  67 + --paper-input-container-focus-color: var(--search-box-container-color,#ffffff);
  68 + --paper-input-container-color: var(--search-box-container-color,#ffffff);
68 69 position: absolute;
69 70 width: 340px;
70 71 margin-left: -5px;
71 72 }
72 73  
  74 + paper-fab#search_button{
  75 + height: 40px;
  76 + width: 40px;
  77 + }
  78 +
73 79 paper-icon-button
74 80 {
75 81 }
... ... @@ -80,6 +86,10 @@ Example:
80 86 <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
81 87 </template>
82 88  
  89 + <template is="dom-if" if="{{paperfab}}">
  90 + <paper-fab id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-fab>
  91 + </template>
  92 +
83 93 <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
84 94 <neon-animatable></neon-animatable>
85 95 <neon-animatable>
... ... @@ -91,6 +101,7 @@ Example:
91 101 <template is="dom-if" if="{{rightDirection}}">
92 102 <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
93 103 </template>
  104 +
94 105 </div>
95 106  
96 107 </template>
... ... @@ -137,6 +148,10 @@ Example:
137 148 rightDirection: {
138 149 type: String,
139 150 value: undefined
  151 + },
  152 + paperfab: {
  153 + type: Boolean,
  154 + value: false
140 155 }
141 156 },
142 157  
... ... @@ -146,7 +161,8 @@ Example:
146 161 this.$.search_text.style.left = '5px';
147 162 }else if(this.rightDirection != undefined){
148 163 this.$.search_text.style.right = '5px';
149   - }
  164 + }else if(this.paperfab != undefined)
  165 + this.$.search_text.style.right = '45px';
150 166  
151 167 },
152 168 _toggleClick: function(e){
... ... @@ -170,7 +186,9 @@ Example:
170 186 _valueChanged : function(oldvalue, newValue){
171 187 var t = this;
172 188 clearTimeout(this.timer);
173   - this.timer = setTimeout(function(){t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})}, 0);
  189 + this.timer = setTimeout(function(){
  190 + t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})
  191 + }, 0);
174 192 },
175 193 /**
176 194 * It returns the value in text area
... ...
controllets/select-data-controllet/select-data-controllet.html
... ... @@ -2,7 +2,7 @@
2 2  
3 3 <link rel="import" href="../select-fields-controllet/select-fields-controllet.html" />
4 4 <link rel="import" href="../data-table-controllet/data-table-controllet.html" />
5   -<link rel="import" href="../filters-controllet/filters-controllet.html" />
  5 +<link rel="import" href="../expert-query-controllet/expert-query-controllet.html" />
6 6  
7 7 <link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html" />
8 8  
... ... @@ -44,7 +44,7 @@
44 44 width: 100%;
45 45 }
46 46  
47   - #select_data_controllet_container #filters_container {
  47 + #select_data_controllet_container #expert_container {
48 48 height: 48px;
49 49 width: 100%;
50 50 margin-top: 24px;
... ... @@ -64,8 +64,8 @@
64 64 <div id="table_container">
65 65 <data-table-controllet id="data_table"></data-table-controllet>
66 66 </div>
67   - <div id="filters_container">
68   - <filters-controllet id="filters"></filters-controllet>
  67 + <div id="expert_container">
  68 + <expert-query-controllet id="expert"></expert-query-controllet>
69 69 </div>
70 70 </div>
71 71 </div>
... ... @@ -83,7 +83,6 @@
83 83 dataUrl : {
84 84 type : String,
85 85 value : undefined
86   -// observer : '_init'
87 86 },
88 87  
89 88 data : {
... ... @@ -96,6 +95,11 @@
96 95 value : []
97 96 },
98 97  
  98 + aggregators : {
  99 + type : Array,
  100 + value : []
  101 + },
  102 +
99 103 selectedFields : {
100 104 type : Array,
101 105 value : []
... ... @@ -104,13 +108,13 @@
104 108 },
105 109  
106 110 listeners: {
107   - 'filters-controllet_show': '_resizeFilters',
  111 + 'expert-controllet_show': '_resizeExpertWindow',
108 112 'select-fields-controllet_selected-fields': '_updateFields',
109   - 'filters-controllet_filters': '_updateFilters'
  113 + 'filters-controllet_filters': '_updateFilters',
  114 + 'aggregators-controllet_aggregators': '_updateAggregators'
110 115 },
111 116  
112 117 ready : function() {
113   - this.showFilter = false;
114 118 },
115 119  
116 120 attached : function(){
... ... @@ -119,23 +123,47 @@
119 123 window.addEventListener("resize", function() { that._resize(); });
120 124 },
121 125  
  126 + getFields : function() {
  127 + if(this.aggregators && this.aggregators.length) {
  128 + var selectedFields = [];
  129 + for (var i = 0; i < this.aggregators.length; i++) {
  130 + if(this.aggregators[i]["operation"] == "GROUP BY")
  131 + selectedFields.push(this.aggregators[i]["field"]);
  132 + else
  133 + selectedFields.push(this.aggregators[i]["operation"] + "(" + this.aggregators[i]["field"] + ")");
  134 + }
  135 + return selectedFields;
  136 + }
  137 + return this.selectedFields;
  138 + },
  139 +
122 140 getSelectedFields : function() {
123   - return utility_getSelectedFields(this.fields, this.selectedFields);;
  141 + return this.selectedFields;
124 142 },
125 143  
126 144 getFilters : function() {
127 145 return this.filters;
128 146 },
129 147  
  148 + getAggregators : function() {
  149 + return this.aggregators;
  150 + },
  151 +
130 152 getData : function() {
131   - //return datatable.getData
132   - //this.fields = "*"
133   - var data = alasql_QUERY(this.data, this.fields, this.filters, null, null);
134 153 var converter = new DataTypeConverter();
  154 +
  155 + var data = alasql_QUERY(this.data, this.selectedFields, this.filters, null, null);
135 156 var result = converter.inferJsonDataType(data, ["*"]);
136 157 result = converter.cast(result);
137 158 data = result.dataset;
138 159  
  160 + if(this.aggregators && this.aggregators.length) {
  161 + data = alasql_QUERY(data, this.selectedFields, null, this.aggregators, null);
  162 + result = converter.inferJsonDataType(data, ["*"]);
  163 + result = converter.cast(result);
  164 + data = result.dataset;
  165 + }
  166 +
139 167 return data;
140 168 },
141 169  
... ... @@ -147,38 +175,42 @@
147 175 },
148 176  
149 177 setFilters : function(filters) {
150   - this.async(function() {
151   - this.$.filters.setFilters(filters);
152   - }, 0);
  178 + this.$.expert.setFilters(filters);
153 179 },
154 180  
155   - _resizeFilters : function() {
156   - if(!this.showFilter) {
  181 + setAggregators : function(aggregators) {
  182 + this.$.expert.setAggregators(aggregators);
  183 + },
  184 +
  185 + _resizeExpertWindow : function(e) {
  186 + if(e.detail.show) {
157 187 this.$.table_container.style.height = "calc(50% - 12px)";
158   - this.$.filters_container.style.height = "calc(50% - 12px)";
  188 + this.$.expert_container.style.height = "calc(50% - 12px)";
159 189 }
160 190 else {
161 191 this.$.table_container.style.height = "calc(100% - 72px)";
162   - this.$.filters_container.style.height = "48px";
  192 + this.$.expert_container.style.height = "48px";
163 193 }
164 194  
165 195 this.$.data_table._resize();
166   -
167   - this.showFilter = !this.showFilter;
168 196 },
169 197  
170 198 _updateFields : function(e) {
171   - this.selectedFields = e.detail.selectedFields;
172   - var fields = utility_getSelectedFields(this.fields, this.selectedFields);
173   - var data = alasql_QUERY(this.data, fields, this.filters, null, null);
174   - this.$.data_table.setData(data);
  199 + var selectedFields = e.detail.selectedFields;
  200 + this.selectedFields = utility_getSelectedFields(this.fields, selectedFields);
  201 + this.$.data_table.setData(this.getData());
  202 +
  203 + this.$.expert.setSelectedFields(this.selectedFields);
175 204 },
176 205  
177 206 _updateFilters : function(e) {
178 207 this.filters = e.detail.filters;
179   - var fields = utility_getSelectedFields(this.fields, this.selectedFields);
180   - var data = alasql_QUERY(this.data, fields, this.filters, null, null);
181   - this.$.data_table.setData(data);
  208 + this.$.data_table.setData(this.getData());
  209 + },
  210 +
  211 + _updateAggregators : function(e) {
  212 + this.aggregators = e.detail.aggregators;
  213 + this.$.data_table.setData(this.getData());
182 214 },
183 215  
184 216 init : function() {
... ... @@ -204,7 +236,8 @@
204 236 that.data = alasql_QUERY(data, that.fields, null, null, null);
205 237  
206 238 that.$.select_fields.setFields(that.fields);
207   - that.$.filters.setFields(that.fields);
  239 + that.$.expert.setFields(that.fields);
  240 +// that.$.expert.setSelectedFields(that.selectedFields);
208 241  
209 242 that.fire('data-ready', {ready : true});
210 243 },
... ... @@ -225,16 +258,18 @@
225 258 this.data = alasql_QUERY(data, this.fields, null, null, null);
226 259  
227 260 this.$.select_fields.setFields(this.fields);
228   - this.$.filters.setFields(this.fields);
  261 + this.$.expert.setFields(this.fields);
  262 +// this.$.expert.setSelectedFields(this.selectedFields);
229 263 }
230 264 },
231 265  
232 266 reset : function() {
233 267 this.filters = [];
  268 + this.aggregators = [];
234 269 this.selectedFields = [];
235 270 this.$.select_fields.reset();
236 271 this.$.data_table.reset();
237   - this.$.filters.reset();
  272 + this.$.expert.reset();
238 273 },
239 274  
240 275 _resize : function(){
... ...
controllets/select-data-controllet/select-data-controllet_old.html 0 โ†’ 100755
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../select-fields-controllet/select-fields-controllet.html" />
  4 +<link rel="import" href="../data-table-controllet/data-table-controllet.html" />
  5 +<link rel="import" href="../filters-controllet/filters-controllet.html" />
  6 +
  7 +<link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html" />
  8 +
  9 +<script type="text/javascript" src="../../alasql-utility/alasql.min.js"></script>
  10 +<script type="text/javascript" src="../../alasql-utility/alasql-utility.js"></script>
  11 +
  12 +<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>
  13 +
  14 +<dom-module id="select-data-controllet">
  15 +
  16 + <style is="custom-style">
  17 +
  18 + #select_data_controllet_container {
  19 + display: flex;
  20 + flex-direction: row;
  21 + margin-top: 8px;
  22 + }
  23 +
  24 + #select_data_controllet_container * {
  25 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  26 + font-size: 16px;
  27 + line-height: 24px;
  28 + }
  29 +
  30 + #select_data_controllet_container #fields_container {
  31 + height: 100%;
  32 + width: 20%;
  33 + min-width: 192px;
  34 + }
  35 +
  36 + #select_data_controllet_container #right_container {
  37 + height: 100%;
  38 + width: calc(80% - 24px);
  39 + margin-left: 24px;
  40 + }
  41 +
  42 + #select_data_controllet_container #table_container {
  43 + height: calc(100% - 72px);
  44 + width: 100%;
  45 + }
  46 +
  47 + #select_data_controllet_container #filters_container {
  48 + height: 48px;
  49 + width: 100%;
  50 + margin-top: 24px;
  51 + }
  52 +
  53 + </style>
  54 +
  55 + <template>
  56 +
  57 + <providers-utility-controllet></providers-utility-controllet>
  58 +
  59 + <div id="select_data_controllet_container">
  60 + <div id="fields_container">
  61 + <select-fields-controllet id="select_fields"></select-fields-controllet>
  62 + </div>
  63 + <div id="right_container">
  64 + <div id="table_container">
  65 + <data-table-controllet id="data_table"></data-table-controllet>
  66 + </div>
  67 + <div id="filters_container">
  68 + <filters-controllet id="filters"></filters-controllet>
  69 + </div>
  70 + </div>
  71 + </div>
  72 +
  73 +
  74 + </template>
  75 +
  76 + <script>
  77 + Polymer({
  78 +
  79 + is : 'select-data-controllet',
  80 +
  81 + properties : {
  82 +
  83 + dataUrl : {
  84 + type : String,
  85 + value : undefined
  86 +// observer : '_init'
  87 + },
  88 +
  89 + data : {
  90 + type : Object,
  91 + value : undefined
  92 + },
  93 +
  94 + filters : {
  95 + type : Array,
  96 + value : []
  97 + },
  98 +
  99 + selectedFields : {
  100 + type : Array,
  101 + value : []
  102 + }
  103 +
  104 + },
  105 +
  106 + listeners: {
  107 + 'filters-controllet_show': '_resizeFilters',
  108 + 'select-fields-controllet_selected-fields': '_updateFields',
  109 + 'filters-controllet_filters': '_updateFilters'
  110 + },
  111 +
  112 + ready : function() {
  113 + this.showFilter = false;
  114 + },
  115 +
  116 + attached : function(){
  117 + this._resize();
  118 + var that = this;
  119 + window.addEventListener("resize", function() { that._resize(); });
  120 + },
  121 +
  122 + getSelectedFields : function() {
  123 + return utility_getSelectedFields(this.fields, this.selectedFields);;
  124 + },
  125 +
  126 + getFilters : function() {
  127 + return this.filters;
  128 + },
  129 +
  130 + getData : function() {
  131 + //return datatable.getData
  132 + //this.fields = "*"
  133 + var data = alasql_QUERY(this.data, this.fields, this.filters, null, null);
  134 + var converter = new DataTypeConverter();
  135 + var result = converter.inferJsonDataType(data, ["*"]);
  136 + result = converter.cast(result);
  137 + data = result.dataset;
  138 +
  139 + return data;
  140 + },
  141 +
  142 + setSelectedFields : function(selectedFields) {
  143 + this.async(function() {
  144 + var selectedIndices = utility_getSelectedIndices(this.fields, selectedFields);
  145 + this.$.select_fields.setSelectFields(selectedIndices);
  146 + }, 0);
  147 + },
  148 +
  149 + setFilters : function(filters) {
  150 + this.async(function() {
  151 + this.$.filters.setFilters(filters);
  152 + }, 0);
  153 + },
  154 +
  155 + _resizeFilters : function() {
  156 + if(!this.showFilter) {
  157 + this.$.table_container.style.height = "calc(50% - 12px)";
  158 + this.$.filters_container.style.height = "calc(50% - 12px)";
  159 + }
  160 + else {
  161 + this.$.table_container.style.height = "calc(100% - 72px)";
  162 + this.$.filters_container.style.height = "48px";
  163 + }
  164 +
  165 + this.$.data_table._resize();
  166 +
  167 + this.showFilter = !this.showFilter;
  168 + },
  169 +
  170 + _updateFields : function(e) {
  171 + this.selectedFields = e.detail.selectedFields;
  172 + var fields = utility_getSelectedFields(this.fields, this.selectedFields);
  173 + var data = alasql_QUERY(this.data, fields, this.filters, null, null);
  174 + this.$.data_table.setData(data);
  175 + },
  176 +
  177 + _updateFilters : function(e) {
  178 + this.filters = e.detail.filters;
  179 + var fields = utility_getSelectedFields(this.fields, this.selectedFields);
  180 + var data = alasql_QUERY(this.data, fields, this.filters, null, null);
  181 + this.$.data_table.setData(data);
  182 + },
  183 +
  184 + init : function() {
  185 + if(this.dataUrl) {
  186 +
  187 + var that = this;
  188 +
  189 + $.ajax({
  190 + url: this.dataUrl,
  191 + dataType: "json",
  192 + success: function(data){
  193 + that.reset();
  194 +
  195 + var f = Object.create(providerFactory);
  196 + var provider = f.getProvider(that.dataUrl);
  197 + data = provider.selectData(data);
  198 +
  199 + var converter = new DataTypeConverter();
  200 + var result = converter.inferJsonDataType(data, ["*"]);
  201 + result = converter.cast(result);
  202 + that.fields = utility_getFields(result.types);
  203 + data = result.dataset;
  204 + that.data = alasql_QUERY(data, that.fields, null, null, null);
  205 +
  206 + that.$.select_fields.setFields(that.fields);
  207 + that.$.filters.setFields(that.fields);
  208 +
  209 + that.fire('data-ready', {ready : true});
  210 + },
  211 + error: function(){
  212 + that.fire('data-ready', {ready : false});
  213 + }
  214 + });
  215 + }
  216 +
  217 + else {
  218 + this.reset();
  219 +
  220 + var converter = new DataTypeConverter();
  221 + var result = converter.inferJsonDataType(this.data, ["*"]);
  222 + result = converter.cast(result);
  223 + this.fields = utility_getFields(result.types);
  224 + data = result.dataset;
  225 + this.data = alasql_QUERY(data, this.fields, null, null, null);
  226 +
  227 + this.$.select_fields.setFields(this.fields);
  228 + this.$.filters.setFields(this.fields);
  229 + }
  230 + },
  231 +
  232 + reset : function() {
  233 + this.filters = [];
  234 + this.selectedFields = [];
  235 + this.$.select_fields.reset();
  236 + this.$.data_table.reset();
  237 + this.$.filters.reset();
  238 + },
  239 +
  240 + _resize : function(){
  241 + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
  242 + h = h - 64 - 8; //height with page scroller + margin-top
  243 + $("#select_data_controllet_container").height(h);
  244 + }
  245 +
  246 + });
  247 +
  248 + </script>
  249 +
  250 +</dom-module>
0 251 \ No newline at end of file
... ...
controllets/select-fields-controllet/select-fields-controllet.html
... ... @@ -28,6 +28,10 @@
28 28 cursor: pointer;
29 29 }
30 30  
  31 + #select_fields_controllet_container #header:hover {
  32 + color: #2196F3;
  33 + }
  34 +
31 35 #select_fields_controllet_container #menu_container {
32 36 position: relative;
33 37 height: calc(100% - 48px);
... ... @@ -42,6 +46,14 @@
42 46 cursor: pointer;
43 47 color: #000000;
44 48 margin: 4px;
  49 + padding: 0px 12px;
  50 + }
  51 +
  52 + paper-item span {
  53 + width: 100%;
  54 + overflow: hidden;
  55 + white-space: nowrap;
  56 + text-overflow: ellipsis;
45 57 }
46 58  
47 59 paper-item.iron-selected {
... ... @@ -73,7 +85,7 @@
73 85 <div id="menu_container">
74 86 <paper-menu id="menu" multi>
75 87 <template is="dom-repeat" items="{{fields}}">
76   - <paper-item>{{item}}</paper-item>
  88 + <paper-item title="{{item}}"><span>{{item}}</span></paper-item>
77 89 </template>
78 90 </paper-menu>
79 91 </div>
... ... @@ -92,12 +104,8 @@
92 104 fields : {
93 105 type : Array,
94 106 value : []
95   - },
  107 + }
96 108  
97   -// preselectedFields : {
98   -// type : Array,
99   -// value : []
100   -// }
101 109 },
102 110  
103 111 listeners: {
... ... @@ -110,13 +118,13 @@
110 118  
111 119 attached : function() {
112 120 this._translate();
113   -
114   -// if (this.preselectedFields.length > 0)
115   -// this._preselectFields();
116 121 },
117 122  
118 123 setFields : function(fields) {
119   - this.fields = fields;
  124 + var index = fields.indexOf("_id");
  125 + if(index > -1)
  126 + fields.splice(index, 1);//providers_utility _copy
  127 + this.fields = fields.sort();
120 128 },
121 129  
122 130 setSelectFields : function(selectFields) {
... ... @@ -134,12 +142,6 @@
134 142 this.$.fields.innerHTML = ln["fields_" + ln["localization"]];
135 143 },
136 144  
137   -// _preselectFields : function() {
138   -// for(var i=0; i<this.preselectedFields.length; i++)
139   -// this.$.menu.select(this.preselectedFields[i]);
140   -// this._fireSelectedFields();
141   -// },
142   -
143 145 _fireSelectedFields : function() {
144 146 this.debounce('_fireSelectedFields', function () {
145 147 this.fire('select-fields-controllet_selected-fields', {selectedFields: this.$.menu.selectedValues});
... ...
controllets/select-inputs-controllet/demo/index.html 0 โ†’ 100644
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +</head>
  7 +<body>
  8 +
  9 +</body>
  10 +</html>
  11 +
  12 +// value : [{field: "x", type: "NUMBER"}, {field: "cat", type: "TEXT"}, {field: "testo", type: "TEXT"}, {field: "y", type: "NUMBER"}, {field: "testo", type: "TEXT"}, {field: "testo", type: "TEXT"}]
0 13 \ No newline at end of file
... ...
controllets/select-inputs-controllet/select-inputs-controllet.html 0 โ†’ 100644
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  6 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  7 +
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
  9 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  10 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  11 +
  12 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  13 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  14 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  15 +
  16 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  17 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  18 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  19 +
  20 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
  21 +
  22 +<dom-module id="select-inputs-controllet">
  23 +
  24 + <template>
  25 +
  26 + <style is="custom-style">
  27 + :host {
  28 + --paper-dropdown-menu-icon: {
  29 + color: #2196F3;
  30 + };
  31 + }
  32 +
  33 + #inputs_container {
  34 + height: 100%;
  35 + width: 100%;
  36 + }
  37 +
  38 + #inputs_container * {
  39 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  40 + font-size: 16px;
  41 + line-height: 24px;
  42 + }
  43 +
  44 + #inputs_container #neon_container {
  45 + height: calc(100% - 48px - 120px - 48px);
  46 + width: 100%;
  47 + }
  48 +
  49 + #inputs_container #inputs_list, #inputs_container #options_list {
  50 + position: relative;
  51 + height: 100%;
  52 + width: 100%;
  53 + }
  54 +
  55 + #inputs_container .header {
  56 + height: 24px;
  57 + padding: 12px;
  58 + text-align: center;
  59 + font-weight: 700;
  60 + background-color: #B6B6B6;
  61 + }
  62 +
  63 + #inputs_container .inputs{
  64 + display: flex;
  65 + }
  66 +
  67 + #inputs_container br {
  68 + display: block;
  69 + margin-top: 8px;
  70 + content: " ";
  71 + }
  72 +
  73 + #inputs_container p {
  74 + margin: 0;
  75 + padding: 0;
  76 + }
  77 +
  78 + #inputs_container p .title{
  79 + font-weight: 700;
  80 + color: #2196F3;
  81 + white-space: nowrap;
  82 + }
  83 +
  84 + #inputs_container p .description{
  85 + }
  86 +
  87 + #inputs_container .info_button {
  88 + height: 40px;
  89 + width: 40px;
  90 + padding: 10px;
  91 + }
  92 +
  93 + #inputs_container .order_button {
  94 + height: 40px;
  95 + width: 40px;
  96 + padding: 10px 0 10px 10px;
  97 + }
  98 +
  99 + #inputs_container #base_description_info {
  100 + margin-top: -4px;
  101 + }
  102 +
  103 + paper-input {
  104 + width: calc(100% - 24px - 48px);
  105 + margin-left: 12px;
  106 + --paper-input-container-focus-color: #2196F3;
  107 + }
  108 +
  109 + paper-input#description{
  110 + margin-top: -4px;
  111 + }
  112 +
  113 + #inputs_list paper-dropdown-menu {
  114 + width: calc(100% - 24px - 48px - 50px);
  115 + margin-left: 12px;
  116 + --paper-input-container-focus-color: #2196F3;
  117 + }
  118 +
  119 + #options_list paper-dropdown-menu {
  120 + width: calc(100% - 24px - 48px);
  121 + margin-left: 12px;
  122 + --paper-input-container-focus-color: #2196F3;
  123 + }
  124 +
  125 + paper-item {
  126 + min-width: 128px;
  127 + white-space: nowrap;
  128 + }
  129 +
  130 + paper-item.iron-selected {
  131 + background-color: #2196F3;
  132 + color: #FFFFFF;
  133 + }
  134 +
  135 + paper-icon-button {
  136 + height: 40px;
  137 + width: 40px;
  138 + padding: 4px;
  139 + color: #2196F3;
  140 + --paper-icon-button-ink-color: #2196F3;
  141 + }
  142 +
  143 + paper-icon-button[icon="info-outline"] {
  144 + cursor: help;
  145 + }
  146 +
  147 + paper-tooltip {
  148 + min-width: 400px;
  149 + --paper-tooltip-background: black;
  150 + }
  151 +
  152 + paper-tooltip.order {
  153 + min-width: 0;
  154 + white-space: nowrap;
  155 + }
  156 +
  157 + paper-tabs {
  158 + background: #B6B6B6;
  159 + /*--paper-tabs-selection-bar-color: #00BCD4;*/
  160 + }
  161 +
  162 + paper-tab {
  163 + font-weight: 700;
  164 + border-right: 2px solid #FFFFFF;
  165 + /*--paper-tab-ink: #2196F3;*/
  166 + }
  167 +
  168 + paper-tab:nth-child(2) {
  169 + border-right: 0;
  170 + }
  171 +
  172 + paper-tab.iron-selected {
  173 + color: #FFFFFF;
  174 + background: #2196F3;;
  175 + }
  176 +
  177 + paper-tab:not(.iron-selected):hover {
  178 + color: #2196F3;
  179 + }
  180 +
  181 + </style>
  182 +
  183 + <paper-material id="inputs_container" elevation="5">
  184 +
  185 + <div class="header"><span id="baseInfo"></span></div>
  186 +
  187 + <div class="inputs">
  188 + <paper-input id="title" maxlength="32" on-change="_addOption"></paper-input>
  189 + <div class="info_button">
  190 + <paper-icon-button id="base_title_info" icon="info-outline" noink></paper-icon-button>
  191 + </div>
  192 + <paper-tooltip for="base_title_info" position="right" offset="22">
  193 + <p>
  194 + <span class="title">{{_getInputName('TITLE')}}</span>
  195 + <br>
  196 + <span class="description">{{_getInputDescription('TITLE')}}</span>
  197 + </p>
  198 + </paper-tooltip>
  199 + </div>
  200 +
  201 + <div class="inputs">
  202 + <paper-input id="description" maxlength="128" on-change="_addOption"></paper-input>
  203 + <div class="info_button">
  204 + <paper-icon-button id="base_description_info" icon="info-outline" noink></paper-icon-button>
  205 + </div>
  206 + <paper-tooltip for="base_description_info" position="right" offset="22">
  207 + <p>
  208 + <span class="title">{{_getInputName('DESCRIPTION')}}</span>
  209 + <br>
  210 + <span class="description">{{_getInputDescription('DESCRIPTION')}}</span>
  211 + </p>
  212 + </paper-tooltip>
  213 + </div>
  214 +
  215 + <paper-tabs selected="{{tabIndex}}" no-bar>
  216 + <paper-tab noink><span id="inputsTab"></span></paper-tab>
  217 + <paper-tab noink><span id="optionsTab"></span></paper-tab>
  218 + </paper-tabs>
  219 +
  220 + <neon-animated-pages id="neon_container" selected="{{_getNeonIndex(tabIndex)}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  221 +
  222 + <neon-animatable>
  223 +
  224 + <div id="inputs_list">
  225 + <template is="dom-repeat" items="{{inputs}}" index-as="input_index">
  226 + <div class="inputs">
  227 + <paper-dropdown-menu id="{{input_index}}" label="{{_getInputRichName(item)}}">
  228 + <paper-menu class="dropdown-content">
  229 + <paper-item on-tap="_removeInput"></paper-item>
  230 + <template is="dom-repeat" items={{_getFieldsByType(item.type)}}>
  231 + <paper-item id="{{index}}" on-tap="_addInput">{{item.name}}</paper-item>
  232 + </template>
  233 + </paper-menu>
  234 + </paper-dropdown-menu>
  235 + <div class="order_button">
  236 + <paper-icon-button id="order_input_{{input_index}}" icon="unfold-more" on-click="_addOrder" disabled></paper-icon-button>
  237 + </div>
  238 + <div class="info_button">
  239 + <paper-icon-button id="info_input_{{input_index}}" icon="info-outline" noink></paper-icon-button>
  240 + </div>
  241 + </div>
  242 + </template>
  243 + </div>
  244 +
  245 + <template is="dom-repeat" items="{{inputs}}">
  246 + <paper-tooltip for="{{_getInputInfoId(index)}}" position="right" offset="22">
  247 + <p>
  248 + <span class="title">{{_getInputRichName(item)}}</span>
  249 + <br>
  250 + <span class="description">{{_getInputDescription(item.name)}}</span>
  251 + </p>
  252 + </paper-tooltip>
  253 +
  254 + <paper-tooltip class="order" for="{{_getInputOrderId(index)}}" position="right" offset="22">
  255 + <p>
  256 + <span id="order_{{index}}">{{_getInputOrder(index)}}</span>
  257 + </p>
  258 + </paper-tooltip>
  259 + </template>
  260 +
  261 + </neon-animatable>
  262 +
  263 + <neon-animatable>
  264 +
  265 + <div id="options_list">
  266 + <template is="dom-repeat" items={{options}} index-as="option_index">
  267 + <div class="inputs">
  268 + <template is="dom-if" if="{{_checkType(item.type, 'TEXT')}}">
  269 + <paper-input id="{{item.name}}" label={{_getInputName(item.name)}} on-change="_addOption"></paper-input>
  270 + </template>
  271 +
  272 + <template is="dom-if" if="{{_checkType(item.type, 'LIST')}}">
  273 + <paper-dropdown-menu id="{{option_index}}" label={{_getInputName(item.name)}}>
  274 + <paper-menu class="dropdown-content" selected="0">
  275 + <template is="dom-repeat" items={{item.list.item}}>
  276 + <paper-item id="{{item}}" on-tap="_addOption">{{_getInputName(item)}}</paper-item>
  277 + </template>
  278 + </paper-menu>
  279 + </paper-dropdown-menu>
  280 + </template>
  281 +
  282 + <div class="info_button">
  283 + <paper-icon-button id="info_option_{{option_index}}" icon="info-outline" noink></paper-icon-button>
  284 + </div>
  285 + </div>
  286 + </template>
  287 + </div>
  288 +
  289 + <template is="dom-repeat" items="{{options}}">
  290 + <paper-tooltip for="{{_getOptionInfoId(index)}}" position="right" offset="22">
  291 + <p>
  292 + <span class="title">{{_getInputName(item.name)}}</span>
  293 + <br>
  294 + <span class="description">{{_getInputDescription(item.name)}}</span>
  295 + </p>
  296 + </paper-tooltip>
  297 + </template>
  298 +
  299 + </neon-animatable>
  300 +
  301 + </neon-animated-pages>
  302 +
  303 + </paper-material>
  304 +
  305 +
  306 + </template>
  307 +
  308 + <script>
  309 +
  310 + Polymer({
  311 +
  312 + is : 'select-inputs-controllet',
  313 +
  314 + properties : {
  315 +
  316 + tabIndex: {
  317 + type: Number,
  318 + value: 0
  319 + },
  320 +
  321 + inputs : {
  322 + type : Array,
  323 + value : []
  324 + },
  325 +
  326 + options : {
  327 + type : Array,
  328 + value : []
  329 + },
  330 +
  331 + selectedInputs : {
  332 + type : Array,
  333 + value : []
  334 + },
  335 +
  336 + selectedOptions : {
  337 + type : Array,
  338 + value : []
  339 + },
  340 +
  341 + orders : {
  342 + type : Array,
  343 + value : []
  344 + },
  345 +
  346 + fields : {
  347 + type : Array,
  348 + value : []
  349 + }
  350 +
  351 + },
  352 +
  353 + ready : function() {
  354 + $(this.$.inputs_list).perfectScrollbar();
  355 + $(this.$.options_list).perfectScrollbar();
  356 + },
  357 +
  358 + attached : function() {
  359 + this._translate();
  360 + },
  361 +
  362 + getSelectedInputs : function () {
  363 + return this.selectedInputs;
  364 + },
  365 +
  366 + getSelectedOptions : function () {
  367 + return this.selectedOptions;
  368 + },
  369 +
  370 + getOrders : function () {
  371 + return this.orders;
  372 + },
  373 +
  374 + setFields : function(fields) {
  375 + this.fields = this._copy(fields);
  376 + },
  377 +
  378 + setInputs : function(idm) {
  379 + var inputs = this._copy(idm.inputs.input);
  380 + var options = [];
  381 + if(idm.inputs.layouts)
  382 + options = this._copy(idm.inputs.layouts.input);
  383 +
  384 + if(!(inputs instanceof Array))
  385 + inputs = [inputs];
  386 +
  387 + if(!(options instanceof Array))
  388 + options = [options];
  389 +
  390 + var mandatory = 0;
  391 + var multi = -1;
  392 + var opt = 0;
  393 + for (var i = 0; i < inputs.length; i++){
  394 + switch(inputs[i].selection) {
  395 + case "*":
  396 + multi = i;
  397 + break;
  398 + case "?":
  399 + opt++;
  400 + break;
  401 + default:
  402 + mandatory++;
  403 + }
  404 + }
  405 + if(multi > -1) {
  406 + var input = inputs[multi];
  407 + for (var i = 0; i < this.fields.length - mandatory - 1; i++)
  408 + inputs.splice(multi, 0, input);
  409 + }
  410 +
  411 + this.tabIndex = -1;
  412 + this._reset();
  413 +
  414 + this.async(function () {
  415 + this.inputs = inputs;
  416 + this.options = options;
  417 + }, 0);
  418 +
  419 + this.selectedInputs = new Array(inputs.length).fill(null);
  420 + for (var i = 0; i < options.length; i++) {
  421 + if(options[i].type != "LIST")
  422 + this.selectedOptions[options[i].name] = "";
  423 + else
  424 + this.selectedOptions[options[i].name] = options[i].list.item[0];
  425 + }
  426 + },
  427 +
  428 + _translate : function(){
  429 + this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];
  430 + this.$.inputsTab.innerHTML = ln["inputs_" + ln["localization"]];
  431 + this.$.optionsTab.innerHTML = ln["options_" + ln["localization"]];
  432 +
  433 + this.$.title.label = ln["title_" + ln["localization"]];
  434 + this.$.description.label = ln["description_" + ln["localization"]];
  435 + },
  436 +
  437 + _preselectInputs : function(dataletPreset) {
  438 + this.selectedInputs = JSON.parse(dataletPreset.selectedfields);
  439 + var ddls = this.$.inputs_list.querySelectorAll("paper-dropdown-menu");
  440 +
  441 + for (var i = 0; i < ddls.length; i++)
  442 + if(this.selectedInputs[i]) {
  443 + $(ddls[i]).find("paper-menu")[0].select(this.selectedInputs[i].index);
  444 + var icon = this.$.inputs_list.querySelectorAll("paper-icon-button")[ddls[i].id * 2];
  445 + icon.setAttribute("icon", "unfold-more"); //wrong
  446 + icon.removeAttribute("disabled");
  447 + }
  448 +
  449 + this.orders = JSON.parse(dataletPreset.orders);
  450 +
  451 + var selectedOptions = [];
  452 + var inputs = this.$.options_list.querySelectorAll("paper-input");
  453 +
  454 + for (var i = 0; i < inputs.length; i++) {
  455 + if (dataletPreset[this.options[i].name]) {
  456 + inputs[i].value = dataletPreset[this.options[i].name];
  457 + selectedOptions[this.options[i].name] = dataletPreset[this.options[i].name];
  458 + }
  459 + }
  460 + if(dataletPreset["title"]) {
  461 + this.$.title.value = dataletPreset["title"];
  462 + selectedOptions["title"] = dataletPreset["title"];
  463 + }
  464 + if(dataletPreset["description"]) {
  465 + this.$.description.value = dataletPreset["description"];
  466 + selectedOptions["description"] = dataletPreset["description"];
  467 + }
  468 +
  469 + this.selectedOptions = this._copy(selectedOptions);
  470 +
  471 + this._fire();
  472 + },
  473 +
  474 + _reset : function() {
  475 + this.tabIndex = 0;
  476 + this.inputs = [];
  477 + this.options = [];
  478 + this.selectedInputs = [];
  479 + this.selectedOptions = [];
  480 + this.orders = [];
  481 + },
  482 +
  483 + _addInput : function(e) {
  484 + var inputIndex = $(e.target).parents("paper-dropdown-menu")[0].id;
  485 + var fields = this._getFieldsByType(this.inputs[inputIndex].type);
  486 + var fieldIndex = e.target.id;
  487 + this.selectedInputs[inputIndex] = {field: this.inputs[inputIndex].name, value : fields[fieldIndex].name, index : parseInt(fieldIndex) + 1};
  488 +
  489 + var icon = this.$.inputs_list.querySelectorAll("paper-icon-button")[inputIndex * 2];
  490 + //this.orders = this.orders.filter(function (el) { return el.field !== field???; });
  491 + icon.setAttribute("icon", "unfold-more");
  492 + icon.removeAttribute("disabled");
  493 +
  494 + this._fire();
  495 + },
  496 +
  497 + _removeInput : function(e) {
  498 + var inputIndex = $(e.target).parents("paper-dropdown-menu")[0].id;
  499 + this.selectedInputs[inputIndex] = null;
  500 +
  501 + var icon = this.$.inputs_list.querySelectorAll("paper-icon-button")[inputIndex * 2];
  502 + //this.orders = this.orders.filter(function (el) { return el.field !== field???; });
  503 + icon.setAttribute("icon", "unfold-more");
  504 + icon.setAttribute("disabled", true);
  505 +
  506 + this._fire();
  507 + },
  508 +
  509 + _addOrder : function(e) {
  510 + var t = e.target;
  511 + if(t.tagName.indexOf("IRON-ICON") > -1)
  512 + t = $(e.target).parents("paper-icon-button")[0];
  513 +
  514 + var icon = t.getAttribute("icon");
  515 + var id = t.getAttribute("id").replace("order_input_", "");
  516 + var field = this.selectedInputs[id].value;
  517 + var tooltip = $("#order_"+id)[0];
  518 +
  519 + this.orders = this.orders.filter(function (el) { return el.field !== field; });
  520 +
  521 + if(icon.indexOf("unfold-more") > -1){
  522 + t.setAttribute("icon", "expand-less");
  523 + tooltip.innerHTML = ln["sortAscending_" +ln["localization"]];
  524 + this.orders.unshift({"field": field, "operation": "ASC"});
  525 + }
  526 + else if(icon.indexOf("expand-less") > -1){
  527 + t.setAttribute("icon", "expand-more");
  528 + tooltip.innerHTML = ln["sortDescending_" +ln["localization"]];
  529 + this.orders.unshift({"field": field, "operation": "DESC"});
  530 + }
  531 + else if(icon.indexOf("expand-more") > -1){
  532 + tooltip.innerHTML = ln["unsort_" +ln["localization"]];
  533 + t.setAttribute("icon", "unfold-more");
  534 + }
  535 +
  536 + this._fire();
  537 + },
  538 +
  539 + _addOption : function(e) {
  540 + if(e.target.nodeName == "PAPER-ITEM") {
  541 + var optionIndex = $(e.target).parents("paper-dropdown-menu")[0].id;
  542 + this.selectedOptions[this.options[optionIndex].name] = e.target.id;
  543 + }
  544 + else if(e.target.nodeName == "INPUT") {
  545 + var option = $(e.target).parents("paper-input")[0].id;
  546 + this.selectedOptions[option] = e.target.value;
  547 + }
  548 + this._fire();
  549 + },
  550 +
  551 + _fire : function() {
  552 + if(this._isReady())
  553 + this.fire('select-inputs_isReady', {isReady: true});
  554 + else
  555 + this.fire('select-inputs_isReady', {isReady: false});
  556 + },
  557 +
  558 + _isReady : function() {
  559 + var fire = true;
  560 + for(var i = 0; i < this.inputs.length; i++) {
  561 + if(this.inputs[i].selection != "*" && this.inputs[i].selection != "?" && !this.selectedInputs[i])
  562 + return false;
  563 + if(this.inputs[i].selection == "*")
  564 + fire = false;
  565 + }
  566 +
  567 + if(this.inputs[0].name == "Latitude" || this.inputs[0].name == "GEOJSON")//wrong
  568 + return true;
  569 +
  570 + if(!fire)
  571 + for(var i = 0; i < this.inputs.length; i++)
  572 + if(this.inputs[i].selection == "*" && this.selectedInputs[i])
  573 + return true;
  574 +
  575 + return fire;
  576 + },
  577 +
  578 + _getFieldsByType: function(type) {
  579 + if(type == "NUMBER") {
  580 + var fields = [];
  581 + for(var i = 0; i < this.fields.length; i++)
  582 + if(this.fields[i].type == type)
  583 + fields.push(this.fields[i]);
  584 + return fields;
  585 + }
  586 +
  587 + return this.fields;
  588 + },
  589 +
  590 + _getInputRichName : function(item) {
  591 + var name = ln[item.name + "_" +ln["localization"]];
  592 + if(item.type != "TEXT")
  593 + name += " [" + item.type + "]";
  594 + if(item.selection == "?")
  595 + name += " [OPT]";
  596 + return name;
  597 + },
  598 +
  599 + _getInputName : function(name) {
  600 + return ln[name + "_" +ln["localization"]];
  601 + },
  602 +
  603 + _getInputDescription : function(name) {
  604 + return ln[name + "Description_" +ln["localization"]];
  605 + },
  606 +
  607 + _getInputInfoId : function(index) {
  608 + return "info_input_" + index;
  609 + },
  610 +
  611 + _getInputOrderId : function(index) {
  612 + return "order_input_" + index;
  613 + },
  614 +
  615 + _getInputOrder : function(index) {
  616 + return ln["unsort_" +ln["localization"]];
  617 + },
  618 +
  619 + _getOptionInfoId : function(index) {
  620 + return "info_option_" + index;
  621 + },
  622 +
  623 + _checkType : function(type, check){
  624 + return (type == check);
  625 + },
  626 +
  627 + _getNeonIndex : function(tabIndex){
  628 + if(tabIndex == -1)
  629 + return 0;
  630 + return tabIndex;
  631 + },
  632 +
  633 + _copy : function(o) {
  634 + var out, v, key;
  635 + out = Array.isArray(o) ? new Array(o.length) : {};
  636 + for (key in o) {
  637 + v = o[key];
  638 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  639 + }
  640 + return out;
  641 + }
  642 +
  643 + });
  644 +
  645 + </script>
  646 +
  647 +</dom-module>
0 648 \ No newline at end of file
... ...
controllets/select-marker-map-controllet/select-marker-map-controllet.html 0 โ†’ 100644
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
  7 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"/>
  8 +<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"/>
  9 +<link rel="import" href="../../bower_components/paper-item/paper-item.html"/>
  10 +
  11 +<script src="../../locales/paper_card_controllet_ln.js"></script>
  12 +
  13 +<dom-module id="select-marker-map-controllet">
  14 +
  15 + <template>
  16 + <style is="custom-style">
  17 + #map_tootlbar{
  18 + background: #ffffff;
  19 + border: 1px solid #ccc;
  20 + position: absolute;
  21 + top: 2%;
  22 + right: 1%;
  23 + z-index: 1;
  24 + padding: 4px;
  25 + }
  26 +
  27 + div.ol3-geocoder-container{
  28 + position: absolute;
  29 + top: 26%;
  30 + left: .5em;
  31 + box-sizing: border-box;
  32 + }
  33 + </style>
  34 + <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">
  35 +
  36 +
  37 + <div id="map_tootlbar">
  38 + <paper-dropdown-menu label="Interaction" id="interaction_box">
  39 + <paper-listbox id="interaction_box" class="dropdown-content" selected={{selected_interaction}}>
  40 + <paper-item>Marker</paper-item>
  41 + <paper-item>LineString</paper-item>
  42 + <paper-item>Polygon</paper-item>
  43 + <paper-item disabled>Circle</paper-item>
  44 + <paper-item>Square</paper-item>
  45 + <paper-item>Box</paper-item>
  46 + <paper-item>Text</paper-item>
  47 + </paper-listbox>
  48 + </paper-dropdown-menu>
  49 +
  50 + <!--<paper-input id="shape_label" label="Shape label" maxlenght="30" value="{{label}}"></paper-input>-->
  51 +
  52 + </div>
  53 +
  54 + <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
  55 + <div id="popup" class="ol-popup">
  56 + <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  57 + <div id="popup_content"></div>
  58 + </div>
  59 + </template>
  60 +
  61 + <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
  62 + <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
  63 + <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
  64 +
  65 + <script>
  66 +
  67 + _this = null;
  68 + Polymer({
  69 + is: "select-marker-map-controllet",
  70 +
  71 + listeners : {
  72 + 'iron-select' : '_changeInteraction'
  73 + },
  74 +
  75 + properties: {
  76 + lang:{
  77 + type: String,
  78 + value: navigator.language
  79 + },
  80 + map:{
  81 + type: Object
  82 + },
  83 +
  84 + olview:{
  85 + type: Object
  86 + },
  87 +
  88 + geocoder:{
  89 + type: Object
  90 + },
  91 +
  92 + overlay:{
  93 + type: Object
  94 + },
  95 +
  96 + iconStyle:{
  97 + type : Object
  98 + },
  99 +
  100 + vectorSource:{
  101 + type: Object
  102 + },
  103 +
  104 + coordinate: {
  105 + type: Array,
  106 + value: []
  107 + },
  108 +
  109 + interaction:{
  110 + type: String,
  111 + value: "marker"//marker - geojson
  112 + },
  113 +
  114 + selected_interaction:{
  115 + type: Number,
  116 + value: 0
  117 + },
  118 +
  119 + draw_layer:{
  120 + type: Object
  121 + },
  122 +
  123 + source: {
  124 + type: Object
  125 + },
  126 +
  127 + draw:{
  128 + type: Object
  129 + },
  130 +
  131 + textStyle:{
  132 + type: Object
  133 + },
  134 +
  135 + geoStyle:{
  136 + type: Object
  137 + },
  138 +
  139 + label: {
  140 + type: String,
  141 + value: ""
  142 + }
  143 + },
  144 +
  145 + ready : function(){
  146 + _this = this;
  147 + this.olview = new ol.View({
  148 + center: [0, 0],
  149 + projection: "EPSG:4326",
  150 + zoom: 3,
  151 + minZoom: 2,
  152 + maxZoom: 20
  153 + });
  154 +
  155 + var baseLayer = new ol.layer.Tile({
  156 + source: new ol.source.OSM()
  157 + });
  158 +
  159 + //marker layer
  160 + this.iconStyle = new ol.style.Style({
  161 + image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
  162 + anchor: [0.5, 46],
  163 + anchorXUnits: 'fraction',
  164 + anchorYUnits: 'pixels',
  165 + opacity: 0.75,
  166 + src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
  167 + }))
  168 + });
  169 +
  170 + this.vectorSource = new ol.source.Vector({});
  171 +
  172 + //draw layer
  173 + this.source = new ol.source.Vector({wrapX: false});
  174 +
  175 + this.draw_layer = new ol.layer.Vector({
  176 + source: this.source,
  177 + style: new ol.style.Style({
  178 + fill: new ol.style.Fill({
  179 + color: 'rgba(255, 255, 255, 0.6)'
  180 + }),
  181 + stroke: new ol.style.Stroke({
  182 + color: '#ffff00',
  183 + width: 4
  184 + }),
  185 + image: new ol.style.Circle({
  186 + radius: 7,
  187 + fill: new ol.style.Fill({
  188 + color: '#ffff00'
  189 + })
  190 + })
  191 + })
  192 + });
  193 +
  194 + this.map = new ol.Map({
  195 + target:'map',
  196 + view: this.olview,
  197 + controls: ol.control.defaults({
  198 + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  199 + collapsible: false
  200 + })}),
  201 + loadTilesWhileAnimating: true,
  202 + loadTilesWhileInteracting: true,
  203 + layers: [baseLayer,
  204 + new ol.layer.Vector({
  205 + source: this.vectorSource
  206 + }),
  207 + this.draw_layer
  208 + ]
  209 + });
  210 +
  211 + //Instantiate with some options and add the Control
  212 + this.geocoder = new Geocoder('nominatim', {
  213 + provider: 'photon',
  214 + lang: 'en',
  215 + placeholder: 'Search for ...',
  216 + limit: 5,
  217 + keepOpen: true,
  218 + preventDefault : true
  219 + });
  220 +
  221 + this.overlay = new ol.Overlay({
  222 + element: document.getElementById('popup'),
  223 + offset: [0, -40]
  224 + });
  225 +
  226 + this.map.addControl(this.geocoder);
  227 +
  228 + //Listen when an address is chosen
  229 + this.geocoder.on('addresschosen', function(evt){
  230 + _this.olview.setCenter(evt.coordinate);
  231 + _this.olview.setZoom(16);
  232 + if(_this.selected_interaction == 0) {
  233 + _this.setMarker(evt.coordinate);
  234 + }
  235 +
  236 + //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
  237 + //_this.overlay.setPosition(coord);
  238 + });
  239 +
  240 + this.map.on('click', function(evt) {
  241 + if(_this.selected_interaction == 0) {
  242 + _this.setMarker(evt.coordinate);
  243 + }
  244 + });
  245 +
  246 + this.async(function(){this.resize($(document).height(), $(document).width())}, 100);
  247 + },
  248 +
  249 + setMarker: function(coordinate){
  250 + var iconFeature = new ol.Feature({
  251 + geometry: new ol.geom.Point(coordinate),
  252 + name: 'New Point'
  253 + });
  254 +
  255 + iconFeature.setStyle(_this.iconStyle);
  256 +
  257 + this.vectorSource.clear(true);
  258 + this.vectorSource.addFeature( iconFeature );
  259 +
  260 + //this.coordinate = ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
  261 + this.coordinate = [coordinate[1],coordinate[0]];
  262 + },
  263 +
  264 + addInteraction : function() {
  265 + this.map.removeInteraction(this.draw);
  266 + var geometryFunction, maxPoints, interaction_type;
  267 + switch(this.selected_interaction){
  268 + case 0:
  269 + //this.map.addInteraction(ol.interaction.default());
  270 + break;
  271 + case 1:
  272 + interaction_type = "LineString";
  273 + break;
  274 + case 2:
  275 + interaction_type = "Polygon";
  276 + break;
  277 + case 3:
  278 + interaction_type = "Circle";
  279 + alert("Circle is not supported by GeoJSON");
  280 + return;
  281 + break;
  282 + case 4:
  283 + interaction_type = "Circle";
  284 + geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
  285 + break;
  286 + case 5:
  287 + interaction_type = "LineString";
  288 + maxPoints = 2;
  289 + geometryFunction = function(coordinates, geometry) {
  290 + if (!geometry) {
  291 + geometry = new ol.geom.Polygon(null);
  292 + }
  293 + var start = coordinates[0];
  294 + var end = coordinates[1];
  295 + geometry.setCoordinates([
  296 + [start, [start[0], end[1]], end, [end[0], start[1]], start]
  297 + ]);
  298 + return geometry;
  299 + };
  300 + }
  301 +
  302 + if(this.selected_interaction != 0) {
  303 + this.draw = new ol.interaction.Draw({
  304 + source: this.source,
  305 + type: /** @type {ol.geom.GeometryType} */ (interaction_type),
  306 + geometryFunction: geometryFunction,
  307 + maxPoints: maxPoints,
  308 + style : this.getTextStyle(-12)
  309 + });
  310 +
  311 + this.map.addInteraction(this.draw);
  312 +
  313 + this.draw.on('drawend', function(e) {
  314 + e.feature.setStyle(_this.getTextStyle(-12));
  315 + });
  316 + }
  317 + },
  318 +
  319 + getGeoJSON: function(){
  320 + var allFeatures = this.draw_layer.getSource().getFeatures();
  321 + var format = new ol.format.GeoJSON();
  322 + return format.writeFeatures(allFeatures);
  323 + },
  324 +
  325 + _changeInteraction: function(e){
  326 + this.addInteraction();
  327 + },
  328 +
  329 + getTextStyle: function(offsetX) {
  330 + return new ol.style.Style({
  331 + fill: new ol.style.Fill({
  332 + color: 'rgba(255, 255, 255, 0.6)'
  333 + }),
  334 + stroke: new ol.style.Stroke({
  335 + color: '#ffff00',
  336 + width: 4
  337 + }),
  338 + text : new ol.style.Text({
  339 + fill : new ol.style.Fill({
  340 + color : '#000'
  341 + }),
  342 + stroke : new ol.style.Stroke({
  343 + color : '#fff',
  344 + width : 4
  345 + }),
  346 + text : this.label,
  347 + font : '20px Verdana',
  348 + offsetX : offsetX ? offsetX : 0,
  349 + offsetY : 12
  350 + })
  351 + });
  352 + },
  353 +
  354 + resize : function(h,w){
  355 + this.$.map.style.height = h + "px";
  356 + this.$.map.style.width = w + "px";
  357 + $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('height',($(document).height() + "px"));
  358 + $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('width',($(document).width() + "px"));
  359 + this.map.updateSize();
  360 + }
  361 + })
  362 + </script>
  363 +
  364 +</dom-module>
0 365 \ No newline at end of file
... ...
controllets/select-marker-map-controllet/select-marker-map-controllet_.html 0 โ†’ 100644
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
  7 +
  8 +<script src="../../locales/paper_card_controllet_ln.js"></script>
  9 +
  10 +<dom-module id="select-marker-map-controllet">
  11 +
  12 + <template>
  13 + <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">
  14 +
  15 + <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
  16 + <div id="popup" class="ol-popup">
  17 + <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  18 + <div id="popup_content"></div>
  19 + </div>
  20 + </template>
  21 +
  22 + <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
  23 + <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
  24 + <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
  25 +
  26 + <script>
  27 +
  28 + _this = null;
  29 + Polymer({
  30 + is: "select-marker-map-controllet",
  31 + properties: {
  32 + lang:{
  33 + type: String,
  34 + value: navigator.language
  35 + },
  36 + map:{
  37 + type: Object
  38 + },
  39 +
  40 + olview:{
  41 + type: Object
  42 + },
  43 +
  44 + geocoder:{
  45 + type: Object
  46 + },
  47 +
  48 + overlay:{
  49 + type: Object
  50 + },
  51 +
  52 + iconStyle:{
  53 + type : Object
  54 + },
  55 +
  56 + vectorSource:{
  57 + type: Object
  58 + },
  59 +
  60 + coordinate: {
  61 + type: Array,
  62 + value: []
  63 + }
  64 +
  65 + },
  66 +
  67 + ready : function(){
  68 + _this = this;
  69 +
  70 + this.olview = new ol.View({
  71 + center: [0, 0],
  72 + zoom: 3,
  73 + minZoom: 2,
  74 + maxZoom: 20
  75 + });
  76 +
  77 + var baseLayer = new ol.layer.Tile({
  78 + source: new ol.source.OSM()
  79 + });
  80 +
  81 + this.iconStyle = new ol.style.Style({
  82 + image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
  83 + anchor: [0.5, 46],
  84 + anchorXUnits: 'fraction',
  85 + anchorYUnits: 'pixels',
  86 + opacity: 0.75,
  87 + src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
  88 + }))
  89 + });
  90 +
  91 + this.vectorSource = new ol.source.Vector({});
  92 +
  93 + this.map = new ol.Map({
  94 + target:'map',
  95 + view: this.olview,
  96 + controls: ol.control.defaults({
  97 + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  98 + collapsible: false
  99 + })}),
  100 + loadTilesWhileAnimating: true,
  101 + loadTilesWhileInteracting: true,
  102 + layers: [baseLayer,
  103 + new ol.layer.Vector({
  104 + source: this.vectorSource
  105 + })
  106 + ]
  107 + });
  108 +
  109 + //Instantiate with some options and add the Control
  110 + this.geocoder = new Geocoder('nominatim', {
  111 + provider: 'photon',
  112 + lang: 'en',
  113 + placeholder: 'Search for ...',
  114 + limit: 5,
  115 + keepOpen: true,
  116 + preventDefault : true
  117 + });
  118 +
  119 + this.overlay = new ol.Overlay({
  120 + element: document.getElementById('popup'),
  121 + offset: [0, -40]
  122 + });
  123 +
  124 + this.map.addControl(this.geocoder);
  125 +
  126 + //Listen when an address is chosen
  127 + this.geocoder.on('addresschosen', function(evt){
  128 + _this.setMarker(evt.coordinate);
  129 + _this.olview.setCenter(evt.coordinate);
  130 + _this.olview.setZoom(16);
  131 +
  132 + //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
  133 + //_this.overlay.setPosition(coord);
  134 + });
  135 +
  136 + this.map.on('click', function(evt) {
  137 + _this.setMarker(evt.coordinate);
  138 + });
  139 + },
  140 +
  141 + setMarker: function(coordinate){
  142 + var iconFeature = new ol.Feature({
  143 + geometry: new ol.geom.Point(coordinate),
  144 + name: 'Null Island',
  145 + population: 4000,
  146 + rainfall: 500
  147 + });
  148 +
  149 + iconFeature.setStyle(_this.iconStyle);
  150 +
  151 + this.vectorSource.clear(true);
  152 + this.vectorSource.addFeature( iconFeature );
  153 +
  154 + this.coordinate = ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
  155 + },
  156 +
  157 + resize : function(h,w){
  158 + this.$.map.style.height = h + "px";
  159 + this.$.map.style.width = w + "px";
  160 + this.map.updateSize();
  161 + },
  162 +
  163 +
  164 + })
  165 + </script>
  166 +
  167 +</dom-module>
0 168 \ No newline at end of file
... ...
controllets/select-visualization-controllet/demo/index.html
... ... @@ -13,6 +13,8 @@
13 13 <script type="text/javascript" src="../../../alasql-utility/alasql.min.js"></script>
14 14 <script type="text/javascript" src="../../../alasql-utility/alasql-utility.js"></script>
15 15  
  16 + <script type="text/javascript" src="../../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>
  17 +
16 18 <script>
17 19 ln["localization"] = "en";
18 20 </script>
... ...
controllets/select-visualization-controllet/select-datalet-inputs.html
... ... @@ -317,6 +317,18 @@
317 317 temp.push({name: name + " " +(i-1), description: description, selection: selection});
318 318 }
319 319  
  320 + else if (inputs.length == 3 && inputs[1].selection == "*") {//
  321 + name = inputs[1].name;
  322 + description = inputs[1].description;
  323 + selection = inputs[1].selection;
  324 + temp = [inputs[0]];
  325 + temp.push({name: name + " 1", description: description, selection: selection});
  326 + for (var i = 3; i < this.fields.length; i++)
  327 + temp.push({name: name + " " +(i-1), description: description, selection: selection});
  328 +
  329 + temp.push(inputs[2]);
  330 + }
  331 +
320 332 this.inputs = this._copy(temp);
321 333  
322 334 this.selectedFields = new Array(temp.length);
... ...
controllets/select-visualization-controllet/select-visualization-controllet.html
... ... @@ -5,9 +5,10 @@
5 5 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
6 6  
7 7 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
8   -<link rel="import" href="select-datalet-inputs_series.html" />
9   -<link rel="import" href="select-datalet-inputs.html" />
10   -<link rel="import" href="select-datalet-options.html" />
  8 +<link rel="import" href="../select-inputs-controllet/select-inputs-controllet.html" />
  9 +<link rel="import" href="../datalet-preview-controllet/datalet-preview-controllet.html" />
  10 +
  11 +<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>
11 12  
12 13 <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
13 14  
... ... @@ -18,63 +19,61 @@
18 19 <style is="custom-style">
19 20 #select_visualization_container {
20 21 display: flex;
21   - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
22   - font-size: 16px;
23 22 margin-top: 8px;
24 23 }
25 24  
26   - #items_vslider_controllet {
27   - position: relative;
28   - min-width: 172px;
  25 + #select_visualization_container * {
  26 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  27 + font-size: 16px;
  28 + line-height: 24px;
29 29 }
30 30  
31   - #datalet_selection_inputs {
  31 + #items_vslider_container {
32 32 position: relative;
33   - margin-left: 32px;
34   - min-width: 258px;
  33 + width: 172px;
35 34 }
36 35  
37   - #datalet_selection_options {
  36 + #select_inputs_container {
38 37 position: relative;
39   - margin-left: 32px;
  38 + width: calc(50% - 12px - 172px - 24px);
40 39 min-width: 258px;
  40 + margin-left: 24px;
41 41 }
42 42  
43 43 #datalet_preview_container {
44 44 position: relative;
45   - width: 100%;
46   - margin-left: 32px;
47   - }
48   -
49   - #datalet_selection_datalet {
50   - position: relative;
51   - height: 100vh;
52   - width: 100%;
  45 + width: calc(50% - 12px);
  46 + margin-left: 24px;
53 47 }
54 48  
55   - #datalet_selection_datalet_placeholder {
56   - padding: 16px;
57   - }
  49 + /*#datalet_placeholder {*/
  50 + /*width: calc(100% - 32px);*/
  51 + /*height: calc(100% - 48px - 32px);*/
  52 + /*padding: 16px;*/
  53 + /*}*/
58 54  
59   - .input_header {
60   - height: 32px;
61   - padding-top: 16px;
62   - text-align: center;
63   - font-weight: 700;
64   - background-color: #B6B6B6;
65   - }
  55 + /*.header {*/
  56 + /*height: 24px;*/
  57 + /*padding: 12px;*/
  58 + /*text-align: center;*/
  59 + /*font-weight: 700;*/
  60 + /*background-color: #B6B6B6;*/
  61 + /*}*/
66 62  
67 63 paper-button {
68 64 position: absolute;
69   - bottom: 16px;
70   - right: 11px;
71   -
72 65 height: 48px;
73 66 width: 172px;
74   - background-color: #00BCD4;
75   - color: white;
  67 + padding: 12px;
  68 + background: #00BCD4;
  69 + color: #FFFFFF;
76 70 font-weight: 700;
77   - padding: 16px;
  71 +
  72 + /*bottom: 16px;*/
  73 + /*right: 11px;*/
  74 + top: -56px;
  75 + right: 0;
  76 + margin: 0 16px;
78 77 }
79 78  
80 79 paper-button:hover {
... ... @@ -94,36 +93,26 @@
94 93  
95 94 <div id="select_visualization_container">
96 95  
97   - <div id="items_vslider_controllet">
98   - <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
  96 + <div id="items_vslider_container">
  97 + <items-vslider-controllet id="vslider" datalets-list-url="{{dataletsListUrl}}"></items-vslider-controllet>
99 98 </div>
100 99  
101   - <div id="datalet_selection_inputs">
102   - <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
103   - <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>
104   - </template>
105   - <template is="dom-if" if="{{_checkType(type, 'default')}}">
106   - <select-datalet-inputs id="inputs"></select-datalet-inputs>
107   - </template>
108   - <template is="dom-if" if="{{_checkType(type, '')}}">
109   - <select-datalet-inputs></select-datalet-inputs>
110   - </template>
  100 + <div id="select_inputs_container">
  101 + <select-inputs-controllet id="inputs"></select-inputs-controllet>
111 102 </div>
112 103  
113   - <div id="datalet_selection_options">
114   - <select-datalet-options id="options"></select-datalet-options>
  104 + <div id="datalet_preview_container">
  105 + <datalet-preview-controllet id="preview" deep-url="{{deepUrl}}" datalets-list-url="{{dataletsListUrl}}"></datalet-preview-controllet>
115 106 </div>
116 107  
117   - <div id="datalet_preview_container">
  108 + <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
118 109  
119   - <paper-material id="datalet_selection_datalet" elevation="5">
120   - <div class="input_header"><span id="dataletPreview"></span></div>
121   - <div id="datalet_selection_datalet_placeholder"></div>
122   - </paper-material>
  110 + <!--<paper-material id="datalet_preview_container" elevation="5">-->
  111 + <!--<div class="header"><span id="dataletPreview"></span></div>-->
123 112  
124   - <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
  113 + <!--<div id="datalet_placeholder"></div>-->
125 114  
126   - </div>
  115 + <!--</paper-material>-->
127 116  
128 117 </div>
129 118  
... ... @@ -147,72 +136,64 @@
147 136 value : undefined
148 137 },
149 138  
150   - selectedDatalet : {
  139 + dataUrl : {
151 140 type : String,
152 141 value : undefined
153 142 },
154 143  
155   - preselectedDatalet : {
156   - type : String,
  144 + data : {
  145 + type : Object,
157 146 value : undefined
158 147 },
159 148  
160   - type : {
161   - type : String,
162   - value : ""
163   - },
164   -
165   - filters : {
  149 + selectedFields : {
166 150 type : Array,
167 151 value : []
168 152 },
169 153  
170   - fields : {
  154 + filters : {
171 155 type : Array,
172 156 value : []
173 157 },
174 158  
175   - selectedFields : {
  159 + aggregators : {
176 160 type : Array,
177 161 value : []
178 162 },
179 163  
180   - dataletPreset : {
181   - type : Object,
182   - value : []
183   - },
  164 +// orders : {
  165 +// type : Array,
  166 +// value : []
  167 +// },
184 168  
185   - dataUrl : {
  169 + selectedDatalet : {
186 170 type : String,
187 171 value : undefined
188 172 },
189 173  
190   - params:{
191   - type: Object,
192   - value: undefined
  174 + dataletType : {
  175 + type : String,
  176 + value : undefined
193 177 },
194 178  
195   - data : {
196   - type : Object,
  179 + preselectedDatalet : {
  180 + type : String,
197 181 value : undefined
198 182 },
199 183  
  184 + dataletPreset : {
  185 + type : Object,
  186 + value : []
  187 + }
  188 +
200 189 },
201 190  
202 191 listeners: {
203   -// 'select-fields-controllet_selected-fields': '_updateFields',
204   -// 'filters-controllet_filters': '_updateFilters',
205 192 'items-vslider-controllet_selected-datalet': '_selectDatalet',
206   - 'select_visualization_inputs_ready': '_loadDatalet',
207   - 'select_visualization_options_changed': '_tryLoadDatalet'
  193 + 'select-inputs_isReady': '_loadDatalet'
208 194 },
209 195  
210 196 ready : function() {
211   - this._resize();
212   -
213   - $(this.$.datalet_selection_datalet).perfectScrollbar();
214   -
215   -// this.params = {'data-url' : this.dataUrl};//not here
216 197 },
217 198  
218 199 attached : function() {
... ... @@ -227,34 +208,31 @@
227 208 this.filters = this._copy(filters);
228 209 },
229 210  
230   - setFields : function(fields) {
231   -// if (this.fields.length > 0 && JSON.stringify(this.fields) != JSON.stringify(fields))
232   -// this.init();
  211 + setAggregators : function(aggregators) {
  212 + this.aggregators = this._copy(aggregators);
  213 + },
233 214  
234   - this.fields = this._copy(fields);
  215 +// setOrders : function(orders) {
  216 +// this.orders = this._copy(orders);
  217 +// },
235 218  
236   - var inputs = this._getInputs();
237   - if (inputs)
238   - inputs.setFields(this.fields);
  219 + setSelectedFields : function(selectedFields) {
  220 + this.selectedFields = this._copy(selectedFields);
239 221 },
240 222  
241 223 setData : function(data) {
242 224 this.data = this._copy(data);
243   - },
244 225  
245   - init : function() {
246   - this.$.vslider._reset();
  226 + var converter = new DataTypeConverter();
  227 + var result = converter.inferJsonDataType(data, ["*"]);
  228 + result = converter.cast(result);
  229 + this.$.inputs.setFields(ArrayUtils.toFieldsArray(result.types));
  230 + this.$.vslider.setEnabledDatalets(ArrayUtils.toFieldsArray(result.types));
247 231 },
248 232  
249   - show : function() {//show --> preselect
250   -// if(this.preselectedDatalet)
251   - if(this.dataletPreset)
252   - this._preselectDatalet();
253   -
254   -// if (this.$.datalet_selection_datalet_placeholder.innerHTML == "") {
255   -// var inputs = this._getInputs();
256   -// inputs.fireReady();
257   -// }
  233 + init : function() {
  234 + if(this.selectedDatalet !== undefined)
  235 + this.$.vslider.reset();// fire _selectDatalet undefined
258 236 },
259 237  
260 238 _translate : function(){
... ... @@ -262,111 +240,82 @@
262 240 this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
263 241 else
264 242 this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
265   -
266   - this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
267 243 },
268 244  
269 245 _selectDatalet : function(e){
270   -
271   - this.$.add_button.setAttribute("disabled", "true");
272   -
273 246 this.selectedDatalet = e.detail.datalet;
274 247  
275   - this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  248 + this.$.add_button.setAttribute("disabled", "true");
  249 + this.$.preview.eraseDatalet();
  250 + this.$.preview.eraseInfo();
276 251  
277   - if(!this.selectedDatalet){
278   - this.type = "";
279   - this.$.options.setOptions([]);
280   - }
281   - else{
  252 + if(this.selectedDatalet) {
282 253 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
283 254 this.$.selectedDatalet_request.generateRequest();
284 255 }
  256 + else {
  257 + this.dataletType = undefined;
  258 + this.$.inputs._reset();
  259 + }
285 260 },
286 261  
287 262 _handleSelectedDatalet : function(e){
  263 + this.$.preview.loadInfo(e.detail.response);
288 264  
289   - if(this.type != e.detail.response.type) {
290   -
291   - this.type = e.detail.response.type;
292   -
293   - this.async(function () {
294   - var inputs = this._getInputs();
295   - inputs.setFields(this.fields);
296   - inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
297   - }, 0);
298   -
299   - this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);
  265 + if(this.dataletType != e.detail.response.type) {
  266 + this.dataletType = e.detail.response.type;
  267 + this.$.inputs.setInputs(e.detail.response.idm);
300 268 }
301 269 else {
302   - this.$.options.checkOptions(e.detail.response.idm.inputs.layouts.input);
  270 + this.$.inputs._fire();
303 271 }
304   -
305   - this.async(function () {
306   - var inputs = this._getInputs();
307   - inputs.fireReady();
308   - }, 0);
309   -
310   -// this.async(function () {
311   -// if(this.preselectedDatalet)
312   -// this._preselectDatalet();
313   -// }, 1);
314   - },
315   -
316   - _preselectDatalet : function() {
317   - this.$.vslider._preselectDatalet();
318   -
319   - this.async(function () {
320   - this.$.options._preselectOptions(this.dataletPreset);
321   - }, 100);
322   -
323   - this.async(function () {
324   - var inputs = this._getInputs();
325   - inputs._preselectInputs(this.fields, this.dataletPreset["aggregators"], this.dataletPreset["orders"]);
326   - this.dataletPreset = undefined;
327   - }, 200);
328 272 },
329 273  
330   - _tryLoadDatalet : function(){
331   - var inputs = this._getInputs();
332   - inputs.fireReady();
  274 + preselect : function() {
  275 + if(this.preselectedDatalet) {
  276 + this.$.vslider.preselectDatalet(this.preselectedDatalet);
  277 + this.async(function () {
  278 + this.$.inputs._preselectInputs(this.dataletPreset);
  279 + this.preselectedDatalet = undefined;
  280 + }, 100);
  281 + }
333 282 },
334 283  
335 284 _loadDatalet : function(e){
336 285 if(!e.detail.isReady) {
337   - this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  286 + this.$.preview.eraseDatalet();
338 287 return;
339 288 }
340 289  
341   - var inputs = this._getInputs();
342   -
343   - this.selectedFields = inputs.getSelectedFields();
344   -
345   -// console.log(inputs.getFields());
346   -
347   - this.params = {'data-url' : this.dataUrl};//??????????????????
348   -// this.params = {};
  290 + this.params = {'data-url' : this.dataUrl};/*???*/
349 291  
350   - this.params["selectedFields"] = JSON.stringify(inputs.getFields());
  292 +// this.selectedFields = ["pippi", "baudo"];
351 293  
  294 + this.params["selectedfields"] = JSON.stringify(this.$.inputs.getSelectedInputs());
352 295 this.params["filters"] = JSON.stringify(this.filters);
353   - this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
354   - this.params["orders"] = JSON.stringify(inputs.getOrders());
  296 + this.params["aggregators"] = JSON.stringify(this.aggregators);
  297 + this.params["orders"] = JSON.stringify(this.$.inputs.getOrders());
355 298  
356 299 this.params["export_menu"] = "0";
357 300  
358   - var params = this.$.options.getParams();
  301 + var params = this.$.inputs.getSelectedOptions();
359 302 for (var key in params) { this.params[key] = params[key]; }
360 303  
361 304 //use cache
362   - var data = alasql_QUERY(this.data, this.selectedFields, null, inputs.getAggregators(), inputs.getOrders());
  305 + var selectedFields = this.$.inputs.getSelectedInputs();
  306 + var fields = [];
  307 + for (var i=0; i < selectedFields.length; i++)
  308 + if (selectedFields[i])
  309 + fields.push(selectedFields[i].value);
363 310  
364 311 var converter = new DataTypeConverter();
  312 +
  313 + var data = alasql_QUERY(this.data, fields, null, null, this.$.inputs.getOrders());
365 314 var result = converter.inferJsonDataType(data, ["*"]);
366 315 result = converter.cast(result);
367 316 data = result.dataset;
368 317  
369   - data = alasql_transformData(data, this.selectedFields, true);
  318 + data = alasql_transformData(data, fields, true);
370 319  
371 320 this.params["data"] = JSON.stringify(data).replace(/'/g, "&#39;");
372 321 //
... ... @@ -374,45 +323,35 @@
374 323 var dataletParams ={
375 324 component: this.selectedDatalet+"-datalet",
376 325 fields: this.selectedFields,
377   - params: this.params,
378   - placeHolder: this.$.datalet_selection_datalet_placeholder,
  326 + params: this.params
  327 +// placeHolder: this.$.datalet_placeholder
379 328 };
380 329  
381   - ComponentService.deep_url = this.deepUrl;
382   - ComponentService.getComponent(dataletParams);
  330 +// ComponentService.deep_url = this.deepUrl;
  331 +// ComponentService.getComponent(dataletParams);
  332 +
  333 + this.$.preview.loadDatalet(dataletParams);
383 334  
384 335 this.$.add_button.removeAttribute("disabled");
385 336 },
386 337  
387 338 _addDatalet : function(){
388   - delete this.params["export_menu"];
  339 + var staticData = this.params["data"];
  340 +
389 341 delete this.params["data"];
  342 + delete this.params["export_menu"];
390 343  
391 344 var data = {
392 345 dataUrl: this.dataUrl,
393 346 datalet: this.selectedDatalet+"-datalet",
394 347 fields: this.selectedFields,
395 348 params: this.params,
396   - staticData: JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
  349 + staticData: staticData
397 350 }
398 351  
399 352 this.fire('data-sevc-controllet.dataletCreated', {data : data});
400 353 },
401 354  
402   - _checkType: function(type, check){
403   - if (type == "multiseries" || type == "")
404   - return (type == check);
405   - else if(check == "default")
406   - return true;
407   - return false;
408   - },
409   -
410   - _getInputs : function(){
411   - if(this.type == "multiseries")
412   - return this.$$("#inputs_series")
413   - return this.$$("#inputs");
414   - },
415   -
416 355 _copy : function(o) {
417 356 var out, v, key;
418 357 out = Array.isArray(o) ? new Array(o.length) : {};
... ... @@ -427,11 +366,9 @@
427 366 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
428 367 h = h - 64 - 8; //height with page scroller
429 368  
430   - $("#items_vslider_controllet").height(h);//vslider controllet
431   - $("#datalet_selection_inputs").height(h);
432   - $("#datalet_selection_options").height(h);
433   -
434   - $("#datalet_selection_datalet").height(h);
  369 + $("#items_vslider_container").height(h);
  370 + $("#select_inputs_container").height(h);
  371 + $("#datalet_preview_container").height(h);
435 372 }
436 373  
437 374 });
... ...
controllets/select-visualization-controllet/select-visualization-controllet_old.html 0 โ†’ 100755
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  6 +
  7 +<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
  8 +<link rel="import" href="select-datalet-inputs_series.html" />
  9 +<link rel="import" href="select-datalet-inputs.html" />
  10 +<link rel="import" href="select-datalet-options.html" />
  11 +
  12 +<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
  13 +
  14 +<dom-module id="select-visualization-controllet">
  15 +
  16 + <template>
  17 +
  18 + <style is="custom-style">
  19 + #select_visualization_container {
  20 + display: flex;
  21 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  22 + font-size: 16px;
  23 + margin-top: 8px;
  24 + }
  25 +
  26 + #items_vslider_controllet {
  27 + position: relative;
  28 + min-width: 172px;
  29 + }
  30 +
  31 + #datalet_selection_inputs {
  32 + position: relative;
  33 + margin-left: 32px;
  34 + min-width: 258px;
  35 + }
  36 +
  37 + #datalet_selection_options {
  38 + position: relative;
  39 + margin-left: 32px;
  40 + min-width: 258px;
  41 + }
  42 +
  43 + #datalet_preview_container {
  44 + position: relative;
  45 + width: 100%;
  46 + margin-left: 32px;
  47 + }
  48 +
  49 + #datalet_selection_datalet {
  50 + position: relative;
  51 + height: 100vh;
  52 + width: 100%;
  53 + }
  54 +
  55 + #datalet_selection_datalet_placeholder {
  56 + padding: 16px;
  57 + }
  58 +
  59 + .input_header {
  60 + height: 32px;
  61 + padding-top: 16px;
  62 + text-align: center;
  63 + font-weight: 700;
  64 + background-color: #B6B6B6;
  65 + }
  66 +
  67 + paper-button {
  68 + position: absolute;
  69 + bottom: 16px;
  70 + right: 11px;
  71 +
  72 + height: 48px;
  73 + width: 172px;
  74 + background-color: #00BCD4;
  75 + color: white;
  76 + font-weight: 700;
  77 + padding: 16px;
  78 + }
  79 +
  80 + paper-button:hover {
  81 + background-color: #00AABF;
  82 +
  83 + box-shadow: 0px 8px 12px #888;
  84 + -webkit-box-shadow: 0px 8px 12px #888;
  85 + -moz-box-shadow: 0px 8px 12px #888;
  86 + }
  87 +
  88 + paper-button[disabled] {
  89 + background-color: #B6B6B6;
  90 + }
  91 + </style>
  92 +
  93 + <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
  94 +
  95 + <div id="select_visualization_container">
  96 +
  97 + <div id="items_vslider_controllet">
  98 + <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
  99 + </div>
  100 +
  101 + <div id="datalet_selection_inputs">
  102 + <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
  103 + <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>
  104 + </template>
  105 + <template is="dom-if" if="{{_checkType(type, 'default')}}">
  106 + <select-datalet-inputs id="inputs"></select-datalet-inputs>
  107 + </template>
  108 + <template is="dom-if" if="{{_checkType(type, '')}}">
  109 + <select-datalet-inputs></select-datalet-inputs>
  110 + </template>
  111 + </div>
  112 +
  113 + <div id="datalet_selection_options">
  114 + <select-datalet-options id="options"></select-datalet-options>
  115 + </div>
  116 +
  117 + <div id="datalet_preview_container">
  118 +
  119 + <paper-material id="datalet_selection_datalet" elevation="5">
  120 + <div class="input_header"><span id="dataletPreview"></span></div>
  121 + <div id="datalet_selection_datalet_placeholder"></div>
  122 + </paper-material>
  123 +
  124 + <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
  125 +
  126 + </div>
  127 +
  128 + </div>
  129 +
  130 + </template>
  131 +
  132 + <script>
  133 +
  134 + Polymer({
  135 +
  136 + is : 'select-visualization-controllet',
  137 +
  138 + properties : {
  139 +
  140 + deepUrl : {
  141 + type : String,
  142 + value : undefined
  143 + },
  144 +
  145 + dataletsListUrl : {
  146 + type : String,
  147 + value : undefined
  148 + },
  149 +
  150 + selectedDatalet : {
  151 + type : String,
  152 + value : undefined
  153 + },
  154 +
  155 + preselectedDatalet : {
  156 + type : String,
  157 + value : undefined
  158 + },
  159 +
  160 + type : {
  161 + type : String,
  162 + value : ""
  163 + },
  164 +
  165 + filters : {
  166 + type : Array,
  167 + value : []
  168 + },
  169 +
  170 + fields : {
  171 + type : Array,
  172 + value : []
  173 + },
  174 +
  175 + selectedFields : {
  176 + type : Array,
  177 + value : []
  178 + },
  179 +
  180 + dataletPreset : {
  181 + type : Object,
  182 + value : []
  183 + },
  184 +
  185 + dataUrl : {
  186 + type : String,
  187 + value : undefined
  188 + },
  189 +
  190 + params:{
  191 + type: Object,
  192 + value: undefined
  193 + },
  194 +
  195 + data : {
  196 + type : Object,
  197 + value : undefined
  198 + },
  199 +
  200 + },
  201 +
  202 + listeners: {
  203 +// 'select-fields-controllet_selected-fields': '_updateFields',
  204 +// 'filters-controllet_filters': '_updateFilters',
  205 + 'items-vslider-controllet_selected-datalet': '_selectDatalet',
  206 + 'select_visualization_inputs_ready': '_loadDatalet',
  207 + 'select_visualization_options_changed': '_tryLoadDatalet'
  208 + },
  209 +
  210 + ready : function() {
  211 + this._resize();
  212 +
  213 + $(this.$.datalet_selection_datalet).perfectScrollbar();
  214 +
  215 +// this.params = {'data-url' : this.dataUrl};//not here
  216 + },
  217 +
  218 + attached : function() {
  219 + this._resize();
  220 + var that = this;
  221 + window.addEventListener("resize", function() { that._resize(); });
  222 +
  223 + this._translate();
  224 + },
  225 +
  226 + setFilters : function(filters) {
  227 + this.filters = this._copy(filters);
  228 + },
  229 +
  230 + setFields : function(fields) {
  231 +// if (this.fields.length > 0 && JSON.stringify(this.fields) != JSON.stringify(fields))
  232 +// this.init();
  233 +
  234 + this.fields = this._copy(fields);
  235 +
  236 + var inputs = this._getInputs();
  237 + if (inputs)
  238 + inputs.setFields(this.fields);
  239 + },
  240 +
  241 + setData : function(data) {
  242 + this.data = this._copy(data);
  243 + },
  244 +
  245 + init : function() {
  246 + this.$.vslider._reset();
  247 + },
  248 +
  249 + show : function() {//show --> preselect
  250 +// if(this.preselectedDatalet)
  251 + if(this.dataletPreset)
  252 + this._preselectDatalet();
  253 +
  254 +// if (this.$.datalet_selection_datalet_placeholder.innerHTML == "") {
  255 +// var inputs = this._getInputs();
  256 +// inputs.fireReady();
  257 +// }
  258 + },
  259 +
  260 + _translate : function(){
  261 + if(this.preselectedDatalet)
  262 + this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
  263 + else
  264 + this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
  265 +
  266 + this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
  267 + },
  268 +
  269 + _selectDatalet : function(e){
  270 +
  271 + this.$.add_button.setAttribute("disabled", "true");
  272 +
  273 + this.selectedDatalet = e.detail.datalet;
  274 +
  275 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  276 +
  277 + if(!this.selectedDatalet){
  278 + this.type = "";
  279 + this.$.options.setOptions([]);
  280 + }
  281 + else{
  282 + this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
  283 + this.$.selectedDatalet_request.generateRequest();
  284 + }
  285 + },
  286 +
  287 + _handleSelectedDatalet : function(e){
  288 +
  289 + if(this.type != e.detail.response.type) {
  290 +
  291 + this.type = e.detail.response.type;
  292 +
  293 + this.async(function () {
  294 + var inputs = this._getInputs();
  295 + inputs.setFields(this.fields);
  296 + inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
  297 + }, 0);
  298 +
  299 + this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);
  300 + }
  301 + else {
  302 + this.$.options.checkOptions(e.detail.response.idm.inputs.layouts.input);
  303 + }
  304 +
  305 + this.async(function () {
  306 + var inputs = this._getInputs();
  307 + inputs.fireReady();
  308 + }, 0);
  309 +
  310 +// this.async(function () {
  311 +// if(this.preselectedDatalet)
  312 +// this._preselectDatalet();
  313 +// }, 1);
  314 + },
  315 +
  316 + _preselectDatalet : function() {
  317 + this.$.vslider._preselectDatalet();
  318 +
  319 + this.async(function () {
  320 + this.$.options._preselectOptions(this.dataletPreset);
  321 + }, 100);
  322 +
  323 + this.async(function () {
  324 + var inputs = this._getInputs();
  325 + inputs._preselectInputs(this.fields, this.dataletPreset["aggregators"], this.dataletPreset["orders"]);
  326 + this.dataletPreset = undefined;
  327 + }, 200);
  328 + },
  329 +
  330 + _tryLoadDatalet : function(){
  331 + var inputs = this._getInputs();
  332 + inputs.fireReady();
  333 + },
  334 +
  335 + _loadDatalet : function(e){
  336 + if(!e.detail.isReady) {
  337 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  338 + return;
  339 + }
  340 +
  341 + var inputs = this._getInputs();
  342 +
  343 + this.selectedFields = inputs.getSelectedFields();
  344 +
  345 +// console.log(inputs.getFields());
  346 +
  347 + this.params = {'data-url' : this.dataUrl};//??????????????????
  348 +// this.params = {};
  349 +
  350 + this.params["selectedfields"] = JSON.stringify(inputs.getFields());
  351 +
  352 + this.params["filters"] = JSON.stringify(this.filters);
  353 + this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
  354 + this.params["orders"] = JSON.stringify(inputs.getOrders());
  355 +
  356 + this.params["export_menu"] = "0";
  357 +
  358 + var params = this.$.options.getParams();
  359 + for (var key in params) { this.params[key] = params[key]; }
  360 +
  361 + //use cache
  362 + var data = alasql_QUERY(this.data, this.selectedFields, null, inputs.getAggregators(), inputs.getOrders());
  363 +
  364 + var converter = new DataTypeConverter();
  365 + var result = converter.inferJsonDataType(data, ["*"]);
  366 + result = converter.cast(result);
  367 + data = result.dataset;
  368 +
  369 + data = alasql_transformData(data, this.selectedFields, true);
  370 +
  371 + this.params["data"] = JSON.stringify(data).replace(/'/g, "&#39;");
  372 + //
  373 +
  374 + var dataletParams ={
  375 + component: this.selectedDatalet+"-datalet",
  376 + fields: this.selectedFields,
  377 + params: this.params,
  378 + placeHolder: this.$.datalet_selection_datalet_placeholder,
  379 + };
  380 +
  381 + ComponentService.deep_url = this.deepUrl;
  382 + ComponentService.getComponent(dataletParams);
  383 +
  384 + this.$.add_button.removeAttribute("disabled");
  385 + },
  386 +
  387 + _addDatalet : function(){
  388 + delete this.params["export_menu"];
  389 + delete this.params["data"];
  390 +
  391 + var data = {
  392 + dataUrl: this.dataUrl,
  393 + datalet: this.selectedDatalet+"-datalet",
  394 + fields: this.selectedFields,
  395 + params: this.params,
  396 + staticData: JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
  397 + }
  398 +
  399 + this.fire('data-sevc-controllet.dataletCreated', {data : data});
  400 + },
  401 +
  402 + _checkType: function(type, check){
  403 + if (type == "multiseries" || type == "")
  404 + return (type == check);
  405 + else if(check == "default")
  406 + return true;
  407 + return false;
  408 + },
  409 +
  410 + _getInputs : function(){
  411 + if(this.type == "multiseries")
  412 + return this.$$("#inputs_series")
  413 + return this.$$("#inputs");
  414 + },
  415 +
  416 + _copy : function(o) {
  417 + var out, v, key;
  418 + out = Array.isArray(o) ? new Array(o.length) : {};
  419 + for (key in o) {
  420 + v = o[key];
  421 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  422 + }
  423 + return out;
  424 + },
  425 +
  426 + _resize : function(){
  427 + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
  428 + h = h - 64 - 8; //height with page scroller
  429 +
  430 + $("#items_vslider_controllet").height(h);//vslider controllet
  431 + $("#datalet_selection_inputs").height(h);
  432 + $("#datalet_selection_options").height(h);
  433 +
  434 + $("#datalet_selection_datalet").height(h);
  435 + }
  436 +
  437 + });
  438 +
  439 + </script>
  440 +
  441 +</dom-module>
0 442 \ No newline at end of file
... ...
datalets/areachart-datalet/areachart-datalet.html
... ... @@ -71,7 +71,7 @@ Example:
71 71 text: this._component.title
72 72 },
73 73 xAxis: {
74   - categories: this.properties.categories.value,//this._component.categories,
  74 + categories: this.properties.categories.value,
75 75 title: {
76 76 text: this._component.xAxisLabel
77 77 }
... ... @@ -86,7 +86,13 @@ Example:
86 86 valueSuffix: ' ' + this._component.suffix
87 87 },
88 88 plotOptions: {
  89 + series: {
  90 + stacking: this._component.stack
  91 + },
89 92 area: {
  93 + dataLabels: {
  94 + enabled: this._component.dataLabels
  95 + },
90 96 marker: {
91 97 enabled: false,
92 98 symbol: 'circle',
... ... @@ -99,17 +105,6 @@ Example:
99 105 }
100 106 }
101 107 },
102   - legend: {
103   - layout: 'vertical',
104   - align: 'right',
105   - verticalAlign: 'top',
106   - x: -40,
107   - y: 80,
108   - floating: true,
109   - borderWidth: 1,
110   - backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
111   - shadow: true
112   - },
113 108 credits: {
114 109 enabled: false
115 110 },
... ... @@ -119,6 +114,27 @@ Example:
119 114 if(this._component.theme != "themeBase" && this._component.theme != "")
120 115 jQuery.extend(true, options, Highcharts[this._component.theme]);
121 116  
  117 + if(this._component.legend == "topRight")
  118 + options.legend = {
  119 + layout: 'vertical',
  120 + verticalAlign: 'top',
  121 + align: 'right',
  122 + x: -4,
  123 + y: 4,
  124 + floating: true,
  125 + borderWidth: 1,
  126 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  127 + shadow: true
  128 + };
  129 + else if(this._component.legend == "bottom")
  130 + options.legend = {
  131 + enabled: true
  132 + };
  133 + else
  134 + options.legend ={
  135 + enabled: false
  136 + };
  137 +
122 138 $(this._component.$.charts.$.container).highcharts(options);
123 139 }
124 140 };
... ... @@ -132,50 +148,34 @@ Example:
132 148 type: Array,
133 149 value: undefined
134 150 },
135   - /**
136   - * It's the label for X axis
137   - *
138   - * @attribute xAxisLabel
139   - * @type String
140   - * @default ''
141   - */
142 151 xAxisLabel: {
143 152 type: String,
144 153 value: ""
145 154 },
146   - /**
147   - * It's the label for Y axis
148   - *
149   - * @attribute yAxisLabel
150   - * @type String
151   - * @default ''
152   - */
153 155 yAxisLabel: {
154 156 type: String,
155 157 value: ""
156 158 },
157   - /**
158   - * It's the values suffix
159   - *
160   - * @attribute suffix
161   - * @type Strig
162   - * @default 'units'
163   - */
164 159 suffix : {
165 160 type : String,
166   - value : "units"
  161 + value : ""
  162 + },
  163 + legend : {
  164 + type : Object,
  165 + value : "topRight"
  166 + },
  167 + dataLabels : {
  168 + type : Object,
  169 + value : true
  170 + },
  171 + stack : {
  172 + type : Object,
  173 + value : false
167 174 },
168 175 theme : {
169 176 type : String,
170 177 value : ""
171 178 },
172   - /**
173   - * It's the component behavior
174   - *
175   - * @attribute behavior
176   - * @type Object
177   - * @default {}
178   - */
179 179 behavior : {
180 180 type : Object,
181 181 value : {}
... ...
datalets/areachart-datalet/areachart-datalet.png

607 Bytes | W: | H:

925 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/areachart-datalet/areachart-datalet2.png 0 โ†’ 100644

607 Bytes

datalets/barchart-datalet/barchart-datalet.html
... ... @@ -88,21 +88,13 @@ Example:
88 88 plotOptions: {
89 89 bar: {
90 90 dataLabels: {
91   - enabled: true
  91 + enabled: this._component.dataLabels
92 92 }
  93 + },
  94 + series: {
  95 + stacking: this._component.stack
93 96 }
94 97 },
95   - legend: {
96   - layout: 'vertical',
97   - align: 'right',
98   - verticalAlign: 'top',
99   - x: -40,
100   - y: 80,
101   - floating: true,
102   - borderWidth: 1,
103   - backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
104   - shadow: true
105   - },
106 98 credits: {
107 99 enabled: false
108 100 },
... ... @@ -112,6 +104,27 @@ Example:
112 104 if(this._component.theme != "themeBase" && this._component.theme != "")
113 105 jQuery.extend(true, options, Highcharts[this._component.theme]);
114 106  
  107 + if(this._component.legend == "topRight")
  108 + options.legend = {
  109 + layout: 'vertical',
  110 + verticalAlign: 'top',
  111 + align: 'right',
  112 + x: -4,
  113 + y: 4,
  114 + floating: true,
  115 + borderWidth: 1,
  116 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  117 + shadow: true
  118 + };
  119 + else if(this._component.legend == "bottom")
  120 + options.legend = {
  121 + enabled: true
  122 + };
  123 + else
  124 + options.legend ={
  125 + enabled: false
  126 + };
  127 +
115 128 $(this._component.$.charts.$.container).highcharts(options);
116 129 }
117 130 };
... ... @@ -136,6 +149,18 @@ Example:
136 149 type : String,
137 150 value : ""
138 151 },
  152 + legend : {
  153 + type : Object,
  154 + value : "topRight"
  155 + },
  156 + dataLabels : {
  157 + type : Object,
  158 + value : true
  159 + },
  160 + stack : {
  161 + type : Object,
  162 + value : false
  163 + },
139 164 theme : {
140 165 type : String,
141 166 value : ""
... ...
datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
... ... @@ -95,12 +95,21 @@ var AjaxJsonAlasqlBehavior = {
95 95 },
96 96  
97 97 filterData : function() {
98   - var fields = this._component.fields = JSON.parse(this._component.fields);
99   -
  98 + var selectedFields = JSON.parse(this._component.getAttribute("selectedfields"));
100 99 var filters = JSON.parse(this._component.getAttribute("filters"));
101 100 var aggregators = JSON.parse(this._component.getAttribute("aggregators"));
102 101 var orders = JSON.parse(this._component.getAttribute("orders"));
103 102  
  103 + this._component.fields = JSON.parse(this._component.fields); /*deprecated*/
  104 + if(selectedFields) { /*if deprecated*/
  105 + this._component.fields = []; /*deprecated*/
  106 + for (var i=0; i < selectedFields.length; i++)
  107 + if (selectedFields[i])
  108 + this._component.fields.push(selectedFields[i].value);
  109 + }
  110 +
  111 + var fields = this._component.fields;
  112 +
104 113 //preview my space ?
105 114 if(filters && filters[0] && filters[0].constructor == Array){
106 115 filters = filters[0];
... ... @@ -109,14 +118,22 @@ var AjaxJsonAlasqlBehavior = {
109 118 }
110 119  
111 120 var converter = new DataTypeConverter();
112   -
113   - var data = alasql_QUERY(this.data, fields, filters, null, orders);
114   - var result = converter.inferJsonDataType(data, ["*"]);
115   - result = converter.cast(result);
116   - data = result.dataset;
  121 + var data = [];
  122 + var result = [];
117 123  
118 124 if(aggregators && aggregators.length) {
119   - data = alasql_QUERY(data, fields, null, aggregators, orders);
  125 + data = alasql_QUERY(this.data, "*", filters, null, orders);
  126 + result = converter.inferJsonDataType(data, ["*"]);
  127 + result = converter.cast(result);
  128 + data = result.dataset;
  129 +
  130 + data = alasql_QUERY(data, null, null, aggregators, orders);
  131 + result = converter.inferJsonDataType(data, ["*"]);
  132 + result = converter.cast(result);
  133 + data = result.dataset;
  134 + }
  135 + else {
  136 + data = alasql_QUERY(this.data, fields, filters, null, orders);
120 137 result = converter.inferJsonDataType(data, ["*"]);
121 138 result = converter.cast(result);
122 139 data = result.dataset;
... ... @@ -125,16 +142,4 @@ var AjaxJsonAlasqlBehavior = {
125 142 this.data = alasql_transformData(data, fields, true);
126 143 }
127 144  
128   - //var selectedFields = JSON.parse(this._component.getAttribute("selectedFields"));
129   - //if(selectedFields) {
130   - // fields = [];
131   - // var inputs = [];
132   - // for (var i=0; i < selectedFields.length; i++) {
133   - // if (selectedFields[i]) {
134   - // fields.push(selectedFields[i].field);
135   - // inputs.push(selectedFields[i].input);
136   - // }
137   - // }
138   - //}
139   -
140 145 };
141 146 \ No newline at end of file
... ...
datalets/base-datalet/base-datalet.html
... ... @@ -252,7 +252,7 @@ Example :
252 252  
253 253 else {
254 254 this.hideFooter();
255   - this.$.base_datalet_spin.remove();
  255 +// this.$.base_datalet_spin.remove();
256 256 }
257 257 },
258 258  
... ...
datalets/base-datalet/static/js/BaseDataletBehavior.js
... ... @@ -42,8 +42,7 @@ var BaseDataletBehavior ={
42 42 // type: Array,
43 43 // value: []
44 44 //},
45   -
46   - //fields: {
  45 + //fields: { //inputs filters aggregators orders
47 46 // type: String,
48 47 // value: ""
49 48 //},
... ...
datalets/bubblechart-datalet/bubblechart-datalet.html
... ... @@ -93,7 +93,7 @@ Examples:
93 93 }
94 94  
95 95 this.properties.series = bubbleSeries;
96   - this._component.legend = true;
  96 +// this._component.legend = true;
97 97 }
98 98 else {// == 4
99 99 var bubbleSeries = [];
... ... @@ -108,7 +108,7 @@ Examples:
108 108 bubbleSeries.push({data: series});
109 109  
110 110 this.properties.series = bubbleSeries;
111   - this._component.legend = false;
  111 +// this._component.legend = false;
112 112 }
113 113  
114 114 options = {
... ... @@ -120,9 +120,6 @@ Examples:
120 120 title: {
121 121 text: this._component.title
122 122 },
123   -// subtitle: {
124   -// text: this._component.description
125   -// },
126 123 xAxis: {
127 124 title: {
128 125 text: this._component.xAxisLabel
... ... @@ -133,10 +130,12 @@ Examples:
133 130 text: this._component.yAxisLabel,
134 131 }
135 132 },
136   - legend: {
137   - enabled: this._component.legend,
138   - },
139 133 plotOptions: {
  134 + bubble: {
  135 + dataLabels: {
  136 + enabled: this._component.dataLabels
  137 + }
  138 + },
140 139 series: {
141 140 dataLabels: {
142 141 enabled: true,
... ... @@ -153,6 +152,27 @@ Examples:
153 152 if(this._component.theme != "themeBase" && this._component.theme != "")
154 153 jQuery.extend(true, options, Highcharts[this._component.theme]);
155 154  
  155 + if(this._component.legend == "topRight")
  156 + options.legend = {
  157 + layout: 'vertical',
  158 + verticalAlign: 'top',
  159 + align: 'right',
  160 + x: -4,
  161 + y: 4,
  162 + floating: true,
  163 + borderWidth: 1,
  164 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  165 + shadow: true
  166 + };
  167 + else if(this._component.legend == "bottom")
  168 + options.legend = {
  169 + enabled: true
  170 + };
  171 + else
  172 + options.legend ={
  173 + enabled: false
  174 + };
  175 +
156 176 $(this._component.$.charts.$.container).highcharts(options);
157 177 }
158 178 };
... ... @@ -178,6 +198,10 @@ Examples:
178 198 type : String,
179 199 value : ""
180 200 },
  201 + legend : {
  202 + type : Object,
  203 + value : "topRight"
  204 + },
181 205 behavior : {
182 206 type : Object,
183 207 value : {}
... ...
datalets/columnchart-datalet/columnchart-datalet.html
... ... @@ -66,7 +66,7 @@ Example:
66 66 options = {
67 67 chart: {
68 68 type: 'column',
69   - zoomType: 'xy',
  69 + zoomType: 'xy'
70 70 },
71 71 title: {
72 72 text: this._component.title
... ... @@ -75,8 +75,7 @@ Example:
75 75 categories: this.properties.categories.value,
76 76 title: {
77 77 text: this._component.xAxisLabel
78   - },
79   -// crosshair: true
  78 + }
80 79 },
81 80 yAxis: {
82 81 min: 0,
... ... @@ -84,41 +83,19 @@ Example:
84 83 text: this._component.yAxisLabel,
85 84 }
86 85 },
87   -// tooltip: {
88   -// headerFormat: '<span style="font-size:16px; font-weight: bold">{point.key}</span><table style="font-size:16px; white-space: nowrap ">',
89   -// pointFormat: '<tr style="color:{series.color}"><td>{series.name}: </td>' +
90   -// '<td>{point.y} ' + this._component.suffix + '</span></td></tr>',
91   -// footerFormat: '</table>',
92   -// shared: true,
93   -// useHTML: true
94   -// },
95   -// plotOptions: {
96   -// column: {
97   -// pointPadding: 0.2,
98   -// borderWidth: 0
99   -// }
100   -// },
101 86 tooltip: {
102 87 valueSuffix: ' ' + this._component.suffix
103 88 },
104 89 plotOptions: {
105 90 column: {
106 91 dataLabels: {
107   - enabled: true
  92 + enabled: this._component.dataLabels
108 93 }
  94 + },
  95 + series: {
  96 + stacking: this._component.stack
109 97 }
110 98 },
111   - legend: {
112   - layout: 'vertical',
113   - align: 'right',
114   - verticalAlign: 'top',
115   - x: -40,
116   - y: 80,
117   - floating: true,
118   - borderWidth: 1,
119   - backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
120   - shadow: true
121   - },
122 99 credits: {
123 100 enabled: false
124 101 },
... ... @@ -128,6 +105,27 @@ Example:
128 105 if(this._component.theme != "themeBase" && this._component.theme != "")
129 106 jQuery.extend(true, options, Highcharts[this._component.theme]);
130 107  
  108 + if(this._component.legend == "topRight")
  109 + options.legend = {
  110 + layout: 'vertical',
  111 + verticalAlign: 'top',
  112 + align: 'right',
  113 + x: -4,
  114 + y: 4,
  115 + floating: true,
  116 + borderWidth: 1,
  117 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  118 + shadow: true
  119 + };
  120 + else if(this._component.legend == "bottom")
  121 + options.legend = {
  122 + enabled: true
  123 + };
  124 + else
  125 + options.legend ={
  126 + enabled: false
  127 + };
  128 +
131 129 $(this._component.$.charts.$.container).highcharts(options);
132 130 }
133 131 };
... ... @@ -140,51 +138,34 @@ Example:
140 138 type: Array,
141 139 value: undefined
142 140 },
143   - /**
144   - * It's the label for X axis
145   - *
146   - * @attribute xAxisLabel
147   - * @type String
148   - * @default ''
149   - */
150 141 xAxisLabel: {
151 142 type: String,
152 143 value: ""
153 144 },
154   - /**
155   - * It's the label for Y axis
156   - *
157   - * @attribute yAxisLabel
158   - * @type String
159   - * @default ''
160   - */
161 145 yAxisLabel: {
162 146 type: String,
163 147 value: ""
164 148 },
165   - /**
166   - * It's the values suffix
167   - *
168   - * @attribute suffix
169   - * @type Strig
170   - * @default 'units'
171   - */
172 149 suffix : {
173 150 type : String,
174 151 value : ""
175 152 },
176   -
  153 + legend : {
  154 + type : Object,
  155 + value : "topRight"
  156 + },
  157 + dataLabels : {
  158 + type : Object,
  159 + value : true
  160 + },
  161 + stack : {
  162 + type : Object,
  163 + value : false
  164 + },
177 165 theme : {
178 166 type : String,
179 167 value : ""
180 168 },
181   - /**
182   - * It's the component behavior
183   - *
184   - * @attribute behavior
185   - * @type Object
186   - * @default {}
187   - */
188 169 behavior : {
189 170 type : Object,
190 171 value : {}
... ...
datalets/graph-datalet/demo/demo-clustering-2.html
... ... @@ -3,32 +3,44 @@
3 3 <head>
4 4 <meta charset="UTF-8">
5 5 <title>Demo Graph with node clustering</title>
6   - <link rel="import" href="../graph-clustering-datalet.html">
  6 + <link rel="import" href="../graph-with-clustering-extend-datalet.html">
  7 + <link rel="import" href="../graph-datalet.html">
7 8 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
8   - <script>
9   - function loadDoc() {
10   - var xhttp = new XMLHttpRequest();
11   - xhttp.onreadystatechange = function() {
12   - if (xhttp.readyState == 4 && xhttp.status == 200) {
13   - document.getElementById("graph-placeholder").innerHTML = '<graph-clustering-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
14   - '\'></graph-clustering-datalet>';
15   - }
16   - };
17   - xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=1&type=comments", true);
18   - xhttp.send();
19   - }
  9 +</head>
  10 +<script>
  11 + function loadDoc() {
  12 + debugger;
  13 + var xhttp = new XMLHttpRequest();
  14 + xhttp.onreadystatechange = function() {
  15 + if (xhttp.readyState == 4 && xhttp.status == 200) {
  16 + /* document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-extend-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
  17 + '\'></graph-with-clustering-extend-datalet>';*/
  18 +
  19 + document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-extend-datalet width="' + $("#graph-placeholder").width() + '" height="' + $("#graph-placeholder").height() + '" id="dgraph"></graph-with-clustering-extend-datalet>';
  20 +
  21 + var g = document.getElementById('dgraph');
  22 + g.graph = JSON.parse(xhttp.responseText).graph;
  23 + g.buildGraph();
  24 + g.init();
  25 + }
  26 + };
  27 + xhttp.open("GET", "http://spod.databenc.it/spodpublic/ajax/get-graph/?id=41&type=comments", true);
  28 + xhttp.send();
  29 + }
20 30  
  31 + $(document).ready(function(){
21 32 loadDoc();
  33 + });
22 34  
23   - </script>
24   -</head>
  35 + loadDoc();
  36 +
  37 +</script>
25 38 <body>
26 39 <h1>Graph with clustering</h1>
27   -<div id="graph-placeholder"></div>
28   -<!--<graph-clustering-datalet width="1000"
29   - height="700"
30   - graph='{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},{"name":"Woman1","group":2},{"name":"Judge","group":2},{"name":"Champmathieu","group":2},{"name":"Brevet","group":2},{"name":"Chenildieu","group":2},{"name":"Cochepaille","group":2},{"name":"Pontmercy","group":4},{"name":"Boulatruelle","group":6},{"name":"Eponine","group":4},{"name":"Anzelma","group":4},{"name":"Woman2","group":5},{"name":"MotherInnocent","group":0},{"name":"Gribier","group":0},{"name":"Jondrette","group":7},{"name":"Mme.Burgon","group":7},{"name":"Gavroche","group":8},{"name":"Gillenormand","group":5},{"name":"Magnon","group":5},{"name":"Mlle.Gillenormand","group":5},{"name":"Mme.Pontmercy","group":5},{"name":"Mlle.Vaubois","group":5},{"name":"Lt.Gillenormand","group":5},{"name":"Marius","group":8},{"name":"BaronessT","group":5},{"name":"Mabeuf","group":8},{"name":"Enjolras","group":8},{"name":"Combeferre","group":8},{"name":"Prouvaire","group":8},{"name":"Feuilly","group":8},{"name":"Courfeyrac","group":8},{"name":"Bahorel","group":8},{"name":"Bossuet","group":8},{"name":"Joly","group":8},{"name":"Grantaire","group":8},{"name":"MotherPlutarch","group":9},{"name":"Gueulemer","group":4},{"name":"Babet","group":4},{"name":"Claquesous","group":4},{"name":"Montparnasse","group":4},{"name":"Toussaint","group":5},{"name":"Child1","group":10},{"name":"Child2","group":10},{"name":"Brujon","group":4},{"name":"Mme.Hucheloup","group":8}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":8},{"source":3,"target":0,"value":10},{"source":3,"target":2,"value":6},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":2},{"source":9,"target":0,"value":1},{"source":11,"target":10,"value":1},{"source":11,"target":3,"value":3},{"source":11,"target":2,"value":3},{"source":11,"target":0,"value":5},{"source":12,"target":11,"value":1},{"source":13,"target":11,"value":1},{"source":14,"target":11,"value":1},{"source":15,"target":11,"value":1},{"source":17,"target":16,"value":4},{"source":18,"target":16,"value":4},{"source":18,"target":17,"value":4},{"source":19,"target":16,"value":4},{"source":19,"target":17,"value":4},{"source":19,"target":18,"value":4},{"source":20,"target":16,"value":3},{"source":20,"target":17,"value":3},{"source":20,"target":18,"value":3},{"source":20,"target":19,"value":4},{"source":21,"target":16,"value":3},{"source":21,"target":17,"value":3},{"source":21,"target":18,"value":3},{"source":21,"target":19,"value":3},{"source":21,"target":20,"value":5},{"source":22,"target":16,"value":3},{"source":22,"target":17,"value":3},{"source":22,"target":18,"value":3},{"source":22,"target":19,"value":3},{"source":22,"target":20,"value":4},{"source":22,"target":21,"value":4},{"source":23,"target":16,"value":3},{"source":23,"target":17,"value":3},{"source":23,"target":18,"value":3},{"source":23,"target":19,"value":3},{"source":23,"target":20,"value":4},{"source":23,"target":21,"value":4},{"source":23,"target":22,"value":4},{"source":23,"target":12,"value":2},{"source":23,"target":11,"value":9},{"source":24,"target":23,"value":2},{"source":24,"target":11,"value":7},{"source":25,"target":24,"value":13},{"source":25,"target":23,"value":1},{"source":25,"target":11,"value":12},{"source":26,"target":24,"value":4},{"source":26,"target":11,"value":31},{"source":26,"target":16,"value":1},{"source":26,"target":25,"value":1},{"source":27,"target":11,"value":17},{"source":27,"target":23,"value":5},{"source":27,"target":25,"value":5},{"source":27,"target":24,"value":1},{"source":27,"target":26,"value":1},{"source":28,"target":11,"value":8},{"source":28,"target":27,"value":1},{"source":29,"target":23,"value":1},{"source":29,"target":27,"value":1},{"source":29,"target":11,"value":2},{"source":30,"target":23,"value":1},{"source":31,"target":30,"value":2},{"source":31,"target":11,"value":3},{"source":31,"target":23,"value":2},{"source":31,"target":27,"value":1},{"source":32,"target":11,"value":1},{"source":33,"target":11,"value":2},{"source":33,"target":27,"value":1},{"source":34,"target":11,"value":3},{"source":34,"target":29,"value":2},{"source":35,"target":11,"value":3},{"source":35,"target":34,"value":3},{"source":35,"target":29,"value":2},{"source":36,"target":34,"value":2},{"source":36,"target":35,"value":2},{"source":36,"target":11,"value":2},{"source":36,"target":29,"value":1},{"source":37,"target":34,"value":2},{"source":37,"target":35,"value":2},{"source":37,"target":36,"value":2},{"source":37,"target":11,"value":2},{"source":37,"target":29,"value":1},{"source":38,"target":34,"value":2},{"source":38,"target":35,"value":2},{"source":38,"target":36,"value":2},{"source":38,"target":37,"value":2},{"source":38,"target":11,"value":2},{"source":38,"target":29,"value":1},{"source":39,"target":25,"value":1},{"source":40,"target":25,"value":1},{"source":41,"target":24,"value":2},{"source":41,"target":25,"value":3},{"source":42,"target":41,"value":2},{"source":42,"target":25,"value":2},{"source":42,"target":24,"value":1},{"source":43,"target":11,"value":3},{"source":43,"target":26,"value":1},{"source":43,"target":27,"value":1},{"source":44,"target":28,"value":3},{"source":44,"target":11,"value":1},{"source":45,"target":28,"value":2},{"source":47,"target":46,"value":1},{"source":48,"target":47,"value":2},{"source":48,"target":25,"value":1},{"source":48,"target":27,"value":1},{"source":48,"target":11,"value":1},{"source":49,"target":26,"value":3},{"source":49,"target":11,"value":2},{"source":50,"target":49,"value":1},{"source":50,"target":24,"value":1},{"source":51,"target":49,"value":9},{"source":51,"target":26,"value":2},{"source":51,"target":11,"value":2},{"source":52,"target":51,"value":1},{"source":52,"target":39,"value":1},{"source":53,"target":51,"value":1},{"source":54,"target":51,"value":2},{"source":54,"target":49,"value":1},{"source":54,"target":26,"value":1},{"source":55,"target":51,"value":6},{"source":55,"target":49,"value":12},{"source":55,"target":39,"value":1},{"source":55,"target":54,"value":1},{"source":55,"target":26,"value":21},{"source":55,"target":11,"value":19},{"source":55,"target":16,"value":1},{"source":55,"target":25,"value":2},{"source":55,"target":41,"value":5},{"source":55,"target":48,"value":4},{"source":56,"target":49,"value":1},{"source":56,"target":55,"value":1},{"source":57,"target":55,"value":1},{"source":57,"target":41,"value":1},{"source":57,"target":48,"value":1},{"source":58,"target":55,"value":7},{"source":58,"target":48,"value":7},{"source":58,"target":27,"value":6},{"source":58,"target":57,"value":1},{"source":58,"target":11,"value":4},{"source":59,"target":58,"value":15},{"source":59,"target":55,"value":5},{"source":59,"target":48,"value":6},{"source":59,"target":57,"value":2},{"source":60,"target":48,"value":1},{"source":60,"target":58,"value":4},{"source":60,"target":59,"value":2},{"source":61,"target":48,"value":2},{"source":61,"target":58,"value":6},{"source":61,"target":60,"value":2},{"source":61,"target":59,"value":5},{"source":61,"target":57,"value":1},{"source":61,"target":55,"value":1},{"source":62,"target":55,"value":9},{"source":62,"target":58,"value":17},{"source":62,"target":59,"value":13},{"source":62,"target":48,"value":7},{"source":62,"target":57,"value":2},{"source":62,"target":41,"value":1},{"source":62,"target":61,"value":6},{"source":62,"target":60,"value":3},{"source":63,"target":59,"value":5},{"source":63,"target":48,"value":5},{"source":63,"target":62,"value":6},{"source":63,"target":57,"value":2},{"source":63,"target":58,"value":4},{"source":63,"target":61,"value":3},{"source":63,"target":60,"value":2},{"source":63,"target":55,"value":1},{"source":64,"target":55,"value":5},{"source":64,"target":62,"value":12},{"source":64,"target":48,"value":5},{"source":64,"target":63,"value":4},{"source":64,"target":58,"value":10},{"source":64,"target":61,"value":6},{"source":64,"target":60,"value":2},{"source":64,"target":59,"value":9},{"source":64,"target":57,"value":1},{"source":64,"target":11,"value":1},{"source":65,"target":63,"value":5},{"source":65,"target":64,"value":7},{"source":65,"target":48,"value":3},{"source":65,"target":62,"value":5},{"source":65,"target":58,"value":5},{"source":65,"target":61,"value":5},{"source":65,"target":60,"value":2},{"source":65,"target":59,"value":5},{"source":65,"target":57,"value":1},{"source":65,"target":55,"value":2},{"source":66,"target":64,"value":3},{"source":66,"target":58,"value":3},{"source":66,"target":59,"value":1},{"source":66,"target":62,"value":2},{"source":66,"target":65,"value":2},{"source":66,"target":48,"value":1},{"source":66,"target":63,"value":1},{"source":66,"target":61,"value":1},{"source":66,"target":60,"value":1},{"source":67,"target":57,"value":3},{"source":68,"target":25,"value":5},{"source":68,"target":11,"value":1},{"source":68,"target":24,"value":1},{"source":68,"target":27,"value":1},{"source":68,"target":48,"value":1},{"source":68,"target":41,"value":1},{"source":69,"target":25,"value":6},{"source":69,"target":68,"value":6},{"source":69,"target":11,"value":1},{"source":69,"target":24,"value":1},{"source":69,"target":27,"value":2},{"source":69,"target":48,"value":1},{"source":69,"target":41,"value":1},{"source":70,"target":25,"value":4},{"source":70,"target":69,"value":4},{"source":70,"target":68,"value":4},{"source":70,"target":11,"value":1},{"source":70,"target":24,"value":1},{"source":70,"target":27,"value":1},{"source":70,"target":41,"value":1},{"source":70,"target":58,"value":1},{"source":71,"target":27,"value":1},{"source":71,"target":69,"value":2},{"source":71,"target":68,"value":2},{"source":71,"target":70,"value":2},{"source":71,"target":11,"value":1},{"source":71,"target":48,"value":1},{"source":71,"target":41,"value":1},{"source":71,"target":25,"value":1},{"source":72,"target":26,"value":2},{"source":72,"target":27,"value":1},{"source":72,"target":11,"value":1},{"source":73,"target":48,"value":2},{"source":74,"target":48,"value":2},{"source":74,"target":73,"value":3},{"source":75,"target":69,"value":3},{"source":75,"target":68,"value":3},{"source":75,"target":25,"value":3},{"source":75,"target":48,"value":1},{"source":75,"target":41,"value":1},{"source":75,"target":70,"value":1},{"source":75,"target":71,"value":1},{"source":76,"target":64,"value":1},{"source":76,"target":65,"value":1},{"source":76,"target":66,"value":1},{"source":76,"target":63,"value":1},{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]}'
31   - ></graph-clustering-datalet>-->
  40 +<!--
  41 +graph='{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},{"name":"Woman1","group":2},{"name":"Judge","group":2},{"name":"Champmathieu","group":2},{"name":"Brevet","group":2},{"name":"Chenildieu","group":2},{"name":"Cochepaille","group":2},{"name":"Pontmercy","group":4},{"name":"Boulatruelle","group":6},{"name":"Eponine","group":4},{"name":"Anzelma","group":4},{"name":"Woman2","group":5},{"name":"MotherInnocent","group":0},{"name":"Gribier","group":0},{"name":"Jondrette","group":7},{"name":"Mme.Burgon","group":7},{"name":"Gavroche","group":8},{"name":"Gillenormand","group":5},{"name":"Magnon","group":5},{"name":"Mlle.Gillenormand","group":5},{"name":"Mme.Pontmercy","group":5},{"name":"Mlle.Vaubois","group":5},{"name":"Lt.Gillenormand","group":5},{"name":"Marius","group":8},{"name":"BaronessT","group":5},{"name":"Mabeuf","group":8},{"name":"Enjolras","group":8},{"name":"Combeferre","group":8},{"name":"Prouvaire","group":8},{"name":"Feuilly","group":8},{"name":"Courfeyrac","group":8},{"name":"Bahorel","group":8},{"name":"Bossuet","group":8},{"name":"Joly","group":8},{"name":"Grantaire","group":8},{"name":"MotherPlutarch","group":9},{"name":"Gueulemer","group":4},{"name":"Babet","group":4},{"name":"Claquesous","group":4},{"name":"Montparnasse","group":4},{"name":"Toussaint","group":5},{"name":"Child1","group":10},{"name":"Child2","group":10},{"name":"Brujon","group":4},{"name":"Mme.Hucheloup","group":8}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":8},{"source":3,"target":0,"value":10},{"source":3,"target":2,"value":6},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":2},{"source":9,"target":0,"value":1},{"source":11,"target":10,"value":1},{"source":11,"target":3,"value":3},{"source":11,"target":2,"value":3},{"source":11,"target":0,"value":5},{"source":12,"target":11,"value":1},{"source":13,"target":11,"value":1},{"source":14,"target":11,"value":1},{"source":15,"target":11,"value":1},{"source":17,"target":16,"value":4},{"source":18,"target":16,"value":4},{"source":18,"target":17,"value":4},{"source":19,"target":16,"value":4},{"source":19,"target":17,"value":4},{"source":19,"target":18,"value":4},{"source":20,"target":16,"value":3},{"source":20,"target":17,"value":3},{"source":20,"target":18,"value":3},{"source":20,"target":19,"value":4},{"source":21,"target":16,"value":3},{"source":21,"target":17,"value":3},{"source":21,"target":18,"value":3},{"source":21,"target":19,"value":3},{"source":21,"target":20,"value":5},{"source":22,"target":16,"value":3},{"source":22,"target":17,"value":3},{"source":22,"target":18,"value":3},{"source":22,"target":19,"value":3},{"source":22,"target":20,"value":4},{"source":22,"target":21,"value":4},{"source":23,"target":16,"value":3},{"source":23,"target":17,"value":3},{"source":23,"target":18,"value":3},{"source":23,"target":19,"value":3},{"source":23,"target":20,"value":4},{"source":23,"target":21,"value":4},{"source":23,"target":22,"value":4},{"source":23,"target":12,"value":2},{"source":23,"target":11,"value":9},{"source":24,"target":23,"value":2},{"source":24,"target":11,"value":7},{"source":25,"target":24,"value":13},{"source":25,"target":23,"value":1},{"source":25,"target":11,"value":12},{"source":26,"target":24,"value":4},{"source":26,"target":11,"value":31},{"source":26,"target":16,"value":1},{"source":26,"target":25,"value":1},{"source":27,"target":11,"value":17},{"source":27,"target":23,"value":5},{"source":27,"target":25,"value":5},{"source":27,"target":24,"value":1},{"source":27,"target":26,"value":1},{"source":28,"target":11,"value":8},{"source":28,"target":27,"value":1},{"source":29,"target":23,"value":1},{"source":29,"target":27,"value":1},{"source":29,"target":11,"value":2},{"source":30,"target":23,"value":1},{"source":31,"target":30,"value":2},{"source":31,"target":11,"value":3},{"source":31,"target":23,"value":2},{"source":31,"target":27,"value":1},{"source":32,"target":11,"value":1},{"source":33,"target":11,"value":2},{"source":33,"target":27,"value":1},{"source":34,"target":11,"value":3},{"source":34,"target":29,"value":2},{"source":35,"target":11,"value":3},{"source":35,"target":34,"value":3},{"source":35,"target":29,"value":2},{"source":36,"target":34,"value":2},{"source":36,"target":35,"value":2},{"source":36,"target":11,"value":2},{"source":36,"target":29,"value":1},{"source":37,"target":34,"value":2},{"source":37,"target":35,"value":2},{"source":37,"target":36,"value":2},{"source":37,"target":11,"value":2},{"source":37,"target":29,"value":1},{"source":38,"target":34,"value":2},{"source":38,"target":35,"value":2},{"source":38,"target":36,"value":2},{"source":38,"target":37,"value":2},{"source":38,"target":11,"value":2},{"source":38,"target":29,"value":1},{"source":39,"target":25,"value":1},{"source":40,"target":25,"value":1},{"source":41,"target":24,"value":2},{"source":41,"target":25,"value":3},{"source":42,"target":41,"value":2},{"source":42,"target":25,"value":2},{"source":42,"target":24,"value":1},{"source":43,"target":11,"value":3},{"source":43,"target":26,"value":1},{"source":43,"target":27,"value":1},{"source":44,"target":28,"value":3},{"source":44,"target":11,"value":1},{"source":45,"target":28,"value":2},{"source":47,"target":46,"value":1},{"source":48,"target":47,"value":2},{"source":48,"target":25,"value":1},{"source":48,"target":27,"value":1},{"source":48,"target":11,"value":1},{"source":49,"target":26,"value":3},{"source":49,"target":11,"value":2},{"source":50,"target":49,"value":1},{"source":50,"target":24,"value":1},{"source":51,"target":49,"value":9},{"source":51,"target":26,"value":2},{"source":51,"target":11,"value":2},{"source":52,"target":51,"value":1},{"source":52,"target":39,"value":1},{"source":53,"target":51,"value":1},{"source":54,"target":51,"value":2},{"source":54,"target":49,"value":1},{"source":54,"target":26,"value":1},{"source":55,"target":51,"value":6},{"source":55,"target":49,"value":12},{"source":55,"target":39,"value":1},{"source":55,"target":54,"value":1},{"source":55,"target":26,"value":21},{"source":55,"target":11,"value":19},{"source":55,"target":16,"value":1},{"source":55,"target":25,"value":2},{"source":55,"target":41,"value":5},{"source":55,"target":48,"value":4},{"source":56,"target":49,"value":1},{"source":56,"target":55,"value":1},{"source":57,"target":55,"value":1},{"source":57,"target":41,"value":1},{"source":57,"target":48,"value":1},{"source":58,"target":55,"value":7},{"source":58,"target":48,"value":7},{"source":58,"target":27,"value":6},{"source":58,"target":57,"value":1},{"source":58,"target":11,"value":4},{"source":59,"target":58,"value":15},{"source":59,"target":55,"value":5},{"source":59,"target":48,"value":6},{"source":59,"target":57,"value":2},{"source":60,"target":48,"value":1},{"source":60,"target":58,"value":4},{"source":60,"target":59,"value":2},{"source":61,"target":48,"value":2},{"source":61,"target":58,"value":6},{"source":61,"target":60,"value":2},{"source":61,"target":59,"value":5},{"source":61,"target":57,"value":1},{"source":61,"target":55,"value":1},{"source":62,"target":55,"value":9},{"source":62,"target":58,"value":17},{"source":62,"target":59,"value":13},{"source":62,"target":48,"value":7},{"source":62,"target":57,"value":2},{"source":62,"target":41,"value":1},{"source":62,"target":61,"value":6},{"source":62,"target":60,"value":3},{"source":63,"target":59,"value":5},{"source":63,"target":48,"value":5},{"source":63,"target":62,"value":6},{"source":63,"target":57,"value":2},{"source":63,"target":58,"value":4},{"source":63,"target":61,"value":3},{"source":63,"target":60,"value":2},{"source":63,"target":55,"value":1},{"source":64,"target":55,"value":5},{"source":64,"target":62,"value":12},{"source":64,"target":48,"value":5},{"source":64,"target":63,"value":4},{"source":64,"target":58,"value":10},{"source":64,"target":61,"value":6},{"source":64,"target":60,"value":2},{"source":64,"target":59,"value":9},{"source":64,"target":57,"value":1},{"source":64,"target":11,"value":1},{"source":65,"target":63,"value":5},{"source":65,"target":64,"value":7},{"source":65,"target":48,"value":3},{"source":65,"target":62,"value":5},{"source":65,"target":58,"value":5},{"source":65,"target":61,"value":5},{"source":65,"target":60,"value":2},{"source":65,"target":59,"value":5},{"source":65,"target":57,"value":1},{"source":65,"target":55,"value":2},{"source":66,"target":64,"value":3},{"source":66,"target":58,"value":3},{"source":66,"target":59,"value":1},{"source":66,"target":62,"value":2},{"source":66,"target":65,"value":2},{"source":66,"target":48,"value":1},{"source":66,"target":63,"value":1},{"source":66,"target":61,"value":1},{"source":66,"target":60,"value":1},{"source":67,"target":57,"value":3},{"source":68,"target":25,"value":5},{"source":68,"target":11,"value":1},{"source":68,"target":24,"value":1},{"source":68,"target":27,"value":1},{"source":68,"target":48,"value":1},{"source":68,"target":41,"value":1},{"source":69,"target":25,"value":6},{"source":69,"target":68,"value":6},{"source":69,"target":11,"value":1},{"source":69,"target":24,"value":1},{"source":69,"target":27,"value":2},{"source":69,"target":48,"value":1},{"source":69,"target":41,"value":1},{"source":70,"target":25,"value":4},{"source":70,"target":69,"value":4},{"source":70,"target":68,"value":4},{"source":70,"target":11,"value":1},{"source":70,"target":24,"value":1},{"source":70,"target":27,"value":1},{"source":70,"target":41,"value":1},{"source":70,"target":58,"value":1},{"source":71,"target":27,"value":1},{"source":71,"target":69,"value":2},{"source":71,"target":68,"value":2},{"source":71,"target":70,"value":2},{"source":71,"target":11,"value":1},{"source":71,"target":48,"value":1},{"source":71,"target":41,"value":1},{"source":71,"target":25,"value":1},{"source":72,"target":26,"value":2},{"source":72,"target":27,"value":1},{"source":72,"target":11,"value":1},{"source":73,"target":48,"value":2},{"source":74,"target":48,"value":2},{"source":74,"target":73,"value":3},{"source":75,"target":69,"value":3},{"source":75,"target":68,"value":3},{"source":75,"target":25,"value":3},{"source":75,"target":48,"value":1},{"source":75,"target":41,"value":1},{"source":75,"target":70,"value":1},{"source":75,"target":71,"value":1},{"source":76,"target":64,"value":1},{"source":76,"target":65,"value":1},{"source":76,"target":66,"value":1},{"source":76,"target":63,"value":1},{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]}'
  42 +-->
  43 +<div id="graph-placeholder" style="width: 100vw; height: 100vh;"></div>
32 44  
33 45 </body>
34 46 </html>
35 47 \ No newline at end of file
... ...
datalets/graph-datalet/demo/demo-clustering.html
... ... @@ -4,21 +4,33 @@
4 4 <meta charset="UTF-8">
5 5 <title>Demo Graph with node clustering</title>
6 6 <link rel="import" href="../graph-with-clustering-extend-datalet.html">
  7 + <link rel="import" href="../graph-datalet.html">
7 8 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
8 9 </head>
9 10 <script>
10 11 function loadDoc() {
  12 + debugger;
11 13 var xhttp = new XMLHttpRequest();
12 14 xhttp.onreadystatechange = function() {
13 15 if (xhttp.readyState == 4 && xhttp.status == 200) {
14   - document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-extend-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
15   - '\'></graph-with-clustering-extend-datalet>';
  16 + /*document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-extend-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
  17 + '\'></graph-with-clustering-extend-datalet>';*/
  18 +
  19 + document.getElementById("graph-placeholder").innerHTML = '<graph-datalet width="' + $("#graph-placeholder").width() + '" height="' + $("#graph-placeholder").height() * 2 + '" id="dgraph"></graph-datalet>';
  20 +
  21 + var g = document.getElementById('dgraph');
  22 + g.graph = JSON.parse(xhttp.responseText).graph;
  23 + g.init();
16 24 }
17 25 };
18   - xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=8&type=comments", true);
  26 + xhttp.open("GET", "http://spod.databenc.it/spodpublic/ajax/get-graph/?id=41&type=comments", true);
19 27 xhttp.send();
20 28 }
21 29  
  30 + $(document).ready(function(){
  31 + loadDoc();
  32 + });
  33 +
22 34 loadDoc();
23 35  
24 36 </script>
... ... @@ -27,7 +39,7 @@
27 39 <!--
28 40 graph='{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},{"name":"Woman1","group":2},{"name":"Judge","group":2},{"name":"Champmathieu","group":2},{"name":"Brevet","group":2},{"name":"Chenildieu","group":2},{"name":"Cochepaille","group":2},{"name":"Pontmercy","group":4},{"name":"Boulatruelle","group":6},{"name":"Eponine","group":4},{"name":"Anzelma","group":4},{"name":"Woman2","group":5},{"name":"MotherInnocent","group":0},{"name":"Gribier","group":0},{"name":"Jondrette","group":7},{"name":"Mme.Burgon","group":7},{"name":"Gavroche","group":8},{"name":"Gillenormand","group":5},{"name":"Magnon","group":5},{"name":"Mlle.Gillenormand","group":5},{"name":"Mme.Pontmercy","group":5},{"name":"Mlle.Vaubois","group":5},{"name":"Lt.Gillenormand","group":5},{"name":"Marius","group":8},{"name":"BaronessT","group":5},{"name":"Mabeuf","group":8},{"name":"Enjolras","group":8},{"name":"Combeferre","group":8},{"name":"Prouvaire","group":8},{"name":"Feuilly","group":8},{"name":"Courfeyrac","group":8},{"name":"Bahorel","group":8},{"name":"Bossuet","group":8},{"name":"Joly","group":8},{"name":"Grantaire","group":8},{"name":"MotherPlutarch","group":9},{"name":"Gueulemer","group":4},{"name":"Babet","group":4},{"name":"Claquesous","group":4},{"name":"Montparnasse","group":4},{"name":"Toussaint","group":5},{"name":"Child1","group":10},{"name":"Child2","group":10},{"name":"Brujon","group":4},{"name":"Mme.Hucheloup","group":8}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":8},{"source":3,"target":0,"value":10},{"source":3,"target":2,"value":6},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":2},{"source":9,"target":0,"value":1},{"source":11,"target":10,"value":1},{"source":11,"target":3,"value":3},{"source":11,"target":2,"value":3},{"source":11,"target":0,"value":5},{"source":12,"target":11,"value":1},{"source":13,"target":11,"value":1},{"source":14,"target":11,"value":1},{"source":15,"target":11,"value":1},{"source":17,"target":16,"value":4},{"source":18,"target":16,"value":4},{"source":18,"target":17,"value":4},{"source":19,"target":16,"value":4},{"source":19,"target":17,"value":4},{"source":19,"target":18,"value":4},{"source":20,"target":16,"value":3},{"source":20,"target":17,"value":3},{"source":20,"target":18,"value":3},{"source":20,"target":19,"value":4},{"source":21,"target":16,"value":3},{"source":21,"target":17,"value":3},{"source":21,"target":18,"value":3},{"source":21,"target":19,"value":3},{"source":21,"target":20,"value":5},{"source":22,"target":16,"value":3},{"source":22,"target":17,"value":3},{"source":22,"target":18,"value":3},{"source":22,"target":19,"value":3},{"source":22,"target":20,"value":4},{"source":22,"target":21,"value":4},{"source":23,"target":16,"value":3},{"source":23,"target":17,"value":3},{"source":23,"target":18,"value":3},{"source":23,"target":19,"value":3},{"source":23,"target":20,"value":4},{"source":23,"target":21,"value":4},{"source":23,"target":22,"value":4},{"source":23,"target":12,"value":2},{"source":23,"target":11,"value":9},{"source":24,"target":23,"value":2},{"source":24,"target":11,"value":7},{"source":25,"target":24,"value":13},{"source":25,"target":23,"value":1},{"source":25,"target":11,"value":12},{"source":26,"target":24,"value":4},{"source":26,"target":11,"value":31},{"source":26,"target":16,"value":1},{"source":26,"target":25,"value":1},{"source":27,"target":11,"value":17},{"source":27,"target":23,"value":5},{"source":27,"target":25,"value":5},{"source":27,"target":24,"value":1},{"source":27,"target":26,"value":1},{"source":28,"target":11,"value":8},{"source":28,"target":27,"value":1},{"source":29,"target":23,"value":1},{"source":29,"target":27,"value":1},{"source":29,"target":11,"value":2},{"source":30,"target":23,"value":1},{"source":31,"target":30,"value":2},{"source":31,"target":11,"value":3},{"source":31,"target":23,"value":2},{"source":31,"target":27,"value":1},{"source":32,"target":11,"value":1},{"source":33,"target":11,"value":2},{"source":33,"target":27,"value":1},{"source":34,"target":11,"value":3},{"source":34,"target":29,"value":2},{"source":35,"target":11,"value":3},{"source":35,"target":34,"value":3},{"source":35,"target":29,"value":2},{"source":36,"target":34,"value":2},{"source":36,"target":35,"value":2},{"source":36,"target":11,"value":2},{"source":36,"target":29,"value":1},{"source":37,"target":34,"value":2},{"source":37,"target":35,"value":2},{"source":37,"target":36,"value":2},{"source":37,"target":11,"value":2},{"source":37,"target":29,"value":1},{"source":38,"target":34,"value":2},{"source":38,"target":35,"value":2},{"source":38,"target":36,"value":2},{"source":38,"target":37,"value":2},{"source":38,"target":11,"value":2},{"source":38,"target":29,"value":1},{"source":39,"target":25,"value":1},{"source":40,"target":25,"value":1},{"source":41,"target":24,"value":2},{"source":41,"target":25,"value":3},{"source":42,"target":41,"value":2},{"source":42,"target":25,"value":2},{"source":42,"target":24,"value":1},{"source":43,"target":11,"value":3},{"source":43,"target":26,"value":1},{"source":43,"target":27,"value":1},{"source":44,"target":28,"value":3},{"source":44,"target":11,"value":1},{"source":45,"target":28,"value":2},{"source":47,"target":46,"value":1},{"source":48,"target":47,"value":2},{"source":48,"target":25,"value":1},{"source":48,"target":27,"value":1},{"source":48,"target":11,"value":1},{"source":49,"target":26,"value":3},{"source":49,"target":11,"value":2},{"source":50,"target":49,"value":1},{"source":50,"target":24,"value":1},{"source":51,"target":49,"value":9},{"source":51,"target":26,"value":2},{"source":51,"target":11,"value":2},{"source":52,"target":51,"value":1},{"source":52,"target":39,"value":1},{"source":53,"target":51,"value":1},{"source":54,"target":51,"value":2},{"source":54,"target":49,"value":1},{"source":54,"target":26,"value":1},{"source":55,"target":51,"value":6},{"source":55,"target":49,"value":12},{"source":55,"target":39,"value":1},{"source":55,"target":54,"value":1},{"source":55,"target":26,"value":21},{"source":55,"target":11,"value":19},{"source":55,"target":16,"value":1},{"source":55,"target":25,"value":2},{"source":55,"target":41,"value":5},{"source":55,"target":48,"value":4},{"source":56,"target":49,"value":1},{"source":56,"target":55,"value":1},{"source":57,"target":55,"value":1},{"source":57,"target":41,"value":1},{"source":57,"target":48,"value":1},{"source":58,"target":55,"value":7},{"source":58,"target":48,"value":7},{"source":58,"target":27,"value":6},{"source":58,"target":57,"value":1},{"source":58,"target":11,"value":4},{"source":59,"target":58,"value":15},{"source":59,"target":55,"value":5},{"source":59,"target":48,"value":6},{"source":59,"target":57,"value":2},{"source":60,"target":48,"value":1},{"source":60,"target":58,"value":4},{"source":60,"target":59,"value":2},{"source":61,"target":48,"value":2},{"source":61,"target":58,"value":6},{"source":61,"target":60,"value":2},{"source":61,"target":59,"value":5},{"source":61,"target":57,"value":1},{"source":61,"target":55,"value":1},{"source":62,"target":55,"value":9},{"source":62,"target":58,"value":17},{"source":62,"target":59,"value":13},{"source":62,"target":48,"value":7},{"source":62,"target":57,"value":2},{"source":62,"target":41,"value":1},{"source":62,"target":61,"value":6},{"source":62,"target":60,"value":3},{"source":63,"target":59,"value":5},{"source":63,"target":48,"value":5},{"source":63,"target":62,"value":6},{"source":63,"target":57,"value":2},{"source":63,"target":58,"value":4},{"source":63,"target":61,"value":3},{"source":63,"target":60,"value":2},{"source":63,"target":55,"value":1},{"source":64,"target":55,"value":5},{"source":64,"target":62,"value":12},{"source":64,"target":48,"value":5},{"source":64,"target":63,"value":4},{"source":64,"target":58,"value":10},{"source":64,"target":61,"value":6},{"source":64,"target":60,"value":2},{"source":64,"target":59,"value":9},{"source":64,"target":57,"value":1},{"source":64,"target":11,"value":1},{"source":65,"target":63,"value":5},{"source":65,"target":64,"value":7},{"source":65,"target":48,"value":3},{"source":65,"target":62,"value":5},{"source":65,"target":58,"value":5},{"source":65,"target":61,"value":5},{"source":65,"target":60,"value":2},{"source":65,"target":59,"value":5},{"source":65,"target":57,"value":1},{"source":65,"target":55,"value":2},{"source":66,"target":64,"value":3},{"source":66,"target":58,"value":3},{"source":66,"target":59,"value":1},{"source":66,"target":62,"value":2},{"source":66,"target":65,"value":2},{"source":66,"target":48,"value":1},{"source":66,"target":63,"value":1},{"source":66,"target":61,"value":1},{"source":66,"target":60,"value":1},{"source":67,"target":57,"value":3},{"source":68,"target":25,"value":5},{"source":68,"target":11,"value":1},{"source":68,"target":24,"value":1},{"source":68,"target":27,"value":1},{"source":68,"target":48,"value":1},{"source":68,"target":41,"value":1},{"source":69,"target":25,"value":6},{"source":69,"target":68,"value":6},{"source":69,"target":11,"value":1},{"source":69,"target":24,"value":1},{"source":69,"target":27,"value":2},{"source":69,"target":48,"value":1},{"source":69,"target":41,"value":1},{"source":70,"target":25,"value":4},{"source":70,"target":69,"value":4},{"source":70,"target":68,"value":4},{"source":70,"target":11,"value":1},{"source":70,"target":24,"value":1},{"source":70,"target":27,"value":1},{"source":70,"target":41,"value":1},{"source":70,"target":58,"value":1},{"source":71,"target":27,"value":1},{"source":71,"target":69,"value":2},{"source":71,"target":68,"value":2},{"source":71,"target":70,"value":2},{"source":71,"target":11,"value":1},{"source":71,"target":48,"value":1},{"source":71,"target":41,"value":1},{"source":71,"target":25,"value":1},{"source":72,"target":26,"value":2},{"source":72,"target":27,"value":1},{"source":72,"target":11,"value":1},{"source":73,"target":48,"value":2},{"source":74,"target":48,"value":2},{"source":74,"target":73,"value":3},{"source":75,"target":69,"value":3},{"source":75,"target":68,"value":3},{"source":75,"target":25,"value":3},{"source":75,"target":48,"value":1},{"source":75,"target":41,"value":1},{"source":75,"target":70,"value":1},{"source":75,"target":71,"value":1},{"source":76,"target":64,"value":1},{"source":76,"target":65,"value":1},{"source":76,"target":66,"value":1},{"source":76,"target":63,"value":1},{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]}'
29 41 -->
30   -<div id="graph-placeholder"></div>
  42 +<div id="graph-placeholder" style="width: 100vw; height: 100vh;"></div>
31 43  
32 44 </body>
33 45 </html>
34 46 \ No newline at end of file
... ...
datalets/graph-datalet/graph-datalet.html
... ... @@ -288,7 +288,7 @@ Example:
288 288 _this.gnodes.attr("cx", function (t) {
289 289 return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
290 290 }).attr("cy", function (t) {
291   - return t.y = Math.max(8, Math.min(600, t.y))
  291 + return t.y = Math.max(8, Math.min(_this.height, t.y))
292 292 });
293 293  
294 294 _this.glinks.attr("x1", function (t) {
... ...
datalets/graph-datalet/graph-with-clustering-datalet.html
... ... @@ -463,7 +463,7 @@ Example:
463 463 _this.svgNodes.attr("cx", function (t) {
464 464 return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
465 465 }).attr("cy", function (t) {
466   - return t.y = Math.max(8, Math.min(600, t.y))
  466 + return t.y = Math.max(8, Math.min(_this.height, t.y))
467 467 });
468 468  
469 469 _this.svgLinks.attr("x1", function (t) {
... ...
datalets/heatmap-datalet/heatmap-datalet.html
... ... @@ -76,47 +76,35 @@ Example:
76 76 options = {
77 77 chart: {
78 78 type: 'heatmap',
79   - marginTop: 40,
  79 + zoomType: 'xy',
  80 +// marginTop: 40,
80 81 // marginBottom: 80,
81 82 plotBorderWidth: 1
82 83 },
83   -
84 84 title: {
85 85 text: this._component.title
86 86 },
87   -
88 87 xAxis: {
89 88 categories: Xcategories,
90 89 title: {
91 90 text: this._component.xAxisLabel
92 91 }
93 92 },
94   -
95 93 yAxis: {
96 94 categories: Ycategories,
97 95 title: {
98 96 text: this._component.yAxisLabel
99 97 }
100 98 },
101   -
  99 + tooltip: {
  100 + valueSuffix: ' ' + this._component.suffix
  101 + },
102 102 colorAxis: {
103 103 min: 0,
104 104 minColor: '#FFFFFF',
105 105 maxColor: Highcharts.getOptions().colors[0]
106 106 },
107 107  
108   - legend: {
109   - align: 'right',
110   - layout: 'vertical',
111   - margin: 0,
112   - verticalAlign: 'top',
113   - y: 25,
114   - symbolHeight: 280
115   - },
116   - tooltip: {
117   - valueSuffix: ' ' + this._component.suffix
118   - },
119   -
120 108 credits: {
121 109 enabled: false
122 110 },
... ... @@ -124,15 +112,36 @@ Example:
124 112 borderWidth: 1,
125 113 data: series,
126 114 dataLabels: {
127   - enabled: true,
  115 + enabled: this._component.dataLabels,
128 116 color: '#000000'
129   - }
  117 + },
130 118 }]
131 119 };
132 120  
133 121 if(this._component.theme != "themeBase" && this._component.theme != "")
134 122 jQuery.extend(true, options, Highcharts[this._component.theme]);
135 123  
  124 + if(this._component.legend == "topRight")
  125 + options.legend = {
  126 + layout: 'vertical',
  127 + verticalAlign: 'top',
  128 + align: 'right',
  129 + x: -4,
  130 + y: 4,
  131 + floating: true,
  132 + borderWidth: 1,
  133 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  134 + shadow: true,
  135 + };
  136 + else if(this._component.legend == "bottom")
  137 + options.legend = {
  138 + enabled: true
  139 + };
  140 + else
  141 + options.legend ={
  142 + enabled: false
  143 + };
  144 +
136 145 $(this._component.$.charts.$.container).highcharts(options);
137 146 }
138 147 };
... ... @@ -146,50 +155,34 @@ Example:
146 155 type: Array,
147 156 value: undefined
148 157 },
149   - /**
150   - * It's the label for X axis
151   - *
152   - * @attribute xAxisLabel
153   - * @type String
154   - * @default ''
155   - */
156 158 xAxisLabel: {
157 159 type: String,
158 160 value: ""
159 161 },
160   - /**
161   - * It's the label for Y axis
162   - *
163   - * @attribute yAxisLabel
164   - * @type String
165   - * @default ''
166   - */
167 162 yAxisLabel: {
168 163 type: String,
169 164 value: ""
170 165 },
171   - /**
172   - * It's the values suffix
173   - *
174   - * @attribute suffix
175   - * @type String
176   - * @default 'units'
177   - */
178 166 suffix : {
179 167 type : String,
180 168 value : ""
181 169 },
  170 + legend : {
  171 + type : Object,
  172 + value : "topRight"
  173 + },
  174 + dataLabels : {
  175 + type : Object,
  176 + value : true
  177 + },
  178 + stack : {
  179 + type : Object,
  180 + value : false
  181 + },
182 182 theme : {
183 183 type : String,
184 184 value : ""
185 185 },
186   - /**
187   - * It's the component behavior
188   - *
189   - * @attribute behavior
190   - * @type Object
191   - * @default {}
192   - */
193 186 behavior : {
194 187 type : Object,
195 188 value : {}
... ...
datalets/highcharts-datalet/highcharts-datalet.html
... ... @@ -79,31 +79,41 @@ Example :
79 79 },
80 80  
81 81 transformData: function () {
82   - var selectedFields = JSON.parse(this._component.getAttribute("selectedFields"));
83   -
84 82 if(this.data.length == 0)
85 83 return;
86 84  
87   - categories = this.data[0].data;
88   - series = [];
89   - for(var i = 1; i < this.data.length; i++)
90   - series.push(this.data[i]);
  85 + var selectedFields = JSON.parse(this._component.getAttribute("selectedfields"));
  86 +
  87 + var inputs = [];
  88 + if(selectedFields) { /*if deprecated*/
  89 + for (var i=0; i < selectedFields.length; i++)
  90 + if (selectedFields[i])
  91 + inputs.push(selectedFields[i].field);
  92 + }
  93 +
  94 + var cat_index = inputs.indexOf("Categories");
91 95  
92   - this.properties.categories.value = categories;
93   - this.properties.series.value = series;
  96 + if(cat_index == -1) {
  97 + categories = this.data[0].data;
  98 + series = [];
  99 + for (var i = 1; i < this.data.length; i++)
  100 + series.push(this.data[i]);
94 101  
95   - if(this.data.length == 3 && !selectedFields){//split cat
  102 + this.properties.categories.value = categories;
  103 + this.properties.series.value = series;
  104 + }
  105 + else {
96 106 var x = this.data[0]["data"];
97   - var gb = this.data[1]["data"];
98   - var y = this.data[2]["data"];
  107 + var y = this.data[1]["data"];
  108 + var cat = this.data[cat_index]["data"];
99 109  
100 110 var categories = x.filter(function(item, pos) {
101 111 return x.indexOf(item) == pos;
102   - })
  112 + });
103 113  
104   - var s = gb.filter(function(item, pos) {
105   - return gb.indexOf(item) == pos;
106   - })
  114 + var s = cat.filter(function(item, pos) {
  115 + return cat.indexOf(item) == pos;
  116 + });
107 117  
108 118 var series = [];
109 119 for(var i = 0; i < s.length; i++) {
... ... @@ -113,7 +123,7 @@ Example :
113 123 for(var i = 0; i < y.length; i++){
114 124 var index = categories.indexOf(x[i]);
115 125 var s = series.filter(function( obj ) {
116   - return obj.name == gb[i];
  126 + return obj.name == cat[i];
117 127 });
118 128 s[0]["data"][index] = y[i];
119 129 }
... ... @@ -121,7 +131,6 @@ Example :
121 131 this.properties.categories.value = categories;
122 132 this.properties.series.value = series;
123 133 }
124   -
125 134 },
126 135  
127 136 redraw: function () {
... ...
datalets/leafletjs-datalet/leafletjs-datalet.html
... ... @@ -99,6 +99,14 @@ Example:
99 99 if(!isNaN(t.data[0].data[i][0]) && !isNaN(t.data[0].data[i][1]))
100 100 coordinates.push([parseFloat(t.data[0].data[i][0]), parseFloat(t.data[0].data[i][1])]);
101 101 else
  102 + continue;
  103 + }
  104 + else if(typeof t.data[0].data[i] == 'string' && t.data[0].data[i].indexOf(","))
  105 + {
  106 + var coords = t.data[0].data[i].split(",");
  107 + if(!isNaN(coords[0]) && !isNaN(coords[1]))
  108 + coordinates.push([parseFloat(coords[0]), parseFloat(coords[1])]);
  109 + else
102 110 continue;
103 111 }
104 112 else
... ... @@ -206,5 +214,4 @@ Example:
206 214 }
207 215 });
208 216 </script>
209   -</dom-module>
210   -
  217 +</dom-module>
211 218 \ No newline at end of file
... ...
datalets/leafletjs-geojson-datalet/leafletjs-geojson-datalet.html
... ... @@ -93,6 +93,11 @@ Example:
93 93  
94 94 for (var i = 0; i < t.data[0].data.length; i++)
95 95 {
  96 + try{
  97 + if(typeof t.data[0].data[i] != 'object')
  98 + t.data[0].data[i] = JSON.parse(t.data[0].data[i]);
  99 + }catch(e){}
  100 +
96 101 var geoJsonLayer = L.geoJson(t.data[0].data[i]).addTo(t._component.map);
97 102  
98 103 if(t.data.length > 1)
... ...
datalets/leafletjs-geojson-datalet/leafletjs-geojson-datalet.png

5.32 KB | W: | H:

5.72 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/linechart-datalet/linechart-datalet.html
... ... @@ -70,7 +70,7 @@ Example:
70 70 text: this._component.title
71 71 },
72 72 xAxis: {
73   - categories: this.properties.categories.value,//this._component.categories,
  73 + categories: this.properties.categories.value,
74 74 title: {
75 75 text: this._component.xAxisLabel
76 76 }
... ... @@ -84,16 +84,15 @@ Example:
84 84 tooltip: {
85 85 valueSuffix: ' ' + this._component.suffix
86 86 },
87   - legend: {
88   - layout: 'vertical',
89   - align: 'right',
90   - verticalAlign: 'top',
91   - x: -40,
92   - y: 80,
93   - floating: true,
94   - borderWidth: 1,
95   - backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
96   - shadow: true
  87 + plotOptions: {
  88 + line: {
  89 + dataLabels: {
  90 + enabled: this._component.dataLabels
  91 + }
  92 + },
  93 + series: {
  94 + stacking: this._component.stack
  95 + }
97 96 },
98 97 credits: {
99 98 enabled: false
... ... @@ -104,6 +103,27 @@ Example:
104 103 if(this._component.theme != "themeBase" && this._component.theme != "")
105 104 jQuery.extend(true, options, Highcharts[this._component.theme]);
106 105  
  106 + if(this._component.legend == "topRight")
  107 + options.legend = {
  108 + layout: 'vertical',
  109 + verticalAlign: 'top',
  110 + align: 'right',
  111 + x: -4,
  112 + y: 4,
  113 + floating: true,
  114 + borderWidth: 1,
  115 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  116 + shadow: true
  117 + };
  118 + else if(this._component.legend == "bottom")
  119 + options.legend = {
  120 + enabled: true
  121 + };
  122 + else
  123 + options.legend ={
  124 + enabled: false
  125 + };
  126 +
107 127 $(this._component.$.charts.$.container).highcharts(options);
108 128 }
109 129 };
... ... @@ -117,50 +137,34 @@ Example:
117 137 type: Array,
118 138 value: undefined
119 139 },
120   - /**
121   - * It's the label for X axis
122   - *
123   - * @attribute xAxisLabel
124   - * @type String
125   - * @default ''
126   - */
127 140 xAxisLabel: {
128 141 type: String,
129 142 value: ""
130 143 },
131   - /**
132   - * It's the label for Y axis
133   - *
134   - * @attribute yAxisLabel
135   - * @type String
136   - * @default ''
137   - */
138 144 yAxisLabel: {
139 145 type: String,
140 146 value: ""
141 147 },
142   - /**
143   - * It's the values suffix
144   - *
145   - * @attribute suffix
146   - * @type Strig
147   - * @default 'units'
148   - */
149 148 suffix : {
150 149 type : String,
151   - value : "units"
  150 + value : ""
  151 + },
  152 + legend : {
  153 + type : Object,
  154 + value : "topRight"
  155 + },
  156 + dataLabels : {
  157 + type : Object,
  158 + value : true
  159 + },
  160 + stack : {
  161 + type : Object,
  162 + value : false
152 163 },
153 164 theme : {
154 165 type : String,
155 166 value : ""
156 167 },
157   - /**
158   - * It's the component behavior
159   - *
160   - * @attribute behavior
161   - * @type Object
162   - * @default {}
163   - */
164 168 behavior : {
165 169 type : Object,
166 170 value : {}
... ...
datalets/piechart-datalet/piechart-datalet.html
... ... @@ -100,7 +100,7 @@ Example:
100 100 allowPointSelect: true,
101 101 cursor: 'pointer',
102 102 dataLabels: {
103   - enabled: true,
  103 + enabled: this._component.dataLabels,
104 104 format: '<b>{point.name}</b>: {point.percentage:.1f} %',
105 105 style: {
106 106 color: (Highcharts[this._component.theme] && Highcharts[this._component.theme].contrastTextColor) || 'black'
... ... @@ -117,6 +117,31 @@ Example:
117 117 if(this._component.theme != "themeBase" && this._component.theme != "")
118 118 jQuery.extend(true, options, Highcharts[this._component.theme]);
119 119  
  120 + if(this._component.legend == "topRight") {
  121 + options.legend = {
  122 + layout: 'vertical',
  123 + verticalAlign: 'top',
  124 + align: 'right',
  125 + x: -4,
  126 + y: 4,
  127 + floating: true,
  128 + borderWidth: 1,
  129 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  130 + shadow: true
  131 + };
  132 + options.plotOptions.pie.showInLegend = true;
  133 + }
  134 + else if(this._component.legend == "bottom") {
  135 + options.legend = {
  136 + enabled: true
  137 + };
  138 + options.plotOptions.pie.showInLegend = true;
  139 + }
  140 + else
  141 + options.legend ={
  142 + enabled: false
  143 + };
  144 +
120 145 $(this._component.$.charts.$.container).highcharts(options);
121 146 }
122 147 };
... ... @@ -134,14 +159,22 @@ Example:
134 159 type : String,
135 160 value : ""
136 161 },
137   - theme : {
138   - type : String,
139   - value : ""
  162 + legend : {
  163 + type : Object,
  164 + value : "topRight"
  165 + },
  166 + dataLabels : {
  167 + type : Object,
  168 + value : true
140 169 },
141 170 donut : {
142 171 type : String,
143 172 value : "false"
144 173 },
  174 + theme : {
  175 + type : String,
  176 + value : ""
  177 + },
145 178 behavior : {
146 179 type : Object,
147 180 value : {}
... ...
datalets/scatterchart-datalet/scatterchart-datalet.html
... ... @@ -85,7 +85,7 @@ Example:
85 85 }
86 86  
87 87 this.properties.series = scatterSeries;
88   - this._component.legend = true;
  88 +// this._component.legend = true;
89 89 }
90 90 else {// == 2
91 91 var scatterSeries = [];
... ... @@ -100,7 +100,7 @@ Example:
100 100 scatterSeries.push({data: series});
101 101  
102 102 this.properties.series = scatterSeries;
103   - this._component.legend = false;
  103 +// this._component.legend = false;
104 104 }
105 105  
106 106 options = {
... ... @@ -121,8 +121,12 @@ Example:
121 121 text: this._component.yAxisLabel,
122 122 }
123 123 },
124   - legend: {
125   - enabled: this._component.legend,
  124 + plotOptions: {
  125 + scatter: {
  126 + dataLabels: {
  127 + enabled: this._component.dataLabels
  128 + }
  129 + },
126 130 },
127 131 credits: {
128 132 enabled: false
... ... @@ -133,6 +137,27 @@ Example:
133 137 if(this._component.theme != "themeBase" && this._component.theme != "")
134 138 jQuery.extend(true, options, Highcharts[this._component.theme]);
135 139  
  140 + if(this._component.legend == "topRight")
  141 + options.legend = {
  142 + layout: 'vertical',
  143 + verticalAlign: 'top',
  144 + align: 'right',
  145 + x: -4,
  146 + y: 4,
  147 + floating: true,
  148 + borderWidth: 1,
  149 + backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
  150 + shadow: true
  151 + };
  152 + else if(this._component.legend == "bottom")
  153 + options.legend = {
  154 + enabled: true
  155 + };
  156 + else
  157 + options.legend ={
  158 + enabled: false
  159 + };
  160 +
136 161 $(this._component.$.charts.$.container).highcharts(options);
137 162 }
138 163 };
... ... @@ -153,14 +178,18 @@ Example:
153 178 type: String,
154 179 value: ""
155 180 },
156   - suffix : {
157   - type : String,
158   - value : ""
159   - },
160 181 theme : {
161 182 type : String,
162 183 value : ""
163 184 },
  185 + legend : {
  186 + type : Object,
  187 + value : "topRight"
  188 + },
  189 + dataLabels : {
  190 + type : Object,
  191 + value : true
  192 + },
164 193 behavior : {
165 194 type : Object,
166 195 value : {}
... ...
locales/controllet_ln.js
... ... @@ -5,16 +5,18 @@ ln[&quot;localization&quot;] = &quot;en&quot;;
5 5 /******** EN ********/
6 6  
7 7 //PAGE SLIDER
  8 +
8 9 ln["slide1Title_en"] = "SELECT DATASET";
9 10 ln["slide1Subtitle_en"] = "Select a dataset from the list or copy and paste the url of dataset.";
10 11 ln["slide2Title_en"] = "SELECT DATA";
11 12 ln["slide2Subtitle_en"] = "Select the fields on the left. The table will show the values related to the selected fields.";
12 13 ln["slide3Title_en"] = "SELECT VISUALIZATION";
13   -ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
14   -ln["back_en"] = "Back";
15   -ln["forward_en"] = "Forward";
  14 +ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and options.";
  15 +ln["back_en"] = "BACK TO THE FUTURE";
  16 +ln["forward_en"] = "FORWARD";
16 17  
17 18 //SELECT DATASET
  19 +
18 20 ln["listView_en"] = "LIST VIEW";
19 21 ln["treeMapView_en"] = "TREE MAP VIEW";
20 22 ln["extendedSearch_en"] = "EXTENDED SEARCH";
... ... @@ -23,516 +25,795 @@ ln[&quot;showing_en&quot;] = &quot;Showing&quot;;
23 25 ln["to_en"] = "to";
24 26 ln["of_en"] = "of";
25 27 ln["datasets_en"] = "datasets";
26   -//ln["availableDatasets_en"] = "Available datasets";
27 28 ln["suggestedDatasets_en"] = "Suggested datasets";
28 29 ln["selectedUrl_en"] = "Selected url";
29 30 ln["wrongUrl_en"] = "Invalid url or data provider not supported yet.";
30 31  
31 32 //SELECT DATA
32   -ln["expertAddFilters_en"] = "EXPERT : ADD FILTERS";
33 33  
34 34 //select-fields
35 35 ln["fields_en"] = "FIELDS";
36 36  
37 37 //data-table
38 38 ln["selectedData_en"] = "SELECTED DATA";
39   -//ln["showing_en"] = "Showing";
40   -//ln["to_en"] = "to";
41   -//ln["of_en"] = "of";
  39 +ln["showing_en"] = "Showing";
  40 +ln["to_en"] = "to";
  41 +ln["of_en"] = "of";
42 42 ln["rows_en"] = "rows";
43 43 ln["type_en"] = "TYPE";
44 44 ln["warning_en"] = "WARNING";
45 45  
  46 +//expert
  47 +ln["expert_en"] = "EXPERT MODE";
  48 +ln["filters_en"] = "FILTERS";
  49 +ln["groupBy_en"] = "GROUP BY";
  50 +ln["query_en"] = "QUERY";
  51 +
46 52 //filters
47 53 ln["filterField_en"] = "Field";
48 54 ln["filterOperation_en"] = "Operation";
49 55 ln["filterValue_en"] = "Value";
50 56  
51   -ln["=_en"] = "is equal to";
52   -ln["!=_en"] = "is different from";
53   -ln[">_en"] = "is greater than";
54   -ln[">=_en"] = "is greater than or equal to";
55   -ln["<_en"] = "is less than";
56   -ln["<=_en"] = "is less than or equal to";
  57 +ln["disableFilters_en"] = "DISABLE FILTERS";
  58 +ln["enableFilters_en"] = "ENABLE FILTERS";
  59 +
  60 +ln["=_en"] = "="; //is equal to
  61 +ln["!=_en"] = "not ="; //is not equal to
  62 +ln[">_en"] = ">"; //is greater than
  63 +ln[">=_en"] = ">="; //is greater than or equal to
  64 +ln["<_en"] = "<"; //is less than
  65 +ln["<=_en"] = "<="; //is less than or equal to
57 66 ln["contains_en"] = "contains";
58 67 ln["notContains_en"] = "not contains";
59 68 ln["start_en"] = "start with";
60 69 ln["ends_en"] = "ends with";
61 70  
  71 +//aggregators
  72 +ln["GROUP BY_en"] = "GROUP BY";
  73 +ln["CALCULATE_en"] = "CALCULATE";
  74 +ln["Calculate_en"] = "Calculate";
  75 +ln["aggregatorField_en"] = "Field";
  76 +
  77 +ln["disableGroupBy_en"] = "DISABLE GROUP BY";
  78 +ln["enableGroupBy_en"] = "ENABLE GROUP BY";
  79 +
  80 +ln["COUNT_en"] = "COUNT of";
  81 +ln["SUM_en"] = "SUM of";
  82 +ln["MIN_en"] = "MIN of";
  83 +ln["MAX_en"] = "MAX of";
  84 +ln["AVG_en"] = "AVG of";
  85 +ln["FIRST_en"] = "FIRST of";
  86 +ln["LAST_en"] = "LAST of";
  87 +
62 88 //SELECT VISUALIZATION
63   -ln["inputs_en"] = "INPUTS";
64   -ln["baseInfo_en"] = "BASE INFO";
65   -ln["layouts_en"] = "LABELS / OPTIONS";
66   -ln["dataletPreview_en"] = "DATALET PREVIEW";
  89 +
67 90 ln["addDatalet_en"] = "ADD";
68 91 ln["modifyDatalet_en"] = "MODIFY";
69 92  
  93 +//datalet-preview
  94 +ln["previewTab_en"] = "DATALET PREVIEW";
  95 +ln["infoTab_en"] = "DATALET INFO";
  96 +
  97 +//select-inputs
  98 +ln["baseInfo_en"] = "BASE INFO";
  99 +ln["inputs_en"] = "INPUTS";
  100 +ln["options_en"] = "OPTIONS";
  101 +
70 102 //vslider
71 103 ln["search_en"] = "Search";
72 104  
73 105 ln["datatable_en"] = "Table";
74   -ln["barchart_en"] = "Bar";
75   -ln["columnchart_en"] = "Column";
76   -ln["areachart_en"] = "Area";
77   -ln["linechart_en"] = "Line";
  106 +ln["barchart_en"] = "Bar Chart";
  107 +ln["columnchart_en"] = "Column Chart";
  108 +ln["areachart_en"] = "Area Chart";
  109 +ln["linechart_en"] = "Line Chart";
78 110 ln["heatmap_en"] = "Heat Map";
79   -ln["barchart_stacked_en"] = "Stacked Bar";
80   -ln["columnchart_stacked_en"] = "Stacked Column";
81   -ln["areachart_stacked_en"] = "Stacked Area";
82   -ln["piechart_en"] = "Pie";
83   -ln["scatterchart_en"] = "Scatter";
84   -ln["bubblechart_en"] = "Bubble";
  111 +ln["piechart_en"] = "Pie Chart";
  112 +ln["scatterchart_en"] = "Scatter Chart";
  113 +ln["bubblechart_en"] = "Bubble Chart";
85 114 ln["treemap_en"] = "Tree Map";
86 115 ln["leafletjs_en"] = "Map";
87   -ln["leafletjs-geojson_en"] = "Map Geojson";
  116 +ln["leafletjs-geojson_en"] = "Geojson Map";
  117 +
  118 +ln["datatableDescription_en"] = "A table is a means of arranging data in rows and columns.";
  119 +ln["barchartDescription_en"] = "A bar chart is a chart that presents grouped data with rectangular bars plotted horizontally with lengths proportional to the values that they represent.";
  120 +ln["columnchartDescription_en"] = "A column chart is a chart that presents grouped data with rectangular bars plotted vertically with lengths proportional to the values that they represent.";
  121 +ln["areachartDescription_en"] = "An area chart is a chart which displays graphically quantitive data. The area between axis and line are emphasized with colors and textures. Commonly one compares with the area chart two or more quantities.";
  122 +ln["linechartDescription_en"] = "A line chart is chart which displays information as a series of data points called 'markers' connected by straight line segments. A line chart is often used to visualize a trend in data over intervals of time.";
  123 +ln["heatmapDescription_en"] = "A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.";
  124 +ln["piechartDescription_en"] = "A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In the pie chart, the arc length of each slice, and consequently its central angle and area, is proportional to the quantity it represents.";
  125 +ln["scatterchartDescription_en"] = "A scatter chart is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.";
  126 +ln["bubblechartDescription_en"] = "A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size.";
  127 +ln["treemapDescription_en"] = "A tree map is a chart for displaying hierarchical data by using nested rectangles.";
  128 +ln["leafletjsDescription_en"] = "";
  129 +ln["leafletjs-geojsonDescription_en"] = "";
88 130  
89 131 //inputs
90   -ln["expertGroupBy_en"] = "EXPERT : GROUP BY";
91   -
92   -ln["sortAscending_en"] = "sorted ascending";
93   -ln["sortDescending_en"] = "sorted descending";
94   -ln["unsort_en"] = "unsorted";
95   -
96   -ln["groupBy_en"] = "GROUP BY";
97   -ln["calculate_en"] = "CALCULATE";
98   -
99   -ln["COUNT_en"] = "COUNT of";
100   -ln["SUM_en"] = "SUM of";
101   -ln["MIN_en"] = "MIN of";
102   -ln["MAX_en"] = "MAX of";
103   -ln["AVG_en"] = "AVG of";
104   -ln["FIRST_en"] = "FIRST of";
105   -ln["LAST_en"] = "LAST of";
  132 +ln["title_en"] = "Title"
  133 +ln["description_en"] = "Description";
106 134  
107   -ln["XAxis_en"] = "X AXIS";
108   -ln["YAxis_en"] = "Y AXIS";
109   -ln["NumericXAxis_en"] = "X AXIS [num]";
110   -ln["NumericYAxis_en"] = "Y AXIS [num]";
  135 +ln["sortAscending_en"] = "SORTED ASCENDING";
  136 +ln["sortDescending_en"] = "SORTED DESCENDING";
  137 +ln["unsort_en"] = "UNSORTED";
  138 +
  139 +//--> "_" not allowed!
  140 +ln["TITLE_en"] = "TITLE";
  141 +ln["DESCRIPTION_en"] = "DESCRIPTION";
  142 +ln["XAxis_en"] = "X-AXIS";
  143 +ln["YAxis_en"] = "Y-AXIS";
  144 +ln["NumericXAxis_en"] = "X-AXIS";
  145 +ln["NumericYAxis_en"] = "Y-AXIS";
111 146 ln["Column_en"] = "COLUMN";
112 147 ln["Level_en"] = "LEVEL";
113 148 ln["SliceLabels_en"] = "LABEL";
114   -ln["SliceSizes_en"] = "SIZE [num]";
  149 +ln["SliceSizes_en"] = "SIZE";
115 150 ln["Latitude_en"] = "LATITUDE";
116 151 ln["Longitude_en"] = "LONGITUDE";
117   -ln["BalloonContent_en"] = "BALLOON CONTENT";// [opt]
  152 +ln["BalloonContent_en"] = "BALLOON CONTENT";
118 153 ln["GEOJSON_en"] = "GEOJSON";
  154 +ln["GEOJSONContent_en"] = "GEOJSON CONTENT";
119 155 ln["BubbleContent_en"] = "BUBBLE CONTENT";
120   -ln["BubbleSize_en"] = "BUBBLE SIZE [num]";
121   -ln["Categories_en"] = "CATEGORY [opt]";
  156 +ln["BubbleSize_en"] = "BUBBLE SIZE";
  157 +ln["Categories_en"] = "CATEGORY";
  158 +
  159 +ln["TITLEDescription_en"] = "The datalet title.";
  160 +ln["DESCRIPTIONDescription_en"] = "The datalet description.";
  161 +ln["XAxisDescription_en"] = "The x-axis.";
  162 +ln["YAxisDescription_en"] = "The y-axis.";
  163 +ln["NumericXAxisDescription_en"] = "The x-axis.";
  164 +ln["NumericYAxisDescription_en"] = "The y-axis.";
  165 +ln["ColumnDescription_en"] = "The column of the table.";
  166 +ln["LevelDescription_en"] = "The level of the tree map.";
  167 +ln["SliceLabelsDescription_en"] = "The label of the slices.";
  168 +ln["SliceSizesDescription_en"] = "The size of the slices.";
  169 +ln["LatitudeDescription_en"] = "The latitude of locations.";
  170 +ln["LongitudeDescription_en"] = "The longitude of locations.";
  171 +ln["BalloonContentDescription_en"] = "The content of balloons.";
  172 +ln["GEOJSONDescription_en"] = "The GeoJSON data.";
  173 +ln["GEOJSONContentDescription_en"] = "The content of GeoJSON.";
  174 +ln["BubbleContentDescription_en"] = "The content of bubbles.";
  175 +ln["BubbleSizeDescription_en"] = "The size of bubbles.";
  176 +ln["CategoriesDescription_en"] = "The category that splits the y-axis values. If selected only the first selected y-axis will be considered.";
122 177  
123 178 //options
124   -ln["title_en"] = "Title"
125   -ln["description_en"] = "Description";
126   -
127 179 ln["x-axis-label_en"] = "X Axis Label";
128 180 ln["y-axis-label_en"] = "Y Axis Label";
129 181 ln["suffix_en"] = "Tooltip Suffix";
130   -ln["theme_en"] = "Theme";
  182 +ln["legend_en"] = "Leged";
  183 +ln["data-labels_en"] = "Show Data Labels";
131 184 ln["stack_en"] = "Stack";
  185 +ln["theme_en"] = "Theme";
132 186 ln["donut_en"] = "Donut";
133 187  
134   -ln["x-axis-label_description_en"] = "The label shown on the X axis";
135   -ln["y-axis-label_description_en"] = "The label shown on the Y axis";
136   -ln["suffix_description_en"] = "The suffix added to values ($,%, Kg, ...)";
137   -ln["theme_description_en"] = "The theme affects the appearance and colors of the graph";
138   -ln["stack_description_en"] = "If 'percent' normalization to 100 will be applied";
139   -ln["donut_description_en"] = "If 'true' Pie will become Donut! :)";
  188 +ln["true_en"] = "Yes";
  189 +ln["false_en"] = "No";
  190 +ln["bottom_en"] = "Yes: Bottom";
  191 +ln["topRight_en"] = "Yes: Top Right";
  192 +ln["normal_en"] = "Yes: Normal";
  193 +ln["percent_en"] = "Yes: Percent";
  194 +ln["themeBase_en"] = "Base";
  195 +ln["themeDarkUnika_en"] = "Dark Unika";
  196 +ln["themeSandSignika_en"] = "Sand Signika";
  197 +ln["themeGridLight_en"] = "Grid Light";
  198 +ln["themeSpod_en"] = "Spod";
  199 +
  200 +ln["x-axis-labelDescription_en"] = "The x-axis label.";
  201 +ln["y-axis-labelDescription_en"] = "The y-axis label.";
  202 +ln["suffixDescription_en"] = "The suffix added to data labels in the tooltip.";
  203 +ln["legendDescription_en"] = "The leged position.";
  204 +ln["data-labelsDescription_en"] = "Show/hide data labels.";
  205 +ln["themeDescription_en"] = "The theme affects the appearance and colors of the chart.";
  206 +ln["stackDescription_en"] = "The stack type.";
  207 +ln["donutDescription_en"] = "Pie will become Donut! :) (or viceversa).";
140 208  
141 209 /******** IT ********/
142 210  
143 211 //PAGE SLIDER
144   -ln["slide1Title_it"] = "SELEZIONA IL DATASET";
145   -ln["slide1Subtitle_it"] = "Seleziona il dataset dalla lista o copia e incolla la url del dataset.";
146   -ln["slide2Title_it"] = "SELEZIONA I DATI";
147   -ln["slide2Subtitle_it"] = "Seleziona i campi sulla sinistra. Nella tabella saranno mostrati i valori dei campi selezionati.";
148   -ln["slide3Title_it"] = "SELEZIONA LA VISUALIZZAZIONE";
149   -ln["slide3Subtitle_it"] = "Seleziona una visualizzazione, inserisci dati di input ed etichette (opzionale).";
150   -ln["back_it"] = "Indietro";
151   -ln["forward_it"] = "Avanti";
  212 +
  213 +ln["slide1Title_it"] = "SELECT DATASET";
  214 +ln["slide1Subtitle_it"] = "Select a dataset from the list or copy and paste the url of dataset.";
  215 +ln["slide2Title_it"] = "SELECT DATA";
  216 +ln["slide2Subtitle_it"] = "Select the fields on the left. The table will show the values related to the selected fields.";
  217 +ln["slide3Title_it"] = "SELECT VISUALIZATION";
  218 +ln["slide3Subtitle_it"] = "Select a visualization, fill out inputs and options.";
  219 +ln["back_it"] = "BACK TO THE FUTURE";
  220 +ln["forward_it"] = "FORWARD";
152 221  
153 222 //SELECT DATASET
154   -ln["listView_it"] = "ELENCO";
155   -ln["treeMapView_it"] = "GRAFICO AD ALBERO";
156   -ln["extendedSearch_it"] = "RICERCA ESTESA";
  223 +
  224 +ln["listView_it"] = "LIST VIEW";
  225 +ln["treeMapView_it"] = "TREE MAP VIEW";
  226 +ln["extendedSearch_it"] = "EXTENDED SEARCH";
157 227 ln["provider_it"] = "Provider";
158   -ln["showing_it"] = "Visualizzati";
159   -ln["to_it"] = "a";
160   -ln["of_it"] = "di";
  228 +ln["showing_it"] = "Showing";
  229 +ln["to_it"] = "to";
  230 +ln["of_it"] = "of";
161 231 ln["datasets_it"] = "datasets";
162   -//ln["availableDatasets_it"] = "Dataset disponibili";
163   -ln["suggestedDatasets_it"] = "Dataset suggeriti";
164   -ln["selectedUrl_it"] = "Url selezionata";
165   -ln["wrongUrl_it"] = "Url invalido o data provider non ancora supportato.";
  232 +ln["suggestedDatasets_it"] = "Suggested datasets";
  233 +ln["selectedUrl_it"] = "Selected url";
  234 +ln["wrongUrl_it"] = "Invalid url or data provider not supported yet.";
166 235  
167 236 //SELECT DATA
168   -ln["expertAddFilters_it"] = "ESPERTO : AGGIUNGI FILTRI";
169 237  
170 238 //select-fields
171   -ln["fields_it"] = "CAMPI";
  239 +ln["fields_it"] = "FIELDS";
172 240  
173 241 //data-table
174   -ln["selectedData_it"] = "DATI SELEZIONATI";
175   -ln["rows_it"] = "righe";
176   -ln["type_it"] = "TIPO";
177   -ln["warning_it"] = "ATTENZIONE";
  242 +ln["selectedData_it"] = "SELECTED DATA";
  243 +ln["showing_it"] = "Showing";
  244 +ln["to_it"] = "to";
  245 +ln["of_it"] = "of";
  246 +ln["rows_it"] = "rows";
  247 +ln["type_it"] = "TYPE";
  248 +ln["warning_it"] = "WARNING";
  249 +
  250 +//expert
  251 +ln["expert_it"] = "EXPERT MODE";
  252 +ln["filters_it"] = "FILTERS";
  253 +ln["groupBy_it"] = "GROUP BY";
  254 +ln["query_it"] = "QUERY";
178 255  
179 256 //filters
180   -ln["filterField_it"] = "Campo";
181   -ln["filterOperation_it"] = "Operazione";
182   -ln["filterValue_it"] = "Valore";
183   -
184   -ln["=_it"] = "รจ uguale a";
185   -ln["!=_it"] = "รจ diverso da";
186   -ln[">_it"] = "รจ maggiore di";
187   -ln[">=_it"] = "รจ maggiore uguale di";
188   -ln["<_it"] = "รจ minore di";
189   -ln["<=_it"] = "รจ minore uguale di";
190   -ln["contains_it"] = "contiene";
191   -ln["notContains_it"] = "non contiene";
192   -ln["start_it"] = "inizia con";
193   -ln["ends_it"] = "finisce con";
  257 +ln["filterField_it"] = "Field";
  258 +ln["filterOperation_it"] = "Operation";
  259 +ln["filterValue_it"] = "Value";
  260 +
  261 +ln["disableFilters_it"] = "DISABLE FILTERS";
  262 +ln["enableFilters_it"] = "ENABLE FILTERS";
  263 +
  264 +ln["=_it"] = "="; //is equal to
  265 +ln["!=_it"] = "not ="; //is not equal to
  266 +ln[">_it"] = ">"; //is greater than
  267 +ln[">=_it"] = ">="; //is greater than or equal to
  268 +ln["<_it"] = "<"; //is less than
  269 +ln["<=_it"] = "<="; //is less than or equal to
  270 +ln["contains_it"] = "contains";
  271 +ln["notContains_it"] = "not contains";
  272 +ln["start_it"] = "start with";
  273 +ln["ends_it"] = "ends with";
  274 +
  275 +//aggregators
  276 +ln["GROUP BY_it"] = "GROUP BY";
  277 +ln["CALCULATE_it"] = "CALCULATE";
  278 +ln["Calculate_it"] = "Calculate";
  279 +ln["aggregatorField_it"] = "Field";
  280 +
  281 +ln["disableGroupBy_it"] = "DISABLE GROUP BY";
  282 +ln["enableGroupBy_it"] = "ENABLE GROUP BY";
  283 +
  284 +ln["COUNT_it"] = "COUNT of";
  285 +ln["SUM_it"] = "SUM of";
  286 +ln["MIN_it"] = "MIN of";
  287 +ln["MAX_it"] = "MAX of";
  288 +ln["AVG_it"] = "AVG of";
  289 +ln["FIRST_it"] = "FIRST of";
  290 +ln["LAST_it"] = "LAST of";
194 291  
195 292 //SELECT VISUALIZATION
196   -ln["inputs_it"] = "DATI DI INPUT";
197   -ln["baseInfo_it"] = "INFORMAZIONI DI BASE";
198   -ln["layouts_it"] = "ETICHETTE / OPZIONI";
199   -ln["dataletPreview_it"] = "ANTEPRIMA DELLA DATALET";
200   -ln["addDatalet_it"] = "AGGIUNGI";
201   -ln["modifyDatalet_it"] = "MODIFICA";
  293 +
  294 +ln["addDatalet_it"] = "ADD";
  295 +ln["modifyDatalet_it"] = "MODIFY";
  296 +
  297 +//datalet-preview
  298 +ln["previewTab_it"] = "DATALET PREVIEW";
  299 +ln["infoTab_it"] = "DATALET INFO";
  300 +
  301 +//select-inputs
  302 +ln["baseInfo_it"] = "BASE INFO";
  303 +ln["inputs_it"] = "INPUTS";
  304 +ln["options_it"] = "OPTIONS";
202 305  
203 306 //vslider
204   -ln["search_it"] = "Cerca";
205   -
206   -ln["datatable_it"] = "Tabella";
207   -ln["barchart_it"] = "Grafico a barre";
208   -ln["columnchart_it"] = "Grafico a colonne";
209   -ln["areachart_it"] = "Grafico ad area";
210   -ln["linechart_it"] = "Grafico a linee";
211   -ln["heatmap_it"] = "Mappa termica";
212   -ln["barchart_stacked_it"] = "Grafico a barre in pila";
213   -ln["columnchart_stacked_it"] = "Grafico a colonne in pila";
214   -ln["areachart_stacked_it"] = "Grafico ad area in pila";
215   -ln["piechart_it"] = "Grafico a torta";
216   -ln["scatterchart_it"] = "Grafico a dispersione";
217   -ln["bubblechart_it"] = "Grafico a bolle";
218   -ln["treemap_it"] = "Grafico ad albero";
219   -ln["leafletjs_it"] = "Mappa";
220   -ln["leafletjs-geojson_it"] = "Mappa geojson";
  307 +ln["search_it"] = "Search";
  308 +
  309 +ln["datatable_it"] = "Table";
  310 +ln["barchart_it"] = "Bar Chart";
  311 +ln["columnchart_it"] = "Column Chart";
  312 +ln["areachart_it"] = "Area Chart";
  313 +ln["linechart_it"] = "Line Chart";
  314 +ln["heatmap_it"] = "Heat Map";
  315 +ln["piechart_it"] = "Pie Chart";
  316 +ln["scatterchart_it"] = "Scatter Chart";
  317 +ln["bubblechart_it"] = "Bubble Chart";
  318 +ln["treemap_it"] = "Tree Map";
  319 +ln["leafletjs_it"] = "Map";
  320 +ln["leafletjs-geojson_it"] = "Geojson Map";
  321 +
  322 +ln["datatableDescription_it"] = "A table is a means of arranging data in rows and columns.";
  323 +ln["barchartDescription_it"] = "A bar chart is a chart that presents grouped data with rectangular bars plotted horizontally with lengths proportional to the values that they represent.";
  324 +ln["columnchartDescription_it"] = "A column chart is a chart that presents grouped data with rectangular bars plotted vertically with lengths proportional to the values that they represent.";
  325 +ln["areachartDescription_it"] = "An area chart is a chart which displays graphically quantitive data. The area between axis and line are emphasized with colors and textures. Commonly one compares with the area chart two or more quantities.";
  326 +ln["linechartDescription_it"] = "A line chart is chart which displays information as a series of data points called 'markers' connected by straight line segments. A line chart is often used to visualize a trend in data over intervals of time.";
  327 +ln["heatmapDescription_it"] = "A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.";
  328 +ln["piechartDescription_it"] = "A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In the pie chart, the arc length of each slice, and consequently its central angle and area, is proportional to the quantity it represents.";
  329 +ln["scatterchartDescription_it"] = "A scatter chart is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.";
  330 +ln["bubblechartDescription_it"] = "A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size.";
  331 +ln["treemapDescription_it"] = "A tree map is a chart for displaying hierarchical data by using nested rectangles.";
  332 +ln["leafletjsDescription_it"] = "";
  333 +ln["leafletjs-geojsonDescription_it"] = "";
221 334  
222 335 //inputs
223   -ln["expertGroupBy_it"] = "ESPERTO : RAGGRUPPA";
224   -
225   -ln["sortAscending_it"] = "ordinamento crescente";
226   -ln["sortDescending_it"] = "ordinamento decrescente";
227   -ln["unsort_it"] = "non ordinato";
228   -
229   -ln["groupBy_it"] = "RAGGRUPPA";
230   -ln["calculate_it"] = "CALCOLA";
231   -
232   -ln["COUNT_it"] = "CONTEGGIO di";
233   -ln["SUM_it"] = "SOMMA di";
234   -ln["MIN_it"] = "MINIMO di";
235   -ln["MAX_it"] = "MASSIMO di";
236   -ln["AVG_it"] = "MEDIA di";
237   -ln["FIRST_it"] = "PRIMO di";
238   -ln["LAST_it"] = "ULTIMO di";
239   -
240   -ln["XAxis_it"] = "ASSE X";
241   -ln["YAxis_it"] = "ASSE Y";
242   -ln["NumericXAxis_it"] = "ASSE X [num]";
243   -ln["NumericYAxis_it"] = "ASSE Y [num]";
244   -ln["Column_it"] = "COLONNA";
245   -ln["Level_it"] = "LIVELLO";
246   -ln["SliceLabels_it"] = "ETICHETTA";
247   -ln["SliceSizes_it"] = "DIMENSIONE [num]";
248   -ln["Latitude_it"] = "LATITUDINE";
249   -ln["Longitude_it"] = "LONGITUDINE";
250   -ln["BalloonContent_it"] = "CONTENUTO";
  336 +ln["title_it"] = "Title"
  337 +ln["description_it"] = "Description";
  338 +
  339 +ln["sortAscending_it"] = "SORTED ASCENDING";
  340 +ln["sortDescending_it"] = "SORTED DESCENDING";
  341 +ln["unsort_it"] = "UNSORTED";
  342 +
  343 +//--> "_" not allowed!
  344 +ln["TITLE_it"] = "TITLE";
  345 +ln["DESCRIPTION_it"] = "DESCRIPTION";
  346 +ln["XAxis_it"] = "X-AXIS";
  347 +ln["YAxis_it"] = "Y-AXIS";
  348 +ln["NumericXAxis_it"] = "X-AXIS";
  349 +ln["NumericYAxis_it"] = "Y-AXIS";
  350 +ln["Column_it"] = "COLUMN";
  351 +ln["Level_it"] = "LEVEL";
  352 +ln["SliceLabels_it"] = "LABEL";
  353 +ln["SliceSizes_it"] = "SIZE";
  354 +ln["Latitude_it"] = "LATITUDE";
  355 +ln["Longitude_it"] = "LONGITUDE";
  356 +ln["BalloonContent_it"] = "BALLOON CONTENT";
251 357 ln["GEOJSON_it"] = "GEOJSON";
252   -ln["BubbleContent_it"] = "CONTENUTO BOLLA";
253   -ln["BubbleSize_it"] = "DIMENSIONE BOLLA [num]";
254   -ln["Categories_it"] = "CATEGORIA [opt]";
  358 +ln["GEOJSONContent_it"] = "GEOJSON CONTENT";
  359 +ln["BubbleContent_it"] = "BUBBLE CONTENT";
  360 +ln["BubbleSize_it"] = "BUBBLE SIZE";
  361 +ln["Categories_it"] = "CATEGORY";
  362 +
  363 +ln["TITLEDescription_it"] = "The datalet title.";
  364 +ln["DESCRIPTIONDescription_it"] = "The datalet description.";
  365 +ln["XAxisDescription_it"] = "The x-axis.";
  366 +ln["YAxisDescription_it"] = "The y-axis.";
  367 +ln["NumericXAxisDescription_it"] = "The x-axis.";
  368 +ln["NumericYAxisDescription_it"] = "The y-axis.";
  369 +ln["ColumnDescription_it"] = "The column of the table.";
  370 +ln["LevelDescription_it"] = "The level of the tree map.";
  371 +ln["SliceLabelsDescription_it"] = "The label of the slices.";
  372 +ln["SliceSizesDescription_it"] = "The size of the slices.";
  373 +ln["LatitudeDescription_it"] = "The latitude of locations.";
  374 +ln["LongitudeDescription_it"] = "The longitude of locations.";
  375 +ln["BalloonContentDescription_it"] = "The content of balloons.";
  376 +ln["GEOJSONDescription_it"] = "The GeoJSON data.";
  377 +ln["GEOJSONContentDescription_it"] = "The content of GeoJSON.";
  378 +ln["BubbleContentDescription_it"] = "The content of bubbles.";
  379 +ln["BubbleSizeDescription_it"] = "The size of bubbles.";
  380 +ln["CategoriesDescription_it"] = "The category that splits the y-axis values. If selected only the first selected y-axis will be considered.";
255 381  
256 382 //options
257   -ln["title_it"] = "Titolo"
258   -ln["description_it"] = "Descrizione";
259   -
260   -ln["x-axis-label_it"] = "Etichetta asse X";
261   -ln["y-axis-label_it"] = "Etichetta asse Y";
262   -ln["suffix_it"] = "Suffisso tooltip";
263   -ln["theme_it"] = "Tema";
  383 +ln["x-axis-label_it"] = "X Axis Label";
  384 +ln["y-axis-label_it"] = "Y Axis Label";
  385 +ln["suffix_it"] = "Tooltip Suffix";
  386 +ln["legend_it"] = "Leged";
  387 +ln["data-labels_it"] = "Show Data Labels";
264 388 ln["stack_it"] = "Stack";
265   -ln["donut_it"] = "Ciambella";
266   -
267   -ln["x-axis-label_description_it"] = "L'etichetta che verrร  visualizzata sull'asse delle X";
268   -ln["y-axis-label_description_it"] = "L'etichetta che verrร  visualizzata sull'asse delle Y";
269   -ln["suffix_description_it"] = "Il suffisso che verrร  aggiunto ai valori ($, %, Kg, ...)";
270   -ln["theme_description_it"] = "Il tema influenza l'estetica e i colori del grafico";
271   -ln["stack_description_it"] = "Se 'percent' sarร  applicata la normalizzazione a 100";
272   -ln["donut_description_it"] = "Se 'true' il grafico a torta diventerร  a ciambella! :)";
  389 +ln["theme_it"] = "Theme";
  390 +ln["donut_it"] = "Donut";
  391 +
  392 +ln["true_it"] = "Yes";
  393 +ln["false_it"] = "No";
  394 +ln["bottom_it"] = "Yes: Bottom";
  395 +ln["topRight_it"] = "Yes: Top Right";
  396 +ln["normal_it"] = "Yes: Normal";
  397 +ln["percent_it"] = "Yes: Percent";
  398 +ln["themeBase_it"] = "Base";
  399 +ln["themeDarkUnika_it"] = "Dark Unika";
  400 +ln["themeSandSignika_it"] = "Sand Signika";
  401 +ln["themeGridLight_it"] = "Grid Light";
  402 +ln["themeSpod_it"] = "Spod";
  403 +
  404 +ln["x-axis-labelDescription_it"] = "The x-axis label.";
  405 +ln["y-axis-labelDescription_it"] = "The y-axis label.";
  406 +ln["suffixDescription_it"] = "The suffix added to data labels in the tooltip.";
  407 +ln["legendDescription_it"] = "The leged position.";
  408 +ln["data-labelsDescription_it"] = "Show/hide data labels.";
  409 +ln["themeDescription_it"] = "The theme affects the appearance and colors of the chart.";
  410 +ln["stackDescription_it"] = "The stack type.";
  411 +ln["donutDescription_it"] = "Pie will become Donut! :) (or viceversa).";
273 412  
274 413 /******** FR ********/
275 414  
276 415 //PAGE SLIDER
277   -ln["slide1Title_fr"] = "SELECTIONNER UN JEU DE DONNEES";
278   -ln["slide1Subtitle_fr"] = "Rechercher ou copier/coller lโ€™url du jeu de donnรฉes.";
279   -ln["slide2Title_fr"] = "SELECTIONNER DONNEES";
280   -ln["slide2Subtitle_fr"] = "Sรฉlectionner les champs ร  partir de lโ€™arborescence. Une fenรชtre vous indiquera les valeurs relatives aux champs sรฉlectionnรฉs.";
281   -ln["slide3Title_fr"] = "SELECTIONNER UN MODE DE VISUALISATION";
282   -ln["slide3Subtitle_fr"] = "Sรฉlectionner un mode de visualisation, remplir les entrรฉes et les vignettes (optionnel).";
283   -ln["back_fr"] = "RETOUR";
284   -ln["forward_fr"] = "AVANT";
  416 +
  417 +ln["slide1Title_fr"] = "SELECT DATASET";
  418 +ln["slide1Subtitle_fr"] = "Select a dataset from the list or copy and paste the url of dataset.";
  419 +ln["slide2Title_fr"] = "SELECT DATA";
  420 +ln["slide2Subtitle_fr"] = "Select the fields on the left. The table will show the values related to the selected fields.";
  421 +ln["slide3Title_fr"] = "SELECT VISUALIZATION";
  422 +ln["slide3Subtitle_fr"] = "Select a visualization, fill out inputs and options.";
  423 +ln["back_fr"] = "BACK TO THE FUTURE";
  424 +ln["forward_fr"] = "FORWARD";
285 425  
286 426 //SELECT DATASET
287   -ln["listView_fr"] = "VUE EN LISTE";
288   -ln["treeMapView_fr"] = "VUE EN ARBORESCENCE";
  427 +
  428 +ln["listView_fr"] = "LIST VIEW";
  429 +ln["treeMapView_fr"] = "TREE MAP VIEW";
289 430 ln["extendedSearch_fr"] = "EXTENDED SEARCH";
290 431 ln["provider_fr"] = "Provider";
291 432 ln["showing_fr"] = "Showing";
292 433 ln["to_fr"] = "to";
293 434 ln["of_fr"] = "of";
294 435 ln["datasets_fr"] = "datasets";
295   -//ln["availableDatasets_fr"] = "Jeux de donnรฉes disponibles";
296   -ln["suggestedDatasets_fr"] = "Jeux de donnรฉes suggรฉrรฉs";
297   -ln["selectedUrl_fr"] = "Sรฉlectionner URL";
  436 +ln["suggestedDatasets_fr"] = "Suggested datasets";
  437 +ln["selectedUrl_fr"] = "Selected url";
298 438 ln["wrongUrl_fr"] = "Invalid url or data provider not supported yet.";
299 439  
300 440 //SELECT DATA
301   -ln["expertAddFilters_fr"] = "EXPERT : ADD FILTERS";
302 441  
303 442 //select-fields
304 443 ln["fields_fr"] = "FIELDS";
305 444  
306 445 //data-table
307 446 ln["selectedData_fr"] = "SELECTED DATA";
  447 +ln["showing_fr"] = "Showing";
  448 +ln["to_fr"] = "to";
  449 +ln["of_fr"] = "of";
308 450 ln["rows_fr"] = "rows";
309 451 ln["type_fr"] = "TYPE";
310 452 ln["warning_fr"] = "WARNING";
311 453  
  454 +//expert
  455 +ln["expert_fr"] = "EXPERT MODE";
  456 +ln["filters_fr"] = "FILTERS";
  457 +ln["groupBy_fr"] = "GROUP BY";
  458 +ln["query_fr"] = "QUERY";
  459 +
312 460 //filters
313 461 ln["filterField_fr"] = "Field";
314 462 ln["filterOperation_fr"] = "Operation";
315 463 ln["filterValue_fr"] = "Value";
316 464  
317   -ln["=_fr"] = "is equal to";
318   -ln["!=_fr"] = "is different from";
319   -ln[">_fr"] = "is greater than";
320   -ln[">=_fr"] = "is greater than or equal to";
321   -ln["<_fr"] = "is less than";
322   -ln["<=_fr"] = "is less than or equal to";
  465 +ln["disableFilters_fr"] = "DISABLE FILTERS";
  466 +ln["enableFilters_fr"] = "ENABLE FILTERS";
  467 +
  468 +ln["=_fr"] = "="; //is equal to
  469 +ln["!=_fr"] = "not ="; //is not equal to
  470 +ln[">_fr"] = ">"; //is greater than
  471 +ln[">=_fr"] = ">="; //is greater than or equal to
  472 +ln["<_fr"] = "<"; //is less than
  473 +ln["<=_fr"] = "<="; //is less than or equal to
323 474 ln["contains_fr"] = "contains";
324 475 ln["notContains_fr"] = "not contains";
325 476 ln["start_fr"] = "start with";
326 477 ln["ends_fr"] = "ends with";
327 478  
  479 +//aggregators
  480 +ln["GROUP BY_fr"] = "GROUP BY";
  481 +ln["CALCULATE_fr"] = "CALCULATE";
  482 +ln["Calculate_fr"] = "Calculate";
  483 +ln["aggregatorField_fr"] = "Field";
  484 +
  485 +ln["disableGroupBy_fr"] = "DISABLE GROUP BY";
  486 +ln["enableGroupBy_fr"] = "ENABLE GROUP BY";
  487 +
  488 +ln["COUNT_fr"] = "COUNT of";
  489 +ln["SUM_fr"] = "SUM of";
  490 +ln["MIN_fr"] = "MIN of";
  491 +ln["MAX_fr"] = "MAX of";
  492 +ln["AVG_fr"] = "AVG of";
  493 +ln["FIRST_fr"] = "FIRST of";
  494 +ln["LAST_fr"] = "LAST of";
  495 +
328 496 //SELECT VISUALIZATION
329   -ln["inputs_fr"] = "SORTIES";
330   -ln["baseInfo_fr"] = "INFORMATION DE BASE";
331   -ln["layouts_fr"] = "VIGNETTES/OPTIONSs";
332   -ln["dataletPreview_fr"] = "PREVISUALISATION";
333   -ln["addDatalet_fr"] = "AJOUTER";
334   -ln["modifyDatalet_fr"] = "MODIFIER";
  497 +
  498 +ln["addDatalet_fr"] = "ADD";
  499 +ln["modifyDatalet_fr"] = "MODIFY";
  500 +
  501 +//datalet-preview
  502 +ln["previewTab_fr"] = "DATALET PREVIEW";
  503 +ln["infoTab_fr"] = "DATALET INFO";
  504 +
  505 +//select-inputs
  506 +ln["baseInfo_fr"] = "BASE INFO";
  507 +ln["inputs_fr"] = "INPUTS";
  508 +ln["options_fr"] = "OPTIONS";
335 509  
336 510 //vslider
337 511 ln["search_fr"] = "Search";
338 512  
339 513 ln["datatable_fr"] = "Table";
340   -ln["barchart_fr"] = "Bar";
341   -ln["columnchart_fr"] = "Column";
342   -ln["areachart_fr"] = "Area";
343   -ln["linechart_fr"] = "Line";
  514 +ln["barchart_fr"] = "Bar Chart";
  515 +ln["columnchart_fr"] = "Column Chart";
  516 +ln["areachart_fr"] = "Area Chart";
  517 +ln["linechart_fr"] = "Line Chart";
344 518 ln["heatmap_fr"] = "Heat Map";
345   -ln["barchart_stacked_fr"] = "Stacked Bar";
346   -ln["columnchart_stacked_fr"] = "Stacked Column";
347   -ln["areachart_stacked_fr"] = "Stacked Area";
348   -ln["piechart_fr"] = "Pie";
349   -ln["scatterchart_fr"] = "Scatter";
350   -ln["bubblechart_fr"] = "Bubble";
  519 +ln["piechart_fr"] = "Pie Chart";
  520 +ln["scatterchart_fr"] = "Scatter Chart";
  521 +ln["bubblechart_fr"] = "Bubble Chart";
351 522 ln["treemap_fr"] = "Tree Map";
352 523 ln["leafletjs_fr"] = "Map";
353   -ln["leafletjs-geojson_fr"] = "Map Geojson";
  524 +ln["leafletjs-geojson_fr"] = "Geojson Map";
  525 +
  526 +ln["datatableDescription_fr"] = "A table is a means of arranging data in rows and columns.";
  527 +ln["barchartDescription_fr"] = "A bar chart is a chart that presents grouped data with rectangular bars plotted horizontally with lengths proportional to the values that they represent.";
  528 +ln["columnchartDescription_fr"] = "A column chart is a chart that presents grouped data with rectangular bars plotted vertically with lengths proportional to the values that they represent.";
  529 +ln["areachartDescription_fr"] = "An area chart is a chart which displays graphically quantitive data. The area between axis and line are emphasized with colors and textures. Commonly one compares with the area chart two or more quantities.";
  530 +ln["linechartDescription_fr"] = "A line chart is chart which displays information as a series of data points called 'markers' connected by straight line segments. A line chart is often used to visualize a trend in data over intervals of time.";
  531 +ln["heatmapDescription_fr"] = "A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.";
  532 +ln["piechartDescription_fr"] = "A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In the pie chart, the arc length of each slice, and consequently its central angle and area, is proportional to the quantity it represents.";
  533 +ln["scatterchartDescription_fr"] = "A scatter chart is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.";
  534 +ln["bubblechartDescription_fr"] = "A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size.";
  535 +ln["treemapDescription_fr"] = "A tree map is a chart for displaying hierarchical data by using nested rectangles.";
  536 +ln["leafletjsDescription_fr"] = "";
  537 +ln["leafletjs-geojsonDescription_fr"] = "";
354 538  
355 539 //inputs
356   -ln["expertGroupBy_fr"] = "EXPERT : GROUP BY";
357   -
358   -ln["sortAscending_fr"] = "sorted ascending";
359   -ln["sortDescending_fr"] = "sorted descending";
360   -ln["unsort_fr"] = "unsorted";
361   -
362   -ln["groupBy_fr"] = "GROUP BY";
363   -ln["calculate_fr"] = "CALCULATE";
364   -
365   -ln["COUNT_fr"] = "COUNT of";
366   -ln["SUM_fr"] = "SUM of";
367   -ln["MIN_fr"] = "MIN of";
368   -ln["MAX_fr"] = "MAX of";
369   -ln["AVG_fr"] = "AVG of";
370   -ln["FIRST_fr"] = "FIRST of";
371   -ln["LAST_fr"] = "LAST of";
  540 +ln["title_fr"] = "Title"
  541 +ln["description_fr"] = "Description";
372 542  
373   -ln["XAxis_fr"] = "X AXIS";
374   -ln["YAxis_fr"] = "Y AXIS";
375   -ln["NumericXAxis_fr"] = "X AXIS [num]";
376   -ln["NumericYAxis_fr"] = "Y AXIS [num]";
  543 +ln["sortAscending_fr"] = "SORTED ASCENDING";
  544 +ln["sortDescending_fr"] = "SORTED DESCENDING";
  545 +ln["unsort_fr"] = "UNSORTED";
  546 +
  547 +//--> "_" not allowed!
  548 +ln["TITLE_fr"] = "TITLE";
  549 +ln["DESCRIPTION_fr"] = "DESCRIPTION";
  550 +ln["XAxis_fr"] = "X-AXIS";
  551 +ln["YAxis_fr"] = "Y-AXIS";
  552 +ln["NumericXAxis_fr"] = "X-AXIS";
  553 +ln["NumericYAxis_fr"] = "Y-AXIS";
377 554 ln["Column_fr"] = "COLUMN";
378 555 ln["Level_fr"] = "LEVEL";
379 556 ln["SliceLabels_fr"] = "LABEL";
380   -ln["SliceSizes_fr"] = "SIZE [num]";
  557 +ln["SliceSizes_fr"] = "SIZE";
381 558 ln["Latitude_fr"] = "LATITUDE";
382 559 ln["Longitude_fr"] = "LONGITUDE";
383   -ln["BalloonContent_fr"] = "BALLOON CONTENT";// [opt]
  560 +ln["BalloonContent_fr"] = "BALLOON CONTENT";
384 561 ln["GEOJSON_fr"] = "GEOJSON";
  562 +ln["GEOJSONContent_fr"] = "GEOJSON CONTENT";
385 563 ln["BubbleContent_fr"] = "BUBBLE CONTENT";
386   -ln["BubbleSize_fr"] = "BUBBLE SIZE [num]";
387   -ln["Categories_fr"] = "CATEGORY [opt]";
  564 +ln["BubbleSize_fr"] = "BUBBLE SIZE";
  565 +ln["Categories_fr"] = "CATEGORY";
  566 +
  567 +ln["TITLEDescription_fr"] = "The datalet title.";
  568 +ln["DESCRIPTIONDescription_fr"] = "The datalet description.";
  569 +ln["XAxisDescription_fr"] = "The x-axis.";
  570 +ln["YAxisDescription_fr"] = "The y-axis.";
  571 +ln["NumericXAxisDescription_fr"] = "The x-axis.";
  572 +ln["NumericYAxisDescription_fr"] = "The y-axis.";
  573 +ln["ColumnDescription_fr"] = "The column of the table.";
  574 +ln["LevelDescription_fr"] = "The level of the tree map.";
  575 +ln["SliceLabelsDescription_fr"] = "The label of the slices.";
  576 +ln["SliceSizesDescription_fr"] = "The size of the slices.";
  577 +ln["LatitudeDescription_fr"] = "The latitude of locations.";
  578 +ln["LongitudeDescription_fr"] = "The longitude of locations.";
  579 +ln["BalloonContentDescription_fr"] = "The content of balloons.";
  580 +ln["GEOJSONDescription_fr"] = "The GeoJSON data.";
  581 +ln["GEOJSONContentDescription_fr"] = "The content of GeoJSON.";
  582 +ln["BubbleContentDescription_fr"] = "The content of bubbles.";
  583 +ln["BubbleSizeDescription_fr"] = "The size of bubbles.";
  584 +ln["CategoriesDescription_fr"] = "The category that splits the y-axis values. If selected only the first selected y-axis will be considered.";
388 585  
389 586 //options
390   -ln["title_fr"] = "Title"
391   -ln["description_fr"] = "Description";
392   -
393 587 ln["x-axis-label_fr"] = "X Axis Label";
394 588 ln["y-axis-label_fr"] = "Y Axis Label";
395 589 ln["suffix_fr"] = "Tooltip Suffix";
396   -ln["theme_fr"] = "Theme";
  590 +ln["legend_fr"] = "Leged";
  591 +ln["data-labels_fr"] = "Show Data Labels";
397 592 ln["stack_fr"] = "Stack";
  593 +ln["theme_fr"] = "Theme";
398 594 ln["donut_fr"] = "Donut";
399 595  
400   -ln["x-axis-label_description_fr"] = "Vignette pour lโ€™axe X.";
401   -ln["y-axis-label_description_fr"] = "Vignette pour lโ€™axe Y.";
402   -ln["suffix_description_fr"] = "Unitรฉs de mesures (ex: dollars, euros.";
403   -ln["theme_description_fr"] = "Theme";
404   -ln["stack_description_fr"] = "Stack";
405   -ln["donut_description_fr"] = "Donut";
  596 +ln["true_fr"] = "Yes";
  597 +ln["false_fr"] = "No";
  598 +ln["bottom_fr"] = "Yes: Bottom";
  599 +ln["topRight_fr"] = "Yes: Top Right";
  600 +ln["normal_fr"] = "Yes: Normal";
  601 +ln["percent_fr"] = "Yes: Percent";
  602 +ln["themeBase_fr"] = "Base";
  603 +ln["themeDarkUnika_fr"] = "Dark Unika";
  604 +ln["themeSandSignika_fr"] = "Sand Signika";
  605 +ln["themeGridLight_fr"] = "Grid Light";
  606 +ln["themeSpod_fr"] = "Spod";
  607 +
  608 +ln["x-axis-labelDescription_fr"] = "The x-axis label.";
  609 +ln["y-axis-labelDescription_fr"] = "The y-axis label.";
  610 +ln["suffixDescription_fr"] = "The suffix added to data labels in the tooltip.";
  611 +ln["legendDescription_fr"] = "The leged position.";
  612 +ln["data-labelsDescription_fr"] = "Show/hide data labels.";
  613 +ln["themeDescription_fr"] = "The theme affects the appearance and colors of the chart.";
  614 +ln["stackDescription_fr"] = "The stack type.";
  615 +ln["donutDescription_fr"] = "Pie will become Donut! :) (or viceversa).";
406 616  
407 617 /******** NL ********/
408 618  
409 619 //PAGE SLIDER
410   -ln["slide1Title_nl"] = "SELECTEER DATASET";
411   -ln["slide1Subtitle_nl"] = "Zoek of kopieer en plak de url van de dataset.";
412   -ln["slide2Title_nl"] = "SELECTEER DATA";
413   -ln["slide2Subtitle_nl"] = "Selecteer de velden uit de boomstructuur. De multi-tabel laat de waarden zien van de geselecteerde velden.";
414   -ln["slide3Title_nl"] = "SELECTEER VISUALISATIE";
415   -ln["slide3Subtitle_nl"] = "Selecteer een visualisatie, vul de invoer en labels in.";
416   -ln["back_nl"] = "TERUG";
417   -ln["forward_nl"] = "VOOTUIT";
  620 +
  621 +ln["slide1Title_nl"] = "SELECT DATASET";
  622 +ln["slide1Subtitle_nl"] = "Select a dataset from the list or copy and paste the url of dataset.";
  623 +ln["slide2Title_nl"] = "SELECT DATA";
  624 +ln["slide2Subtitle_nl"] = "Select the fields on the left. The table will show the values related to the selected fields.";
  625 +ln["slide3Title_nl"] = "SELECT VISUALIZATION";
  626 +ln["slide3Subtitle_nl"] = "Select a visualization, fill out inputs and options.";
  627 +ln["back_nl"] = "BACK TO THE FUTURE";
  628 +ln["forward_nl"] = "FORWARD";
418 629  
419 630 //SELECT DATASET
420   -ln["listView_nl"] = "LIJSTWEERGAVE";
421   -ln["treeMapView_nl"] = "BOOMSTRUCTUUR WEEERGAVE";
  631 +
  632 +ln["listView_nl"] = "LIST VIEW";
  633 +ln["treeMapView_nl"] = "TREE MAP VIEW";
422 634 ln["extendedSearch_nl"] = "EXTENDED SEARCH";
423 635 ln["provider_nl"] = "Provider";
424 636 ln["showing_nl"] = "Showing";
425 637 ln["to_nl"] = "to";
426 638 ln["of_nl"] = "of";
427 639 ln["datasets_nl"] = "datasets";
428   -//ln["availableDatasets_nl"] = "Beschikbare datasets";
429   -ln["suggestedDatasets_nl"] = "Voeg aanbevolen datasets";
430   -ln["selectedUrl_nl"] = "Selecteer url";
431   -ln["wrongUrl_nl"] = "Ongeldige url of data provider nog niet ondersteund.";
  640 +ln["suggestedDatasets_nl"] = "Suggested datasets";
  641 +ln["selectedUrl_nl"] = "Selected url";
  642 +ln["wrongUrl_nl"] = "Invalid url or data provider not supported yet.";
432 643  
433 644 //SELECT DATA
434   -ln["expertAddFilters_nl"] = "EXPERT : ADD FILTERS";
435 645  
436 646 //select-fields
437 647 ln["fields_nl"] = "FIELDS";
438 648  
439 649 //data-table
440 650 ln["selectedData_nl"] = "SELECTED DATA";
  651 +ln["showing_nl"] = "Showing";
  652 +ln["to_nl"] = "to";
  653 +ln["of_nl"] = "of";
441 654 ln["rows_nl"] = "rows";
442 655 ln["type_nl"] = "TYPE";
443 656 ln["warning_nl"] = "WARNING";
444 657  
  658 +//expert
  659 +ln["expert_nl"] = "EXPERT MODE";
  660 +ln["filters_nl"] = "FILTERS";
  661 +ln["groupBy_nl"] = "GROUP BY";
  662 +ln["query_nl"] = "QUERY";
  663 +
445 664 //filters
446 665 ln["filterField_nl"] = "Field";
447 666 ln["filterOperation_nl"] = "Operation";
448 667 ln["filterValue_nl"] = "Value";
449 668  
450   -ln["=_nl"] = "is equal to";
451   -ln["!=_nl"] = "is different from";
452   -ln[">_nl"] = "is greater than";
453   -ln[">=_nl"] = "is greater than or equal to";
454   -ln["<_nl"] = "is less than";
455   -ln["<=_nl"] = "is less than or equal to";
  669 +ln["disableFilters_nl"] = "DISABLE FILTERS";
  670 +ln["enableFilters_nl"] = "ENABLE FILTERS";
  671 +
  672 +ln["=_nl"] = "="; //is equal to
  673 +ln["!=_nl"] = "not ="; //is not equal to
  674 +ln[">_nl"] = ">"; //is greater than
  675 +ln[">=_nl"] = ">="; //is greater than or equal to
  676 +ln["<_nl"] = "<"; //is less than
  677 +ln["<=_nl"] = "<="; //is less than or equal to
456 678 ln["contains_nl"] = "contains";
457 679 ln["notContains_nl"] = "not contains";
458 680 ln["start_nl"] = "start with";
459 681 ln["ends_nl"] = "ends with";
460 682  
  683 +//aggregators
  684 +ln["GROUP BY_nl"] = "GROUP BY";
  685 +ln["CALCULATE_nl"] = "CALCULATE";
  686 +ln["Calculate_nl"] = "Calculate";
  687 +ln["aggregatorField_nl"] = "Field";
  688 +
  689 +ln["disableGroupBy_nl"] = "DISABLE GROUP BY";
  690 +ln["enableGroupBy_nl"] = "ENABLE GROUP BY";
  691 +
  692 +ln["COUNT_nl"] = "COUNT of";
  693 +ln["SUM_nl"] = "SUM of";
  694 +ln["MIN_nl"] = "MIN of";
  695 +ln["MAX_nl"] = "MAX of";
  696 +ln["AVG_nl"] = "AVG of";
  697 +ln["FIRST_nl"] = "FIRST of";
  698 +ln["LAST_nl"] = "LAST of";
  699 +
461 700 //SELECT VISUALIZATION
  701 +
  702 +ln["addDatalet_nl"] = "ADD";
  703 +ln["modifyDatalet_nl"] = "MODIFY";
  704 +
  705 +//datalet-preview
  706 +ln["previewTab_nl"] = "DATALET PREVIEW";
  707 +ln["infoTab_nl"] = "DATALET INFO";
  708 +
  709 +//select-inputs
  710 +ln["baseInfo_nl"] = "BASE INFO";
462 711 ln["inputs_nl"] = "INPUTS";
463   -ln["baseInfo_nl"] = "BASIS INFO";
464   -ln["layouts_nl"] = "LABELS / OPTIES";
465   -ln["dataletPreview_nl"] = "VOORBEELD";
466   -ln["addDatalet_nl"] = "TOEVOEGEN";
467   -ln["modifyDatalet_nl"] = "WIJZIGEN";
  712 +ln["options_nl"] = "OPTIONS";
468 713  
469 714 //vslider
470 715 ln["search_nl"] = "Search";
471 716  
472   -ln["datatable_nl"] = "Tafel";
473   -ln["barchart_nl"] = "Bar";
474   -ln["columnchart_nl"] = "Column";
475   -ln["areachart_nl"] = "Area";
476   -ln["linechart_nl"] = "Line";
  717 +ln["datatable_nl"] = "Table";
  718 +ln["barchart_nl"] = "Bar Chart";
  719 +ln["columnchart_nl"] = "Column Chart";
  720 +ln["areachart_nl"] = "Area Chart";
  721 +ln["linechart_nl"] = "Line Chart";
477 722 ln["heatmap_nl"] = "Heat Map";
478   -ln["barchart_stacked_nl"] = "Stacked Bar";
479   -ln["columnchart_stacked_nl"] = "Stacked Column";
480   -ln["areachart_stacked_nl"] = "Stacked Area";
481   -ln["piechart_nl"] = "Pie";
482   -ln["scatterchart_nl"] = "Scatter";
483   -ln["bubblechart_nl"] = "Bubble";
  723 +ln["piechart_nl"] = "Pie Chart";
  724 +ln["scatterchart_nl"] = "Scatter Chart";
  725 +ln["bubblechart_nl"] = "Bubble Chart";
484 726 ln["treemap_nl"] = "Tree Map";
485 727 ln["leafletjs_nl"] = "Map";
486   -ln["leafletjs-geojson_nl"] = "Map Geojson";
  728 +ln["leafletjs-geojson_nl"] = "Geojson Map";
  729 +
  730 +ln["datatableDescription_nl"] = "A table is a means of arranging data in rows and columns.";
  731 +ln["barchartDescription_nl"] = "A bar chart is a chart that presents grouped data with rectangular bars plotted horizontally with lengths proportional to the values that they represent.";
  732 +ln["columnchartDescription_nl"] = "A column chart is a chart that presents grouped data with rectangular bars plotted vertically with lengths proportional to the values that they represent.";
  733 +ln["areachartDescription_nl"] = "An area chart is a chart which displays graphically quantitive data. The area between axis and line are emphasized with colors and textures. Commonly one compares with the area chart two or more quantities.";
  734 +ln["linechartDescription_nl"] = "A line chart is chart which displays information as a series of data points called 'markers' connected by straight line segments. A line chart is often used to visualize a trend in data over intervals of time.";
  735 +ln["heatmapDescription_nl"] = "A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.";
  736 +ln["piechartDescription_nl"] = "A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In the pie chart, the arc length of each slice, and consequently its central angle and area, is proportional to the quantity it represents.";
  737 +ln["scatterchartDescription_nl"] = "A scatter chart is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.";
  738 +ln["bubblechartDescription_nl"] = "A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size.";
  739 +ln["treemapDescription_nl"] = "A tree map is a chart for displaying hierarchical data by using nested rectangles.";
  740 +ln["leafletjsDescription_nl"] = "";
  741 +ln["leafletjs-geojsonDescription_nl"] = "";
487 742  
488 743 //inputs
489   -ln["expertGroupBy_nl"] = "EXPERT : GROUP BY";
490   -
491   -ln["sortAscending_nl"] = "sorted ascending";
492   -ln["sortDescending_nl"] = "sorted descending";
493   -ln["unsort_nl"] = "unsorted";
494   -
495   -ln["groupBy_nl"] = "GROUP BY";
496   -ln["calculate_nl"] = "CALCULATE";
497   -
498   -ln["COUNT_nl"] = "COUNT of";
499   -ln["SUM_nl"] = "SUM of";
500   -ln["MIN_nl"] = "MIN of";
501   -ln["MAX_nl"] = "MAX of";
502   -ln["AVG_nl"] = "AVG of";
503   -ln["FIRST_nl"] = "FIRST of";
504   -ln["LAST_nl"] = "LAST of";
  744 +ln["title_nl"] = "Title"
  745 +ln["description_nl"] = "Description";
505 746  
506   -ln["XAxis_nl"] = "X AXIS";
507   -ln["YAxis_nl"] = "Y AXIS";
508   -ln["NumericXAxis_nl"] = "X AXIS [num]";
509   -ln["NumericYAxis_nl"] = "Y AXIS [num]";
  747 +ln["sortAscending_nl"] = "SORTED ASCENDING";
  748 +ln["sortDescending_nl"] = "SORTED DESCENDING";
  749 +ln["unsort_nl"] = "UNSORTED";
  750 +
  751 +//--> "_" not allowed!
  752 +ln["TITLE_nl"] = "TITLE";
  753 +ln["DESCRIPTION_nl"] = "DESCRIPTION";
  754 +ln["XAxis_nl"] = "X-AXIS";
  755 +ln["YAxis_nl"] = "Y-AXIS";
  756 +ln["NumericXAxis_nl"] = "X-AXIS";
  757 +ln["NumericYAxis_nl"] = "Y-AXIS";
510 758 ln["Column_nl"] = "COLUMN";
511 759 ln["Level_nl"] = "LEVEL";
512 760 ln["SliceLabels_nl"] = "LABEL";
513   -ln["SliceSizes_nl"] = "SIZE [num]";
  761 +ln["SliceSizes_nl"] = "SIZE";
514 762 ln["Latitude_nl"] = "LATITUDE";
515 763 ln["Longitude_nl"] = "LONGITUDE";
516   -ln["BalloonContent_nl"] = "BALLOON CONTENT";// [opt]
  764 +ln["BalloonContent_nl"] = "BALLOON CONTENT";
517 765 ln["GEOJSON_nl"] = "GEOJSON";
  766 +ln["GEOJSONContent_nl"] = "GEOJSON CONTENT";
518 767 ln["BubbleContent_nl"] = "BUBBLE CONTENT";
519   -ln["BubbleSize_nl"] = "BUBBLE SIZE [num]";
520   -ln["Categories_nl"] = "CATEGORY [opt]";
  768 +ln["BubbleSize_nl"] = "BUBBLE SIZE";
  769 +ln["Categories_nl"] = "CATEGORY";
  770 +
  771 +ln["TITLEDescription_nl"] = "The datalet title.";
  772 +ln["DESCRIPTIONDescription_nl"] = "The datalet description.";
  773 +ln["XAxisDescription_nl"] = "The x-axis.";
  774 +ln["YAxisDescription_nl"] = "The y-axis.";
  775 +ln["NumericXAxisDescription_nl"] = "The x-axis.";
  776 +ln["NumericYAxisDescription_nl"] = "The y-axis.";
  777 +ln["ColumnDescription_nl"] = "The column of the table.";
  778 +ln["LevelDescription_nl"] = "The level of the tree map.";
  779 +ln["SliceLabelsDescription_nl"] = "The label of the slices.";
  780 +ln["SliceSizesDescription_nl"] = "The size of the slices.";
  781 +ln["LatitudeDescription_nl"] = "The latitude of locations.";
  782 +ln["LongitudeDescription_nl"] = "The longitude of locations.";
  783 +ln["BalloonContentDescription_nl"] = "The content of balloons.";
  784 +ln["GEOJSONDescription_nl"] = "The GeoJSON data.";
  785 +ln["GEOJSONContentDescription_nl"] = "The content of GeoJSON.";
  786 +ln["BubbleContentDescription_nl"] = "The content of bubbles.";
  787 +ln["BubbleSizeDescription_nl"] = "The size of bubbles.";
  788 +ln["CategoriesDescription_nl"] = "The category that splits the y-axis values. If selected only the first selected y-axis will be considered.";
521 789  
522 790 //options
523   -ln["title_nl"] = "Title"
524   -ln["description_nl"] = "Description";
525   -
526 791 ln["x-axis-label_nl"] = "X Axis Label";
527 792 ln["y-axis-label_nl"] = "Y Axis Label";
528 793 ln["suffix_nl"] = "Tooltip Suffix";
529   -ln["theme_nl"] = "Theme";
  794 +ln["legend_nl"] = "Leged";
  795 +ln["data-labels_nl"] = "Show Data Labels";
530 796 ln["stack_nl"] = "Stack";
  797 +ln["theme_nl"] = "Theme";
531 798 ln["donut_nl"] = "Donut";
532 799  
533   -ln["x-axis-label_description_nl"] = "X Axis Label";
534   -ln["y-axis-label_description_nl"] = "Y Axis Label";
535   -ln["suffix_description_nl"] = "Tooltip Suffix";
536   -ln["theme_description_nl"] = "Theme";
537   -ln["stack_description_nl"] = "Stack";
538   -ln["donut_description_nl"] = "Donut";
539 800 \ No newline at end of file
  801 +ln["true_nl"] = "Yes";
  802 +ln["false_nl"] = "No";
  803 +ln["bottom_nl"] = "Yes: Bottom";
  804 +ln["topRight_nl"] = "Yes: Top Right";
  805 +ln["normal_nl"] = "Yes: Normal";
  806 +ln["percent_nl"] = "Yes: Percent";
  807 +ln["themeBase_nl"] = "Base";
  808 +ln["themeDarkUnika_nl"] = "Dark Unika";
  809 +ln["themeSandSignika_nl"] = "Sand Signika";
  810 +ln["themeGridLight_nl"] = "Grid Light";
  811 +ln["themeSpod_nl"] = "Spod";
  812 +
  813 +ln["x-axis-labelDescription_nl"] = "The x-axis label.";
  814 +ln["y-axis-labelDescription_nl"] = "The y-axis label.";
  815 +ln["suffixDescription_nl"] = "The suffix added to data labels in the tooltip.";
  816 +ln["legendDescription_nl"] = "The leged position.";
  817 +ln["data-labelsDescription_nl"] = "Show/hide data labels.";
  818 +ln["themeDescription_nl"] = "The theme affects the appearance and colors of the chart.";
  819 +ln["stackDescription_nl"] = "The stack type.";
  820 +ln["donutDescription_nl"] = "Pie will become Donut! :) (or viceversa).";
540 821 \ No newline at end of file
... ...