How can I get cuML RandomForestClassifier leafs? - gpu

I'm new to cuML and I have a decision tree classifier using scikit learn. I would like to perform some hyperparameter search using the GPU, so I started looking cuML. There is no DecisionTreeClassifier in cuML, but it can be reproduced by using RandomForestClassifier with 1 tree and no bootstrap, as far as I read on other SO posts.
My problem is how can I extract the tree and all the rules (the leafs and nodes) using cuML RandomForestClassifier? Or I should be looking to other algorithms like XGBoost?

Access to the underlying decision trees or information isn't necessary to do hyperparameter optimization.
With that said, you can access summary information about the underlying trees and leaf predictions like this:
from cuml.ensemble import RandomForestClassifier
from cuml.datasets import make_classification
N = 100
K = 10
X, y = make_classification(
n_samples=N,
n_features=K,
n_informative=K,
n_redundant=0
)
clf = RandomForestClassifier(n_estimators=2)
clf.fit(X, y)
print(clf.get_summary_text())
print(clf.get_detailed_text())
print(clf.get_json())
Forest has 2 trees, max_depth 16, and max_leaves -1
Tree #0
Decision Tree depth --> 9 and n_leaves --> 18
Tree Fitting - Overall time --> 1.216 milliseconds
Tree #1
Decision Tree depth --> 7 and n_leaves --> 16
Tree Fitting - Overall time --> 1.919 milliseconds
Forest has 2 trees, max_depth 16, and max_leaves -1
Tree #0
Decision Tree depth --> 9 and n_leaves --> 18
Tree Fitting - Overall time --> 1.216 milliseconds
└(colid: 7, quesval: 2.73323, best_metric_val: 0.0407427)
├(colid: 9, quesval: -0.233239, best_metric_val: 0.116631)
│ ├(colid: 2, quesval: -1.48028, best_metric_val: 0.045858)
│ │ ├(colid: 8, quesval: -1.14041, best_metric_val: 0.28125)
│ │ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ │ └(colid: 1, quesval: 0.720062, best_metric_val: 0.375)
│ │ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ └(colid: 3, quesval: -1.01601, best_metric_val: 0.313368)
│ ├(colid: 8, quesval: 1.68195, best_metric_val: 0.0131944)
│ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ └(colid: 6, quesval: -0.458985, best_metric_val: 0.32)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 7, quesval: -2.86422, best_metric_val: 0.126263)
│ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 8, quesval: 1.3618, best_metric_val: 0.0198347)
│ ├(colid: 9, quesval: 1.96266, best_metric_val: 0.142222)
│ │ ├(colid: 5, quesval: -0.427346, best_metric_val: 0.0308642)
│ │ │ ├(colid: 8, quesval: -0.295362, best_metric_val: 0.125)
│ │ │ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ │ │ └(colid: 6, quesval: 1.99819, best_metric_val: 0.5)
│ │ │ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ │ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(leaf, prediction: [0, 1], best_metric_val: 0)
└(colid: 3, quesval: 1.4614, best_metric_val: 0.239645)
├(leaf, prediction: [1, 0], best_metric_val: 0)
└(colid: 7, quesval: 3.80204, best_metric_val: 0.125)
├(leaf, prediction: [0, 1], best_metric_val: 0)
└(colid: 8, quesval: 0.637938, best_metric_val: 0.5)
├(leaf, prediction: [0, 1], best_metric_val: 0)
└(leaf, prediction: [1, 0], best_metric_val: 0)
Tree #1
Decision Tree depth --> 7 and n_leaves --> 16
Tree Fitting - Overall time --> 1.919 milliseconds
└(colid: 8, quesval: -1.19294, best_metric_val: 0.111478)
├(colid: 7, quesval: -2.32102, best_metric_val: 0.0867768)
│ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(leaf, prediction: [0, 1], best_metric_val: 0)
└(colid: 3, quesval: 0.590359, best_metric_val: 0.180291)
├(colid: 6, quesval: -2.11692, best_metric_val: 0.126613)
│ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ └(colid: 5, quesval: -1.94796, best_metric_val: 0.0655193)
│ ├(colid: 6, quesval: 1.18255, best_metric_val: 0.489796)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 8, quesval: 3.48108, best_metric_val: 0.0196773)
│ ├(colid: 5, quesval: 0.71779, best_metric_val: 0.00283446)
│ │ ├(colid: 4, quesval: 1.85633, best_metric_val: 1.19209e-07)
│ │ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ └(colid: 5, quesval: 0.815552, best_metric_val: 0.152778)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 9, quesval: 0.690919, best_metric_val: 0.5)
│ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ └(leaf, prediction: [1, 0], best_metric_val: 0)
└(colid: 6, quesval: 2.16413, best_metric_val: 0.071035)
├(colid: 7, quesval: 3.80204, best_metric_val: 0.0818594)
│ ├(colid: 9, quesval: 1.33454, best_metric_val: 0.02)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(colid: 5, quesval: 0.0840077, best_metric_val: 0.375)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(leaf, prediction: [1, 0], best_metric_val: 0)
└(leaf, prediction: [1, 0], best_metric_val: 0)
[
{"nodeid": 0, "split_feature": 7, "split_threshold": 2.7332263, "gain": 0.0407427214, "instance_count": 100, "yes": 1, "no": 2, "children": [
{"nodeid": 1, "split_feature": 9, "split_threshold": -0.233238578, "gain": 0.116630867, "instance_count": 87, "yes": 3, "no": 4, "children": [
{"nodeid": 3, "split_feature": 2, "split_threshold": -1.48028064, "gain": 0.0458579995, "instance_count": 39, "yes": 7, "no": 8, "children": [
{"nodeid": 7, "split_feature": 8, "split_threshold": -1.1404053, "gain": 0.28125, "instance_count": 8, "yes": 13, "no": 14, "children": [
{"nodeid": 13, "leaf_value": [0, 1], "instance_count": 4},
{"nodeid": 14, "split_feature": 1, "split_threshold": 0.720061541, "gain": 0.375, "instance_count": 4, "yes": 21, "no": 22, "children": [
{"nodeid": 21, "leaf_value": [1, 0], "instance_count": 3},
{"nodeid": 22, "leaf_value": [0, 1], "instance_count": 1}
]}
]},
{"nodeid": 8, "leaf_value": [0, 1], "instance_count": 31}
]},
{"nodeid": 4, "split_feature": 3, "split_threshold": -1.01600909, "gain": 0.313368142, "instance_count": 48, "yes": 9, "no": 10, "children": [
{"nodeid": 9, "split_feature": 8, "split_threshold": 1.68195295, "gain": 0.0131943803, "instance_count": 24, "yes": 15, "no": 16, "children": [
{"nodeid": 15, "leaf_value": [1, 0], "instance_count": 19},
{"nodeid": 16, "split_feature": 6, "split_threshold": -0.458984971, "gain": 0.320000023, "instance_count": 5, "yes": 23, "no": 24, "children": [
{"nodeid": 23, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 24, "leaf_value": [1, 0], "instance_count": 4}
]}
]},
{"nodeid": 10, "split_feature": 7, "split_threshold": -2.86421776, "gain": 0.126262575, "instance_count": 24, "yes": 17, "no": 18, "children": [
{"nodeid": 17, "leaf_value": [1, 0], "instance_count": 2},
{"nodeid": 18, "split_feature": 8, "split_threshold": 1.36179876, "gain": 0.0198347215, "instance_count": 22, "yes": 25, "no": 26, "children": [
{"nodeid": 25, "split_feature": 9, "split_threshold": 1.96266103, "gain": 0.142222196, "instance_count": 10, "yes": 27, "no": 28, "children": [
{"nodeid": 27, "split_feature": 5, "split_threshold": -0.427345634, "gain": 0.0308641735, "instance_count": 9, "yes": 29, "no": 30, "children": [
{"nodeid": 29, "split_feature": 8, "split_threshold": -0.295361876, "gain": 0.125, "instance_count": 4, "yes": 31, "no": 32, "children": [
{"nodeid": 31, "leaf_value": [0, 1], "instance_count": 2},
{"nodeid": 32, "split_feature": 6, "split_threshold": 1.99819326, "gain": 0.5, "instance_count": 2, "yes": 33, "no": 34, "children": [
{"nodeid": 33, "leaf_value": [1, 0], "instance_count": 1},
{"nodeid": 34, "leaf_value": [0, 1], "instance_count": 1}
]}
]},
{"nodeid": 30, "leaf_value": [0, 1], "instance_count": 5}
]},
{"nodeid": 28, "leaf_value": [1, 0], "instance_count": 1}
]},
{"nodeid": 26, "leaf_value": [0, 1], "instance_count": 12}
]}
]}
]}
]},
{"nodeid": 2, "split_feature": 3, "split_threshold": 1.46139979, "gain": 0.239644989, "instance_count": 13, "yes": 5, "no": 6, "children": [
{"nodeid": 5, "leaf_value": [1, 0], "instance_count": 9},
{"nodeid": 6, "split_feature": 7, "split_threshold": 3.8020432, "gain": 0.125, "instance_count": 4, "yes": 11, "no": 12, "children": [
{"nodeid": 11, "leaf_value": [0, 1], "instance_count": 2},
{"nodeid": 12, "split_feature": 8, "split_threshold": 0.637937546, "gain": 0.5, "instance_count": 2, "yes": 19, "no": 20, "children": [
{"nodeid": 19, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 20, "leaf_value": [1, 0], "instance_count": 1}
]}
]}
]}
]},
{"nodeid": 0, "split_feature": 8, "split_threshold": -1.19294095, "gain": 0.111478344, "instance_count": 100, "yes": 1, "no": 2, "children": [
{"nodeid": 1, "split_feature": 7, "split_threshold": -2.3210218, "gain": 0.0867768154, "instance_count": 22, "yes": 3, "no": 4, "children": [
{"nodeid": 3, "leaf_value": [1, 0], "instance_count": 1},
{"nodeid": 4, "leaf_value": [0, 1], "instance_count": 21}
]},
{"nodeid": 2, "split_feature": 3, "split_threshold": 0.590358853, "gain": 0.180290893, "instance_count": 78, "yes": 5, "no": 6, "children": [
{"nodeid": 5, "split_feature": 6, "split_threshold": -2.1169188, "gain": 0.12661314, "instance_count": 56, "yes": 7, "no": 8, "children": [
{"nodeid": 7, "leaf_value": [0, 1], "instance_count": 5},
{"nodeid": 8, "split_feature": 5, "split_threshold": -1.94796324, "gain": 0.065519318, "instance_count": 51, "yes": 11, "no": 12, "children": [
{"nodeid": 11, "split_feature": 6, "split_threshold": 1.18254995, "gain": 0.489795923, "instance_count": 7, "yes": 15, "no": 16, "children": [
{"nodeid": 15, "leaf_value": [0, 1], "instance_count": 4},
{"nodeid": 16, "leaf_value": [1, 0], "instance_count": 3}
]},
{"nodeid": 12, "split_feature": 8, "split_threshold": 3.48108315, "gain": 0.0196772516, "instance_count": 44, "yes": 17, "no": 18, "children": [
{"nodeid": 17, "split_feature": 5, "split_threshold": 0.717789888, "gain": 0.00283446093, "instance_count": 42, "yes": 21, "no": 22, "children": [
{"nodeid": 21, "split_feature": 4, "split_threshold": 1.85632861, "gain": 1.1920929e-07, "instance_count": 30, "yes": 27, "no": 28, "children": [
{"nodeid": 27, "leaf_value": [1, 0], "instance_count": 19},
{"nodeid": 28, "leaf_value": [1, 0], "instance_count": 11}
]},
{"nodeid": 22, "split_feature": 5, "split_threshold": 0.815551639, "gain": 0.152777761, "instance_count": 12, "yes": 29, "no": 30, "children": [
{"nodeid": 29, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 30, "leaf_value": [1, 0], "instance_count": 11}
]}
]},
{"nodeid": 18, "split_feature": 9, "split_threshold": 0.690918803, "gain": 0.5, "instance_count": 2, "yes": 23, "no": 24, "children": [
{"nodeid": 23, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 24, "leaf_value": [1, 0], "instance_count": 1}
]}
]}
]}
]},
{"nodeid": 6, "split_feature": 6, "split_threshold": 2.1641295, "gain": 0.0710349679, "instance_count": 22, "yes": 9, "no": 10, "children": [
{"nodeid": 9, "split_feature": 7, "split_threshold": 3.8020432, "gain": 0.0818593949, "instance_count": 21, "yes": 13, "no": 14, "children": [
{"nodeid": 13, "split_feature": 9, "split_threshold": 1.33453584, "gain": 0.0200000368, "instance_count": 20, "yes": 19, "no": 20, "children": [
{"nodeid": 19, "leaf_value": [0, 1], "instance_count": 16},
{"nodeid": 20, "split_feature": 5, "split_threshold": 0.08400774, "gain": 0.375, "instance_count": 4, "yes": 25, "no": 26, "children": [
{"nodeid": 25, "leaf_value": [0, 1], "instance_count": 3},
{"nodeid": 26, "leaf_value": [1, 0], "instance_count": 1}
]}
]},
{"nodeid": 14, "leaf_value": [1, 0], "instance_count": 1}
]},
{"nodeid": 10, "leaf_value": [1, 0], "instance_count": 1}
]}
]}
]}
]

