deepspotscreen-sdk 0.0.1

package/dist/react/index.mjs

@@ -0,0 +1,188 @@
+import { useRef as $, useState as q, useEffect as H, createElement as n } from "react";
+function M({
+  apiKey: f,
+  baseUrl: p,
+  dashboardId: l,
+  userId: d,
+  tenantId: x,
+  embedLevel: y,
+  theme: m,
+  height: v,
+  pageId: z,
+  tabId: L,
+  filters: c,
+  hideFilters: j,
+  hideExport: B,
+  onReady: b,
+  onFilterChange: r,
+  onTabSwitch: g,
+  onError: o,
+  className: D,
+  style: R,
+  loadingNode: u
+}) {
+  const t = $(null), S = $(void 0), [s, e] = q(!0), [i, k] = q("");
+  return H(() => {
+    if (!t.current) return;
+    let C = !1;
+    async function J() {
+      var w;
+      if (t.current)
+        try {
+          e(!0), k("");
+          const { DeepspotSDK: a } = await import("../DeepspotSDK-CyX06_c2.js");
+          if (C || !t.current) return;
+          const G = await new a({ apiKey: f, baseUrl: p }).embedDashboard({
+            dashboardId: l,
+            container: t.current,
+            userId: d,
+            tenantId: x,
+            embedLevel: y,
+            theme: m,
+            height: v,
+            pageId: z,
+            tabId: L,
+            filters: c,
+            hideFilters: j,
+            hideExport: B,
+            onReady: b,
+            onFilterChange: r,
+            onTabSwitch: g,
+            onError: o
+          });
+          if (C) {
+            G.destroy();
+            return;
+          }
+          S.current = G, e(!1);
+        } catch (a) {
+          if (C) return;
+          const A = (w = a == null ? void 0 : a.message) != null ? w : String(a);
+          k(A), e(!1), o == null || o(A);
+        }
+    }
+    return J(), () => {
+      var w;
+      C = !0, (w = S.current) == null || w.destroy(), S.current = void 0;
+    };
+  }, [f, p, l, d, x, y, m, v, z, L, j, B]), n(
+    "div",
+    { style: { position: "relative", width: "100%" } },
+    // Loading overlay
+    s && !i ? u != null ? u : n("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(255,255,255,0.6)",
+        zIndex: 1,
+        fontSize: "14px",
+        color: "#666"
+      }
+    }, "Loading dashboard…") : null,
+    // Error banner
+    i ? n("div", {
+      style: {
+        padding: "12px 16px",
+        background: "#fef2f2",
+        border: "1px solid #fca5a5",
+        borderRadius: "6px",
+        color: "#b91c1c",
+        fontSize: "13px",
+        marginBottom: "8px"
+      }
+    }, `Deepspot error: ${i}`) : null,
+    // Dashboard mount point
+    n("div", { ref: t, className: D, style: R })
+  );
+}
+function O({
+  apiKey: f,
+  baseUrl: p,
+  dashboardId: l,
+  componentId: d,
+  userId: x,
+  tenantId: y,
+  theme: m,
+  height: v,
+  filters: z,
+  onReady: L,
+  onError: c,
+  className: j,
+  style: B,
+  loadingNode: b
+}) {
+  const r = $(null), g = $(void 0), [o, D] = q(!0), [R, u] = q("");
+  return H(() => {
+    if (!r.current) return;
+    let t = !1;
+    async function S() {
+      var s;
+      if (r.current)
+        try {
+          D(!0), u("");
+          const { DeepspotSDK: e } = await import("../DeepspotSDK-CyX06_c2.js");
+          if (t || !r.current) return;
+          const k = await new e({ apiKey: f, baseUrl: p }).embedReport({
+            dashboardId: l,
+            componentId: d,
+            container: r.current,
+            userId: x,
+            tenantId: y,
+            theme: m,
+            height: v,
+            filters: z,
+            onReady: L,
+            onError: c
+          });
+          if (t) {
+            k.destroy();
+            return;
+          }
+          g.current = k, D(!1);
+        } catch (e) {
+          if (t) return;
+          const i = (s = e == null ? void 0 : e.message) != null ? s : String(e);
+          u(i), D(!1), c == null || c(i);
+        }
+    }
+    return S(), () => {
+      var s;
+      t = !0, (s = g.current) == null || s.destroy(), g.current = void 0;
+    };
+  }, [f, p, l, d, x, y, m, v]), n(
+    "div",
+    { style: { position: "relative", width: "100%" } },
+    o && !R ? b != null ? b : n("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(255,255,255,0.6)",
+        zIndex: 1,
+        fontSize: "14px",
+        color: "#666"
+      }
+    }, "Loading…") : null,
+    R ? n("div", {
+      style: {
+        padding: "12px 16px",
+        background: "#fef2f2",
+        border: "1px solid #fca5a5",
+        borderRadius: "6px",
+        color: "#b91c1c",
+        fontSize: "13px",
+        marginBottom: "8px"
+      }
+    }, `Deepspot error: ${R}`) : null,
+    n("div", { ref: r, className: j, style: B })
+  );
+}
+export {
+  M as DeepspotDashboard,
+  O as DeepspotReport
+};

