@railzai/railz-visualizations
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4-alpha.3 • Public • Published

    Railz Visualizations

    Built With Stencil Latest Version on NPM Software License Tree shaking License MIT Code Style

    Powerful charting components built with StencilJS and Highcharts based on Railz.ai dashboard.

    DocsKey FeaturesHow To UseInstallationExamplesLicense

    Railz dashboard preview

    Railz 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 Railz 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 Railz Visualization components helps to build your dashboard easily with data from the Railz Reports API.

    Chrome Firefox Safari Opera Edge
    Latest Latest Latest Latest Latest

    Installation

    The library is published as a scoped NPM package in the NPMJS Railz 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 Railz Authentication API, see details here

    Framework Specific Installation

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

    Install

    npm i @railzai/railz-visualizations

    DownloadsWeekly Downloads

    143

    Version

    0.0.4-alpha.3

    License

    MIT

    Unpacked Size

    13.7 MB

    Total Files

    399

    Last publish

    Collaborators

    • railzai