Here is my html,
<tr ng-repeat="val in attribute.format.values">
I am getting,
[Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: val in attribute.format.values, Duplicate key: object:07F, Duplicate value: {2}][1]
Here is my JSON,
[{
"name": "Auto",
"weight": "1",
"value": "1",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "06c9f57c-963f-4977-bca5-9226e971a8dc",
"visible": true,
"$$hashKey": "06V"
}, {
"name": "On",
"weight": "1",
"value": "2",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "dc019b87-1da5-4f21-b91f-4ee35ec04eb8",
"visible": true,
"$$hashKey": "06W"
}, {
"name": "Off",
"weight": "1",
"value": "4",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "daf8ef80-a2da-4e02-8960-791b8528905e",
"visible": true,
"$$hashKey": "06X"
}, {
"name": "Redeye Reduction",
"weight": "1",
"value": "5",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "87ccb4ee-39cd-4bd0-9817-7e477af6d5b0",
"visible": true,
"$$hashKey": "06Y"
}, {
"name": "Slow Sync",
"weight": "1",
"value": "6",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "e0b14c8b-af4b-4ab8-a533-32ac4829613f",
"visible": true,
"$$hashKey": "06Z"
}, {
"name": "High Speed Sync",
"weight": "1",
"value": "7",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "622c7ebf-067c-46ed-913a-ba045a0586df",
"visible": true,
"$$hashKey": "070"
}, {
"name": "Front Curtain",
"weight": "1",
"value": "8",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "fe12c21c-e2c3-4702-ae9b-82f2fe248574",
"visible": true,
"$$hashKey": "071"
}, {
"name": "Rear Curtain",
"weight": "1",
"value": "9",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "4a229ebb-d029-4b1e-a13d-246d00215900",
"visible": true,
"$$hashKey": "072"
}, {
"name": "Fill-in",
"weight": "1",
"value": "10",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "a7ed372d-398f-4614-8efa-64a338f0ad20",
"visible": true,
"$$hashKey": "073"
}, {
"name": "Wireless",
"weight": "1",
"value": "11",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "b36ab529-feab-42aa-8863-2a7084ac0aba",
"visible": true,
"$$hashKey": "074"
}, {
"name": "Redeye Reduction with Slow Sync",
"value": "12",
"weight": "1",
"visible": true,
"id": "23ee6ac2-1b8b-41a7-ae80-aa4fcd8134ae",
"$$hashKey": "07F"
}, {
"name": "Slow Rear-Curtain Sync",
"value": "13",
"weight": "1",
"visible": true,
"id": "f5835da6-4eac-4878-a8c0-3f91cd22372f",
"$$hashKey": "07J"
}, {
"name": "Repeating or Strobe",
"value": "14",
"weight": "1",
"visible": true,
"id": "8f3bb252-ae6e-426a-9781-d1232a0a4845",
"$$hashKey": "0CW"
}, {
"name": "Rear Sync",
"value": "15",
"weight": "1",
"visible": true,
"id": "d668aa49-a999-4638-8af2-5e9eaafd6e75",
"$$hashKey": "06L"
}, {
"name": "Fill-Flaw",
"value": "16",
"weight": "1",
"visible": true,
"id": "00f92889-05f9-45fc-b3de-37e224991548",
"$$hashKey": "08D"
}, {
"name": "Advanced Flash",
"value": "17",
"weight": "1",
"visible": true,
"id": "d49c3d25-2bf5-4723-b7d4-c3ae36783097",
"$$hashKey": "079"
}, {
"name": "Fill-Flash",
"value": "18",
"weight": "1",
"visible": true,
"id": "4693db2a-19c7-4839-8e65-875e36416c63",
"$$hashKey": "0ER"
}, {
"name": "Smart Flash",
"value": "19",
"weight": "1",
"visible": true,
"id": "8b04d59b-75cc-46ff-acc0-33f410f64a09",
"$$hashKey": "07D"
}, {
"name": "",
"value": "",
"weight": "",
"visible": true,
"id": "18cec753-48fe-47e6-9e67-1bb36972bee4",
"$$hashKey": "07F"
}, {
"name": "",
"value": "",
"weight": "",
"visible": true,
"id": "a7fbad1d-2a49-40e7-a9b1-520db0f9fc65"
}]
<tr ng-repeat="val in attribute.format.values track by id">
edit like this
id could be the identity of the objects so you can tack though the id property, that will keep one object if you have add two objects that shares same id mistakenly.
Try this:
you can use 'track by $index'
<tr ng-repeat="val in attribute.format.values track by $index">
Related
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega#5.22.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.20.8"></script>
</head>
<body>
<div id="vis"/>
<script>
const spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"name": "source_0",
"data": {
"values": [
{"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21"},
{"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21"},
{"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21"},
{"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21"},
{"Items": "8", "Items_Rate": "0.45", "Month": "May-21"},
{"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21"},
{"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21"},
{"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21"},
{"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21"},
{"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21"},
{"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21"},
{"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21"}
]
},
"vconcat": [
{
"width": 850,
"height": 250,
"layer": [
{
"mark": {"type": "bar", "size": 50, "tooltip": true},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "ordinal",
"sort": null,
"scale": {"domain": {"param": "brush"}, "zero": true},
"axis": {
"title": "",
"labelAngle": 360,
"tickSize": 20,
"position": 0
}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {"tickMinStep": 1}
},
"color": {
"datum": "No. of Items",
"scale": {"range": ["#0065ad"]}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items",
"type": "quantitative",
"title": "No. of Items"
}
]
}
},
{
"mark": {
"type": "line",
"point": {"shape": "square", "size": "50"},
"size": "2",
"tooltip": true
},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"title": "",
"sort": null,
"scale": {"domain": {"param": "brush"}}
},
"y": {
"field": "Items_Rate",
"type": "quantitative",
"title": "Items",
"scale": {"zero": false},
"sort": null
},
"color": {
"datum": "Items Rate",
"scale": {"range": ["black"]},
"legend": {"symbolType": "square"}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items_Rate",
"type": "quantitative",
"title": "Rate"
}
]
}
}
],
"resolve": {
"scale": {
"y": "independent",
"shape": "independent",
"color": "independent",
"size": "independent"
}
}
},
{
"width": "850",
"height": 100,
"mark": "bar",
"params": [
{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"], "translate": true}
}
],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"sort": null,
"axis": {"title": "", "labels": false, "ticks": false}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false,
"title": "",
"labels": false,
"ticks": false
}
},
"color": {"value": "#0065ad"}
}
}
],
"config": {
"axisY": {"minExtent": 40},
"legend": {
"orient": "top",
"layout": {"top": {"anchor": "middle"}},
"labelFont": "arial",
"titleFont": "arial"
}
}
};
vegaEmbed("#vis", spec, {mode: "vega-lite"}).then(console.log).catch(console.warn);
</script>
</body>
</html>
It can also be viewed in Vega lite editor here:
https://vega.github.io/editor/#/gist/da859f07e288d51da47a309ef2718ab2/responsive_chart.json
My query is that when I select 4 or more graphs and scroll forwards, everything is working properly. However when I scroll the same backwards, the line graphs becomes incorrect.
Instead of the nearest point creating a line to join the newly visible point, the farthest or the second-last visible graph now is joining the points.
How could I change the code to have only the nearest point join with the new point and not the order of how they became visible?
For example, in the screenshot below, the Sept-21 point should join the Aug-21 point and NOT Nov-21 when I take the scroll backwards.
Thank you for the help.
You need a sort field. I added an index and used that but you can use anything you like.
Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"name": "source_0",
"data": {
"values": [
{"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21", "Index":1},
{"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21", "Index":2},
{"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21", "Index":3},
{"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21", "Index":4},
{"Items": "8", "Items_Rate": "0.45", "Month": "May-21", "Index":5},
{"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21", "Index":6},
{"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21", "Index":7},
{"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21", "Index":8},
{"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21", "Index":9},
{"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21", "Index":10},
{"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21", "Index":11},
{"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21", "Index":12}
]
},
"vconcat": [
{
"width": 850,
"height": 250,
"layer": [
{
"mark": {"type": "bar", "size": 50, "tooltip": true},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "ordinal",
"sort": null,
"scale": {"domain": {"param": "brush"}, "zero": true},
"axis": {
"title": "",
"labelAngle": 360,
"tickSize": 20,
"position": 0
}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {"tickMinStep": 1}
},
"color": {"datum": "No. of Items", "scale": {"range": ["#0065ad"]}},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items",
"type": "quantitative",
"title": "No. of Items"
}
]
}
},
{
"mark": {
"type": "line",
"point": {"shape": "square", "size": "50"},
"size": "2",
"tooltip": true
},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"title": "",
"sort": {"field": "Index"},
"scale": {"domain": {"param": "brush"}}
},
"y": {
"field": "Items_Rate",
"type": "quantitative",
"title": "Items",
"scale": {"zero": false},
"sort": null
},
"color": {
"datum": "Items Rate",
"scale": {"range": ["black"]},
"legend": {"symbolType": "square"}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{"field": "Items_Rate", "type": "quantitative", "title": "Rate"}
]
}
}
],
"resolve": {
"scale": {
"y": "independent",
"shape": "independent",
"color": "independent",
"size": "independent"
}
}
},
{
"width": "850",
"height": 100,
"mark": "bar",
"params": [
{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"], "translate": true}
}
],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"sort": null,
"axis": {"title": "", "labels": true, "ticks": false}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false,
"title": "",
"labels": false,
"ticks": false
}
},
"color": {"value": "#0065ad"}
}
}
],
"config": {
"axisY": {"minExtent": 40},
"legend": {
"orient": "top",
"layout": {"top": {"anchor": "middle"}},
"labelFont": "arial",
"titleFont": "arial"
}
}
}
I'm manipulating some javascript objects and I want to know if is there a more efficient and easy way to process my data.
I already do that, but I'm a beginner in js.
I have four objects with this structure: basically there is an array of blocks and any object has a different number of blocks. In every block, in the features attribute, I have another array with some features.
Then I have another object, and I have to remove from this object (I call it structure) blocks and features that are not present in my four initial object.
This is a sample product object
[
{
"ID": 16293,
"SortNo": "20",
"FeatureGroup": {
"ID": "148",
"Name": {
"Value": "Design",
"Language": "IT"
}
},
"Features": [
{
"Localized": 0,
"ID": "155744521",
"Type": "dropdown",
"Value": "Round",
"CategoryFeatureId": "85327",
"CategoryFeatureGroupID": "16293",
"SortNo": "155",
"PresentationValue": "Rotondo",
"RawValue": "Round",
"LocalValue": [],
"Description": "The external form",
"Mandatory": "1",
"Searchable": "0",
"Feature": {
"ID": "9397",
"Sign": "",
"Measure": {
"ID": "29",
"Sign": "",
"Signs": {
"ID": "",
"_": "",
"Language": "IT"
}
},
"Name": {
"Value": "Forma",
"Language": "IT"
}
}
},
{
"Localized": 0,
"ID": "155655523",
"Type": "multi_dropdown",
"Value": "White",
"CategoryFeatureId": "85298",
"CategoryFeatureGroupID": "16293",
"SortNo": "90",
"PresentationValue": "Bianco",
"RawValue": "White",
"LocalValue": [],
"Description": "The colour of the housing",
"Mandatory": "1",
"Searchable": "1",
"Feature": {
"ID": "10059",
"Sign": "",
"Measure": {
"ID": "29",
"Sign": "",
"Signs": {
"ID": "",
"_": "",
"Language": "IT"
}
},
"Name": {
"Value": "Colore struttura",
"Language": "IT"
}
}
},
{
"Localized": 0,
"ID": "155655525",
"Type": "multi_dropdown",
"Value": "White",
"CategoryFeatureId": "85301",
"CategoryFeatureGroupID": "16293",
"SortNo": "80",
"PresentationValue": "Bianco",
"RawValue": "White",
"LocalValue": [],
"Description": "The colour of the band",
"Mandatory": "1",
"Searchable": "1",
"Feature": {
"ID": "11025",
"Sign": "",
"Measure": {
"ID": "29",
"Sign": "",
"Signs": {
"ID": "",
"_": "",
"Language": "IT"
}
},
"Name": {
"Value": "Colore cinturino",
"Language": "IT"
}
}
},
{
"Localized": 0,
"ID": "219617494",
"Type": "y_n",
"Value": "Y",
"CategoryFeatureId": "168947",
"CategoryFeatureGroupID": "16293",
"SortNo": "-6",
"PresentationValue": "Sì",
"RawValue": "Y",
"LocalValue": [],
"Description": "The product is protected from water",
"Mandatory": "0",
"Searchable": "0",
"Feature": {
"ID": "7509",
"Sign": "",
"Measure": {
"ID": "26",
"Sign": "",
"Signs": {
"ID": "",
"_": "",
"Language": "IT"
}
},
"Name": {
"Value": "Resistente all'acqua",
"Language": "IT"
}
}
}
]
},
{
"ID": 34567,
"SortNo": "20",
"FeatureGroup": {
"ID": "184",
"Name": {
"Value": "Prestazione",
"Language": "IT"
}
},
"Features": [
{
"Localized": 0,
"ID": "155744528",
"Type": "y_n",
"Value": "N",
"CategoryFeatureId": "94697",
"CategoryFeatureGroupID": "34567",
"SortNo": "800",
"PresentationValue": "No",
"RawValue": "N",
"LocalValue": [],
"Description": "La Frequenza modulare radio produce la miglior recezione di qualsiasi canale radio. Quando viene usato un auricolare, produce un effetto di suono da stereo r",
"Mandatory": "1",
"Searchable": "0",
"Feature": {
"ID": "2172",
"Sign": "",
"Measure": {
"ID": "26",
"Sign": "",
"Signs": {
"ID": "",
"_": "",
"Language": "IT"
}
},
"Name": {
"Value": "Radio FM",
"Language": "IT"
}
}
},
{
"Localized": 0,
"ID": "155744530",
"Type": "multi_dropdown",
"Value": "Not supported",
"CategoryFeatureId": "85357",
"CategoryFeatureGroupID": "34567",
"SortNo": "500",
"PresentationValue": "Non supportato",
"RawValue": "Not supported",
"LocalValue": [],
"Description": "Types of memory cards which can be used with this product.",
"Mandatory": "1",
"Searchable": "0",
"Feature": {
"ID": "730",
"Sign": "",
"Measure": {
"ID": "29",
"Sign": "",
"Signs": {
"ID": "",
"_": "",
"Language": "IT"
}
},
"Name": {
"Value": "Tipi schede di memoria",
"Language": "IT"
}
}
}
]
}
]
Here i loop my initial objects (this.compare_products) to extract, in two arrays (featureGroupIds - featureIds) the ID of my block and the CategoryFeatureId
let featureGroupIds = []
let featureIds = []
this.compare_products.forEach((object) => {
featureGroupIds = featureGroupIds.concat(FeaturesGroups.map(o => o.ID))
featureIds = featureIds.concat(FeaturesGroups.map(o => o.Features.map(o => o. CategoryFeatureId))).flat(2)
})
The two arrays, featureGroupIds and featureIds are now filled with every block ID and every CategoryFeatureId present in my four object.
Now I have to filter the object I call "structure" to remove the block and the features with an ID that is not present in my arrays.
This is my structure, and as you can see is similar.
[
{
"name": "Display",
"data": {
"id": 34566,
"category_id": 2647
},
"features": [
{
"name": "Tipo di display",
"data": {
"id": 85325,
"category_id": 2647,
"feature_id": 9104,
"category_feature_group_id": 34566,
"order": 10100140
}
},
{
"name": "Touch screen",
"data": {
"id": 85331,
"category_id": 2647,
"feature_id": 4963,
"category_feature_group_id": 34566,
"order": 10100129
}
},
{
"name": "Dimensioni schermo",
"data": {
"id": 158002,
"category_id": 2647,
"feature_id": 3544,
"category_feature_group_id": 34566,
"order": 100149
}
},
{
"name": "à di Pixel",
"data": {
"id": 85347,
"category_id": 2647,
"feature_id": 13246,
"category_feature_group_id": 34566,
"order": 100147
}
},
{
"name": "Tipo di vetro",
"data": {
"id": 94704,
"category_id": 2647,
"feature_id": 7610,
"category_feature_group_id": 34566,
"order": 100050
}
}
]
},
{
"name": "Altre caratteristiche",
"data": {
"id": 34569,
"category_id": 2647,
"feature_group_id": 146,
"name": null,
"order": 0
},
"features": [
{
"name": "inside",
"data": {
"id": 110410,
"category_id": 2647,
"feature_id": 18688,
"category_feature_group_id": 34569,
"order": 100000
}
}
]
}
]
Here is my function
structure = structure.filter(featureGroup => this.featureGroupIds.includes(featureGroup.data.id));
structure.map((object) => {
object.features.filter(feature => this.featureIds.includes(feature.data.feature_id))
})
this.featureIds and this.featureGroupIds are the array with the group IDS and with the feature IDS.
Is there a more efficient way to do this?
I have 2 arrays:
Array One:
[
{
"value": {
"_id": "5ce3f8cc35ad1e0999ee18d1",
"is_default": false,
"is_required": true,
"sort_order": 0,
"value": "",
"label": "No 38",
"option_id": "5ce3f8cc35ad1e0999ee18d0",
"__v": 0,
"selected": true
}
},
{
"value": {
"label": "Τρικολορ",
"sort_order": 0,
"value": "#7a3131|#0e8e76|#b6edd9",
"_id": "3aa5b2d7-cb78-44ce-bb5d-e4d42ebf3309",
"selected": true
}
},
{
"value": {
"label": "ΧΛ",
"sort_order": 0,
"value": "",
"_id": "5df37c50854df50b274d7829",
"selected": true
}
}
]
Array Two:
[
{
"_id": "5df384edba99411550e4e019",
"options": [
{
"option": {
"sort_order": 0,
"display_name": "Μέγεθος (EU)",
"type": "text",
"display_style": "dropdown"
},
"value": {
"_id": "5ce3f8cc35ad1e0999ee18d1",
"is_default": false,
"is_required": true,
"sort_order": 0,
"value": "",
"label": "No 38",
"option_id": "5ce3f8cc35ad1e0999ee18d0",
"__v": 0
}
},
{
"option": {
"display_name": "swatch",
"display_style": "swatch",
"sort_order": 0,
"type": "swatch"
},
"value": {
"label": "Τρικολορ",
"sort_order": 0,
"value": "#7a3131|#0e8e76|#b6edd9",
"_id": "3aa5b2d7-cb78-44ce-bb5d-e4d42ebf3309"
}
},
{
"option": {
"display_name": "dropdown",
"display_style": "dropdown",
"sort_order": 0,
"type": "multiplechoice"
},
"value": {
"_id": "5df37c61854df50b274d782a",
"is_default": false,
"is_required": true,
"label": "Λ",
"sort_order": 0,
"value": "",
"value_data": null
}
}
]
},
{
"_id": "5ce3f8cc35ad1e0999ee18d1",
"options": [
{
"option": {
"sort_order": 0,
"display_name": "Μέγεθος (EU)",
"type": "text",
"display_style": "dropdown"
},
"value": {
"_id": "5ce3f8cc35ad1e0999ee18d1",
"is_default": false,
"is_required": true,
"sort_order": 0,
"value": "",
"label": "No 38",
"option_id": "5ce3f8cc35ad1e0999ee18d0",
"__v": 0
}
},
{
"option": {
"display_name": "swatch",
"display_style": "swatch",
"sort_order": 0,
"type": "swatch"
},
"value": {
"label": "Τρικολορ",
"sort_order": 0,
"value": "#7a3131|#0e8e76|#b6edd9",
"_id": "3aa5b2d7-cb78-44ce-bb5d-e4d42ebf3309"
}
},
{
"option": {
"display_name": "dropdown",
"display_style": "dropdown",
"sort_order": 0,
"type": "multiplechoice"
},
"value": {
"label": "ΧΛ",
"sort_order": 0,
"value": "",
"_id": "5df37c50854df50b274d7829"
}
}
]
}
]
As you can see, each value _id from element at index 1 in Array Two matches each value _id from Array One.
How can I iterate Array Two and extract the _id if all elements value _id's matches Array One?
I have tried so many approaches but none seems to work, e.x.:
const opts = newTempProduct.variants.map((item) => item.options);
const props = ['_id'];
const result = opts
.filter((o1, i) => {
o1.filter((o3) => {
return tmpVariant.some((o2) => {
return o3.value._id === o2.value._id;
});
});
})
.map(function(o) {
return props.reduce((newo, name) => {
newo[name] = o[name];
return newo;
}, {});
});
You can create an additional array called search. This array is a mapped version of your first array, to only include the _id property. For efficiency purposes, you can make this array a Set so you can have O(1) lookup. You can then use .every() with .filter() to return true if all ids in the options array for a given object are in search array. This will give you your resulting id:
const arr = [{ "value": { "_id": "5ce3f8cc35ad1e0999ee18d1", "is_default": false, "is_required": true, "sort_order": 0, "value": "", "label": "No 38", "option_id": "5ce3f8cc35ad1e0999ee18d0", "__v": 0, "selected": true } }, { "value": { "label": "Τρικολορ", "sort_order": 0, "value": "#7a3131|#0e8e76|#b6edd9", "_id": "3aa5b2d7-cb78-44ce-bb5d-e4d42ebf3309", "selected": true } }, { "value": { "label": "ΧΛ", "sort_order": 0, "value": "", "_id": "5df37c50854df50b274d7829", "selected": true } } ];
const data = [{ "_id": "5df384edba99411550e4e019", "options": [{ "option": { "sort_order": 0, "display_name": "Μέγεθος (EU)", "type": "text", "display_style": "dropdown" }, "value": { "_id": "5ce3f8cc35ad1e0999ee18d1", "is_default": false, "is_required": true, "sort_order": 0, "value": "", "label": "No 38", "option_id": "5ce3f8cc35ad1e0999ee18d0", "__v": 0 } }, { "option": { "display_name": "swatch", "display_style": "swatch", "sort_order": 0, "type": "swatch" }, "value": { "label": "Τρικολορ", "sort_order": 0, "value": "#7a3131|#0e8e76|#b6edd9", "_id": "3aa5b2d7-cb78-44ce-bb5d-e4d42ebf3309" } }, { "option": { "display_name": "dropdown", "display_style": "dropdown", "sort_order": 0, "type": "multiplechoice" }, "value": { "_id": "5df37c61854df50b274d782a", "is_default": false, "is_required": true, "label": "Λ", "sort_order": 0, "value": "", "value_data": null } } ] }, { "_id": "5ce3f8cc35ad1e0999ee18d1", "options": [{ "option": { "sort_order": 0, "display_name": "Μέγεθος (EU)", "type": "text", "display_style": "dropdown" }, "value": { "_id": "5ce3f8cc35ad1e0999ee18d1", "is_default": false, "is_required": true, "sort_order": 0, "value": "", "label": "No 38", "option_id": "5ce3f8cc35ad1e0999ee18d0", "__v": 0 } }, { "option": { "display_name": "swatch", "display_style": "swatch", "sort_order": 0, "type": "swatch" }, "value": { "label": "Τρικολορ", "sort_order": 0, "value": "#7a3131|#0e8e76|#b6edd9", "_id": "3aa5b2d7-cb78-44ce-bb5d-e4d42ebf3309" } }, { "option": { "display_name": "dropdown", "display_style": "dropdown", "sort_order": 0, "type": "multiplechoice" }, "value": { "label": "ΧΛ", "sort_order": 0, "value": "", "_id": "5df37c50854df50b274d7829" } } ] } ];
const search = new Set(arr.map(({value: {_id}}) => _id));
const res = data.filter(
({options}) => options.every(({value: {_id}}) => search.has(_id))
).map(({_id}) => _id); // use `.filter()` incase many objects match ur first array
console.log(res); // array of all _ids matched
console.log(res.pop()); // your expected/wanted result
I have treemap chart and it has two values Squadra2 with value of 13778.00 and Squadra1 with value of 16.00
Now when treemap renders it takes percentage difference between them and split them accordingly BUT now I ended up in situation where I need to be sniper precise in order to select Squadra1 with value of 16.00
As you can see in the picture
Is there a possibility to declare for example minimal width of Squadra1, and to disallow it to go under that value ( to remain clickable ) ?
Please let me know, thank you
{
"chart": {
renderTo:"container",
"backgroundColor": "#FFFFFF"
},
"colorAxis": {
"labels": {
"enabled": false
},
"tickLength": 0,
"gridLineWidth": 0,
"min": 0,
"max": 20,
"stops": [
[
-0.001,
"#ffffff"
],
[
0.5,
"#7cb5ec"
],
[
0.501,
"#7cb5ec"
],
[
0.499,
"#ffffff"
],
[
1,
"#434348"
],
[
1.001,
"#434348"
]
]
},
"legend": {
"enabled": true,
"itemStyle": {
"color": "#FFF"
}
},
"tooltip": {},
"series": [
{
"drillUpButton": {
"position": {
"align": "center",
"verticalAlign": "bottom"
},
"theme": {
"fill": "white",
"stroke-width": 1,
"stroke": "silver",
"r": 2,
"style": {
"fontSize": "12px"
},
"states": {
"hover": {}
}
}
},
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levelIsConstant": false,
"levels": [
{
"level": 1,
"dataLabels": {
"enabled": true
},
"borderWidth": 6,
"borderColor": "#FFFFFF"
}
],
"data": [
{
"id": "id_0",
"name": "Squadra1",
"parentName": "Squadra1"
},
{
"id": "id_0_0",
"name": "ACC",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 1,
"colorValue": 1.8117836848479765
},
{
"id": "id_0_1",
"name": "FEB",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 0,
"colorValue": 5.48633338681632
},
{
"id": "id_0_2",
"name": "MAG",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 8,
"colorValue": 3.4398769612396007
},
{
"id": "id_0_3",
"name": "PAM",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 7,
"colorValue": 2.775814171372472
},
{
"id": "id_1",
"name": "Squadra2",
"parentName": "Squadra2"
},
{
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 13778,
"colorValue": 13.595706940649173
}
],
"events": {},
"_colorIndex": 0
}
],
"subtitle": {
"text": "",
"align": "",
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
}
},
"title": {
"text": "",
"align": "",
"style": {
"color": "",
"fontWeight": "none",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none"
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
},
"position": {
"align": "",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"turboThreshold": 5000,
"colorByPoint": false
}
}
}
Link of fiddle
http://jsfiddle.net/3k5fmrut/2/
The easiest way to achieve it is to set a smaller value for Squadra2 and add an additional property with real value to point object that can be used in tooltip.formatter callback to present the real value in the tooltip. Check demo and code posted below.
Code:
data:
{
"id": "id_1",
"name": "Squadra2",
"realValue": 13778,
"parentName": "Squadra2"
}, {
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 137.78,
"colorValue": 13.595706940649173
}
tooltip.formatter:
tooltip: {
formatter: function() {
return this.point.realValue;
}
}
Demo:
https://jsfiddle.net/BlackLabel/trz96fy7/
You can define your own algorithm to build the treemap : Highcharts treemap series
You could choose an algorithm such that each element has a minimum width and height, and the biggest elements share the remaining space.
I need help with increments in Node Red (on Raspberry Pi). I am trying to make a smart thermostat with a LCD touchscreen and an app for remote access (ex. coming home on a cold winter day and want to start heating your apartment).
Some suggestions on how to connect to the Raspberry Pi over the Internet (not local network) with an android and a link on a tutorial or example would be much appreciated.
P.S. I am doing this for a friend and I promised him some good results.
Sorry for messy code... => cleaned it up in the edit
I have tried everything I could think of to make my code work as I am not very experienced with NodeRed nor JS.
Global variables May just do the trick... I haven't figured it out yet...
Another barrier I have encountered is the ability to access and interact with the code outside the local network.
[
{
"id": "9f63513b.e227a",
"type": "ui_slider",
"z": "f216bae9.be3b68",
"name": "",
"label": "",
"group": "b344cd03.40f29",
"order": 2,
"width": "0",
"height": "0",
"passthru": true,
"topic": "slide",
"min": "10",
"max": "45",
"step": 1,
"x": 650,
"y": 140,
"wires": [
[
"4e35591.c5466a8",
"ef681f9b.17845"
]
]
},
{
"id": "4e35591.c5466a8",
"type": "delay",
"z": "f216bae9.be3b68",
"name": "Buffer",
"pauseType": "queue",
"timeout": "5",
"timeoutUnits": "seconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "1",
"randomLast": "5",
"randomUnits": "seconds",
"drop": true,
"x": 810,
"y": 60,
"wires": [
[
"eec05221.3091e"
]
]
},
{
"id": "82848cf2.b33d1",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "msg.buton = msg.payload;\ndelete msg.payload;\nmsg.incalzire=msg.buton;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 480,
"y": 240,
"wires": [
[
"9f63513b.e227a"
]
]
},
{
"id": "ef681f9b.17845",
"type": "ui_gauge",
"z": "f216bae9.be3b68",
"name": "",
"group": "b344cd03.40f29",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "",
"format": "{{value}}",
"min": "0",
"max": "60",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 810,
"y": 220,
"wires": []
},
{
"id": "eec05221.3091e",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "msg.tempslide=msg.payload;\ndelete msg.payload;\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1000,
"y": 60,
"wires": [
[
"f5853672.5fe148"
]
]
},
{
"id": "6b57c137.8c136",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Switch",
"func": "if(msg.payload===0){\n msg.payload=1;\n}\nelse if (msg.payload==1){\n msg.payload=0;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 460,
"wires": [
[
"82848cf2.b33d1"
]
]
},
{
"id": "f5853672.5fe148",
"type": "function",
"z": "f216bae9.be3b68",
"name": "working mess",
"func": "if (msg.incalzire===0||msg.payload===0){\n\nif (msg.temp<=msg.tempslide){\n msg.payload=0;\n}\n\nelse if (msg.temp>msg.tempslide){\n msg.payload=1;\n}\n\nelse{\n msg.payload=1;}\n \n}\n\n\nelse{\n msg.payload=1;\n \n}\n\n\n\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1058,
"y": 140,
"wires": [
[
"3f6977e5.b44158",
"ee3a7840.808ad8",
"7726596c.b74228"
]
]
},
{
"id": "d34a3234.79712",
"type": "ui_switch",
"z": "f216bae9.be3b68",
"name": "",
"label": "Override Window",
"group": "b344cd03.40f29",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "1",
"onvalueType": "num",
"onicon": "",
"oncolor": "",
"offvalue": "0",
"offvalueType": "num",
"officon": "",
"offcolor": "",
"x": 250,
"y": 420,
"wires": [
[
"6b57c137.8c136"
]
]
},
{
"id": "3f6977e5.b44158",
"type": "debug",
"z": "f216bae9.be3b68",
"name": "",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"x": 1293,
"y": 140,
"wires": []
},
{
"id": "ee3a7840.808ad8",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Message",
"func": "if(msg.payload===0){\n msg.payload='PORNITA'; //ON\n}\nelse if (msg.payload==1){\n msg.payload='OPRITA'; //OFF\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1183,
"y": 340,
"wires": [
[
"eaeac5fb.c27728"
]
]
},
{
"id": "7726596c.b74228",
"type": "rpi-gpio out",
"z": "f216bae9.be3b68",
"name": "Rel1",
"pin": "22",
"set": "",
"level": "0",
"freq": "",
"out": "out",
"x": 1233,
"y": 220,
"wires": []
},
{
"id": "c0784b3b.c1fcb8",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Switch",
"func": "if(msg.payload===0){\n msg.payload=1;\n}\nelse if (msg.payload==1){\n msg.payload=0;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 250,
"y": 380,
"wires": [
[
"d34a3234.79712"
]
]
},
{
"id": "eaeac5fb.c27728",
"type": "ui_text",
"z": "f216bae9.be3b68",
"group": "b344cd03.40f29",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Incalzirea este",
"format": "{{msg.payload}}",
"layout": "row-right",
"x": 1220,
"y": 380,
"wires": []
},
{
"id": "248c4825.00c018",
"type": "rpi-gpio in",
"z": "f216bae9.be3b68",
"name": "",
"pin": "40",
"intype": "tri",
"debounce": "25",
"read": false,
"x": 90,
"y": 300,
"wires": [
[
"c0784b3b.c1fcb8"
]
]
},
{
"id": "afb8009a.49841",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "//nu umbla la asta\nmsg.temp=msg.payload;\ndelete msg.payload;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 320,
"y": 140,
"wires": [
[
"c0784b3b.c1fcb8"
]
]
},
{
"id": "c696dbbc.58ee98",
"type": "rpi-dht22",
"z": "f216bae9.be3b68",
"name": "",
"topic": "Interior",
"dht": "22",
"pintype": "1",
"pin": "29",
"x": 140,
"y": 180,
"wires": [
[
"afb8009a.49841",
"33ec6fb6.fda7f"
]
]
},
{
"id": "33ec6fb6.fda7f",
"type": "ui_gauge",
"z": "f216bae9.be3b68",
"name": "",
"group": "d2bfb34b.1c943",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "° C",
"format": "{{value}}",
"min": 0,
"max": "60",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 150,
"y": 220,
"wires": []
},
{
"id": "d3a6bff.b99a44",
"type": "inject",
"z": "f216bae9.be3b68",
"name": "",
"topic": "",
"payload": "",
"payloadType": "date",
"repeat": "50",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 110,
"y": 120,
"wires": [
[
"c696dbbc.58ee98"
]
]
},
{
"id": "b344cd03.40f29",
"type": "ui_group",
"z": "",
"name": "Reglarea Incalzirii",
"tab": "af80de11.bfd15",
"order": 2,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "d2bfb34b.1c943",
"type": "ui_group",
"z": "",
"name": "Temperatura Curenta",
"tab": "af80de11.bfd15",
"order": 1,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "af80de11.bfd15",
"type": "ui_tab",
"z": "",
"name": "Sergiu",
"icon": "fa-thermometer-full",
"order": 4
}
]
The old thermostat was basically an automated relay switch. I have to make it smart and my best bet is a raspberry pi.
The increment part can replace the slider(I have Backups) and has to be triggered by a button in the Dashboard UI.
Everything except of what I mentioned works corectly.
Thank you for your help!! (or at least your time)