Related

How to apply multiple colors in legend for Vega stacked bar?

I have the next Vega-Light bar chart.
Vega Bar online editor
How to apply multiple colors in legend? When I apply
symbols: {
update: {
fill: { field: 'color' },
},
},
I didn't see any symbols, only labels.
I need to apply four colors for legend symbols. When I write fill: { value : "red"}, all of the symbols became red color. I need that the four symbols to have different colors. How I can fix this?
{
"width": 500,
"height": 200,
"title": "STD: cashflow cleaning",
"data": [
{
"name": "table",
"values": [
{"yearIndex": 1, "c": "red", "y": 100000, "y0": 10000, "y1": 110000},
{"yearIndex": 1, "c": "green", "y": 10000, "y0": 0, "y1": 10000},
{"yearIndex": 1, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{
"yearIndex": 1,
"c": "orange",
"y": -110000,
"y0": -12000,
"y1": -122000
},
{"yearIndex": 2, "c": "red", "y": 980000, "y0": 98000, "y1": 1078000},
{"yearIndex": 2, "c": "green", "y": 98000, "y0": 0, "y1": 98000},
{"yearIndex": 2, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 2, "c": "orange", "y": 0, "y0": 98000, "y1": 98000},
{"yearIndex": 3, "c": "red", "y": 960000, "y0": 96000, "y1": 1056000},
{"yearIndex": 3, "c": "green", "y": 96000, "y0": 0, "y1": 96000},
{"yearIndex": 3, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 3, "c": "orange", "y": 0, "y0": 96000, "y1": 96000},
{"yearIndex": 4, "c": "red", "y": 940000, "y0": 94000, "y1": 1034000},
{"yearIndex": 4, "c": "green", "y": 94000, "y0": 0, "y1": 94000},
{"yearIndex": 4, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 4, "c": "orange", "y": 0, "y0": 94000, "y1": 94000},
{"yearIndex": 5, "c": "red", "y": 920000, "y0": 92000, "y1": 1012000},
{"yearIndex": 5, "c": "green", "y": 92000, "y0": 0, "y1": 92000},
{"yearIndex": 5, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 5, "c": "orange", "y": 0, "y0": 92000, "y1": 92000},
{"yearIndex": 6, "c": "red", "y": 900000, "y0": 90000, "y1": 990000},
{"yearIndex": 6, "c": "green", "y": 90000, "y0": 0, "y1": 90000},
{"yearIndex": 6, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{
"yearIndex": 6,
"c": "orange",
"y": -91000,
"y0": -10000,
"y1": -101000
},
{"yearIndex": 7, "c": "red", "y": 880000, "y0": 88000, "y1": 968000},
{"yearIndex": 7, "c": "green", "y": 88000, "y0": 0, "y1": 88000},
{"yearIndex": 7, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 7, "c": "orange", "y": 0, "y0": 88000, "y1": 88000},
{"yearIndex": 8, "c": "red", "y": 860000, "y0": 86000, "y1": 946000},
{"yearIndex": 8, "c": "green", "y": 86000, "y0": 0, "y1": 86000},
{"yearIndex": 8, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 8, "c": "orange", "y": 0, "y0": 86000, "y1": 86000},
{"yearIndex": 9, "c": "red", "y": 840000, "y0": 84000, "y1": 924000},
{"yearIndex": 9, "c": "green", "y": 84000, "y0": 0, "y1": 84000},
{"yearIndex": 9, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 9, "c": "orange", "y": 0, "y0": 84000, "y1": 84000},
{"yearIndex": 10, "c": "red", "y": 820000, "y0": 82000, "y1": 902000},
{"yearIndex": 10, "c": "green", "y": 82000, "y0": 0, "y1": 82000},
{"yearIndex": 10, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 10, "c": "orange", "y": 0, "y0": 82000, "y1": 82000}
],
"transform": [
{
"type": "stack",
"groupby": ["yearIndex"],
"sort": {"field": "c"},
"field": "y"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "table", "field": "yearIndex"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": {"data": "table", "field": "c"},
"domain": [
"basicYieldIncome",
"avoidedSoilingIncomeLoss",
"opex",
"capex"
]
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1, "title": "yearIndex"},
{
"orient": "left",
"scale": "y",
"zindex": 1,
"title": "EUR",
"formatType": "number",
"format": ".2s"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "yearIndex"},
"width": {"scale": "x", "band": 1, "offset": -1},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"field": "c"}
}
}
}
],
"legends": [
{
"orient": "top",
"direction": "horizontal",
"fill": "color",
"encode": {
"labels": {
"interactive": true,
"update": {"fontSize": {"value": 12}, "fill": {"value": "black"}}
}
}
}
]
}

