Components Properties
The Railz Visualizations SDK comes packed with a set of component properties that allow you to build a custom-looking dashboard that meets your product needs. Learn more about each component's properties below.
Component Filter Parameters
connectionId
Can't be used to filter at the moment but will be available in a future release when the APIs are updated.startDate and endDate
Note that the difference between your start date and end date should be a maximum of 12 periods
For example:
- Your filter does not contain
reportFrequency
- difference between startDate and endDate should be 12 months.- Your filter contains
reportFrequency
ofmonth
- difference between startDate and endDate should be 12 months.- Your filter contains
reportFrequency of
quarter` - difference between startDate and endDate should be 12 quarters.- Your filter contains
reportFrequency
ofyear
- difference between startDate and endDate should be 12 years.
Railz Visualizations
Property | Type | Description | Required |
---|---|---|---|
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 | Type of chart to render. | true |
filter.businessName | string | Unique business name identifier. | true if |
filter.serviceName | enum | Name of accounting service platform. | true if |
filter.connectionId | string | Unique connection identifier. | true if businessName and serviceName are not passed |
filter.reportFrequency | enum | The snapshot of reporting periods. | true only for cashflowStatements, balanceSheets, incomeStatements |
filter.startDate | string | Date from which the data begins. | true |
filter.endDate | string | Date from which the data ends. | true |
options | object | A component options object for styling components. | false |
Railz Statements Chart
Property | Type | Description | Required |
---|---|---|---|
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 | Type of financial statement. | true |
filter.businessName | string | Unique business name identifier. | true if |
filter.serviceName | enum | Name of accounting service platform. | true if |
filter.connectionId | string | Unique Connection identifier. | true if businessName and serviceName are not passed |
filter.reportFrequency | enum | The snapshot of reporting periods. | true |
filter.startDate | string | Date from which the report data begins. | true |
filter.endDate | string | Date from which the report data ends. | true |
options | object | A component options object for styling components. | false |
Railz Transactions Control
Property | Type | Description | Required |
---|---|---|---|
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 | Type of transaction. | true |
filter.businessName | string | Unique business name identifier. | true if |
filter.serviceName | enum | Name of accounting service platform. | true if |
filter.connectionId | string | Unique connection identifier. | true if businessName and serviceName are not passed |
filter.startDate | string | Date from which the transactions begins. | true |
filter.endDate | string | Date from which the transactions ends. | true |
options | object | A component options object for styling components. | false |
Railz Progress Bar
Property | Type | Description | Required | Default |
---|---|---|---|---|
reportType | enum | 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 ( | false | color: #424242; |
options.titleValueStyle | CSSObject | Object based on HTML stylings for the bar title amount. | false | color: #424242; |
options.subTitle1Style | CSSObject | Object based on HTML stylings for the bar first subtitle(Paid value). | false | color: #424242; |
options.subTitleValue1Style | CSSObject | Object based on HTML stylings for the bar first subtitle amount. | false | color: #1e313b; |
options.subTitle2Style | CSSObject | Object based on HTML stylings for the bar first subtitle (Overdue value). | false | color: #424242; |
options.subTitleValue2Style | CSSObject | Object based on HTML stylings for the bar second subtitle amount. | false | color: #1e313b; |
options.barStyle | CSSObject | Object based on HTML stylings for the bar. | false | height: 16px; |
options.progressStyle | CSSObject | Object based on HTML stylings for the bar’s progress indicator. | false | display: block; |
Railz Loading Indicator
Property | Type | Description | Required | Default |
---|---|---|---|---|
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 |
width | string | width of the loading indicator. | false | 48px |
height | string | height of the loading indicator. | false | 48px |
Railz Error Image
Property | Type | Description | Required | Default |
---|---|---|---|---|
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 |
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 |
width | string | Width of the error indicator. | false | 202, 204, 404 - 48px |
height | string | Height of the error indicator. | false | 202, 204, 404 - 56px |
Component Options Object
Name | Type | Default | Description | Required |
---|---|---|---|---|
container | object | An object for styling the bounding box of the chart. | false | |
container.style | CSSObject | General Style Railz Statements Charts Railz Transactions Control | 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; | 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 | false |
chart.label | Highcharts.CSSObject | Object for styling the chart labels. | false | |
chart.legend | Highcharts.CSSObject | Object for styling the chart legends. | false | |
chart.width | null, number, string | null | false | |
chart.height | null, number, string | null | false | |
bar | object | Object to cover the styling options of the progress bar | false | |
bar.titleStyle | CSSObject | color: #424242; | Object based on HTML stylings for the bar title ( | false |
bar.titleValueStyle | CSSObject | color: #424242; | Object based on HTML stylings for the bar title amount. | false |
bar.subTitle1Style | CSSObject | color: #424242; | Object based on HTML stylings for the bar first subtitle (Paid value). | false |
bar.subTitleValue1Style | CSSObject | font-weight: 600; | Object based on HTML stylings for the bar first subtitle amount. | false |
bar.subTitle2Style | CSSObject | color: #424242; | Object based on HTML stylings for the bar first subtitle(Overdue value). | false |
bar.subTitleValue2Style | CSSObject | font-weight: 600; | Object based on HTML stylings for the bar second subtitle amount. | false |
bar.barStyle | CSSObject | height: 16px; | Object based on HTML stylings for the bar. | false |
bar.progressStyle | CSSObject | display: block; | 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 | 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 | Object based on HTML stylings for the text displayed in the error indicator. | false |
errorIndicator.width | string | 202, 204, 404 - 48px | Width of the error indicator. | |
errorIndicator.height | string | 202, 204, 404 - 56px | Height of the error indicator. |
Chart Colors
Trendline Color
Current version of Railz Visualizations does not allow you to modify the trendline color.
Report Type | Colors |
---|---|
balanceSheets | Current assets: #1D7043 |
incomeStatements | Income: #006037 |
cashflowStatements | Operating activities: #009BBD |
Updated 28 days ago