Overview

We have built the Cubed frontend using the React JavaScript library. React is a flexible library which allows us to create small, reusable components for building the user interface.

Structure

The react/dash/src folder contains the frontend structure. Components are split into folders depending on their role in the frontend.

/components

The components folder contains individual components used as the building blocks for the layout of the frontend pages.

/configurations

The configuration files contain configuration information for the report pages. The configuration defines which resources and metrics should be displayed in the report graphs and tables. Each individual resource is defined in the /configurations/resources.js file, and is represented by an object containing information about that resources and its required fields.

Resources

Here is an example of a resource:

export const REPORT_MCS_CHANNEL = {
    category: 'report',
    id: 'report-mcs-channel',
    displayName: "Channels",
    defaultDimensions: [fields.REFERER],
    dimensions: [fields.REFERER, fields.SUBCHANNEL],
    defaultOrderBy: fields.FM_SALES,
}

This resource appears on the frontend on the Attribution -> Channel Performance page.

Fields

Here is an example of a field:

export const REFERER = {
    id: "referer",
    rawName: "referer",
    lookupTerm: "name",
    displayName: "Channel Name",
    defaultOrderDir: "asc",
    isDimension: true,
}

The rawName property directly relates to the database column.

And the id property needs a unique value. Otherwise it will fail the playwright testing on the pipline. It is usually used the simple value of the field name. For an example REFERER → referer

/layouts

Layout files can represent individual report pages, or parts of the overall layout, such as the navigation bar, charts and tables.

The LayoutTableGraph component provides the layout for most of the report pages.