Develop Reference

Apache echarts Treemap: set selected tree node and zoom to node after data refresh

Environment:
OS: Windows
Browser: Google Chrome
Framework: Angular#14
Library: Echarts#5.4.0
Reproduction Link:
https://jsfiddle.net/AimanKhan11/51kuv2mc/11/
Steps to reproduce:
run the fiddle
drill down to specific node (click event will store the last visited
tree node info into variable)
click on refresh button
Current Behavior:
By clicking on refresh button, treemap not zooming to last visited node and going to its initial state.
Expected Behavior:
Treemap should zoom to last visited node and maintain its state after refreshing options.
const chart = echarts.init(document.getElementById("chart-container"));
let lastVisitedNode;
chart.setOption({
responsive: true,
maintainAspectRatio: false,
series: {
name: 'All',
type: 'treemap',
visibleMin: 300,
leafDepth: 1,
sort: null,
roam: 'move',
drillDownIcon: '',
label: {
show: true,
formatter: '{b}',
padding: 5
},
upperLabel: {
show: true,
height: 30,
padding: 5
},
visualDimension: 1,
levels: [{
itemStyle: {
borderColor: '#555',
borderWidth: 4,
gapWidth: 4
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 2,
borderWidth: 2
}
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.6,
gapWidth: 1
}
},
{
colorSaturation: [0.3, 0.5]
}
],
data: [{
"value": [
32,
32
],
"name": "HEADWEAR",
"path": "HEADWEAR",
"children": [{
"value": [
12,
12
],
"name": "HEADWEAR",
"path": "HEADWEAR>HEADWEAR",
"children": [{
"value": [
1,
1
],
"name": "WHT",
"path": "HTG>WHT",
"children": [{
"value": [
1,
1
],
"name": "Travel/Commute",
"path": "HTG>Travel/Commute",
"children": []
}]
},
{
"value": [
1,
1
],
"name": "CMO",
"path": "BLK>CMO",
"children": [{
"value": [
1,
1
],
"name": "Fitness",
"path": "BLK>Fitness",
"children": []
}]
},
{
"value": [
1,
1
],
"name": "HBK",
"path": "CMO>HBK",
"children": [{
"value": [
1,
1
],
"name": "Fitness",
"path": "CMO>Fitness",
"children": []
}]
},
{
"value": [
1,
1
],
"name": "HTG",
"path": "HTA>HTG",
"children": [{
"value": [
1,
1
],
"name": "Fitness",
"path": "HTA>Fitness",
"children": []
}]
},
{
"value": [
2,
2
],
"name": "HTA",
"path": "HBK>HTA",
"children": [{
"value": [
2,
2
],
"name": "Fitness",
"path": "HBK>Fitness",
"children": []
}]
},
{
"value": [
6,
6
],
"name": "BLK",
"path": "HEADWEAR>BLK",
"children": [{
"value": [
1,
1
],
"name": "Travel/Commute",
"path": "Outdoor>Travel/Commute",
"children": []
},
{
"value": [
1,
1
],
"name": "Outdoor",
"path": "Fitness>Outdoor",
"children": []
},
{
"value": [
4,
4
],
"name": "Fitness",
"path": "HEADWEAR>Fitness",
"children": []
}
]
}
]
}]
}],
nodeClick: 'zoomToNode',
},});
chart.on('click', function(params) {
if (params.seriesType == "treemap") {
lastVisitedNode = params;
}
});
if (lastVisitedNode) {
// zooming to specific node programatically is not working
setTimeout(function() {
chart.dispatchAction({
type: 'treemapZoomToNode',
seriesIndex: 0,
dataIndex: lastVisitedNode.dataIndex,
//name: lastVisitedNode.name,
});
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: lastVisitedNode.dataIndex,
//name: lastVisitedNode.name,
});
console.log('dispatch action');
}, 2000)
}

Remove excess array braces due to multiple nested map function

