@prismiq/react 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/README.md +88 -0
- package/dist/CustomSQLEditor-BXB4rf1q.d.cts +1297 -0
- package/dist/CustomSQLEditor-DYeId0Gp.d.ts +1297 -0
- package/dist/DashboardDialog-B3vYC5Gs.d.ts +1106 -0
- package/dist/DashboardDialog-LHmrtNQU.d.cts +1106 -0
- package/dist/accessibility-2yy5yqRR.d.cts +145 -0
- package/dist/accessibility-2yy5yqRR.d.ts +145 -0
- package/dist/charts/index.cjs +110 -0
- package/dist/charts/index.cjs.map +1 -0
- package/dist/charts/index.d.cts +2 -0
- package/dist/charts/index.d.ts +2 -0
- package/dist/charts/index.js +5 -0
- package/dist/charts/index.js.map +1 -0
- package/dist/chunk-2H5WTH4K.js +2409 -0
- package/dist/chunk-2H5WTH4K.js.map +1 -0
- package/dist/chunk-4AVL6GQK.cjs +470 -0
- package/dist/chunk-4AVL6GQK.cjs.map +1 -0
- package/dist/chunk-EX74SI67.js +455 -0
- package/dist/chunk-EX74SI67.js.map +1 -0
- package/dist/chunk-FEABEF3J.cjs +7543 -0
- package/dist/chunk-FEABEF3J.cjs.map +1 -0
- package/dist/chunk-JTCBZDHY.js +126 -0
- package/dist/chunk-JTCBZDHY.js.map +1 -0
- package/dist/chunk-LMTG3LRC.cjs +326 -0
- package/dist/chunk-LMTG3LRC.cjs.map +1 -0
- package/dist/chunk-MDXGGZSW.cjs +273 -0
- package/dist/chunk-MDXGGZSW.cjs.map +1 -0
- package/dist/chunk-MOAEEF5P.js +7510 -0
- package/dist/chunk-MOAEEF5P.js.map +1 -0
- package/dist/chunk-NK7HKX2J.cjs +2459 -0
- package/dist/chunk-NK7HKX2J.cjs.map +1 -0
- package/dist/chunk-NY6TZLST.cjs +8781 -0
- package/dist/chunk-NY6TZLST.cjs.map +1 -0
- package/dist/chunk-T6STUE7E.js +321 -0
- package/dist/chunk-T6STUE7E.js.map +1 -0
- package/dist/chunk-TRW7DKLP.cjs +141 -0
- package/dist/chunk-TRW7DKLP.cjs.map +1 -0
- package/dist/chunk-UPYINBZU.js +8706 -0
- package/dist/chunk-UPYINBZU.js.map +1 -0
- package/dist/chunk-WWTT2OJ5.js +246 -0
- package/dist/chunk-WWTT2OJ5.js.map +1 -0
- package/dist/components/index.cjs +222 -0
- package/dist/components/index.cjs.map +1 -0
- package/dist/components/index.d.cts +207 -0
- package/dist/components/index.d.ts +207 -0
- package/dist/components/index.js +5 -0
- package/dist/components/index.js.map +1 -0
- package/dist/dashboard/index.cjs +140 -0
- package/dist/dashboard/index.cjs.map +1 -0
- package/dist/dashboard/index.d.cts +302 -0
- package/dist/dashboard/index.d.ts +302 -0
- package/dist/dashboard/index.js +7 -0
- package/dist/dashboard/index.js.map +1 -0
- package/dist/export/index.cjs +32 -0
- package/dist/export/index.cjs.map +1 -0
- package/dist/export/index.d.cts +197 -0
- package/dist/export/index.d.ts +197 -0
- package/dist/export/index.js +3 -0
- package/dist/export/index.js.map +1 -0
- package/dist/index-C-Qcuu4Y.d.cts +821 -0
- package/dist/index-rPc7ijt8.d.ts +821 -0
- package/dist/index.cjs +1486 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1435 -0
- package/dist/index.d.ts +1435 -0
- package/dist/index.js +926 -0
- package/dist/index.js.map +1 -0
- package/dist/ssr/index.cjs +64 -0
- package/dist/ssr/index.cjs.map +1 -0
- package/dist/ssr/index.d.cts +213 -0
- package/dist/ssr/index.d.ts +213 -0
- package/dist/ssr/index.js +3 -0
- package/dist/ssr/index.js.map +1 -0
- package/dist/types-WrCbOeAV.d.cts +569 -0
- package/dist/types-WrCbOeAV.d.ts +569 -0
- package/dist/utils/index.cjs +64 -0
- package/dist/utils/index.cjs.map +1 -0
- package/dist/utils/index.d.cts +112 -0
- package/dist/utils/index.d.ts +112 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils/index.js.map +1 -0
- package/package.json +110 -0
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
import { W as Widget, D as DashboardLayout, a as WidgetPosition, b as WidgetType, c as WidgetConfig } from '../DashboardDialog-LHmrtNQU.cjs';
|
|
2
|
+
export { J as Dashboard, a6 as DashboardCard, a9 as DashboardCardProps, x as DashboardContext, k as DashboardContextValue, j as DashboardDefinition, a7 as DashboardDialog, aa as DashboardDialogProps, a0 as DashboardEditor, l as DashboardEditorContextValue, o as DashboardEditorProps, g as DashboardFilter, f as DashboardFilterType, K as DashboardLayoutComponent, p as DashboardLayoutProps, a5 as DashboardList, a8 as DashboardListProps, n as DashboardProps, w as DashboardProvider, m as DashboardProviderProps, Y as DateRangeFilter, t as DateRangeFilterProps, i as DateRangeValue, a1 as EditorToolbar, a4 as EditorToolbarProps, X as FilterBar, s as FilterBarProps, F as FilterOption, h as FilterValue, L as LazyLoadingConfig, _ as MultiSelectFilter, M as MultiSelectFilterProps, N as NumberRangeValue, R as ReferenceLine, Z as SelectFilter, S as SelectFilterProps, $ as TextFilter, T as TextFilterProps, E as UseAutoRefreshOptions, G as UseAutoRefreshResult, U as UseDashboardFiltersResult, I as UseFullscreenResult, B as UseWidgetResult, O as Widget, Q as WidgetContent, V as WidgetContentProps, d as WidgetCrossFilterConfig, a3 as WidgetEditor, v as WidgetEditorProps, P as WidgetHeader, r as WidgetHeaderProps, e as WidgetHyperlink, a2 as WidgetPalette, u as WidgetPaletteProps, q as WidgetProps, C as useAutoRefresh, y as useDashboard, z as useDashboardFilters, H as useFullscreen, A as useWidget } from '../DashboardDialog-LHmrtNQU.cjs';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { D as DatabaseSchema, a as QueryDefinition, Q as QueryResult } from '../types-WrCbOeAV.cjs';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Hook for tracking widget visibility using Intersection Observer.
|
|
8
|
+
*
|
|
9
|
+
* Used for scroll-based lazy loading of dashboard widgets.
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* Options for the useWidgetVisibility hook.
|
|
13
|
+
*/
|
|
14
|
+
interface UseWidgetVisibilityOptions {
|
|
15
|
+
/** Root margin for prefetching (default: "200px"). */
|
|
16
|
+
rootMargin?: string;
|
|
17
|
+
/** Intersection threshold (default: 0.1 - 10% visible triggers). */
|
|
18
|
+
threshold?: number;
|
|
19
|
+
/** Callback when visibility changes. */
|
|
20
|
+
onVisibilityChange?: (isVisible: boolean) => void;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Result of the useWidgetVisibility hook.
|
|
24
|
+
*/
|
|
25
|
+
interface UseWidgetVisibilityResult {
|
|
26
|
+
/** Ref to attach to the widget container element. */
|
|
27
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
28
|
+
/** Whether the widget is currently visible or approaching viewport. */
|
|
29
|
+
isVisible: boolean;
|
|
30
|
+
/** Whether the widget has ever been visible (stays true once set). */
|
|
31
|
+
hasBeenVisible: boolean;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Hook that uses Intersection Observer to track element visibility.
|
|
35
|
+
*
|
|
36
|
+
* Features:
|
|
37
|
+
* - Detects when element enters/exits viewport with configurable margin
|
|
38
|
+
* - Tracks "hasBeenVisible" state that stays true once element is seen
|
|
39
|
+
* - Supports prefetching via rootMargin (loads before element is visible)
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* function LazyWidget({ widget }) {
|
|
44
|
+
* const { ref, isVisible, hasBeenVisible } = useWidgetVisibility({
|
|
45
|
+
* rootMargin: '200px', // Start loading 200px before visible
|
|
46
|
+
* });
|
|
47
|
+
*
|
|
48
|
+
* return (
|
|
49
|
+
* <div ref={ref}>
|
|
50
|
+
* {hasBeenVisible ? <ActualContent /> : <Placeholder />}
|
|
51
|
+
* </div>
|
|
52
|
+
* );
|
|
53
|
+
* }
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
declare function useWidgetVisibility(options?: UseWidgetVisibilityOptions): UseWidgetVisibilityResult;
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* EditableDashboardLayout component.
|
|
60
|
+
*
|
|
61
|
+
* Wraps DashboardLayout with auto-save functionality for layout changes.
|
|
62
|
+
*/
|
|
63
|
+
|
|
64
|
+
interface EditableDashboardLayoutProps {
|
|
65
|
+
/** Dashboard ID for saving. */
|
|
66
|
+
dashboardId: string;
|
|
67
|
+
/** Widgets to render. */
|
|
68
|
+
widgets: Widget[];
|
|
69
|
+
/** Layout configuration. */
|
|
70
|
+
layout: DashboardLayout;
|
|
71
|
+
/** Render function for each widget. */
|
|
72
|
+
renderWidget: (widget: Widget) => ReactNode;
|
|
73
|
+
/** Debounce delay for saves. */
|
|
74
|
+
debounceMs?: number;
|
|
75
|
+
/** Duration to show saved indicator. */
|
|
76
|
+
savedDurationMs?: number;
|
|
77
|
+
/** Callback on successful save. */
|
|
78
|
+
onSave?: () => void;
|
|
79
|
+
/** Callback on save error. */
|
|
80
|
+
onError?: (error: Error) => void;
|
|
81
|
+
/** Callback when layout changes (for optimistic updates). */
|
|
82
|
+
onLayoutChange?: (positions: Record<string, WidgetPosition>) => void;
|
|
83
|
+
/** Additional CSS class. */
|
|
84
|
+
className?: string;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Editable dashboard layout with auto-save.
|
|
88
|
+
*
|
|
89
|
+
* Wraps DashboardLayout and automatically saves position changes
|
|
90
|
+
* with debouncing and visual feedback.
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```tsx
|
|
94
|
+
* function EditableDashboard({ id, widgets, layout }: Props) {
|
|
95
|
+
* const renderWidget = useCallback((widget: Widget) => (
|
|
96
|
+
* <WidgetContainer widget={widget} editable />
|
|
97
|
+
* ), []);
|
|
98
|
+
*
|
|
99
|
+
* return (
|
|
100
|
+
* <EditableDashboardLayout
|
|
101
|
+
* dashboardId={id}
|
|
102
|
+
* widgets={widgets}
|
|
103
|
+
* layout={layout}
|
|
104
|
+
* renderWidget={renderWidget}
|
|
105
|
+
* debounceMs={500}
|
|
106
|
+
* />
|
|
107
|
+
* );
|
|
108
|
+
* }
|
|
109
|
+
* ```
|
|
110
|
+
*/
|
|
111
|
+
declare function EditableDashboardLayout({ dashboardId, widgets, layout, renderWidget, debounceMs, savedDurationMs, onSave, onError, onLayoutChange, className, }: EditableDashboardLayoutProps): JSX.Element;
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* WidgetContainer component.
|
|
115
|
+
*
|
|
116
|
+
* Wraps a widget with drag handle and edit controls for editable mode.
|
|
117
|
+
*/
|
|
118
|
+
|
|
119
|
+
interface WidgetContainerProps {
|
|
120
|
+
/** Widget data. */
|
|
121
|
+
widget: Widget;
|
|
122
|
+
/** Dashboard ID. */
|
|
123
|
+
dashboardId: string;
|
|
124
|
+
/** Whether the widget is editable. */
|
|
125
|
+
editable?: boolean;
|
|
126
|
+
/** Callback when edit is clicked. */
|
|
127
|
+
onEdit?: (widget: Widget) => void;
|
|
128
|
+
/** Callback when delete is clicked. */
|
|
129
|
+
onDelete?: (widgetId: string) => void;
|
|
130
|
+
/** Callback when duplicate is clicked. */
|
|
131
|
+
onDuplicate?: (widgetId: string) => void;
|
|
132
|
+
/** Widget content to render. */
|
|
133
|
+
children: ReactNode;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Container for widgets with edit controls.
|
|
137
|
+
*
|
|
138
|
+
* Shows drag handle and action buttons on hover in editable mode.
|
|
139
|
+
*
|
|
140
|
+
* @example
|
|
141
|
+
* ```tsx
|
|
142
|
+
* <WidgetContainer
|
|
143
|
+
* widget={widget}
|
|
144
|
+
* dashboardId={dashboardId}
|
|
145
|
+
* editable={true}
|
|
146
|
+
* onEdit={(w) => openEditor(w)}
|
|
147
|
+
* onDelete={(id) => deleteWidget(id)}
|
|
148
|
+
* >
|
|
149
|
+
* <WidgetContent widget={widget} result={result} />
|
|
150
|
+
* </WidgetContainer>
|
|
151
|
+
* ```
|
|
152
|
+
*/
|
|
153
|
+
declare function WidgetContainer({ widget, dashboardId: _dashboardId, editable, onEdit, onDelete, onDuplicate, children, }: WidgetContainerProps): JSX.Element;
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Lazy-loading wrapper for dashboard widgets.
|
|
157
|
+
*
|
|
158
|
+
* Uses Intersection Observer to detect when widgets enter the viewport,
|
|
159
|
+
* then triggers data loading through the DashboardProvider.
|
|
160
|
+
*/
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Props for LazyWidget.
|
|
164
|
+
*/
|
|
165
|
+
interface LazyWidgetProps {
|
|
166
|
+
/** Widget to render. */
|
|
167
|
+
widget: Widget;
|
|
168
|
+
/** Render function for the actual widget content. */
|
|
169
|
+
renderWidget: (widget: Widget) => ReactNode;
|
|
170
|
+
/** Root margin for prefetching (default: "200px"). */
|
|
171
|
+
rootMargin?: string;
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Lazy-loading wrapper component for widgets.
|
|
175
|
+
*
|
|
176
|
+
* Features:
|
|
177
|
+
* - Tracks visibility using Intersection Observer
|
|
178
|
+
* - Reports visibility to DashboardProvider for data loading
|
|
179
|
+
* - Shows placeholder until widget becomes visible
|
|
180
|
+
* - Keeps widget rendered once it has been visible (no re-loading on scroll)
|
|
181
|
+
*
|
|
182
|
+
* @example
|
|
183
|
+
* ```tsx
|
|
184
|
+
* <LazyWidget
|
|
185
|
+
* widget={widget}
|
|
186
|
+
* rootMargin="200px"
|
|
187
|
+
* renderWidget={(w) => (
|
|
188
|
+
* <Widget widget={w} result={results[w.id]} isLoading={loading[w.id]} />
|
|
189
|
+
* )}
|
|
190
|
+
* />
|
|
191
|
+
* ```
|
|
192
|
+
*/
|
|
193
|
+
declare function LazyWidget({ widget, renderWidget, rootMargin, }: Readonly<LazyWidgetProps>): JSX.Element;
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* Placeholder component shown for widgets before they become visible.
|
|
197
|
+
*
|
|
198
|
+
* Displays a lightweight skeleton matching the widget's visual structure.
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* Props for WidgetPlaceholder.
|
|
203
|
+
*/
|
|
204
|
+
interface WidgetPlaceholderProps {
|
|
205
|
+
/** Widget to show placeholder for. */
|
|
206
|
+
widget: Widget;
|
|
207
|
+
}
|
|
208
|
+
/**
|
|
209
|
+
* Skeleton placeholder for widgets not yet visible.
|
|
210
|
+
*
|
|
211
|
+
* Shows widget title and a loading skeleton to indicate content will load
|
|
212
|
+
* when the user scrolls to this position.
|
|
213
|
+
*/
|
|
214
|
+
declare function WidgetPlaceholder({ widget }: Readonly<WidgetPlaceholderProps>): JSX.Element;
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Full-page widget editor for creating and editing widgets.
|
|
218
|
+
*
|
|
219
|
+
* Replaces the modal-based widget editor with a comprehensive full-page layout
|
|
220
|
+
* that provides:
|
|
221
|
+
* - Widget type selection (changeable after creation)
|
|
222
|
+
* - Configuration options based on widget type
|
|
223
|
+
* - Data source: saved query or inline query builder
|
|
224
|
+
* - Live preview with actual data
|
|
225
|
+
*/
|
|
226
|
+
|
|
227
|
+
interface WidgetEditorPageProps {
|
|
228
|
+
/** Widget being edited, or null for new widget. */
|
|
229
|
+
widget: Widget | null;
|
|
230
|
+
/** Database schema for query building. */
|
|
231
|
+
schema: DatabaseSchema | null;
|
|
232
|
+
/** Callback when save is clicked. */
|
|
233
|
+
onSave: (widget: Widget) => void;
|
|
234
|
+
/** Callback when cancel is clicked. */
|
|
235
|
+
onCancel: () => void;
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Full-page widget editor.
|
|
239
|
+
*
|
|
240
|
+
* @example
|
|
241
|
+
* ```tsx
|
|
242
|
+
* <WidgetEditorPage
|
|
243
|
+
* widget={existingWidget}
|
|
244
|
+
* schema={schema}
|
|
245
|
+
* onSave={(widget) => updateDashboard(widget)}
|
|
246
|
+
* onCancel={() => setEditingWidget(null)}
|
|
247
|
+
* />
|
|
248
|
+
* ```
|
|
249
|
+
*/
|
|
250
|
+
declare function WidgetEditorPage({ widget, schema, onSave, onCancel, }: WidgetEditorPageProps): JSX.Element;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Widget type selector for the full-page widget editor.
|
|
254
|
+
*
|
|
255
|
+
* Displays available widget types as visual cards that can be selected.
|
|
256
|
+
*/
|
|
257
|
+
|
|
258
|
+
interface WidgetTypeSelectorProps {
|
|
259
|
+
/** Currently selected widget type. */
|
|
260
|
+
value: WidgetType;
|
|
261
|
+
/** Callback when widget type changes. */
|
|
262
|
+
onChange: (type: WidgetType) => void;
|
|
263
|
+
/** Additional CSS class. */
|
|
264
|
+
className?: string;
|
|
265
|
+
}
|
|
266
|
+
/**
|
|
267
|
+
* Widget type selector displaying available types as cards.
|
|
268
|
+
*/
|
|
269
|
+
declare function WidgetTypeSelector({ value, onChange, className, }: WidgetTypeSelectorProps): JSX.Element;
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* Widget preview component for the full-page widget editor.
|
|
273
|
+
*
|
|
274
|
+
* Renders a live preview of the widget being edited.
|
|
275
|
+
*/
|
|
276
|
+
|
|
277
|
+
interface WidgetPreviewProps {
|
|
278
|
+
/** Widget type. */
|
|
279
|
+
type: WidgetType;
|
|
280
|
+
/** Widget title. */
|
|
281
|
+
title: string;
|
|
282
|
+
/** Widget configuration. */
|
|
283
|
+
config: WidgetConfig;
|
|
284
|
+
/** Query definition (null for text widgets). */
|
|
285
|
+
query: QueryDefinition | null;
|
|
286
|
+
/** Query result data. */
|
|
287
|
+
result: QueryResult | null;
|
|
288
|
+
/** Whether data is loading. */
|
|
289
|
+
isLoading?: boolean;
|
|
290
|
+
/** Error if query failed. */
|
|
291
|
+
error?: Error | null;
|
|
292
|
+
/** Additional CSS class. */
|
|
293
|
+
className?: string;
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* Live preview of the widget being edited.
|
|
297
|
+
*
|
|
298
|
+
* Shows the actual rendered widget with current configuration and data.
|
|
299
|
+
*/
|
|
300
|
+
declare function WidgetPreview({ type, title, config, query, result, isLoading, error, className, }: WidgetPreviewProps): JSX.Element;
|
|
301
|
+
|
|
302
|
+
export { DashboardLayout, EditableDashboardLayout, type EditableDashboardLayoutProps, LazyWidget, type LazyWidgetProps, type UseWidgetVisibilityOptions, type UseWidgetVisibilityResult, WidgetConfig, WidgetContainer, type WidgetContainerProps, Widget as WidgetDefinition, WidgetEditorPage, type WidgetEditorPageProps, WidgetPlaceholder, type WidgetPlaceholderProps, WidgetPosition, WidgetPreview, type WidgetPreviewProps, WidgetType, WidgetTypeSelector, type WidgetTypeSelectorProps, useWidgetVisibility };
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
import { W as Widget, D as DashboardLayout, a as WidgetPosition, b as WidgetType, c as WidgetConfig } from '../DashboardDialog-B3vYC5Gs.js';
|
|
2
|
+
export { J as Dashboard, a6 as DashboardCard, a9 as DashboardCardProps, x as DashboardContext, k as DashboardContextValue, j as DashboardDefinition, a7 as DashboardDialog, aa as DashboardDialogProps, a0 as DashboardEditor, l as DashboardEditorContextValue, o as DashboardEditorProps, g as DashboardFilter, f as DashboardFilterType, K as DashboardLayoutComponent, p as DashboardLayoutProps, a5 as DashboardList, a8 as DashboardListProps, n as DashboardProps, w as DashboardProvider, m as DashboardProviderProps, Y as DateRangeFilter, t as DateRangeFilterProps, i as DateRangeValue, a1 as EditorToolbar, a4 as EditorToolbarProps, X as FilterBar, s as FilterBarProps, F as FilterOption, h as FilterValue, L as LazyLoadingConfig, _ as MultiSelectFilter, M as MultiSelectFilterProps, N as NumberRangeValue, R as ReferenceLine, Z as SelectFilter, S as SelectFilterProps, $ as TextFilter, T as TextFilterProps, E as UseAutoRefreshOptions, G as UseAutoRefreshResult, U as UseDashboardFiltersResult, I as UseFullscreenResult, B as UseWidgetResult, O as Widget, Q as WidgetContent, V as WidgetContentProps, d as WidgetCrossFilterConfig, a3 as WidgetEditor, v as WidgetEditorProps, P as WidgetHeader, r as WidgetHeaderProps, e as WidgetHyperlink, a2 as WidgetPalette, u as WidgetPaletteProps, q as WidgetProps, C as useAutoRefresh, y as useDashboard, z as useDashboardFilters, H as useFullscreen, A as useWidget } from '../DashboardDialog-B3vYC5Gs.js';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { D as DatabaseSchema, a as QueryDefinition, Q as QueryResult } from '../types-WrCbOeAV.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Hook for tracking widget visibility using Intersection Observer.
|
|
8
|
+
*
|
|
9
|
+
* Used for scroll-based lazy loading of dashboard widgets.
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* Options for the useWidgetVisibility hook.
|
|
13
|
+
*/
|
|
14
|
+
interface UseWidgetVisibilityOptions {
|
|
15
|
+
/** Root margin for prefetching (default: "200px"). */
|
|
16
|
+
rootMargin?: string;
|
|
17
|
+
/** Intersection threshold (default: 0.1 - 10% visible triggers). */
|
|
18
|
+
threshold?: number;
|
|
19
|
+
/** Callback when visibility changes. */
|
|
20
|
+
onVisibilityChange?: (isVisible: boolean) => void;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Result of the useWidgetVisibility hook.
|
|
24
|
+
*/
|
|
25
|
+
interface UseWidgetVisibilityResult {
|
|
26
|
+
/** Ref to attach to the widget container element. */
|
|
27
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
28
|
+
/** Whether the widget is currently visible or approaching viewport. */
|
|
29
|
+
isVisible: boolean;
|
|
30
|
+
/** Whether the widget has ever been visible (stays true once set). */
|
|
31
|
+
hasBeenVisible: boolean;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Hook that uses Intersection Observer to track element visibility.
|
|
35
|
+
*
|
|
36
|
+
* Features:
|
|
37
|
+
* - Detects when element enters/exits viewport with configurable margin
|
|
38
|
+
* - Tracks "hasBeenVisible" state that stays true once element is seen
|
|
39
|
+
* - Supports prefetching via rootMargin (loads before element is visible)
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* function LazyWidget({ widget }) {
|
|
44
|
+
* const { ref, isVisible, hasBeenVisible } = useWidgetVisibility({
|
|
45
|
+
* rootMargin: '200px', // Start loading 200px before visible
|
|
46
|
+
* });
|
|
47
|
+
*
|
|
48
|
+
* return (
|
|
49
|
+
* <div ref={ref}>
|
|
50
|
+
* {hasBeenVisible ? <ActualContent /> : <Placeholder />}
|
|
51
|
+
* </div>
|
|
52
|
+
* );
|
|
53
|
+
* }
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
declare function useWidgetVisibility(options?: UseWidgetVisibilityOptions): UseWidgetVisibilityResult;
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* EditableDashboardLayout component.
|
|
60
|
+
*
|
|
61
|
+
* Wraps DashboardLayout with auto-save functionality for layout changes.
|
|
62
|
+
*/
|
|
63
|
+
|
|
64
|
+
interface EditableDashboardLayoutProps {
|
|
65
|
+
/** Dashboard ID for saving. */
|
|
66
|
+
dashboardId: string;
|
|
67
|
+
/** Widgets to render. */
|
|
68
|
+
widgets: Widget[];
|
|
69
|
+
/** Layout configuration. */
|
|
70
|
+
layout: DashboardLayout;
|
|
71
|
+
/** Render function for each widget. */
|
|
72
|
+
renderWidget: (widget: Widget) => ReactNode;
|
|
73
|
+
/** Debounce delay for saves. */
|
|
74
|
+
debounceMs?: number;
|
|
75
|
+
/** Duration to show saved indicator. */
|
|
76
|
+
savedDurationMs?: number;
|
|
77
|
+
/** Callback on successful save. */
|
|
78
|
+
onSave?: () => void;
|
|
79
|
+
/** Callback on save error. */
|
|
80
|
+
onError?: (error: Error) => void;
|
|
81
|
+
/** Callback when layout changes (for optimistic updates). */
|
|
82
|
+
onLayoutChange?: (positions: Record<string, WidgetPosition>) => void;
|
|
83
|
+
/** Additional CSS class. */
|
|
84
|
+
className?: string;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Editable dashboard layout with auto-save.
|
|
88
|
+
*
|
|
89
|
+
* Wraps DashboardLayout and automatically saves position changes
|
|
90
|
+
* with debouncing and visual feedback.
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```tsx
|
|
94
|
+
* function EditableDashboard({ id, widgets, layout }: Props) {
|
|
95
|
+
* const renderWidget = useCallback((widget: Widget) => (
|
|
96
|
+
* <WidgetContainer widget={widget} editable />
|
|
97
|
+
* ), []);
|
|
98
|
+
*
|
|
99
|
+
* return (
|
|
100
|
+
* <EditableDashboardLayout
|
|
101
|
+
* dashboardId={id}
|
|
102
|
+
* widgets={widgets}
|
|
103
|
+
* layout={layout}
|
|
104
|
+
* renderWidget={renderWidget}
|
|
105
|
+
* debounceMs={500}
|
|
106
|
+
* />
|
|
107
|
+
* );
|
|
108
|
+
* }
|
|
109
|
+
* ```
|
|
110
|
+
*/
|
|
111
|
+
declare function EditableDashboardLayout({ dashboardId, widgets, layout, renderWidget, debounceMs, savedDurationMs, onSave, onError, onLayoutChange, className, }: EditableDashboardLayoutProps): JSX.Element;
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* WidgetContainer component.
|
|
115
|
+
*
|
|
116
|
+
* Wraps a widget with drag handle and edit controls for editable mode.
|
|
117
|
+
*/
|
|
118
|
+
|
|
119
|
+
interface WidgetContainerProps {
|
|
120
|
+
/** Widget data. */
|
|
121
|
+
widget: Widget;
|
|
122
|
+
/** Dashboard ID. */
|
|
123
|
+
dashboardId: string;
|
|
124
|
+
/** Whether the widget is editable. */
|
|
125
|
+
editable?: boolean;
|
|
126
|
+
/** Callback when edit is clicked. */
|
|
127
|
+
onEdit?: (widget: Widget) => void;
|
|
128
|
+
/** Callback when delete is clicked. */
|
|
129
|
+
onDelete?: (widgetId: string) => void;
|
|
130
|
+
/** Callback when duplicate is clicked. */
|
|
131
|
+
onDuplicate?: (widgetId: string) => void;
|
|
132
|
+
/** Widget content to render. */
|
|
133
|
+
children: ReactNode;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Container for widgets with edit controls.
|
|
137
|
+
*
|
|
138
|
+
* Shows drag handle and action buttons on hover in editable mode.
|
|
139
|
+
*
|
|
140
|
+
* @example
|
|
141
|
+
* ```tsx
|
|
142
|
+
* <WidgetContainer
|
|
143
|
+
* widget={widget}
|
|
144
|
+
* dashboardId={dashboardId}
|
|
145
|
+
* editable={true}
|
|
146
|
+
* onEdit={(w) => openEditor(w)}
|
|
147
|
+
* onDelete={(id) => deleteWidget(id)}
|
|
148
|
+
* >
|
|
149
|
+
* <WidgetContent widget={widget} result={result} />
|
|
150
|
+
* </WidgetContainer>
|
|
151
|
+
* ```
|
|
152
|
+
*/
|
|
153
|
+
declare function WidgetContainer({ widget, dashboardId: _dashboardId, editable, onEdit, onDelete, onDuplicate, children, }: WidgetContainerProps): JSX.Element;
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Lazy-loading wrapper for dashboard widgets.
|
|
157
|
+
*
|
|
158
|
+
* Uses Intersection Observer to detect when widgets enter the viewport,
|
|
159
|
+
* then triggers data loading through the DashboardProvider.
|
|
160
|
+
*/
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Props for LazyWidget.
|
|
164
|
+
*/
|
|
165
|
+
interface LazyWidgetProps {
|
|
166
|
+
/** Widget to render. */
|
|
167
|
+
widget: Widget;
|
|
168
|
+
/** Render function for the actual widget content. */
|
|
169
|
+
renderWidget: (widget: Widget) => ReactNode;
|
|
170
|
+
/** Root margin for prefetching (default: "200px"). */
|
|
171
|
+
rootMargin?: string;
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Lazy-loading wrapper component for widgets.
|
|
175
|
+
*
|
|
176
|
+
* Features:
|
|
177
|
+
* - Tracks visibility using Intersection Observer
|
|
178
|
+
* - Reports visibility to DashboardProvider for data loading
|
|
179
|
+
* - Shows placeholder until widget becomes visible
|
|
180
|
+
* - Keeps widget rendered once it has been visible (no re-loading on scroll)
|
|
181
|
+
*
|
|
182
|
+
* @example
|
|
183
|
+
* ```tsx
|
|
184
|
+
* <LazyWidget
|
|
185
|
+
* widget={widget}
|
|
186
|
+
* rootMargin="200px"
|
|
187
|
+
* renderWidget={(w) => (
|
|
188
|
+
* <Widget widget={w} result={results[w.id]} isLoading={loading[w.id]} />
|
|
189
|
+
* )}
|
|
190
|
+
* />
|
|
191
|
+
* ```
|
|
192
|
+
*/
|
|
193
|
+
declare function LazyWidget({ widget, renderWidget, rootMargin, }: Readonly<LazyWidgetProps>): JSX.Element;
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* Placeholder component shown for widgets before they become visible.
|
|
197
|
+
*
|
|
198
|
+
* Displays a lightweight skeleton matching the widget's visual structure.
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* Props for WidgetPlaceholder.
|
|
203
|
+
*/
|
|
204
|
+
interface WidgetPlaceholderProps {
|
|
205
|
+
/** Widget to show placeholder for. */
|
|
206
|
+
widget: Widget;
|
|
207
|
+
}
|
|
208
|
+
/**
|
|
209
|
+
* Skeleton placeholder for widgets not yet visible.
|
|
210
|
+
*
|
|
211
|
+
* Shows widget title and a loading skeleton to indicate content will load
|
|
212
|
+
* when the user scrolls to this position.
|
|
213
|
+
*/
|
|
214
|
+
declare function WidgetPlaceholder({ widget }: Readonly<WidgetPlaceholderProps>): JSX.Element;
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Full-page widget editor for creating and editing widgets.
|
|
218
|
+
*
|
|
219
|
+
* Replaces the modal-based widget editor with a comprehensive full-page layout
|
|
220
|
+
* that provides:
|
|
221
|
+
* - Widget type selection (changeable after creation)
|
|
222
|
+
* - Configuration options based on widget type
|
|
223
|
+
* - Data source: saved query or inline query builder
|
|
224
|
+
* - Live preview with actual data
|
|
225
|
+
*/
|
|
226
|
+
|
|
227
|
+
interface WidgetEditorPageProps {
|
|
228
|
+
/** Widget being edited, or null for new widget. */
|
|
229
|
+
widget: Widget | null;
|
|
230
|
+
/** Database schema for query building. */
|
|
231
|
+
schema: DatabaseSchema | null;
|
|
232
|
+
/** Callback when save is clicked. */
|
|
233
|
+
onSave: (widget: Widget) => void;
|
|
234
|
+
/** Callback when cancel is clicked. */
|
|
235
|
+
onCancel: () => void;
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Full-page widget editor.
|
|
239
|
+
*
|
|
240
|
+
* @example
|
|
241
|
+
* ```tsx
|
|
242
|
+
* <WidgetEditorPage
|
|
243
|
+
* widget={existingWidget}
|
|
244
|
+
* schema={schema}
|
|
245
|
+
* onSave={(widget) => updateDashboard(widget)}
|
|
246
|
+
* onCancel={() => setEditingWidget(null)}
|
|
247
|
+
* />
|
|
248
|
+
* ```
|
|
249
|
+
*/
|
|
250
|
+
declare function WidgetEditorPage({ widget, schema, onSave, onCancel, }: WidgetEditorPageProps): JSX.Element;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Widget type selector for the full-page widget editor.
|
|
254
|
+
*
|
|
255
|
+
* Displays available widget types as visual cards that can be selected.
|
|
256
|
+
*/
|
|
257
|
+
|
|
258
|
+
interface WidgetTypeSelectorProps {
|
|
259
|
+
/** Currently selected widget type. */
|
|
260
|
+
value: WidgetType;
|
|
261
|
+
/** Callback when widget type changes. */
|
|
262
|
+
onChange: (type: WidgetType) => void;
|
|
263
|
+
/** Additional CSS class. */
|
|
264
|
+
className?: string;
|
|
265
|
+
}
|
|
266
|
+
/**
|
|
267
|
+
* Widget type selector displaying available types as cards.
|
|
268
|
+
*/
|
|
269
|
+
declare function WidgetTypeSelector({ value, onChange, className, }: WidgetTypeSelectorProps): JSX.Element;
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* Widget preview component for the full-page widget editor.
|
|
273
|
+
*
|
|
274
|
+
* Renders a live preview of the widget being edited.
|
|
275
|
+
*/
|
|
276
|
+
|
|
277
|
+
interface WidgetPreviewProps {
|
|
278
|
+
/** Widget type. */
|
|
279
|
+
type: WidgetType;
|
|
280
|
+
/** Widget title. */
|
|
281
|
+
title: string;
|
|
282
|
+
/** Widget configuration. */
|
|
283
|
+
config: WidgetConfig;
|
|
284
|
+
/** Query definition (null for text widgets). */
|
|
285
|
+
query: QueryDefinition | null;
|
|
286
|
+
/** Query result data. */
|
|
287
|
+
result: QueryResult | null;
|
|
288
|
+
/** Whether data is loading. */
|
|
289
|
+
isLoading?: boolean;
|
|
290
|
+
/** Error if query failed. */
|
|
291
|
+
error?: Error | null;
|
|
292
|
+
/** Additional CSS class. */
|
|
293
|
+
className?: string;
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* Live preview of the widget being edited.
|
|
297
|
+
*
|
|
298
|
+
* Shows the actual rendered widget with current configuration and data.
|
|
299
|
+
*/
|
|
300
|
+
declare function WidgetPreview({ type, title, config, query, result, isLoading, error, className, }: WidgetPreviewProps): JSX.Element;
|
|
301
|
+
|
|
302
|
+
export { DashboardLayout, EditableDashboardLayout, type EditableDashboardLayoutProps, LazyWidget, type LazyWidgetProps, type UseWidgetVisibilityOptions, type UseWidgetVisibilityResult, WidgetConfig, WidgetContainer, type WidgetContainerProps, Widget as WidgetDefinition, WidgetEditorPage, type WidgetEditorPageProps, WidgetPlaceholder, type WidgetPlaceholderProps, WidgetPosition, WidgetPreview, type WidgetPreviewProps, WidgetType, WidgetTypeSelector, type WidgetTypeSelectorProps, useWidgetVisibility };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { Dashboard, DashboardCard, DashboardContext, DashboardDialog, DashboardEditor, DashboardLayout as DashboardLayoutComponent, DashboardList, DashboardProvider, DateRangeFilter, EditableDashboardLayout, EditorToolbar, FilterBar, LazyWidget, MultiSelectFilter, SelectFilter, TextFilter, Widget, WidgetContainer, WidgetContent, WidgetEditor, WidgetEditorPage, WidgetHeader, WidgetPalette, WidgetPlaceholder, WidgetPreview, WidgetTypeSelector, useAutoRefresh, useDashboard, useDashboardFilters, useFullscreen, useWidget, useWidgetVisibility } from '../chunk-MOAEEF5P.js';
|
|
2
|
+
import '../chunk-2H5WTH4K.js';
|
|
3
|
+
import '../chunk-UPYINBZU.js';
|
|
4
|
+
import '../chunk-T6STUE7E.js';
|
|
5
|
+
import '../chunk-EX74SI67.js';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkMDXGGZSW_cjs = require('../chunk-MDXGGZSW.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "downloadFile", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () { return chunkMDXGGZSW_cjs.downloadFile; }
|
|
10
|
+
});
|
|
11
|
+
Object.defineProperty(exports, "exportMultipleSheets", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return chunkMDXGGZSW_cjs.exportMultipleSheets; }
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "exportToCSV", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return chunkMDXGGZSW_cjs.exportToCSV; }
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "exportToExcel", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () { return chunkMDXGGZSW_cjs.exportToExcel; }
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "generateCSV", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () { return chunkMDXGGZSW_cjs.generateCSV; }
|
|
26
|
+
});
|
|
27
|
+
Object.defineProperty(exports, "useExport", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () { return chunkMDXGGZSW_cjs.useExport; }
|
|
30
|
+
});
|
|
31
|
+
//# sourceMappingURL=index.cjs.map
|
|
32
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|