@devtable/dashboard 2.5.0 → 2.6.0

package/dist/panel/viz/pie/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface IVizPie {
+    conf: any;
+    data: any[];
+    width: number;
+    height: number;
+}
+export declare function VizPie({ conf, data, width, height }: IVizPie): JSX.Element;
+export {};

package/dist/panel/viz/pie/panel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IVizPanelProps } from '../../../types/viz-panel';
+export declare function VizPiePanel({ conf: { label_field, value_field }, setConf, data }: IVizPanelProps): JSX.Element;

package/dist/panel/viz/rich-text/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IRichTextConf } from './type';
+interface IRichText {
+    conf: IRichTextConf;
+    data: any[];
+    width: number;
+    height: number;
+}
+export declare function VizRichText({ conf, width, height }: IRichText): JSX.Element | null;
+export {};

package/dist/panel/viz/rich-text/panel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IVizRichTextPanel } from './type';
+export declare function VizRichTextPanel({ conf, setConf }: IVizRichTextPanel): JSX.Element;

package/dist/panel/viz/rich-text/type.d.ts

@@ -0,0 +1,8 @@
+import { IVizPanelProps } from '../../../types';
+export interface IRichTextConf {
+    content: '';
+}
+export interface IVizRichTextPanel extends Omit<IVizPanelProps, 'conf' | 'setConf'> {
+    conf: IRichTextConf;
+    setConf: (values: IRichTextConf) => void;
+}

package/dist/panel/viz/stats/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IVizStatsConf } from './types';
+interface IVizStats {
+    conf: IVizStatsConf;
+    data: any;
+    width: number;
+    height: number;
+}
+export declare function VizStats({ conf: { template, variables, align }, data }: IVizStats): JSX.Element;
+export {};

package/dist/panel/viz/stats/panel/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IVizPanelProps } from '../../../../types/viz-panel';
+import { IVizStatsConf } from '../types';
+import { ILegacyStatsConf } from '../update';
+interface IVizStatsPanel extends Omit<IVizPanelProps, 'conf' | 'setConf'> {
+    conf: IVizStatsConf | ILegacyStatsConf;
+    setConf: (conf: IVizStatsConf) => void;
+}
+export declare function VizStatsPanel({ conf, setConf, data }: IVizStatsPanel): JSX.Element;
+export {};

package/dist/panel/viz/stats/panel/variable.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Control, UseFieldArrayRemove } from 'react-hook-form';
+import { IVizStatsConf } from '../types';
+interface VariableField {
+    control: Control<IVizStatsConf, any>;
+    index: number;
+    remove: UseFieldArrayRemove;
+    data: any[];
+}
+export declare function VariableField({ control, index, remove, data }: VariableField): JSX.Element;
+export {};

package/dist/panel/viz/stats/panel/variables.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Control, UseFormWatch } from 'react-hook-form';
+import { IVizStatsConf } from '../types';
+interface IVariablesField {
+    control: Control<IVizStatsConf, any>;
+    watch: UseFormWatch<IVizStatsConf>;
+    data: any[];
+}
+export declare function VariablesField({ control, watch, data }: IVariablesField): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { ITemplateVariable } from '../../../utils/template/types';
+export interface IVizStatsConf {
+    align: 'center';
+    template: string;
+    variables: ITemplateVariable[];
+}

package/dist/panel/viz/stats/update/index.d.ts

@@ -0,0 +1,15 @@
+import { TNumbroFormat } from '../../../settings/common/numbro-format-selector';
+import { IVizStatsConf } from '../types';
+export interface ILegacyStatsConf {
+    align: 'center';
+    size: string;
+    weight: string;
+    color: any;
+    content: {
+        prefix: string;
+        data_field: string;
+        formatter: TNumbroFormat;
+        postfix: string;
+    };
+}
+export declare function updateSchema(legacyConf: IVizStatsConf | ILegacyStatsConf): IVizStatsConf;

