@sumboard/sdk 1.0.0

package/README.md

@@ -0,0 +1,367 @@
+# Sumboard SDK
+
+The Sumboard SDK is a powerful tool for creating and embedding interactive dashboards into your web applications.</br>
+This documentation will guide you through the installation, frontend integration, backend integration, and filter usage processes.
+
+### Sumboard dashboards can be embedded in three different ways
+
+- **Simple dashboard embed**: This involves displaying a dashboard in your application as you see it in the Sumboard Editor, without any predefined filters.
+
+- **Embed dashboard with static token parameter**: This approach involves embedding a dashboard and filtering it with a parameter that comes from your application. This is often used when you want to provide the same dashboard for multiple users from your application, and you want each user to see their own data. This is usually achieved by sending a parameter like user_id in the token.
+
+- **Embed dashboard with your application filters**: With this approach, you can have full control of the interactive filters for the dashboard. You can combine it with token parameters to offer your users a dashboard with their own data and have full control of the filters they can apply to it.
+
+## Table of Contents
+- [Installation](#installation)
+- [Simple dashboard embed](#simple-dashboard-embed)
+  - [Generating a Sumboard Token](#generating-a-sumboard-token)
+  - [Simple dashboard embed demo](#simple-dashboard-embed-demo)
+- [Embed dashboard with static token parameter](#embed-dashboard-with-static-token-parameter)
+- [Embed dashboard with your application filters](#embed-dashboard-with-your-application-filters)
+  - [Basic Filter Structure](#basic-filter-structure)
+  - [Filter Types](#filter-types)
+    - [TimeRange](#timerange-filter-filtertypetimerange)
+    - [Aggregation](#aggregation-filter-filtertypeaggregation)
+    - [Select](#select-filter-filtertypeselect)
+    - [Unknown](#unknown-custom-filter-filtertypeunknown)
+  - [Filter implementation](#filter-implementation)
+    - [Implementing filters during SDK initialization](#implementing-filters-during-sdk-initialization)
+    - [Changing filters after SDK initialization](#changing-filters-after-sdk-initialization)
+- [Localize your dashboard](#localize-your-dashboard)
+## Installation
+To install the Sumboard SDK, run the following command:
+```shell
+npm install @sumboard/sdk
+```
+
+## Simple dashboard embed
+
+Here we will show you how to embed a simple dashboard in your application using the Sumboard SDK.
+
+This code initializes the Zeelix SDK and fetches a token from the backend server. It then initializes the Sumboard dashboard by passing the token and dashboard ID to the `init()` method of the SDK.
+
+```ts
+import { Zeelix } from '@sumboard/sdk';
+
+const sumboard = new Zeelix();
+
+fetch('<https://your-backend.com/api/token>')
+  .then<{ token: string }>((response) => response.json())
+  .then(({ token }) => sumboard.init({ token, dashboardId: '<DASHBOARD_ID>' }));
+```
+
+Replace `<https://your-backend.com/api/token>` with the URL of the API endpoint that your backend uses to generate tokens and `<DASHBOARD_ID>` with the ID of the dashboard you want to embed.
+
+To display the dashboard in your application, add a `<div>` element with the specified width and height, and set the id attribute to `zeelix`:
+
+```html
+<div id="zeelix" style="width: 1000px;height: 500px;"></div>
+```
+
+### Generating a Sumboard Token
+
+To generate a Sumboard token, create an endpoint on your backend that uses the company secret key and dashboard shared token to generate and return the token. Here's an example of how to generate a Sumboard token in a Node.js backend:
+
+```ts
+import { FiltersValues } from '@sumboard/types';
+import { sign } from 'jsonwebtoken';
+
+const st = '<DASHBOARD_SHARED_TOKEN>';
+const companySecretKey = '<COMPANY_SECRET_KEY>';
+
+const token = sign({ st }, companySecretKey);
+```
+
+Replace `<DASHBOARD_SHARED_TOKEN>` with your dashboard's shared token and `<COMPANY_SECRET_KEY>` with your company's secret key. Once you have the token, pass it to the Sumboard SDK's init method to initialize the SDK in your frontend application.
+
+### Simple dashboard embed demo
+You can also test this code in this [StackBlitz Demo](https://stackblitz.com/edit/zeelix-init?file=index.ts)
+
+> **Note**</br>
+> The demo uses a mock API to simulate fetching a token, and is for demonstration purposes only.
+
+## Embed dashboard with static token parameter
+
+This is often used when you want to provide the same dashboard for multiple users from your application, and you want each user to see their own data.
+
+Token type filters are initialized on the back-end as parameters, and should not be sent from the front-end. Here's an example of how to implement filters during token generation:
+
+```ts
+const user: FilterUnknown['values'] = [
+  {
+    value: 'user-uuid',
+    label: 'FirstName, LastName',
+  }
+];
+
+const params: FiltersValues = { user };
+
+const token = sign({ st, params }, companySecretKey);
+```
+
+In this example, we're defining a user filter with a single value of "user-uuid" and a label of "FirstName, LastName". We then create a `params` object containing the user filter, and use `sign` from the `jsonwebtoken` package to generate a token that includes the `params` object.
+
+When the token is used to embed a Sumboard dashboard, the user filter will be automatically applied to the dashboard.
+
+> **Warning**</br>
+> It's important to note that the **security** of the token should be carefully considered, especially if sensitive data is being passed in the params object.
+
+## Embed dashboard with your application filters
+
+The Sumboard SDK supports various types of filters, which are defined by the `FilterType` enumeration. The basic filter structure is used as the foundation for creating specific filter types like TimeRange, Aggregation, Select, and Unknown.
+
+### Basic Filter Structure
+
+Here is the interface for the basic filter structure:
+```ts
+export interface Filter<T extends FilterType, V = unknown> {
+  type: T;
+  place: FilterPlace;
+  values: FilterValue<V>[];
+  name?: string;
+  order?: number;
+}
+```
+
+The basic filter interface has the following properties:
+
+ - `type`: Represents the type of filter (TimeRange, Aggregation, Select, or Unknown).
+ - `place`: Specifies where the filter is displayed within the application, using the `FilterPlace` enumeration.
+ - `values`: An array of filter values.
+ - `name`: (optional): The name of the filter, which is displayed in the filter bar.
+ - `order`: (optional): The order in which the filter should appear in the filter bar.
+
+Here is the FilterPlace enumeration:
+```ts
+export enum FilterPlace {
+  Apps = 'apps',
+  Extern = 'extern',
+  Token = 'token',
+}
+```
+
+The FilterPlace enumeration represents where the filters are displayed and can have the following values:
+
+ - `FilterPlace.Apps`: Filters are displayed above the charts in the application. These filters can be changed from within the application, from outside the application (via the SDK), or from the token (when the backend generates the token).
+ - `FilterPlace.Extern`: Filters are outside the application. These filters can be changed from outside the application (via the SDK) or from the token (when the backend generates the token).
+ - `FilterPlace.Token`: Filters that are added to the token when the token is generated by a third party. These filters can be changed only from the token (when the backend generates the token).
+
+
+
+### Filter Types
+
+Here is the interface for the filter types:
+```ts
+export enum FilterType {
+  TimeRange = 'time_range',
+  Aggregation = 'aggregation',
+  Select = 'select',
+  Unknown = 'unknown',
+}
+```
+
+#### TimeRange Filter (`FilterType.TimeRange`)
+
+The TimeRange filter is used for selecting a time range. It has a value in this structure `from~to[]`, where both `from` and `to` can be a custom range or a timestamp. The `TimeRangeType` type represents the various time range options supported by this filter.</br>
+
+Here is the interface for the `TimeRange` filter:
+```ts
+export type Time = number;
+
+export enum CustomRange {
+  Today = 'today',
+  Yesterday = 'yesterday',
+  LastWeek = 'lastWeek',
+  LastMonth = 'lastMonth',
+  Last7Days = 'last7Days',
+  Last30Days = 'last30Days',
+}
+
+export type TimeRangeType =
+  | CustomRange.Today
+  | CustomRange.Yesterday
+  | CustomRange.LastWeek
+  | CustomRange.LastMonth
+  | CustomRange.Last7Days
+  | CustomRange.Last30Days
+  | `${Time}~${Time}`
+  | `${Time}~`
+  | `~${Time}`;
+
+export type FilterTimeRange = Filter<FilterType.TimeRange, TimeRangeType>;
+```
+
+These predefined ranges (Today, Yesterday, etc.) and custom time ranges (using `${Time}`) allow you to configure the TimeRange filter according to your needs.
+
+#### Aggregation Filter (`FilterType.Aggregation`)
+
+The Aggregation filter is used for aggregating data. It has a value in this structure `DateFormat[]`.
+
+Here is the interface for the `Aggregation` filter:
+
+```ts
+export enum DateFormat {
+  Hour = 'hour',
+  Day = 'day',
+  Week = 'week',
+  Month = 'month',
+  Quarter = 'quarter',
+  Year = 'year',
+}
+
+export type FilterAggregation = Filter<FilterType.Aggregation, DateFormat>;
+```
+
+The `DateFormat` enumeration represents various aggregation options such as hour, day, week, month, quarter, and year. You can use the Aggregation filter to customize how your data is aggregated based on these options.
+
+#### Select Filter (`FilterType.Select`)
+
+The Select filter is used for filtering data by selected values from another query.
+
+Here is the interface for the `Select` filter:
+
+```ts
+export interface FilterSelect extends Filter<FilterType.Select, (string | number)[]> {}
+```
+
+The `Select` filter allows you to filter your data based on the selected values, which can be strings or numbers, from another query. This can be useful for creating dependent filters or conditional data display based on user selections.
+
+#### Unknown (Custom Filter) (`FilterType.Unknown`)
+
+The `Unknown` (Custom Filter) is a filter that is allowed to be used in the `FilterPlace.Extern` or `FilterPlace.Token`
+
+Here is the interface for the `Unknown` (Custom Filter):
+
+```ts
+export type FilterUnknown<T = unknown> = Filter<FilterType.Unknown, T>;
+```
+
+The `Unknown` (Custom Filter) allows you to create custom filters with user-defined value structures. This can be useful for integrating filters that are not part of the predefined filter types and can be used in external or token-based filter placement.
+
+
+### Filter implementation
+
+#### Implementing filters during SDK initialization
+
+To implement filters during initialization, create a `filters` object containing the desired filter configurations and pass it to the `sumboard.init()` method along with the token and dashboard ID.
+
+Here's an example of how to implement filters on initialization:
+```ts
+const filters: FiltersMap<FilterType> = {
+  aggregation: {
+    type: FilterType.Aggregation,
+    place: FilterPlace.Apps,
+    values: [
+      {
+        value: DateFormat.Month,
+        label: 'Month',
+      },
+    ],
+  },
+  timeRange: {
+    type: FilterType.TimeRange,
+    place: FilterPlace.Apps,
+    values: [
+      {
+        value: CustomRange.Last30Days,
+        label: 'Last 30 days',
+      }
+    ]
+  },
+  users: {
+    type: FilterType.Select,
+    place: FilterPlace.Apps,
+    values: [
+      {
+        value: ['user-uuid-1', 'user-uuid-2'],
+        label: 'User Name 1, User Name 2',
+      }
+    ]
+  }
+};
+
+
+fetch('https://your-backend.com/api/token')
+  .then<{ token: string }>((response) => response.json())
+  .then(({ token }) => sumboard.init({ token, filters, dashboardId: '<DASHBOARD_ID>' }));
+```
+
+You can also test this code in this [StackBlitz Demo](https://stackblitz.com/edit/zeelix-init-filter?file=index.ts)
+
+> **Note**</br>
+> The demo uses a mock API to simulate fetching a token, and is for demonstration purposes only.
+
+#### Changing filters after SDK initialization
+
+To change filters after initialization, you can call the changeFilters method of the Sumboard instance. This method takes an object where each key represents the name of the filter you want to change, and the value is an object containing the updated values for that filter.
+
+Here is an example of changing the Aggregation filter:
+
+```ts
+document.getElementById('aggregation').onchange = ({ target }) => {
+  const value = (target as HTMLSelectElement).value as DateFormat;
+
+  sumboard.changeFilters({
+    aggregation: {
+      type: FilterType.Aggregation,
+      place: FilterPlace.Extern,
+      values: [{ value }],
+    },
+  });
+};
+```
+
+In this example, we're changing the aggregation filter to a new value specified by the user through an HTML select element. Note that the changeFilters method can change one or several filters at once, depending on the keys of the object passed as an argument.
+
+You can also test this code in this [StackBlitz Demo](https://stackblitz.com/edit/zeelix-change-filters?file=index.ts)
+
+> **Note**</br>
+> The demo uses a mock API to simulate fetching a token, and is for demonstration purposes only.
+
+## Localize your dashboard
+
+In order to provide your users with a different language, timezone and localization options, you can pass a `config` parameter when you generate the token on server side.
+
+```ts
+import { FiltersValues } from '@sumboard/types';
+import { sign } from 'jsonwebtoken';
+
+interface Config {
+  timezone?: string,
+  language?: string,
+  columns?: {
+    currency?: { locale: string },
+    number?: { locale: string },
+    date?: { locale: string },
+  }
+}
+
+const st = '<DASHBOARD_SHARED_TOKEN>';
+
+const companySecretKey = '<COMPANY_SECRET_KEY>';
+
+const config: Config = {
+  timezone: '+0200',
+  language: 'en',
+  columns: {
+    currency: { locale: 'en' },
+    number: { locale: 'en' },
+    date: { locale: 'en' },
+  }
+};
+
+const token = sign({ st, config }, companySecretKey);
+```
+
+
+The Config interface provides additional configuration options that can be passed during the initialization of the Sumboard Token. This interface includes the following properties:
+
+ - `timezone` (optional): A string that represents the timezone of the data being displayed on the dashboard.
+ - `language` (optional): A string that represents the language of the dashboard.
+ - `columns` (optional): An object that contains configuration options for the currency, number, and date columns.
+
+The columns property of the Config interface has the following sub-properties:
+
+ - `currency` (optional): An object that contains a locale string that represents the currency formatting to be used for columns that contain currency data.
+ - `number` (optional): An object that contains a locale string that represents the number formatting to be used for columns that contain numerical data.
+ - `date` (optional): An object that contains a locale string that represents the date formatting to be used for columns that contain date data.

package/esm2022/lib/sdk.module.mjs

@@ -0,0 +1,48 @@
+export class Zeelix {
+    constructor() {
+        this._listener = this._receiveMessage.bind(this);
+        this.init = (config) => {
+            this._config = config;
+            window.addEventListener('message', this._listener, false);
+            return this._mountIframe();
+        };
+        this.changeFilters = (filters) => {
+            this._iframe.contentWindow?.postMessage({ type: "CHANGE_FILTERS", filters }, '*');
+        };
+        this._mountIframe = () => {
+            return new Promise((resolve) => {
+                const iframe = document.createElement('iframe');
+                iframe.onload = () => resolve();
+                iframe.src = this._generateIframeSrc();
+                iframe.width = '100%';
+                iframe.height = '100%';
+                iframe.style.border = 'none';
+                iframe.style.outline = 'none';
+                this._iframe = iframe;
+                const wrapper = document.getElementById('zeelix');
+                if (!wrapper)
+                    throw new Error('not found HTMLElement with id "zeelix"');
+                wrapper.appendChild(iframe);
+            });
+        };
+        this._generateIframeSrc = () => {
+            if ('dashboardPageId' in this._config) {
+                return `https://app.sumboard.io/embed-page/${this._config.dashboardPageId}`;
+            }
+            return `https://app.sumboard.io/embed/${this._config.dashboardId}`;
+        };
+    }
+    destroy() {
+        window.removeEventListener('message', this._listener, false);
+    }
+    _receiveMessage({ data }) {
+        switch (data.type) {
+            case "BOOTSTRAP_DONE":
+                return this._initDashboard();
+        }
+    }
+    _initDashboard() {
+        this._iframe.contentWindow?.postMessage({ type: "INIT_IFRAME", config: this._config }, '*');
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RrLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3Nkay9zcmMvbGliL3Nkay5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUEsTUFBTSxPQUFPLE1BQU07SUFBbkI7UUFJVSxjQUFTLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQW1DLElBQUksQ0FBQyxDQUFDO1FBRXRGLFNBQUksR0FBRyxDQUFDLE1BQWMsRUFBaUIsRUFBRTtZQUN2QyxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztZQUl0QixNQUFNLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFVLEVBQUUsS0FBSyxDQUFDLENBQUM7WUFFM0QsT0FBTyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDN0IsQ0FBQyxDQUFDO1FBSUYsa0JBQWEsR0FBRyxDQUFDLE9BQW1CLEVBQVEsRUFBRTtZQUM1QyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRSxXQUFXLENBQUMsRUFBRSxJQUFJLGtCQUFxQixFQUFFLE9BQU8sRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ3ZGLENBQUMsQ0FBQztRQU1NLGlCQUFZLEdBQUcsR0FBa0IsRUFBRTtZQUN6QyxPQUFPLElBQUksT0FBTyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUU7Z0JBQzdCLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBRWhELE1BQU0sQ0FBQyxNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7Z0JBRWhDLE1BQU0sQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7Z0JBRXZDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO2dCQUN0QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztnQkFDdkIsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO2dCQUM3QixNQUFNLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7Z0JBRTlCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO2dCQUV0QixNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUVsRCxJQUFJLENBQUMsT0FBTztvQkFBRSxNQUFNLElBQUksS0FBSyxDQUFDLHdDQUF3QyxDQUFDLENBQUM7Z0JBRXhFLE9BQU8sQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDOUIsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUM7UUFtQk0sdUJBQWtCLEdBQUcsR0FBVyxFQUFFO1lBQ3hDLElBQUksaUJBQWlCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtnQkFDckMsT0FBTyxzQ0FBc0MsSUFBSSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsQ0FBQzthQUM3RTtZQUVELE9BQU8saUNBQWlDLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDckUsQ0FBQyxDQUFDO0lBQ0osQ0FBQztJQW5EQyxPQUFPO1FBQ0wsTUFBTSxDQUFDLG1CQUFtQixDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBVSxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUEyQk8sZUFBZSxDQUFDLEVBQUUsSUFBSSxFQUFxQjtRQUNqRCxRQUFRLElBQUksQ0FBQyxJQUFJLEVBQUU7WUFDakI7Z0JBQ0UsT0FBTyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDaEM7SUFDSCxDQUFDO0lBSU8sY0FBYztRQUNwQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRSxXQUFXLENBQUMsRUFBRSxJQUFJLGVBQWtCLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNqRyxDQUFDO0NBV0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWx0ZXJzTWFwIH0gZnJvbSAnQHN1bWJvYXJkL3R5cGVzJztcblxuaW1wb3J0IHsgQ29uZmlnLCBFdmVudCwgTWVzc2FnZSB9IGZyb20gJy4vc2tkLnR5cGVzJztcblxuZXhwb3J0IGNsYXNzIFplZWxpeCB7XG4gIHByaXZhdGUgX2lmcmFtZSE6IEhUTUxJRnJhbWVFbGVtZW50O1xuICBwcml2YXRlIF9jb25maWchOiBDb25maWc7XG5cbiAgcHJpdmF0ZSBfbGlzdGVuZXIgPSB0aGlzLl9yZWNlaXZlTWVzc2FnZS5iaW5kPFdpbmRvd0V2ZW50SGFuZGxlcnNbJ29ubWVzc2FnZSddPih0aGlzKTtcblxuICBpbml0ID0gKGNvbmZpZzogQ29uZmlnKTogUHJvbWlzZTx2b2lkPiA9PiB7XG4gICAgdGhpcy5fY29uZmlnID0gY29uZmlnO1xuICAgIC8qKlxuICAgICAqIGxpc3RlbmVyIG1lc3NhZ2VzIGZyb20gaWZyYW1lXG4gICAgICovXG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCB0aGlzLl9saXN0ZW5lciEsIGZhbHNlKTtcblxuICAgIHJldHVybiB0aGlzLl9tb3VudElmcmFtZSgpO1xuICB9O1xuICAvKipcbiAgICogdW5kZWZpbmVkIGlzIGZvciBmaWx0ZXIgdGhhdCB5b3Ugd2FudCB0byByZW1vdmVcbiAgICovXG4gIGNoYW5nZUZpbHRlcnMgPSAoZmlsdGVyczogRmlsdGVyc01hcCk6IHZvaWQgPT4ge1xuICAgIHRoaXMuX2lmcmFtZS5jb250ZW50V2luZG93Py5wb3N0TWVzc2FnZSh7IHR5cGU6IEV2ZW50LkNoYW5nZUZpbHRlcnMsIGZpbHRlcnMgfSwgJyonKTtcbiAgfTtcblxuICBkZXN0cm95KCk6IHZvaWQge1xuICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdtZXNzYWdlJywgdGhpcy5fbGlzdGVuZXIhLCBmYWxzZSk7XG4gIH1cblxuICBwcml2YXRlIF9tb3VudElmcmFtZSA9ICgpOiBQcm9taXNlPHZvaWQ+ID0+IHtcbiAgICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUpID0+IHtcbiAgICAgIGNvbnN0IGlmcmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2lmcmFtZScpO1xuXG4gICAgICBpZnJhbWUub25sb2FkID0gKCkgPT4gcmVzb2x2ZSgpO1xuXG4gICAgICBpZnJhbWUuc3JjID0gdGhpcy5fZ2VuZXJhdGVJZnJhbWVTcmMoKTtcblxuICAgICAgaWZyYW1lLndpZHRoID0gJzEwMCUnO1xuICAgICAgaWZyYW1lLmhlaWdodCA9ICcxMDAlJztcbiAgICAgIGlmcmFtZS5zdHlsZS5ib3JkZXIgPSAnbm9uZSc7XG4gICAgICBpZnJhbWUuc3R5bGUub3V0bGluZSA9ICdub25lJztcblxuICAgICAgdGhpcy5faWZyYW1lID0gaWZyYW1lO1xuXG4gICAgICBjb25zdCB3cmFwcGVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3plZWxpeCcpO1xuXG4gICAgICBpZiAoIXdyYXBwZXIpIHRocm93IG5ldyBFcnJvcignbm90IGZvdW5kIEhUTUxFbGVtZW50IHdpdGggaWQgXCJ6ZWVsaXhcIicpO1xuXG4gICAgICB3cmFwcGVyLmFwcGVuZENoaWxkKGlmcmFtZSk7XG4gICAgfSk7XG4gIH07XG4gIC8qKlxuICAgKiByZWNlaXZlIG1lc3NhZ2UgZnJvbSBpZnJhbWVcbiAgICovXG4gIHByaXZhdGUgX3JlY2VpdmVNZXNzYWdlKHsgZGF0YSB9OiB7IGRhdGE6IE1lc3NhZ2UgfSk6IHZvaWQge1xuICAgIHN3aXRjaCAoZGF0YS50eXBlKSB7XG4gICAgICBjYXNlIEV2ZW50LkJvb3RzdHJhcERvbmU6XG4gICAgICAgIHJldHVybiB0aGlzLl9pbml0RGFzaGJvYXJkKCk7XG4gICAgfVxuICB9XG4gIC8qKlxuICAgKiBpbml0IGRhc2hib2FyZCB3aGVuIHplZWxpeCBpcyByZWFkeVxuICAgKi9cbiAgcHJpdmF0ZSBfaW5pdERhc2hib2FyZCgpOiB2b2lkIHtcbiAgICB0aGlzLl9pZnJhbWUuY29udGVudFdpbmRvdz8ucG9zdE1lc3NhZ2UoeyB0eXBlOiBFdmVudC5Jbml0SUZyYW1lLCBjb25maWc6IHRoaXMuX2NvbmZpZyB9LCAnKicpO1xuICB9XG4gIC8qKlxuICAgKiBnZW5lcmF0ZSBpZnJhbWUgc3JjIGZyb20gY29uZmlnXG4gICAqL1xuICBwcml2YXRlIF9nZW5lcmF0ZUlmcmFtZVNyYyA9ICgpOiBzdHJpbmcgPT4ge1xuICAgIGlmICgnZGFzaGJvYXJkUGFnZUlkJyBpbiB0aGlzLl9jb25maWcpIHtcbiAgICAgIHJldHVybiBgaHR0cHM6Ly9hcHAuc3VtYm9hcmQuaW8vZW1iZWQtcGFnZS8ke3RoaXMuX2NvbmZpZy5kYXNoYm9hcmRQYWdlSWR9YDtcbiAgICB9XG5cbiAgICByZXR1cm4gYGh0dHBzOi8vYXBwLnN1bWJvYXJkLmlvL2VtYmVkLyR7dGhpcy5fY29uZmlnLmRhc2hib2FyZElkfWA7XG4gIH07XG59XG4iXX0=

package/esm2022/lib/skd.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tkLnR5cGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvc2RrL3NyYy9saWIvc2tkLnR5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWx0ZXJzTWFwIH0gZnJvbSAnQHN1bWJvYXJkL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGVudW0gRXZlbnQge1xuICBJbml0SUZyYW1lID0gJ0lOSVRfSUZSQU1FJyxcbiAgQ2hhbmdlRmlsdGVycyA9ICdDSEFOR0VfRklMVEVSUycsXG4gIEJvb3RzdHJhcERvbmUgPSAnQk9PVFNUUkFQX0RPTkUnLFxufVxuXG5leHBvcnQgaW50ZXJmYWNlIEJhc2VDb25maWcge1xuICB0b2tlbjogc3RyaW5nO1xuICAvKipcbiAgICogdW5kZWZpbmVkIGlzIGZvciBmaWx0ZXIgdGhhdCB5b3Ugd2FudCB0byByZW1vdmVcbiAgICovXG4gIGZpbHRlcnM/OiBGaWx0ZXJzTWFwO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIERhc2hib2FyZENvbmZpZyBleHRlbmRzIEJhc2VDb25maWcge1xuICBkYXNoYm9hcmRJZDogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIERhc2hib2FyZFBhZ2VDb25maWcgZXh0ZW5kcyBCYXNlQ29uZmlnIHtcbiAgZGFzaGJvYXJkUGFnZUlkOiBzdHJpbmc7XG59XG5cbmV4cG9ydCB0eXBlIENvbmZpZyA9IERhc2hib2FyZENvbmZpZyB8IERhc2hib2FyZFBhZ2VDb25maWc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTWVzc2FnZUZpbHRlcnMgZXh0ZW5kcyBQaWNrPENvbmZpZywgJ2ZpbHRlcnMnPiB7XG4gIHR5cGU6IEV2ZW50LkNoYW5nZUZpbHRlcnM7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTWVzc2FnZUluaXQge1xuICB0eXBlOiBFdmVudC5Jbml0SUZyYW1lO1xuICBjb25maWc6IENvbmZpZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBNZXNzYWdlQm9vdHN0cmFwIHtcbiAgdHlwZTogRXZlbnQuQm9vdHN0cmFwRG9uZTtcbn1cblxuZXhwb3J0IHR5cGUgTWVzc2FnZSA9IE1lc3NhZ2VCb290c3RyYXAgfCBNZXNzYWdlRmlsdGVycyB8IE1lc3NhZ2VJbml0O1xuIl19

package/esm2022/public-api.mjs

@@ -0,0 +1,3 @@
+export * from './lib/sdk.module';
+export * from './lib/skd.types';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3Nkay9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQSxjQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGNBQWMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHNka1xuICovXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZGsubW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NrZC50eXBlcyc7XG4iXX0=

package/esm2022/sumboard-sdk.mjs

@@ -0,0 +1,2 @@
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VtYm9hcmQtc2RrLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvc2RrL3NyYy9zdW1ib2FyZC1zZGsudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUEsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=

package/fesm2022/sumboard-sdk.mjs

@@ -0,0 +1,50 @@
+class Zeelix {
+    constructor() {
+        this._listener = this._receiveMessage.bind(this);
+        this.init = (config) => {
+            this._config = config;
+            window.addEventListener('message', this._listener, false);
+            return this._mountIframe();
+        };
+        this.changeFilters = (filters) => {
+            this._iframe.contentWindow?.postMessage({ type: "CHANGE_FILTERS", filters }, '*');
+        };
+        this._mountIframe = () => {
+            return new Promise((resolve) => {
+                const iframe = document.createElement('iframe');
+                iframe.onload = () => resolve();
+                iframe.src = this._generateIframeSrc();
+                iframe.width = '100%';
+                iframe.height = '100%';
+                iframe.style.border = 'none';
+                iframe.style.outline = 'none';
+                this._iframe = iframe;
+                const wrapper = document.getElementById('zeelix');
+                if (!wrapper)
+                    throw new Error('not found HTMLElement with id "zeelix"');
+                wrapper.appendChild(iframe);
+            });
+        };
+        this._generateIframeSrc = () => {
+            if ('dashboardPageId' in this._config) {
+                return `https://app.sumboard.io/embed-page/${this._config.dashboardPageId}`;
+            }
+            return `https://app.sumboard.io/embed/${this._config.dashboardId}`;
+        };
+    }
+    destroy() {
+        window.removeEventListener('message', this._listener, false);
+    }
+    _receiveMessage({ data }) {
+        switch (data.type) {
+            case "BOOTSTRAP_DONE":
+                return this._initDashboard();
+        }
+    }
+    _initDashboard() {
+        this._iframe.contentWindow?.postMessage({ type: "INIT_IFRAME", config: this._config }, '*');
+    }
+}
+
+export { Zeelix };
+//# sourceMappingURL=sumboard-sdk.mjs.map

package/fesm2022/sumboard-sdk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sumboard-sdk.mjs","sources":["../../../projects/sdk/src/lib/sdk.module.ts"],"sourcesContent":["import { FiltersMap } from '@sumboard/types';\n\nimport { Config, Event, Message } from './skd.types';\n\nexport class Zeelix {\n  private _iframe!: HTMLIFrameElement;\n  private _config!: Config;\n\n  private _listener = this._receiveMessage.bind<WindowEventHandlers['onmessage']>(this);\n\n  init = (config: Config): Promise<void> => {\n    this._config = config;\n    /**\n     * listener messages from iframe\n     */\n    window.addEventListener('message', this._listener!, false);\n\n    return this._mountIframe();\n  };\n  /**\n   * undefined is for filter that you want to remove\n   */\n  changeFilters = (filters: FiltersMap): void => {\n    this._iframe.contentWindow?.postMessage({ type: Event.ChangeFilters, filters }, '*');\n  };\n\n  destroy(): void {\n    window.removeEventListener('message', this._listener!, false);\n  }\n\n  private _mountIframe = (): Promise<void> => {\n    return new Promise((resolve) => {\n      const iframe = document.createElement('iframe');\n\n      iframe.onload = () => resolve();\n\n      iframe.src = this._generateIframeSrc();\n\n      iframe.width = '100%';\n      iframe.height = '100%';\n      iframe.style.border = 'none';\n      iframe.style.outline = 'none';\n\n      this._iframe = iframe;\n\n      const wrapper = document.getElementById('zeelix');\n\n      if (!wrapper) throw new Error('not found HTMLElement with id \"zeelix\"');\n\n      wrapper.appendChild(iframe);\n    });\n  };\n  /**\n   * receive message from iframe\n   */\n  private _receiveMessage({ data }: { data: Message }): void {\n    switch (data.type) {\n      case Event.BootstrapDone:\n        return this._initDashboard();\n    }\n  }\n  /**\n   * init dashboard when zeelix is ready\n   */\n  private _initDashboard(): void {\n    this._iframe.contentWindow?.postMessage({ type: Event.InitIFrame, config: this._config }, '*');\n  }\n  /**\n   * generate iframe src from config\n   */\n  private _generateIframeSrc = (): string => {\n    if ('dashboardPageId' in this._config) {\n      return `https://app.sumboard.io/embed-page/${this._config.dashboardPageId}`;\n    }\n\n    return `https://app.sumboard.io/embed/${this._config.dashboardId}`;\n  };\n}\n"],"names":[],"mappings":"MAIa,MAAM,CAAA;AAAnB,IAAA,WAAA,GAAA;QAIU,IAAS,CAAA,SAAA,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAmC,IAAI,CAAC,CAAC;AAEtF,QAAA,IAAA,CAAA,IAAI,GAAG,CAAC,MAAc,KAAmB;AACvC,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;YAItB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAU,EAAE,KAAK,CAAC,CAAC;AAE3D,YAAA,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;AAC7B,SAAC,CAAC;AAIF,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,OAAmB,KAAU;AAC5C,YAAA,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,WAAW,CAAC,EAAE,IAAI,EAAA,gBAAqB,EAAE,OAAO,EAAE,EAAE,GAAG,CAAC,CAAC;AACvF,SAAC,CAAC;QAMM,IAAY,CAAA,YAAA,GAAG,MAAoB;AACzC,YAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;gBAC7B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAEhD,MAAM,CAAC,MAAM,GAAG,MAAM,OAAO,EAAE,CAAC;AAEhC,gBAAA,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAEvC,gBAAA,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC;AACtB,gBAAA,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACvB,gBAAA,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAC7B,gBAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;AAE9B,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;gBAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAElD,gBAAA,IAAI,CAAC,OAAO;AAAE,oBAAA,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;AAExE,gBAAA,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAC9B,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;QAmBM,IAAkB,CAAA,kBAAA,GAAG,MAAa;AACxC,YAAA,IAAI,iBAAiB,IAAI,IAAI,CAAC,OAAO,EAAE;AACrC,gBAAA,OAAO,sCAAsC,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC;AAC7E,aAAA;AAED,YAAA,OAAO,iCAAiC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;AACrE,SAAC,CAAC;KACH;IAnDC,OAAO,GAAA;QACL,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAU,EAAE,KAAK,CAAC,CAAC;KAC/D;IA2BO,eAAe,CAAC,EAAE,IAAI,EAAqB,EAAA;QACjD,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAA,gBAAA;AACE,gBAAA,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;AAChC,SAAA;KACF;IAIO,cAAc,GAAA;QACpB,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,WAAW,CAAC,EAAE,IAAI,EAAA,aAAkB,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC,CAAC;KAChG;AAWF;;;;"}

package/index.d.ts

@@ -0,0 +1,2 @@
+/// <amd-module name="@sumboard/sdk" />
+export * from './public-api';

package/lib/sdk.module.d.ts

@@ -0,0 +1,14 @@
+import { FiltersMap } from '@sumboard/types';
+import { Config } from './skd.types';
+export declare class Zeelix {
+    private _iframe;
+    private _config;
+    private _listener;
+    init: (config: Config) => Promise<void>;
+    changeFilters: (filters: FiltersMap) => void;
+    destroy(): void;
+    private _mountIframe;
+    private _receiveMessage;
+    private _initDashboard;
+    private _generateIframeSrc;
+}

package/lib/skd.types.d.ts

@@ -0,0 +1,28 @@
+import { FiltersMap } from '@sumboard/types';
+export declare const enum Event {
+    InitIFrame = "INIT_IFRAME",
+    ChangeFilters = "CHANGE_FILTERS",
+    BootstrapDone = "BOOTSTRAP_DONE"
+}
+export interface BaseConfig {
+    token: string;
+    filters?: FiltersMap;
+}
+export interface DashboardConfig extends BaseConfig {
+    dashboardId: string;
+}
+export interface DashboardPageConfig extends BaseConfig {
+    dashboardPageId: string;
+}
+export type Config = DashboardConfig | DashboardPageConfig;
+export interface MessageFilters extends Pick<Config, 'filters'> {
+    type: Event.ChangeFilters;
+}
+export interface MessageInit {
+    type: Event.InitIFrame;
+    config: Config;
+}
+export interface MessageBootstrap {
+    type: Event.BootstrapDone;
+}
+export type Message = MessageBootstrap | MessageFilters | MessageInit;

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@sumboard/sdk",
+  "version": "1.0.0",
+  "dependencies": {
+    "tslib": "^2.3.1",
+    "@sumboard/types": "^1.0.0"
+  },
+  "description": "This library is sdk for sumboard.io",
+  "directories": {
+    "lib": "lib"
+  },
+  "author": "",
+  "license": "ISC",
+  "module": "fesm2022/sumboard-sdk.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/sumboard-sdk.mjs",
+      "esm": "./esm2022/sumboard-sdk.mjs",
+      "default": "./fesm2022/sumboard-sdk.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/sdk.module';
+export * from './lib/skd.types';