![Decorative background for title](/_next/image?url=https%3A%2F%2Fassets.rpglogs.com%2Fimg%2Fwarcraft%2Fheader-bg_sod.jpg%3Fv%3D11&w=384&q=50)
Report Components: Json Tree
The default JsonTree
Report Component is usually not the best visualization to use, but it's a great tool to use when you need to quickly view information while writing your script.
Verbose Form
You can specify component: 'JsonTree'
in the return value of getComponent
just like specifying any other component. The props
can then be set to whichever value or object you want to inspect. For example:
getComponent = () => {
return {
component: 'JsonTree',
props: {
a: {
b: 1,
c: true,
d: {
e: 'fgh'
}
},
i: [
'jk', 'l', 'mn'
]
}
}
}
Will render as:
You can use the chevrons to collapse/expand nodes to help inspect heavily nested data.
Short Form
Because JsonTree
is mostly used for debugging, it has a short form where you can simply return the value or object that you want to inspect and JsonTree
will be used as the default component. The previous example is equivalent to:
getComponent = () => {
return {
a: {
b: 1,
c: true,
d: {
e: 'fgh'
}
},
i: [
'jk', 'l', 'mn'
]
}
}
Examples
You will mostly use JsonTree
to inspect data while developing, to help understand its structure and get a quick look at what values it has before continuing to mold it for your visualization.
Inspect the First Damage Event
getComponent = () => {
return reportGroup.fights[0].events.find(x => x.type === 'damage');
}
Inspect the Current Filters
getComponent = () => {
return {
eventFilters,
fightFilters
};
}
Count All the Events in the First Fight
getComponent = () => {
return reportGroup.fights[0].events.length;
}