Dash

Introduction

A dash represents a dynamically rendered card for presentation purposes such as reports and dashboards.

Base Definition

Just enough to register your dash.

uiFields are optional fields that users can use to modify the result of the rendered dash. Like a select list of months. Changing a uiField will trigger a rerender. They represent a frequently used settings.

configFields are optional fields to configure your dash and represent a setting that is not frequently changed.

const dashType = {
    title: "My Custom Dash Type",
    description: "This is dash shows a summary of payments",
    namespace: "my_custom_dash_type",
    configFields: [],
    uiFields: [],
    callbacks: {
    }
}

Example of a table

An example of how to generate a table report.

const dashType = {
    title: "My Custom Dash Type",
    description: "This is dash shows a summary of payments",
    namespace: "my_custom_dash_type",
    configFields: [],
    uiFields: [],
    callbacks: {
        render: async function(dashInstance, uiValues) {
            
            const rows = []

            return {
                type: 'table',
                content: {
                    caption: 'Payments',
                    'no-data-text': 'No payments found',
                    'hide-default-footer': true,
                    headers: [
                        {
                            text:  'Payment method',
                            value: 'payment_method'
                        },
                        {
                            text:  'Currency',
                            value: 'currency'
                        },
                        {
                            text:  'Count',
                            value: 'count'
                        },
                        {
                            text:  'Amount',
                            value: 'amount',
                            align: 'right'
                        }
                    ],
                    rows: rows
                }
            }
        }
    }
}

Example of a Google Chart

An example of a chart showing a summary of payments over time.

const dashType = {
    namespace: 'payments_over_time',
    title: 'Payments over time',
    description: 'A line chart of payments over time',
       callbacks: {
        render: async function(dashInstance, uiValues) {

            if(appContext === null) {
                return 'Unable to run query'
            }

            const granularity = dashInstance.data.granularity || 'days'

            const now = new Date()

            let year = now.getFullYear()
            let month = now.getMonth()

            if(uiValues && uiValues.month_and_year) {
                const monthYearSelected = uiValues.month_and_year.split('_')
                year = monthYearSelected[0]
                month = monthYearSelected[1]
            }

            const firstDay = new Date(year, month, 1)
            const lastDay = new Date(year, month, 31, 23, 59, 59)

            return getPaymentStats(firstDay.getTime() / 1000, lastDay.getTime() / 1000, null).then(paymentStats => {

                let chartData = [
                    ['Hours', 'Revenue']
                ]

                Object.keys(paymentStats).forEach(currency => {
                    let currencyStats = paymentStats[currency]

                    Object.keys(currencyStats[granularity]).forEach(entry => {
                        let entryStats = currencyStats[granularity][entry]
                        chartData.push([entry, entryStats.totalAmount])
                    })

	            })

                return {
                    type: 'gchart',
                    content: {
                        chartType: 'line',
                        chartData: chartData
                    }
                }
            })
        },
        alterUIFields: async function(uiFields) {

            const now = new Date()

            let current = new Date('2015', 1)

            const dateOptions = []

            while(current.getTime() < now.getTime()) {
                const month = current.toLocaleString('default', { month: 'long' })
                dateOptions.push({
                    key: current.getFullYear() + '_' + current.getMonth(),
                    label: month + ' ' + current.getFullYear()
                })

                current = current.addMonths(1)
            }

            uiFields[0].options = dateOptions.reverse()

            //uiFields[0]
            
            return uiFields
        }
    },
    uiFields: [
        {
            key: 'month_and_year',
            type: 'select',
            label: 'Month',
            options: [],
            cols: 6
        },
        {
            key: 'channel',
            type: 'select',
            label: 'Channel',
            options: [],
            cols: 6
        }
    ],
    configFields: [
        {
            key: 'granilurity',
            type: 'select',
            label: 'Granularity',
            options: [
                {
                    key: 'hours',
                    label: 'Hours'
                },
                {
                    key: 'days',
                    label: 'Days'
                },
                {
                    key: 'weeks',
                    label: 'Weeks'
                }
            ]
        }
    ]
}

Registration

module.exports = {
    app : app,
    dashTypes: [
        dashType
    ]
}