We Keep Coding

Building multi-level aggregation queries using elastic-builder.js

I am trying to get my hands on javascript and elasticsearch and I was trying to create queries using the elastic-builder javascript lib.
I might be missing something which I am trying to figure out but unfortunately I am unable to.
Problem: I am trying to create multilevel aggregation like below,
"aggs": {
"1": {
"date_histogram": {
"field": "f1",
"calendar_interval": "1D"
},
"aggs": {
"2": {
"date_histogram": {
"field": "f2",
"calendar_interval": "1D"
},
"aggs": {
"3": {
"date_histogram": {
"field": "f3",
"calendar_interval": "1D"
}
}
}
}
}
}
But what I get instead is this:
"aggs": {
"1": {
"date_histogram": {
"field": "f1",
"calendar_interval": "1D"
},
"aggs": {
"2": {
"date_histogram": {
"field": "f2",
"calendar_interval": "1D"
}
},
"3": {
"date_histogram": {
"field": "f3",
"calendar_interval": "1D"
}
}
}
}
The current output I get has two aggregations nested in one. I am trying to build it using an array with aggregations defined in it.
The code I used is below:
let a = [
esb.dateHistogramAggregation('1', "d[key]['field']").calendarInterval('1D'),
esb.dateHistogramAggregation('2', "d[key]['field']").calendarInterval("1D"),
esb.dateHistogramAggregation('3', "d[key]['field']").calendarInterval("1D")
];
let m = null;
for(i=0;i<a.length;i++) {
if(i === 0) {
m = a[i]
} else {
m.agg(a[i])
}
}
//m = esb.dateHistogramAggregation('1', "d[key]['field']").calendarInterval('1D')
//m = m.agg(esb.dateHistogramAggregation('2', "d[key]['field']").calendarInterval("1D").agg(esb.dateHistogramAggregation('3', "d[key]['field']").calendarInterval("1D")))
esb.requestBodySearch()
.query(
esb.boolQuery()
.must(esb.matchQuery('message', 'this is a test'))
.filter(esb.termQuery('user', 'kimchy'))
.filter(esb.termQuery('user', 'herald'))
.should(esb.termQuery('user', 'johnny'))
.mustNot(esb.termQuery('user', 'cassie'))
)
.agg(esb.termsAggregation('user_terms', 'user').agg(esb.termsAggregation('user_terms', 'user').agg(esb.termsAggregation('user_terms', 'user'))))
.agg(m);
The lines commented in the code will output the result I'm expecting. What am I doing wrong?

You can turn the array into a group of sub-aggregations like so:
let a = [
esb.dateHistogramAggregation('1', "d[key]['field']").calendarInterval('1D'),
esb.dateHistogramAggregation('2', "d[key]['field']").calendarInterval("1D"),
esb.dateHistogramAggregation('3', "d[key]['field']").calendarInterval("1D")
];
const reqBody = esb.requestBodySearch()
.agg(
a[0].agg(
a[1].agg(
a[2]
)
)
);

I solved it like below. I am not sure this is right way. But someone can correct me if I am wrong.
let temp = null;
for (i = a.length - 1; i >= 0; i--) {
if (i === a.length - 1) {
temp = a[i];
} else {
temp = a[i].agg(temp)
}
}

How to correct logic in a search input? Angular

I have a search input in my angular application that should compare the input data with different object properties
<div class="forms">
<div class="search-wrapper">
<input
class="search"
[ngClass]="{'searching': searching}"
type="text"
(input)="changeSearch($event.target.value)"
/>
<label class="">
<span>Rechercher</span>
</label>
</div>
</div>
the logic I use is as follows
public changeSearch(searchTerm: string) {
this.searching = !!searchTerm;
if (!this.searching) {
this.orders.forEach(order => {
order.show = true;
});
return;
}
const extendSearchIn = ['order_number', 'transaction.item.product.name'];
this.orders.forEach(order => {
order.show = true;
extendSearchIn.forEach(property => {
this.searchByProperty(order, property, searchTerm);
});
});
}
public searchByProperty(order, property, searchTerm) {
const prop = this.getSearchProperty(order, property);
if (prop === undefined) { return false; }
return (<String>prop.toLowerCase()).startsWith(searchTerm.toLowerCase());
}
public getSearchProperty(item: object, property: string) {
let itemCopy = Object.assign({}, item);
let result: any;
const props = property.split('.');
props.forEach(prop => {
if (itemCopy !== undefined) {
itemCopy = itemCopy[prop];
}
});
result = itemCopy !== undefined ? itemCopy : result;
return result;
}
and the structure of each object 'order' is like the following
{
"functional_id": "202006101058160012400000SD4AYAA1",
"transactions": [
{
"quantity": 2,
"price": 140,
"item": {
"name": "Carton",
"description": "+ 2 recharges",
"product": {
"name": "Coffret rouge"
}
},
"amount": 280
},
{
"quantity": 2,
"price": 140,
"item": {
"name": "10 coffrets",
"description": "+ 2 recharges",
"product": {
"name": "Coffret gris"
}
},
"amount": 280
},
{
"quantity": 2,
"price": 60,
"item": {
"name": "PACK N°1 comprenant :",
"description": "6 modèles",
"product": {
"name": "AfuBOX",
"description": "60,8 x 39,5 x 16,5 cm"
}
},
"amount": 120
}
],
"show": true,
"date": "10/06/2020",
"order_number": "105816",
"overallAmount": 680
}
you would need to set the 'show' property to false so that those that don't comply with what was entered in the search field would be hidden
Someone to make me see where my mistake is.
Thank you in advance

I have simplified the logic with a forEach and checking if the value I receive from the input contains any of the search criteria I wanted to apply.
I hope that this will help you to explain if you find yourself in a similar situation.
public changeSearch(searchTerm: string) {
this.searching = !!searchTerm;
if (!this.searching) {
this.orders.forEach(order => {
order.show = true;
});
return;
}
this.orders.forEach(order => {
order.show = true;
this.searchByProperty(order, searchTerm);
});
}
public searchByProperty(order, searchTerm) {
const id = (order.order_number + '');
const amount = (order.overallAmount + '');
order.transactions.forEach(items => {
const title = items.item.product.name.toLowerCase();
if (title.includes(searchTerm) || id.includes(searchTerm) || amount.includes(searchTerm)) {
order.show = true;
} else {
order.show = false;
}
});
}

Ngx charts bubble chart advice

I am trying to get a bubble chart to populate using ngx-charts. The problem is the swimlane documentation on it is almost non-existent and I haven't been able to find any good examples.
I have read the open source code that swimlane provides and have created what I believe are the appropriate variables in Typescript and have constructed my data points using an example line graph I found using the same tools. However the chart still appears empty on the page.
HTML:
<ngx-charts-bubble-chart
[view]="view"
[results]="bubbleDemoTempData"
[showGridLines]="showGridLines"
[legend]="showLegend"
[legendTitle]="legendTitle"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale"
[scheme]="colorScheme"
[minRadius]="minRadius"
[maxRadius]="maxRadius"
(select)="onSelectBubbleInteractivePoint($event)"
*ngIf="dataTypeDisplay == 'GraphForm'"
[#fade]>
</ngx-charts-bubble-chart>
TypeScript:
view: any[] = [700, 400];
// options
showXAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
showYAxis = true;
gradient = false;
showLegend = true;
legendTitle = "Hi";
xAxisLabel = 'Number';
yAxisLabel = 'Color Value';
showGridLines = true;
autoScale=true;
minRadius = 1;
maxRadius = 1;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
Data Points:
public multi = [
{
"name": "Germany",
"series": [
{
"name": "2010",
"value": 7300000
},
{
"name": "2011",
"value": 8940000
}
]
},
{
"name": "USA",
"series": [
{
"name": "2010",
"value": 7870000
},
{
"name": "2011",
"value": 8270000
}
]
},
{
"name": "France",
"series": [
{
"name": "2010",
"value": 5000002
},
{
"name": "2011",
"value": 5800000
}
]
}
];
I would appreciate if someone could give me some advice on correctly populating the chart.

I was eventually able to get it worked out. I will post the same 3 code snippets from above here in their updated forms.
HTML:
<ngx-charts-bubble-chart
[results]="bubbleDemoTempData"
[view]="view"
[showGridLines]="showGridLines"
[legend]="legend"
[legendTitle]="legendTitle"
[legendPosition]="legendPOsition"
[xAxis]="XAxis"
[yAxis]="YAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[trimXAxisTicks]="trimXAxisTicks"
[trimYAxisTicks]="trimYAxisTicks"
[maxXAxisTickLength]="maxXAxisTickLength"
[maxYAxisTickLength]="maxYAxisTickLength"
[roundDomains]="roundDomains"
[minRadius]="minRadius"
[maxRadius]="maxRadius"
[autoScale]="autoScale"
[schemeType]="schemeType"
(select)="onSelectBubbleInteractivePoint($event)"
*ngIf="dataTypeDisplay == 'GraphForm'"
[#fade]>
</ngx-charts-bubble-chart>
TypeScript:
view: any[] = [700, 400];
// options
showGridLines = true;
legend = true;
legendTitle = "Dots Mf'er";
legendPosition = "right";
xAxis = true;
yAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = "LR";
yAxisLabel = "Jobs";
trimXAxisTicks = true;
trimYAxisTicks = true;
rotateXAxisTicks = true;
maxXAxisTickLength = 16;
maxYAxisTickLength = 16;
// xAxisTicks;
// yAxisTicks;
roundDomains = false;
maxRadius = 5;
minRadius = 5;
autoScale = true;
schemeType = "ordinal";
tooltipDisabled = false;
Data Points:
public bubbleDemoTempData = [
{
"name": "Example1",
"series": [
{
"name": "a",
"x": 0,
"y": 0,
"r": 1
},
{
"name": "b",
"x":10,
"y":3,
"r":10
}
]
},
{
"name":"Example2",
"series": [
{
"name":"1",
"x":20,
"y":1,
"r":30
},
{
"name":"2",
"x":3,
"y":3,
"r":500
}
]
}
];
This works and definitely answers my question from above. That being said the grid lines are still not appearing but that's an entirely different issue that I may have to post a new ticket for.

Validate JSON array length

I am trying to write an if statement that determines whether the getDept JSON array contains more than one value. If it does, then redirect to a different page. Through my research, it seems like it is as simple as getDept.length > 1, I have not been able to make this work though.
My Javascript code is as follows:
$.getJSON("https://apex.oracle.com/pls/apex/mfajertest1/department/"+$x('P2_DEPT_NO').value, function(getDept)
{
console.log(getDept);
if(getDept.length == 0)
{
window.alert("No Department with that ID");
}
else if(getDept.length > 1)
{
apex.navigation.redirect('f?p=71293:11');
}
else
{
$x('P2_DEPT_NAME').readOnly = false;
$x('P2_DEPT_NAME').value=getDept.items[0].dname;
$x('P2_DEPT_NAME').readOnly = true;
$x('P2_DEPT_LOC').readOnly = false;
$x('P2_DEPT_LOC').value=getDept.items[0].loc;
$x('P2_DEPT_LOC').readOnly = true;
$x('P2_DEPT_NO').readOnly = true;
}
});
The getDept JSON array contains this information:
{
"next": {
"$ref": "https://apex.oracle.com/pls/apex/mfajertest1/department/%7Bid%7D?page=1"
},
"items": [
{
"deptno": 10,
"dname": "accounting",
"loc": "madison"
},
{
"deptno": 20,
"dname": "Finance",
"loc": "Milwaukee"
},
{
"deptno": 30,
"dname": "IT",
"loc": "La Crosse"
},
{
"deptno": 40,
"dname": "Purchasing",
"loc": "Green Bay"
},
{
"deptno": 10,
"dname": "Accounting II",
"loc": "Madison II"
},
{
"deptno": 50,
"dname": "Sports",
"loc": "Waukasha"
}
]
}
I would be glad to provide more information regarding this issue if need be.

Your JSON response is actually an object, not an array. The array you're checking for is a property inside that object called items. Thus, wherever you are using getDept, you should instead be using getDept.items:
$.getJSON("https://apex.oracle.com/pls/apex/mfajertest1/department/"+$x('P2_DEPT_NO').value, function(getDept)
{
console.log(getDept.items);
if(getDept.items.length == 0)
{
window.alert("No Department with that ID");
}
else if(getDept.items.length > 1)
{
apex.navigation.redirect('f?p=71293:11');
}
else
{
$x('P2_DEPT_NAME').readOnly = false;
$x('P2_DEPT_NAME').value=getDept.items[0].dname;
$x('P2_DEPT_NAME').readOnly = true;
$x('P2_DEPT_LOC').readOnly = false;
$x('P2_DEPT_LOC').value=getDept.items[0].loc;
$x('P2_DEPT_LOC').readOnly = true;
$x('P2_DEPT_NO').readOnly = true;
}
});

jquery tooltip showing taking json values

here is my jquery tooltip code.
var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
var previousPoint = null;
placeholder.on('plothover', function (event, pos, item) {
if (item) {
if (previousPoint != item.seriesIndex) {
previousPoint = item.seriesIndex;
var tip = item.series['label']+":" +item.series['percent'] + '%';
//var tip = item.series['Alert1']+":"+item.series['percent']+'%';
$tooltip.show().children(0).text(tip);
}
$tooltip.css({ top: pos.pageY + 10, left: pos.pageX + 10 });
} else {
$tooltip.hide();
previousPoint = null;
}
});
And my Json Data :
[
{
"label": "FDR Compliance",
"Assessments": "151",
"Conductedon": "101",
"OpenTasks": "141",
"charts": [
{
"label":"Low",
"data": "60",
"Alert1":"90 Day",
"Alert2":"Key Member",
"color":"#68BC31"
},
{
"label":"High",
"data": "30",
"Alert1":"Missed",
"Alert2":"YTD",
"color": "#DA5430"
},
{
"label":"Medium",
"data": "15",
"Alert1":"E & OE",
"Alert2":"Failure",
"color": "#FEE074"
}
]
}
]
In the above code if in jQuery the tool will display the data if it is:
var tip = item.series['label']+":" +item.series['percent'] + '%';
In the tooltip the value displays correctly.
I want to display the Alert1 value and not label value so when I write this code:
var tip = item.series['Alert1']+":"+item.series['percent']+'%';
in the tooltip the value says "undefined"
Help me out!!!