package/dist/renderer/CardRenderer.d.ts

@@ -0,0 +1,6 @@
+import { ComponentConfig } from '../types';
+
+export declare class CardRenderer {
+    render(container: HTMLElement, component: ComponentConfig, data: Record<string, any>[]): void;
+    private formatValue;
+}

package/dist/renderer/ChartRenderer.d.ts

@@ -0,0 +1,19 @@
+import { ComponentConfig } from '../types';
+
+export declare class ChartRenderer {
+    private chart;
+    private container;
+    constructor(container: HTMLElement);
+    render(component: ComponentConfig, data: Record<string, any>[], theme: 'light' | 'dark', 
+    /** Explicit pixel height of the chart body (excludes the title bar).
+     *  Passed from DashboardRenderer so ApexCharts never has to guess the
+     *  flex-child height at render time (which can be 0 before layout settles). */
+    chartBodyHeight?: number): Promise<void>;
+    update(component: ComponentConfig, data: Record<string, any>[], theme: 'light' | 'dark'): Promise<void>;
+    destroy(): void;
+    private buildOptions;
+    private buildCartesianOptions;
+    private buildPieOptions;
+    private extractSeriesAndCategories;
+    private renderEmpty;
+}

package/dist/renderer/DashboardRenderer.d.ts

@@ -0,0 +1,64 @@
+import { RenderResponse, EmbedLevel } from '../types';
+
+export interface DashboardRenderOptions {
+    embedLevel: EmbedLevel;
+    theme: 'light' | 'dark';
+    hideFilters: boolean;
+    hideExport: boolean;
+    initialFilters: Record<string, any>;
+    onFilterChange?: (filters: Record<string, any>) => void;
+    onReady?: () => void;
+    /** Caller must fetch fresh data for (pageId, tabId) then call update() */
+    onTabSwitch: (pageId: string, tabId: string) => void;
+    /**
+     * Called for each dropdown / multi-select filter whose options are empty.
+     * The caller (DashboardElement / DeepspotSDK) fetches options from
+     * GET /dashboard-builder/{dashboardId}/filters/{filterId}/options
+     * and returns the string[] to populate the select.
+     */
+    onFetchFilterOptions?: (filterId: string) => Promise<string[]>;
+}
+export declare class DashboardRenderer {
+    private root;
+    private opts;
+    private renderData;
+    private activePageId;
+    private activeTabId;
+    private activeFilters;
+    private chartRenderers;
+    private filterRenderer;
+    private tableRenderer;
+    private cardRenderer;
+    private isLoadingTab;
+    constructor(root: HTMLElement, opts: DashboardRenderOptions);
+    render(data: RenderResponse): void;
+    update(data: RenderResponse): void;
+    goToPage(pageId: string): void;
+    goToTab(pageId: string, tabId: string): void;
+    destroy(): void;
+    exportPDF(): void;
+    exportCSV(): void;
+    updateFilterValues(values: Record<string, any>): void;
+    private buildShell;
+    private buildExportToolbar;
+    private renderNavigation;
+    private renderPageNav;
+    private renderTabNav;
+    private buildTabButtons;
+    /** Optimistically highlight new tab + show spinner, then fire callback */
+    private triggerTabSwitch;
+    private syncNavHighlight;
+    private renderFilterBar;
+    private updateFilterBar;
+    /**
+     * For every dropdown / multi-select filter whose options array is empty,
+     * call onFetchFilterOptions(filterId) and populate the select element.
+     * Mirrors: GET /dashboard-builder/{dashboardId}/filters/{filterId}/options
+     */
+    private fetchFilterOptions;
+    private renderGrid;
+    private renderComponent;
+    private showTabSpinner;
+    private hideTabSpinner;
+    private getTabsForPage;
+}

