Develop Reference

Tabulator - Tree Structure - Branch Totals

I have a tabulator table with below data / configuration;
Data;
var data_tab =
[ {
"code": "A",
"desc_tr": "Top Level",
"mylink": [
{
"code": "A.1",
"desc_tr": "Sub Level 1",
"mylink": [
{
"code": "A.1.1",
"desc_tr": "Sub Level 2",
"mylink": [
{
"code": "A.1.1.1",
"desc_tr": "Sub Level 3",
"mylink": [
{
"code": "A.1.1.1.001",
"desc_tr": "Item 1 at Last Level",
"income": "5",
},
{
"code": "A.1.1.1.002",
"desc_tr": "Item 2 at Last Level",
"income": "2",
}
]
}
]
}
]
},
]
} ]
Config / parameters for table;
let tmp_Tabulator = new Tabulator( "#tabulator_table",
{
data : data_tab,
columns : stg_Tabulator[ src_coldata ],
reactiveData : false,
dataTree : true,
dataTreeBranchElement : false,
dataTreeChildIndent : 0,
dataTreeChildField : "mylink",
height : 683,
}
)
This is the config / parameters for columns;
tbl_Sample : [
{
title : "G",
field : "",
width : 51,
formatter : null,
hozAlign : "left",
formatterParams : null
},
{
title : "CODE",
field : "code",
width : 100,
hozAlign : "left",
formatterParams : null
},
{
title : "DESCRIPTION",
field : "desc_tr",
width : 400,
formatter : null,
hozAlign : "left",
formatterParams : null
},
{
title : "INCOME",
field : "income",
width : 160,
formatter : "money",
hozAlign : "right",
formatterParams : fmt_num_2,
topCalc : "sum",
},
],
This is how table looks like when rendered ;
What should I do to populate income fields at upper levels ?
Thanks in advance...
PS : This is just a sample data and I do not want to do it at source data side (by changing query / json structure ect.) as it is very resource demanding.

Elasticsearch sorting by custom item weight

I have stored the documents which include status property. I would like to sort the documents by status priority (not status alphabetically). I have followed previous answers and composed the following function which still doesnt work as expected; the documents are sorted by status names (alphabetically):
function getESSortingByStatusQuery(query, order) {
let statusOrder = ['BLUE', 'RED', 'BLACK', 'YELLOW', 'GREEN'];
if(order == 'desc'){
statusOrder.reverse();
}
const functions = statusOrder.map((item) => {
const idx = statusOrder.indexOf(item);
return {filter: {match: {statusColor: item}},
weight: (idx + 1) * 50}
});
const queryModified = {
"function_score": {
"query": {"match_all": {}}, // this is for testing purposes and should be replaced with original query
"boost": "5",
"functions": functions,
"score_mode": "multiply",
"boost_mode": "replace"
}
}
return queryModified;
}
I would be thankful if anyone suggested the way to sort items according to predefined priority of the property (in this case status).

