Components Properties

configuration

object

Object containing important information for authentication. If changed, component is re-rendered.

true

configuration.token

string

To authenticate your application, specify an access token. The Railz Authentication API endpoint can be used to get this access token.

true

configuration.debug

boolean

Serves as an indication to log warnings and errors if true.

false

filter

object

Filters needed to display a chart, they are specific to a report type. The filter object should only be changed if you are ready to re-render the component.

true

filter.reportType

enum
invoices, bills, cashflowStatements, balanceSheets, incomeStatements

Type of chart to render.

true

filter.businessName

string

Unique business name identifier.

true if connectionId is not passed

filter.serviceName

enum
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

Name of accounting service platform.

true if connectionId is not passed

filter.connectionId
(not available)

string

Unique connection identifier.

true if businessName and serviceName are not passed

filter.reportFrequency

enum
month, quarter, year

The snapshot of reporting periods.

true only for cashflowStatements, balanceSheets, incomeStatements

filter.startDate

string
YYYY-MM-DD

Date from which the data begins.

true

filter.endDate

string
YYYY-MM-DD

Date from which the data ends.
Difference between the start and end date should be a maximum of 12 months.

true

options

object

A component options object for styling components.

false

configuration

object

Object containing important information for authentication. If changed, component is re-rendered.

true

configuration.token

string

To authenticate your application, specify an access token. The Railz Authentication API endpoint can be used to get this access token.

true

filter

object

Filters needed to display a chart, they are specific to a report type. The filter object should only be changed if you are ready to re-render the component.

true

filter.reportType

enum
cashflowStatements, balanceSheets, incomeStatements

Type of financial statement.

true

filter.businessName

string

Unique business name identifier.

true if connectionId is not passed

filter.serviceName

enum
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

Name of accounting service platform.

true if connectionId is not passed

filter.connectionId
(not available)

string

Unique Connection identifier.

true if businessName and serviceName are not passed

filter.reportFrequency

enum
month, quarter, year

The snapshot of reporting periods.

true

filter.startDate

string
YYYY-MM-DD

Date from which the report data begins.

true

filter.endDate

string
YYYY-MM-DD

Date from which the report data ends.
Difference between the start and end date should be a maximum of 12 months.

true

options

object

A component options object for styling components.

false

configuration

object

object containing important information for authentication.

true

configuration.token

string

To authenticate your application, specify an access token. The Railz Authentication API endpoint can be used to get this access token.

true

filter

object

Filters needed to display a chart, they are specific to a report type, The filter object should only be changed if you are ready to re-render the component.

true

filter.reportType

enum
invoices, bills

Type of transaction.

true

filter.businessName

string

Unique business name identifier.

true if connectionId is not passed

filter.serviceName

enum
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

Name of accounting service platform.

true if connectionId is not passed

filter.connectionId
(not available)

string

Unique connection identifier.

true if businessName and serviceName are not passed

filter.startDate

string
YYYY-MM-DD

Date from which the transactions begins.

true

filter.endDate

string
YYYY-MM-DD

Date from which the transactions ends.
Difference between the start and end date should be a maximum of 12 months.

true

options

object

A component options object for styling components.

false

reportType

enum
invoices, bills

Type of transaction.

false

empty

unpaidAmount

number

For unpaid amount of an invoice or bill.

true

paidAmount

number

For paid amount of an invoice or bill.

true

overdueAmount

number

For overdue amount of an invoice or bill.

false

0

options

object

For whitelabeling styling the progress bar.

false

options.titleStyle

CSSObject

Object based on HTML stylings for the bar title (
Total unpaid value).

false

color: #424242;
fontSize: 14px; fontWeight: 500;

options.titleValueStyle

CSSObject

Object based on HTML stylings for the bar title amount.

false

color: #424242;
fontSize: 14px;
fontWeight: 600;

options.subTitle1Style

CSSObject

Object based on HTML stylings for the bar first subtitle(Paid value).

false

color: #424242;
fontSize: 12px; fontWeight: 500;

options.subTitleValue1Style

CSSObject

Object based on HTML stylings for the bar first subtitle amount.

false

color: #1e313b;
font-weight: 600;
font-size: 14px;

options.subTitle2Style

CSSObject

Object based on HTML stylings for the bar first subtitle (Overdue value).

false

color: #424242;
fontSize: 12px; fontWeight: 500;

options.subTitleValue2Style

CSSObject

Object based on HTML stylings for the bar second subtitle amount.

false

color: #1e313b;
font-weight: 600;
font-size: 14px;

options.barStyle

CSSObject

Object based on HTML stylings for the bar.

false

height: 16px;
background: #f5f5f5;
borderRadius: 3px;

options.progressStyle

CSSObject

Object based on HTML stylings for the bar’s progress indicator.

false

display: block;
height: 100%;
background: #ffd738;
borderRadius: 3px 0 0 3px;

loadingText

string

Text to display at the bottom of the loading indicator.

false

fillColor