package/dist/renderer/FilterRenderer.d.ts

@@ -0,0 +1,20 @@
+import { FilterDefinition } from '../types';
+
+export declare class FilterRenderer {
+    private container;
+    private onFilterChange;
+    private currentValues;
+    constructor(container: HTMLElement, onFilterChange: (filterId: string, value: any) => void);
+    render(filters: FilterDefinition[], initialValues?: Record<string, any>): void;
+    /**
+     * Populate a dropdown / multi-select with options fetched from the API.
+     * Called asynchronously after the filter bar is rendered.
+     */
+    updateOptions(filterId: string, options: string[]): void;
+    /** Update the stored values without re-rendering (for programmatic setFilter) */
+    updateValues(values: Record<string, any>): void;
+    private renderFilter;
+    private attachListeners;
+    private escAttr;
+    private escText;
+}

package/dist/renderer/ReportRenderer.d.ts

@@ -0,0 +1,14 @@
+import { RenderResponse } from '../types';
+
+export declare class ReportRenderer {
+    private root;
+    private theme;
+    private chartRenderer;
+    private tableRenderer;
+    private cardRenderer;
+    constructor(root: HTMLElement, theme: 'light' | 'dark');
+    render(data: RenderResponse, onReady?: () => void): void;
+    update(data: RenderResponse): void;
+    destroy(): void;
+    private renderComponent;
+}

package/dist/renderer/TableRenderer.d.ts

@@ -0,0 +1,8 @@
+import { ComponentConfig } from '../types';
+
+export declare class TableRenderer {
+    render(container: HTMLElement, component: ComponentConfig, data: Record<string, any>[]): void;
+    private formatHeader;
+    private formatValue;
+    private escape;
+}

package/dist/types.d.ts

