arena-plugin-reports

A Redux plugin for compensation.

Usage no npm install needed!

<script type="module">
  import arenaPluginReports from 'https://cdn.skypack.dev/arena-plugin-reports';
</script>

README

arena-plugin-reports

Installation

npm i arena-plugin-reports

Example

import Reports from 'arena-plugin-reports'

return (
  <div>
    <Reports
      bannerRows={bannerRows}
      hostCountry={hostCountry}
      reportTemplate={reportTemplate}
      tableRows={tableRows}
    />
  </div>
)

Component

arena-plugin-reports consists of one component.

<Reports />

bannerRows: array

required

Example:

[
  {
    "id": 1,
    "name": "Compensation_TotalAllowances",
    "title": "Total Allowances",
    "values": {
      "2017": 10768,
      "2018": 10768
    },
    "total": 21536,
    "currencyCode": "CAD"
  }
]

tableRows: array

required

Example:

[
  {
    "id": 1,
    "name": "Compensation_BaseSalary",
    "title": "Base Salary",
    "values": {
      "2017": 161520,
      "2018": 161520
    },
    "total": 323040,
    "currencyCode": "CAD"
  }
]

reportTemplate: object

required

Example:

{
  "summary": [
    {
      "id": "Summary",
      "name": "Summary",
      "rows": [
        {
          "rowName": "Compensation_TotalAllowances",
          "collapsed": false
        }
      ]
    }
  ],
  "detail": [
    {
      "id": "Base_Compensation",
      "name": "Base Compensation",
      "rows": [
        {
          "rowName": "Compensation_BaseSalary",
          "collapsed": false
        }
      ]
    }
  ]
}

hostCountry: string

required

The ISO code used to display the country banner image at the top of the Report.

links: array

default: []

Displays links in the top right hand corner of report.

Example:

[
  {
    action: () => downloadReport('Details'),
    icon: 'download',
    text: 'Details',
  },
  {
    action: () => downloadReport('Summary'),
    icon: 'download',
    text: 'Summary',
  },
]

buttons: array

default: []

Displays buttons on the bottom of report.

Example:

[
  {
    action: () => edit(),
    text: 'Edit',
  },
  {
    action: () => startNewMove(),
    text: 'Start new move',
  },
]