@databrainhq/plugin 0.9.48 → 0.10.0

package/README.md

@@ -12,12 +12,68 @@ npm install @databrainhq/plugin
 
 ## Usage
 
+Integrating Dashboard
+
 ```tsx
 import { Dashboard } from '@databrainhq/plugin';
 import '@databrainhq/plugin/dist/style.css';
 
 const Example = () => {
-  return <Dashboard token={/* Your Guest Token */} />;
+  return (
+    <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
+import { Metric } from '@databrainhq/plugin';
+import '@databrainhq/plugin/dist/style.css';
+
+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}
+    />
+  );
 };
 ```
 

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

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

package/dist/components/MetricList/components/MetricCards/MetricCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { ExternalMetrics } from '@/utils/generated/graphql';
 import { ClientType } from '@/types/app';
 import { FilterFieldType } from '@/components/FilterField';
@@ -19,5 +19,7 @@ export type MetricCardProps = {
     renderHeaderName?: (name: string) => JSX.Element;
     onArchive?: (metricId: string) => void;
     isDisableCardClick?: boolean;
+    chartRendererType?: 'svg' | 'canvas';
+    isDisableMorePopup?: boolean;
 };
-export declare const MetricCard: React.FC<MetricCardProps>;
+export declare const MetricCard: ({ globalFilters, metricItem, onMaximize, client, colors, param, companyTenancyType, renderHeaderName, isDisableCardClick, onArchive, chartRendererType, isDisableMorePopup, }: MetricCardProps) => JSX.Element;

package/dist/components/index.d.ts

@@ -36,3 +36,4 @@ export * from './ChartSettingsPopup';
 export * from './Portal';
 export * from './GlobalFilters/NumberFilterField';
 export * from './DateRangePicker';
+export * from './Loader';

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

@@ -1,7 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { ThemeType } from '@/utils/theme';
 export interface DashboardProps {
     token: string;
+    dashboardId?: string;
     options?: {
         headerVariant?: 'static' | 'floating';
         disableMetricCreation?: boolean;
@@ -12,7 +13,11 @@ export interface DashboardProps {
     };
     theme?: ThemeType;
 }
-type PluginProviderProps = PropsWithChildren & Omit<DashboardProps, 'token'>;
-export declare const PluginProvider: ({ children, theme }: PluginProviderProps) => JSX.Element;
-export declare const Dashboard: React.MemoExoticComponent<({ token, options, theme }: DashboardProps) => JSX.Element>;
-export {};
+/**
+ * @name Dashboard - A react component to display the dashboard.
+ * @prop {string} token - A client based guest token.
+ * @prop {string} dashboardId (optional) - A dashboard id (one which you have provided at the time of creating it) of the dashboard you want to see.
+ * @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>;

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

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 type DashboardProviderProps = PropsWithChildren & {
     token: string;
+    dashboardId?: string;
 };
-declare const DashboardProvider: ({ token, children }: DashboardProviderProps) => JSX.Element;
+declare const DashboardProvider: ({ token, dashboardId, children, }: DashboardProviderProps) => JSX.Element;
 export default DashboardProvider;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface EmbeddedMetricProps {
+    token: string;
+    chartColors?: string[];
+    metricId: string;
+    chartRendererType?: 'svg' | 'canvas';
+}
+export declare const EmbeddedMetric: React.MemoExoticComponent<({ token, chartColors, metricId, chartRendererType, }: EmbeddedMetricProps) => JSX.Element>;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmbeddedMetricProps } from './EmbeddedMetric';
+import { ThemeType } from '@/utils/theme';
+export interface MetricProps extends EmbeddedMetricProps {
+    theme?: ThemeType;
+    width?: string;
+    height?: string;
+}
+/**
+ * @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 {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 {string} width (optional) - The width of the metric card e.g. 500px, 75vw, 50%, 4rem, 3em, etc. Defaults to 100%.
+ * @prop {string} height (optional) - The height of the metric card e.g. 500px, 75vh, 50%, 4rem, 3em, etc. Defaults to 100%.
+ * @prop {object} theme (optional) - Theme config object to apply to the UI.
+ */
+export declare const Metric: React.MemoExoticComponent<({ theme, width, height, ...metricProps }: MetricProps) => JSX.Element>;

package/dist/containers/PluginProvider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ThemeType } from '@/utils';
+type PluginProviderProps = PropsWithChildren & {
+    theme?: ThemeType;
+};
+export declare const PluginProvider: ({ children, theme }: PluginProviderProps) => JSX.Element;
+export {};

package/dist/containers/index.d.ts

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

package/dist/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './useClientDashboardLayout';
 export * from './useUnderlyingData';
 export * from './useMetricCard';
 export * from './useArchiveMetric';
+export * from './useEmbeddedMetric';

package/dist/hooks/useEmbeddedDashboard.d.ts

@@ -1,4 +1,7 @@
-export declare const useEmbeddedDashboard: (token: string) => {
+export declare const useEmbeddedDashboard: ({ token, dashboardId, }: {
+    token: string;
+    dashboardId?: string | undefined;
+}) => {
     isLoading: boolean;
     data: {
         clientId: string | undefined;

package/dist/hooks/useEmbeddedMetric.d.ts

@@ -0,0 +1,19 @@
+import { ExternalMetrics } from '@/utils/generated/graphql';
+export interface UseEmbeddedMetricProps {
+    token: string;
+    metricId: string;
+}
+export declare const useEmbeddedMetric: ({ token, metricId, }: UseEmbeddedMetricProps) => {
+    externalMetric: ExternalMetrics | undefined;
+    sharingSettingsId: string;
+    adminColors: string[] | null;
+    companyId: string;
+    clientId: string;
+    rlsSettings: {
+        metricId: string;
+        values: Record<string, any>;
+    } | undefined;
+    tenancyLevel: any;
+    isLoading: boolean;
+    errorMsg: string | undefined;
+};