react-semaphor 0.0.2

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/README.md ADDED
File without changes
@@ -0,0 +1,534 @@
1
+ /// <reference types="react-grid-layout" />
2
+
3
+ import { FontSpec } from 'chart.js';
4
+ import { JSX as JSX_2 } from 'react/jsx-runtime';
5
+ import { Layout } from 'react-grid-layout';
6
+ import { StoreApi } from 'zustand';
7
+ import { UseBoundStore } from 'zustand';
8
+
9
+ declare type Actions = {
10
+ setAuthToken: (authToken: AuthToken) => void;
11
+ setThemeStyle: (themeStyle: StyleProps) => void;
12
+ setIsEditorSaveEvent: (isEditorSaveEvent: boolean) => void;
13
+ setBookmarkKey: (bookmarkKey: string) => void;
14
+ setDashboard: (dashboard: TDashboard) => void;
15
+ setDashboardTheme: (theme: 'light' | 'dark' | 'system') => void;
16
+ setDashboardTitle: (title: string) => void;
17
+ setDashboardDescription: (description: string) => void;
18
+ setSheets: (sheets: TSheet[]) => void;
19
+ setSheetTitle: (sheetId: string, title: string) => void;
20
+ setSheetDescription: (sheetId: string, description: string) => void;
21
+ setSelectedSheetId: (sheetId: string | null) => void;
22
+ setSheetLayout: (sheetId: string, layout: ReactGridLayout.Layout[]) => void;
23
+ setCards: (sheetId: string, cards: TCard[]) => void;
24
+ setSelectedCardId: (sheetId: string, cardId: string | null) => void;
25
+ setSelectedCard: (card: TCard | null) => void;
26
+ setCardTitle: (sheetId: string, cardId: string, title: string) => void;
27
+ setCardSql: (sheetId: string, cardId: string, sql: string) => void;
28
+ setCardDescription: (sheetId: string, cardId: string, description: string) => void;
29
+ setCardData: (sheetId: string, cardId: string, data: any[]) => void;
30
+ addCard: (sheetId: string, card: TCard) => void;
31
+ updateCard: (sheetId: string, card: TCard) => void;
32
+ removeCard: (sheetId: string, card: TCard) => void;
33
+ setIsDashboardEditing: (editing: boolean) => void;
34
+ setShowDashboardJSON: (show: boolean) => void;
35
+ setIsVisualEditing: (editing: boolean) => void;
36
+ setShowFilters: (show: boolean) => void;
37
+ addFilter: (filter: TFilter) => void;
38
+ removeFilter: (filterId: string) => void;
39
+ updateFilter: (filter: TFilter) => void;
40
+ addOrUpdateFilterValue: (filterValue: TFilterValue) => void;
41
+ removeFilterValue: (filterId: string) => void;
42
+ setStyle: (style: TStyle) => void;
43
+ getStyle: () => TStyle | undefined;
44
+ setOnSaveFunction: (onSaveFunction: (dashboard: TDashboard) => void) => void;
45
+ setOnAddCard: (onAddCard: (card: TCard, sheetId: string) => void) => void;
46
+ setOnUpdateCard: (onUpdateCard: (card: TCard, sheetId: string) => void) => void;
47
+ setOnRemoveCard: (onRemoveCard: (card: TCard, sheetId: string) => void) => void;
48
+ setOnEvent: (onEvent: (event: TEvent) => void) => void;
49
+ getDashboard: () => TDashboard | undefined;
50
+ getSelectedSheet: () => TSheet | undefined;
51
+ getSelectedSheetCards: () => TCard[] | undefined;
52
+ getSelectedCard: () => TCard | undefined;
53
+ getSelectedSheetLayout: () => ReactGridLayout.Layout[] | undefined;
54
+ };
55
+
56
+ export declare type AuthToken = {
57
+ accessToken: string;
58
+ refreshToken: string;
59
+ };
60
+
61
+ declare type BaseFilter = {
62
+ filterId: TFilter['id'];
63
+ expression?: string;
64
+ name: string;
65
+ valueType: 'string' | 'number' | 'date' | 'boolean';
66
+ connectionType?: 'database' | 'api';
67
+ };
68
+
69
+ export declare function cleanCard(card: TCard): TCard;
70
+
71
+ export declare function Dashboard(props: DashboardProps): JSX_2.Element;
72
+
73
+ export declare function DashboardPlus({ showControls, showFooter, ...rest }: DashboardPlusProps): JSX_2.Element;
74
+
75
+ declare type DashboardPlusProps = {
76
+ showControls?: boolean;
77
+ showFooter?: boolean;
78
+ } & DashboardProps;
79
+
80
+ export declare type DashboardProps = {
81
+ id: string;
82
+ authToken: AuthToken | undefined;
83
+ style?: TStyle;
84
+ currentTheme?: 'light' | 'dark' | 'system';
85
+ onEvent?: (event: TEvent) => void;
86
+ onSave?: (dashboard: TDashboard) => void;
87
+ LoadingComponent?: (props: LoadingProps) => React.ReactNode;
88
+ ErrorComponent?: (props: ErrorProps) => React.ReactNode;
89
+ };
90
+
91
+ declare type DashboardStore = {
92
+ authToken?: AuthToken;
93
+ theme?: 'light' | 'dark' | 'system';
94
+ themeStyle?: StyleProps;
95
+ bookmarkKey?: string;
96
+ dashboard: TDashboard;
97
+ selectedSheetId?: string | null | undefined;
98
+ selectedCardId?: string | null;
99
+ selectedCard?: TCard | null;
100
+ isDashboardEditing: boolean;
101
+ isVisualEditing: boolean;
102
+ showDashboardJSON: boolean;
103
+ showFilters: boolean;
104
+ filterValues?: TFilterValue[];
105
+ isEditorSaveEvent: boolean;
106
+ onEvent?: (event: TEvent) => void;
107
+ onSaveFunction?: (dashboard: TDashboard) => void;
108
+ onAddCard?: (card: TCard, sheetId: string) => void;
109
+ onUpdateCard?: (card: TCard, sheetId: string) => void;
110
+ onRemoveCard?: (card: TCard, sheetId: string) => void;
111
+ actions: Actions;
112
+ };
113
+
114
+ export declare const DashboardWC: CustomElementConstructor;
115
+
116
+ export declare type ErrorProps = {
117
+ message?: string;
118
+ };
119
+
120
+ declare type FilterForBetween = BaseFilter & {
121
+ operation: 'between' | 'not between';
122
+ values: [number, number];
123
+ };
124
+
125
+ declare type FilterForCompare = BaseFilter & {
126
+ operation: '>' | '<' | '>=' | '<=';
127
+ values: [number];
128
+ };
129
+
130
+ declare type FilterForDate = BaseFilter & {
131
+ operation: 'between' | 'not between';
132
+ values: [Date, Date];
133
+ };
134
+
135
+ declare type FilterForEqual = BaseFilter & {
136
+ operation: '=' | '!=' | 'is null' | 'is not null';
137
+ values: [string | number];
138
+ };
139
+
140
+ declare type FilterForIn = BaseFilter & {
141
+ operation: 'in' | 'not in';
142
+ values: (string | number)[];
143
+ };
144
+
145
+ declare type FilterForString = BaseFilter & {
146
+ operation: 'like' | 'not like';
147
+ values: [string];
148
+ };
149
+
150
+ export declare function getBookmarkKey(dashboardId: string): string;
151
+
152
+ export declare function getDashbaordStateWithoutData(dashboardState: TDashboard): {
153
+ sheets: {
154
+ cards: TCard[] | undefined;
155
+ id: string;
156
+ title?: string | undefined;
157
+ description?: string | undefined;
158
+ layout?: Layout[] | undefined;
159
+ }[] | undefined;
160
+ id: string;
161
+ title?: string | undefined;
162
+ description?: string | undefined;
163
+ style?: TStyle | undefined;
164
+ filters?: TFilter[] | undefined;
165
+ };
166
+
167
+ export declare type LoadingProps = {
168
+ message?: string;
169
+ };
170
+
171
+ /**
172
+ * Style propeerites for the dashboard
173
+ */
174
+ export declare type StyleProps = {
175
+ /** css class for `dashboard-panel` */
176
+ dashboardPanel?: string;
177
+ /** css class for `dashboard-tabs-container` */
178
+ dashboardTabsContainer?: string;
179
+ /** css class for `dashboard-card` */
180
+ /** css class for `dashboard-card-container` */
181
+ dashboardCardContainer?: string;
182
+ dashboardCard?: string;
183
+ /** grid-layout config */
184
+ gridLayout?: {
185
+ /** css class for `react-grid-layout` */
186
+ className?: string;
187
+ margin?: [number, number];
188
+ };
189
+ /** chart config */
190
+ chart?: {
191
+ /** chart font config */
192
+ font?: Partial<FontSpec>;
193
+ dataset?: any;
194
+ /** chart options */
195
+ options?: any;
196
+ };
197
+ };
198
+
199
+ export declare type TCard = {
200
+ id: string;
201
+ title: string;
202
+ description?: string;
203
+ connectionId?: string;
204
+ type: TChartType;
205
+ sql?: string;
206
+ data?: any[];
207
+ cfg?: any;
208
+ customCfg?: any;
209
+ preferences?: TCardPreferences;
210
+ lastSelectedDatabase?: string;
211
+ lastSelectedSchema?: string;
212
+ lastSelectedTable?: string;
213
+ refreshInterval?: string;
214
+ };
215
+
216
+ export declare type TCardPreferences = {
217
+ filterOnClick?: boolean;
218
+ filterOnClickField?: string;
219
+ };
220
+
221
+ declare type TChartType = 'bar' | 'horizontalBar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'bubble' | 'scatter' | 'stackedBar' | 'table';
222
+
223
+ export declare type TDashboard = {
224
+ id: string;
225
+ title?: string;
226
+ description?: string;
227
+ sheets?: TSheet[];
228
+ style?: TStyle;
229
+ filters?: TFilter[];
230
+ };
231
+
232
+ export declare type TEvent = {
233
+ type: 'success' | 'error' | 'info' | 'warning';
234
+ message: any;
235
+ };
236
+
237
+ declare type TFilter = {
238
+ id: string;
239
+ connectionId: string;
240
+ title: string;
241
+ column: string;
242
+ dataType: string;
243
+ table: string;
244
+ database: string;
245
+ sql: string;
246
+ };
247
+
248
+ declare type TFilterValue = FilterForString | FilterForEqual | FilterForCompare | FilterForBetween | FilterForIn | FilterForDate;
249
+
250
+ export declare type TSheet = {
251
+ id: string;
252
+ title?: string;
253
+ description?: string;
254
+ layout?: ReactGridLayout.Layout[];
255
+ cards?: TCard[];
256
+ };
257
+
258
+ /**
259
+ * Style for the dashboard
260
+ */
261
+ export declare type TStyle = {
262
+ default: StyleProps;
263
+ dark?: StyleProps;
264
+ };
265
+
266
+ export declare function useActions(): {
267
+ setDashboardTitle: (title: string) => void;
268
+ getStyle: () => TStyle | undefined;
269
+ getDashboard: () => TDashboard | undefined;
270
+ setOnSaveFunction: (onSaveFunction: (dashboard: TDashboard) => void) => void;
271
+ setOnAddCard: (onAddCard: (card: TCard, sheetId: string) => void) => void;
272
+ setOnUpateCard: (onUpdateCard: (card: TCard, sheetId: string) => void) => void;
273
+ setOnRemoveCard: (onRemoveCard: (card: TCard, sheetId: string) => void) => void;
274
+ };
275
+
276
+ export declare const useDashboardStore: UseBoundStore<Omit<StoreApi<DashboardStore>, "setState"> & {
277
+ setState(nextStateOrUpdater: DashboardStore | Partial<DashboardStore> | ((state: {
278
+ authToken?: {
279
+ accessToken: string;
280
+ refreshToken: string;
281
+ } | undefined;
282
+ theme?: "light" | "dark" | "system" | undefined;
283
+ themeStyle?: {
284
+ dashboardPanel?: string | undefined;
285
+ dashboardTabsContainer?: string | undefined;
286
+ dashboardCardContainer?: string | undefined;
287
+ dashboardCard?: string | undefined;
288
+ gridLayout?: {
289
+ className?: string | undefined;
290
+ margin?: [number, number] | undefined;
291
+ } | undefined;
292
+ chart?: {
293
+ font?: {
294
+ family?: string | undefined;
295
+ size?: number | undefined;
296
+ style?: "normal" | "italic" | "oblique" | "initial" | "inherit" | undefined;
297
+ weight?: number | "bold" | "normal" | "lighter" | "bolder" | null | undefined;
298
+ lineHeight?: string | number | undefined;
299
+ } | undefined;
300
+ dataset?: any;
301
+ options?: any;
302
+ } | undefined;
303
+ } | undefined;
304
+ bookmarkKey?: string | undefined;
305
+ dashboard: {
306
+ id: string;
307
+ title?: string | undefined;
308
+ description?: string | undefined;
309
+ sheets?: {
310
+ id: string;
311
+ title?: string | undefined;
312
+ description?: string | undefined;
313
+ layout?: {
314
+ i: string;
315
+ x: number;
316
+ y: number;
317
+ w: number;
318
+ h: number;
319
+ minW?: number | undefined;
320
+ maxW?: number | undefined;
321
+ minH?: number | undefined;
322
+ maxH?: number | undefined;
323
+ moved?: boolean | undefined;
324
+ static?: boolean | undefined;
325
+ isDraggable?: boolean | undefined;
326
+ isResizable?: boolean | undefined;
327
+ resizeHandles?: ("w" | "s" | "e" | "n" | "sw" | "nw" | "se" | "ne")[] | undefined;
328
+ isBounded?: boolean | undefined;
329
+ }[] | undefined;
330
+ cards?: {
331
+ id: string;
332
+ title: string;
333
+ description?: string | undefined;
334
+ connectionId?: string | undefined;
335
+ type: TChartType;
336
+ sql?: string | undefined;
337
+ data?: any[] | undefined;
338
+ cfg?: any;
339
+ customCfg?: any;
340
+ preferences?: {
341
+ filterOnClick?: boolean | undefined;
342
+ filterOnClickField?: string | undefined;
343
+ } | undefined;
344
+ lastSelectedDatabase?: string | undefined;
345
+ lastSelectedSchema?: string | undefined;
346
+ lastSelectedTable?: string | undefined;
347
+ refreshInterval?: string | undefined;
348
+ }[] | undefined;
349
+ }[] | undefined;
350
+ style?: {
351
+ default: {
352
+ dashboardPanel?: string | undefined;
353
+ dashboardTabsContainer?: string | undefined;
354
+ dashboardCardContainer?: string | undefined;
355
+ dashboardCard?: string | undefined;
356
+ gridLayout?: {
357
+ className?: string | undefined;
358
+ margin?: [number, number] | undefined;
359
+ } | undefined;
360
+ chart?: {
361
+ font?: {
362
+ family?: string | undefined;
363
+ size?: number | undefined;
364
+ style?: "normal" | "italic" | "oblique" | "initial" | "inherit" | undefined;
365
+ weight?: number | "bold" | "normal" | "lighter" | "bolder" | null | undefined;
366
+ lineHeight?: string | number | undefined;
367
+ } | undefined;
368
+ dataset?: any;
369
+ options?: any;
370
+ } | undefined;
371
+ };
372
+ dark?: {
373
+ dashboardPanel?: string | undefined;
374
+ dashboardTabsContainer?: string | undefined;
375
+ dashboardCardContainer?: string | undefined;
376
+ dashboardCard?: string | undefined;
377
+ gridLayout?: {
378
+ className?: string | undefined;
379
+ margin?: [number, number] | undefined;
380
+ } | undefined;
381
+ chart?: {
382
+ font?: {
383
+ family?: string | undefined;
384
+ size?: number | undefined;
385
+ style?: "normal" | "italic" | "oblique" | "initial" | "inherit" | undefined;
386
+ weight?: number | "bold" | "normal" | "lighter" | "bolder" | null | undefined;
387
+ lineHeight?: string | number | undefined;
388
+ } | undefined;
389
+ dataset?: any;
390
+ options?: any;
391
+ } | undefined;
392
+ } | undefined;
393
+ } | undefined;
394
+ filters?: {
395
+ id: string;
396
+ connectionId: string;
397
+ title: string;
398
+ column: string;
399
+ dataType: string;
400
+ table: string;
401
+ database: string;
402
+ sql: string;
403
+ }[] | undefined;
404
+ };
405
+ selectedSheetId?: string | null | undefined;
406
+ selectedCardId?: string | null | undefined;
407
+ selectedCard?: {
408
+ id: string;
409
+ title: string;
410
+ description?: string | undefined;
411
+ connectionId?: string | undefined;
412
+ type: TChartType;
413
+ sql?: string | undefined;
414
+ data?: any[] | undefined;
415
+ cfg?: any;
416
+ customCfg?: any;
417
+ preferences?: {
418
+ filterOnClick?: boolean | undefined;
419
+ filterOnClickField?: string | undefined;
420
+ } | undefined;
421
+ lastSelectedDatabase?: string | undefined;
422
+ lastSelectedSchema?: string | undefined;
423
+ lastSelectedTable?: string | undefined;
424
+ refreshInterval?: string | undefined;
425
+ } | null | undefined;
426
+ isDashboardEditing: boolean;
427
+ isVisualEditing: boolean;
428
+ showDashboardJSON: boolean;
429
+ showFilters: boolean;
430
+ filterValues?: ({
431
+ filterId: string;
432
+ expression?: string | undefined;
433
+ name: string;
434
+ valueType: "string" | "number" | "boolean" | "date";
435
+ connectionType?: "database" | "api" | undefined;
436
+ operation: "like" | "not like";
437
+ values: [string];
438
+ } | {
439
+ filterId: string;
440
+ expression?: string | undefined;
441
+ name: string;
442
+ valueType: "string" | "number" | "boolean" | "date";
443
+ connectionType?: "database" | "api" | undefined;
444
+ operation: "=" | "!=" | "is null" | "is not null";
445
+ values: [string | number];
446
+ } | {
447
+ filterId: string;
448
+ expression?: string | undefined;
449
+ name: string;
450
+ valueType: "string" | "number" | "boolean" | "date";
451
+ connectionType?: "database" | "api" | undefined;
452
+ operation: ">" | "<" | ">=" | "<=";
453
+ values: [number];
454
+ } | {
455
+ filterId: string;
456
+ expression?: string | undefined;
457
+ name: string;
458
+ valueType: "string" | "number" | "boolean" | "date";
459
+ connectionType?: "database" | "api" | undefined;
460
+ operation: "between" | "not between";
461
+ values: [number, number];
462
+ } | {
463
+ filterId: string;
464
+ expression?: string | undefined;
465
+ name: string;
466
+ valueType: "string" | "number" | "boolean" | "date";
467
+ connectionType?: "database" | "api" | undefined;
468
+ operation: "between" | "not between";
469
+ values: [Date, Date];
470
+ } | {
471
+ filterId: string;
472
+ expression?: string | undefined;
473
+ name: string;
474
+ valueType: "string" | "number" | "boolean" | "date";
475
+ connectionType?: "database" | "api" | undefined;
476
+ operation: "in" | "not in";
477
+ values: (string | number)[];
478
+ })[] | undefined;
479
+ isEditorSaveEvent: boolean;
480
+ onEvent?: ((event: TEvent) => void) | undefined;
481
+ onSaveFunction?: ((dashboard: TDashboard) => void) | undefined;
482
+ onAddCard?: ((card: TCard, sheetId: string) => void) | undefined;
483
+ onUpdateCard?: ((card: TCard, sheetId: string) => void) | undefined;
484
+ onRemoveCard?: ((card: TCard, sheetId: string) => void) | undefined;
485
+ actions: {
486
+ setAuthToken: (authToken: AuthToken) => void;
487
+ setThemeStyle: (themeStyle: StyleProps) => void;
488
+ setIsEditorSaveEvent: (isEditorSaveEvent: boolean) => void;
489
+ setBookmarkKey: (bookmarkKey: string) => void;
490
+ setDashboard: (dashboard: TDashboard) => void;
491
+ setDashboardTheme: (theme: 'light' | 'dark' | 'system') => void;
492
+ setDashboardTitle: (title: string) => void;
493
+ setDashboardDescription: (description: string) => void;
494
+ setSheets: (sheets: TSheet[]) => void;
495
+ setSheetTitle: (sheetId: string, title: string) => void;
496
+ setSheetDescription: (sheetId: string, description: string) => void;
497
+ setSelectedSheetId: (sheetId: string | null) => void;
498
+ setSheetLayout: (sheetId: string, layout: ReactGridLayout.Layout[]) => void;
499
+ setCards: (sheetId: string, cards: TCard[]) => void;
500
+ setSelectedCardId: (sheetId: string, cardId: string | null) => void;
501
+ setSelectedCard: (card: TCard | null) => void;
502
+ setCardTitle: (sheetId: string, cardId: string, title: string) => void;
503
+ setCardSql: (sheetId: string, cardId: string, sql: string) => void;
504
+ setCardDescription: (sheetId: string, cardId: string, description: string) => void;
505
+ setCardData: (sheetId: string, cardId: string, data: any[]) => void;
506
+ addCard: (sheetId: string, card: TCard) => void;
507
+ updateCard: (sheetId: string, card: TCard) => void;
508
+ removeCard: (sheetId: string, card: TCard) => void;
509
+ setIsDashboardEditing: (editing: boolean) => void;
510
+ setShowDashboardJSON: (show: boolean) => void;
511
+ setIsVisualEditing: (editing: boolean) => void;
512
+ setShowFilters: (show: boolean) => void;
513
+ addFilter: (filter: TFilter) => void;
514
+ removeFilter: (filterId: string) => void;
515
+ updateFilter: (filter: TFilter) => void;
516
+ addOrUpdateFilterValue: (filterValue: TFilterValue) => void;
517
+ removeFilterValue: (filterId: string) => void;
518
+ setStyle: (style: TStyle) => void;
519
+ getStyle: () => TStyle | undefined;
520
+ setOnSaveFunction: (onSaveFunction: (dashboard: TDashboard) => void) => void;
521
+ setOnAddCard: (onAddCard: (card: TCard, sheetId: string) => void) => void;
522
+ setOnUpdateCard: (onUpdateCard: (card: TCard, sheetId: string) => void) => void;
523
+ setOnRemoveCard: (onRemoveCard: (card: TCard, sheetId: string) => void) => void;
524
+ setOnEvent: (onEvent: (event: TEvent) => void) => void;
525
+ getDashboard: () => TDashboard | undefined;
526
+ getSelectedSheet: () => TSheet | undefined;
527
+ getSelectedSheetCards: () => TCard[] | undefined;
528
+ getSelectedCard: () => TCard | undefined;
529
+ getSelectedSheetLayout: () => ReactGridLayout.Layout[] | undefined;
530
+ };
531
+ }) => void), shouldReplace?: boolean | undefined): void;
532
+ }>;
533
+
534
+ export { }