> ## 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.

# Overview

> Get started with our report and chart web components library

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:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @nebuly-ai/reports
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @nebuly-ai/reports
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @nebuly-ai/reports
    ```
  </Tab>
</Tabs>

## How to use the library

### Client

The library exports an HTTP client that can be used to get the charts data.

<Tabs>
  <Tab title="SaaS" icon="cloud">
    ```typescript theme={null}
    import NebulyReports from '@nebuly-ai/reports';

    const client = new NebulyReports.Client({
      publicKey: '<YOUR_NEBULY_PUBLIC_KEY>',
    });
    ```
  </Tab>

  <Tab title="Self-hosted" icon="server">
    ```typescript theme={null}
    import NebulyReports from '@nebuly-ai/reports';

    const client = new NebulyReports.Client({
      publicKey: '<YOUR_NEBULY_PUBLIC_KEY>',
      baseUrl: '<YOUR_NEBULY_BASE_URL>',
    });
    ```
  </Tab>
</Tabs>

You can use the client to get list available reports in your project.

```typescript theme={null}
const reports = await client.listReports();
```

You can also use the client to get the data for a specific report.

```typescript theme={null}
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.

```typescript theme={null}
import NebulyReports from '@nebuly-ai/reports/web';
NebulyReports.registerComponents();
```

Then you can use the components in your HTML.

```html theme={null}
<nebuly-line-chart data="<CHART_DATA>" options="<CHART_OPTIONS>"></nebuly-line-chart>
```

Or you can wrape them in your preferred framework.

<Tabs>
  <Tab title="React" icon="react">
    ```typescript theme={null}
    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)} />;
    }
    ```
  </Tab>

  <Tab title="Vue" icon="vuejs">
    ```vue theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Angular" icon="angular">
    ```typescript theme={null}
    // 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);
      }
    }
    ```
  </Tab>

  <Tab title="Svelte" icon="https://mintcdn.com/nebulyai/Z4cH-Z3_KpwmkdSB/images/svelte-icon.svg?fit=max&auto=format&n=Z4cH-Z3_KpwmkdSB&q=85&s=d008288ae6eca0f5cc44d52059577a57" width="128" height="128" data-path="images/svelte-icon.svg">
    ```svelte theme={null}
    <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>
    ```
  </Tab>
</Tabs>