deepspotscreen-sdk 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -147,8 +147,11 @@ export declare interface FilterDefinition {
     options?: string[];
     defaultValue?: any;
     targetComponents: string[];
+    /** Per-component column overrides: { componentId → columnName } */
+    columnMappings?: Record<string, string>;
     filterOperator?: string;
     applyToField?: string;
+    filterLevel?: 'global' | 'component';
 }
 
 export declare interface PageTab {

package/dist/react/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");function E({apiKey:f,baseUrl:l,dashboardId:p,userId:d,tenantId:m,embedLevel:y,theme:v,height:x,pageId:z,tabId:j,filters:i,hideFilters:q,hideExport:L,onReady:b,onFilterChange:n,onTabSwitch:g,onError:o,className:S,style:D,loadingNode:u}){const t=e.useRef(null),R=e.useRef(void 0),[s,r]=e.useState(!0),[c,k]=e.useState("");return e.useEffect(()=>{if(!t.current)return;let P=!1;async function $(){var w;if(t.current)try{r(!0),k("");const{DeepspotSDK:a}=await Promise.resolve().then(()=>require("../DeepspotSDK-1R3OY1xG.cjs"));if(P||!t.current)return;const C=await new a({apiKey:f,baseUrl:l}).embedDashboard({dashboardId:p,container:t.current,userId:d,tenantId:m,embedLevel:y,theme:v,height:x,pageId:z,tabId:j,filters:i,hideFilters:q,hideExport:L,onReady:b,onFilterChange:n,onTabSwitch:g,onError:o});if(P){C.destroy();return}R.current=C,r(!1)}catch(a){if(P)return;const B=(w=a==null?void 0:a.message)!=null?w:String(a);k(B),r(!1),o==null||o(B)}}return $(),()=>{var w;P=!0,(w=R.current)==null||w.destroy(),R.current=void 0}},[f,l,p,d,m,y,v,x,z,j,q,L]),e.createElement("div",{style:{position:"relative",width:"100%"}},s&&!c?u!=null?u:e.createElement("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,c?e.createElement("div",{style:{padding:"12px 16px",background:"#fef2f2",border:"1px solid #fca5a5",borderRadius:"6px",color:"#b91c1c",fontSize:"13px",marginBottom:"8px"}},`Deepspot error: ${c}`):null,e.createElement("div",{ref:t,className:S,style:D}))}function M({apiKey:f,baseUrl:l,dashboardId:p,componentId:d,userId:m,tenantId:y,theme:v,height:x,filters:z,onReady:j,onError:i,className:q,style:L,loadingNode:b}){const n=e.useRef(null),g=e.useRef(void 0),[o,S]=e.useState(!0),[D,u]=e.useState("");return e.useEffect(()=>{if(!n.current)return;let t=!1;async function R(){var s;if(n.current)try{S(!0),u("");const{DeepspotSDK:r}=await Promise.resolve().then(()=>require("../DeepspotSDK-1R3OY1xG.cjs"));if(t||!n.current)return;const k=await new r({apiKey:f,baseUrl:l}).embedReport({dashboardId:p,componentId:d,container:n.current,userId:m,tenantId:y,theme:v,height:x,filters:z,onReady:j,onError:i});if(t){k.destroy();return}g.current=k,S(!1)}catch(r){if(t)return;const c=(s=r==null?void 0:r.message)!=null?s:String(r);u(c),S(!1),i==null||i(c)}}return R(),()=>{var s;t=!0,(s=g.current)==null||s.destroy(),g.current=void 0}},[f,l,p,d,m,y,v,x]),e.createElement("div",{style:{position:"relative",width:"100%"}},o&&!D?b!=null?b:e.createElement("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,D?e.createElement("div",{style:{padding:"12px 16px",background:"#fef2f2",border:"1px solid #fca5a5",borderRadius:"6px",color:"#b91c1c",fontSize:"13px",marginBottom:"8px"}},`Deepspot error: ${D}`):null,e.createElement("div",{ref:n,className:q,style:L}))}exports.DeepspotDashboard=E;exports.DeepspotReport=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");function E({apiKey:f,baseUrl:l,dashboardId:p,userId:d,tenantId:m,embedLevel:y,theme:v,height:x,pageId:z,tabId:j,filters:i,hideFilters:q,hideExport:L,onReady:b,onFilterChange:n,onTabSwitch:g,onError:o,className:S,style:D,loadingNode:u}){const t=e.useRef(null),R=e.useRef(void 0),[s,r]=e.useState(!0),[c,k]=e.useState("");return e.useEffect(()=>{if(!t.current)return;let P=!1;async function $(){var w;if(t.current)try{r(!0),k("");const{DeepspotSDK:a}=await Promise.resolve().then(()=>require("../DeepspotSDK-Ci6IqiPC.cjs"));if(P||!t.current)return;const C=await new a({apiKey:f,baseUrl:l}).embedDashboard({dashboardId:p,container:t.current,userId:d,tenantId:m,embedLevel:y,theme:v,height:x,pageId:z,tabId:j,filters:i,hideFilters:q,hideExport:L,onReady:b,onFilterChange:n,onTabSwitch:g,onError:o});if(P){C.destroy();return}R.current=C,r(!1)}catch(a){if(P)return;const B=(w=a==null?void 0:a.message)!=null?w:String(a);k(B),r(!1),o==null||o(B)}}return $(),()=>{var w;P=!0,(w=R.current)==null||w.destroy(),R.current=void 0}},[f,l,p,d,m,y,v,x,z,j,q,L]),e.createElement("div",{style:{position:"relative",width:"100%"}},s&&!c?u!=null?u:e.createElement("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,c?e.createElement("div",{style:{padding:"12px 16px",background:"#fef2f2",border:"1px solid #fca5a5",borderRadius:"6px",color:"#b91c1c",fontSize:"13px",marginBottom:"8px"}},`Deepspot error: ${c}`):null,e.createElement("div",{ref:t,className:S,style:D}))}function M({apiKey:f,baseUrl:l,dashboardId:p,componentId:d,userId:m,tenantId:y,theme:v,height:x,filters:z,onReady:j,onError:i,className:q,style:L,loadingNode:b}){const n=e.useRef(null),g=e.useRef(void 0),[o,S]=e.useState(!0),[D,u]=e.useState("");return e.useEffect(()=>{if(!n.current)return;let t=!1;async function R(){var s;if(n.current)try{S(!0),u("");const{DeepspotSDK:r}=await Promise.resolve().then(()=>require("../DeepspotSDK-Ci6IqiPC.cjs"));if(t||!n.current)return;const k=await new r({apiKey:f,baseUrl:l}).embedReport({dashboardId:p,componentId:d,container:n.current,userId:m,tenantId:y,theme:v,height:x,filters:z,onReady:j,onError:i});if(t){k.destroy();return}g.current=k,S(!1)}catch(r){if(t)return;const c=(s=r==null?void 0:r.message)!=null?s:String(r);u(c),S(!1),i==null||i(c)}}return R(),()=>{var s;t=!0,(s=g.current)==null||s.destroy(),g.current=void 0}},[f,l,p,d,m,y,v,x]),e.createElement("div",{style:{position:"relative",width:"100%"}},o&&!D?b!=null?b:e.createElement("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,D?e.createElement("div",{style:{padding:"12px 16px",background:"#fef2f2",border:"1px solid #fca5a5",borderRadius:"6px",color:"#b91c1c",fontSize:"13px",marginBottom:"8px"}},`Deepspot error: ${D}`):null,e.createElement("div",{ref:n,className:q,style:L}))}exports.DeepspotDashboard=E;exports.DeepspotReport=M;

package/dist/react/index.mjs

@@ -30,7 +30,7 @@ function M({
       if (t.current)
         try {
           e(!0), k("");
-          const { DeepspotSDK: a } = await import("../DeepspotSDK-ClR0wrhx.js");
+          const { DeepspotSDK: a } = await import("../DeepspotSDK-smoJaflG.js");
           if (C || !t.current) return;
           const G = await new a({ apiKey: f, baseUrl: p }).embedDashboard({
             dashboardId: l,
@@ -123,7 +123,7 @@ function O({
       if (r.current)
         try {
           D(!0), u("");
-          const { DeepspotSDK: e } = await import("../DeepspotSDK-ClR0wrhx.js");
+          const { DeepspotSDK: e } = await import("../DeepspotSDK-smoJaflG.js");
           if (t || !r.current) return;
           const k = await new e({ apiKey: f, baseUrl: p }).embedReport({
             dashboardId: l,

package/dist/renderer/DashboardRenderer.d.ts

@@ -21,7 +21,10 @@ export interface DashboardRenderOptions {
      * The caller fetches options from
      * GET /dashboard-builder/{dashboardId}/filters/{filterId}/options
      */
-    onFetchFilterOptions?: (filterId: string) => Promise<string[]>;
+    onFetchFilterOptions?: (filterId: string) => Promise<Array<string | {
+        value: string;
+        label: string;
+    }>>;
     /**
      * Called by TableRenderer when the user navigates to a page in an embedded table.
      */
@@ -39,6 +42,8 @@ export declare class DashboardRenderer {
     private activePageId;
     private activeTabId;
     private activeFilters;
+    private activeFilterOperators;
+    private activeLocalFilters;
     private chartRenderers;
     private filterRenderer;
     private tableRenderer;
@@ -53,6 +58,15 @@ export declare class DashboardRenderer {
     destroy(): void;
     exportPDF(): void;
     exportCSV(): void;
+    /** Returns a snapshot of the currently active filter values (used by DeepspotSDK onTabSwitch). */
+    getActiveFilters(): Record<string, any>;
+    /** Returns a snapshot of the active filter operators (=, LIKE, IN, etc.) keyed by applyToField. */
+    getActiveFilterOperators(): Record<string, string>;
+    /** Returns local (component-scoped) filter values keyed by filterId. */
+    getActiveLocalFilters(): Record<string, {
+        value: any;
+        operator: string;
+    }>;
     updateFilterValues(values: Record<string, any>): void;
     private buildShell;
     private buildExportToolbar;
@@ -64,11 +78,28 @@ export declare class DashboardRenderer {
     private syncNavHighlight;
     private renderFilterBar;
     private updateFilterBar;
-    /** Convert inline-filter ComponentConfig entries to FilterDefinition shape */
+    /** Combines global activeFilters and local filter values (keyed by filterId)
+     *  so FilterRenderer can show correct active state for targeted filters. */
+    private mergedFilterValues;
+    /**
+     * Returns true when a filter should appear in the global top filter bar.
+     * A filter is global when the matching inline-filter component has
+     * filter_scope/scope !== 'local' and filterLevel !== 'component'.
+     */
+    private filterIsGlobal;
+    /** Filters from renderData.filters[] that should appear in the global top panel. */
+    private globalFilters;
+    /**
+     * Filters that are component-scoped (filter_scope='local').
+     * Source of truth is filters[] — which has applyToField, targetComponents, etc.
+     * The matching inline-filter component in components[] provides the scope signal.
+     */
     private inlineFiltersAsDefinitions;
     private fetchFilterOptions;
     private renderGrid;
     private renderComponent;
+    private attachInlineFilterBtn;
+    private buildInlineFilterPop;
     private showTabSpinner;
     private hideTabSpinner;
     /**

package/dist/renderer/FilterRenderer.d.ts

@@ -1,20 +1,43 @@
 import { FilterDefinition } from '../types';
 
+type FilterOption = string | {
+    value: string;
+    label: string;
+};
 export declare class FilterRenderer {
     private container;
     private onFilterChange;
-    private currentValues;
-    constructor(container: HTMLElement, onFilterChange: (filterId: string, value: any) => void);
+    private filters;
+    private state;
+    private activePopoverId;
+    constructor(container: HTMLElement, onFilterChange: (filterId: string, value: any, operator?: string) => 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) */
+    updateOptions(filterId: string, options: FilterOption[]): void;
+    setLoading(filterId: string, loading: boolean): void;
     updateValues(values: Record<string, any>): void;
-    private renderFilter;
-    private attachListeners;
+    private paint;
+    private renderBadge;
+    private renderPopoverHtml;
+    private renderValuesControl;
+    private renderMultiSelectControl;
+    private renderOpts;
+    private bindAll;
+    private bindPopover;
+    private bindOpts;
+    private bindChips;
+    private togglePopover;
+    private closePopover;
+    private closePopoverOnOutsideClick;
+    private applyFilter;
+    private clearFilter;
+    private repaintBadge;
+    private repaintBadges;
+    private repaintOpts;
+    private refreshPopoverOpts;
+    private repaintChips;
+    resetAll(): void;
+    private optLabel;
     private escAttr;
     private escText;
 }
+export {};

package/dist/types.d.ts

@@ -140,8 +140,11 @@ export interface FilterDefinition {
     options?: string[];
     defaultValue?: any;
     targetComponents: string[];
+    /** Per-component column overrides: { componentId → columnName } */
+    columnMappings?: Record<string, string>;
     filterOperator?: string;
     applyToField?: string;
+    filterLevel?: 'global' | 'component';
 }
 export interface RenderResponse {
     embedType: 'dashboard' | 'report';

package/dist/vue/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),u=require("../DeepspotSDK-1R3OY1xG.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),u=require("../DeepspotSDK-Ci6IqiPC.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.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as h, ref as o, onMounted as u, onUnmounted as y, watch as g, h as b } from "vue";
-import { DeepspotSDK as f } from "../DeepspotSDK-ClR0wrhx.js";
+import { DeepspotSDK as f } from "../DeepspotSDK-smoJaflG.js";
 const m = h({
   name: "DeepspotDashboard",
   props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepspotscreen-sdk",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Deepspot Embedded Analytics SDK — embed dashboards and reports in any website",
   "license": "MIT",
   "type": "module",