Need to create conditional stacked bar chart in Google Data Studio

I have SEO data and need to create a Stacked Bar chart with it.
I have Landing Pages (URLs) and I need to sort them into 4 categories.
Categorize Landing pages into Top 1-3 Landing pages by clicks; same for 4-10, 11-20, 21-100.
Then I need to create Stacked Bar chart with this view.
Sample chart attached below:
Need Month on X axis, Total view count on X axis.
I have generated Random Data here to create sample chart. hopefully it will be enough.
For a categorization of the grouped items, there has to be some preprocessing. Data Studio cannot do it.
Possible approaches can be done in BigQuery, Sheets (pivot). A route in Data Studio would be to do it by the PERCENTILE in combination with a self blend, obtaining the rank (e.g. first 10% of clicks) instead of the top visited sites.
Since you added the tag "custom-visuals", here a way to do it by the VEGA LITE plugin.
First add the Community visualization "Vega/Vega Lite" to your report.
Add as dimension the date and the Landing page, and the metrics are the sum of the clicks.
The add following Vega Lite code in the style tab:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data":
{
"values": [
{"$dimension0": "Jan 18, 2022", "$dimension1": "abs", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 1},
{"$dimension0": "Jan 20, 2022", "$dimension1": "hfkh", "$metric0": 5},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 2},
{"$dimension0": "Jan 18, 2022", "$dimension1": "vnwso", "$metric0": 5},
{"$dimension0": "Jan 24, 2022", "$dimension1": "ojjvl", "$metric0": 6},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vgoe", "$metric0": 8},
{"$dimension0": "Jan 26, 2022", "$dimension1": "abs", "$metric0": 1},
{"$dimension0": "Jan 27, 2022", "$dimension1": "jsofj", "$metric0": 6},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 9},
{"$dimension0": "Jan 19, 2022", "$dimension1": "iefi", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vnwso", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ojjvl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "olwoe", "$metric0": 4},
{"$dimension0": "Feb 3, 2022", "$dimension1": "vgoe", "$metric0": 7},
{"$dimension0": "Feb 4, 2022", "$dimension1": "abs", "$metric0": 9},
{"$dimension0": "Feb 5, 2022", "$dimension1": "jsofj", "$metric0": 3},
{"$dimension0": "Jan 21, 2022", "$dimension1": "hfkh", "$metric0": 1},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 2},
{"$dimension0": "Feb 8, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 20, 2022", "$dimension1": "vnwso", "$metric0": 8},
{"$dimension0": "Feb 10, 2022", "$dimension1": "ojjvl", "$metric0": 15},
{"$dimension0": "Jan 18, 2022", "$dimension1": "olwoe", "$metric0": 11},
{"$dimension0": "Feb 12, 2022", "$dimension1": "vgoe", "$metric0": 16},
{"$dimension0": "Jan 31, 2022", "$dimension1": "abs", "$metric0": 12},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 13},
{"$dimension0": "Feb 15, 2022", "$dimension1": "hfkh", "$metric0": 14},
{"$dimension0": "Feb 16, 2022", "$dimension1": "iefi", "$metric0": 10},
{"$dimension0": "Feb 17, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 31, 2022", "$dimension1": "jsofj", "$metric0": 8},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 6},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "shf", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "jildo", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "kahif", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ikhqfl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "hqifkql", "$metric0": 4},
{"$dimension0": "Jan 19, 2022", "$dimension1": "guwk", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "qfhuw", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "ihqo3", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "wfoj", "$metric0": 5}
]
},
"transform": [
{
"joinaggregate": [{"op":"sum","field":"$metric0","as":"counts"}],"groupby": ["$dimension1"]
},
{
"sort":[{"field":"counts","order": "descending"},{"field":"$dimension1","order": "descending"}],
"window":[{"op": "row_number","as": "rownum"},{
"op": "lead","field":"$dimension1","as": "last"}]
},
{
"calculate": " datum.last == datum.$dimension1 ? 0 : 1 ", "as": "adding"
},
{
"sort":[{"field":"rownum","order": "ascending"}],
"window":[{"op":"sum","field":"adding","as": "TOPs"}]
},
{
"calculate": " datum.TOPs<3 ? 'Top 1-3' : datum.TOPs<10 ? 'Top 4-10' : datum.TOPs<20 ? 'Top 11-20' : 'Top 21-100' ", "as": "TOPid"
}
]
,
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "$dimension0",
"type": "ordinal",
"title": "$dimension0.name"},
"y": {
"field": "$metric0",
"type": "quantitative",
"axis": {"title": "$metric0.name"},
"aggregate": "sum"
},
"color":{
"field": "TOPid",
"scale": {
"domain": ["Top 1-3", "Top 4-10", "Top 11-20", "Top 20-100"],
"range": ["blue", "lightblue", "#00a", "yellow"]
}
} ,
"order": { "field": "TOPs"}
}
}
it can be also viewed and developed under:
https://vega.github.io/editor/#/edited
In case you need the top groups by date and not globally, please use this version
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data":
{
"values": [
{"$dimension0": "Jan 18, 2022", "$dimension1": "abs", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 1},
{"$dimension0": "Jan 20, 2022", "$dimension1": "hfkh", "$metric0": 5},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 2},
{"$dimension0": "Jan 18, 2022", "$dimension1": "vnwso", "$metric0": 5},
{"$dimension0": "Jan 24, 2022", "$dimension1": "ojjvl", "$metric0": 6},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vgoe", "$metric0": 8},
{"$dimension0": "Jan 26, 2022", "$dimension1": "abs", "$metric0": 1},
{"$dimension0": "Jan 27, 2022", "$dimension1": "jsofj", "$metric0": 6},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 9},
{"$dimension0": "Jan 19, 2022", "$dimension1": "iefi", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vnwso", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ojjvl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "olwoe", "$metric0": 4},
{"$dimension0": "Feb 3, 2022", "$dimension1": "vgoe", "$metric0": 7},
{"$dimension0": "Feb 4, 2022", "$dimension1": "abs", "$metric0": 9},
{"$dimension0": "Feb 5, 2022", "$dimension1": "jsofj", "$metric0": 3},
{"$dimension0": "Jan 21, 2022", "$dimension1": "hfkh", "$metric0": 1},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 2},
{"$dimension0": "Feb 8, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 20, 2022", "$dimension1": "vnwso", "$metric0": 8},
{"$dimension0": "Feb 10, 2022", "$dimension1": "ojjvl", "$metric0": 15},
{"$dimension0": "Jan 18, 2022", "$dimension1": "olwoe", "$metric0": 11},
{"$dimension0": "Feb 12, 2022", "$dimension1": "vgoe", "$metric0": 16},
{"$dimension0": "Jan 31, 2022", "$dimension1": "abs", "$metric0": 12},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 13},
{"$dimension0": "Feb 15, 2022", "$dimension1": "hfkh", "$metric0": 14},
{"$dimension0": "Feb 16, 2022", "$dimension1": "iefi", "$metric0": 10},
{"$dimension0": "Feb 17, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 31, 2022", "$dimension1": "jsofj", "$metric0": 8},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 6},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "shf", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "jildo", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "kahif", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ikhqfl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "hqifkql", "$metric0": 4},
{"$dimension0": "Jan 19, 2022", "$dimension1": "guwk", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "qfhuw", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "ihqo3", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "wfoj", "$metric0": 5}
]
},
"transform": [
{
"joinaggregate": [{"op":"sum","field":"$metric0","as":"counts"}],"groupby": ["$dimension1","$dimension0"]
},
{
"sort":[{"field":"counts","order": "descending"},{"field":"$dimension1","order": "descending"}],
"window":[{"op": "row_number","as": "rownum"},{
"op": "lead","field":"$dimension1","as": "last"}],
"groupby": ["$dimension0"]
},
{
"calculate": " datum.last == datum.$dimension1 || datum.rownum==1 ? 0 : 1 ", "as": "adding"
},
{
"sort":[{"field":"rownum","order": "ascending"}],
"window":[{"op":"sum","field":"adding","as": "TOPs"}],
"groupby": ["$dimension0"]
},
{
"calculate": " datum.TOPs<3 ? 'Top 1-3' : datum.TOPs<10 ? 'Top 4-10' : datum.TOPs<20 ? 'Top 11-20' : 'Top 21-100' ", "as": "TOPid"
}
]
,
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "$dimension0",
"type": "ordinal",
"title": "$dimension0.name"},
"y": {
"field": "$metric0",
"type": "quantitative",
"axis": {"title": "$metric0.name"},
"aggregate": "sum"
},
"color":{
"field": "TOPid",
"scale": {
"domain": ["Top 1-3", "Top 4-10", "Top 11-20", "Top 20-100"],
"range": ["blue", "lightblue", "#00a", "yellow"]
}
} ,
"order": { "field": "TOPs"}
}
}
This is a Vega Lite code:
"data" is for having some sample data
"transform" does all the needed transformation
"joinaggregate": obtains the sum of all clicks by "Landing page"
next we need to generate a custom ranking TOPs for these values
"sort" / "window" : The table is sorted from the most clicks to the fewest clisk. Then the "window" is looking for the "Landing page" to be changed to the previous row.
"calculate" set a value of 1, if "Landing page" changed from previous row
"sort" / "window": sums up these values. This is the custom ranking TOPs.
"calculate" : split the custom ranking TOPs in the top groups (top 1-3, top 4-20, etc. and name it TOPid
)
"mark": Barplot
"encoding" : sets the fields for the barplot
"x", "y": definition of x and y axis
"color": here the TOPid defines the stacked plot. For testing please use TOPs
"scale": set the color of the stacked plot. For testing, please remove this.
"order": set the order, TOPs is used, because the TOPid are string names and thus not have the desired order

