What Are Report Components?

Last updated: November 24, 2022

Table of Contents

Last updated: November 24, 2022

Report Components are a new, in-progress feature on Warcraft Logs Classic. With Report Components, you can build a custom dashboard within your report. This dashboard can be filled with various charts, tables, and rich text, which we call components. Behind each component is a JavaScript function that can build the relevant UI based on all the data in the report. Report Components gives you full flexibility, and is the most powerful analytic tool available.

How Can I Access Report Components?

Please note that Report Components is currently in an invite-only alpha. As development continues, we will invite more users to participate. In the meantime, you can use the new Script Pins feature, which uses the same JavaScript API as Report Components to give you more control over filtering & decorating your report data.

If you are part of the Report Components alpha then you can access your dashboard by choosing the Components view type within your report.

If you have not used Report Components before, you will be presented with an empty dashboard.

Making Our First Component

Once you are on the Components report view, you can get started by using the Edit action in the top-right of your dashboard. This will put your dashboard into edit mode and create your first component for you.

Note that nothing will be saved until you click the Save Dashboard button. The Save Dashboard button glows when there are pending unsaved changes. If you click the top-right Cancel action instead of Save Dashboard, your dashboard will revert to the state it had before you clicked Edit (which, for us right now, would be an empty dashboard).

The component that has been added is a simple "Hello world!" example component. You can drag and drop it with your mouse to another location, and you can resize it using the bottom-right resize handle.

When the dashboard is in edit mode, hovering over a component will display the component actions as buttons in the top-right. Use the Edit button on the component to start editing it.

This will present you with the component's sandbox. On the left of the sandbox is the code editor. This code editor is an embedded version of Visual Studio Code, complete with syntax highlighting, intellisense, and keyboard shortcuts.

Here you can see the code behind our component:

getComponent = () => {
  return {
    component: 'EnhancedMarkdown',
    props: {
      content: 'Hello world!'
    }
  }
}

This is a very simple component. It doesn't look at any data in the report or do any logic. It simply returns an EnhancedMarkdown component, with the content of 'Hello world!'.

Let's make a change. Update the content text to 'Hello ' + reportGroup.fights[0].name:

getComponent = () => {
  return {
    component: 'EnhancedMarkdown',
    props: {
      content: 'Hello ' + reportGroup.fights[0].name
    }
  }
}

This will now look at the first fight inside the report group and add its name to our message.

When you are looking at a single report, the report group simply contains the fights from that report. If you are looking at multiple reports using the Multiple Report Analysis feature, then the report group contains all the fights across all the reports being analyzed.

To test our change and view a preview of our component, use the Run button below the code editor.

The right-hand side of the sandbox will now show a preview of what our component will look like. If everything is working it should present a greeting to the encounter name of the first fight in the report.

To preview our change inside our dashboard, use the Continue button below the preview.

You will be returned to the dashboard in edit mode and should see that the component has been updated with our changes.

Note that our work is not quite done yet. If we were to click Cancel, our dashboard would revert to the state it had before we made any changes. Instead, we should click the Save Dashboard button to persist our changes. This will save the dashboard for our user so that we can re-use it on any other report we visit. It also puts the dashboard back into view mode.

Learn More About Report Components

In the above example, we made a simple change to a single component, and barely scratched the surface of the power within Report Components. Continue reading to learn how to build more complicated dashboards and make the most of the sophisticated analysis available.