Documentation Index Fetch the complete documentation index at: https://docs.nebuly.com/llms.txt
Use this file to discover all available pages before exploring further.
This library was created to allow Nebuly customers to easily embed charts into their own applications.
It’s built with Web Components and can be used in any framework.
The library is available as a npm package and can be installed using the following command:
npm install @nebuly-ai/reports
yarn add @nebuly-ai/reports
pnpm add @nebuly-ai/reports
How to use the library Client The library exports an HTTP client that can be used to get the charts data.
import NebulyReports from '@nebuly-ai/reports' ; const client = new NebulyReports . Client ({ publicKey: '<YOUR_NEBULY_PUBLIC_KEY>' , });
import NebulyReports from '@nebuly-ai/reports' ; const client = new NebulyReports . Client ({ publicKey: '<YOUR_NEBULY_PUBLIC_KEY>' , baseUrl: '<YOUR_NEBULY_BASE_URL>' , });
You can use the client to get list available reports in your project.
const reports = await client . listReports ();
You can also use the client to get the data for a specific report.
const report = await client . getReport ({ reportId: '<REPORT_ID>' });
The repson of getReport will contain the list of the charts that are part of the report.
Components Once you have the list of the charts, you can use the components to embed them in your application with the Web Compoents esported in.
In order to use the components, you need to import @nebuly-ai/reports/web and register functionality for the components.
import NebulyReports from '@nebuly-ai/reports/web' ; NebulyReports . registerComponents ();
Then you can use the components in your HTML.
< nebuly-line-chart data = " < CHART_DATA>" options = " < CHART_OPTIONS>" ></ nebuly-line-chart >
Or you can wrape them in your preferred framework.
Svelte
import type { ChartData } from '@nebuly-ai/reports' ; import type { LineChartOptions } from '@nebuly-ai/reports' ; export function LineChart ({ data , options } : { data : ChartData , options : LineChartOptions }) { return < nebuly - line - chart data ={ JSON . stringify ( data )} options ={ JSON . stringify ( options )} />; }
< template > < nebuly-line-chart : data = " stringifiedData " : options = " stringifiedOptions " ></ nebuly-line-chart > </ template > < script setup lang = "ts" > import { ref , computed } from 'vue' ; // Define props for data and options const props = defineProps <{ data : unknown , options : unknown }>(); const stringifiedData = computed (() => JSON . stringify ( props . data )); const stringifiedOptions = computed (() => JSON . stringify ( props . options )); </ script >
// line-chart.component.ts import { Component , Input } from '@angular/core' ; @ Component ({ selector: 'app-line-chart' , template: ` <nebuly-line-chart [attr.data]="dataString" [attr.options]="optionsString"></nebuly-line-chart> ` }) export class LineChartComponent { @ Input () data !: unknown ; @ Input () options !: unknown ; get dataString () : string { return JSON . stringify ( this . data ); } get optionsString () : string { return JSON . stringify ( this . options ); } }
< script lang = "ts" > export let data : unknown ; export let options : unknown ; </ script > < nebuly-line-chart data = " { JSON . stringify ( data ) } " options = " { JSON . stringify ( options ) } " ></ nebuly-line-chart >
Svelte