Visualization Components

Reference to the Visualizations SDK components.

The Railz Visualizations SDK contains a set of components that you can use to build a dashboard that matches your brand's look and feel:

  • Railz Visualizations
  • Railz Statements Chart
  • Railz Transactions Control
  • Railz Progress Bar
  • Railz Loading Indicator
  • Railz Error Image

Railz Visualizations

The Railz Visualizations component allows you to choose between the Railz Statements Chart and Railz Transactions Control based on the reportType parameter.

📘

Use this component if you are not sure what component you need for your report type.

Examples

<railz-visualizations [configuration]='{
    "token": "your token..."
}' [filter]='{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "sandbox"
}'></railz-visualizations>
<RailzVisualizations configuration={{
    "token": "your token..."
}} filter={{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "sandbox"
}} />
<railz-visualizations configuration='{
    "token": "your token..."
}' filter='{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "sandbox"
}'></railz-visualizations>

🚧

Web Component parameters should be strings and not an object.

Properties

See components properties for instructions on the specific properties you can use for each report type.

Railz Statements Chart

The Railz Statements Chart component is used to display a Stacked Bar line chart for balance sheets (balanceSheets), income statements (incomeStatements) and cashflow statements (cashflowStatements)
based on the reportType parameter.

<railz-statements-chart [configuration]='{
    "token": "your token..."
}' [filter]='{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "balanceSheets",
    "serviceName": "sandbox",
    "reportFrequency": "month"
}'></railz-statements-chart>
<RailzStatementsChart configuration={{
    "token": "your token..."
}} filter={{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "reportFrequency": "month",
    "reportType": "balanceSheets",
    "businessName": "your business name...",
    "serviceName": "quickbooks"
}} />
<railz-statements-chart configuration='{
    "token": "your token..."
}' filter='{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "balanceSheets",
    "serviceName": "sandbox",
    "reportFrequency": "month"
}'></railz-statements-chart>

Output

Railz Visualizations SDK - Railz Statements Chart Component. Click to Expand.Railz Visualizations SDK - Railz Statements Chart Component. Click to Expand.

Railz Visualizations SDK - Railz Statements Chart Component. Click to Expand.

Customizations

<RailzStatementsChart configuration={{
    "token": "your token..."
}} filter={{
    "startDate": "2021-01-01",
    "endDate": "2021-12-31",
    "reportFrequency": "month",
    "reportType": "balanceSheets",
    "businessName": "your business name...",
    "serviceName": "sandbox"
}} options={{"container":{"style":{"border":0,"backgroundColor":"black","borderRadius":"0"}},"title":{"style":{"color":"#cccccc","fontSize":"24px"},"text":"Balance Sheet"},"chart":{"colors":["#ff0000","#ff6900","#d34000","#ff4545","#cccccc"],"fontFamily":"Inter","backgroundColor":"black","label":{"style":{"fontFamily":"Inter","fontSize":"12px","color":"#ffffff"}},"legend":{"itemStyle":{"fontFamily":"Inter","fontSize":"16px","color":"#cccccc"}}},"loadingIndicator":{"fillColor":"#4DAE37","textStyle":{color: "#4DAE37"}},"errorIndicator":{"fillColor":"#FF7575", "textStyle":{color: "#FF7575"}}}} />
Railz Visualizations SDK - Railz Statements Chart Component Customized. Click to Expand.Railz Visualizations SDK - Railz Statements Chart Component Customized. Click to Expand.

Railz Visualizations SDK - Railz Statements Chart Component Customized. Click to Expand.

📘

See Railz Statements Chart component properties for instructions on the specific properties you can use.

Railz Transactions Control

The Railz Transactions Control component is used to display a Progress Control for invoices and bills based on the reportType parameter. It uses the Railz Progress Bar component.

<railz-transactions-control [configuration]='{
    "token": "your token..."
}' [filter]='{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "quickbooks"
}'></railz-transactions-control>
<RailzTransactionsControl configuration={{
    "token": "your token..."
}} filter={{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "quickbooks"
}} />
<railz-transactions-control configuration='{
    "token": "your token..."
}' filter='{
    "startDate": "2021-03-01",
    "endDate": "2021-12-31",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "sandbox"
}'></railz-transactions-control>