package/dist/panel/viz/sunburst/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ISunbrust {
+    conf: any;
+    data: any[];
+    width: number;
+    height: number;
+}
+export declare function Sunbrust({ conf, data, width, height }: ISunbrust): JSX.Element;
+export {};

package/dist/panel/viz/sunburst/panel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IVizPanelProps } from '../../../types/viz-panel';
+export declare function SunburstPanel({ conf: { label_field, value_field }, setConf, data }: IVizPanelProps): JSX.Element;

package/dist/panel/viz/table/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ITableConf } from './type';
+interface IVizTable {
+    conf: ITableConf;
+    data: any;
+    width: number;
+    height: number;
+}
+export declare function VizTable({ conf, data, width, height }: IVizTable): JSX.Element;
+export {};

package/dist/panel/viz/table/panel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IVizPanelProps } from '../../../types/viz-panel';
+export declare function VizTablePanel({ conf: { columns, ...restConf }, setConf, data }: IVizPanelProps): JSX.Element;

package/dist/panel/viz/table/type.d.ts

@@ -0,0 +1,21 @@
+export declare enum ValueType {
+    string = "string",
+    number = "number",
+    eloc = "eloc",
+    percentage = "percentage"
+}
+export interface IColumnConf {
+    label: string;
+    value_field: string;
+    value_type: ValueType;
+}
+export interface ITableConf {
+    id_field: string;
+    use_raw_columns: boolean;
+    columns: IColumnConf[];
+    fontSize: string;
+    horizontalSpacing: string;
+    verticalSpacing: string;
+    striped: boolean;
+    highlightOnHover: boolean;
+}

package/dist/panel/viz/table/value-type-selector.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Sx } from '@mantine/core';
+interface IValueTypeSelector {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    sx?: Sx;
+}
+export declare function ValueTypeSelector({ label, value, onChange, sx }: IValueTypeSelector): JSX.Element;
+export {};

package/dist/panel/viz/table/value.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ValueType } from './type';
+interface ICellValue {
+    value: any;
+    type: ValueType;
+}
+export declare function CellValue({ value, type }: ICellValue): JSX.Element;
+export {};

package/dist/plugins/json-plugin-storage.d.ts

@@ -0,0 +1,8 @@
+import { PluginStorage } from '../types/plugin';
+export declare class JsonPluginStorage implements PluginStorage {
+    private root;
+    constructor(root: Record<string, any>);
+    deleteItem(key: string): Promise<void>;
+    getItem<T>(key: string): Promise<T>;
+    setItem<T>(key: string, item: T): Promise<T>;
+}

package/dist/plugins/message-channels.d.ts

@@ -0,0 +1,8 @@
+import EventEmitter2 from 'eventemitter2';
+import { IMessageChannels } from '../types/plugin';
+export declare class MessageChannels implements IMessageChannels {
+    private channels;
+    globalChannel: EventEmitter2;
+    getChannel(name: string): EventEmitter2;
+    close(name: string): void;
+}

package/dist/plugins/plugin-context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IPluginManager } from '../types/plugin';
+import { PluginManager } from './plugin-manager';
+import { VizManager } from './viz-manager';
+interface IPluginContextProps {
+    pluginManager: IPluginManager;
+    vizManager: VizManager;
+}
+export declare const pluginManager: PluginManager;
+export declare const createPluginContext: () => IPluginContextProps;
+export declare const PluginContext: import("react").Context<IPluginContextProps>;
+export {};

package/dist/plugins/plugin-manager.d.ts

@@ -0,0 +1,18 @@
+import { IDashboardPlugin, IPluginManager, VizComponent } from '../types/plugin';
+export declare class PluginManager implements IPluginManager {
+    /**
+     * Id to plugin map
+     * @private
+     */
+    private plugins;
+    /**
+     * Name to component map
+     */
+    private vizComponents;
+    constructor();
+    factory: {
+        viz: (name: string) => VizComponent;
+    };
+    install(plugin: IDashboardPlugin): void;
+    get installedPlugins(): IDashboardPlugin[];
+}

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

