@databrainhq/plugin 0.15.33 → 0.15.35

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/Accordion/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+type AccordionProps = {
+    title: string;
+    content: React.ReactNode;
+    width?: string;
+    isOpen?: boolean;
+    badge?: React.ReactNode;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    headerButton?: React.ReactNode;
+};
+export declare const Accordion: React.FC<AccordionProps>;
+type AccordionV2Props = {
+    footer?: React.ReactNode;
+    isEnableEditBtn?: boolean;
+    editBtnOnClick?: () => void;
+    isNoPadding?: boolean;
+} & AccordionProps;
+export declare const AccordionV2: React.FC<AccordionV2Props>;
+type AccordionV3Props = {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    content: React.ReactNode;
+    headerButton?: React.ReactNode;
+    isOpen?: boolean;
+    width?: string;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const AccordionV3: ({ content, footer, header, isOpen, width, setIsOpen, headerButton, }: AccordionV3Props) => React.JSX.Element;
+type AccordionV4Props = {
+    headerIcon?: React.ReactNode;
+} & AccordionV3Props;
+export declare const AccordionV4: ({ content, footer, header, headerIcon, isOpen, width, setIsOpen, headerButton, }: AccordionV4Props) => React.JSX.Element;
+export {};

package/dist/components/AceEditorSql/AceEditorSql.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    onChange?: any;
+    value?: string;
+    onExecute?: (value?: string) => void;
+    editorRef: any;
+    isDisabled?: boolean;
+    placeholder?: string;
+}
+declare const AceEditorSql: ({ onChange, value, onExecute, editorRef, isDisabled, placeholder, }: Props) => React.JSX.Element;
+export default AceEditorSql;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Colors } from '@/types';
+export type AlertProps = {
+    text: string;
+    children?: React.ReactNode;
+    variant?: 'primary' | 'warning' | 'error' | 'success' | 'info';
+    hideInfoIcon?: boolean;
+    className?: string;
+    childrenClassName?: string;
+    textColor?: Colors;
+};
+export declare const Alert: ({ variant, text, children, hideInfoIcon, className, childrenClassName, textColor, }: AlertProps) => React.JSX.Element;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FloatingDropDownOption, OnChangeAliasParams, OnChangeHelperFunctionParams, SelectedColumn } from '@/types';
+export type AutoCompleteDropdownProps = {
+    setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedColumn[]>>;
+    onSubmitSearch?: () => void;
+    selectedOption: SelectedColumn[];
+    options: SelectedColumn[];
+    label?: string;
+    isDisabled?: boolean;
+    placeholder?: string;
+    functionOptions?: (col?: SelectedColumn | undefined, colDatatype?: string | undefined) => FloatingDropDownOption[];
+    onChangeHelperFunction?: ({ column, helperFunction, functionConfiguration, type, }: OnChangeHelperFunctionParams) => void;
+    onChangeAlias: ({ alias, column }: OnChangeAliasParams) => void;
+    position?: 'top' | 'bottom';
+    setKeyWords?: React.Dispatch<React.SetStateAction<string[]>>;
+    isSaveKeyword?: boolean;
+    setSaveKeyword?: React.Dispatch<React.SetStateAction<boolean>>;
+    setSearchQuestion?: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare const AutoCompleteDropdown: ({ label, selectedOption, setSelectedOptions, options, isDisabled, placeholder, functionOptions, onChangeHelperFunction, onChangeAlias, position, setKeyWords, isSaveKeyword, setSaveKeyword, onSubmitSearch, setSearchQuestion, }: AutoCompleteDropdownProps) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    label: string | number;
+    varaint?: 'warning' | 'success' | 'success-light' | 'danger' | 'danger-light' | 'primary' | 'secondary' | 'info' | 'gray' | 'xs';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    onClick?: () => void;
+    indicator?: JSX.Element;
+};
+export declare const Badge: React.FC<Props>;
+export {};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    isDisabled?: boolean;
+    variant: 'primary' | 'secondary' | 'tertiary' | 'tab' | 'popover';
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    fitContainer?: boolean;
+    size?: 'small' | 'regular';
+    dataTestTitle?: string;
+    id?: string;
+}
+/** A basic button. Any props that are not explicitly called out below will be passed through to the native Button component. */
+export declare const Button: ({ isDisabled, type, children, variant, onClick, size, title, leftIcon, rightIcon, fitContainer, className, dataTestTitle, id, ...props }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FloatingDropDownOption } from '@/types';
+type ButtonGroupProps = {
+    label?: string;
+    options: FloatingDropDownOption[];
+    isDisabled?: boolean;
+    dataTestTitle?: string;
+    selectedOption: FloatingDropDownOption;
+    onChange: (option: FloatingDropDownOption) => void;
+    isimportant?: boolean;
+    id?: string;
+};
+export declare const ButtonGroup: ({ label, options, isDisabled, dataTestTitle, onChange, selectedOption, isimportant, id, ...props }: ButtonGroupProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ClickActionsConfig } from '@/types';
+export type SingleValueChartProps = {
+    settings?: {
+        fontSize?: number;
+        subHeaderFontSize?: number;
+        subHeaderShow?: boolean;
+        displayText?: string;
+        comparisonValueFontSize?: number;
+        comparisonTimePeriod?: number;
+        comparisonTimeGrain?: string;
+        comparisonSuffix?: string;
+        fontColor?: string;
+        suffix?: string;
+        prefix?: string;
+        conditionalFormatter?: {
+            min: number;
+            max: number;
+            color: string;
+        }[];
+        isEnableTruncate?: boolean;
+        truncateValue?: number;
+        upVariant?: string;
+        downVariant?: string;
+        metricCardColor?: string;
+    };
+    value: string | number;
+    hideBorder?: boolean;
+    chartClickConfig?: ClickActionsConfig['chart'];
+    className?: string;
+    onChartReady?: () => void;
+    comparisonValue?: string;
+    trendLineOptions?: any;
+    events?: any;
+};
+declare const _default: React.MemoExoticComponent<({ value, settings, chartClickConfig, hideBorder, className, onChartReady, comparisonValue, trendLineOptions, events, }: SingleValueChartProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ChartAppearanceType, ChartSettingsType, OnDrillPivotTableParams, PivotDrillState } from '@/types';
+export type ChartProps = {
+    chartOptions: ChartSettingsType;
+    data: Record<string, any>[];
+    events?: Record<string, Function>;
+    config?: Record<string, any>;
+    className?: string;
+    colors?: string[];
+    isShowFullScreen?: boolean;
+    isShowFullScreenEnabled?: boolean;
+    filterValues?: Record<string, any>;
+    onMaximize?: () => void;
+    onDrillPivotTable?: (value: OnDrillPivotTableParams) => void;
+    pivotDrillState: PivotDrillState;
+    isPythonMode?: boolean;
+    sortOrder?: string;
+    seriesName?: string;
+    isSortReversed?: boolean;
+    chartHeight?: number;
+    chartAppearance?: ChartAppearanceType;
+    metricCardColor?: string;
+    isMetricCard?: boolean;
+};
+export type MemoizedChartProps = {
+    chartOptions: ChartSettingsType;
+    events?: Record<string, Function>;
+    config?: Record<string, any>;
+    className?: string;
+    chartHeight?: number;
+    hasDecreasedHeight?: boolean;
+    zoomOptions?: any;
+    options: any;
+};
+/**
+ * @name Chart - The metric visualization component.
+ * @prop chartOptions - the chart properties saved in the database.
+ * @prop data - the array of objects/records returned by the querying.
+ * @prop events (optional) - the click, change, etc. events to be added to the chart.
+ * @prop config (optional) - any additional chart specific props to be passed to the respective charts e.g. table, single value.
+ * @prop className (optional) - the usual className prop to provide styles.
+ * @prop colors (optional) - the admin provided chart color palettes.
+ * @returns JSX - chart visaulization content.
+ */
+export declare const Chart: React.MemoExoticComponent<({ chartOptions, data, events, colors, config, className, isShowFullScreen, isShowFullScreenEnabled, sortOrder, onMaximize, onDrillPivotTable, pivotDrillState, isPythonMode, seriesName, isSortReversed, chartHeight, chartAppearance, metricCardColor, isMetricCard, }: ChartProps) => React.JSX.Element>;