Phq-report NPM

Premise HQ Report

Renders UI to visualize data of a report generated by Report Engine..

Installation

# npm
npm i phq-report

Prerequisites

phq-utility/lib/ServerAPI usage

	```jsx
	import ServerAPI from 'phq-utility/lib/ServerAPI';

	ServerAPI.setVariables({
		AppKey, Key, Host, Premise,
		$ // or jQuery
	});

	// The library needs to be deployed and the `ServerAPI` object of it requires to be initialized
	```

react version >= 16.8.6
react-select >= 3.0.0

Examples

Demo

Props

`Did?: string`

The ID of a report module (Did field value of ReportList module)

`filter?: boolean`

// TODO // Alter the name to canFilter or hasFilter Determines rendering of a filter component

`downloadable?: boolean`

Renders Export component UI

`modifier?: object`

Allows to manipulate settings of a report

// Each fields of a report has their own setting
// Sample row of field's setting
/*
{
	// TODO
	// Need description of all the attributes / fields
	Did: '',
	CascadeField: '',
	Code: '',
	Css: '',
	DefaultList: '',
	DefaultListType: '',
	Fetch: '',
	FieldName: '',
	Hide: '',
	Name: '',
	Searchable: ''
	ShareWith: ''
}
*/

// We can manipulate those values based on `FieldName`
// Suppose `FieldName` of a row is `Test` and `Name` of that row is `Hello`.
// We can use the following modifier to change it to `World`
var modifier = {
	'Test': {
        Name: 'World'
    }
}
// Dont modify `Did` or `FieldName` though, it might break proceedings (// TODO -> ensuring `Did` / `FieldName` cant be manipulated)

// Multiple fields can be influenced this way
var modifier = {
	'Test': {
		Hide: '1',
		Css: 'display: none'
	},
	'Test2': {
		Hide: '0',
		DefaultListType: 'Select'
	},
	'ExpiryDate': {
	    // NOTE
	    // If `ExpiryDate` has `Date Time` type set, setting the following `DefaultList` value as `range` will render a range picker (two date fields, one for `from` date, another for `to` date)
        DefaultList: 'range'
    }
}

`fieldExcludable?: boolean`

Renders another component under Filter component, allows the user to control the fields' inclusion in the table

`getWhereObj?: (curWhereObj: object, config: object) => whereObj: object`

Provides the current whereObj (curWhereObj) & config (determining which action triggered this, possible actions at this moment are getData & getSummation - when sum props is available).

// Sample `curWhereObj`
{
    "City": "Vancouver",
    "Status": "Conditional",
    "UpdatedDateAlt": {
        "$regex": "^(2017)(-*)(04|05|06)"
    }
}

// Sample `config`
{
    "type": "getData"
}

Return a new object if needed, which will then be used instead of previous whereObj (curWhereObj). Return nothing if the value of current whereObj is not intended to be changed.

`group?: string`

The field the table should be grouped by. Only works when used together with aggregate props.

`aggregate?: string`

The field that should be aggregated when grouping is applied. Only works when used together with group props.

`freezeColumn?: boolean`

// TODO // Change variable name to canFreezeColumn Provides an option for users to freeze columns

`changePageLength?: boolean`

// TODO // Change variable name to canChangePageLength Provides an option for users to change page length of the table

`initialFilterState?: object`

Set initial values of the filter components

// Setting select fields using `filterValues` key
{
    "filterValues": {
        "LeaseType": [
            {
                "label": "Test",
                "value": "Test"
            }
        ]
    },
}

// Setting input[type='text'] fields using `filterValues` key
{
    "filterValues": {
        "NetRent": "Test"
    },
}

// Setting date fields (regular type) using `dateTypeFieldValues` key
{
    "dateTypeFieldValues": {
        "UpdatedDateAlt": {
            "dateType": {
                "label": "Month",
                "value": "Month"
            },
            // or, { label: 'Quarter', value: 'Quarter' }
            // or, { label: 'Year', value: 'Year' }
            "month": [
                {
                    "label": "February",
                    "value": 2
                }
            ],
            "year": [
                {
                    "label": 2018,
                    "value": 2018
                }
            ],
            "quarter": [
                {
                    "label": "Q2", // "Q1" / "Q3" / "Q4"  
                    "value": "Q2"
                }
            ]
        }
    }
}


// Setting date fields (range type) using `dateTypeFieldValues` key
{
    "dateTypeFieldValues": {
        "UpdatedDateAlt": {
            "dateFrom": new Date(),
            "dateTo": new Date()
        }
    }
}


// Setting checkbox fields using `dateTypeFieldValues` key
{
    "checkBoxValues": {
        "Status": {
            "Conditional": true, // "Conditional" is the label of the option
            "Test": true
        }
    }
}


// Setting shared-field selector using `shareWithValues` key
{
    "shareWithValues": {
        "City,LeaseType": {
            // Two fields (it can be more than that) `City` & `LeaseType` separated by comma (,)
            "label": "Lease Type",
            "value": "LeaseType" // If set, value should be one of those fields (`City` | `LeaseType` in this case)
        }
    }
}



// Merging all of them in one object
{
    "checkBoxValues": {
        "Status": {
            "Conditional": true,
            "Test": true
        }
    },
    "dateTypeFieldValues": {
        "UpdatedDateAlt": {
            "dateType": {
                "label": "Month",
                "value": "Month"
            },
            "month": [
                {
                    "label": "February",
                    "value": 2
                }
            ],
            "year": [
                {
                    "label": 2018,
                    "value": 2018
                }
            ]
        }
    },
    "filterValues": {
        "NetRent": "Test",
        "City": null,
        "LeaseType": [
            {
                "label": "Test",
                "value": "Test"
            }
        ]
    },
    "shareWithValues": {
        "City,LeaseType": {
            "label": "Lease Type",
            "value": "LeaseType"
        }
    }
}

`customName?: string`

Render a different name instead of report's original name

`processData?: (curData) => data`

Altering / extending fetched data of a table and returning a new one

`getCondition?: (curCondition: object, config: object) => condition`

This is a temporary measure, might not be there in the future (or might get swapped / integrated with a different function). Kind of an alternative to getWhereObj props. Passed current condition and a config object - expecting a new condition object.

`onReportInfoLoad?: (reportInfo: Array) => void`

Triggered after basic information of the report (field structure / field settings etc.) is loaded.

`header?: React.Node`

Custom react component / node / string, to be used instead of a default component which was supposed to render the name of the report. Invalidates customName props.

`url?: string`

Instead of using all the props. sending data in the shape of url's query-string structure through url props. Helpful when url based implementation required. // TODO // Description and example