semaphor 0.0.43 → 0.0.45

package/dist/types/surfboard.d.ts

@@ -0,0 +1,319 @@
+import { FontSpec } from 'chart.js';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare type AggregateCalc = 'AVG' | 'MIN' | 'MAX' | 'SUM' | 'COUNT' | 'COUNT_DISTINCT';
+
+export declare type AuthToken = {
+    accessToken: string;
+    refreshToken: string;
+};
+
+declare type BaseCustomCard = {
+    cardId: string;
+    replaceDefault?: boolean;
+};
+
+declare type BaseFilter = {
+    filterId: TFilter['id'];
+    expression?: string;
+    name: string;
+    valueType: 'string' | 'number' | 'date' | 'boolean';
+    connectionType?: 'database' | 'api';
+};
+
+export declare type Bookmark = {
+    name: string;
+    default: boolean;
+    template: TDashboard;
+    filterValues?: TFilterValue[];
+};
+
+export declare type Breakpoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+
+declare type CardWithContent = BaseCustomCard & {
+    content: React.FC<{
+        card: TCard;
+    }>;
+    footer?: React.FC<{
+        card: TCard;
+    }>;
+};
+
+declare type CardWithFooter = BaseCustomCard & {
+    content?: React.FC<{
+        card: TCard;
+    }>;
+    footer: React.FC<{
+        card: TCard;
+    }>;
+};
+
+export declare type ConnectionPolicy = {
+    connectionId?: string;
+    name: string;
+    params: Params;
+};
+
+export declare type CustomCard = CardWithContent | CardWithFooter;
+
+declare type DashboardPlusProps = {
+    showControls?: boolean;
+    showFooter?: boolean;
+} & DashboardProps;
+
+export declare type DashboardProps = {
+    id: string;
+    authToken: AuthToken | undefined;
+    style?: TStyle;
+    currentTheme?: Theme;
+    version?: string;
+    customCards?: CustomCard[];
+    onChartElementClicked?: (card: TCard, fieldValues: any) => void;
+    onEvent?: (event: TEvent) => void;
+    onSave?: (dashboard: TDashboard) => void;
+    LoadingComponent?: (props: LoadingProps) => React.ReactNode;
+    ErrorComponent?: (props: ErrorProps) => React.ReactNode;
+};
+
+export declare type ErrorProps = {
+    message?: string;
+};
+
+declare type FilterForBetween = BaseFilter & {
+    operation: 'between' | 'not between';
+    values: [number, number];
+};
+
+declare type FilterForCompare = BaseFilter & {
+    operation: '>' | '<' | '>=' | '<=';
+    values: [number];
+};
+
+declare type FilterForDate = BaseFilter & {
+    operation: 'between' | 'not between';
+    values: [Date, Date];
+};
+
+declare type FilterForEqual = BaseFilter & {
+    operation: '=' | '!=' | 'is null' | 'is not null';
+    values: [string | number];
+};
+
+declare type FilterForIn = BaseFilter & {
+    operation: 'in' | 'not in';
+    values: (string | number)[];
+};
+
+declare type FilterForString = BaseFilter & {
+    operation: 'like' | 'not like';
+    values: [string];
+};
+
+declare type FilterOnClick = {
+    expression?: string;
+    columnIndex: number;
+};
+
+export declare type KPICardProps = {
+    card: TCard;
+    isLoading: boolean;
+};
+
+export declare type LoadingProps = {
+    message?: string;
+};
+
+declare type Operation = '=' | '>' | '<' | '>=' | '<=' | '!=' | 'in' | 'not in' | 'like' | 'not like' | 'between' | 'not between' | 'is null' | 'is not null';
+
+declare type Params = {
+    [key: string]: string | number | string[] | number[];
+};
+
+export declare type SqlGen = {
+    measures?: {
+        name: string;
+        calc: AggregateCalc;
+    }[];
+    dimensions?: string[];
+};
+
+/**
+ * Style propeerites for the dashboard
+ */
+export declare type StyleProps = {
+    /** css class for `dashboard-panel` */
+    dashboardPanel?: string;
+    /** css class for `dashboard-tabs-container` */
+    dashboardTabsContainer?: string;
+    /** css class for `dashboard-card` */
+    /** css class for `dashboard-card-container` */
+    dashboardCardContainer?: string;
+    dashboardCard?: string;
+    /** grid-layout config */
+    gridLayout?: {
+        /** css class for `react-grid-layout` */
+        className?: string;
+        margin?: [number, number];
+    };
+    /** chart config */
+    chart?: {
+        /** chart font config */
+        font?: Partial<FontSpec>;
+        dataset?: any;
+        /** chart options */
+        options?: any;
+    };
+};
+
+export declare function Surfboard({ showControls, showFooter, ...rest }: DashboardPlusProps): JSX_2.Element;
+
+export declare type TBaseQuery = {
+    id: string;
+    name: string;
+    sql: string;
+    description?: string;
+};
+
+export declare type TCard = {
+    id: string;
+    title: string;
+    description?: string;
+    info?: string;
+    connectionId?: string;
+    type: TChartType;
+    sql?: string;
+    python?: string;
+    data?: any[];
+    cfg?: any;
+    customCfg?: any;
+    preferences?: TCardPreferences;
+    lastSelectedDatabase?: string;
+    lastSelectedSchema?: string;
+    lastSelectedTable?: string;
+    refreshInterval?: string;
+};
+
+export declare type TCardContext = {
+    id: string;
+    name: string;
+    description: string;
+    sql: string;
+};
+
+export declare type TCardPreferences = {
+    onClickFilter?: FilterOnClick[];
+    filterOnClick?: boolean;
+    filterOnClickField?: string;
+    filterOnClickColumnIndex?: number;
+    formatNumber?: {
+        format?: string;
+        currency?: string;
+        locale?: string;
+        suffix?: string;
+        enabled?: boolean | string;
+    };
+    datasetOptions?: TDatasetOptions[];
+    chartOptions?: TChartOptions;
+};
+
+export declare type TChartOptions = {
+    type?: TChartType;
+    scales?: {
+        y?: {
+            type: 'linear' | 'logarithmic';
+            min: number;
+            max: number;
+            ticks: {
+                stepSize: number;
+            };
+        };
+        x?: {
+            type: 'linear' | 'logarithmic';
+            min: number;
+            max: number;
+            ticks: {
+                stepSize: number;
+            };
+        };
+    };
+    indexAxis?: 'x' | 'y' | undefined;
+};
+
+declare type TChartType = 'bar' | 'horizontalBar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'bubble' | 'scatter' | 'stackedBar' | 'table' | 'kpi' | 'custom';
+
+export declare type TDashboard = {
+    id: string;
+    title?: string;
+    description?: string;
+    sheets?: TSheet[];
+    style?: TStyle;
+    filters?: TFilter[];
+    customCards?: CustomCard[];
+    baseQueries?: TBaseQuery[];
+};
+
+export declare type TDataColumn = {
+    column_name: string;
+    data_type: string;
+    is_nullable?: string;
+};
+
+export declare type TDatasetOptions = {
+    idx: number;
+    type?: 'bar' | 'line';
+    fill?: string | number;
+    datalabels?: {
+        display?: boolean;
+        align?: string;
+        anchor?: string;
+        clamp?: boolean;
+        color?: string;
+    };
+};
+
+export declare type TEvent = {
+    type: 'success' | 'error' | 'info' | 'warning';
+    message: any;
+};
+
+declare type TFilter = {
+    id: string;
+    connectionId: string;
+    title: string;
+    column: string;
+    dataType: string;
+    table: string;
+    database: string;
+    sql: string;
+    operation: Operation;
+};
+
+declare type TFilterValue = FilterForString | FilterForEqual | FilterForCompare | FilterForBetween | FilterForIn | FilterForDate;
+
+export declare type TFrame = {
+    id: string;
+    cards: TCard[];
+    activeCardId: string;
+};
+
+export declare type Theme = 'dark' | 'light' | 'system';
+
+export declare type TSheet = {
+    id: string;
+    title?: string;
+    description?: string;
+    layout?: ReactGridLayout.Layout[];
+    layouts?: ReactGridLayout.Layouts;
+    cards?: TCard[];
+    frames?: TFrame[];
+};
+
+/**
+ * Style for the dashboard
+ */
+export declare type TStyle = {
+    default: StyleProps;
+    dark?: StyleProps;
+};
+
+export { }

