@databrainhq/plugin 0.10.23 → 0.10.151

package/README.md

@@ -1,6 +1,6 @@
 # @databrainhq/plugin
 
-> Databrain app ui 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)
 
@@ -12,15 +12,20 @@ npm install @databrainhq/plugin
 
 ## Usage
 
-Integrating Dashboard
+React/Solidjs
 
+Import in main/index/App
 ```tsx
-import { Dashboard } from '@databrainhq/plugin';
-import '@databrainhq/plugin/dist/style.css';
+import '@databrainhq/plugin/web';
+```
+Then use it anywhere in your app
+
+Integrating Dashboard
 
+```tsx
 const Example = () => {
   return (
-    <Dashboard
+    <dbn-dashboard
       token="Your Guest Token"
       dashboardId="Your Dashboard Id"
       options={{
@@ -49,9 +54,6 @@ const Example = () => {
 Integrating Metric
 
 ```tsx
-import { Metric } from '@databrainhq/plugin';
-import '@databrainhq/plugin/dist/style.css';
-
 const Example = () => {
   return (
     <Metric
@@ -77,6 +79,155 @@ const Example = () => {
 };
 ```
 
+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

@@ -9,6 +9,7 @@ export type SingleValueChartProps = {
         comparisonValueFontSize?: number;
         comparisonTimePeriod?: number;
         comparisonTimeGrain?: string;
+        comparisonSuffix?: string;
     };
     value: string | number;
     hideBorder?: boolean;
@@ -16,6 +17,8 @@ export type SingleValueChartProps = {
     className?: string;
     onChartReady?: () => void;
     comparisonValue?: string;
+    trendLineOptions?: any;
+    events: any;
 };
-declare const _default: React.MemoExoticComponent<({ value, settings, chartClickConfig, hideBorder, className, onChartReady, comparisonValue, }: SingleValueChartProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value, settings, chartClickConfig, hideBorder, className, onChartReady, comparisonValue, trendLineOptions, events, }: SingleValueChartProps) => JSX.Element>;
 export default _default;

package/dist/components/ChartPopup/components/UnderlyingData/index.d.ts

@@ -5,7 +5,8 @@ type UnderlyingDataProps = {
     isShowUnderlyingData: boolean;
     value: any;
     getUnderlyingData: GetUnderlyingData;
-    columnName: string;
+    columnName: string | undefined;
+    isSingleValueChart: boolean;
 };
-declare const _default: React.MemoExoticComponent<({ isShowUnderlyingData, setShowUnderlyingData, getUnderlyingData, columnName, value, }: UnderlyingDataProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isShowUnderlyingData, setShowUnderlyingData, getUnderlyingData, columnName, value, isSingleValueChart, }: UnderlyingDataProps) => JSX.Element>;
 export default _default;

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

@@ -3,7 +3,7 @@ import { ClickActionsConfig, GetUnderlyingData } from '@/types';
 export type ChartPopupProps = React.PropsWithChildren & {
     getUnderlyingData: GetUnderlyingData;
     value: any;
-    columnName: string;
+    columnName: string | undefined;
     menuClass?: string;
     menuContainerClass?: string;
     isOpen: boolean;
@@ -13,8 +13,9 @@ export type ChartPopupProps = React.PropsWithChildren & {
         containerRef: React.RefObject<HTMLDivElement>;
         event: any;
     };
+    isSingleValueChart: boolean;
     position?: 'left' | 'right' | 'top' | 'bottom' | 'left-bottom-end' | 'right-bottom-end' | 'left-top-end' | 'right-top-end' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' | 'center' | 'dynamic';
 };
-export declare const ChartPopup: ({ position, menuContainerClass, menuClass, isOpen, setOpen, value, columnName, getUnderlyingData, clickBehaviourConfigs, elementRef, }: ChartPopupProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ position, menuContainerClass, menuClass, isOpen, setOpen, value, columnName, getUnderlyingData, clickBehaviourConfigs, elementRef, }: ChartPopupProps) => JSX.Element>;
+export declare const ChartPopup: ({ position, menuContainerClass, menuClass, isOpen, setOpen, value, columnName, getUnderlyingData, clickBehaviourConfigs, elementRef, isSingleValueChart, }: ChartPopupProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ position, menuContainerClass, menuClass, isOpen, setOpen, value, columnName, getUnderlyingData, clickBehaviourConfigs, elementRef, isSingleValueChart, }: ChartPopupProps) => JSX.Element>;
 export default _default;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export declare const DrillBreadCrumb: ({ dimensions, drilledLevel, }: {
+export declare const DrillBreadCrumb: ({ dimensions, drilledLevel, onResetLevel, }: {
     dimensions: string[];
     drilledLevel: number;
+    onResetLevel: () => void;
 }) => JSX.Element;
 export default DrillBreadCrumb;

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

@@ -10,13 +10,13 @@ type NumberFieldProps = {
         isShowHorizontal?: boolean;
     };
     defaultValues?: {
-        min: number;
-        max: number;
+        min: number | null;
+        max: number | null;
     };
     className?: string;
     onChange?: (value: {
-        min: number;
-        max: number;
+        min: number | null;
+        max: number | null;
     }) => void;
     label?: string;
 };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const InternetFailure: () => JSX.Element;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { FloatingDropDownOption, RlsCondition } from '@/types';
 type Props = {
-    rlsConditions?: RlsCondition[];
+    rlsConditions?: RlsCondition;
     onChangeFilterValue?: (name: string, value: string, customValue?: Record<string, Date>, stringValues?: FloatingDropDownOption[]) => void;
     companyId: string;
     integrationId: string;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RlsCondition } from '@/types';
+type AddMetricFilterProps = {
+    filters: RlsCondition[];
+    updateFilter: (filter: RlsCondition) => void;
+};
+declare const AddMetricFilter: ({ filters, updateFilter }: AddMetricFilterProps) => JSX.Element;
+export default AddMetricFilter;

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

@@ -25,6 +25,7 @@ type HookSelectInput = Omit<SelectInput, 'value'> & {
     control: Control;
     name: string;
 };
+export declare const OldSelect: ({ name, label, options, onChange, value, defaultValue, children, placeHolder, className, containerClass, isSearchEnabled, textSize, icon, labelVariant, }: SelectInput) => JSX.Element;
 export declare const Select: ({ name, label, options, onChange, value, defaultValue, children, placeHolder, className, containerClass, isSearchEnabled, textSize, icon, labelVariant, }: SelectInput) => JSX.Element;
 export declare const HookSelect: ({ control, name, ...rest }: HookSelectInput) => JSX.Element;
 export declare const SelectWithSubValue: ({ label, options, onChange, value, defaultValue, }: any) => JSX.Element;
@@ -45,6 +46,7 @@ type MultiSelectProps = {
     isSearchEnabled?: boolean;
     icon?: JSX.Element;
 };
+export declare const OldMultiSelect: React.FC<MultiSelectProps>;
 export declare const MultiSelect: React.FC<MultiSelectProps>;
 type HookMultiSelectProps = MultiSelectProps & {
     control: Control<FieldValues>;

package/dist/consts/app.d.ts

@@ -66,3 +66,7 @@ export declare const RAW_CSV_OPTIONS: string[];
 export declare const NONE = "NONE";
 export declare const REQUESTED = "REQUESTED";
 export declare const AVAILABLE = "AVAILABLE";
+export declare const NUMBER_FORMAT: {
+    label: string;
+    value: string;
+}[];

package/dist/containers/Dashboard/Dashboard.d.ts

@@ -1,10 +1,20 @@
-import React from 'react';
+import { HTMLAttributes } from 'react';
 import { ThemeType } from '@/utils/theme';
-export interface DashboardProps {
+/**
+ * token - The client based guest token (required).
+ * dashboardId - The id of the dashboard you want to see.
+ * options - Access permissions and customization.
+ * disableMetricCreation - boolean value to enable or disable metric creation
+ * disableMetricUpdation - boolean value to enable or disable metric updation
+ * disableMetricDeletion - boolean value to enable or disable metric deletion
+ * disableLayoutCustomization - boolean value to enable or disable dashboard layout customization
+ * chartColors - array of colors where each color should be a valid color string e.g. color name, rgb value, hex value, etc.
+ * theme - Theme customization.
+ */
+export interface DashboardProps extends HTMLAttributes<HTMLElement> {
     token: string;
     dashboardId?: string;
     options?: {
-        headerVariant?: 'static' | 'floating';
         disableMetricCreation?: boolean;
         disableMetricUpdation?: boolean;
         disableMetricDeletion?: boolean;
@@ -20,4 +30,4 @@ export interface DashboardProps {
  * @prop {object} options (optional) - Additional options like access permissions e.g. metric creation, updation, archiving and layout customization.
  * @prop {object} theme (optional) - A theme object to customize the theme.
  */
-export declare const Dashboard: React.MemoExoticComponent<({ token, options, theme, dashboardId }: DashboardProps) => JSX.Element>;
+export declare const Dashboard: ({ token, options, theme, dashboardId, }: DashboardProps) => JSX.Element;

package/dist/containers/Dashboard/EmbededDashboard.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { ThemeType } from '@/utils';
 export interface EmbeddedDashboardProps {
     options?: {
-        headerVariant?: 'static' | 'floating';
         disableMetricCreation?: boolean;
         disableMetricUpdation?: boolean;
         disableMetricDeletion?: boolean;

package/dist/containers/Metric/EmbeddedMetric.d.ts

@@ -4,5 +4,7 @@ export interface EmbeddedMetricProps {
     chartColors?: string[];
     metricId: string;
     chartRendererType?: 'svg' | 'canvas';
+    variant?: 'card' | 'fullscreen';
+    onMinimize?: () => void;
 }
-export declare const EmbeddedMetric: React.MemoExoticComponent<({ token, chartColors, metricId, chartRendererType, }: EmbeddedMetricProps) => JSX.Element>;
+export declare const EmbeddedMetric: React.MemoExoticComponent<({ token, chartColors, metricId, chartRendererType, variant, onMinimize, }: EmbeddedMetricProps) => JSX.Element>;

package/dist/containers/Metric/index.d.ts

@@ -1,7 +1,22 @@
-import React from 'react';
-import { EmbeddedMetricProps } from './EmbeddedMetric';
+import React, { HTMLAttributes } from 'react';
 import { ThemeType } from '@/utils/theme';
-export interface MetricProps extends EmbeddedMetricProps {
+/**
+ * token - The client based guest token (required).
+ * metricId - The id of the dashboard you want to see.
+ * width - The width of the metric card in number.
+ * height - The height of the metric card in number.
+ * className - The usual className attribute to provide styles.
+ * style - The usual style attribute to provide inline styles.
+ * chartColors - array of colors where each color should be a valid color string e.g. color name, rgb value, hex value, etc.
+ * theme - Theme customization.
+ */
+export interface MetricProps extends HTMLAttributes<HTMLElement> {
+    token: string;
+    chartColors?: string[];
+    metricId: string;
+    variant?: 'card' | 'fullscreen';
+    onMinimize?: () => void;
+    chartRendererType?: 'svg' | 'canvas';
     theme?: ThemeType;
     width?: number;
     height?: number;
@@ -12,6 +27,8 @@ export interface MetricProps extends EmbeddedMetricProps {
  * @name Metric - A react component to display a single metric card.
  * @prop {string} token - A client based guest token.
  * @prop {string} metricId - A metric id (one which you have provided at the time of it's creation) of the metric you want to display.
+ * @prop {string} variant (optional) - The variant to render the metric it can be card (fullscreen included) or fullscreen.
+ * @prop {function} onMinimize (optional) - An optional callback when minimize button is clicked.
  * @prop {array} chartColors (optional) - An array of colors to be used to visualize the chart.
  * @prop {string} chartRendererType (optional) - Whether to display chart as svg or canvas. In case of low end devices or in general svg is better and in case of frequent data changes or high size data visualization canvas is better. Defaults to canvas.
  * @prop {number} width (optional) - The width of the metric card e.g. 500, 200 etc. will be treated as pixel value.

package/dist/hooks/useDashboardContext.d.ts

@@ -3,6 +3,7 @@ import { EmbeddedDashboardMetricsQuery } from '@/utils/generated/graphql';
 interface DashboardContextType {
     isLoading: boolean | undefined;
     token: string | undefined;
+    pluginRef?: React.RefObject<HTMLDivElement>;
     data: {
         externalDashboardId: string;
         companyId: string;
@@ -13,6 +14,7 @@ interface DashboardContextType {
         externalDashboard: {
             __typename?: 'externalDashboards' | undefined;
             id: any;
+            name: string;
             filters: any;
             layout: any[];
         } | undefined;

package/dist/hooks/useEmbeddedDashboard.d.ts

@@ -50,6 +50,7 @@ export declare const useEmbeddedDashboard: ({ token, dashboardId, }: {
         externalDashboard: {
             __typename?: "externalDashboards" | undefined;
             id: any;
+            name: string;
             filters: any;
             layout: any;
         } | undefined;

package/dist/hooks/useMetricCard.d.ts

@@ -20,9 +20,10 @@ export declare const useMetricCard: ({ metric, globalFilters, rlsFilters, client
     onDrillDown: (params: any) => void;
     handleChartClick: (params: any) => void;
     dataDb: Record<string, any>[];
-    getUnderlyingData: ({ columnName, value, setData, setLoading, }: {
-        columnName: string;
+    getUnderlyingData: ({ columnName, value, setData, setLoading, isSingleValueChart, }: {
+        columnName: string | undefined;
         value: any;
+        isSingleValueChart: boolean;
         setData: import("react").Dispatch<import("react").SetStateAction<any[]>>;
         setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     }) => void;
@@ -36,7 +37,6 @@ export declare const useMetricCard: ({ metric, globalFilters, rlsFilters, client
     drilledLevel: number;
     dimensions: any;
     rlsConditions: RlsCondition[];
-    comparisonValue: string;
     setTableLimit: import("react").Dispatch<import("react").SetStateAction<{
         limit: number;
         offset: number;
@@ -52,5 +52,6 @@ export declare const useMetricCard: ({ metric, globalFilters, rlsFilters, client
     isExternalChart: boolean | undefined;
     isEnablePivotTable: boolean;
     groupByList: any[];
+    updateFilter: (filter: RlsCondition) => void;
 };
 export {};

package/dist/hooks/useUnderlyingData.d.ts

@@ -7,9 +7,10 @@ export declare const useUnderlyingData: ({ clientName, tenancyType, values, quer
     workspaceId: string;
     metricId: string;
 }) => {
-    getUnderlyingData: ({ columnName, value, setData, setLoading, }: {
-        columnName: string;
-        value: any;
+    getUnderlyingData: ({ columnName, value, setData, setLoading, isSingleValueChart, }: {
+        columnName: string | undefined;
+        value: any | undefined;
+        isSingleValueChart: boolean;
         setData: React.Dispatch<React.SetStateAction<any[]>>;
         setLoading: React.Dispatch<React.SetStateAction<boolean>>;
     }) => void;