{"id":24918962,"url":"https://github.com/railz-ai/railz-visualizations","last_synced_at":"2026-03-07T02:03:39.449Z","repository":{"id":37080124,"uuid":"453115147","full_name":"railz-ai/railz-visualizations","owner":"railz-ai","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-15T23:08:26.000Z","size":3006,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-12-19T05:42:28.343Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/railz-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-01-28T15:18:43.000Z","updated_at":"2025-12-15T23:08:29.000Z","dependencies_parsed_at":"2023-09-26T00:32:49.051Z","dependency_job_id":"0c8db125-ffe7-4929-b02e-19a5e0dbbd34","html_url":"https://github.com/railz-ai/railz-visualizations","commit_stats":{"total_commits":222,"total_committers":21,"mean_commits":"10.571428571428571","dds":0.6351351351351351,"last_synced_commit":"f80fd65b0095d9d6c77b68245e7d62ef4ad1e996"},"previous_names":[],"tags_count":348,"template":false,"template_full_name":null,"purl":"pkg:github/railz-ai/railz-visualizations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railz-ai%2Frailz-visualizations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railz-ai%2Frailz-visualizations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railz-ai%2Frailz-visualizations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railz-ai%2Frailz-visualizations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/railz-ai","download_url":"https://codeload.github.com/railz-ai/railz-visualizations/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railz-ai%2Frailz-visualizations/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30205893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"online","status_checked_at":"2026-03-07T02:00:06.765Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-02T10:01:38.046Z","updated_at":"2026-03-07T02:03:39.417Z","avatar_url":"https://github.com/railz-ai.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.fisglobal.com/\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg width=\"200\" src=\"./assets/images/fis-logo.svg\" alt=\"FIS logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nFIS® Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://docs.railz.ai/docs/visualization-sdk-overview\"\u003e\n    Accounting Data as a Service™ Visualizations\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Built With Stencil\" src=\"https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@railzai/railz-visualizations\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@railzai/railz-visualizations\" alt=\"Latest Version on NPM\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/railz-ai/railz-visualizations/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@railzai/railz-visualizations\" alt=\"Software License\"/\u003e\u003c/a\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/dependency-count/@railzai/railz-visualizations\" alt=\"Tree shaking\"/\u003e\n  \u003ca href=\"https://github.com/railz-ai/railz-visualizations/actions/workflows/publish.yml\"\u003e\u003cimg src=\"https://github.com/railz-ai/railz-visualizations/actions/workflows/publish.yml/badge.svg\" alt=\"Latest Version on NPM\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://stenciljs.com/docs/style-guide\"\u003e\n          \u003cimg src=\"https://img.shields.io/badge/code_style-stencil/stylelint/prettier-5851ff.svg?style=flat-square\" alt=\"Code Style\" /\u003e\n      \u003c/a\u003e\n\u003c/p\u003e\n\u003ch2 align=\"center\"\u003ePowerful charting components built with \u003ca href=\"https://stenciljs.com\" target=\"_blank\"\u003eStencilJS\u003c/a\u003e and \u003ca href=\"https://www.highcharts.com/\" target=\"_blank\"\u003eHighcharts.\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://docs.railz.ai/docs/visualization-sdk-overview\"\u003eDocs\u003c/a\u003e •\n  \u003ca href=\"#key-features-of-railz-visualizations\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#visualizations-usage\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"./examples\"\u003eExamples\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cimg src=\"./assets/images/accounting data.png\" alt=\"Accounting Data as a Service™ Dashboard preview\" width=\"100%\" /\u003e\n\u003cp align=\"center\"\u003e\u003ci\u003eAccounting Data as a Service™ Dashboard.\u003c/i\u003e\u003c/p\u003e\n\u003cbr\u003e\n\n## Why Stencil ?\n\nStencil is a compiler for building fast web apps using Web Components.\n\nStencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time\ntool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering\npipeline (similar to React Fiber), and lazy-loadingText out of the box, and generates 100% standards-based Web\nComponents that run in any browser supporting the Custom Elements v1 spec.\n\nStencil components are just Web Components, so they work in any major framework or with no framework at all.\n\n## Key Features of Accounting Data as a Service™ Visualizations\n\n- Charting components built for financial data and reports.\n- Mobile responsive components;\n- Customizations:\n  - Update colors based on your branding;\n  - Change text content and styles;\n- Components\n  - Visualization Controls - this is used to display status of bills and invoices\n  - Statement Visualizations - this is used to display financial statements like Income Statements, Cashflow\n    Statements, Balance Sheets.\n  - Loading Indicator Component\n  - Error/Status Image component\n\n## Overview\n\nAccounting Data as a Service™\n\nThe Accounting Data as a Service™ Visualization components helps to build your dashboard easily with data from the Accounting Data as a Service™ Reports API.\n\u003cbr\u003e\n\n| ![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) |\n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| Latest ✔                                                                                 | Latest ✔                                                                                    | Latest ✔                                                                                 | Latest ✔                                                                              | Latest ✔                                                                           |\n\n## Installation\n\nThe library is published as a [scoped NPM package](https://docs.npmjs.com/misc/scope) in\nthe [NPMJS account](https://www.npmjs.com/org/railzai).\n\n[Check our docs on detailed instruction guide](https://docs.railz.ai/docs/visualization-sdk-quickstart).\n\nWith NPM:\n\n```bash\nnpm install @railzai/railz-visualizations\n```\n\nWith Yarn:\n\n```bash\nyarn add @railzai/railz-visualizations\n```\n\n## Framework Support\n\n- Angular\n- React\n\n## Visualizations Usage\n\nAll you have to do just to import the core component on the page and pass its parameters to access it properties as an\nelement.\n\n### Prerequisites\n\n#### Authentication\n\nSetup the process of receiving an access_token from the Accounting Data as a Service™ Authentication API, see\ndetails [here](https://docs.railz.ai/reference/authentication)\n\n#### Framework Specific Installation\n\n- Javascript;\n- [Angular](https://www.npmjs.com/package/@railzai/railz-visualizations-angular);\n- [React](https://www.npmjs.com/package/@railzai/railz-visualizations-react);\n\n### Framework usage React example\n\n```react\nimport React, {useEffect, useState} from 'react';\nimport './App.css';\nimport {RailzVisualizations} from \"@railzai/railz-visualizations-react\";\nimport {RVAccountingProviders, RVReportFrequency, RVReportTypes} from \"@railzai/railz-visualizations\";\n\nfunction App() {\n  const [configuration, setToken] = useState('');\n\n  useEffect( () =\u003e {\n    const { configuration }: { configuration: string } = {configuration: '12222'};\n    setToken(configuration);\n  }, []);\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cRailzVisualizations configuration={{configuration: 'token_1233'}} filter={{\n        businessName: \"testFreshbooks\",\n        serviceName: RVAccountingProviders.FRESHBOOKS,\n        reportType: RVReportTypes.BALANCE_SHEET,\n        startDate: \"2021-01-01\",\n        endDate: \"2022-01-28\",\n        reportFrequency: RVReportFrequency.MONTH,\n      }}/\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Framework usage Angular example\n\n#### app.component.html\n\n```angular\n\u003crailz-visualizations\n  [configuration]='{configuration: 'token_1233'}'\n  [filter]='{\n        businessName: \"testFreshbooks\",\n        serviceName: RVAccountingProviders.FRESHBOOKS,\n        reportType: RVReportTypes.BALANCE_SHEET,\n        startDate: \"2021-01-01\",\n        endDate: \"2022-01-28\",\n        reportFrequency: RVReportFrequency.MONTH,\n      }'\n\u003e\n\u003c/railz-visualizations\u003e\n```\n\n#### app.module.ts\n\nImport the `RailzVisualizationsModule` into your component module or app.module.ts file\n\n```angular\nimport { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component'; import {RailzVisualizationsModule} from\n\"@railzai/railz-visualizations-angular/dist\"; @NgModule({ declarations: [AppComponent], imports:\n[BrowserModule, RailzVisualizationsModule], providers: [], bootstrap: [AppComponent], }) export\nclass AppModule {}\n```\n\n## Local Development\n\n### Build Your Packages\n\nTo build and test your components locally, you will need to link the packages together. This is a replacement for\npublishing packages to npm that allows you to develop and test locally. We are\nusing [lerna](https://github.com/lerna/lerna) to do this for us\n\nFrom the main folder:\n\n1. Clone this [repository](https://github.com/railz-ai/railz-visualizations.git)\n2. Install the dependency needed to setup the packages from the main folder.\n   ```bash\n   yarn\n   ```\n3. Install lerna using yarn\n   ```bash\n   yarn global add lerna\n   ```\n4. Run the bootstrap command to install all the dependencies for the packages, lerna will handle the linking between the\n   packages\n   ```bash\n   yarn install:codesandbox\n   ```\n5. Build the packages to begin using\n   ```bash\n   yarn build\n   ```\n6. Create a symlink to the built **packages/components** library\n   ```bash\n   cd packages/components\n   yarn link\n   ```\n\n#### For React\n\nLerna already linked the stencil component library to the React library during the build process so we only need to\ncreate the symlink for the React component library. Go to `packages/components-react` folder and run the below:\n\n```bash\nyarn link\n```\n\n#### Usage\n\nIn your own React Application, you can run the below to link both libraries\n\n```bash\nyarn link @railzai/railz-visualizations\nyarn link @railzai/railz-visualizations-react\n```\n\nTo make use of the React component library in your React application, import the components from the React component\nlibrary in the file where you want to use them.\n\n```typescript jsx\nimport { RailzVisualizations } from '@railzai/railz-visualizations-react';\n```\n\n#### For Angular\n\nLerna already linked the stencil component library to the Angular library during the build process so we only need to\ncreate the symlink for the Angular component library. Go to `packages/components-angular` folder and run the below:\n\nIn your angular component library, you need to create a symlink.\n\n```bash\nyarn link\n```\n\n#### Usage\n\nIn your own Angular Application, you can run the below to link both libraries\n\n```bash\nyarn link @railzai/railz-visualizations\nyarn link @railzai/railz-visualizations-angular\n```\n\nTo make use of the Angular component library in your Angular application, set up your module file to import the\nvisualizations module.\n\n```typescript\nimport { RailzVisualizationsModule } from '@railzai/railz-visualizations-angular/dist';\n```\n\n## Contributing\n\nThe Accounting Data as a Service™ Visualization library and documentation are open to contributions. For more information, check\nthe [guidelines](./CONTRIBUTING.md).\n\n## License\n\n[MIT License](./LICENSE)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frailz-ai%2Frailz-visualizations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frailz-ai%2Frailz-visualizations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frailz-ai%2Frailz-visualizations/lists"}