@@ -0,0 +1,41 @@
+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 IDashboardPanel {
+    id: string;
+    title: string;
+    description: string;
+    layout: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        moved?: boolean;
+        static?: boolean;
+    };
+    queryID: string;
+    viz: IVizConfig;
+}
+export declare enum DashboardMode {
+    Use = "use",
+    Layout = "layout",
+    Edit = "edit"
+}
+export interface IDashboardDefinition {
+    sqlSnippets: SQLSnippetModelInstance[];
+    queries: QueryModelInstance[];
+}
+export interface IDashboard {
+    id: string;
+    name: string;
+    definition: IDashboardDefinition;
+    panels: IDashboardPanel[];
+    filters: FilterModelInstance[];
+}
+export interface IDashboardConfig {
+    apiBaseURL: string;
+}

package/dist/types/filter.d.ts

@@ -0,0 +1,7 @@
+export declare enum DashboardFilterType {
+    Select = "select",
+    MultiSelect = "multi-select",
+    TextInput = "text-input",
+    Checkbox = "checkbox",
+    DateRange = "date-range"
+}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dashboard';
+export * from './filter';
+export * from './viz-panel';

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

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

package/dist/utils/aggregation.d.ts

@@ -0,0 +1,2 @@
+export declare type AggregationType = 'none' | 'sum' | 'mean' | 'median' | 'max' | 'min';
+export declare function aggregateValue(data: Record<string, number>[], data_field: string, aggregation: AggregationType): number;

package/dist/utils/color-mapping.d.ts

@@ -0,0 +1,9 @@
+export interface InterpolateColorOption {
+    valueRange: number[];
+    colorRange: string[];
+}
+export declare class InterpolateColor {
+    mapper: (v: number) => string;
+    constructor({ valueRange, colorRange }: InterpolateColorOption);
+    getColor(value: number): string;
+}

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

@@ -0,0 +1,9 @@
+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: ContextInfoType, sqlSnippets: SQLSnippetModelInstance[], filterValues: FilterValuesType): Record<string, any> & ContextInfoType & {
+    filters: FilterValuesType;
+};
+export declare function explainSQL(sql: string, context: ContextInfoType, sqlSnippets: SQLSnippetModelInstance[], filterValues: FilterValuesType): any;

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

@@ -0,0 +1,16 @@
+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;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const TemplateInput: React.ForwardRefExoticComponent<ITemplateInput & React.RefAttributes<unknown>>;
+interface ITemplateVariableField {
+    value: ITemplateVariable;
+    onChange: (v: ITemplateVariable) => void;
+    data: any[];
+}
+export declare const TemplateVariableField: React.ForwardRefExoticComponent<ITemplateVariableField & React.RefAttributes<unknown>>;
+export {};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,21 @@
+import { TNumbroFormat } from '../../panel/settings/common/numbro-format-selector';
+import { AggregationType } from '../aggregation';
+export declare type ColorConfType = {
+    type: 'static';
+    staticColor: string;
+} | {
+    type: 'continuous';
+    valueRange: number[];
+    colorRange: string[];
+} | {
+    type: 'piecewise';
+};
+export interface ITemplateVariable {
+    name: string;
+    data_field: string;
+    aggregation: AggregationType;
+    formatter: TNumbroFormat;
+    color: ColorConfType;
+    size: string;
+    weight: string;
+}

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -32,6 +32,7 @@
   "dependencies": {
     "eventemitter2": "^6.4.6",
     "file-saver": "2.0.5",
+    "stickybits": "3.7.11",
     "jszip": "3.10.1",
     "popmotion": "^11.0.3"
   },
@@ -100,4 +101,4 @@
     "react-hook-form": "^7.31.2",
     "tabler-icons-react": "^1.48.0"
   }
-}
+}