@databrainhq/plugin 0.10.23 → 0.11.0

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;

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

@@ -1,7 +1,20 @@
-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;
+    chartRendererType?: 'svg' | 'canvas';
     theme?: ThemeType;
     width?: number;
     height?: number;

package/dist/containers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Dashboard';
 export * from './PluginProvider';
 export * from './Metric';
+export * from './web-component';

package/dist/containers/web-component.d.ts

@@ -0,0 +1,15 @@
+import { DashboardProps } from './Dashboard';
+import { MetricProps } from './Metric';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            Tag: any;
+            'dbn-dashboard': DashboardProps;
+            'dbn-metric': MetricProps;
+        }
+    }
+    interface HTMLElement {
+        'dbn-dashboard': DashboardProps;
+        'dbn-metric': MetricProps;
+    }
+}

package/dist/contexts/WebComponentContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface WebComponentContextType {
+    isWebComponent: boolean;
+    setIsWebComponent: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const useWebComponentContext: () => WebComponentContextType;
+export declare const WebComponentProvider: ({ children }: React.PropsWithChildren) => JSX.Element;
+export {};

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './WebComponentContext';

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;