Game marker in a data table - vue and vuetify

I have two objects with arrays where one assembles the headers of the data table and another where it brings the status information, managing to obtain the games of the teams of these objects in vue but in all cases I have failed
new Vue({
el: '#app',
data: {
headers: {
"1": { "7": [9, 21, 44, 45, 7], "9": [21, 44, 7, 45, 9], "21": [44, 45, 7, 9, 21], "44": [7, 45, 9, 21, 44], "45": [7, 9, 21, 44, 45], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true },
"2": { "13": [17, 18, 20, 46, 13], "17": [20, 46, 13, 18, 17], "18": [17, 20, 13, 46, 18], "20": [13, 46, 17, 18, 20], "46": [13, 18, 17, 20, 46], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true },
"3": { "8": [31, 40, 42, 49, 8], "31": [40, 49, 8, 42, 31], "40": [42, 49, 8, 31, 40], "42": [8, 31, 40, 49, 42], "49": [8, 42, 31, 40, 49], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true }
},
games: {
"1": [{
"7": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"9": [],
"21": { "set1_1": 25, "set2_1": 17, "set1_2": 25, "set2_2": 15, "set1_3": 0, "set2_3": 0 },
"44": { "set1_1": 25, "set2_1": 2, "set1_2": 25, "set2_2": 19, "set1_3": 0, "set2_3": 0 },
"45": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 9,
"g": 1,
"team": { "name": "Equipo 9", "id": 9, "game_id": 0 },
"favor": 100,
"contra": 75
},
{
"7": [],
"9": { "set1_1": 22, "set2_1": 25, "set1_2": 18, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"21": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 14, "set1_3": 0, "set2_3": 0 },
"44": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"45": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 7,
"g": 1,
"team": { "name": "Equipo 7", "id": 7, "game_id": 0 },
"favor": 85,
"contra": 92
},
{
"7": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"9": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"21": [],
"44": { "set1_1": 22, "set2_1": 25, "set1_2": 19, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"45": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 14, "set1_3": 0, "set2_3": 0 },
"team_id": 21,
"g": 1,
"team": { "name": "Equipo 21", "id": 21, "game_id": 0 },
"favor": 61,
"contra": 100
},
{
"7": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 20, "set1_3": 0, "set2_3": 0 },
"9": { "set1_1": 20, "set2_1": 25, "set1_2": 15, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"21": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 15, "set2_3": 0, "set1_3": 0 },
"44": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 15, "set2_3": 0, "set1_3": 0 },
"team_id": 45,
"g": 1,
"team": { "name": "Equipo 45", "id": 45, "game_id": 0 },
"favor": 79,
"contra": 90
},
{
"7": { "set1_1": 20, "set2_1": 25, "set1_2": 22, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"9": { "set2_1": 25, "set1_1": 22, "set2_2": 25, "set1_2": 18, "set2_3": 0, "set1_3": 0 },
"21": { "set2_1": 25, "set1_1": 22, "set2_2": 25, "set1_2": 18, "set2_3": 0, "set1_3": 0 },
"44": [],
"45": { "set1_1": 22, "set2_1": 25, "set1_2": 18, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"team_id": 44,
"g": 1,
"team": { "name": "Equipo 44", "id": 44, "game_id": 0 },
"favor": 71,
"contra": 91
}
],
"2": [
{
"13": { "set1_1": 25, "set2_1": 17, "set1_2": 25, "set2_2": 15, "set1_3": 0, "set2_3": 0 },
"17": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"18": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"20": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 46,
"g": 2,
"team": { "name": "Equipo 46", "id": 46, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 22, "set2_3": 0, "set1_3": 0 },
"17": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"18": [],
"20": { "set1_1": 20, "set2_1": 25, "set1_2": 22, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"46": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 22, "set2_3": 0, "set1_3": 0 },
"team_id": 18,
"g": 2,
"team": { "name": "Equipo 18", "id": 18, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": [],
"17": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"18": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"20": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"46": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 13,
"g": 2,
"team": { "name": "Equipo 13", "id": 13, "game_id": 0 },
"favor": 32,
"contra": 50
},
{
"13": {
"set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0
},
"17": [],
"18": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"20": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"46": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 17,
"g": 2,
"team": { "name": "Equipo 17", "id": 17, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"17": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"18": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"20": [],
"46": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 20,
"g": 2,
"team": { "name": "Equipo 20", "id": 20, "game_id": 0 },
"favor": 50,
"contra": 42
}
],
"3": [
{
"8": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"31": { "set1_1": 25, "set2_1": 2, "set1_2": 25, "set2_2": 19, "set1_3": 0, "set2_3": 0 },
"40": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"42": [],
"49": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 42,
"g": 3,
"team": { "name": "Equipo 42", "id": 42, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set2_1": 15, "set1_1": 25, "set2_2": 20, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"31": { "set2_1": 15, "set1_1": 25, "set2_2": 20, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"40": [],
"42": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"49": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 20, "set1_3": 0, "set2_3": 0 },
"team_id": 40,
"g": 3,
"team": { "name": "Equipo 40", "id": 40, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"31": [],
"40": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"42": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"49": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 31,
"g": 3,
"team": { "name": "Equipo 31", "id": 31, "game_id": 0 },
"favor": 21,
"contra": 50
},
{
"8": [],
"31": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"40": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"42": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"49": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 8,
"g": 3,
"team": { "name": "Equipo 8", "id": 8, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"31": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"40": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"42": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 49,
"g": 3,
"team": { "name": "Equipo 49", "id": 49, "game_id": 0 },
"favor": 35,
"contra": 50
}
]
},
}
});
In the headers the keys 1,2,3 and then another key with an array with values ​​of the id of each team with whom he is going to play including it example: "1":{"7":[9, 21, 44, 45 , 7] 1 is the group and 7 is the team within the teams with whom he is going to play
in games we have the same values ​​1,2,3 same logic but note that when there is always an object that has an empty array example of team 7 within group 1
"7": [], but their vs who this team is going to play with come like this "9":{"set1_1":22,"set2_1":25,"set1_2":18,"set2_2":25,"set1_3 ":0,"set2_3":0},
9 is his opponent and the sets are the ones won in each example time
team 7 team 9
set1_1: 22 set1_2: 18
set2_1: 18 set2_2: 25
set1_3: 0 set2_3: 0
template:
<v-card class="mt-4" v-for="(header, keyGrupo) in headers" :key="keyGrupo">
<v-card-title> Grupo {{ keyGrupo }}</v-card-title>
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th></th>
<th v-if="header.EQUIPO">Equipo</th>
<th v-for="(grupo, index) in games[keyGrupo]" :key="index">
{{ index + 1 }} {{ grupo["team"]["name"] }} | {{ grupo['team_id'] }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(grupo, index) in games[keyGrupo]" :key="index">
<td></td>
<td>
{{ index + 1 }} {{ grupo["team"]["name"] }} {{ grupo['team_id'] }}
</td>
<td v-for="team_ids in header[grupo['team_id']]" v-if="team_ids != grupo['team_id']">
<table>
<tr>
<td >{{ team_ids }}</td>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
In the following results marker the red marked are not the correct ones, since a team cannot play against itself. So the box must be filled with a color and be as a filled box without data, I leave an example of how it should be
In this image we see the same teams with their correct results for each team they play with, also note that in each game against themselves it is in blue, and the results are for each team they played with, I need help with this please
I'm sorry I spent like an hour trying to understand your code. It is unnecessarily too complicated.
Please use classes and proper names for readability and reduce the amount of unnecessary information you provide...
Either way, I think I found your problem. But please address your code before moving on as it will greatly impact debugging further on.
Let's take the first iteration in your for loop:
<td v-for="team_ids in header[grupo['team_id']]" v-if="team_ids != grupo['team_id']">
grupo['team_id']: 9
header[9]: [21, 44, 7, 45, *9*]
header[21]: [44, 45, 7, 9, *21*]
As we go through each member in the array, as you can see in all of your headers the last member is always the team itself. This reflects in what you get in the last column.
So when you check for v-if="team_ids != grupo['team_id']
you're checking v-if="9 != 21" - which is true and you render the data.
Which, by the way I have no idea how this:
<table>
<tr>
<td >{{ team_ids }}</td>
<td></td>
</tr>
</table>
Renders what you show on screenshots. As it should only render 21 for the first column.
To fix this, you should change the order of the team id inside header to match the order of the teams inside games groups. As the data you're rendering for each team is not correct.
Your Equipo 9 vs Equipo 9 first row first column is actually rendering Equipo 9 vs Equipo 21.
Overall I recommend rethinking your data structure and code logic as this is extremely confusing.

OpenLayers v6.3.1 How to instantiate several polygon sub-objects that make up a TopoJSON object inserted in my Script with the “.readFeatures” method?

My TopoJSON object contains 3 polygonal sub-objects of which the first D2P1 appears with the geometry correctly drawn on the OSM map, but the other 2 polygons D2P2 and D2P3 are drawn distorted on the map turning into projected lines instead of their! correct geometry.
Could you help me to write my code correctly so that my 3 polygons appear correctly configured?
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.
3.1/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6
.3.1/css/ol.css" type="text/css">
<style>
/*estilo de la caja del mapa*/
#map {
width: 100%;
height: 700px;
box-shadow: 5px 5px 5px #888;
}
</style>
<style>
/*estilo de los controles del mapa*/
.ol-mouse-position {
/*estilo del control de longitud y latitud */
font-size: 12px;
font-family: Arial Black;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var osm = new ol.layer.Tile({ // capa osm (Open Street Maps)
source: new ol.source.OSM()
});
// OBJETO TopoJSON
var Y = {
"type": "Topology",
"arcs": [
[
[711, 1839],
[-37, -99],
[-3, -8],
[-2, -4],
[-3, -4],
[-2, -3],
[-1, -1],
[-2, -1],
[-3, -3],
[-2, -1],
[-4, -2],
[-1, 0],
[-3, -1],
[-24, 1],
[-12, -3],
[-10, -15],
[-1, -3],
[-5, -13],
[-2, -23],
[-1, -94],
[275, -220],
[17, -31],
[34, -52],
[117, -112],
[19, -19],
[30, -142]
],
[
[1085, 986],
[-5, -9],
[0, 0],
[-30, -40],
[-47, -48],
[-18, -16],
[-21, -16],
[-45, -61],
[-16, -16],
[-4, -4],
[-101, -125],
[-28, -6],
[-5, -7],
[-3, -2],
[-3, -1],
[-7, -16],
[-573, 431],
[-1, 1],
[-12, 5],
[-9, 3],
[-157, 6],
[16, 868],
[14, 15],
[82, 49],
[599, -158]
],
[
[711, 1839],
[315, -82],
[459, -119],
[-3, -4],
[-143, -167],
[75, -84],
[-12, -10],
[-39, -51],
[-3, -3],
[-15, -16],
[-76, -26],
[-133, -211],
[-28, -44],
[-23, -36]
],
[
[2354, 410],
[-76, -313],
[-220, 43],
[-37, -140],
[-11, 11],
[-129, 128],
[-17, 17],
[-6, 5],
[-5, 2],
[-7, 3],
[-8, 2],
[-15, 4],
[-173, 40],
[-169, 39],
[-2, 6],
[3, 33],
[-239, 651],
[-21, 32],
[-86, 93],
[133, 211],
[76, 26],
[15, 16],
[3, 3],
[39, 51],
[12, 10],
[-75, 84],
[146, 171],
[2, 1],
[16, 3],
[11, 2],
[9, 1],
[16, 2],
[20, 3],
[20, 1],
[16, 2],
[21, -2],
[14, -2],
[20, -3],
[18, -4],
[21, -8],
[24, -10],
[15, -9],
[23, -14],
[39, -28],
[32, -27],
[20, -14],
[32, -18],
[22, -10],
[23, -6],
[35, -4],
[33, -5],
[41, -1],
[74, -8],
[44, -15],
[73, -32],
[101, -41],
[169, -77],
[118, -51],
[74, -35],
[12, -5],
[-15, -66],
[-41, -179],
[-69, -252],
[-35, -26],
[-3, -9],
[-7, -15],
[-14, -48],
[-4, -57],
[-7, -16],
[-39, -41],
[-14, -22],
[-21, -44],
[-23, -3],
[-15, -1],
[-9, -2],
[-8, -6],
[-10, -16],
[-5, -11],
[0, 0]
]
],
"transform": {
"scale": [0.00001991525380089962, 0.000012987212987305721],
"translate": [-98.20093192354561, 19.06017018766488]
},
"objects": {
"D2P1": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[0, 1]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 1 P.MARIA AUXILIO DE LOS CRISTIANOS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P2": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[-1, 2]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 2 P. NUESTRA SEÑORA DE LA CANDELARIA",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P3": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[3]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 3 P. SEÑOR DE LAS MARAVILLAS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
}
}
};
/* source*/
var sourceD2P1 = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P1']
})).readFeatures(Y, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}),
});
var sourceD2P2 = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P2']
})).readFeatures(Y, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}),
});
var sourceD2P3 = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P3']
})).readFeatures(Y, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}),
});
/*LAYER.VECTOR*/
var vectorD2P1 = new ol.layer.Vector({ // ----D2P1
source: sourceD2P1,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'green',
}),
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
})
});
var vectorD2P2 = new ol.layer.Vector({ // ----D2P2
source: sourceD2P2,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'red',
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
})
})
});
var vectorD2P3 = new ol.layer.Vector({ // ----D2P3
source: sourceD2P3,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue',
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
})
});
var controls = ol.control.defaults().extend([
new ol.control.ScaleLine(), /*control del mapita lateral*/
new ol.control.Attribution(), /*control del letrero de Open Street Maps*/
new ol.control.MousePosition({ /*control de LONGITUD Y LATITUD en donde se coloque el mause*/
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326'
}),
new ol.control.OverviewMap({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
}),
/*new ol.control.ZoomSlider(),*/
new ol.control.FullScreen() /*control de expancon u cerrado del mapa*/
]);
var Mivista = new ol.View({
center: ol.proj.fromLonLat([-98.2172, 19.03464]),
zoom: 12
}) //-98.197, 19.0433 puebla
var layers = [osm,
vectorD2P1, vectorD2P2, vectorD2P3,
];
// Creacion del mapa con las 3 capas
var map = new ol.Map({
/*target------*/
target: 'map',
/*layers------*/
layers: layers,
controls: controls,
/*view--------*/
view: Mivista,
});
Mivista.setRotation(-.4999) // Rota el plano 27 grados
</script>
</body>
</html>
I LEAVE YOU THE CODE THAT ANSWERS MY QUESTION, I HOPE IT WILL BE VERY USEFUL
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.
3.1/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6
.3.1/css/ol.css" type="text/css">
<style>
/*estilo de la caja del mapa*/
#map {
width: 100%;
height: 1000px;
box-shadow: 5px 5px 5px #888;
}
</style>
<style>
/*estilo de los controles del mapa*/
.ol-mouse-position {
/*estilo del control de longitud y latitud */
font-size: 12px;
font-family: Arial Black;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var osm = new ol.layer.Tile({ // capa osm (Open Street Maps)
source: new ol.source.OSM()
});
// OBJECTO_1 TopoJSON
var geojsonObjectochentaPARROQUIAS = {
// OBJETO TopoJSON
"type": "Topology",
"arcs": [
[
[711, 1839],
[-37, -99],
[-3, -8],
[-2, -4],
[-3, -4],
[-2, -3],
[-1, -1],
[-2, -1],
[-3, -3],
[-2, -1],
[-4, -2],
[-1, 0],
[-3, -1],
[-24, 1],
[-12, -3],
[-10, -15],
[-1, -3],
[-5, -13],
[-2, -23],
[-1, -94],
[275, -220],
[17, -31],
[34, -52],
[117, -112],
[19, -19],
[30, -142]
],
[
[1085, 986],
[-5, -9],
[0, 0],
[-30, -40],
[-47, -48],
[-18, -16],
[-21, -16],
[-45, -61],
[-16, -16],
[-4, -4],
[-101, -125],
[-28, -6],
[-5, -7],
[-3, -2],
[-3, -1],
[-7, -16],
[-573, 431],
[-1, 1],
[-12, 5],
[-9, 3],
[-157, 6],
[16, 868],
[14, 15],
[82, 49],
[599, -158]
],
[
[711, 1839],
[315, -82],
[459, -119],
[-3, -4],
[-143, -167],
[75, -84],
[-12, -10],
[-39, -51],
[-3, -3],
[-15, -16],
[-76, -26],
[-133, -211],
[-28, -44],
[-23, -36]
],
[
[2354, 410],
[-76, -313],
[-220, 43],
[-37, -140],
[-11, 11],
[-129, 128],
[-17, 17],
[-6, 5],
[-5, 2],
[-7, 3],
[-8, 2],
[-15, 4],
[-173, 40],
[-169, 39],
[-2, 6],
[3, 33],
[-239, 651],
[-21, 32],
[-86, 93],
[133, 211],
[76, 26],
[15, 16],
[3, 3],
[39, 51],
[12, 10],
[-75, 84],
[146, 171],
[2, 1],
[16, 3],
[11, 2],
[9, 1],
[16, 2],
[20, 3],
[20, 1],
[16, 2],
[21, -2],
[14, -2],
[20, -3],
[18, -4],
[21, -8],
[24, -10],
[15, -9],
[23, -14],
[39, -28],
[32, -27],
[20, -14],
[32, -18],
[22, -10],
[23, -6],
[35, -4],
[33, -5],
[41, -1],
[74, -8],
[44, -15],
[73, -32],
[101, -41],
[169, -77],
[118, -51],
[74, -35],
[12, -5],
[-15, -66],
[-41, -179],
[-69, -252],
[-35, -26],
[-3, -9],
[-7, -15],
[-14, -48],
[-4, -57],
[-7, -16],
[-39, -41],
[-14, -22],
[-21, -44],
[-23, -3],
[-15, -1],
[-9, -2],
[-8, -6],
[-10, -16],
[-5, -11],
[0, 0]
]
],
"transform": {
"scale": [0.00001991525380089962, 0.000012987212987305721],
"translate": [-98.20093192354561, 19.06017018766488]
},
"objects": {
"D2P1": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[0, 1]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 1 P.MARIA AUXILIO DE LOS CRISTIANOS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P2": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[-1, 2]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 2 P. NUESTRA SEÑORA DE LA CANDELARIA",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P3": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[3]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 3 P. SEÑOR DE LAS MARAVILLAS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
}
}
};
// OBJECTO_2 TopoJSON
var geojsonObjectXXX = { // -------------------------------------------------ObjectXXX-----Municipio_TopoJSON
"type": "Topology",
"arcs": [
[
[3698, 68],
[-126, 23],
[-54, 8],
[-370, -99],
[-112, 35],
[-249, 34],
[-133, 44],
[-62, 66],
[-35, 73],
[29, 117],
[-38, 91],
[-95, 135],
[-58, 226],
[-38, 29],
[-24, 82],
[-102, 79],
[-64, 94],
[-91, 38],
[-98, 4],
[-104, -18],
[-77, -53],
[-95, -37],
[-37, -47],
[-139, -59],
[-55, -59],
[-105, -57],
[-62, -10],
[-93, 35],
[-536, -78],
[-105, 19],
[-76, 98],
[-39, 16],
[-160, 3],
[14, 30],
[59, 50],
[63, 87],
[112, 135],
[23, 71],
[-49, 67],
[-52, 37],
[-19, 0],
[-20, -17],
[-66, 9],
[-79, -8],
[-62, -14],
[-82, 14],
[-43, 3],
[-62, 63],
[-32, 81],
[9, 39],
[41, 52],
[30, 18],
[5, 40],
[13, 25],
[25, 3],
[46, -9],
[46, -1],
[38, 9],
[33, 28],
[-10, 36],
[-23, 53],
[-8, 30],
[22, 45],
[35, 110],
[2, 15],
[25, 173],
[1, 79],
[1, 142],
[-5, 202],
[28, 10],
[58, -2],
[54, 4],
[42, 16],
[13, 41],
[-94, 114],
[-39, 34],
[-6, 11],
[-8, 15],
[9, 43],
[-35, 77],
[5, 103],
[-4, 66],
[-39, 64],
[-28, 20],
[-66, 49],
[-58, 63],
[68, 31],
[18, 35],
[0, 61],
[3, 61],
[32, 55],
[38, 29],
[-80, 137],
[87, 24],
[35, 47],
[52, 23],
[96, 28],
[39, -76],
[44, -33],
[47, 42],
[30, 22],
[111, -8],
[44, 17],
[19, 62],
[28, 17],
[90, -2],
[55, 76],
[59, 91],
[20, 68],
[20, 69],
[34, 48],
[115, 70],
[27, 46],
[46, -1],
[78, -2],
[75, 71],
[92, -18],
[41, 21],
[2, 2],
[54, 90],
[68, 18],
[3, 4],
[38, 63],
[15, 45],
[51, 28],
[35, 62],
[5, 46],
[-68, 115],
[-66, 37],
[-54, 31],
[-78, 33],
[-23, 33],
[-12, 19],
[-19, -18],
[41, -92],
[-123, 10],
[-240, 19],
[39, 16],
[-23, 7],
[-98, 33],
[-27, 12],
[-37, 17],
[-144, -129],
[-16, 101],
[-113, 53],
[-45, 71],
[-186, 20],
[48, 138],
[53, -5],
[156, 112],
[-61, 124],
[-86, 32],
[52, 150],
[47, 145],
[12, 39],
[18, 39],
[2, 4],
[22, 77],
[-53, 28],
[-39, 24],
[110, 66],
[25, 15],
[14, 35],
[18, 139],
[62, -7],
[58, 85],
[91, -52],
[78, -12],
[106, -17],
[22, 86],
[5, 22],
[10, 42],
[57, 31],
[6, 36],
[-17, 37],
[-11, 8],
[-11, -5],
[1, 9],
[-29, 54],
[-4, 62],
[-3, 4],
[-18, 24],
[86, 51],
[27, -26],
[30, 34],
[15, 38],
[93, -57],
[27, 15],
[22, 15],
[8, 14],
[-5, 32],
[-15, 36],
[6, 28],
[24, 27],
[7, 42],
[62, 57],
[1, 16],
[-79, 55],
[1, 14],
[42, 25],
[21, 1],
[24, 20],
[5, 69],
[-11, 22],
[-24, 23],
[0, 13],
[4, 38],
[11, 8],
[6, 21],
[-12, 12],
[0, 16],
[15, 19],
[6, 19],
[4, 91],
[9, 10],
[-7, 19],
[14, 10],
[17, 2],
[17, -8],
[44, -7],
[23, 9],
[15, 11],
[12, 28],
[-12, 35],
[9, 8],
[-6, 101],
[10, -12],
[25, -36],
[31, 34],
[21, -30],
[3, -16],
[60, 2],
[-5, 12],
[40, -12],
[40, -17],
[37, -19],
[48, -8],
[15, 3],
[32, -3],
[29, -9],
[27, -2],
[48, 4],
[26, 2],
[29, 7],
[25, 4],
[23, 11],
[15, 10],
[22, 3],
[-1, -8],
[16, -15],
[28, -17],
[11, -10],
[3, -7],
[-3, -8],
[-18, -21],
[-3, -14],
[1, -12],
[12, -23],
[3, -10],
[-3, -11],
[-14, -11],
[-10, -14],
[-4, -20],
[4, -13],
[7, -14],
[6, -12],
[8, -24],
[15, -68],
[-1, -106],
[-5, -23],
[-2, -64],
[-5, -17],
[-16, -36],
[17, -9],
[25, -4],
[40, 4],
[40, 9],
[28, 16],
[20, 19],
[43, -1],
[16, 10],
[16, -6],
[23, -22],
[77, -31],
[123, -53],
[83, -43],
[22, -7],
[125, -52],
[210, -80],
[174, -74],
[45, -19],
[44, -14],
[61, 12],
[14, 5],
[12, 7],
[4, 5],
[9, 4],
[2, 3],
[10, 3],
[38, 27],
[3, 3],
[3, 5],
[2, 5],
[0, 4],
[5, 8],
[27, -18],
[18, -12],
[31, 42],
[39, 35],
[58, 34],
[129, 56],
[53, 30],
[34, 21],
[29, 21],
[63, 48],
[33, 14],
[20, 6],
[19, 1],
[24, 6],
[15, 6],
[19, 13],
[213, 202],
[161, 201],
[31, 79],
[22, 52],
[93, 97],
[86, 64],
[37, 63],
[112, 50],
[-11, 11],
[46, 16],
[22, 16],
[24, 28],
[12, 4],
[70, 27],
[15, 10],
[19, 7],
[16, 9],
[7, 15],
[2, 13],
[3, 9],
[7, 8],
[20, 16],
[13, 11],
[15, 9],
[11, 19],
[24, 10],
[13, 9],
[9, 1],
[11, 5],
[11, 1],
[18, -2],
[22, -2],
[44, 0],
[38, 32],
[6, 56],
[-7, 76],
[30, 76],
[93, 127],
[209, 2],
[33, -1],
[118, -5],
[120, 116],
[203, 130],
[178, 202],
[177, 151],
[141, 43],
[124, 102],
[137, 213],
[133, 176],
[127, 158],
[12, 217],
[51, 110],
[94, -27],
[65, -115],
[6, -171],
[3, -22],
[241, -231],
[-135, -147],
[-47, 16],
[-6, -79],
[-126, -184],
[-13, -90],
[-71, 70],
[-52, -46],
[1, -114],
[35, -117],
[-16, -246],
[3, -183],
[-1, -35],
[-50, -141],
[1, -113],
[-46, -302],
[57, -66],
[136, 198],
[86, 8],
[-24, -126],
[-65, -35],
[-13, -69],
[-13, -72],
[-34, -43],
[-34, -102],
[-87, 11],
[-37, -13],
[-81, -95],
[-61, -33],
[-89, -50],
[16, -78],
[-18, -75],
[-67, -46],
[-130, -61],
[-22, -37],
[43, -182],
[-22, -105],
[-42, -20],
[-27, -5],
[-24, -8],
[-37, -65],
[-65, -47],
[-70, -17],
[-103, -52],
[-74, -89],
[-6, -101],
[-36, -43],
[-46, -146],
[-97, -161],
[-22, -93],
[-31, -21],
[-46, -165],
[-54, -190],
[-4, -40],
[77, -92],
[28, -57],
[-1, 0],
[-315, 73],
[-74, 2],
[-138, 4],
[-162, -25],
[-132, -20],
[-157, -3],
[-65, -52],
[-24, -160],
[-42, -30],
[-7, -15],
[2, -29],
[21, 6],
[23, -32],
[-104, 0],
[-12, -2],
[-254, -4],
[1, -12],
[-29, 0],
[0, -25],
[-42, 4],
[-93, 9],
[2, -7],
[-7, 0],
[-27, -1],
[-23, -13],
[0, -16],
[48, -67],
[40, -5],
[38, -6],
[44, -6],
[40, -31],
[11, -8],
[39, -30],
[32, -26],
[93, -72],
[-26, -120],
[-159, -128],
[-12, -10],
[-23, -139],
[-24, -149],
[-118, -199],
[44, -84],
[-23, -60],
[-28, 22],
[-17, -29],
[-75, -43],
[-73, -9],
[-4, -18],
[-45, -53],
[51, -150],
[70, -150],
[19, -90],
[-65, -91],
[-21, -30],
[3, -345],
[-10, -48],
[14, -49],
[-29, -32],
[13, -18],
[34, -47],
[-2, -32],
[-3, -41],
[85, -25],
[62, -46],
[70, -52],
[80, -33],
[193, -65],
[80, -66],
[55, -138],
[-38, -73],
[23, -56],
[278, -196],
[92, -53],
[117, -37],
[118, -210],
[-120, -1],
[-185, -48],
[-77, 56],
[-285, -61],
[-28, -169],
[-205, -26],
[67, 172],
[-131, 34],
[-3, 73],
[-174, 7],
[-16, -66],
[-50, -23],
[-54, 33],
[-208, -45],
[-43, -70],
[-42, -3],
[-70, -39],
[-162, -442],
[-7, -315],
[-153, -388],
[-11, -185],
[-98, -58]
]
],
"transform": {
"scale": [3.750052683335661, 4.395371608583082],
"translate": [-10941343.283091985, 2137380.706460472]
},
"objects": {
"municipioDePuebla": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[0]
],
"type": "Polygon",
"properties": {
"Name": "MUNICIPIO DE PUEBLA",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
}
}
}; // Municipio_TopoJSON
/* ol.format.TopoJSON------------------------------------------------------------------------------------------------------------------*/
var sourceOchentaPARROQUIAS = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P1', 'D2P2', 'D2P3']
})).readFeatures(geojsonObjectochentaPARROQUIAS, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
});
var sourceMunicipio = new ol.source.Vector({
features: (new ol.format.TopoJSON()).readFeatures(geojsonObjectXXX)
});
/* ol.layer.Vector-----------------------------------------------------------------------------------------------------------------------*/
function generateRandomColor(seed) {
let r = Math.floor(Math.random() * 255)
let g = Math.floor(Math.random() * 255)
let b = Math.floor(Math.random() * 255)
return `rgba(${r}, ${g}, ${b}, 0.3)`
}
let features = sourceOchentaPARROQUIAS.getFeatures()
let colors = {}
features.forEach((feature, i) => {
let geom = feature.getGeometry()
colors[geom.ol_uid] = generateRandomColor(geom.ol_uid)
})
function vectorStyleFunction(feature) {
let geom = feature.getGeometry()
let id = geom.ol_uid
let style = new ol.style.Style({
fill: new ol.style.Fill({
color: colors[id]
}),
stroke: new ol.style.Stroke({
color: /*'rgba(9, 87, 140, 1)',*/ 'blue',
width: 1
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000',
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3,
}),
}),
})
// style.getText().setText(geom.ol_uid);
return style
}
var vectorLayerOchentaPARROQUIAS = new ol.layer.Vector({ // ----82 POLIGONOS
source: sourceOchentaPARROQUIAS,
style: vectorStyleFunction
});
var vectorLayerMunicipioDePuebla = new ol.layer.Vector({ // ----1 POLIGONO
source: sourceMunicipio,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.00)'
}),
stroke: new ol.style.Stroke({
color: '#09a7ee',
width: 2
}),
})
});
/* CONTROLES-----------------------------------------------------------------------------------------------------------------------*/
var controls = ol.control.defaults().extend([
new ol.control.ScaleLine(), /*control del mapita lateral*/
new ol.control.Attribution(), /*control del letrero de Open Street Maps*/
new ol.control.MousePosition({ /*control de LONGITUD Y LATITUD en donde se coloque el mause*/
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326'
}),
new ol.control.OverviewMap({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
}),
/*new ol.control.ZoomSlider(),*/
new ol.control.FullScreen() /*control de expancon u cerrado del mapa*/
]);
// Creacion del mapa con las TRES capas
var Mivista = new ol.View({
center: ol.proj.fromLonLat([-98.2172, 19.0150]),
zoom: 12
}) //-98.197, 19.0433 puebla
// pedida de capas
/*LAYERS*/
var layers = [osm, vectorLayerOchentaPARROQUIAS, vectorLayerMunicipioDePuebla];
var map = new ol.Map({
/*target------*/
target: 'map',
layers: layers,
controls: controls,
/*view--------*/
view: Mivista,
});
Mivista.setRotation(-.4999) // Rota el plano 27 grados en sentido contrario de las manecillas del reloj
</script>
</body>
</html>

