Accounting Data as a Service™ is a solution that makes sense of your business customers' financial data.

Why Stencil ?

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.

Key Features of Accounting Data as a Service™ Visualizations

• 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

Overview

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 ✔ |

Installation

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-visualizations

With Yarn:

yarn add @railzai/railz-visualizations

Visualizations Usage

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.

Prerequisites

Authentication

Setup the process of receiving an access_token from the Accounting Data as a Service™ Authentication API, see details here

Framework Specific Installation

• Angular;
• React;

Framework usage React example

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;

Framework usage Angular example

app.component.html

<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>

app.module.ts

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 {}

Local Development

Build Your Packages

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:

1. Clone this repository
2. Install the dependency needed to setup the packages from the main folder.

   yarn

3. Install lerna using yarn

   yarn global add lerna

4. Run the bootstrap command to install all the dependencies for the packages, lerna will handle the linking between the packages

   yarn install:codesandbox

5. Build the packages to begin using

   yarn build

6. Create a symlink to the built packages/components library

   cd packages/components
   yarn link

For React

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 link

Usage

In your own React Application, you can run the below to link both libraries

yarn link @railzai/railz-visualizations
yarn link @railzai/railz-visualizations-react

To 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';

For Angular

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 link

Usage

In your own Angular Application, you can run the below to link both libraries

yarn link @railzai/railz-visualizations
yarn link @railzai/railz-visualizations-angular

To 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';