Tutorial

Configuration File

export const config = {
    layouts: {
        xs: {
            sections: [
                {
                    title: 'Optional Title',
                    grid: `
                        'a'
                        'b'
                        'c'
                        'd'
                        'e'
                        'f'
                        'g'
                        'h'
                    `,
                },
            ]
        },
        sm: {
            sections: [
                {
                    title: 'Optional Title',
                    collapsed: true // This section will be collapsed by default.
                    grid:`
                        'a a'
                        'b b'
                        'c d'
                        'e e'
                        'f f'
                        'g h'
                    `,
                },
            ]
        },
        md: {
            sections: [
                {
                    title: 'Optional Title',
                    grid:`
                        'a a b b'
                        'c d d d'
                        'e e e f'
                        'g g h h'
                    `,
                },
            ]
        },
        lg: {
            sections: [
                {
                    title: 'Optional Title',
                    grid:`
                        'a a b b c c'
                        'a a d d d d'
                        'a a e e f f'
                        'g g g h h h'
                    `,
                },
            ]
        },
        xl: {
            sections: [
                {
                    title: 'Optional Title',
                    grid: `
                        'a a a b b b c c'
                        'a a a b b b c c'
                        'd d e e f f g g'
                        'd d e e f f g g'
                        'd d e e f f g g'
                        'h h h h h h h h'
                    `,
                },
            ]
        }
    },
    components: () => {
        return
            b: <WidgetTest title={'Widget Table'} />,
            b: <WidgetTest title={'Widget Table'} />,
            c: <WidgetTest title={'Widget Table'} />,
            d: <WidgetTest title={'Widget Table'} />,
            e: <WidgetTest title={'Widget Table'} />,
            f: <WidgetTest title={'Widget Table'} />,
            g: <WidgetTest title={'Widget Table'} />,
            h: <WidgetTest title={'Widget Table'} />,
        }
    }
}

Layouts

Layouts are configured using the same format as grid-template-areas.

There are rules that this configuration must meet:

• Layout section must be defined ({ layouts: {} })
• Each breakpoint must be defined (XS, SM etc, e.g. { layouts: {xs: ``, sm: `` ... })
• Each breakpoint must contain a sections object containing at least one section. Section titles are optional.
• XS - Must have only 1 column defined
• SM - Must have only 2 columns defined
• MD - Must have only 4 columns defined
• LG - Must have only 6 columns defined
• XL - Must have 8 columns columns
• The component keys in the layout (a, b, c etc) must be returned by the components() function

There is validation in place for if any these rules are not met.

If you want a section to be "collapsed" by default, meaning the accordion will be toggled closed on first navigating to the dashboard, you can set collapsed: true.

Hooking up components

Hooks data flow

Hooking up widgets is done in three steps.

• Retrieving the data from an API using useResource()
• Transforming that data into something a widget can understand using useResourceBigNumber(), useResourceTable() etc
• Passing the transformed data into a Widget (<WidgetBigNumber/>, <WidgetTable/>)

Tip

The data returned by useResource() can be transformed any number of times, allowing you to use the same request for multiple widgets.

An example of how this might look is below:

const pageSpeedMostVisitedPaths = useResource({
  resource: resources.REPORT_PAGE_SPEED,
  dateDimension: fields.UPDATED,
  groupBy: fields.PATH_PATH,
  orderBy: fields.VISITS,
});

const pageSpeedMostVisitedPathsTable = useResourceTable({
    resourceData: pageSpeedMostVisitedPaths,
    fields: [
        fields.PATH_PATH,
        fields.VISITS,
        fields.OVERALL_SCORE,
        fields.FCP,
        fields.FID,
        fields.LCP,
        fields.CLS,
        fields.TIME_INTERACTIVE,
        fields.BLOCKING_TIME_DURATION,
    ],
});

<WidgetTable title={'Most visited paths'} data={pageSpeedMostVisitedPathsTable} />,

Layout file

You can use the <SectionDashboard/> component to render a section dashboard in any layout. Simply pass it a valid config object as described above.

import SectionDashboard from "../../section-dashboard/components/section-dashboard";
import { config } from "../configurations/my-dashboard-config";

const MyDashboard = () => {
  return <SectionDashboard config={config} />;
};