Ruptela Eco4+ Device Docs not available

I am using Ruptela Device for GPS tracking. It is working fine and i am getting data from device to server in form of hexadecimal as follows:
03d30003106796f910bb01011659ae6f4100002e0f9f6711028ac208db00000500001307030500b0000200021d35bb160010
014d000000000059ae6f4200002e0f9f6711028ac208db00000500001305030501b0000200021d35c6160016014d000000000059ae6f4a00002e0f9f6711028ac208db0000050000130703
0501b0000200021d35b7160010014d000000000059ae6f5400002e0f9f6711028ac208db00000500001307030501b0000200021d35be160010014d000000000059ae6f5e00002e0f9f7811
028ac208de00000500001307030501b0000200021d3562160010014d000000000059ae6f6800002e0fa08211028a9008b5805c0500001307030501b0010200021d3603160010014d000000
020059ae6f7200002e0fa01e11028ad308d3805c0500001307030501b0000200021d35df16000f014d000000000059ae6f7c00002e0f9ffd11028bcd08d3805c0500001307030501b00002
00021d35e9160010014d000000000059ae6f8600002e0f9f6711028b5808ca600e0600000c07030501b0010200021d35a8160010014d000000000059ae6f9000002e0f9e8e11028a1c08bc
60c20600000c07030501b0000200021d35b1160010014d000000010059ae6f9a00002e0f9e3b110289ea08c4639c0600000c07030501b0000200021d3577160010014d000000010059ae6f
a400002e0f9dc6110289b808bc58ac0600021307030501b0000200021d3597160010014d000000000059ae6fae00002e0f9dd7110289fa08a9541a0700000b07030501b0000200021d35ba
160010014d000000000059ae6fb800002e0f9db611028a2c08a07ddc0700000b07030501b0000200021d35b1160010014d000000000059ae6fc200002e0f9d7311028a80089f533e070000
0b07030501b0000200021d35bd160010014d000000020059ae6fcc00002e0f9c9a11028986089162e80600001307030501b0000200021d35c0160010014d000000020059ae6fd600002e0f
9c791102888c088762e80700000b07030501b0000200021d35c5160010014d000000000059ae6fe000002e0f9cbc110288f0088d62e80700000b07030501b0000200021d353b16000e014d
000000000059ae6fea00002e0f9cee11028954088c62e80700000b07030501b0000200021d3591160010014d000000000059ae6ff400002e0f9cbc11028975088b62e80700000b07030501
b0000200021d35bc160010014d000000000059ae6ffe00002e0f9c4711028996088d62e80700000b07030501b0000200021d35ad16000d014d000000000059ae700800002e0f9cfe11028a
5e088d62e80800000b07030501b0000200021d35a4160010014d0000000000eb34
Now the main issue is How to decode this data,
Is there some docs to decode the Data into human readable form.
I hope I am not too late with the answer.
Recently, I've developed a Node.js module that will translate this data of yours into a readable JS object. You can install the package via npm, using the following command:
npm i --save ruptela
For more details, see the package: https://www.npmjs.com/package/ruptela
Here is your data as JS object:
{
data: {
packet_length: 979,
imei: 862462030713019,
command_id: 1,
payload: {
records_left: 1,
records_total: 22,
records: [{
timestamp: 1504603969,
timestamp_extension: 0,
priority: 0,
longitude: 772775783,
latitude: 285379266,
altitude: 2267,
angle: 0,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 0,
'22': 16,
'29': 13755,
'77': 0,
'176': 0
}
},
{
timestamp: 1504603970,
timestamp_extension: 0,
priority: 0,
longitude: 772775783,
latitude: 285379266,
altitude: 2267,
angle: 0,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 5,
io: {
'2': 0,
'5': 1,
'22': 22,
'29': 13766,
'77': 0,
'176': 0
}
},
{
timestamp: 1504603978,
timestamp_extension: 0,
priority: 0,
longitude: 772775783,
latitude: 285379266,
altitude: 2267,
angle: 0,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13751,
'77': 0,
'176': 0
}
},
{
timestamp: 1504603988,
timestamp_extension: 0,
priority: 0,
longitude: 772775783,
latitude: 285379266,
altitude: 2267,
angle: 0,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13758,
'77': 0,
'176': 0
}
},
{
timestamp: 1504603998,
timestamp_extension: 0,
priority: 0,
longitude: 772775800,
latitude: 285379266,
altitude: 2270,
angle: 0,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13666,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604008,
timestamp_extension: 0,
priority: 0,
longitude: 772776066,
latitude: 285379216,
altitude: 2229,
angle: 32860,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13827,
'77': 2,
'176': 1
}
},
{
timestamp: 1504604018,
timestamp_extension: 0,
priority: 0,
longitude: 772775966,
latitude: 285379283,
altitude: 2259,
angle: 32860,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 15,
'29': 13791,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604028,
timestamp_extension: 0,
priority: 0,
longitude: 772775933,
latitude: 285379533,
altitude: 2259,
angle: 32860,
satellites: 5,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13801,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604038,
timestamp_extension: 0,
priority: 0,
longitude: 772775783,
latitude: 285379416,
altitude: 2250,
angle: 24590,
satellites: 6,
speed: 0,
hdop: 12,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13736,
'77': 0,
'176': 1
}
},
{
timestamp: 1504604048,
timestamp_extension: 0,
priority: 0,
longitude: 772775566,
latitude: 285379100,
altitude: 2236,
angle: 24770,
satellites: 6,
speed: 0,
hdop: 12,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13745,
'77': 1,
'176': 0
}
},
{
timestamp: 1504604058,
timestamp_extension: 0,
priority: 0,
longitude: 772775483,
latitude: 285379050,
altitude: 2244,
angle: 25500,
satellites: 6,
speed: 0,
hdop: 12,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13687,
'77': 1,
'176': 0
}
},
{
timestamp: 1504604068,
timestamp_extension: 0,
priority: 0,
longitude: 772775366,
latitude: 285379000,
altitude: 2236,
angle: 22700,
satellites: 6,
speed: 2,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13719,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604078,
timestamp_extension: 0,
priority: 0,
longitude: 772775383,
latitude: 285379066,
altitude: 2217,
angle: 21530,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13754,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604088,
timestamp_extension: 0,
priority: 0,
longitude: 772775350,
latitude: 285379116,
altitude: 2208,
angle: 32220,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13745,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604098,
timestamp_extension: 0,
priority: 0,
longitude: 772775283,
latitude: 285379200,
altitude: 2207,
angle: 21310,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13757,
'77': 2,
'176': 0
}
},
{
timestamp: 1504604108,
timestamp_extension: 0,
priority: 0,
longitude: 772775066,
latitude: 285378950,
altitude: 2193,
angle: 25320,
satellites: 6,
speed: 0,
hdop: 19,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13760,
'77': 2,
'176': 0
}
},
{
timestamp: 1504604118,
timestamp_extension: 0,
priority: 0,
longitude: 772775033,
latitude: 285378700,
altitude: 2183,
angle: 25320,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13765,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604128,
timestamp_extension: 0,
priority: 0,
longitude: 772775100,
latitude: 285378800,
altitude: 2189,
angle: 25320,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 14,
'29': 13627,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604138,
timestamp_extension: 0,
priority: 0,
longitude: 772775150,
latitude: 285378900,
altitude: 2188,
angle: 25320,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13713,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604148,
timestamp_extension: 0,
priority: 0,
longitude: 772775100,
latitude: 285378933,
altitude: 2187,
angle: 25320,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13756,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604158,
timestamp_extension: 0,
priority: 0,
longitude: 772774983,
latitude: 285378966,
altitude: 2189,
angle: 25320,
satellites: 7,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 13,
'29': 13741,
'77': 0,
'176': 0
}
},
{
timestamp: 1504604168,
timestamp_extension: 0,
priority: 0,
longitude: 772775166,
latitude: 285379166,
altitude: 2189,
angle: 25320,
satellites: 8,
speed: 0,
hdop: 11,
event_id: 7,
io: {
'2': 0,
'5': 1,
'22': 16,
'29': 13732,
'77': 0,
'176': 0
}
}
]
},
crc: 60212
},
ack: < Buffer 00 02 64 01 13 bc >
}