Skip to main content
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
  • yarn
  • pnpm
npm install @nebuly-ai/reports

​
How to use the library

​
Client

The library exports an HTTP client that can be used to get the charts data.
  • SaaS
  • Self-hosted
import NebulyReports from '@nebuly-ai/reports';

const client = new NebulyReports.Client({
  publicKey: '<YOUR_NEBULY_PUBLIC_KEY>',
});
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.
  • React
  • Vue
  • Angular
  • https://mintcdn.com/nebulyai/-8VTmqUEVPPsEp8W/images/svelte-icon.svg?fit=max&auto=format&n=-8VTmqUEVPPsEp8W&q=85&s=9986f2b810d3308bdb2459d72b240e5a 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)} />;
}
⌘I