FIS® Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
Powerful charting components built with StencilJS and Highcharts.
Docs • Key Features • How To Use • Installation • Examples • License
Accounting Data as a Service™ Dashboard.
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loadingText out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
- Charting components built for financial data and reports.
- Mobile responsive components;
- Customizations:
- Update colors based on your branding;
- Change text content and styles;
- Components
- Visualization Controls - this is used to display status of bills and invoices
- Statement Visualizations - this is used to display financial statements like Income Statements, Cashflow Statements, Balance Sheets.
- Loading Indicator Component
- Error/Status Image component
Accounting Data as a Service™
The Accounting Data as a Service™ Visualization components helps to build your dashboard easily with data from the Accounting Data as a Service™ Reports API.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
The library is published as a scoped NPM package in the NPMJS account.
Check our docs on detailed instruction guide.
With NPM:
npm install @railzai/railz-visualizationsWith Yarn:
yarn add @railzai/railz-visualizations- Angular
- React
All you have to do just to import the core component on the page and pass its parameters to access it properties as an element.
Setup the process of receiving an access_token from the Accounting Data as a Service™ Authentication API, see details here
import React, {useEffect, useState} from 'react';
import './App.css';
import {RailzVisualizations} from "@railzai/railz-visualizations-react";
import {RVAccountingProviders, RVReportFrequency, RVReportTypes} from "@railzai/railz-visualizations";
function App() {
const [configuration, setToken] = useState('');
useEffect( () => {
const { configuration }: { configuration: string } = {configuration: '12222'};
setToken(configuration);
}, []);
return (
<div className="App">
<RailzVisualizations configuration={{configuration: 'token_1233'}} filter={{
businessName: "testFreshbooks",
serviceName: RVAccountingProviders.FRESHBOOKS,
reportType: RVReportTypes.BALANCE_SHEET,
startDate: "2021-01-01",
endDate: "2022-01-28",
reportFrequency: RVReportFrequency.MONTH,
}}/>
</div>
);
}
export default App;
<railz-visualizations
[configuration]='{configuration: 'token_1233'}'
[filter]='{
businessName: "testFreshbooks",
serviceName: RVAccountingProviders.FRESHBOOKS,
reportType: RVReportTypes.BALANCE_SHEET,
startDate: "2021-01-01",
endDate: "2022-01-28",
reportFrequency: RVReportFrequency.MONTH,
}'
>
</railz-visualizations>
Import the RailzVisualizationsModule into your component module or app.module.ts file
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'; import {RailzVisualizationsModule} from
"@railzai/railz-visualizations-angular/dist"; @NgModule({ declarations: [AppComponent], imports:
[BrowserModule, RailzVisualizationsModule], providers: [], bootstrap: [AppComponent], }) export
class AppModule {}
To build and test your components locally, you will need to link the packages together. This is a replacement for publishing packages to npm that allows you to develop and test locally. We are using lerna to do this for us
From the main folder:
- Clone this repository
- Install the dependency needed to setup the packages from the main folder.
yarn
- Install lerna using yarn
yarn global add lerna
- Run the bootstrap command to install all the dependencies for the packages, lerna will handle the linking between the
packages
yarn install:codesandbox
- Build the packages to begin using
yarn build
- Create a symlink to the built packages/components library
cd packages/components yarn link
Lerna already linked the stencil component library to the React library during the build process so we only need to
create the symlink for the React component library. Go to packages/components-react folder and run the below:
yarn linkIn your own React Application, you can run the below to link both libraries
yarn link @railzai/railz-visualizations
yarn link @railzai/railz-visualizations-reactTo make use of the React component library in your React application, import the components from the React component library in the file where you want to use them.
import { RailzVisualizations } from '@railzai/railz-visualizations-react';Lerna already linked the stencil component library to the Angular library during the build process so we only need to
create the symlink for the Angular component library. Go to packages/components-angular folder and run the below:
In your angular component library, you need to create a symlink.
yarn linkIn your own Angular Application, you can run the below to link both libraries
yarn link @railzai/railz-visualizations
yarn link @railzai/railz-visualizations-angularTo make use of the Angular component library in your Angular application, set up your module file to import the visualizations module.
import { RailzVisualizationsModule } from '@railzai/railz-visualizations-angular/dist';The Accounting Data as a Service™ Visualization library and documentation are open to contributions. For more information, check the guidelines.