Below is a sample custom sort script which I think is what you are looking for. I've added sample mapping, documents, query and the response as how it appears.
Mapping:
PUT color_index
{
"mappings": {
"properties": {
"color":{
"type": "keyword"
},
"product":{
"type": "text"
}
}
}
}
Sample Documents:
POST color_index/_doc/1
{
"color": "BLUE",
"product": "adidas and nike"
}
POST color_index/_doc/2
{
"color": "GREEN",
"product": "adidas and nike and puma"
}
POST color_index/_doc/3
{
"color": "GREEN",
"product": "adidas and nike"
}
POST color_index/_doc/4
{
"color": "RED",
"product": "nike"
}
POST color_index/_doc/5
{
"color": "RED",
"product": "adidas and nike"
}
Query:
POST color_index/_search
{
"query": {
"bool": {
"must": [
{
"query_string": {
"default_field": "*",
"query": "adidas OR nike"
}
}
]
}
},
"sort": [
{ "_score": { "order": "desc"} }, <---- First sort by score
{ "_script": { <---- Second sort by Colors
"type": "number",
"script": {
"lang": "painless",
"source": "if(params.scores.containsKey(doc['color'].value)) { return params.scores[doc['color'].value];} return 100000;",
"params": {
"scores": {
"BLUE": 0,
"RED": 1,
"BLACK": 2,
"YELLOW": 3,
"GREEN": 4
}
}
},
"order": "asc"
}
}
]
}
Firstly it would return documents sorted by its score, and then it would apply the second sorting logic to that result.
For the second sorting, i.e. using script sort, notice how I have added the numeric values to the colors in the scores section. You would need to construct your query accordingly.
The logic as how it works is in the source section which I believe is self-explainable, where I used doc['color'].value as that was my field on which I'm applying custom sort logic.
Response:
{
"took" : 5,
"timed_out" : false,
"_shards" : {
"total" : 1,
"successful" : 1,
"skipped" : 0,
"failed" : 0
},
"hits" : {
"total" : {
"value" : 5,
"relation" : "eq"
},
"max_score" : null,
"hits" : [
{
"_index" : "color_index",
"_type" : "_doc",
"_id" : "1",
"_score" : 0.5159407,
"_source" : {
"color" : "BLUE",
"product" : "adidas and nike"
},
"sort" : [
0.5159407, <--- This value is score(desc by nature)
0.0 <--- This value comes from script sort as its BLUE and I've used value 0 in the script which is in 'asc' order
]
},
{
"_index" : "color_index",
"_type" : "_doc",
"_id" : "5",
"_score" : 0.5159407,
"_source" : {
"color" : "RED",
"product" : "adidas and nike"
},
"sort" : [
0.5159407,
1.0
]
},
{
"_index" : "color_index",
"_type" : "_doc",
"_id" : "3",
"_score" : 0.5159407,
"_source" : {
"color" : "GREEN",
"product" : "adidas and nike"
},
"sort" : [
0.5159407,
4.0
]
},
{
"_index" : "color_index",
"_type" : "_doc",
"_id" : "2",
"_score" : 0.40538198,
"_source" : {
"color" : "GREEN",
"product" : "adidas and nike and puma"
},
"sort" : [
0.40538198,
4.0
]
},
{
"_index" : "color_index",
"_type" : "_doc",
"_id" : "4",
"_score" : 0.10189847,
"_source" : {
"color" : "RED",
"product" : "nike"
},
"sort" : [
0.10189847,
1.0
]
}
]
}
}
Notice the first three documents, it has exact value of product but different color and you can see that they are grouped together as we first sorted by _score then we sort that by color
Let me know if this helps!

Here's the code sample of sorting result. I think this will helps you. If you don't want to get entire documents as result you can filter results using includes.
GET testindex/_search
{
"_source": {
"includes": [
"filed1"
]
},
"aggs": {
"emp_figures": {
"terms": {
"field": "status"
}
}
}
}
This is the sample result you should retrieve
{
"took": 11,
"timed_out": false,
"_shards": {
"total": 2,
"successful": 2,
"failed": 0
},
"hits": {
"total": 84968,
"max_score": 1,
"hits": [
{
"_index": "test",
"_type": "type",
"_id": "0001",
"_score": 1,
"_source": {
"filed1": "color1,
}
},
{
"_index": "test",
"_type": "type",
"_id": "0002",
"_score": 1,
"_source": {
"filed1": "color2,
}
}
}
}
}

Using Javascript aggregation in druid queries

