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;
}