datool 0.0.5 → 0.0.7
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 +15 -1
- package/client-dist/assets/index-BJjc4NKE.css +1 -0
- package/client-dist/assets/index-C6-ONVzY.js +164 -0
- package/client-dist/index.html +2 -2
- package/package.json +1 -1
- package/src/client/App.tsx +11 -40
- package/src/client/components/data-table-cell.tsx +19 -6
- package/src/client/components/data-table.tsx +487 -69
- package/src/node/config.ts +22 -0
- package/src/node/server.ts +96 -56
- package/src/shared/types.ts +4 -0
- package/client-dist/assets/index-DUkIilaZ.css +0 -1
- package/client-dist/assets/index-OdNyDkx7.js +0 -164
package/client-dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>datool</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-C6-ONVzY.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BJjc4NKE.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
package/src/client/App.tsx
CHANGED
|
@@ -60,8 +60,6 @@ type ViewerExportColumn = {
|
|
|
60
60
|
label: string
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
const GROUPED_ROW_GAP = 32
|
|
64
|
-
|
|
65
63
|
function toActionRows(rows: ViewerRow[]): Record<string, unknown>[] {
|
|
66
64
|
return rows.map(({ __datoolRowId: _datoolRowId, ...row }) => row)
|
|
67
65
|
}
|
|
@@ -93,15 +91,9 @@ function stringifyGroupingValue(value: unknown) {
|
|
|
93
91
|
function groupViewerRows(
|
|
94
92
|
rows: ViewerRow[],
|
|
95
93
|
columns: ViewerExportColumn[]
|
|
96
|
-
): {
|
|
97
|
-
groupStartRowIds: Set<string>
|
|
98
|
-
rows: ViewerRow[]
|
|
99
|
-
} {
|
|
94
|
+
): ViewerRow[] {
|
|
100
95
|
if (columns.length === 0 || rows.length === 0) {
|
|
101
|
-
return
|
|
102
|
-
groupStartRowIds: new Set<string>(),
|
|
103
|
-
rows,
|
|
104
|
-
}
|
|
96
|
+
return rows
|
|
105
97
|
}
|
|
106
98
|
|
|
107
99
|
const groupOrder: string[] = []
|
|
@@ -125,22 +117,14 @@ function groupViewerRows(
|
|
|
125
117
|
}
|
|
126
118
|
|
|
127
119
|
const groupedRows: ViewerRow[] = []
|
|
128
|
-
const groupStartRowIds = new Set<string>()
|
|
129
120
|
|
|
130
121
|
groupOrder.forEach((groupKey, index) => {
|
|
131
122
|
const groupRows = rowsByGroup.get(groupKey) ?? []
|
|
132
123
|
|
|
133
|
-
if (index > 0 && groupRows[0]) {
|
|
134
|
-
groupStartRowIds.add(groupRows[0].__datoolRowId)
|
|
135
|
-
}
|
|
136
|
-
|
|
137
124
|
groupedRows.push(...groupRows)
|
|
138
125
|
})
|
|
139
126
|
|
|
140
|
-
return
|
|
141
|
-
groupStartRowIds,
|
|
142
|
-
rows: groupedRows,
|
|
143
|
-
}
|
|
127
|
+
return groupedRows
|
|
144
128
|
}
|
|
145
129
|
|
|
146
130
|
function applyActionRowChanges(
|
|
@@ -428,7 +412,6 @@ function DatoolTable({
|
|
|
428
412
|
rows,
|
|
429
413
|
settingsColumns,
|
|
430
414
|
groupedColumnIds,
|
|
431
|
-
groupedRowStartIds,
|
|
432
415
|
selectedStreamId,
|
|
433
416
|
setGroupedColumnIds,
|
|
434
417
|
setColumnVisibility,
|
|
@@ -453,7 +436,6 @@ function DatoolTable({
|
|
|
453
436
|
visible: boolean
|
|
454
437
|
}>
|
|
455
438
|
groupedColumnIds: string[]
|
|
456
|
-
groupedRowStartIds: Set<string>
|
|
457
439
|
selectedStreamId: string | null
|
|
458
440
|
setGroupedColumnIds: React.Dispatch<React.SetStateAction<string[]>>
|
|
459
441
|
setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>
|
|
@@ -464,19 +446,6 @@ function DatoolTable({
|
|
|
464
446
|
setShouldConnect: React.Dispatch<React.SetStateAction<boolean>>
|
|
465
447
|
}) {
|
|
466
448
|
const { search, setSearch } = useDataTableContext<ViewerRow>()
|
|
467
|
-
const resolveRowStyle = React.useCallback(
|
|
468
|
-
(row: ViewerRow) => {
|
|
469
|
-
if (!groupedRowStartIds.has(row.__datoolRowId)) {
|
|
470
|
-
return undefined
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
return {
|
|
474
|
-
borderTop: `${GROUPED_ROW_GAP}px solid var(--color-table-gap)`,
|
|
475
|
-
boxShadow: `inset 0 1px 0 0 var(--color-border)`,
|
|
476
|
-
} satisfies React.CSSProperties
|
|
477
|
-
},
|
|
478
|
-
[groupedRowStartIds]
|
|
479
|
-
)
|
|
480
449
|
const rowActions = React.useMemo<DataTableRowAction<ViewerRow>[]>(
|
|
481
450
|
() => {
|
|
482
451
|
const configActions =
|
|
@@ -659,7 +628,7 @@ function DatoolTable({
|
|
|
659
628
|
|
|
660
629
|
<div className="min-h-0 flex-1">
|
|
661
630
|
{activeStream ? (
|
|
662
|
-
<DataTable rowActions={rowActions}
|
|
631
|
+
<DataTable rowActions={rowActions} />
|
|
663
632
|
) : (
|
|
664
633
|
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
|
665
634
|
No stream selected.
|
|
@@ -990,8 +959,8 @@ export default function App() {
|
|
|
990
959
|
const fileBaseName = `${sanitizeFilePart(activeStream.label)}-${timeStamp}`
|
|
991
960
|
const content =
|
|
992
961
|
format === "csv"
|
|
993
|
-
? buildCsvContent(groupedRowsState
|
|
994
|
-
: buildMarkdownContent(groupedRowsState
|
|
962
|
+
? buildCsvContent(groupedRowsState, visibleExportColumns)
|
|
963
|
+
: buildMarkdownContent(groupedRowsState, visibleExportColumns)
|
|
995
964
|
|
|
996
965
|
downloadTextFile(
|
|
997
966
|
content,
|
|
@@ -999,7 +968,7 @@ export default function App() {
|
|
|
999
968
|
format === "csv" ? "text/csv" : "text/markdown"
|
|
1000
969
|
)
|
|
1001
970
|
},
|
|
1002
|
-
[activeStream, groupedRowsState
|
|
971
|
+
[activeStream, groupedRowsState, visibleExportColumns]
|
|
1003
972
|
)
|
|
1004
973
|
|
|
1005
974
|
return (
|
|
@@ -1007,11 +976,14 @@ export default function App() {
|
|
|
1007
976
|
autoScrollToBottom={groupedColumnIds.length === 0}
|
|
1008
977
|
columnVisibility={columnVisibility}
|
|
1009
978
|
columns={columns}
|
|
1010
|
-
data={
|
|
979
|
+
data={rows}
|
|
980
|
+
dateFormat={config?.dateFormat}
|
|
1011
981
|
getRowId={(row) => row.__datoolRowId}
|
|
982
|
+
grouping={groupedColumnIds}
|
|
1012
983
|
height="100%"
|
|
1013
984
|
id={tableId}
|
|
1014
985
|
onColumnVisibilityChange={setColumnVisibility}
|
|
986
|
+
onGroupingChange={setGroupedColumnIds}
|
|
1015
987
|
onSearchChange={setSearch}
|
|
1016
988
|
search={search}
|
|
1017
989
|
rowHeight={20}
|
|
@@ -1027,7 +999,6 @@ export default function App() {
|
|
|
1027
999
|
isConnecting={isConnecting}
|
|
1028
1000
|
isLoadingConfig={isLoadingConfig}
|
|
1029
1001
|
groupedColumnIds={groupedColumnIds}
|
|
1030
|
-
groupedRowStartIds={groupedRowsState.groupStartRowIds}
|
|
1031
1002
|
rows={rows}
|
|
1032
1003
|
settingsColumns={settingsColumns}
|
|
1033
1004
|
setGroupedColumnIds={setGroupedColumnIds}
|
|
@@ -7,7 +7,10 @@ import type { DataTableColumnKind } from "./data-table-col-icon"
|
|
|
7
7
|
import type { DataTableColumnMeta } from "./data-table-header-col"
|
|
8
8
|
import { EnumBadge } from "./enum-badge"
|
|
9
9
|
import { cn } from "@/lib/utils"
|
|
10
|
-
import type {
|
|
10
|
+
import type {
|
|
11
|
+
DatoolDateFormat,
|
|
12
|
+
DatoolEnumColorMap,
|
|
13
|
+
} from "../../shared/types"
|
|
11
14
|
|
|
12
15
|
function getAlignmentClassName(align: DataTableColumnMeta["align"] = "left") {
|
|
13
16
|
switch (align) {
|
|
@@ -20,16 +23,22 @@ function getAlignmentClassName(align: DataTableColumnMeta["align"] = "left") {
|
|
|
20
23
|
}
|
|
21
24
|
}
|
|
22
25
|
|
|
23
|
-
function formatDate(
|
|
26
|
+
function formatDate(
|
|
27
|
+
value: string | number | Date,
|
|
28
|
+
dateFormat?: DatoolDateFormat
|
|
29
|
+
) {
|
|
24
30
|
const date = value instanceof Date ? value : new Date(value)
|
|
25
31
|
|
|
26
32
|
if (Number.isNaN(date.getTime())) {
|
|
27
33
|
return String(value)
|
|
28
34
|
}
|
|
29
35
|
|
|
30
|
-
return new Intl.DateTimeFormat(
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
return new Intl.DateTimeFormat(
|
|
37
|
+
undefined,
|
|
38
|
+
dateFormat ?? {
|
|
39
|
+
dateStyle: "medium",
|
|
40
|
+
}
|
|
41
|
+
).format(date)
|
|
33
42
|
}
|
|
34
43
|
|
|
35
44
|
function formatNumber(value: number) {
|
|
@@ -42,6 +51,7 @@ function fallbackCellValue(
|
|
|
42
51
|
value: unknown,
|
|
43
52
|
kind?: DataTableColumnKind,
|
|
44
53
|
options?: {
|
|
54
|
+
dateFormat?: DatoolDateFormat
|
|
45
55
|
enumColors?: DatoolEnumColorMap
|
|
46
56
|
enumOptions?: string[]
|
|
47
57
|
}
|
|
@@ -80,7 +90,7 @@ function fallbackCellValue(
|
|
|
80
90
|
}
|
|
81
91
|
|
|
82
92
|
if (kind === "date" || value instanceof Date) {
|
|
83
|
-
return formatDate(value as string | number | Date)
|
|
93
|
+
return formatDate(value as string | number | Date, options?.dateFormat)
|
|
84
94
|
}
|
|
85
95
|
|
|
86
96
|
if (Array.isArray(value) || typeof value === "object") {
|
|
@@ -197,11 +207,13 @@ export function DataTableCheckbox({
|
|
|
197
207
|
|
|
198
208
|
export function DataTableBodyCell<TData>({
|
|
199
209
|
cell,
|
|
210
|
+
dateFormat,
|
|
200
211
|
highlightTerms = [],
|
|
201
212
|
paddingLeft,
|
|
202
213
|
paddingRight,
|
|
203
214
|
}: {
|
|
204
215
|
cell: Cell<TData, unknown>
|
|
216
|
+
dateFormat?: DatoolDateFormat
|
|
205
217
|
highlightTerms?: string[]
|
|
206
218
|
paddingLeft?: React.CSSProperties["paddingLeft"]
|
|
207
219
|
paddingRight?: React.CSSProperties["paddingRight"]
|
|
@@ -221,6 +233,7 @@ export function DataTableBodyCell<TData>({
|
|
|
221
233
|
? renderHighlightedText(rawValue, highlightTerms, rendered)
|
|
222
234
|
: (rendered ??
|
|
223
235
|
fallbackCellValue(rawValue, meta.kind, {
|
|
236
|
+
dateFormat,
|
|
224
237
|
enumColors: meta.enumColors,
|
|
225
238
|
enumOptions: meta.enumOptions,
|
|
226
239
|
}))
|