@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,821 @@
|
|
|
1
|
+
import { Q as QueryResult, q as ColumnSelection } from './types-WrCbOeAV.cjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Theme type definitions for Prismiq.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Complete theme configuration for Prismiq components.
|
|
8
|
+
*/
|
|
9
|
+
interface PrismiqTheme {
|
|
10
|
+
/** Theme identifier name. */
|
|
11
|
+
name: string;
|
|
12
|
+
/** Color palette. */
|
|
13
|
+
colors: {
|
|
14
|
+
/** Primary brand color. */
|
|
15
|
+
primary: string;
|
|
16
|
+
/** Primary color on hover. */
|
|
17
|
+
primaryHover: string;
|
|
18
|
+
/** Page background color. */
|
|
19
|
+
background: string;
|
|
20
|
+
/** Surface/card background color. */
|
|
21
|
+
surface: string;
|
|
22
|
+
/** Surface color on hover. */
|
|
23
|
+
surfaceHover: string;
|
|
24
|
+
/** Primary text color. */
|
|
25
|
+
text: string;
|
|
26
|
+
/** Secondary/muted text color. */
|
|
27
|
+
textMuted: string;
|
|
28
|
+
/** Text color for use on primary backgrounds. */
|
|
29
|
+
textInverse: string;
|
|
30
|
+
/** Border color. */
|
|
31
|
+
border: string;
|
|
32
|
+
/** Border color when focused. */
|
|
33
|
+
borderFocus: string;
|
|
34
|
+
/** Success state color. */
|
|
35
|
+
success: string;
|
|
36
|
+
/** Warning state color. */
|
|
37
|
+
warning: string;
|
|
38
|
+
/** Error state color. */
|
|
39
|
+
error: string;
|
|
40
|
+
/** Info state color. */
|
|
41
|
+
info: string;
|
|
42
|
+
};
|
|
43
|
+
/** Font families. */
|
|
44
|
+
fonts: {
|
|
45
|
+
/** Sans-serif font stack. */
|
|
46
|
+
sans: string;
|
|
47
|
+
/** Monospace font stack for code. */
|
|
48
|
+
mono: string;
|
|
49
|
+
};
|
|
50
|
+
/** Font sizes. */
|
|
51
|
+
fontSizes: {
|
|
52
|
+
/** Extra small (10px). */
|
|
53
|
+
xs: string;
|
|
54
|
+
/** Small (12px). */
|
|
55
|
+
sm: string;
|
|
56
|
+
/** Base (14px). */
|
|
57
|
+
base: string;
|
|
58
|
+
/** Large (16px). */
|
|
59
|
+
lg: string;
|
|
60
|
+
/** Extra large (18px). */
|
|
61
|
+
xl: string;
|
|
62
|
+
/** 2x extra large (20px). */
|
|
63
|
+
'2xl': string;
|
|
64
|
+
};
|
|
65
|
+
/** Spacing values. */
|
|
66
|
+
spacing: {
|
|
67
|
+
/** Extra small (4px). */
|
|
68
|
+
xs: string;
|
|
69
|
+
/** Small (8px). */
|
|
70
|
+
sm: string;
|
|
71
|
+
/** Medium (12px). */
|
|
72
|
+
md: string;
|
|
73
|
+
/** Large (16px). */
|
|
74
|
+
lg: string;
|
|
75
|
+
/** Extra large (24px). */
|
|
76
|
+
xl: string;
|
|
77
|
+
};
|
|
78
|
+
/** Border radius values. */
|
|
79
|
+
radius: {
|
|
80
|
+
/** No radius (0). */
|
|
81
|
+
none: string;
|
|
82
|
+
/** Small radius (2px). */
|
|
83
|
+
sm: string;
|
|
84
|
+
/** Medium radius (4px). */
|
|
85
|
+
md: string;
|
|
86
|
+
/** Large radius (8px). */
|
|
87
|
+
lg: string;
|
|
88
|
+
/** Full/pill radius (9999px). */
|
|
89
|
+
full: string;
|
|
90
|
+
};
|
|
91
|
+
/** Box shadow values. */
|
|
92
|
+
shadows: {
|
|
93
|
+
/** Small shadow. */
|
|
94
|
+
sm: string;
|
|
95
|
+
/** Medium shadow. */
|
|
96
|
+
md: string;
|
|
97
|
+
/** Large shadow. */
|
|
98
|
+
lg: string;
|
|
99
|
+
};
|
|
100
|
+
/** Chart-specific theme values. */
|
|
101
|
+
chart: {
|
|
102
|
+
/** Color palette for chart series. */
|
|
103
|
+
colors: string[];
|
|
104
|
+
/** Grid line color. */
|
|
105
|
+
gridColor: string;
|
|
106
|
+
/** Axis line and label color. */
|
|
107
|
+
axisColor: string;
|
|
108
|
+
/** Tooltip background color. */
|
|
109
|
+
tooltipBackground: string;
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Theme mode options.
|
|
114
|
+
*/
|
|
115
|
+
type ThemeMode = 'light' | 'dark' | 'system';
|
|
116
|
+
/**
|
|
117
|
+
* Value provided by the ThemeContext.
|
|
118
|
+
*/
|
|
119
|
+
interface ThemeContextValue {
|
|
120
|
+
/** The currently active theme. */
|
|
121
|
+
theme: PrismiqTheme;
|
|
122
|
+
/** The current theme mode setting. */
|
|
123
|
+
mode: ThemeMode;
|
|
124
|
+
/** Function to change the theme mode. */
|
|
125
|
+
setMode: (mode: ThemeMode) => void;
|
|
126
|
+
/** The resolved mode (light or dark) after system detection. */
|
|
127
|
+
resolvedMode: 'light' | 'dark';
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Deep partial type for theme customization.
|
|
131
|
+
*/
|
|
132
|
+
type DeepPartial<T> = {
|
|
133
|
+
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Chart type definitions for Prismiq.
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* A single data point in a chart.
|
|
142
|
+
*/
|
|
143
|
+
interface ChartDataPoint {
|
|
144
|
+
[key: string]: string | number | null;
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* A series of data for a chart.
|
|
148
|
+
*/
|
|
149
|
+
interface ChartSeries {
|
|
150
|
+
/** Series name (used in legend). */
|
|
151
|
+
name: string;
|
|
152
|
+
/** Data values for this series. */
|
|
153
|
+
data: (number | null)[];
|
|
154
|
+
/** Chart type for this series (for mixed charts). */
|
|
155
|
+
type?: 'bar' | 'line' | 'scatter' | 'pie';
|
|
156
|
+
/** Color override for this series. */
|
|
157
|
+
color?: string;
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Cross-filter configuration for charts.
|
|
161
|
+
*/
|
|
162
|
+
interface CrossFilterConfig {
|
|
163
|
+
/** Enable cross-filtering on this chart. */
|
|
164
|
+
enabled: boolean;
|
|
165
|
+
/** Widget ID (required for cross-filtering). */
|
|
166
|
+
widgetId: string;
|
|
167
|
+
/** Column to filter on (defaults to xAxis). */
|
|
168
|
+
column?: string;
|
|
169
|
+
/** Table for the filter (optional). */
|
|
170
|
+
table?: string;
|
|
171
|
+
}
|
|
172
|
+
/**
|
|
173
|
+
* Base props shared by all chart components.
|
|
174
|
+
*/
|
|
175
|
+
interface BaseChartProps {
|
|
176
|
+
/** Chart data - either QueryResult or array of data points. */
|
|
177
|
+
data: QueryResult | ChartDataPoint[];
|
|
178
|
+
/** Whether the chart is loading. */
|
|
179
|
+
loading?: boolean;
|
|
180
|
+
/** Error to display. */
|
|
181
|
+
error?: Error | null;
|
|
182
|
+
/** Chart height. */
|
|
183
|
+
height?: number | string;
|
|
184
|
+
/** Chart width. */
|
|
185
|
+
width?: number | string;
|
|
186
|
+
/** Additional CSS class name. */
|
|
187
|
+
className?: string;
|
|
188
|
+
/** Callback when a data point is clicked. */
|
|
189
|
+
onDataPointClick?: (params: ChartClickParams) => void;
|
|
190
|
+
/** Cross-filter configuration. */
|
|
191
|
+
crossFilter?: CrossFilterConfig;
|
|
192
|
+
/** Currently selected value for cross-filter highlight. */
|
|
193
|
+
selectedValue?: string | number | null;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* Parameters passed to data point click handler.
|
|
197
|
+
*/
|
|
198
|
+
interface ChartClickParams {
|
|
199
|
+
/** Name of the series that was clicked. */
|
|
200
|
+
seriesName: string;
|
|
201
|
+
/** Index of the data point in the series. */
|
|
202
|
+
dataIndex: number;
|
|
203
|
+
/** Value of the clicked data point. */
|
|
204
|
+
value: number | string;
|
|
205
|
+
/** Category/label name of the clicked point. */
|
|
206
|
+
name: string;
|
|
207
|
+
}
|
|
208
|
+
/**
|
|
209
|
+
* Configuration for a reference line on a chart.
|
|
210
|
+
*/
|
|
211
|
+
interface ReferenceLineConfig {
|
|
212
|
+
/** Value where the line should be drawn. */
|
|
213
|
+
value: number;
|
|
214
|
+
/** Label to display on the line. */
|
|
215
|
+
label?: string;
|
|
216
|
+
/** Line color. */
|
|
217
|
+
color?: string;
|
|
218
|
+
/** Line style. */
|
|
219
|
+
lineStyle?: 'solid' | 'dashed' | 'dotted';
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* Axis format types for value formatting.
|
|
223
|
+
*/
|
|
224
|
+
type AxisFormat = 'number' | 'currency' | 'percent' | 'compact';
|
|
225
|
+
/**
|
|
226
|
+
* Legend position options.
|
|
227
|
+
*/
|
|
228
|
+
type LegendPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
229
|
+
/**
|
|
230
|
+
* Props for the base EChart wrapper component.
|
|
231
|
+
*/
|
|
232
|
+
interface EChartWrapperProps {
|
|
233
|
+
/** ECharts option configuration. */
|
|
234
|
+
option: Record<string, unknown>;
|
|
235
|
+
/** Whether the chart is loading. */
|
|
236
|
+
loading?: boolean;
|
|
237
|
+
/** Chart height. */
|
|
238
|
+
height?: number | string;
|
|
239
|
+
/** Chart width. */
|
|
240
|
+
width?: number | string;
|
|
241
|
+
/** Theme mode. */
|
|
242
|
+
theme?: 'light' | 'dark';
|
|
243
|
+
/** Event handlers - use unknown for params to allow any ECharts event. */
|
|
244
|
+
onEvents?: Record<string, (params: unknown) => void>;
|
|
245
|
+
/** Additional CSS class name. */
|
|
246
|
+
className?: string;
|
|
247
|
+
}
|
|
248
|
+
/**
|
|
249
|
+
* Props for BarChart component.
|
|
250
|
+
*/
|
|
251
|
+
interface BarChartProps extends BaseChartProps {
|
|
252
|
+
/** Column name for X axis categories. */
|
|
253
|
+
xAxis: string;
|
|
254
|
+
/** Column name(s) for Y axis values. */
|
|
255
|
+
yAxis: string | string[];
|
|
256
|
+
/** Bar orientation. */
|
|
257
|
+
orientation?: 'vertical' | 'horizontal';
|
|
258
|
+
/** Whether to stack bars. */
|
|
259
|
+
stacked?: boolean;
|
|
260
|
+
/** Whether to show data labels on bars. */
|
|
261
|
+
showDataLabels?: boolean;
|
|
262
|
+
/** Whether to show legend. */
|
|
263
|
+
showLegend?: boolean;
|
|
264
|
+
/** Legend position. */
|
|
265
|
+
legendPosition?: LegendPosition;
|
|
266
|
+
/** Reference lines to draw. */
|
|
267
|
+
referenceLines?: ReferenceLineConfig[];
|
|
268
|
+
/** Custom colors for series. */
|
|
269
|
+
colors?: string[];
|
|
270
|
+
/** X axis label. */
|
|
271
|
+
xAxisLabel?: string;
|
|
272
|
+
/** Y axis label. */
|
|
273
|
+
yAxisLabel?: string;
|
|
274
|
+
/** X axis date format (.NET format string like "MMM-yyyy" for date axes). */
|
|
275
|
+
xAxisFormat?: string;
|
|
276
|
+
/** Y axis value format. */
|
|
277
|
+
yAxisFormat?: AxisFormat;
|
|
278
|
+
/** Currency symbol for currency format. */
|
|
279
|
+
currencySymbol?: string;
|
|
280
|
+
/** Compact notation mode (K, M, B, T) or null for no compacting. */
|
|
281
|
+
compactNotation?: 'K' | 'M' | 'B' | 'T' | null;
|
|
282
|
+
/** Number of decimal digits. */
|
|
283
|
+
decimalDigits?: number;
|
|
284
|
+
}
|
|
285
|
+
/**
|
|
286
|
+
* Props for LineChart component.
|
|
287
|
+
*/
|
|
288
|
+
interface LineChartProps extends BaseChartProps {
|
|
289
|
+
/** Column name for X axis categories. */
|
|
290
|
+
xAxis: string;
|
|
291
|
+
/** Column name(s) for Y axis values. */
|
|
292
|
+
yAxis: string | string[];
|
|
293
|
+
/** Column name that defines series (for multi-series charts with long-format data). */
|
|
294
|
+
seriesColumn?: string;
|
|
295
|
+
/** Maximum number of series to display (top N by total value). Useful for charts with many series. */
|
|
296
|
+
maxSeries?: number;
|
|
297
|
+
/** Whether to use smooth/curved lines. */
|
|
298
|
+
smooth?: boolean;
|
|
299
|
+
/** Whether to show area fill under lines. */
|
|
300
|
+
showArea?: boolean;
|
|
301
|
+
/** Whether to show data point markers. */
|
|
302
|
+
showPoints?: boolean;
|
|
303
|
+
/** Whether to show data labels. */
|
|
304
|
+
showDataLabels?: boolean;
|
|
305
|
+
/** Whether to show legend. */
|
|
306
|
+
showLegend?: boolean;
|
|
307
|
+
/** Reference lines to draw. */
|
|
308
|
+
referenceLines?: ReferenceLineConfig[];
|
|
309
|
+
/** Custom colors for series. */
|
|
310
|
+
colors?: string[];
|
|
311
|
+
/** X axis label. */
|
|
312
|
+
xAxisLabel?: string;
|
|
313
|
+
/** Y axis label. */
|
|
314
|
+
yAxisLabel?: string;
|
|
315
|
+
/** X axis date format (.NET format string like "MMM-yyyy" for date axes). */
|
|
316
|
+
xAxisFormat?: string;
|
|
317
|
+
/** Y axis value format. */
|
|
318
|
+
yAxisFormat?: AxisFormat;
|
|
319
|
+
}
|
|
320
|
+
/**
|
|
321
|
+
* Props for AreaChart component.
|
|
322
|
+
*/
|
|
323
|
+
interface AreaChartProps extends BaseChartProps {
|
|
324
|
+
/** Column name for X axis categories. */
|
|
325
|
+
xAxis: string;
|
|
326
|
+
/** Column name(s) for Y axis values. */
|
|
327
|
+
yAxis: string | string[];
|
|
328
|
+
/** Whether to stack areas. */
|
|
329
|
+
stacked?: boolean;
|
|
330
|
+
/** Stack type - normal sum or 100% stacked. */
|
|
331
|
+
stackType?: 'normal' | 'percent';
|
|
332
|
+
/** Whether to use smooth/curved lines. */
|
|
333
|
+
smooth?: boolean;
|
|
334
|
+
/** Whether to show legend. */
|
|
335
|
+
showLegend?: boolean;
|
|
336
|
+
/** Area opacity (0-1). */
|
|
337
|
+
opacity?: number;
|
|
338
|
+
/** Custom colors for series. */
|
|
339
|
+
colors?: string[];
|
|
340
|
+
/** X axis label. */
|
|
341
|
+
xAxisLabel?: string;
|
|
342
|
+
/** Y axis label. */
|
|
343
|
+
yAxisLabel?: string;
|
|
344
|
+
/** X axis date format (.NET format string like "MMM-yyyy" for date axes). */
|
|
345
|
+
xAxisFormat?: string;
|
|
346
|
+
}
|
|
347
|
+
/**
|
|
348
|
+
* Props for PieChart component.
|
|
349
|
+
*/
|
|
350
|
+
interface PieChartProps extends BaseChartProps {
|
|
351
|
+
/** Column name for slice labels. */
|
|
352
|
+
labelColumn: string;
|
|
353
|
+
/** Column name for slice values. */
|
|
354
|
+
valueColumn: string;
|
|
355
|
+
/** Chart variant. */
|
|
356
|
+
variant?: 'pie' | 'donut';
|
|
357
|
+
/** Inner radius ratio for donut (0-1). */
|
|
358
|
+
donutRatio?: number;
|
|
359
|
+
/** Whether to show labels. */
|
|
360
|
+
showLabels?: boolean;
|
|
361
|
+
/** Label position. */
|
|
362
|
+
labelPosition?: 'inside' | 'outside';
|
|
363
|
+
/** Whether to show percentages in labels. */
|
|
364
|
+
showPercentage?: boolean;
|
|
365
|
+
/** Whether to show legend. */
|
|
366
|
+
showLegend?: boolean;
|
|
367
|
+
/** Custom colors for slices. */
|
|
368
|
+
colors?: string[];
|
|
369
|
+
/** Start angle in degrees. */
|
|
370
|
+
startAngle?: number;
|
|
371
|
+
/** How to sort slices. */
|
|
372
|
+
sortSlices?: 'asc' | 'desc' | 'none';
|
|
373
|
+
/** Label format (.NET format string like "MMM-yyyy" for date labels). */
|
|
374
|
+
labelFormat?: string;
|
|
375
|
+
}
|
|
376
|
+
/**
|
|
377
|
+
* Props for ScatterChart component.
|
|
378
|
+
*/
|
|
379
|
+
interface ScatterChartProps extends BaseChartProps {
|
|
380
|
+
/** Column name for X axis values. */
|
|
381
|
+
xAxis: string;
|
|
382
|
+
/** Column name for Y axis values. */
|
|
383
|
+
yAxis: string;
|
|
384
|
+
/** Column name for bubble size (makes it a bubble chart). */
|
|
385
|
+
sizeColumn?: string;
|
|
386
|
+
/** Column name for color coding points. */
|
|
387
|
+
colorColumn?: string;
|
|
388
|
+
/** Minimum point size. */
|
|
389
|
+
minSize?: number;
|
|
390
|
+
/** Maximum point size. */
|
|
391
|
+
maxSize?: number;
|
|
392
|
+
/** Whether to show labels on points. */
|
|
393
|
+
showLabels?: boolean;
|
|
394
|
+
/** Column to use for point labels. */
|
|
395
|
+
labelColumn?: string;
|
|
396
|
+
/** Whether to show a trendline. */
|
|
397
|
+
showTrendline?: boolean;
|
|
398
|
+
/** X axis label. */
|
|
399
|
+
xAxisLabel?: string;
|
|
400
|
+
/** Y axis label. */
|
|
401
|
+
yAxisLabel?: string;
|
|
402
|
+
}
|
|
403
|
+
/**
|
|
404
|
+
* Trend indicator configuration.
|
|
405
|
+
*/
|
|
406
|
+
interface TrendConfig {
|
|
407
|
+
/** Percent change value. */
|
|
408
|
+
value: number;
|
|
409
|
+
/** Trend direction. */
|
|
410
|
+
direction: 'up' | 'down' | 'flat';
|
|
411
|
+
/** Label for the trend (e.g., "vs last month"). */
|
|
412
|
+
label?: string;
|
|
413
|
+
}
|
|
414
|
+
/**
|
|
415
|
+
* Props for MetricCard component.
|
|
416
|
+
*/
|
|
417
|
+
interface MetricCardProps {
|
|
418
|
+
/** Metric title/label. */
|
|
419
|
+
title: string;
|
|
420
|
+
/** Metric value. */
|
|
421
|
+
value: number | string;
|
|
422
|
+
/** Value format. */
|
|
423
|
+
format?: 'number' | 'currency' | 'percent' | 'compact';
|
|
424
|
+
/** Currency symbol for currency format. */
|
|
425
|
+
currencySymbol?: string;
|
|
426
|
+
/** Number of decimal places. */
|
|
427
|
+
decimals?: number;
|
|
428
|
+
/** Compact notation (K, M, B, T) - works with currency format for values like $24.32M. */
|
|
429
|
+
compactNotation?: 'K' | 'M' | 'B' | 'T' | null;
|
|
430
|
+
/** Trend configuration. */
|
|
431
|
+
trend?: TrendConfig;
|
|
432
|
+
/** Which direction is considered positive (green). */
|
|
433
|
+
trendPositive?: 'up' | 'down';
|
|
434
|
+
/** Data for sparkline chart. */
|
|
435
|
+
sparklineData?: number[];
|
|
436
|
+
/** Sparkline color override. */
|
|
437
|
+
sparklineColor?: string;
|
|
438
|
+
/** Card size variant. */
|
|
439
|
+
size?: 'sm' | 'md' | 'lg';
|
|
440
|
+
/** Whether the card is loading. */
|
|
441
|
+
loading?: boolean;
|
|
442
|
+
/** Whether to center the value (for single-number displays). */
|
|
443
|
+
centered?: boolean;
|
|
444
|
+
/** Additional CSS class name. */
|
|
445
|
+
className?: string;
|
|
446
|
+
/** Click handler. */
|
|
447
|
+
onClick?: () => void;
|
|
448
|
+
}
|
|
449
|
+
/**
|
|
450
|
+
* Options for useChartData hook.
|
|
451
|
+
*/
|
|
452
|
+
interface ChartDataOptions {
|
|
453
|
+
/** Column to use for X axis / categories. */
|
|
454
|
+
xColumn: string;
|
|
455
|
+
/** Column(s) to use for Y axis values. */
|
|
456
|
+
yColumns: string[];
|
|
457
|
+
/** Column to group by for multi-series. */
|
|
458
|
+
groupColumn?: string;
|
|
459
|
+
/** How to sort the data. */
|
|
460
|
+
sortBy?: 'x' | 'y' | 'none';
|
|
461
|
+
/** Sort direction. */
|
|
462
|
+
sortDirection?: 'asc' | 'desc';
|
|
463
|
+
/** Maximum number of data points. */
|
|
464
|
+
limit?: number;
|
|
465
|
+
}
|
|
466
|
+
/**
|
|
467
|
+
* Result from useChartData hook.
|
|
468
|
+
*/
|
|
469
|
+
interface ChartDataResult {
|
|
470
|
+
/** Category labels for X axis. */
|
|
471
|
+
categories: string[];
|
|
472
|
+
/** Series data for charting. */
|
|
473
|
+
series: ChartSeries[];
|
|
474
|
+
/** Whether the data is empty. */
|
|
475
|
+
isEmpty: boolean;
|
|
476
|
+
/** Total number of rows in source data. */
|
|
477
|
+
totalRows: number;
|
|
478
|
+
}
|
|
479
|
+
/**
|
|
480
|
+
* Available chart types.
|
|
481
|
+
*/
|
|
482
|
+
type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'scatter' | 'metric';
|
|
483
|
+
/**
|
|
484
|
+
* A chart type suggestion.
|
|
485
|
+
*/
|
|
486
|
+
interface ChartSuggestion {
|
|
487
|
+
/** Suggested chart type. */
|
|
488
|
+
type: ChartType;
|
|
489
|
+
/** Confidence score (0-1). */
|
|
490
|
+
confidence: number;
|
|
491
|
+
/** Human-readable reason for the suggestion. */
|
|
492
|
+
reason: string;
|
|
493
|
+
/** Suggested configuration for the chart. */
|
|
494
|
+
config: Record<string, unknown>;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
/**
|
|
498
|
+
* Base wrapper component for ECharts integration.
|
|
499
|
+
*/
|
|
500
|
+
|
|
501
|
+
/**
|
|
502
|
+
* Base chart wrapper that handles theme integration, loading states,
|
|
503
|
+
* and event handling for all Prismiq charts.
|
|
504
|
+
*/
|
|
505
|
+
declare function EChartWrapper({ option, loading, height, width, theme: themeOverride, onEvents, className, }: EChartWrapperProps): JSX.Element;
|
|
506
|
+
|
|
507
|
+
/**
|
|
508
|
+
* MetricCard component for displaying KPIs.
|
|
509
|
+
*/
|
|
510
|
+
|
|
511
|
+
/**
|
|
512
|
+
* A card component for displaying key metrics with optional trend and sparkline.
|
|
513
|
+
*
|
|
514
|
+
* @example
|
|
515
|
+
* ```tsx
|
|
516
|
+
* <MetricCard
|
|
517
|
+
* title="Revenue"
|
|
518
|
+
* value={1234567}
|
|
519
|
+
* format="currency"
|
|
520
|
+
* trend={{ value: 12.5, direction: 'up', label: 'vs last month' }}
|
|
521
|
+
* sparklineData={[100, 120, 115, 130, 145, 160]}
|
|
522
|
+
* />
|
|
523
|
+
* ```
|
|
524
|
+
*/
|
|
525
|
+
declare function MetricCard({ title, value, format, currencySymbol, decimals, compactNotation, trend, trendPositive, sparklineData, sparklineColor, size, loading, centered, className, onClick, }: MetricCardProps): JSX.Element;
|
|
526
|
+
|
|
527
|
+
/**
|
|
528
|
+
* Trend indicator component for MetricCard.
|
|
529
|
+
*/
|
|
530
|
+
|
|
531
|
+
interface TrendIndicatorProps {
|
|
532
|
+
/** Trend configuration. */
|
|
533
|
+
trend: TrendConfig;
|
|
534
|
+
/** Which direction is considered positive (green). */
|
|
535
|
+
trendPositive?: 'up' | 'down';
|
|
536
|
+
/** Size variant. */
|
|
537
|
+
size?: 'sm' | 'md' | 'lg';
|
|
538
|
+
}
|
|
539
|
+
/**
|
|
540
|
+
* Displays a trend arrow with percentage change.
|
|
541
|
+
*/
|
|
542
|
+
declare function TrendIndicator({ trend, trendPositive, size, }: TrendIndicatorProps): JSX.Element;
|
|
543
|
+
|
|
544
|
+
/**
|
|
545
|
+
* Sparkline component for MetricCard.
|
|
546
|
+
*/
|
|
547
|
+
interface SparklineProps {
|
|
548
|
+
/** Data points for the sparkline. */
|
|
549
|
+
data: number[];
|
|
550
|
+
/** Line/area color override. */
|
|
551
|
+
color?: string;
|
|
552
|
+
/** Height of the sparkline. */
|
|
553
|
+
height?: number;
|
|
554
|
+
/** Width of the sparkline. */
|
|
555
|
+
width?: number | string;
|
|
556
|
+
}
|
|
557
|
+
/**
|
|
558
|
+
* A minimal line chart for showing trends in a small space.
|
|
559
|
+
*/
|
|
560
|
+
declare function Sparkline({ data, color, height, width, }: SparklineProps): JSX.Element | null;
|
|
561
|
+
|
|
562
|
+
/**
|
|
563
|
+
* BarChart component for Prismiq.
|
|
564
|
+
*/
|
|
565
|
+
|
|
566
|
+
/**
|
|
567
|
+
* A bar chart component with support for vertical/horizontal orientation,
|
|
568
|
+
* stacking, multi-series, and reference lines.
|
|
569
|
+
*
|
|
570
|
+
* @example
|
|
571
|
+
* ```tsx
|
|
572
|
+
* <BarChart
|
|
573
|
+
* data={queryResult}
|
|
574
|
+
* xAxis="month"
|
|
575
|
+
* yAxis={["revenue", "cost"]}
|
|
576
|
+
* orientation="vertical"
|
|
577
|
+
* stacked={false}
|
|
578
|
+
* showDataLabels={true}
|
|
579
|
+
* referenceLines={[{ value: 100000, label: "Target" }]}
|
|
580
|
+
* />
|
|
581
|
+
* ```
|
|
582
|
+
*/
|
|
583
|
+
declare function BarChart({ data, xAxis, yAxis, orientation, stacked, showDataLabels, showLegend, legendPosition, referenceLines, colors, xAxisLabel, yAxisLabel, xAxisFormat, yAxisFormat, currencySymbol, compactNotation, decimalDigits, loading, error, height, width, className, onDataPointClick, crossFilter, selectedValue, }: BarChartProps): JSX.Element;
|
|
584
|
+
|
|
585
|
+
/**
|
|
586
|
+
* LineChart component for Prismiq.
|
|
587
|
+
*/
|
|
588
|
+
|
|
589
|
+
/**
|
|
590
|
+
* A line chart component with support for smooth curves, area fill,
|
|
591
|
+
* multi-series, and reference lines.
|
|
592
|
+
*
|
|
593
|
+
* @example
|
|
594
|
+
* ```tsx
|
|
595
|
+
* <LineChart
|
|
596
|
+
* data={queryResult}
|
|
597
|
+
* xAxis="date"
|
|
598
|
+
* yAxis={["revenue", "cost"]}
|
|
599
|
+
* smooth={true}
|
|
600
|
+
* showArea={true}
|
|
601
|
+
* showPoints={true}
|
|
602
|
+
* />
|
|
603
|
+
* ```
|
|
604
|
+
*/
|
|
605
|
+
declare function LineChart({ data, xAxis, yAxis, seriesColumn, maxSeries, smooth, showArea, showPoints, showDataLabels, showLegend, referenceLines, colors, xAxisLabel, yAxisLabel, xAxisFormat, yAxisFormat, loading, error, height, width, className, onDataPointClick, crossFilter, selectedValue, }: LineChartProps): JSX.Element;
|
|
606
|
+
|
|
607
|
+
/**
|
|
608
|
+
* AreaChart component for Prismiq.
|
|
609
|
+
*/
|
|
610
|
+
|
|
611
|
+
/**
|
|
612
|
+
* An area chart component with support for stacking and 100% stacking.
|
|
613
|
+
*
|
|
614
|
+
* @example
|
|
615
|
+
* ```tsx
|
|
616
|
+
* <AreaChart
|
|
617
|
+
* data={queryResult}
|
|
618
|
+
* xAxis="date"
|
|
619
|
+
* yAxis={["category_a", "category_b", "category_c"]}
|
|
620
|
+
* stacked={true}
|
|
621
|
+
* stackType="percent"
|
|
622
|
+
* smooth={true}
|
|
623
|
+
* />
|
|
624
|
+
* ```
|
|
625
|
+
*/
|
|
626
|
+
declare function AreaChart({ data, xAxis, yAxis, stacked, stackType, smooth, showLegend, opacity, colors, xAxisLabel, yAxisLabel, xAxisFormat, loading, error, height, width, className, onDataPointClick, crossFilter, selectedValue, }: AreaChartProps): JSX.Element;
|
|
627
|
+
|
|
628
|
+
/**
|
|
629
|
+
* PieChart component for Prismiq.
|
|
630
|
+
*/
|
|
631
|
+
|
|
632
|
+
/**
|
|
633
|
+
* A pie/donut chart component.
|
|
634
|
+
*
|
|
635
|
+
* @example
|
|
636
|
+
* ```tsx
|
|
637
|
+
* <PieChart
|
|
638
|
+
* data={queryResult}
|
|
639
|
+
* labelColumn="category"
|
|
640
|
+
* valueColumn="amount"
|
|
641
|
+
* variant="donut"
|
|
642
|
+
* showPercentage={true}
|
|
643
|
+
* showLabels={true}
|
|
644
|
+
* />
|
|
645
|
+
* ```
|
|
646
|
+
*/
|
|
647
|
+
declare function PieChart({ data, labelColumn, valueColumn, variant, donutRatio, showLabels, labelPosition, showPercentage, showLegend, colors, startAngle, sortSlices, loading, error, height, width, className, onDataPointClick, crossFilter, selectedValue, labelFormat, }: PieChartProps): JSX.Element;
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* ScatterChart component for Prismiq.
|
|
651
|
+
*/
|
|
652
|
+
|
|
653
|
+
/**
|
|
654
|
+
* A scatter/bubble chart component.
|
|
655
|
+
*
|
|
656
|
+
* @example
|
|
657
|
+
* ```tsx
|
|
658
|
+
* <ScatterChart
|
|
659
|
+
* data={queryResult}
|
|
660
|
+
* xAxis="revenue"
|
|
661
|
+
* yAxis="profit"
|
|
662
|
+
* sizeColumn="market_cap"
|
|
663
|
+
* colorColumn="sector"
|
|
664
|
+
* showTrendline={true}
|
|
665
|
+
* />
|
|
666
|
+
* ```
|
|
667
|
+
*/
|
|
668
|
+
declare function ScatterChart({ data, xAxis, yAxis, sizeColumn, colorColumn, minSize, maxSize, showLabels, labelColumn, showTrendline, xAxisLabel, yAxisLabel, loading, error, height, width, className, onDataPointClick, }: ScatterChartProps): JSX.Element;
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* Auto-suggest utility for recommending chart types based on data.
|
|
672
|
+
*/
|
|
673
|
+
|
|
674
|
+
/**
|
|
675
|
+
* Suggests the best chart types for a given query result and column selections.
|
|
676
|
+
*
|
|
677
|
+
* Rules:
|
|
678
|
+
* - Single numeric value -> MetricCard
|
|
679
|
+
* - Date + numeric -> Line/Area chart
|
|
680
|
+
* - Category + numeric -> Bar chart
|
|
681
|
+
* - Category + numeric (few categories <= 7) -> Pie chart
|
|
682
|
+
* - Two numerics -> Scatter chart
|
|
683
|
+
* - Multiple numerics, no date -> Grouped bar chart
|
|
684
|
+
*
|
|
685
|
+
* @param result - The query result to analyze
|
|
686
|
+
* @param columns - The selected columns
|
|
687
|
+
* @returns Array of chart suggestions sorted by confidence
|
|
688
|
+
*
|
|
689
|
+
* @example
|
|
690
|
+
* ```tsx
|
|
691
|
+
* const suggestions = suggestChartType(queryResult, [
|
|
692
|
+
* { table_id: 't1', column: 'month', aggregation: 'none' },
|
|
693
|
+
* { table_id: 't1', column: 'revenue', aggregation: 'sum' },
|
|
694
|
+
* ]);
|
|
695
|
+
* // Returns [{ type: 'bar', confidence: 0.9, reason: '...', config: {...} }]
|
|
696
|
+
* ```
|
|
697
|
+
*/
|
|
698
|
+
declare function suggestChartType(result: QueryResult, columns: ColumnSelection[]): ChartSuggestion[];
|
|
699
|
+
|
|
700
|
+
/**
|
|
701
|
+
* Chart utility functions for Prismiq.
|
|
702
|
+
*/
|
|
703
|
+
|
|
704
|
+
/**
|
|
705
|
+
* Converts a QueryResult to chart-ready data format.
|
|
706
|
+
*
|
|
707
|
+
* @param result - The query result to transform
|
|
708
|
+
* @param xColumn - Column name for X axis / categories
|
|
709
|
+
* @param yColumns - Column names for Y axis values (creates multiple series)
|
|
710
|
+
* @returns Object with categories and series arrays
|
|
711
|
+
*/
|
|
712
|
+
declare function queryResultToChartData(result: QueryResult, xColumn: string, yColumns: string[], seriesColumn?: string): {
|
|
713
|
+
categories: string[];
|
|
714
|
+
series: ChartSeries[];
|
|
715
|
+
};
|
|
716
|
+
/**
|
|
717
|
+
* Converts an array of data points to chart-ready format.
|
|
718
|
+
*
|
|
719
|
+
* @param data - Array of data points
|
|
720
|
+
* @param xColumn - Property name for X axis
|
|
721
|
+
* @param yColumns - Property names for Y axis values
|
|
722
|
+
* @param seriesColumn - Optional column that defines series (for long-format data)
|
|
723
|
+
* @returns Object with categories and series arrays
|
|
724
|
+
*/
|
|
725
|
+
declare function dataPointsToChartData(data: ChartDataPoint[], xColumn: string, yColumns: string[], seriesColumn?: string): {
|
|
726
|
+
categories: string[];
|
|
727
|
+
series: ChartSeries[];
|
|
728
|
+
};
|
|
729
|
+
/**
|
|
730
|
+
* Determines if data is a QueryResult.
|
|
731
|
+
*/
|
|
732
|
+
declare function isQueryResult(data: QueryResult | ChartDataPoint[]): data is QueryResult;
|
|
733
|
+
/**
|
|
734
|
+
* Converts chart data (QueryResult or ChartDataPoint[]) to chart-ready format.
|
|
735
|
+
*/
|
|
736
|
+
declare function toChartData(data: QueryResult | ChartDataPoint[], xColumn: string, yColumns: string[], seriesColumn?: string): {
|
|
737
|
+
categories: string[];
|
|
738
|
+
series: ChartSeries[];
|
|
739
|
+
};
|
|
740
|
+
/**
|
|
741
|
+
* Creates an ECharts theme object from a Prismiq theme.
|
|
742
|
+
*
|
|
743
|
+
* @param theme - Prismiq theme
|
|
744
|
+
* @returns ECharts theme configuration object
|
|
745
|
+
*/
|
|
746
|
+
declare function createChartTheme(theme: PrismiqTheme): Record<string, unknown>;
|
|
747
|
+
/**
|
|
748
|
+
* Applies theme styling to an existing ECharts option.
|
|
749
|
+
*
|
|
750
|
+
* @param option - ECharts option object
|
|
751
|
+
* @param theme - Prismiq theme
|
|
752
|
+
* @returns Modified option with theme applied
|
|
753
|
+
*/
|
|
754
|
+
declare function applyThemeToOption(option: Record<string, unknown>, theme: PrismiqTheme): Record<string, unknown>;
|
|
755
|
+
/**
|
|
756
|
+
* Formats a number value for display on an axis.
|
|
757
|
+
*
|
|
758
|
+
* @param value - The number to format
|
|
759
|
+
* @param format - The format type
|
|
760
|
+
* @param options - Additional formatting options
|
|
761
|
+
* @returns Formatted string
|
|
762
|
+
*/
|
|
763
|
+
declare function formatAxisLabel(value: number, format: AxisFormat, options?: {
|
|
764
|
+
currencySymbol?: string;
|
|
765
|
+
decimals?: number;
|
|
766
|
+
compactNotation?: 'K' | 'M' | 'B' | 'T' | null;
|
|
767
|
+
}): string;
|
|
768
|
+
/**
|
|
769
|
+
* Formats a number in compact notation (K, M, B).
|
|
770
|
+
*/
|
|
771
|
+
declare function formatCompact(value: number, decimals?: number): string;
|
|
772
|
+
/**
|
|
773
|
+
* Formats a metric value for display in a MetricCard.
|
|
774
|
+
*
|
|
775
|
+
* @param value - The numeric value to format
|
|
776
|
+
* @param format - Format type: 'number', 'currency', 'percent', or 'compact'
|
|
777
|
+
* @param options - Formatting options
|
|
778
|
+
* @param options.currencySymbol - Currency symbol (default: '$')
|
|
779
|
+
* @param options.decimals - Number of decimal places (default: 0)
|
|
780
|
+
* @param options.compactNotation - Compact notation: 'K', 'M', 'B', or 'T' (applies to currency too)
|
|
781
|
+
*/
|
|
782
|
+
declare function formatMetricValue(value: number | string, format?: 'number' | 'currency' | 'percent' | 'compact', options?: {
|
|
783
|
+
currencySymbol?: string;
|
|
784
|
+
decimals?: number;
|
|
785
|
+
compactNotation?: 'K' | 'M' | 'B' | 'T' | null;
|
|
786
|
+
}): string;
|
|
787
|
+
/**
|
|
788
|
+
* Gets an array of colors from the theme, cycling if needed.
|
|
789
|
+
*
|
|
790
|
+
* @param theme - Prismiq theme
|
|
791
|
+
* @param count - Number of colors needed
|
|
792
|
+
* @returns Array of color strings
|
|
793
|
+
*/
|
|
794
|
+
declare function getChartColors(theme: PrismiqTheme, count: number): string[];
|
|
795
|
+
/**
|
|
796
|
+
* Generates a gradient color specification for ECharts.
|
|
797
|
+
*/
|
|
798
|
+
declare function createGradientColor(color: string, opacity?: number): Record<string, unknown>;
|
|
799
|
+
/**
|
|
800
|
+
* Adjusts the opacity of a hex color.
|
|
801
|
+
*/
|
|
802
|
+
declare function adjustColorOpacity(hexColor: string, opacity: number): string;
|
|
803
|
+
/**
|
|
804
|
+
* Creates ECharts markLine configuration from reference line configs.
|
|
805
|
+
*/
|
|
806
|
+
declare function createMarkLines(lines: {
|
|
807
|
+
value: number;
|
|
808
|
+
label?: string;
|
|
809
|
+
color?: string;
|
|
810
|
+
lineStyle?: 'solid' | 'dashed' | 'dotted';
|
|
811
|
+
}[], theme: PrismiqTheme): Record<string, unknown>;
|
|
812
|
+
/**
|
|
813
|
+
* Checks if chart data is empty.
|
|
814
|
+
*/
|
|
815
|
+
declare function isChartDataEmpty(data: QueryResult | ChartDataPoint[]): boolean;
|
|
816
|
+
/**
|
|
817
|
+
* Creates an ECharts graphic config for empty state.
|
|
818
|
+
*/
|
|
819
|
+
declare function createEmptyStateGraphic(message?: string): Record<string, unknown>;
|
|
820
|
+
|
|
821
|
+
export { AreaChart as A, BarChart as B, type ChartDataOptions as C, type DeepPartial as D, EChartWrapper as E, type AreaChartProps as F, type PieChartProps as G, type ScatterChartProps as H, type TrendConfig as I, type MetricCardProps as J, type TrendIndicatorProps as K, LineChart as L, MetricCard as M, type SparklineProps as N, type ChartType as O, type PrismiqTheme as P, type ChartSuggestion as Q, type ReferenceLineConfig as R, Sparkline as S, type ThemeMode as T, isQueryResult as U, adjustColorOpacity as V, createMarkLines as W, createEmptyStateGraphic as X, type ThemeContextValue as a, type ChartDataResult as b, TrendIndicator as c, PieChart as d, ScatterChart as e, dataPointsToChartData as f, createChartTheme as g, applyThemeToOption as h, formatAxisLabel as i, formatCompact as j, formatMetricValue as k, getChartColors as l, createGradientColor as m, isChartDataEmpty as n, type ChartDataPoint as o, type ChartSeries as p, queryResultToChartData as q, type BaseChartProps as r, suggestChartType as s, toChartData as t, type ChartClickParams as u, type AxisFormat as v, type LegendPosition as w, type EChartWrapperProps as x, type BarChartProps as y, type LineChartProps as z };
|