@@ -0,0 +1,140 @@
+export interface SDKConfig {
+    apiKey: string;
+    baseUrl: string;
+}
+export type EmbedLevel = 'report' | 'tab' | 'page' | 'dashboard';
+export interface EmbedDashboardOptions {
+    dashboardId: string;
+    container: string | HTMLElement;
+    /** Controls what navigation is visible and what gets lazy-loaded */
+    embedLevel?: EmbedLevel;
+    userId?: string;
+    tenantId?: string;
+    theme?: 'light' | 'dark';
+    filters?: Record<string, any>;
+    /** Initial page to show — required for embedLevel 'tab' and 'page' */
+    pageId?: string;
+    /** Initial tab to show — required for embedLevel 'tab' */
+    tabId?: string;
+    hideFilters?: boolean;
+    hideExport?: boolean;
+    height?: string;
+    onReady?: () => void;
+    onFilterChange?: (filters: Record<string, any>) => void;
+    onTabSwitch?: (pageId: string, tabId: string) => void;
+    onPageSwitch?: (pageId: string) => void;
+    onError?: (error: string) => void;
+}
+export interface EmbedReportOptions {
+    dashboardId: string;
+    componentId: string;
+    container: string | HTMLElement;
+    userId?: string;
+    tenantId?: string;
+    theme?: 'light' | 'dark';
+    filters?: Record<string, any>;
+    height?: string;
+    onReady?: () => void;
+    onError?: (error: string) => void;
+}
+export interface EmbedInstance {
+    setFilter(field: string, value: any): void;
+    setFilters(filters: Record<string, any>): void;
+    goToPage(pageId: string): void;
+    goToTab(pageId: string, tabId: string): void;
+    refresh(): void;
+    exportPDF(): void;
+    destroy(): void;
+}
+export type ComponentType = 'bar' | 'line' | 'pie' | 'donut' | 'area' | 'table' | 'number-card' | 'filter' | 'text';
+export interface ComponentPosition {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface ComponentConfig {
+    id: string;
+    type: ComponentType;
+    title: string;
+    position: ComponentPosition;
+    tabId: string;
+    pageId: string;
+    properties?: {
+        xAxis?: string;
+        yAxis?: string | string[];
+        selectedYAxisColumn?: any;
+        columns?: string[];
+        metric?: string;
+        aggregation?: string;
+        prefix?: string;
+        suffix?: string;
+        currencySymbol?: string;
+        backgroundColor?: string;
+        textColor?: string;
+        colors?: Record<string, string>;
+        showLegend?: boolean;
+        xAxisLabel?: string;
+        yAxisLabel?: string;
+        content?: string;
+        style?: Record<string, any>;
+    };
+}
+export interface PageTab {
+    id: string;
+    title: string;
+    tabOrder?: number;
+    isDefault?: boolean;
+}
+export interface DashboardPage {
+    pageId: string;
+    title: string;
+    backgroundColor?: string;
+    tabs: PageTab[];
+}
+export interface FilterDefinition {
+    filterId: string;
+    label: string;
+    type: 'dropdown' | 'multi-select' | 'date-range' | 'text-input' | 'number-input';
+    options?: string[];
+    defaultValue?: any;
+    targetComponents: string[];
+    filterOperator?: string;
+    applyToField?: string;
+}
+export interface RenderResponse {
+    embedType: 'dashboard' | 'report';
+    embedLevel: EmbedLevel;
+    dashboard: {
+        name: string;
+        theme: 'light' | 'dark';
+        /** ALL pages + tabs metadata — always returned for building navigation */
+        pages: DashboardPage[];
+    };
+    /** Currently active page ID */
+    activePage: string;
+    /** Currently active tab ID */
+    activeTab: string;
+    /** ONLY components belonging to the active page + tab */
+    components: ComponentConfig[];
+    /** Pre-executed SQL results — only for active tab's components */
+    data: Record<string, Record<string, any>[]>;
+    filters: FilterDefinition[];
+}
+export interface EmbedTokenResponse {
+    token: string;
+    expiresAt: string;
+}
+export interface ApiKey {
+    keyId: string;
+    name: string;
+    apiKey: string;
+    allowedOrigins: string[];
+    createdAt: string;
+    lastUsed?: string;
+}
+export interface CreateApiKeyPayload {
+    name: string;
+    allowedOrigins: string[];
+    tenantId?: string;
+}

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+/** Inject SDK CSS into document <head> once */
+export declare function injectStyles(): void;
+/** Resolve a CSS selector or HTMLElement to an HTMLElement */
+export declare function resolveContainer(container: string | HTMLElement): HTMLElement;

package/dist/vue/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),u=require("../DeepspotSDK-g7o9tAip.cjs"),y=d.defineComponent({name:"DeepspotDashboard",props:{apiKey:{type:String,required:!0},baseUrl:{type:String,required:!0},dashboardId:{type:String,required:!0},userId:{type:String,default:void 0},tenantId:{type:String,default:void 0},embedLevel:{type:String,default:"dashboard"},theme:{type:String,default:"light"},height:{type:String,default:"600px"},pageId:{type:String,default:void 0},tabId:{type:String,default:void 0},hideFilters:{type:Boolean,default:!1},hideExport:{type:Boolean,default:!1},filters:{type:Object,default:()=>({})}},emits:["ready","filter-change","tab-switch","error"],setup(e,{emit:r}){const i=d.ref();let t;async function o(){var l;if(i.value){t==null||t.destroy(),t=void 0;try{t=await new u.DeepspotSDK({apiKey:e.apiKey,baseUrl:e.baseUrl}).embedDashboard({dashboardId:e.dashboardId,container:i.value,userId:e.userId,tenantId:e.tenantId,embedLevel:e.embedLevel,theme:e.theme,height:e.height,pageId:e.pageId,tabId:e.tabId,hideFilters:e.hideFilters,hideExport:e.hideExport,filters:e.filters,onReady:()=>r("ready"),onFilterChange:n=>r("filter-change",n),onTabSwitch:(n,h)=>r("tab-switch",n,h),onError:n=>r("error",n)})}catch(a){r("error",(l=a==null?void 0:a.message)!=null?l:String(a))}}}return d.onMounted(()=>{o()}),d.onUnmounted(()=>{t==null||t.destroy()}),d.watch(()=>[e.dashboardId,e.userId,e.tenantId,e.apiKey,e.baseUrl,e.embedLevel,e.theme,e.height,e.pageId,e.tabId,e.hideFilters,e.hideExport],()=>{o()}),()=>d.h("div",{ref:i,style:{display:"block"}})}}),g=d.defineComponent({name:"DeepspotReport",props:{apiKey:{type:String,required:!0},baseUrl:{type:String,required:!0},dashboardId:{type:String,required:!0},componentId:{type:String,required:!0},userId:{type:String,default:void 0},tenantId:{type:String,default:void 0},theme:{type:String,default:"light"},height:{type:String,default:"400px"},filters:{type:Object,default:()=>({})}},emits:["ready","error"],setup(e,{emit:r}){const i=d.ref();let t;async function o(){var l;if(i.value){t==null||t.destroy(),t=void 0;try{t=await new u.DeepspotSDK({apiKey:e.apiKey,baseUrl:e.baseUrl}).embedReport({dashboardId:e.dashboardId,componentId:e.componentId,container:i.value,userId:e.userId,tenantId:e.tenantId,theme:e.theme,height:e.height,filters:e.filters,onReady:()=>r("ready"),onError:n=>r("error",n)})}catch(a){r("error",(l=a==null?void 0:a.message)!=null?l:String(a))}}}return d.onMounted(()=>{o()}),d.onUnmounted(()=>{t==null||t.destroy()}),d.watch(()=>[e.dashboardId,e.componentId,e.userId,e.apiKey,e.baseUrl,e.theme,e.height],()=>{o()}),()=>d.h("div",{ref:i,style:{display:"block"}})}});exports.DeepspotDashboard=y;exports.DeepspotReport=g;

