@devtable/dashboard 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export * from './main';
1
2
  export * from './layout';
2
3
  export * from './panel';
3
4
  export * from './contexts';
@@ -1,7 +1,7 @@
1
- /// <reference types="react" />
2
- import { IDashboardItem } from "../types/dashboard";
1
+ import React from "react";
2
+ import { IDashboardPanel } from "../types/dashboard";
3
3
  interface IDashboardLayout {
4
- dashboard: IDashboardItem[];
4
+ panels: IDashboardPanel[];
5
5
  className?: string;
6
6
  cols?: {
7
7
  lg: number;
@@ -11,6 +11,11 @@ interface IDashboardLayout {
11
11
  xxs: number;
12
12
  };
13
13
  rowHeight?: number;
14
+ onRemoveItem: (id: string) => void;
15
+ isDraggable: boolean;
16
+ isResizable: boolean;
17
+ setLocalCols: React.Dispatch<React.SetStateAction<any>>;
18
+ setBreakpoint: React.Dispatch<React.SetStateAction<any>>;
14
19
  }
15
- export declare function DashboardLayout({ dashboard, className, cols, rowHeight, }: IDashboardLayout): JSX.Element;
20
+ export declare function DashboardLayout({ panels, className, cols, rowHeight, onRemoveItem, isDraggable, isResizable, setLocalCols, setBreakpoint, }: IDashboardLayout): JSX.Element;
16
21
  export {};
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import { DashboardMode } from "../types";
3
+ interface IDashboardActions {
4
+ mode: DashboardMode;
5
+ setMode: React.Dispatch<React.SetStateAction<DashboardMode>>;
6
+ addPanel: () => void;
7
+ }
8
+ export declare function DashboardActions({ mode, setMode, addPanel, }: IDashboardActions): JSX.Element;
9
+ export {};
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { IDashboard } from "../types/dashboard";
3
+ interface IDashboardProps {
4
+ dashboard: IDashboard;
5
+ className?: string;
6
+ }
7
+ export declare function Dashboard({ dashboard, className, }: IDashboardProps): JSX.Element;
8
+ export {};
File without changes
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { IDefinitionContext } from "../../../contexts";
3
+ import { ISQLSnippet } from "../../../types";
4
+ interface ISQLSnippetsForm {
5
+ sqlSnippets: ISQLSnippet[];
6
+ setSQLSnippets: IDefinitionContext['setSQLSnippets'];
7
+ }
8
+ export declare function SQLSnippetsForm({ sqlSnippets, setSQLSnippets, }: ISQLSnippetsForm): JSX.Element;
9
+ export {};
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ interface ISQLSnippetsTab {
3
+ }
4
+ export declare function SQLSnippetsTab({}: ISQLSnippetsTab): JSX.Element;
5
+ export {};
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .react-grid-item{padding:0}.react-grid-item:not(.react-grid-placeholder){background:transparent;border-radius:5px;box-shadow:0 0 10px #0003}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top}.react-grid-item img{pointer-events:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform}.react-grid-item.resizing{z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.viz-root{width:100%;overflow:scroll;padding-top:10px;height:calc(100% - 30px);background-color:#fff}.sql-query-editor-root textarea{font-family:monospace}.panel-root{padding:5px;height:100%;width:100%;max-width:100%}.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}
1
+ .viz-root{width:100%;overflow:scroll;padding-top:10px;height:calc(100% - 30px);background-color:#fff}.sql-query-editor-root textarea{font-family:monospace}.panel-root{padding:5px;height:100%;width:100%;max-width:100%}.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}.react-grid-item{padding:0}.react-grid-item:not(.react-grid-placeholder){background:transparent;border-radius:5px;box-shadow:0 0 10px #0003}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}
@@ -2,7 +2,7 @@ export interface IVizConfig {
2
2
  type: string;
3
3
  conf: Record<string, any>;
4
4
  }
5
- export interface IDashboardItem {
5
+ export interface IDashboardPanel {
6
6
  id: string;
7
7
  title: string;
8
8
  description: string;
@@ -19,3 +19,16 @@ export declare enum DashboardMode {
19
19
  Use = "use",
20
20
  Edit = "edit"
21
21
  }
22
+ export interface ISQLSnippet {
23
+ key: string;
24
+ value: string;
25
+ }
26
+ export interface IDashboardDefinition {
27
+ sqlSnippets: ISQLSnippet[];
28
+ }
29
+ export interface IDashboard {
30
+ id: string;
31
+ name: string;
32
+ definition: IDashboardDefinition;
33
+ panels: IDashboardPanel[];
34
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devtable/dashboard",
3
- "version": "0.0.1",
3
+ "version": "0.1.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,17 +26,7 @@
26
26
  "build": "tsc && vite build",
27
27
  "preview": "vite preview"
28
28
  },
29
- "dependencies": {
30
- "ahooks": "^3.3.11",
31
- "echarts": "^5.3.2",
32
- "echarts-for-react": "^3.0.2",
33
- "echarts-gl": "^2.0.9",
34
- "numbro": "^2.3.6",
35
- "react": "^18.0.0",
36
- "react-dom": "^18.0.0",
37
- "react-grid-layout": "^1.3.4",
38
- "react-hook-form": "^7.31.2"
39
- },
29
+ "dependencies": {},
40
30
  "devDependencies": {
41
31
  "@mantine/core": "^4.2.5",
42
32
  "@mantine/dates": "^4.2.5",
@@ -49,8 +39,16 @@
49
39
  "@types/react-dom": "^18.0.0",
50
40
  "@types/react-grid-layout": "^1.3.2",
51
41
  "@vitejs/plugin-react": "^1.3.0",
42
+ "ahooks": "^3.3.11",
52
43
  "axios": "^0.27.2",
44
+ "echarts": "^5.3.2",
45
+ "echarts-for-react": "^3.0.2",
46
+ "echarts-gl": "^2.0.9",
53
47
  "lodash": "^4.17.21",
48
+ "numbro": "^2.3.6",
49
+ "react-grid-layout": "^1.3.4",
50
+ "react-hook-form": "^7.31.2",
51
+ "rollup-plugin-visualizer": "5.6.0",
54
52
  "tabler-icons-react": "^1.48.0",
55
53
  "typescript": "^4.6.3",
56
54
  "vite": "^2.9.9",
@@ -63,10 +61,17 @@
63
61
  "@mantine/hooks": "^4.2.5",
64
62
  "@mantine/notifications": "^4.2.5",
65
63
  "@mantine/prism": "^4.2.5",
64
+ "ahooks": "^3.3.11",
66
65
  "axios": "^0.27.2",
66
+ "echarts": "^5.3.2",
67
+ "echarts-for-react": "^3.0.2",
68
+ "echarts-gl": "^2.0.9",
67
69
  "lodash": "^4.17.21",
70
+ "numbro": "^2.3.6",
68
71
  "react": "^16.8.0 || 17.x || 18.x",
69
72
  "react-dom": "^16.8.0 || 17.x || 18.x",
73
+ "react-grid-layout": "^1.3.4",
74
+ "react-hook-form": "^7.31.2",
70
75
  "tabler-icons-react": "^1.48.0"
71
76
  }
72
77
  }