I am trying to write javascript aggregator for my druid queries. i need to to calculate average of a metric "Base_SalesRank".
So far i have been able to this by writing:
{
"queryType": "groupBy",
"dataSource": "marketdata",
"granularity": "all",
"dimensions" : ["Item"],
"filter": { "type": "and", "fields" : [{"type": "selector", "dimension": "Item", "value": "MN10CESWW"}]},
"intervals": ["2018-06-28T00:00Z/2018-07-04T00:00Z"],
"aggregations" : [
{ "type" : "count", "name" : "rows" },
{ "type" : "doubleSum", "name" : "Base_SalesRank", "fieldName" : "Base_SalesRank" }
],
"postAggregations" : [{
"type": "javascript",
"name": "Target DOS Average",
"fieldNames": ["Base_SalesRank", "rows"],
"function": "function(Base_SalesRank, rows) {return Base_SalesRank/ rows;}"
}]
}
But I noticed that many values in Base_SalesRank is 0.
[ {
"timestamp" : "2018-06-28T05:06:03.000Z",
"result" : {
"pagingIdentifiers" : {
"marketdata_2018-06-28T00:00:00.000Z_2018-06-29T00:00:00.000Z_2018-07-06T08:11:02.499Z" : 3
},
"dimensions" : [ "Item" ],
"metrics" : [ "Base_SalesRank" ],
"events" : [ {
"segmentId" : "marketdata_2018-06-28T00:00:00.000Z_2018-06-29T00:00:00.000Z_2018-07-06T08:11:02.499Z",
"offset" : 0,
"event" : {
"timestamp" : "2018-06-28T07:10:02.000Z",
"Item" : "MN10CESWW",
"Base_SalesRank" : 0
}
},
{
"segmentId" : "marketdata_2018-06-28T00:00:00.000Z_2018-06-29T00:00:00.000Z_2018-07-06T08:11:02.499Z",
"offset" : 3,
"event" : {
"timestamp" : "2018-06-28T07:20:21.000Z",
"Item" : "MN10CESWW",
"Base_SalesRank" : 5558
}
} ]
}
} ]
So i am not getting true average. Now i need to weed out these 0 values and then calucate average. We can do this by using filters
{"type": "not", "field": {"type": "selector", "dimension": "Base_SalesRank", "value": "0"}}
But I have constraint that I have to perform this filter operation inside the javascript function only.

You can achieve the same with just adding a having query -
"having": {
"type": "greaterThan",
"aggregation": "Base_SalesRank",
"value": 0
}
If you want to do the same in javascript function than it can be done as below -
You should add a dimension (key/value) say "isValid" as "0" or "1" during pre-ingestion json data based on if Base_SalesRank is 0 than "isValid" will be 0 else 1.
Apply filter on this field in your query.
Use the rows in your post Aggregration.

SAPUI5 create JSON for TreeTable / empty rows

