@devtable/dashboard 2.3.0 → 2.6.0

package/dist/plugins/viz-manager/components.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { IPanelInfoEditor } from '../../types/plugin';
+import { IPanelInfo, IVizManager } from './types';
+export declare type IViewPanelInfo = IPanelInfo & {
+    layout: {
+        w: number;
+        h: number;
+    };
+};
+export declare type IViewComponentProps<TDebug = {}> = {
+    panel: IViewPanelInfo;
+    data: any;
+    vizManager: IVizManager;
+} & TDebug;
+export declare const VizViewComponent: <T>(props: IViewComponentProps<T>) => JSX.Element;
+declare type IConfigComponentProps<TDebug = {}> = {
+    panel: IPanelInfo;
+    panelInfoEditor: IPanelInfoEditor;
+    vizManager: IVizManager;
+    data: any;
+} & TDebug;
+export declare const VizConfigComponent: <T>(props: IConfigComponentProps<T>) => JSX.Element;
+export {};

package/dist/plugins/viz-manager/impl.d.ts

@@ -0,0 +1,10 @@
+import { IPluginManager, VizComponent } from '../../types/plugin';
+import { IPanelInfo, IVizManager, VizInstanceInfo } from './types';
+export declare class VizManager implements IVizManager {
+    private pluginManager;
+    private instances;
+    constructor(pluginManager: IPluginManager);
+    get availableVizList(): VizComponent[];
+    resolveComponent(name: string): VizComponent;
+    getOrCreateInstance(panel: IPanelInfo): VizInstanceInfo;
+}

package/dist/plugins/viz-manager/index.d.ts

@@ -0,0 +1,3 @@
+export { VizManager } from './impl';
+export type { IVizManager, IPanelInfo } from './types';
+export { VizConfigComponent, VizViewComponent } from './components';

package/dist/plugins/viz-manager/types.d.ts

@@ -0,0 +1,12 @@
+import { IDashboardPanel } from '../../types';
+import { IMessageChannels, PluginStorage, VizComponent, VizInstance } from '../../types/plugin';
+export declare type IPanelInfo = Omit<IDashboardPanel, 'layout'>;
+export interface IVizManager {
+    readonly availableVizList: VizComponent[];
+    resolveComponent(type: string): VizComponent;
+    getOrCreateInstance(panel: IPanelInfo): VizInstanceInfo;
+}
+export interface VizInstanceInfo extends VizInstance {
+    messageChannels: IMessageChannels;
+    instanceData: PluginStorage;
+}

package/dist/style.css