I created multiple nested map function of an object array and I ended up in the kind of output.
let tags = product.map(item => item.outSourceItem.map(outsourceitem => outsourceitem.tags));
tags = [
[
[
{
"_id": 11,
"name": "eleven"
}
]
],
[
[
{
"_id": 12,
"name": "twelve"
}
]
],
[
[
{
"_id": 13,
"name": "thirteen"
}
]
],
[
[
{
"_id": 11,
"name": "eleven"
}
]
]
]
I just want it to be like this.
[
{
"_id": 11,
"name": "eleven"
},
{
"_id": 12,
"name": "twelve"
},
{
"_id": 13,
"name": "thirteen"
},
{
"_id": 11,
"name": "eleven"
}
]
any one liner function for this? I use .flat() but it doesn't work either.

Try Array#flat with depth of infinity:
const tags = [
[
[
{
"_id": 11,
"name": "eleven"
}
]
],
[
[
{
"_id": 12,
"name": "twelve"
}
]
],
[
[
{
"_id": 13,
"name": "thirteen"
}
]
],
[
[
{
"_id": 11,
"name": "eleven"
}
]
]
];
const result = tags.flat(Infinity);
console.log(result);

how to sort this two sub array [ { [ ] } ,{ [ ] } , { [ ] } ,] in javascript

how can i sort this tests array based on discount_price i have sorted only the lab_partners array,,,can anyone tell me how to sort the main array nd so that array should look something like : 200 ,250, 299 ,500 so my array is something like this - [ { [ ] } ,{ [ ] } , { [ ] } ,]
"tests": [
{
"id": 11,
"habit_test_id": 3,
"test_id": 1,
"test": {
"id": 1,
"test_name": "Blood Test",
},
"lab_partners": [
{
"id": 1,
"discounted_price": 250,
},
{
"id": 7,
"discounted_price": 299,
}
]
},
{
"test": {
"id": 4,
"test_name": "MRI",
},
"lab_partners": [
{
"id": 6,
"discounted_price": 500,
},
{
"id": 6,
"discounted_price": 200,
}
]
}
]
}
//this only sort the lab_partners array i want to sort on the basis of both test array
const condition_based= tests.map((itr, idx) =>
itr.lab_partners.sort((firstItem, secondItem) => ( firstItem.discounted_price -
secondItem.display_price)));
console.log(condition_based,'condition_based');

I don't really know what you are trying to achieve, or what you expect from this array, but please look into this
https://www.w3schools.com/JS/js_object_constructors.asp
It seems to me like there are some similarities in all the object values, and you are missing out some maybe just because they are null values.

$slice element from array inside another array

What i want is to slice an array inside an array and return ONLY the queried array element. But i get instead every element from the first array.
I have this example input
[
{
"name": "admin",
"datasets": [
{
"name": "test",
"datapoints": [
1,
6,
4,
3,
8,
5,
3
],
"_id": {
"$oid": "619288f16733758444a28728"
}
},
{
"name": "more datasets",
"datapoints": [
1,
2,
3,
4,
5,
6,
7,
8
],
"_id": {
"$oid": "619289086733758444a2872a"
}
}
]
}
]
I have tried it with
db.collection.find({
name: "admin",
"datasets.name": "test"
},
{
"datasets.datapoints": {
$slice: [
0,
3
]
}
})
The problem here is that i get every item of datasets
[
{
"_id": ObjectId("5a934e000102030405000000"),
"datasets": [
{
"_id": ObjectId("619288f16733758444a28728"),
"datapoints": [
1,
6,
4
],
"name": "test"
},
{
"_id": ObjectId("619289086733758444a2872a"),
"datapoints": [
1,
2,
3
],
"name": "more datasets"
}
],
"name": "admin"
}
]
But i just need the 1
Result should just be:
{ datapoints: [1, 6, 4, 3] }

