@databrainhq/plugin 0.15.13 → 0.15.15-uat

package/README.md

@@ -1,233 +1,233 @@
-# @databrainhq/plugin
-
-> Databrain app ui web component plugin.
-
-[![NPM](https://img.shields.io/npm/v/@databrainhq/plugin.svg)](https://www.npmjs.com/package/@databrainhq/plugin) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-## Install
-
-```bash
-npm install @databrainhq/plugin
-```
-
-## Usage
-
-React/Solidjs
-
-Import in main/index/App
-```tsx
-import '@databrainhq/plugin/web';
-```
-Then use it anywhere in your app
-
-Integrating Dashboard
-
-```tsx
-const Example = () => {
-  return (
-    <dbn-dashboard
-      token="Your Guest Token"
-      dashboardId="Your Dashboard Id"
-      options={{
-        disableMetricCreation: false,
-        disableMetricUpdation: false,
-        disableMetricDeletion: false,
-        disableLayoutCustomization: false,
-        chartColors: [
-          'violet',
-          'indigo',
-          'blue',
-          'green',
-          'yellow',
-          'orange',
-          'red',
-          'pink',
-          'gray',
-        ],
-      }}
-      theme={YOUR_THEME}
-    />
-  );
-};
-```
-
-Integrating Metric
-
-```tsx
-const Example = () => {
-  return (
-    <Metric
-      token="Your Guest Token"
-      metricId="Your Metric Id"
-      width="500px"
-      height="300px"
-      chartRendererType="canvas"
-      chartColors={[
-        'violet',
-        'indigo',
-        'blue',
-        'green',
-        'yellow',
-        'orange',
-        'red',
-        'pink',
-        'gray',
-      ]}
-      theme={YOUR_THEME}
-    />
-  );
-};
-```
-
-Vue
-
-Import in main/index/App
-```vue
-<script setup lang="ts">
-import '@databrainhq/plugin/web';
-</script>
-```
-Then use it anywhere in your app
-
-Integrating Dashboard
-
-```vue
-<script setup lang="ts">
-  // your component logic
-</script>
-<template>
-  <dbn-dashboard
-    :token="/*YOUR GUEST TOKEN*/"
-    :options="/*YOUR ACCESS PERMISSION OPTIONS*/"
-    :theme="/*YOUR THEME*/"
-    :dashboardId="/*YOUR DASHBORD ID*/"
-  ></dbn-dashboard>
-</template>
-```
-
-Integrating Metric
-
-```vue
-<script setup lang="ts">
-  // your component logic
-</script>
-<template>
-  <dbn-metric
-    :token="/*YOUR GUEST TOKEN*/"
-    chartRendererType="canvas"
-    :theme="/*YOUR THEME*/"
-    :dashboardId="/*YOUR DASHBORD ID*/"
-    width="500"
-    height="400"
-    :style="/* YOUR STYLEs */"
-    className="YOUR CLASS"
-  ></dbn-metric>
-</template>
-```
-
-Svelte
-
-Import in main/index/App
-
-```svelte
-<script lang="ts">
-import '@databrainhq/plugin/web';
-</script>
-```
-
-Then use it anywhere in your app
-
-Integrating Dashboard
-
-```svelte
-<script lang="ts">
-  // your component logic
-</script>
-<main>
-  <dbn-dashboard
-    token={/*YOUR GUEST TOKEN*/}
-    options={/*YOUR ACCESS PERMISSION OPTIONS*/}
-    theme={/*YOUR THEME*/}
-    dashboardId={/*YOUR DASHBORD ID*/}
-  ></dbn-dashboard>
-</main>
-```
-
-Integrating Metric
-
-```svelte
-<script lang="ts">
-// your component logic
-</script>
-<main>
-  <dbn-metric
-    token={/*YOUR GUEST TOKEN*/}
-    chartRendererType="canvas"
-    theme={/*YOUR THEME*/}
-    dashboardId="/*YOUR DASHBORD ID*/"
-    width="500"
-    height="400"
-    style={/* YOUR STYLEs */}
-    className="YOUR CLASS"
-  ></dbn-metric>
-</main>
-```
-
-Angular
-
-Add suport for custom elements/web components in app.module.ts
-
-```ts
-// app.module.ts
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-
-export class AppModule {}
-```
-Import in app.component.ts
-
-```ts
-import '@databrainhq/plugin/web';
-```
-
-Then use it anywhere in your app
-
-Integrating Dashboard
-
-```html
-<dbn-dashboard
-  token="YOUR GUEST TOKEN"
-  options="YOUR ACCESS PERMISSION OPTIONS"
-  theme="YOUR THEME"
-  dashboardId="YOUR DASHBORD ID"
-></dbn-dashboard>
-```
-
-Integrating Metric
-
-```html
-<dbn-metric
-  token="YOUR GUEST TOKEN"
-  chartRendererType="canvas"
-  theme="YOUR THEME"
-  dashboardId="YOUR DASHBORD ID"
-  width="500"
-  height="400"
-  style="YOUR STYLE"
-  className="YOUR CLASS"
-></dbn-metric>
-```
-
-## License
-
-MIT © [databrainhq](https://github.com/databrainhq)
+# @databrainhq/plugin
+
+> Databrain app ui web component plugin.
+
+[![NPM](https://img.shields.io/npm/v/@databrainhq/plugin.svg)](https://www.npmjs.com/package/@databrainhq/plugin) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install @databrainhq/plugin
+```
+
+## Usage
+
+React/Solidjs
+
+Import in main/index/App
+```tsx
+import '@databrainhq/plugin/web';
+```
+Then use it anywhere in your app
+
+Integrating Dashboard
+
+```tsx
+const Example = () => {
+  return (
+    <dbn-dashboard
+      token="Your Guest Token"
+      dashboardId="Your Dashboard Id"
+      options={{
+        disableMetricCreation: false,
+        disableMetricUpdation: false,
+        disableMetricDeletion: false,
+        disableLayoutCustomization: false,
+        chartColors: [
+          'violet',
+          'indigo',
+          'blue',
+          'green',
+          'yellow',
+          'orange',
+          'red',
+          'pink',
+          'gray',
+        ],
+      }}
+      theme={YOUR_THEME}
+    />
+  );
+};
+```
+
+Integrating Metric
+
+```tsx
+const Example = () => {
+  return (
+    <Metric
+      token="Your Guest Token"
+      metricId="Your Metric Id"
+      width="500px"
+      height="300px"
+      chartRendererType="canvas"
+      chartColors={[
+        'violet',
+        'indigo',
+        'blue',
+        'green',
+        'yellow',
+        'orange',
+        'red',
+        'pink',
+        'gray',
+      ]}
+      theme={YOUR_THEME}
+    />
+  );
+};
+```
+
+Vue
+
+Import in main/index/App
+```vue
+<script setup lang="ts">
+import '@databrainhq/plugin/web';
+</script>
+```
+Then use it anywhere in your app
+
+Integrating Dashboard
+
+```vue
+<script setup lang="ts">
+  // your component logic
+</script>
+<template>
+  <dbn-dashboard
+    :token="/*YOUR GUEST TOKEN*/"
+    :options="/*YOUR ACCESS PERMISSION OPTIONS*/"
+    :theme="/*YOUR THEME*/"
+    :dashboardId="/*YOUR DASHBORD ID*/"
+  ></dbn-dashboard>
+</template>
+```
+
+Integrating Metric
+
+```vue
+<script setup lang="ts">
+  // your component logic
+</script>
+<template>
+  <dbn-metric
+    :token="/*YOUR GUEST TOKEN*/"
+    chartRendererType="canvas"
+    :theme="/*YOUR THEME*/"
+    :dashboardId="/*YOUR DASHBORD ID*/"
+    width="500"
+    height="400"
+    :style="/* YOUR STYLEs */"
+    className="YOUR CLASS"
+  ></dbn-metric>
+</template>
+```
+
+Svelte
+
+Import in main/index/App
+
+```svelte
+<script lang="ts">
+import '@databrainhq/plugin/web';
+</script>
+```
+
+Then use it anywhere in your app
+
+Integrating Dashboard
+
+```svelte
+<script lang="ts">
+  // your component logic
+</script>
+<main>
+  <dbn-dashboard
+    token={/*YOUR GUEST TOKEN*/}
+    options={/*YOUR ACCESS PERMISSION OPTIONS*/}
+    theme={/*YOUR THEME*/}
+    dashboardId={/*YOUR DASHBORD ID*/}
+  ></dbn-dashboard>
+</main>
+```
+
+Integrating Metric
+
+```svelte
+<script lang="ts">
+// your component logic
+</script>
+<main>
+  <dbn-metric
+    token={/*YOUR GUEST TOKEN*/}
+    chartRendererType="canvas"
+    theme={/*YOUR THEME*/}
+    dashboardId="/*YOUR DASHBORD ID*/"
+    width="500"
+    height="400"
+    style={/* YOUR STYLEs */}
+    className="YOUR CLASS"
+  ></dbn-metric>
+</main>
+```
+
+Angular
+
+Add suport for custom elements/web components in app.module.ts
+
+```ts
+// app.module.ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+
+export class AppModule {}
+```
+Import in app.component.ts
+
+```ts
+import '@databrainhq/plugin/web';
+```
+
+Then use it anywhere in your app
+
+Integrating Dashboard
+
+```html
+<dbn-dashboard
+  token="YOUR GUEST TOKEN"
+  options="YOUR ACCESS PERMISSION OPTIONS"
+  theme="YOUR THEME"
+  dashboardId="YOUR DASHBORD ID"
+></dbn-dashboard>
+```
+
+Integrating Metric
+
+```html
+<dbn-metric
+  token="YOUR GUEST TOKEN"
+  chartRendererType="canvas"
+  theme="YOUR THEME"
+  dashboardId="YOUR DASHBORD ID"
+  width="500"
+  height="400"
+  style="YOUR STYLE"
+  className="YOUR CLASS"
+></dbn-metric>
+```
+
+## License
+
+MIT © [databrainhq](https://github.com/databrainhq)

package/dist/components/Chart/SingleValueChart.d.ts

@@ -20,6 +20,8 @@ export type SingleValueChartProps = {
         }[];
         isEnableTruncate?: boolean;
         truncateValue?: number;
+        upVariant?: string;
+        downVariant?: string;
     };
     value: string | number;
     hideBorder?: boolean;

package/dist/components/ChartSettingsPopup/components/ChartConfigure/index.d.ts

@@ -6,6 +6,7 @@ export type ComparisonLagProps = {
     comparisonLagSettings: ComparisonLagSettings;
     dateTimeColumnList: FloatingDropDownOption[];
     onSaveComparisonLag: () => void;
+    onDisableComparisonSettings?: () => void;
 } | undefined;
 type Props = {
     chartSettings: ChartSettingsType;

package/dist/components/FilterDropDown/index.d.ts

@@ -24,5 +24,7 @@ export type MultiFilterDropDownProps = Pick<FilterDropDownProps, 'autoSelected'
     isDisablelabel?: boolean;
     radius?: string;
     isFilter?: boolean;
+    isSelectAllEnabled?: boolean;
+    isSelectAllOn?: boolean;
 };
 export declare const MultiFilterDropdown: React.FC<MultiFilterDropDownProps>;

package/dist/components/FloatingDropDown/index.d.ts

@@ -32,6 +32,7 @@ export type FloatingDropDownProps = {
     isLoadingData?: boolean;
     hasOnlyColumnName?: boolean;
     error?: string;
+    menuZIndex?: number;
 };
-export declare const FloatingDropDown: ({ id, label, labelVariant, selectedOption, onChange, button, options, isDisabled, customButton, icon, buttonWidth, buttonHeight, menuWidth, size, isSearchEnabled, searchPlaceholder, placeholder, children, radius, isFilter, disableAutoClose, isClearEnabled, className, menuMaxHeight, isImportant, dataTestTitle, isAutoSelectOption, onSearch, isLoadingData, error, }: FloatingDropDownProps) => React.JSX.Element;
+export declare const FloatingDropDown: ({ id, label, labelVariant, selectedOption, onChange, button, options, isDisabled, customButton, icon, buttonWidth, buttonHeight, menuWidth, size, isSearchEnabled, searchPlaceholder, placeholder, children, radius, isFilter, disableAutoClose, isClearEnabled, className, menuMaxHeight, isImportant, dataTestTitle, isAutoSelectOption, onSearch, isLoadingData, error, menuZIndex, }: FloatingDropDownProps) => React.JSX.Element;
 export declare const FloatingDropDownWithSubValues: ({ label, labelVariant, selectedOption, onChange, button, options, isDisabled, customButton, icon, buttonWidth, menuWidth, isSearchEnabled, searchPlaceholder, placeholder, children, radius, isFilter, disableAutoClose, isClearEnabled, isImportant, hasOnlyColumnName, }: FloatingDropDownProps) => React.JSX.Element;

package/dist/components/GlobalFilters/Filters.d.ts

@@ -22,6 +22,7 @@ type FiltersProps = {
     tenancyLevel: string;
     clientColumnType: ClientColumnType;
     hideDatePickerOptions?: string[];
+    isEndUserApp?: boolean;
 };
 export declare const Filters: React.FC<FiltersProps>;
 export {};

package/dist/components/GlobalFilters/HorizontalFilters.d.ts

@@ -29,6 +29,7 @@ type HorizontalFiltersProps = {
     };
     isEditLayoutEnabled: boolean;
     hideDatePickerOptions?: string[];
+    isEndUserApp?: boolean;
 };
 export declare const HorizontalFilters: React.FC<HorizontalFiltersProps>;
 export {};

package/dist/components/GlobalFilters/index.d.ts

@@ -39,6 +39,7 @@ type GlobalFiltersProps = {
     hideDatePickerOptions?: string[];
     filterIconColor?: string;
     filterButtonBgColor?: string;
+    isEndUserApp?: boolean;
 };
 export declare const getFormattedFilterValue: (obj: {
     operator: string;
@@ -72,6 +73,7 @@ type FilterPopupProps = {
     hideDatePickerOptions?: string[];
     filterIconColor?: string;
     filterButtonBgColor?: string;
+    isEndUserApp?: boolean;
 };
 export declare const FilterPopup: React.FC<FilterPopupProps>;
 export {};

package/dist/components/MetricList/components/FullScreenView/ChartPropertiesPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartSettingsType } from '@/types';
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    zIndex: number;
+    chartSettings: ChartSettingsType;
+    columnList: string[];
+    setChartSettings: React.Dispatch<React.SetStateAction<ChartSettingsType>>;
+};
+declare const ChartPropertiesPanel: ({ isOpen, onClose, zIndex, chartSettings, setChartSettings, columnList, }: Props) => React.JSX.Element;
+export default ChartPropertiesPanel;

package/dist/components/MultiSelectDropdown/index.d.ts

@@ -31,6 +31,9 @@ export type MultiSelectDropdownProps = Omit<MultiSelectAccordianDropdownProps, '
     isAutoSelectOption?: boolean;
     isLoadingData?: boolean;
     error?: string;
+    menuZIndex?: number;
+    isSelectAllEnabled?: boolean;
+    isSelectAllOn?: boolean;
 };
 export declare const MultiSelectAccordianDropdown: ({ label, labelVariant, selectedOption, onChange, button, options, isDisabled, icon, buttonWidth, menuWidth, isSearchEnabled, searchIcon, closeControl, searchPlaceholder, radius, }: MultiSelectAccordianDropdownProps) => React.JSX.Element;
-export declare const MultiSelectDropdown: ({ id, label, labelVariant, selectedOption, onChange, button, options, isDisabled, icon, buttonWidth, menuWidth, isSearchEnabled, searchIcon, closeControl, searchPlaceholder, isShowSelectedOptions, radius, isFilter, dataTestTitle, isAutoSelectOption, isLoadingData, error, }: MultiSelectDropdownProps) => React.JSX.Element;
+export declare const MultiSelectDropdown: ({ id, label, labelVariant, selectedOption: selectedOption_temp, onChange, button, options, isDisabled, icon, buttonWidth, menuWidth, isSearchEnabled, searchIcon, closeControl, searchPlaceholder, isShowSelectedOptions, radius, isFilter, dataTestTitle, isAutoSelectOption, isLoadingData, error, menuZIndex, isSelectAllEnabled, isSelectAllOn, }: MultiSelectDropdownProps) => React.JSX.Element;

package/dist/components/PopoverMenu/index.d.ts

@@ -29,6 +29,8 @@ export type PopoverMenuProps = React.PropsWithChildren & {
     isMenuOpen?: boolean;
     setMenuOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     dataTestTitle?: string;
+    menuZIndex?: number;
+    popoverButtonId?: string;
 };
 export declare const PopoverMenu: React.FC<PopoverMenuProps>;
 export {};

package/dist/consts/metricOptions.d.ts

@@ -44,6 +44,8 @@ export declare const DEFAULT_COMPARISON_LAG_SETTINGS: {
         value: string;
         label: string;
     };
+    differenceType: "PERCENTAGE_DIFFERENCE" | "DIFFERENCE";
+    timeColumnLabel: string;
     periodLag: number;
 };
 export declare const DEFAULT_FORECAST_VALUES: {

package/dist/helpers/autoCompleteHelpers.d.ts

@@ -50,6 +50,8 @@ export declare const getChartDimensions: (columns: SqlColumns, chartType: string
     xAxis: string;
     singleValue: string;
     progressData: string;
+    progressMaxData: string;
+    progressMinData: string;
 };
 export declare const getEnabledCharts: (data: Record<string, any>[], columns: SqlColumns) => string[];
 export declare const getColumns: ({ columns, data, dbName, }: {

package/dist/helpers/createMetric.d.ts

@@ -14,3 +14,5 @@ export declare const isDateStringValid: (dateString: string) => boolean;
 export declare const getSavedChartFields: (optionList: string[], newData?: any[]) => string[];
 export declare const setChartFields: ({ chartType, chartDimensions, chartMetrics, chartAggregateColumns, resultData, configAggregates, pivotHeaderColumns, chartTimeColumns, setChartSettings, chartSettings, configuration, }: SetChartFieldParams) => void;
 export declare const getDatabaseName: (name: string) => "bigquery" | "mysql" | "postgresql";
+export declare const getWordCount: (text: string) => number;
+export declare const generateRandomId: (length?: number) => string;

package/dist/hooks/useDashboardContext.d.ts

@@ -13,6 +13,7 @@ interface DashboardContextType {
         externalDashboard: any;
         rlsSettings: any | undefined;
         appFilters: any | undefined;
+        dashboardAppFilters: any | undefined;
         companyTenancyType: any;
         isAllowedToCreateMetrics: boolean | undefined;
         isAllowedToDeleteMetrics: boolean | undefined;

package/dist/hooks/useMetricCard.d.ts

@@ -100,5 +100,9 @@ export declare const useMetricCard: ({ metric, globalFilters, rlsFilters, client
     setSummary: import("react").Dispatch<import("react").SetStateAction<ChartReportStateType>>;
     dataMartRelationships: any;
     onChartChange: (chartType: ChartSettingsType['chartType']) => void;
+    isCompareValue: boolean;
+    isShowChartPropertyPanel: boolean;
+    setShowChartPropertyPanel: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    columnList: string[];
 };
 export {};

package/dist/hooks/useNewEmbeddedDashboard.d.ts

@@ -29,6 +29,7 @@ declare const useNewEmbeddedDashboard: ({ token, dashboardId, }: {
         isAllClient: boolean;
         metricCreationMode: string;
         isAllowedManageMetrics: boolean;
+        dashboardAppFilters: any;
     };
 };
 export default useNewEmbeddedDashboard;