Overview

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

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.

SaaS
Self-hosted

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 response 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 wrap them in your preferred framework.

React
Vue
Angular
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>

Getting Started

API Reference

TypeScript

Examples

How to use the library

Client

Components

​How to use the library

​Client

​Components

How to use the library

Client

Components