Query
map the datasets
if name :"test" take the slice of the first 4 members
else null
filter to remove the null, so it remains only the "test" and with first 4 members
result is array of arrays, because we might have many "test" members, if you are sure it will be always max 1 take the first member with $first or $arrayElemAt
*on find criteria if you have too many admins, you can add also "datasets.name": "test" if you have index on "datasets.name" it can help.
PlayMongo
aggregate(
[{"$match": {"name": {"$eq": "admin"}}},
{"$set":
{"datasets":
{"$map":
{"input": "$datasets",
"in":
{"$cond":
[{"$eq": ["$$this.name", "test"]},
{"datapoints": {"$slice": ["$$this.datapoints", 0, 4]},
"_id": "$$this._id",
"name": "$$this.name"},
null]}}}}},
{"$project":
{"_id": 0,
"datasets":
{"$filter":
{"input": "$datasets", "cond": {"$ne": ["$$this", null]}}}}}])

How do I split and group json data according to its value?

I don't know how to describe my question properly so I will demonstrate it instead,
I have this json data, a data extracted from an excel file, wherein payslip information of every employee is listed inside the excel file,
I want to extract that data per employee,
My first step was to convert the excel file into json data,
I used sheetjs to convert the excel file into json,
Here's the excel file,
Here's the json I got from extracting.
"Payslip": [
[
"Name: Employee1",
null,
],
[
"Earnings",
"Amount",
"Deductions",
"Amount",
"Take Home"
],
[
"Regular",
"2,500.00",
"Coop Loan",
"1,500.00"
],
[
"Overtime",
"1,500.00",
"Tax",
"2,200.00"
],
[
"Holidays",
"700.00"
],
[
"Bonus",
"1,000.00"
],
[
null,
"5,700.00",
null,
"3,700.00",
"2,000.00"
],
[
"Name/Signature/Role/Date: ",
null,
"Officer Name"
],
[
"Name: Employee2",
null,
],
[
"Earnings",
"Amount",
"Deductions",
"Amount",
"Take Home"
],
[
"Regular",
"3,500.00",
"Coop Loan",
"1,300.00"
],
[
"Overtime",
"1,500.00",
"Tax",
"2,200.00"
],
[
"Holidays",
"700.00"
],
[
"Bonus",
"1,000.00"
],
[
null,
"5,700.00",
null,
"3,700.00",
"2,000.00"
],
[
"Name/Signature/Role/Date: ",
null,
"Officer Name"
],
[
"Name: Employee3",
null,
],
[
"Earnings",
"Amount",
"Deductions",
"Amount",
"Take Home"
],
[
"Regular",
"2,500.00",
"Coop Loan",
"4,500.00"
],
[
"Overtime",
"1,500.00",
"Tax",
"2,200.00"
],
[
"Holidays",
"700.00"
],
[
"Bonus",
"1,000.00"
],
[
null,
"5,700.00",
null,
"3,700.00",
"2,000.00"
],
[
"Name/Signature/Role/Date: ",
null,
"Officer Name"
]
]
Now my problem is how do I group the json data per employee,
the output should be something like this,
{
"title": "Requirements List",
"employees":
[
{
"name": "Employee1",
"earnings":
[
{
"title": "Holiday"
"amount": "1,500.00"
},
{
"title": "Regular"
"amount": "2,500.00"
}
],
"deductions":
[
{
"title": "Loan",
"amount": "500.00"
}
],
"total_earnings": "4,000.00",
"total_deductions": "500.00",
"take_home": "3,500.00"
},
{
"name": "Employee2",
"earnings":
[
{
"title": "Holiday"
"amount": "2,500.00"
},
{
"title": "Regular"
"amount": "3,500.00"
}
],
"deductions":
[
{
"title": "Loan",
"amount": "1500.00"
}
],
"total_earnings": "5,000.00",
"total_deductions": "1500.00"
"take_home": "3,500.00"
}
]
}
I want to know how do I extract the data per user?
Thank You,
Do you know any other way I could achieve may goal, thank you,