package/dist/vue/index.d.ts

@@ -0,0 +1,212 @@
+export declare const DeepspotDashboard: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    apiKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    dashboardId: {
+        type: StringConstructor;
+        required: true;
+    };
+    userId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tenantId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    embedLevel: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tabId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hideFilters: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideExport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filters: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("error" | "ready" | "filter-change" | "tab-switch")[], "error" | "ready" | "filter-change" | "tab-switch", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    apiKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    dashboardId: {
+        type: StringConstructor;
+        required: true;
+    };
+    userId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tenantId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    embedLevel: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tabId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hideFilters: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideExport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filters: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    "onFilter-change"?: ((...args: any[]) => any) | undefined;
+    "onTab-switch"?: ((...args: any[]) => any) | undefined;
+}>, {
+    embedLevel: string;
+    pageId: string;
+    tabId: string;
+    theme: string;
+    height: string;
+    userId: string;
+    tenantId: string;
+    filters: Record<string, any>;
+    hideFilters: boolean;
+    hideExport: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const DeepspotReport: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    apiKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    dashboardId: {
+        type: StringConstructor;
+        required: true;
+    };
+    componentId: {
+        type: StringConstructor;
+        required: true;
+    };
+    userId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tenantId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    theme: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    filters: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("error" | "ready")[], "error" | "ready", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    apiKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    dashboardId: {
+        type: StringConstructor;
+        required: true;
+    };
+    componentId: {
+        type: StringConstructor;
+        required: true;
+    };
+    userId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tenantId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    theme: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    filters: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    theme: string;
+    height: string;
+    userId: string;
+    tenantId: string;
+    filters: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export type { EmbedInstance, EmbedLevel } from '../types';