Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/railz-ai/railz-visualizations

Last synced: 13 days ago
JSON representation

Host: GitHub
URL: https://github.com/railz-ai/railz-visualizations
Owner: railz-ai
License: other
Created: 2022-01-28T15:18:43.000Z (about 3 years ago)
Default Branch: master
Last Pushed: 2025-01-27T20:50:04.000Z (18 days ago)
Last Synced: 2025-01-27T21:39:29.064Z (18 days ago)
Language: TypeScript
Size: 2.94 MB
Stars: 5
Watchers: 6
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

fucking-awesome-angular - railz-visualizations - A collection of reusable web components that help you build a dashboard using normalized financial transactions and analytics from the FIS Accounting Data as a Service API. (Table of contents / Third Party Components)
awesome-angular - railz-visualizations - A collection of reusable web components that help you build a dashboard using normalized financial transactions and analytics from the FIS Accounting Data as a Service API. (Table of contents / Third Party Components)

README

        


  



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



  

    Accounting Data as a Service™ Visualizations

  





  

  

  

  

  

  

          

      



Powerful charting components built with StencilJS and Highcharts.



  Docs •

  Key Features •

  How To Use •

  Installation •

  Examples •

  License





Accounting Data as a Service™ Dashboard.




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

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.




| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |

| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |

| Latest ✔                                                                                 | Latest ✔                                                                                    | Latest ✔                                                                                 | Latest ✔                                                                              | Latest ✔                                                                           |

## Installation

The library is published as a [scoped NPM package](https://docs.npmjs.com/misc/scope) in

the [NPMJS account](https://www.npmjs.com/org/railzai).

[Check our docs on detailed instruction guide](https://docs.railz.ai/docs/visualization-sdk-quickstart).

With NPM:

```bash

npm install @railzai/railz-visualizations

```

With Yarn:

```bash

yarn add @railzai/railz-visualizations

```

## Framework Support

- Angular

- React

## 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](https://docs.railz.ai/reference/authentication)

#### Framework Specific Installation

- Javascript;

- [Angular](https://www.npmjs.com/package/@railzai/railz-visualizations-angular);

- [React](https://www.npmjs.com/package/@railzai/railz-visualizations-react);

### Framework usage React example

```react

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 (

    


      

    

  );

}

export default App;

```

### Framework usage Angular example

#### app.component.html

```angular

```

#### app.module.ts

Import the `RailzVisualizationsModule` into your component module or app.module.ts file

```angular

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](https://github.com/lerna/lerna) to do this for us

From the main folder:

1. Clone this [repository](https://github.com/railz-ai/railz-visualizations.git)

2. Install the dependency needed to setup the packages from the main folder.

   ```bash

   yarn

   ```

3. Install lerna using yarn

   ```bash

   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

   ```bash

   yarn install:codesandbox

   ```

5. Build the packages to begin using

   ```bash

   yarn build

   ```

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

   ```bash

   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:

```bash

yarn link

```

#### Usage

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

```bash

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.

```typescript jsx

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.

```bash

yarn link

```

#### Usage

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

```bash

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.

```typescript

import { RailzVisualizationsModule } from '@railzai/railz-visualizations-angular/dist';

```

## Contributing

The Accounting Data as a Service™ Visualization library and documentation are open to contributions. For more information, check

the [guidelines](./CONTRIBUTING.md).

## License

[MIT License](./LICENSE)

---