Output

Railz Visualizations SDK - Railz Transactions Control Component. Click to Expand.Railz Visualizations SDK - Railz Transactions Control Component. Click to Expand.

Railz Visualizations SDK - Railz Transactions Control Component. Click to Expand.

Customizations

<RailzVisualizations configuration={{
    "token": "your token..."
}} filter={{
    "startDate": "2021-01-01",
    "endDate": "2022-01-01",
    "businessName": "your business name...",
    "reportType": "bills",
    "serviceName": "sandbox"
}} options={{"container":{"style":{"border":0,"backgroundColor":"black","borderRadius":"0"}},"title":{"style":{"color":"#cccccc","fontSize":"24px"},"text":"Balance Sheet"},"bar":{"titleStyle":{"color":"#ffffff"},"titleValueStyle":{"color":"#ffffff"},"subTitle1Style":{"color":"#ffffff"},"subTitleValue1Style":{"color":"#ffffff"},"subTitle2Style":{"color":"#ffffff"},"subTitleValue2Style":{"color":"#ffffff"},"barStyle":{"background":"#cdf8c4","borderRadius":"5px"},"progressStyle":{"background":"#2e6521","borderRadius":"5px"}},"loadingIndicator":{"fillColor":"#4DAE37", "textStyle":{color: "#4DAE37"}},"errorIndicator":{"fillColor":"#FF7575", "textStyle":{color: "#FF7575"}}}} />
Railz Visualizations SDK - Railz Transactions Control Component Customized. Click to Expand.Railz Visualizations SDK - Railz Transactions Control Component Customized. Click to Expand.

Railz Visualizations SDK - Railz Transactions Control Component Customized. Click to Expand.

📘

See Railz Transactions Control component properties for instructions on the specific properties you can use.

Railz Progress Bar

The Railz Progress Bar component is used to visualize the progress of a transaction, it can be modified to fit your needs.

Examples

<railz-progress-bar reportType="invoices"
  [overdueAmount]="2000" [unpaidAmount]="12000" [paidAmount]="15000"></railz-progress-bar>
<RailzProgressBar reportType="invoices" 
  unpaidAmount={15000} paidAmount={15000} overdueAmount={12000}/>
<railz-progress-bar reportType="invoices"
  overdueAmount="2000" unpaidAmount="12000" paidAmount="15000"></railz-progress-bar>

Output

Railz Visualizations SDK - Railz Progress Bar Component. Click to Expand.Railz Visualizations SDK - Railz Progress Bar Component. Click to Expand.

Railz Visualizations SDK - Railz Progress Bar Component. Click to Expand.

📘

See Railz Progress Bar component properties for instructions on the specific properties you can use.

Railz Loading Indicator

The Railz Loading Indicator component is a set of basic loading animations that indicates the processing progress.

<railz-loading></railz-loading>
<RailzLoading/>
<railz-loading></railz-loading>

Output

Customizations

Include your Custom Text

<railz-loading loadingText="Loading Data"></railz-loading>

Include your Custom Style

<RailzLoading loadingText="Loading..." fillColor="red" textStyle={{color: "red"}} />

📘

See Railz Loading Indicator component properties for instructions on the specific properties you can use.

Railz Error Image

The Railz Error Image component is used to show an image indicator based on HTTP response codes. See response codes for more details.

Examples

<railz-error-image [statusCode]="202"></railz-error-image>
<RailzErrorImage statusCode={202}/>
<railz-error-image statusCode="202"></railz-error-image>

Output

Customizations

Change Text and Icon Color

<railz-error-image 
     statusCode="404" 
     fillColor="red"
     textStyle="{'color': 'red'}">
</railz-error-image>

Display Icon Only

<railz-error-image 
     statusCode="202" 
     width="170"
     height="150"
     text="">
</railz-error-image>

📘

See Railz Error Image component properties for instructions on the specific properties you can use.


Did this page help you?