I want to create a SAPUI TreeTable from a JSON request, currently my output looks like this (as you can see, every node contains an empty row -> I do not know where this is coming from and I do not want to have these empty rows):
My Table definition:
//Create an instance of the table control
var oTreeTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "",
}),
template :
new sap.ui.commons.TextView({
text : "{Title}",
textAlign : sap.ui.core.TextAlign.Begin,
}),
}),
//new sap.ui.table.Column({label: "Mon01", template: "Mon01"}),
//new sap.ui.table.Column({label: "Mon02", template: "Mon02"}),
//new sap.ui.table.Column({label: "Mon03", template: "Mon03"}),
//new sap.ui.table.Column({label: "Mon04", template: "Mon04"}),
],
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
toggleOpenState: function(oEvent) {
}
});
My getJSON and convert flat structure to parent/child structure (thanks to yaku)
$.getJSON(sServiceUrl, function (data) {
// flatten to object with string keys that can be easily referenced later
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
var key = 'id' + data.d.results[i].ID;
flat[key] = data.d.results[i];
}
// add child container array to each node
for (var i in flat) {
flat[i].children = []; // add children container
}
// populate the child container arrays
for (var i in flat) {
var parentkey = 'id' + flat[i].ParentId;
if (flat[parentkey]) {
flat[parentkey].children.push(flat[i]);
}
}
// find the root nodes (no parent found) and create the hierarchy tree from them
var root = [];
for (var i in flat) {
var parentkey = 'id' + flat[i].ParentId;
if (!flat[parentkey]) {
root.push(flat[i]);
}
}
// here it is!
// console.log(root);
// to access the JSON via "/root" in bindRows(), could this be a problem??
var data = {
root : root,
};
console.log(data);
var oTreeModel = new sap.ui.model.json.JSONModel();
oTreeModel.setData(data);
oTreeTable.setModel(oTreeModel);
oTreeTable.bindRows({
path : '/root',
});
My Result JSON (a part of it): where I can not find why there are empty rows shown ?? Anybody knows something?
Thanks!
Edit: this is my complete JSON result (var root) (BEFORE I move it to var data = { root : root, }; which is bound to the tree table via bindRows(/root).. )
{
"d" : {
"results" : [
{
"__metadata" : {
"id" : "http://url/EntitySet('00000001')",
"uri" : "http://url/EntitySet('00000001')",
"type" : " NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "09/2014",
"Mon01" : "08/2014",
"Title" : "Parent 1",
"ID" : "00000001",
"ParentId" : "",
"ChildId" : "",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000002')",
"uri" : "http://url/EntitySet('00000002')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "1560",
"Mon01" : "1550",
"Title" : "Parent 2",
"ID" : "00000002",
"ParentId" : "",
"ChildId" : "",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000003')",
"uri" : "http://url/EntitySet('00000003')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "1860",
"Mon01" : "1750",
"Title" : "Child 1",
"ID" : "00000003",
"ParentId" : "00000002",
"ChildId" : "00000001",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000004')",
"uri" : "http://url/EntitySet('00000004')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "1860",
"Mon01" : "1750",
"Title" : "Child 1_1",
"ID" : "00000004",
"ParentId" : "00000003",
"ChildId" : "00000001",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000005')",
"uri" : "http://url/EntitySet('00000005')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "2060",
"Mon01" : "1950",
"Title" : "Child 2",
"ID" : "00000005",
"ParentId" : "00000002",
"ChildId" : "00000001",
},
{
"__metadata" : {
"id" : "http://url/EntitySet('00000006')",
"uri" : "http://url/EntitySet('00000006')",
"type" : "NAMESPACE_SRV.Entity"
},
"Mon04" : "",
"Mon03" : "",
"Mon02" : "2060",
"Mon01" : "1950",
"Title" : "Child 3",
"ID" : "00000006",
"ParentId" : "00000002",
"ChildId" : "00000001",
}
]
}
}
During trying to remove the bullet points I found that they are included in HTML, but I dont know why. If I remove this via dev-tools, the bullet point is gone...
which comes from CSS icon class...
.sapUiTableTreeIconLeaf {
background-image: url(ico12_leaf.gif);
}
solved it via
.sapUiTableTreeIconLeaf {
background-image: none !important;
}

just get rid of the __metadata, set flat[key].__metadata = "" , i guess TreeTable renderer must take it for another child.
// flatten to object with string keys that can be easily referenced later
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
var key = 'id' + data.d.results[i].ID;
flat[key] = data.d.results[i];
flat[key].__metadata = "";
}
Updated Code Snippet:
sap.ui.jsview("test.view", {
getControllerName: function() {
return "test.controller";
},
createContent: function(oController) {
var oTreeTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({
label: "Title",
template: "Title"
}),
new sap.ui.table.Column({
label: "Mon01",
template: "Mon01"
}),
new sap.ui.table.Column({
label: "Mon02",
template: "Mon02"
}),
new sap.ui.table.Column({
label: "Mon03",
template: "Mon03"
}),
new sap.ui.table.Column({
label: "Mon04",
template: "Mon04"
}),
],
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
toggleOpenState: function(oEvent) {
}
});
var data = {
"d": {
"results": [{
"__metadata": {
"id": "http://url/EntitySet('00000001')",
"uri": "http://url/EntitySet('00000001')",
"type": " NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "09/2014",
"Mon01": "08/2014",
"Title": "Parent 1",
"ID": "00000001",
"ParentId": "",
"ChildId": "",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000002')",
"uri": "http://url/EntitySet('00000002')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "1560",
"Mon01": "1550",
"Title": "Parent 2",
"ID": "00000002",
"ParentId": "",
"ChildId": "",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000003')",
"uri": "http://url/EntitySet('00000003')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "1860",
"Mon01": "1750",
"Title": "Child 1",
"ID": "00000003",
"ParentId": "00000002",
"ChildId": "00000001",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000004')",
"uri": "http://url/EntitySet('00000004')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "1860",
"Mon01": "1750",
"Title": "Child 1_1",
"ID": "00000004",
"ParentId": "00000003",
"ChildId": "00000001",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000005')",
"uri": "http://url/EntitySet('00000005')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "2060",
"Mon01": "1950",
"Title": "Child 2",
"ID": "00000005",
"ParentId": "00000002",
"ChildId": "00000001",
}, {
"__metadata": {
"id": "http://url/EntitySet('00000006')",
"uri": "http://url/EntitySet('00000006')",
"type": "NAMESPACE_SRV.Entity"
},
"Mon04": "",
"Mon03": "",
"Mon02": "2060",
"Mon01": "1950",
"Title": "Child 3",
"ID": "00000006",
"ParentId": "00000002",
"ChildId": "00000001",
}]
}
};
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
var key = 'id' + data.d.results[i].ID;
flat[key] = data.d.results[i];
flat[key].__metadata = "";
}
// add child container array to each node
for (var i in flat) {
flat[i].children = []; // add children container
}
// populate the child container arrays
for (var i in flat) {
var parentkey = 'id' + flat[i].ParentId;
if (flat[parentkey]) {
flat[parentkey].children.push(flat[i]);
}
}
// find the root nodes (no parent found) and create the hierarchy tree from them
var root = [];
for (var i in flat) {
var parentkey = 'id' + flat[i].ParentId;
if (!flat[parentkey]) {
root.push(flat[i]);
}
}
// here it is!
// console.log(root);
// to access the JSON via "/root" in bindRows(), could this be a problem??
var data = {
root: root,
};
console.log(data);
var oTreeModel = new sap.ui.model.json.JSONModel();
oTreeModel.setData(data);
oTreeTable.setModel(oTreeModel);
oTreeTable.bindRows({
path: '/root',
});
return oTreeTable;
},
});
sap.ui.controller("test.controller", {
onInit: function() {
}
});
sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "test.view"
})
.placeAt("uiArea");
<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>

Multi options in select2

I am trying to use select2 to get remote JSON data and display it with mutli levels.
http://ivaynberg.github.io/select2/index.html
This is my response
{
"Company": [
{
"name": "athenahealth Inc"
},
{
"name": "Localiza Rent a Car"
},
{
"name": "M and B Switchgears"
}
],
"Functional": [
{
"name": "arranger"
},
{
"name": "ambassadors"
}
],
"Persons": [
{
"name": "Moustapha al"
},
{
"name": "Saleh al"
}
]
}
I want to show the result in Multi-Value format - http://ivaynberg.github.io/select2/index.html#multi
So far i am able to fetch data from server side , but then i have no idea how to enable the multi select option.

JSON in following format will work fine
Related issue - https://github.com/ivaynberg/select2/issues/58
{ "Data" : [ {
"id" :1 ,
"text" : "Subsection" ,
"children" : [{
"id" : 2,
"text" : "Paru"
},
{
"id" : 3,
"text" : "Vinu"
}]
},
{ "id" : 4 ,
"text" : "Family" ,
"children" : [{
"id" : 5,
"text" : "ChildVM"
},
{
"id" : 6,
"text" : "ChildPM"
}]
}
]
}