@@ -1 +1 @@
-.viz-root{width:100%;overflow:scroll;padding-top:5px;height:calc(100% - 25px);background-color:#fff}.panel-title-wrapper{text-align:center;transition:background-color .3s ease}.panel-title-wrapper:hover{cursor:pointer;background-color:#6464640d}.panel-root{padding:5px;height:100%;width:100%;max-width:100%;background:transparent;border-radius:5px;box-shadow:0 0 10px #0003}.mantine-Tabs-root{width:100%;height:calc(100% - 25px);overflow:hidden;display:flex;justify-content:flex-start;flex-direction:column;flex-wrap:nowrap}.mantine-Tabs-tabsListWrapper{flex:0}.mantine-Tabs-body{flex:1;overflow:scroll}.dashboard-layout{margin-left:-10px;margin-right:-10px}.react-grid-item{padding:0}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}.code-textarea textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}
+.viz-root{width:100%;overflow:scroll;padding-top:5px;height:calc(100% - 25px);background-color:#fff}.panel-title-wrapper{text-align:center;transition:background-color .3s ease}.panel-title-wrapper:hover{cursor:pointer;background-color:#6464640d}.panel-root{padding:5px;height:100%;width:100%;max-width:100%;background:transparent;border-radius:5px;box-shadow:0 0 10px #0003}.panel-settings-tabs{width:100%;height:100%}.panel-settings-tabs .mantine-Tabs-panel{height:calc(100% - 25px)}.panel-settings-tabs .mantine-Tabs-tabsListWrapper{flex:0}.panel-settings-tabs .mantine-Tabs-body{flex:1;overflow:scroll}.dashboard-layout{margin-left:-10px;margin-right:-10px}.react-grid-item{padding:0}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}.code-textarea textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.filter-settings-tabs{width:100%;height:100%}.filter-settings-tabs .mantine-Tabs-panel{height:calc(100% - 25px)}.filter-settings-tabs .mantine-Tabs-tabsListWrapper{flex:0}.filter-settings-tabs .mantine-Tabs-body{flex:1;overflow:scroll}.dashboard-root{overflow:scroll;padding:0 10px 10px}.dashboard-sticky-area{z-index:100;background:white;margin:0 -10px;padding:0 10px 10px}

package/dist/types/dashboard.d.ts

@@ -1,14 +1,10 @@
-import { IDashboardFilter } from "./filter";
+import { FilterModelInstance } from '../model';
+import { QueryModelInstance } from '../model/queries';
+import { SQLSnippetModelInstance } from '../model/sql-snippets';
 export interface IVizConfig {
     type: string;
     conf: Record<string, any>;
 }
-export interface IQuery {
-    type: 'postgresql';
-    key: string;
-    sql: string;
-    id: string;
-}
 export interface IDashboardPanel {
     id: string;
     title: string;
@@ -29,20 +25,16 @@ export declare enum DashboardMode {
     Layout = "layout",
     Edit = "edit"
 }
-export interface ISQLSnippet {
-    key: string;
-    value: string;
-}
 export interface IDashboardDefinition {
-    sqlSnippets: ISQLSnippet[];
-    queries: IQuery[];
+    sqlSnippets: SQLSnippetModelInstance[];
+    queries: QueryModelInstance[];
 }
 export interface IDashboard {
     id: string;
     name: string;
     definition: IDashboardDefinition;
     panels: IDashboardPanel[];
-    filters: IDashboardFilter[];
+    filters: FilterModelInstance[];
 }
 export interface IDashboardConfig {
     apiBaseURL: string;

package/dist/types/filter.d.ts

@@ -1,39 +1,7 @@
-export interface IDashboardFilterOption {
-    label: string;
-    value: string;
-}
-export interface IDashboardFilterOptionQuery {
-    type: 'postgresql';
-    key: string;
-    sql: string;
-}
-export interface IFilterConfig_Select {
-    required: boolean;
-    default_value: string;
-    static_options: IDashboardFilterOption[];
-    options_query: IDashboardFilterOptionQuery;
-}
-export interface IFilterConfig_MultiSelect {
-    default_value: string[];
-    static_options: IDashboardFilterOption[];
-    options_query: IDashboardFilterOptionQuery;
-}
-export interface IFilterConfig_TextInput {
-    required: boolean;
-    default_value: string;
-}
-export interface IFilterConfig_DateRange {
-    inputFormat: 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD';
-    clearable: boolean;
-    required: boolean;
-}
-export interface IFilterConfig_Checkbox {
-    default_value: boolean;
-}
-export interface IDashboardFilter {
-    key: string;
-    label: string;
-    order: number;
-    type: 'select' | 'multi-select' | 'text-input' | 'checkbox' | 'date-range';
-    config: IFilterConfig_Select | IFilterConfig_MultiSelect | IFilterConfig_TextInput | IFilterConfig_DateRange | IFilterConfig_Checkbox;
+export declare enum DashboardFilterType {
+    Select = "select",
+    MultiSelect = "multi-select",
+    TextInput = "text-input",
+    Checkbox = "checkbox",
+    DateRange = "date-range"
 }

package/dist/types/plugin/index.d.ts

@@ -0,0 +1,97 @@
+import EventEmitter2 from 'eventemitter2';
+import React from 'react';
+/**
+ * Basic information of a viz component instance
+ */
+export interface VizInstance {
+    id: string;
+    name: string;
+}
+/**
+ * Props to render the view of viz component
+ */
+export interface VizViewProps {
+    instance: VizInstance;
+    context: VizViewContext;
+}
+export interface PluginStorage {
+    getItem<T>(key: string): Promise<T>;
+    setItem<T>(key: string, item: T): Promise<T>;
+    deleteItem(key: string): Promise<void>;
+}
+export interface ColorPaletteItem {
+    name: string;
+    type: string;
+    category: string;
+}
+export interface SingleColor extends ColorPaletteItem {
+    type: 'single';
+    value: string;
+}
+export interface ColorInterpolation extends ColorPaletteItem {
+    type: 'interpolation';
+    interpolation: (value: number) => string;
+}
+export interface ColorPalette {
+    getColor(colorInfo: ColorPaletteItem): (value: unknown) => string;
+}
+export interface IMessageChannels {
+    globalChannel: EventEmitter2;
+    getChannel(name: string): EventEmitter2;
+    close(name: string): void;
+}
+export interface VizContext {
+    pluginData: PluginStorage;
+    instanceData: PluginStorage;
+    colorPalette: ColorPalette;
+    locale: string;
+    msgChannels: IMessageChannels;
+    data: unknown;
+}
+declare type Setter<T> = (val: string) => void;
+export interface IPanelInfoEditor {
+    setTitle: Setter<string>;
+    setDescription: Setter<string>;
+    setQueryID: Setter<string>;
+}
+export interface VizConfigContext extends VizContext {
+    panelInfoEditor: IPanelInfoEditor;
+}
+export interface VizViewContext extends VizContext {
+    viewport: {
+        width: number;
+        height: number;
+    };
+}
+export interface VizConfigProps {
+    instance: VizInstance;
+    context: VizConfigContext;
+}
+export interface VizComponentMigrationContext {
+    pluginData: PluginStorage;
+    instanceData: PluginStorage;
+}
+export interface VizComponent {
+    name: string;
+    displayName?: string;
+    viewRender: React.ComponentType<VizViewProps>;
+    configRender: React.ComponentType<VizConfigProps>;
+    migration: (ctx: VizComponentMigrationContext) => Promise<void>;
+}
+export interface IPluginManifest {
+    viz: VizComponent[];
+    color: ColorPaletteItem[];
+}
+export interface IDashboardPlugin {
+    id: string;
+    version: string;
+    manifest: IPluginManifest;
+}
+export interface IPluginManager {
+    install(plugin: IDashboardPlugin): void;
+    installedPlugins: IDashboardPlugin[];
+    factory: {
+        viz: (name: string) => VizComponent;
+    };
+}
+export {};

package/dist/types/viz-panel.d.ts

@@ -1,4 +1,4 @@
-import { IVizConfig } from "./dashboard";
+import { IVizConfig } from './dashboard';
 export interface IVizPanelProps {
     conf: IVizConfig['conf'];
     setConf: (conf: IVizConfig['conf']) => void;

package/dist/utils/download.d.ts

@@ -0,0 +1,6 @@
+export declare function downloadCSV(id: string, csv: string): void;
+export declare function downloadDataListAsZip(idDataList: Array<{
+    id: string;
+    data: any[];
+}>): void;
+export declare function makeCSV(data: any | any[]): string;

package/dist/utils/sql.d.ts

@@ -1,8 +1,9 @@
-import { ContextInfoContextType, FilterValuesContextType } from "../contexts";
-import { IDashboardDefinition } from "../types";
-export declare function explainSQLSnippet(snippet: string, context: ContextInfoContextType): any;
+import { FilterValuesType } from '../model';
+import { ContextInfoType } from '../model/context';
+import { SQLSnippetModelInstance } from '../model/sql-snippets';
+export declare function explainSQLSnippet(snippet: string, context: ContextInfoType): any;
 export declare function formatSQL(sql: string, params: Record<string, any>): any;
-export declare function getSQLParams(context: ContextInfoContextType, definitions: IDashboardDefinition, filterValues: FilterValuesContextType): Record<string, any> & ContextInfoContextType & {
-    filters: FilterValuesContextType;
+export declare function getSQLParams(context: ContextInfoType, sqlSnippets: SQLSnippetModelInstance[], filterValues: FilterValuesType): Record<string, any> & ContextInfoType & {
+    filters: FilterValuesType;
 };
-export declare function explainSQL(sql: string, context: ContextInfoContextType, definitions: IDashboardDefinition, filterValues: FilterValuesContextType): any;
+export declare function explainSQL(sql: string, context: ContextInfoType, sqlSnippets: SQLSnippetModelInstance[], filterValues: FilterValuesType): any;

package/dist/utils/template/editor.d.ts

@@ -1,6 +1,6 @@
-import { TextInputProps } from "@mantine/core";
-import React, { ChangeEventHandler } from "react";
-import { ITemplateVariable } from "./types";
+import { TextInputProps } from '@mantine/core';
+import React, { ChangeEventHandler } from 'react';
+import { ITemplateVariable } from './types';
 export declare function getANewVariable(): ITemplateVariable;
 interface ITemplateInput extends Omit<TextInputProps, 'value' | 'onChange'> {
     value: string;

package/dist/utils/template/render.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ITemplateVariable } from "./types";
+import { ITemplateVariable } from './types';
 export declare function templateToJSX(template: string, variables: ITemplateVariable[], data: Record<string, number>[]): (JSX.Element | import("react").ReactNode[])[];

package/dist/utils/template/types.d.ts

@@ -1,5 +1,5 @@
-import { TNumbroFormat } from "../../panel/settings/common/numbro-format-selector";
-import { AggregationType } from "../aggregation";
+import { TNumbroFormat } from '../../panel/settings/common/numbro-format-selector';
+import { AggregationType } from '../aggregation';
 export declare type ColorConfType = {
     type: 'static';
     staticColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "2.3.0",
+  "version": "2.6.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -24,9 +24,16 @@
   "scripts": {
     "dev-build": "tsc && vite build --watch",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest --coverage"
   },
   "dependencies": {
+    "eventemitter2": "^6.4.6",
+    "file-saver": "2.0.5",
+    "stickybits": "3.7.11",
+    "jszip": "3.10.1",
     "popmotion": "^11.0.3"
   },
   "devDependencies": {
@@ -38,17 +45,24 @@
     "@mantine/notifications": "^5.0.2",
     "@mantine/prism": "^5.0.2",
     "@mantine/rte": "^5.0.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.3.0",
+    "@types/file-saver": "2.0.5",
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-grid-layout": "^1.3.2",
     "@vitejs/plugin-react": "^1.3.0",
+    "@vitest/ui": "^0.19.1",
     "ahooks": "^3.3.11",
     "axios": "^0.27.2",
     "echarts": "^5.3.2",
     "echarts-for-react": "^3.0.2",
     "echarts-gl": "^2.0.9",
     "echarts-stat": "1.2.0",
+    "jsdom": "^20.0.0",
     "lodash": "^4.17.21",
     "numbro": "^2.3.6",
     "react-grid-layout": "^1.3.4",
@@ -56,8 +70,9 @@
     "rollup-plugin-visualizer": "5.6.0",
     "tabler-icons-react": "^1.48.0",
     "typescript": "^4.6.3",
-    "vite": "^2.9.9",
-    "vite-plugin-dts": "^1.1.1"
+    "vite": "^3.0.3",
+    "vite-plugin-dts": "^1.1.1",
+    "vitest": "^0.19.1"
   },
   "peerDependencies": {
     "@emotion/react": "11.10.0",
@@ -76,6 +91,9 @@
     "echarts-gl": "^2.0.9",
     "echarts-stat": "1.2.0",
     "lodash": "^4.17.21",
+    "mobx": "^6.6.1",
+    "mobx-react-lite": "^3.4.0",
+    "mobx-state-tree": "^5.1.5",
     "numbro": "^2.3.6",
     "react": "^16.8.0 || 17.x || 18.x",
     "react-dom": "^16.8.0 || 17.x || 18.x",

package/dist/contexts/context-info-context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-export declare type TimeRangeType = [Date | null, Date | null];
-export declare type ContextInfoContextType = Record<string, TimeRangeType | any | any[]>;
-export declare const initialContextInfoContext: {};
-export declare const ContextInfoContext: React.Context<ContextInfoContextType>;

package/dist/contexts/definition-context.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { IDashboardDefinition, IQuery, ISQLSnippet } from "../types";
-export interface IDefinitionContext extends IDashboardDefinition {
-    setSQLSnippets: React.Dispatch<React.SetStateAction<ISQLSnippet[]>>;
-    setQueries: React.Dispatch<React.SetStateAction<IQuery[]>>;
-}
-export declare const DefinitionContext: React.Context<IDefinitionContext>;

package/dist/contexts/filter-values-context.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-export declare type FilterValuesContextType = Record<string, any>;
-export declare const initialFilterValuesContext: {};
-export declare const FilterValuesContext: React.Context<FilterValuesContextType>;

package/dist/filter/filter-settings/types.d.ts

@@ -1,4 +0,0 @@
-import { IDashboardFilter } from "../../types";
-export interface IFilterSettingsForm {
-    filters: IDashboardFilter[];
-}

package/dist/main/use-filters.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { IDashboard, IDashboardFilter } from "../types";
-export declare function useFilters(dashboard: IDashboard): {
-    filters: IDashboardFilter[];
-    setFilters: React.Dispatch<React.SetStateAction<IDashboardFilter[]>>;
-    filterValues: Record<string, any>;
-    setFilterValues: React.Dispatch<React.SetStateAction<Record<string, any>>>;
-};