Frontend¶

To build your new report page, you will need to create two new files:

Create a new file in react/dash/src/layouts. You can reference another file as a starting point (such as atl-base-traffic-forecast.js)
Create a new file in react/dash/src/configurations with the same name as the file you created in the last step, and copy another file as a starting point.

Layout¶

In the file you created in /layouts:

Choose a relevant name for the class and make sure to set the class as a default export.
Make sure you are importing the correct config file that you created in /configurations

import React, { Component } from 'react';
import LayoutTableMultiGraph from './table-graph';
import { config } from '../configurations/atl-base-traffic-forecast';

class ReportATLBaseTrafficForecast extends Component {

    constructor(props){
        super(props);
        this.config = config;
    }

    componentDidMount(){
        this.props.status("datePickerStatus", "show")
        this.props.status("productSelectStatus", "show")        
    }

    render(){
        return (
            <LayoutTableGraph 
                hash={this.props.location.hash} 
                fetchProducts={this.props.fetchProducts} 
                config={this.config} 
                startDate={this.props.startDate} endDate={this.props.endDate} 
                selectedProducts={this.props.selectedProducts} 
            />
        )
    }
}

export default ReportATLBaseTrafficForecast;

Add the route to your layout in react/dash/src/layouts/report-layout.js. Import your layout class at the top of the file then add it to the list of routes:

<Route exact path='/:account/reports/channels/atl/base-traffic-forecast' render={(props) => <ReportATLBaseTrafficForecast status={this.setOwnerState} {...props} startDate={this.props.startDate} endDate={this.props.endDate} selectedProducts={this.state.selectedProducts}/>}/>

Configuration¶

Create a resource in react/dash/configurations/resources.js, for example REPORT_ATL_BASE_TRAFFIC_FORECAST:

export const REPORT_ATL_BASE_TRAFFIC_FORECAST = {
    category: 'report',
    id: 'report-atl-base-traffic-forecast',
    displayName: "Above The Line Base Traffic Forecast",
    defaultDimensions: [fields.ATL_NAME],
    dimensions: [fields.ATL_NAME, fields.REFERER],
    defaultOrderBy: fields.BASELINE_TRAFFIC
}

The defaultDimensions property sets the dimension that will appear in the breadcrumb.
The dimensions property sets all the possible dimensions, or breadcrumbs, for this report.

You can read more about resources here

You may need to create fields in react/dash/configurations/fields.js if the required fields do not exist:

export const BASELINE_TRAFFIC = {
    rawName: "baseline_traffic",
    displayName: "Baseline Traffic",
    defaultOrderDir: "desc"
}

You can read more about fields here

In the file you created in /configurations:

Change the page title
Add your resource to the resources array
Copy all the required fields into AllMetrics
Change the chartId to a relevant name, and define which metric will be displayed in the chart with the metric attribute.
Define any tabs that are required in the table with the applicable metrics inside the tabListItems array.
The fieldChildren object defines which dimensions can be navigated to by clicking the table rows, and appear in the report breadcrumbs at the top of the page. In this example, the 'atl_name' can be broken down by referer, therefore referer is a 'child field' of atl_name.

You can read more about the properties contained in the configuration file here

import * as fields from './fields';
import * as resources from './resources';

export const config = {
    pageTitle: "Above The Line",
    dateDimension: fields.VISIT_DATE,
    resources: [resources.REPORT_ATL_BASE_TRAFFIC_FORECAST],
    allMetrics: [fields.BASELINE_TRAFFIC, fields.ACTUAL_TRAFFIC, fields.INCREMENTAL_TRAFFIC, fields.BASELINE_LC_SALES, fields.ACTUAL_LC_SALES, fields.INCREMENTAL_LC_SALES, fields.INCREMENTAL_FM_SALES, fields.BASELINE_LC_REVENUE, fields.ACTUAL_LC_REVENUE, fields.INCREMENTAL_LC_REVENUE, fields.INCREMENTAL_FM_REVENUE],
    chartId: "atl-base-traffic-forecast",
    chart: {
        maxRows: 5,
        metric: fields.BASELINE_TRAFFIC,
        seriesConfig: {
            lineWidth: 1,
            animate:true,
            animation: {
                duration: 500,
            },
            type: 'areaspline',
            dataLabels: {
                enabled: false,
            },
            marker: {
                enabled: false
            },
            fillColor: {
                linearGradient: {
                    x1: 0, y1: 0, x2:0, y2: 1
                },
                stops: [
                    [0, "rgba(255,0,0,0.5)"],
                    [1, "rgba(255,0,0,0)"]
                ]   
            }

        }
    },
    table: {
        tabListItems: [
            {
                tabName: 'traffic',
                displayName: 'Traffic',
                isSelected: true,
                metrics: [fields.BASELINE_TRAFFIC, fields.ACTUAL_TRAFFIC, fields.INCREMENTAL_TRAFFIC],
            },
            {
                tabName: 'sales',
                displayName: 'Sales',
                metrics: [fields.BASELINE_LC_SALES, fields.ACTUAL_LC_SALES, fields.INCREMENTAL_LC_SALES, fields.INCREMENTAL_FM_SALES, fields.BASELINE_LC_REVENUE, fields.ACTUAL_LC_REVENUE, fields.INCREMENTAL_LC_REVENUE, fields.INCREMENTAL_FM_REVENUE],
            },
            {
                tabName: 'all',
                displayName: 'All',
                metrics: [fields.BASELINE_TRAFFIC, fields.ACTUAL_TRAFFIC, fields.INCREMENTAL_TRAFFIC, fields.BASELINE_LC_SALES, fields.ACTUAL_LC_SALES, fields.INCREMENTAL_LC_SALES, fields.INCREMENTAL_FM_SALES, fields.BASELINE_LC_REVENUE, fields.ACTUAL_LC_REVENUE, fields.INCREMENTAL_LC_REVENUE, fields.INCREMENTAL_FM_REVENUE],
            }
        ],
        fieldDataOverrides: {
        },
        fieldParentOverrides: {
        },
        fieldChildren: {
            "atl_name": {
                "default": [{
                    resource: resources.REPORT_ATL_BASE_TRAFFIC_FORECAST,
                    field: fields.REFERER
                }]
            }
        }
    },
    pagination: {
        currentPage: 1,
        currentRange: [1, 25],
        minPage: 1,
        maxPage: 100,
        totalResults: 12345,
        maxButtons: 10,
        rowDefault: 25,
        rowOptions: [{value: 10},{value: 25},{value: 50},{value: 100},{value: 200}, {value: 500}],  
    }
}

View your report in the browser to ensure the data is displayed correctly, for example http://localhost:3000/client1/reports/channels/atl/base-traffic-forecast