@nubitio/dashboard 0.5.19

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.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.cjs +537 -0
  3. package/dist/index.d.cts +147 -0
  4. package/dist/index.d.mts +147 -0
  5. package/dist/index.mjs +527 -0
  6. package/dist/style.css +315 -0
  7. package/package.json +58 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,147 @@
1
+ import { BadgeVariant } from "@nubitio/ui";
2
+
3
+ //#region packages/dashboard/dashboard/types.d.ts
4
+ type ValueFormat = 'text' | 'number' | 'currency' | 'percent' | 'date' | 'datetime';
5
+ interface TrendConfig {
6
+ /** Dot-path into dashboard payload, e.g. `stats.revenueTrend`. */
7
+ valuePath?: string;
8
+ /** Static trend value when not using `valuePath`. */
9
+ value?: number;
10
+ /** Suffix label, e.g. "vs last month". */
11
+ label?: string;
12
+ /** When true, negative trend renders as success (e.g. churn, refunds). */
13
+ invertColors?: boolean;
14
+ }
15
+ type StatIconTone = 'accent' | 'success' | 'warning' | 'danger' | 'info';
16
+ interface StatWidgetConfig {
17
+ type: 'stat';
18
+ id: string;
19
+ title: string;
20
+ valuePath?: string;
21
+ value?: string | number;
22
+ format?: ValueFormat;
23
+ icon?: string;
24
+ iconTone?: StatIconTone;
25
+ trend?: TrendConfig;
26
+ menuVisible?: boolean;
27
+ }
28
+ interface BarChartWidgetConfig {
29
+ type: 'bar-chart';
30
+ id: string;
31
+ title: string;
32
+ subtitle?: string;
33
+ dataPath: string;
34
+ xKey: string;
35
+ yKey: string;
36
+ valueFormat?: ValueFormat;
37
+ height?: number;
38
+ menuVisible?: boolean;
39
+ }
40
+ interface DonutChartWidgetConfig {
41
+ type: 'donut-chart';
42
+ id: string;
43
+ title: string;
44
+ subtitle?: string;
45
+ dataPath: string;
46
+ labelKey: string;
47
+ valueKey: string;
48
+ colors?: string[];
49
+ showLegend?: boolean;
50
+ centerLabel?: string;
51
+ centerValuePath?: string;
52
+ valueFormat?: ValueFormat;
53
+ menuVisible?: boolean;
54
+ }
55
+ interface TableColumnConfig {
56
+ key: string;
57
+ label: string;
58
+ format?: ValueFormat;
59
+ align?: 'left' | 'right' | 'center';
60
+ badge?: Record<string, BadgeVariant>;
61
+ badgeLabels?: Record<string, string>;
62
+ }
63
+ interface TableViewAllConfig {
64
+ to: string;
65
+ label?: string;
66
+ }
67
+ interface TableWidgetConfig {
68
+ type: 'table';
69
+ id: string;
70
+ title: string;
71
+ subtitle?: string;
72
+ dataPath: string;
73
+ columns: TableColumnConfig[];
74
+ viewAll?: TableViewAllConfig;
75
+ emptyTitle?: string;
76
+ emptyDescription?: string;
77
+ menuVisible?: boolean;
78
+ }
79
+ type DashboardWidget = StatWidgetConfig | BarChartWidgetConfig | DonutChartWidgetConfig | TableWidgetConfig;
80
+ type DashboardSectionLayout = 'stats' | 'charts' | 'full' | 'grid';
81
+ interface DashboardSection {
82
+ id?: string;
83
+ layout?: DashboardSectionLayout;
84
+ /** For `grid` layout — column count or CSS grid template. */
85
+ columns?: number | string;
86
+ widgets: DashboardWidget[];
87
+ }
88
+ interface DashboardDataResult {
89
+ data: Record<string, unknown>;
90
+ loading?: boolean;
91
+ error?: string | null;
92
+ refetch?: () => void;
93
+ }
94
+ interface DashboardConfig {
95
+ id?: string;
96
+ title: string;
97
+ /** GET endpoint returning the dashboard JSON payload. */
98
+ dataUrl?: string;
99
+ /** Custom data hook — takes precedence over `dataUrl`. */
100
+ useData?: () => DashboardDataResult;
101
+ sections: DashboardSection[];
102
+ refreshInterval?: number;
103
+ }
104
+ //#endregion
105
+ //#region packages/dashboard/dashboard/defineDashboard.d.ts
106
+ /**
107
+ * Declarative dashboard definition — mirrors `defineResource` ergonomics.
108
+ *
109
+ * ```ts
110
+ * const overview = defineDashboard({
111
+ * title: 'Dashboard',
112
+ * dataUrl: '/api/dashboard/overview',
113
+ * sections: [
114
+ * { layout: 'stats', widgets: [statWidget({ id: 'revenue', title: 'Revenue', valuePath: 'stats.revenue', format: 'currency' })] },
115
+ * ],
116
+ * });
117
+ *
118
+ * export const DashboardRoute = () => <DashboardPage config={overview} />;
119
+ * ```
120
+ */
121
+ declare function defineDashboard(config: DashboardConfig): DashboardConfig;
122
+ //#endregion
123
+ //#region packages/dashboard/dashboard/DashboardPage.d.ts
124
+ interface DashboardPageProps {
125
+ config: DashboardConfig;
126
+ }
127
+ declare function DashboardPage({
128
+ config
129
+ }: DashboardPageProps): import("react").JSX.Element;
130
+ //#endregion
131
+ //#region packages/dashboard/dashboard/useDashboardData.d.ts
132
+ declare function useDashboardData(dataUrl?: string, refreshInterval?: number): DashboardDataResult;
133
+ //#endregion
134
+ //#region packages/dashboard/dashboard/widgetBuilders.d.ts
135
+ declare function statWidget(config: Omit<StatWidgetConfig, 'type'>): StatWidgetConfig;
136
+ declare function barChartWidget(config: Omit<BarChartWidgetConfig, 'type'>): BarChartWidgetConfig;
137
+ declare function donutChartWidget(config: Omit<DonutChartWidgetConfig, 'type'>): DonutChartWidgetConfig;
138
+ declare function tableWidget(config: Omit<TableWidgetConfig, 'type'>): TableWidgetConfig;
139
+ //#endregion
140
+ //#region packages/dashboard/dashboard/resolvePath.d.ts
141
+ declare function resolvePath(source: unknown, path?: string): unknown;
142
+ declare function resolveArray(source: unknown, path: string): Record<string, unknown>[];
143
+ //#endregion
144
+ //#region packages/dashboard/dashboard/formatValue.d.ts
145
+ declare function formatDashboardValue(value: unknown, format?: ValueFormat): string;
146
+ //#endregion
147
+ export { type BarChartWidgetConfig, type DashboardConfig, type DashboardDataResult, DashboardPage, type DashboardPageProps, type DashboardSection, type DashboardSectionLayout, type DashboardWidget, type DonutChartWidgetConfig, type StatIconTone, type StatWidgetConfig, type TableColumnConfig, type TableViewAllConfig, type TableWidgetConfig, type TrendConfig, type ValueFormat, barChartWidget, defineDashboard, donutChartWidget, formatDashboardValue, resolveArray, resolvePath, statWidget, tableWidget, useDashboardData };
package/dist/index.d.mts ADDED
@@ -0,0 +1,147 @@
1
+ import { BadgeVariant } from "@nubitio/ui";
2
+
3
+ //#region packages/dashboard/dashboard/types.d.ts
4
+ type ValueFormat = 'text' | 'number' | 'currency' | 'percent' | 'date' | 'datetime';
5
+ interface TrendConfig {
6
+ /** Dot-path into dashboard payload, e.g. `stats.revenueTrend`. */
7
+ valuePath?: string;
8
+ /** Static trend value when not using `valuePath`. */
9
+ value?: number;
10
+ /** Suffix label, e.g. "vs last month". */
11
+ label?: string;
12
+ /** When true, negative trend renders as success (e.g. churn, refunds). */
13
+ invertColors?: boolean;
14
+ }
15
+ type StatIconTone = 'accent' | 'success' | 'warning' | 'danger' | 'info';
16
+ interface StatWidgetConfig {
17
+ type: 'stat';
18
+ id: string;
19
+ title: string;
20
+ valuePath?: string;
21
+ value?: string | number;
22
+ format?: ValueFormat;
23
+ icon?: string;
24
+ iconTone?: StatIconTone;
25
+ trend?: TrendConfig;
26
+ menuVisible?: boolean;
27
+ }
28
+ interface BarChartWidgetConfig {
29
+ type: 'bar-chart';
30
+ id: string;
31
+ title: string;
32
+ subtitle?: string;
33
+ dataPath: string;
34
+ xKey: string;
35
+ yKey: string;
36
+ valueFormat?: ValueFormat;
37
+ height?: number;
38
+ menuVisible?: boolean;
39
+ }
40
+ interface DonutChartWidgetConfig {
41
+ type: 'donut-chart';
42
+ id: string;
43
+ title: string;
44
+ subtitle?: string;
45
+ dataPath: string;
46
+ labelKey: string;
47
+ valueKey: string;
48
+ colors?: string[];
49
+ showLegend?: boolean;
50
+ centerLabel?: string;
51
+ centerValuePath?: string;
52
+ valueFormat?: ValueFormat;
53
+ menuVisible?: boolean;
54
+ }
55
+ interface TableColumnConfig {
56
+ key: string;
57
+ label: string;
58
+ format?: ValueFormat;
59
+ align?: 'left' | 'right' | 'center';
60
+ badge?: Record<string, BadgeVariant>;
61
+ badgeLabels?: Record<string, string>;
62
+ }
63
+ interface TableViewAllConfig {
64
+ to: string;
65
+ label?: string;
66
+ }
67
+ interface TableWidgetConfig {
68
+ type: 'table';
69
+ id: string;
70
+ title: string;
71
+ subtitle?: string;
72
+ dataPath: string;
73
+ columns: TableColumnConfig[];
74
+ viewAll?: TableViewAllConfig;
75
+ emptyTitle?: string;
76
+ emptyDescription?: string;
77
+ menuVisible?: boolean;
78
+ }
79
+ type DashboardWidget = StatWidgetConfig | BarChartWidgetConfig | DonutChartWidgetConfig | TableWidgetConfig;
80
+ type DashboardSectionLayout = 'stats' | 'charts' | 'full' | 'grid';
81
+ interface DashboardSection {
82
+ id?: string;
83
+ layout?: DashboardSectionLayout;
84
+ /** For `grid` layout — column count or CSS grid template. */
85
+ columns?: number | string;
86
+ widgets: DashboardWidget[];
87
+ }
88
+ interface DashboardDataResult {
89
+ data: Record<string, unknown>;
90
+ loading?: boolean;
91
+ error?: string | null;
92
+ refetch?: () => void;
93
+ }
94
+ interface DashboardConfig {
95
+ id?: string;
96
+ title: string;
97
+ /** GET endpoint returning the dashboard JSON payload. */
98
+ dataUrl?: string;
99
+ /** Custom data hook — takes precedence over `dataUrl`. */
100
+ useData?: () => DashboardDataResult;
101
+ sections: DashboardSection[];
102
+ refreshInterval?: number;
103
+ }
104
+ //#endregion
105
+ //#region packages/dashboard/dashboard/defineDashboard.d.ts
106
+ /**
107
+ * Declarative dashboard definition — mirrors `defineResource` ergonomics.
108
+ *
109
+ * ```ts
110
+ * const overview = defineDashboard({
111
+ * title: 'Dashboard',
112
+ * dataUrl: '/api/dashboard/overview',
113
+ * sections: [
114
+ * { layout: 'stats', widgets: [statWidget({ id: 'revenue', title: 'Revenue', valuePath: 'stats.revenue', format: 'currency' })] },
115
+ * ],
116
+ * });
117
+ *
118
+ * export const DashboardRoute = () => <DashboardPage config={overview} />;
119
+ * ```
120
+ */
121
+ declare function defineDashboard(config: DashboardConfig): DashboardConfig;
122
+ //#endregion
123
+ //#region packages/dashboard/dashboard/DashboardPage.d.ts
124
+ interface DashboardPageProps {
125
+ config: DashboardConfig;
126
+ }
127
+ declare function DashboardPage({
128
+ config
129
+ }: DashboardPageProps): import("react").JSX.Element;
130
+ //#endregion
131
+ //#region packages/dashboard/dashboard/useDashboardData.d.ts
132
+ declare function useDashboardData(dataUrl?: string, refreshInterval?: number): DashboardDataResult;
133
+ //#endregion
134
+ //#region packages/dashboard/dashboard/widgetBuilders.d.ts
135
+ declare function statWidget(config: Omit<StatWidgetConfig, 'type'>): StatWidgetConfig;
136
+ declare function barChartWidget(config: Omit<BarChartWidgetConfig, 'type'>): BarChartWidgetConfig;
137
+ declare function donutChartWidget(config: Omit<DonutChartWidgetConfig, 'type'>): DonutChartWidgetConfig;
138
+ declare function tableWidget(config: Omit<TableWidgetConfig, 'type'>): TableWidgetConfig;
139
+ //#endregion
140
+ //#region packages/dashboard/dashboard/resolvePath.d.ts
141
+ declare function resolvePath(source: unknown, path?: string): unknown;
142
+ declare function resolveArray(source: unknown, path: string): Record<string, unknown>[];
143
+ //#endregion
144
+ //#region packages/dashboard/dashboard/formatValue.d.ts
145
+ declare function formatDashboardValue(value: unknown, format?: ValueFormat): string;
146
+ //#endregion
147
+ export { type BarChartWidgetConfig, type DashboardConfig, type DashboardDataResult, DashboardPage, type DashboardPageProps, type DashboardSection, type DashboardSectionLayout, type DashboardWidget, type DonutChartWidgetConfig, type StatIconTone, type StatWidgetConfig, type TableColumnConfig, type TableViewAllConfig, type TableWidgetConfig, type TrendConfig, type ValueFormat, barChartWidget, defineDashboard, donutChartWidget, formatDashboardValue, resolveArray, resolvePath, statWidget, tableWidget, useDashboardData };