react-auto-smart-table 1.0.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 +130 -0
- package/dist/index.css +404 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +164 -0
- package/dist/index.d.ts +164 -0
- package/dist/index.js +1259 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1218 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +62 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import React$1, { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type Dataset = Record<string, any>[];
|
|
4
|
+
type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'email' | 'url' | 'currency' | 'percentage' | 'image';
|
|
5
|
+
interface ColumnSchema {
|
|
6
|
+
key: string;
|
|
7
|
+
type: ColumnType;
|
|
8
|
+
nullable: boolean;
|
|
9
|
+
uniqueValues?: number;
|
|
10
|
+
min?: number;
|
|
11
|
+
max?: number;
|
|
12
|
+
}
|
|
13
|
+
type TableSchema = Record<string, ColumnSchema>;
|
|
14
|
+
interface InsightWidget$1 {
|
|
15
|
+
title: string;
|
|
16
|
+
type: string;
|
|
17
|
+
data: any[];
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface SmartTablePlugin {
|
|
21
|
+
detect?: (columnKey: string, sample: any[]) => ColumnType | null;
|
|
22
|
+
render?: (value: any) => ReactNode;
|
|
23
|
+
insights?: (dataset: Dataset) => InsightWidget$1[];
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Priority: 1 email 2 url 3 image 4 date 5 currency 6 percentage 7 number 8 boolean 9 string
|
|
28
|
+
*/
|
|
29
|
+
declare const detectValueType: (value: any) => ColumnType;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Samples up to maxSampleSize rows from the dataset without scanning the whole array
|
|
33
|
+
* sampleSize = min(200, dataset.length)
|
|
34
|
+
*/
|
|
35
|
+
declare function sampleDataset(dataset: Dataset, maxSampleSize?: number): Dataset;
|
|
36
|
+
|
|
37
|
+
interface ColumnStats {
|
|
38
|
+
uniqueValues?: number;
|
|
39
|
+
min?: number;
|
|
40
|
+
max?: number;
|
|
41
|
+
}
|
|
42
|
+
declare const computeColumnStats: (columnKey: string, dataset: Dataset, type: ColumnType) => ColumnStats;
|
|
43
|
+
|
|
44
|
+
declare class PluginRegistry {
|
|
45
|
+
private plugins;
|
|
46
|
+
register(pluginOrPlugins: SmartTablePlugin | SmartTablePlugin[]): void;
|
|
47
|
+
clear(): void;
|
|
48
|
+
runDetectors(columnKey: string, sample: any[]): ColumnType | null;
|
|
49
|
+
getRenderers(): Record<string, React.FC<{
|
|
50
|
+
value: any;
|
|
51
|
+
}>>;
|
|
52
|
+
getPlugins(): SmartTablePlugin[];
|
|
53
|
+
}
|
|
54
|
+
declare const globalPluginRegistry: PluginRegistry;
|
|
55
|
+
|
|
56
|
+
declare const buildSchema: (dataset: Dataset, registry?: PluginRegistry) => TableSchema;
|
|
57
|
+
|
|
58
|
+
type SortDirection = 'asc' | 'desc';
|
|
59
|
+
interface UseSortingResult {
|
|
60
|
+
sortedData: Dataset;
|
|
61
|
+
sortColumn: string | null;
|
|
62
|
+
sortDirection: SortDirection;
|
|
63
|
+
handleSort: (columnKey: string) => void;
|
|
64
|
+
}
|
|
65
|
+
declare const useSorting: (data: Dataset, schema: TableSchema, initialSortColumn?: string | null, initialSortDirection?: SortDirection) => UseSortingResult;
|
|
66
|
+
|
|
67
|
+
type FilterStateValue = string | {
|
|
68
|
+
min?: number;
|
|
69
|
+
max?: number;
|
|
70
|
+
} | {
|
|
71
|
+
start?: string;
|
|
72
|
+
end?: string;
|
|
73
|
+
} | boolean | null;
|
|
74
|
+
interface FilterState {
|
|
75
|
+
[key: string]: FilterStateValue;
|
|
76
|
+
}
|
|
77
|
+
interface UseFiltersResult {
|
|
78
|
+
filteredData: Dataset;
|
|
79
|
+
filters: FilterState;
|
|
80
|
+
setFilter: (columnKey: string, value: FilterStateValue) => void;
|
|
81
|
+
clearFilters: () => void;
|
|
82
|
+
}
|
|
83
|
+
declare const useFilters: (data: Dataset, schema: TableSchema) => UseFiltersResult;
|
|
84
|
+
|
|
85
|
+
interface UsePaginationResult {
|
|
86
|
+
paginatedData: Dataset;
|
|
87
|
+
currentPage: number;
|
|
88
|
+
pageSize: number;
|
|
89
|
+
totalPages: number;
|
|
90
|
+
setPage: (page: number) => void;
|
|
91
|
+
setPageSize: (size: number) => void;
|
|
92
|
+
}
|
|
93
|
+
declare const usePagination: (data: Dataset, initialPageSize?: number) => UsePaginationResult;
|
|
94
|
+
|
|
95
|
+
interface AggregatedDataPoint {
|
|
96
|
+
[key: string]: any;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Groups dataset by a specific dimension and sums the metrics
|
|
100
|
+
*/
|
|
101
|
+
declare const aggregateData: (dataset: Dataset, dimension: string, metrics: string[]) => AggregatedDataPoint[];
|
|
102
|
+
/**
|
|
103
|
+
* Groups dataset by a dimension and simply counts occurrences
|
|
104
|
+
* (useful when there are no metrics)
|
|
105
|
+
*/
|
|
106
|
+
declare const aggregateDataByCount: (dataset: Dataset, dimension: string) => AggregatedDataPoint[];
|
|
107
|
+
|
|
108
|
+
type FieldRole = 'dimension' | 'metric' | 'discard';
|
|
109
|
+
interface ChartDetectionResult {
|
|
110
|
+
dimensions: string[];
|
|
111
|
+
metrics: string[];
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Analyzes the schema to categorize fields into dimensions (x-axis/groups) and metrics (y-axis/values)
|
|
115
|
+
*/
|
|
116
|
+
declare const detectChartFields: (schema: TableSchema) => ChartDetectionResult;
|
|
117
|
+
|
|
118
|
+
type ChartType = 'bar' | 'pie' | 'line';
|
|
119
|
+
interface InsightWidget {
|
|
120
|
+
id: string;
|
|
121
|
+
title: string;
|
|
122
|
+
type: ChartType;
|
|
123
|
+
data: AggregatedDataPoint[];
|
|
124
|
+
xAxisKey: string;
|
|
125
|
+
yAxisKeys: string[];
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Generates an array of insightful charts based on the dataset and its schema.
|
|
129
|
+
*/
|
|
130
|
+
declare const generateInsights: (dataset: Dataset, schema: TableSchema) => InsightWidget[];
|
|
131
|
+
|
|
132
|
+
interface SmartTableProps {
|
|
133
|
+
data: Dataset;
|
|
134
|
+
sortable?: boolean;
|
|
135
|
+
filterable?: boolean;
|
|
136
|
+
pagination?: boolean;
|
|
137
|
+
insights?: boolean;
|
|
138
|
+
plugins?: SmartTablePlugin[];
|
|
139
|
+
}
|
|
140
|
+
declare const SmartTable: React$1.FC<SmartTableProps>;
|
|
141
|
+
|
|
142
|
+
interface FilterPanelProps {
|
|
143
|
+
schema: TableSchema;
|
|
144
|
+
filters: FilterState;
|
|
145
|
+
onFilterChange: (columnKey: string, value: FilterStateValue) => void;
|
|
146
|
+
onClear: () => void;
|
|
147
|
+
}
|
|
148
|
+
declare const FilterPanel: React$1.FC<FilterPanelProps>;
|
|
149
|
+
|
|
150
|
+
interface InsightsPanelProps {
|
|
151
|
+
data: Dataset;
|
|
152
|
+
schema: TableSchema;
|
|
153
|
+
}
|
|
154
|
+
declare const InsightsPanel: React$1.FC<InsightsPanelProps>;
|
|
155
|
+
|
|
156
|
+
declare const getCellRenderer: (type: ColumnType | string, registry?: PluginRegistry) => React$1.FC<{
|
|
157
|
+
value: any;
|
|
158
|
+
}>;
|
|
159
|
+
|
|
160
|
+
declare const currencyPlugin: SmartTablePlugin;
|
|
161
|
+
|
|
162
|
+
declare const percentagePlugin: SmartTablePlugin;
|
|
163
|
+
|
|
164
|
+
export { type AggregatedDataPoint, type ChartDetectionResult, type ChartType, type ColumnSchema, type ColumnType, type Dataset, type FieldRole, FilterPanel, type FilterPanelProps, type FilterState, type FilterStateValue, type InsightWidget$1 as InsightWidget, InsightsPanel, type InsightsPanelProps, PluginRegistry, SmartTable, type SmartTablePlugin, type SmartTableProps, type SortDirection, type TableSchema, type UseFiltersResult, type UsePaginationResult, type UseSortingResult, aggregateData, aggregateDataByCount, buildSchema, computeColumnStats, currencyPlugin, detectChartFields, detectValueType, generateInsights, getCellRenderer, globalPluginRegistry, percentagePlugin, sampleDataset, useFilters, usePagination, useSorting };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import React$1, { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type Dataset = Record<string, any>[];
|
|
4
|
+
type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'email' | 'url' | 'currency' | 'percentage' | 'image';
|
|
5
|
+
interface ColumnSchema {
|
|
6
|
+
key: string;
|
|
7
|
+
type: ColumnType;
|
|
8
|
+
nullable: boolean;
|
|
9
|
+
uniqueValues?: number;
|
|
10
|
+
min?: number;
|
|
11
|
+
max?: number;
|
|
12
|
+
}
|
|
13
|
+
type TableSchema = Record<string, ColumnSchema>;
|
|
14
|
+
interface InsightWidget$1 {
|
|
15
|
+
title: string;
|
|
16
|
+
type: string;
|
|
17
|
+
data: any[];
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface SmartTablePlugin {
|
|
21
|
+
detect?: (columnKey: string, sample: any[]) => ColumnType | null;
|
|
22
|
+
render?: (value: any) => ReactNode;
|
|
23
|
+
insights?: (dataset: Dataset) => InsightWidget$1[];
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Priority: 1 email 2 url 3 image 4 date 5 currency 6 percentage 7 number 8 boolean 9 string
|
|
28
|
+
*/
|
|
29
|
+
declare const detectValueType: (value: any) => ColumnType;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Samples up to maxSampleSize rows from the dataset without scanning the whole array
|
|
33
|
+
* sampleSize = min(200, dataset.length)
|
|
34
|
+
*/
|
|
35
|
+
declare function sampleDataset(dataset: Dataset, maxSampleSize?: number): Dataset;
|
|
36
|
+
|
|
37
|
+
interface ColumnStats {
|
|
38
|
+
uniqueValues?: number;
|
|
39
|
+
min?: number;
|
|
40
|
+
max?: number;
|
|
41
|
+
}
|
|
42
|
+
declare const computeColumnStats: (columnKey: string, dataset: Dataset, type: ColumnType) => ColumnStats;
|
|
43
|
+
|
|
44
|
+
declare class PluginRegistry {
|
|
45
|
+
private plugins;
|
|
46
|
+
register(pluginOrPlugins: SmartTablePlugin | SmartTablePlugin[]): void;
|
|
47
|
+
clear(): void;
|
|
48
|
+
runDetectors(columnKey: string, sample: any[]): ColumnType | null;
|
|
49
|
+
getRenderers(): Record<string, React.FC<{
|
|
50
|
+
value: any;
|
|
51
|
+
}>>;
|
|
52
|
+
getPlugins(): SmartTablePlugin[];
|
|
53
|
+
}
|
|
54
|
+
declare const globalPluginRegistry: PluginRegistry;
|
|
55
|
+
|
|
56
|
+
declare const buildSchema: (dataset: Dataset, registry?: PluginRegistry) => TableSchema;
|
|
57
|
+
|
|
58
|
+
type SortDirection = 'asc' | 'desc';
|
|
59
|
+
interface UseSortingResult {
|
|
60
|
+
sortedData: Dataset;
|
|
61
|
+
sortColumn: string | null;
|
|
62
|
+
sortDirection: SortDirection;
|
|
63
|
+
handleSort: (columnKey: string) => void;
|
|
64
|
+
}
|
|
65
|
+
declare const useSorting: (data: Dataset, schema: TableSchema, initialSortColumn?: string | null, initialSortDirection?: SortDirection) => UseSortingResult;
|
|
66
|
+
|
|
67
|
+
type FilterStateValue = string | {
|
|
68
|
+
min?: number;
|
|
69
|
+
max?: number;
|
|
70
|
+
} | {
|
|
71
|
+
start?: string;
|
|
72
|
+
end?: string;
|
|
73
|
+
} | boolean | null;
|
|
74
|
+
interface FilterState {
|
|
75
|
+
[key: string]: FilterStateValue;
|
|
76
|
+
}
|
|
77
|
+
interface UseFiltersResult {
|
|
78
|
+
filteredData: Dataset;
|
|
79
|
+
filters: FilterState;
|
|
80
|
+
setFilter: (columnKey: string, value: FilterStateValue) => void;
|
|
81
|
+
clearFilters: () => void;
|
|
82
|
+
}
|
|
83
|
+
declare const useFilters: (data: Dataset, schema: TableSchema) => UseFiltersResult;
|
|
84
|
+
|
|
85
|
+
interface UsePaginationResult {
|
|
86
|
+
paginatedData: Dataset;
|
|
87
|
+
currentPage: number;
|
|
88
|
+
pageSize: number;
|
|
89
|
+
totalPages: number;
|
|
90
|
+
setPage: (page: number) => void;
|
|
91
|
+
setPageSize: (size: number) => void;
|
|
92
|
+
}
|
|
93
|
+
declare const usePagination: (data: Dataset, initialPageSize?: number) => UsePaginationResult;
|
|
94
|
+
|
|
95
|
+
interface AggregatedDataPoint {
|
|
96
|
+
[key: string]: any;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Groups dataset by a specific dimension and sums the metrics
|
|
100
|
+
*/
|
|
101
|
+
declare const aggregateData: (dataset: Dataset, dimension: string, metrics: string[]) => AggregatedDataPoint[];
|
|
102
|
+
/**
|
|
103
|
+
* Groups dataset by a dimension and simply counts occurrences
|
|
104
|
+
* (useful when there are no metrics)
|
|
105
|
+
*/
|
|
106
|
+
declare const aggregateDataByCount: (dataset: Dataset, dimension: string) => AggregatedDataPoint[];
|
|
107
|
+
|
|
108
|
+
type FieldRole = 'dimension' | 'metric' | 'discard';
|
|
109
|
+
interface ChartDetectionResult {
|
|
110
|
+
dimensions: string[];
|
|
111
|
+
metrics: string[];
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Analyzes the schema to categorize fields into dimensions (x-axis/groups) and metrics (y-axis/values)
|
|
115
|
+
*/
|
|
116
|
+
declare const detectChartFields: (schema: TableSchema) => ChartDetectionResult;
|
|
117
|
+
|
|
118
|
+
type ChartType = 'bar' | 'pie' | 'line';
|
|
119
|
+
interface InsightWidget {
|
|
120
|
+
id: string;
|
|
121
|
+
title: string;
|
|
122
|
+
type: ChartType;
|
|
123
|
+
data: AggregatedDataPoint[];
|
|
124
|
+
xAxisKey: string;
|
|
125
|
+
yAxisKeys: string[];
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Generates an array of insightful charts based on the dataset and its schema.
|
|
129
|
+
*/
|
|
130
|
+
declare const generateInsights: (dataset: Dataset, schema: TableSchema) => InsightWidget[];
|
|
131
|
+
|
|
132
|
+
interface SmartTableProps {
|
|
133
|
+
data: Dataset;
|
|
134
|
+
sortable?: boolean;
|
|
135
|
+
filterable?: boolean;
|
|
136
|
+
pagination?: boolean;
|
|
137
|
+
insights?: boolean;
|
|
138
|
+
plugins?: SmartTablePlugin[];
|
|
139
|
+
}
|
|
140
|
+
declare const SmartTable: React$1.FC<SmartTableProps>;
|
|
141
|
+
|
|
142
|
+
interface FilterPanelProps {
|
|
143
|
+
schema: TableSchema;
|
|
144
|
+
filters: FilterState;
|
|
145
|
+
onFilterChange: (columnKey: string, value: FilterStateValue) => void;
|
|
146
|
+
onClear: () => void;
|
|
147
|
+
}
|
|
148
|
+
declare const FilterPanel: React$1.FC<FilterPanelProps>;
|
|
149
|
+
|
|
150
|
+
interface InsightsPanelProps {
|
|
151
|
+
data: Dataset;
|
|
152
|
+
schema: TableSchema;
|
|
153
|
+
}
|
|
154
|
+
declare const InsightsPanel: React$1.FC<InsightsPanelProps>;
|
|
155
|
+
|
|
156
|
+
declare const getCellRenderer: (type: ColumnType | string, registry?: PluginRegistry) => React$1.FC<{
|
|
157
|
+
value: any;
|
|
158
|
+
}>;
|
|
159
|
+
|
|
160
|
+
declare const currencyPlugin: SmartTablePlugin;
|
|
161
|
+
|
|
162
|
+
declare const percentagePlugin: SmartTablePlugin;
|
|
163
|
+
|
|
164
|
+
export { type AggregatedDataPoint, type ChartDetectionResult, type ChartType, type ColumnSchema, type ColumnType, type Dataset, type FieldRole, FilterPanel, type FilterPanelProps, type FilterState, type FilterStateValue, type InsightWidget$1 as InsightWidget, InsightsPanel, type InsightsPanelProps, PluginRegistry, SmartTable, type SmartTablePlugin, type SmartTableProps, type SortDirection, type TableSchema, type UseFiltersResult, type UsePaginationResult, type UseSortingResult, aggregateData, aggregateDataByCount, buildSchema, computeColumnStats, currencyPlugin, detectChartFields, detectValueType, generateInsights, getCellRenderer, globalPluginRegistry, percentagePlugin, sampleDataset, useFilters, usePagination, useSorting };
|