string

Fill color of the loading indicator.

false

#00884f

textStyle

CSSObject

Object based on HTML stylings for the text displayed with the loading indicator.

false

color: #000000
font-size: 12px;

width

string

width of the loading indicator.

false

48px

height

string

height of the loading indicator.

false

48px

statusCode

number

Status code based on HTTP Response codes.

false

text

string

Text to display at the bottom of the svg image.

false

202 - Data currently unavailable
204 - No data available
404 - No data available
500 - Oops, something went wrong
No Code - Oops, something went wrong

fillColor

string

Fill color of the svg image representing a status code.

false

#949494

textStyle

CSSObject

Object based on HTML stylings for the text displayed with the error indicator.

false

color: #424242
font-size: 14px;

width

string

Width of the error indicator.

false

202, 204, 404 - 48px
500 - 88px

height

string

Height of the error indicator.

false

202, 204, 404 - 56px
500 - 64px

container

object

An object for styling the bounding box of the chart.

false

container.style

CSSObject

General Style
display: flex;
padding: 16px;
position: relative;
border: 1px solid #eee;
border-radius: 7px;
flex-direction: column;
justify-content: space-between;
width: auto;

Railz Statements Charts
height: 360px;

Railz Transactions Control
height: 168px;

CSS Object styles for the container.

false

title

object

An object to customize the title section of the container.

false

title.style

CSSObject

color: #003032;
font-size: 18px;
font-weight: 600;
margin: 0;
padding: 0;
text-align: left;

CSS Object styles for the title.

false

chart

object

An object to customize the charts, it is only used when your report type is cashflowStatements, balanceSheets, incomeStatements

false

chart.colors

array

See default table below

List of color strings for the chart, length is dependant on chart type.

false

chart.fontFamily

string

See default here

Font family of the chart.

false

chart.backgroundColor

string

#FFFFFF

Background color of the chart
Schema.

false

chart.label

Highcharts.CSSObject

Default

Object for styling the chart labels.

false

chart.legend

Highcharts.CSSObject

Default

Object for styling the chart legends.

false

chart.width

null, number, string

null

Details.

false

chart.height

null, number, string

null

Details.

false

bar

object

Object to cover the styling options of the progress bar

false

bar.titleStyle

CSSObject

color: #424242;
font-size: 14px;
font-weight: 500;

Object based on HTML stylings for the bar title (
Total unpaid value).

false

bar.titleValueStyle

CSSObject

color: #424242;
font-size: 14px;
font-weight: 600;

Object based on HTML stylings for the bar title amount.

false

bar.subTitle1Style

CSSObject

color: #424242;
font-size: 12px;
font-weight: 500;

Object based on HTML stylings for the bar first subtitle (Paid value).

false

bar.subTitleValue1Style

CSSObject

font-weight: 600;
font-size: 14px;
color: #1e313b;

Object based on HTML stylings for the bar first subtitle amount.

false

bar.subTitle2Style

CSSObject

color: #424242;
font-size: 12px;
font-weight: 500;
text-align: right;

Object based on HTML stylings for the bar first subtitle(Overdue value).

false

bar.subTitleValue2Style

CSSObject

font-weight: 600;
font-size: 14px;
color: #1e313b;

Object based on HTML stylings for the bar second subtitle amount.

false

bar.barStyle

CSSObject

height: 16px;
background: #f5f5f5;
border-radius: 3px;

Object based on HTML stylings for the bar.

false

bar.progressStyle

CSSObject

display: block;
height: 100%;
background: #FFD738;
border-radius: 3px 0 0 3px;

Object based on HTML stylings for the bar’s progress indicator.

false

loadingIndicator

object

Object for styling the loading indicator.

false

loadingIndicator.fillColor

string

#00884f

Color for the loading indicator.

false

loadingIndicator.textStyle

CSSObject

color: #000000
font-size: 12px

Object based on HTML stylings for the text displayed with the loading indicator.

false

loadingIndicator.width

string

48px

Width of the loading indicator.

loadingIndicator.height

string

48px

Height of the loading indicator.

errorIndicator

object

Object for styling the error indicator svg and text.

false

errorIndicator.fillColor

string

#949494

Color for the error indicator svg.

false

errorIndicator.textStyle

string

color: #424242
font-size: 14px

Object based on HTML stylings for the text displayed in the error indicator.

false

errorIndicator.width

string

202, 204, 404 - 48px
500 - 88px

Width of the error indicator.

errorIndicator.height

string

202, 204, 404 - 56px
500 - 64px

Height of the error indicator.

balanceSheets

Current assets: #1D7043
Current liabilities: #F06C3A
Non-current assets: #30A665
Non-current liabilities: #B30000

incomeStatements

Income: #006037
Expenses: #F06C3A
Cost of Goods Sold: #B30000
Other Income: #003032
Other Expenses: #38C076

cashflowStatements

Operating activities: #009BBD
Financing Activities: #F06C3A
Investing Activities: #003032