package/dist/types/types.d.ts

@@ -0,0 +1,311 @@
+import { FontSpec } from 'chart.js';
+
+export declare type AggregateCalc = 'AVG' | 'MIN' | 'MAX' | 'SUM' | 'COUNT' | 'COUNT_DISTINCT';
+
+export declare type AuthToken = {
+    accessToken: string;
+    refreshToken: string;
+};
+
+declare type BaseCustomCard = {
+    cardId: string;
+    replaceDefault?: boolean;
+};
+
+declare type BaseFilter = {
+    filterId: TFilter['id'];
+    expression?: string;
+    name: string;
+    valueType: 'string' | 'number' | 'date' | 'boolean';
+    connectionType?: 'database' | 'api';
+};
+
+export declare type Bookmark = {
+    name: string;
+    default: boolean;
+    template: TDashboard;
+    filterValues?: TFilterValue[];
+};
+
+export declare type Breakpoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+
+declare type CardWithContent = BaseCustomCard & {
+    content: React.FC<{
+        card: TCard;
+    }>;
+    footer?: React.FC<{
+        card: TCard;
+    }>;
+};
+
+declare type CardWithFooter = BaseCustomCard & {
+    content?: React.FC<{
+        card: TCard;
+    }>;
+    footer: React.FC<{
+        card: TCard;
+    }>;
+};
+
+export declare type ConnectionPolicy = {
+    connectionId?: string;
+    name: string;
+    params: Params;
+};
+
+export declare type CustomCard = CardWithContent | CardWithFooter;
+
+export declare type DashboardProps = {
+    id: string;
+    authToken: AuthToken | undefined;
+    style?: TStyle;
+    currentTheme?: Theme;
+    version?: string;
+    customCards?: CustomCard[];
+    onChartElementClicked?: (card: TCard, fieldValues: any) => void;
+    onEvent?: (event: TEvent) => void;
+    onSave?: (dashboard: TDashboard) => void;
+    LoadingComponent?: (props: LoadingProps) => React.ReactNode;
+    ErrorComponent?: (props: ErrorProps) => React.ReactNode;
+};
+
+export declare type ErrorProps = {
+    message?: string;
+};
+
+declare type FilterForBetween = BaseFilter & {
+    operation: 'between' | 'not between';
+    values: [number, number];
+};
+
+declare type FilterForCompare = BaseFilter & {
+    operation: '>' | '<' | '>=' | '<=';
+    values: [number];
+};
+
+declare type FilterForDate = BaseFilter & {
+    operation: 'between' | 'not between';
+    values: [Date, Date];
+};
+
+declare type FilterForEqual = BaseFilter & {
+    operation: '=' | '!=' | 'is null' | 'is not null';
+    values: [string | number];
+};
+
+declare type FilterForIn = BaseFilter & {
+    operation: 'in' | 'not in';
+    values: (string | number)[];
+};
+
+declare type FilterForString = BaseFilter & {
+    operation: 'like' | 'not like';
+    values: [string];
+};
+
+declare type FilterOnClick = {
+    expression?: string;
+    columnIndex: number;
+};
+
+export declare type KPICardProps = {
+    card: TCard;
+    isLoading: boolean;
+};
+
+export declare type LoadingProps = {
+    message?: string;
+};
+
+declare type Operation = '=' | '>' | '<' | '>=' | '<=' | '!=' | 'in' | 'not in' | 'like' | 'not like' | 'between' | 'not between' | 'is null' | 'is not null';
+
+declare type Params = {
+    [key: string]: string | number | string[] | number[];
+};
+
+export declare type SqlGen = {
+    measures?: {
+        name: string;
+        calc: AggregateCalc;
+    }[];
+    dimensions?: string[];
+};
+
+/**
+ * Style propeerites for the dashboard
+ */
+export declare type StyleProps = {
+    /** css class for `dashboard-panel` */
+    dashboardPanel?: string;
+    /** css class for `dashboard-tabs-container` */
+    dashboardTabsContainer?: string;
+    /** css class for `dashboard-card` */
+    /** css class for `dashboard-card-container` */
+    dashboardCardContainer?: string;
+    dashboardCard?: string;
+    /** grid-layout config */
+    gridLayout?: {
+        /** css class for `react-grid-layout` */
+        className?: string;
+        margin?: [number, number];
+    };
+    /** chart config */
+    chart?: {
+        /** chart font config */
+        font?: Partial<FontSpec>;
+        dataset?: any;
+        /** chart options */
+        options?: any;
+    };
+};
+
+export declare type TBaseQuery = {
+    id: string;
+    name: string;
+    sql: string;
+    description?: string;
+};
+
+export declare type TCard = {
+    id: string;
+    title: string;
+    description?: string;
+    info?: string;
+    connectionId?: string;
+    type: TChartType;
+    sql?: string;
+    python?: string;
+    data?: any[];
+    cfg?: any;
+    customCfg?: any;
+    preferences?: TCardPreferences;
+    lastSelectedDatabase?: string;
+    lastSelectedSchema?: string;
+    lastSelectedTable?: string;
+    refreshInterval?: string;
+};
+
+export declare type TCardContext = {
+    id: string;
+    name: string;
+    description: string;
+    sql: string;
+};
+
+export declare type TCardPreferences = {
+    onClickFilter?: FilterOnClick[];
+    filterOnClick?: boolean;
+    filterOnClickField?: string;
+    filterOnClickColumnIndex?: number;
+    formatNumber?: {
+        format?: string;
+        currency?: string;
+        locale?: string;
+        suffix?: string;
+        enabled?: boolean | string;
+    };
+    datasetOptions?: TDatasetOptions[];
+    chartOptions?: TChartOptions;
+};
+
+export declare type TChartOptions = {
+    type?: TChartType;
+    scales?: {
+        y?: {
+            type: 'linear' | 'logarithmic';
+            min: number;
+            max: number;
+            ticks: {
+                stepSize: number;
+            };
+        };
+        x?: {
+            type: 'linear' | 'logarithmic';
+            min: number;
+            max: number;
+            ticks: {
+                stepSize: number;
+            };
+        };
+    };
+    indexAxis?: 'x' | 'y' | undefined;
+};
+
+declare type TChartType = 'bar' | 'horizontalBar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'bubble' | 'scatter' | 'stackedBar' | 'table' | 'kpi' | 'custom';
+
+export declare type TDashboard = {
+    id: string;
+    title?: string;
+    description?: string;
+    sheets?: TSheet[];
+    style?: TStyle;
+    filters?: TFilter[];
+    customCards?: CustomCard[];
+    baseQueries?: TBaseQuery[];
+};
+
+export declare type TDataColumn = {
+    column_name: string;
+    data_type: string;
+    is_nullable?: string;
+};
+
+export declare type TDatasetOptions = {
+    idx: number;
+    type?: 'bar' | 'line';
+    fill?: string | number;
+    datalabels?: {
+        display?: boolean;
+        align?: string;
+        anchor?: string;
+        clamp?: boolean;
+        color?: string;
+    };
+};
+
+export declare type TEvent = {
+    type: 'success' | 'error' | 'info' | 'warning';
+    message: any;
+};
+
+declare type TFilter = {
+    id: string;
+    connectionId: string;
+    title: string;
+    column: string;
+    dataType: string;
+    table: string;
+    database: string;
+    sql: string;
+    operation: Operation;
+};
+
+declare type TFilterValue = FilterForString | FilterForEqual | FilterForCompare | FilterForBetween | FilterForIn | FilterForDate;
+
+export declare type TFrame = {
+    id: string;
+    cards: TCard[];
+    activeCardId: string;
+};
+
+export declare type Theme = 'dark' | 'light' | 'system';
+
+export declare type TSheet = {
+    id: string;
+    title?: string;
+    description?: string;
+    layout?: ReactGridLayout.Layout[];
+    layouts?: ReactGridLayout.Layouts;
+    cards?: TCard[];
+    frames?: TFrame[];
+};
+
+/**
+ * Style for the dashboard
+ */
+export declare type TStyle = {
+    default: StyleProps;
+    dark?: StyleProps;
+};
+
+export { }

package/package.json

@@ -5,7 +5,7 @@
     "email": "support@semaphor.cloud"
   },
   "license": "MIT",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "description": "Fully interactive and customizable dashboards for your apps.",
   "keywords": [
     "react",
@@ -17,15 +17,26 @@
   "files": [
     "dist"
   ],
-  "main": "dist/react-semaphor-umd.cjs",
-  "module": "dist/react-semaphor.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/types/main.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/react-semaphor.js",
-      "require": "./dist/react-semaphor-umd.cjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/types/main.d.ts"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dashboard": {
+      "import": "./dist/dashboard/index.js",
+      "require": "./dist/dashboard/index.cjs",
+      "types": "./dist/types/dashboard.d.ts"
+    },
+    "./surfboard": {
+      "import": "./dist/surfboard/index.js",
+      "require": "./dist/surfboard/index.cjs",
+      "types": "./dist/types/surfboard.d.ts"
+    },
+    "./style.css": "./dist/style.css"
   },
   "scripts": {
     "dev": "vite",
@@ -85,6 +96,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.47.0",
     "@tanstack/react-query-devtools": "^5.17.21",
     "@types/chart.js": "^2.9.41",
     "@types/jsoneditor": "^9.9.5",
@@ -108,7 +120,7 @@
     "prettier-plugin-tailwindcss": "^0.6.1",
     "simple-zustand-devtools": "^1.1.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
     "vite": "^5.0.8",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-dts": "^3.6.4"