svg-table 0.0.1 → 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/CHANGES.md +5 -0
- package/README.md +447 -1
- package/{tableData.ts → TableData.ts} +2 -3
- package/TableFormatter.ts +587 -0
- package/{tableStyler.ts → TableStyler.ts} +75 -6
- package/dist/{tableData.d.ts → TableData.d.ts} +2 -2
- package/dist/{tableData.d.ts.map → TableData.d.ts.map} +1 -1
- package/dist/{tableData.js → TableData.js} +10 -10
- package/dist/{tableData.js.map → TableData.js.map} +1 -1
- package/dist/TableFormatter.d.ts +459 -0
- package/dist/TableFormatter.d.ts.map +1 -0
- package/dist/TableFormatter.js +579 -0
- package/dist/TableFormatter.js.map +1 -0
- package/dist/{tableStyler.d.ts → TableStyler.d.ts} +58 -3
- package/dist/TableStyler.d.ts.map +1 -0
- package/dist/{tableStyler.js → TableStyler.js} +90 -31
- package/dist/TableStyler.js.map +1 -0
- package/dist/index.d.ts +5 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/tableData.test.js +15 -15
- package/dist/tableFormatter.test.js +54 -15
- package/dist/tableFormatter.test.js.map +1 -1
- package/dist/tableStyler.test.js +236 -20
- package/dist/tableStyler.test.js.map +1 -1
- package/dist/tableSvg.d.ts +2 -2
- package/dist/tableSvg.js +7 -7
- package/index.ts +13 -12
- package/package.json +2 -2
- package/svg-table-0.0.1.tgz +0 -0
- package/tableData.test.ts +1 -1
- package/tableFormatter.test.ts +48 -4
- package/tableStyler.test.ts +133 -10
- package/tableSvg.ts +3 -3
- package/dist/tableFormatter.d.ts +0 -179
- package/dist/tableFormatter.d.ts.map +0 -1
- package/dist/tableFormatter.js +0 -298
- package/dist/tableFormatter.js.map +0 -1
- package/dist/tableStyler.d.ts.map +0 -1
- package/dist/tableStyler.js.map +0 -1
- package/svg-table-0.0.1-snapshot.tgz +0 -0
- package/tableFormatter.ts +0 -306
package/index.ts
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
export type {
|
|
2
|
-
GroupSelection,
|
|
3
|
-
TextSelection,
|
|
4
|
-
RectSelection,
|
|
5
|
-
LineSelection,
|
|
6
|
-
BorderSelection
|
|
7
|
-
} from './d3types'
|
|
8
|
-
|
|
9
1
|
export type {
|
|
10
2
|
Styling,
|
|
11
3
|
TableStylerProps,
|
|
@@ -47,12 +39,12 @@ export {
|
|
|
47
39
|
export {
|
|
48
40
|
TableData,
|
|
49
41
|
TableTagType
|
|
50
|
-
} from './
|
|
42
|
+
} from './TableData';
|
|
51
43
|
|
|
52
44
|
export type {
|
|
53
45
|
Formatter,
|
|
54
46
|
Formatting,
|
|
55
|
-
} from './
|
|
47
|
+
} from './TableFormatter';
|
|
56
48
|
|
|
57
49
|
export {
|
|
58
50
|
defaultFormatter,
|
|
@@ -60,12 +52,12 @@ export {
|
|
|
60
52
|
TableFormatterType,
|
|
61
53
|
isFormattingTag,
|
|
62
54
|
TableFormatter
|
|
63
|
-
} from './
|
|
55
|
+
} from './TableFormatter';
|
|
64
56
|
|
|
65
57
|
export {
|
|
66
58
|
StyledTable,
|
|
67
59
|
TableStyler
|
|
68
|
-
} from './
|
|
60
|
+
} from './TableStyler';
|
|
69
61
|
|
|
70
62
|
export type {
|
|
71
63
|
ElementPlacementInfo,
|
|
@@ -80,3 +72,12 @@ export {
|
|
|
80
72
|
createTable,
|
|
81
73
|
tableId,
|
|
82
74
|
} from './tableSvg';
|
|
75
|
+
|
|
76
|
+
export type {
|
|
77
|
+
GroupSelection,
|
|
78
|
+
TextSelection,
|
|
79
|
+
RectSelection,
|
|
80
|
+
LineSelection,
|
|
81
|
+
BorderSelection
|
|
82
|
+
} from './d3types';
|
|
83
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svg-table",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"author": "Rob Philipp",
|
|
5
5
|
"homepage": "https://github.com/robphilipp/svg-table",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"d3": "^7.9.0",
|
|
30
30
|
"result-fn": "^0.2.1",
|
|
31
|
-
"data-frame-ts": "^1.0.
|
|
31
|
+
"data-frame-ts": "^1.0.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@eslint/js": "^9.33.0",
|
|
Binary file
|
package/tableData.test.ts
CHANGED
package/tableFormatter.test.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {TableData} from "./
|
|
1
|
+
import {TableData} from "./TableData";
|
|
2
2
|
import {DataFrame} from "data-frame-ts"
|
|
3
|
-
import {TableFormatter, defaultFormatter} from "./
|
|
3
|
+
import {TableFormatter, defaultFormatter} from "./TableFormatter";
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
describe('creating tables with mixed data types', () => {
|
|
@@ -67,10 +67,10 @@ describe('creating tables with mixed data types', () => {
|
|
|
67
67
|
.flatMap(tableData => TableFormatter.fromTableData(tableData)
|
|
68
68
|
// add the default formatter for the column header, at the highest priority so that
|
|
69
69
|
// it is the one that applies to the row representing the column header
|
|
70
|
-
.
|
|
70
|
+
.addRowFormatters([0], defaultFormatter, Infinity)
|
|
71
71
|
// add the default formatter for the row header, at the highest priority so that
|
|
72
72
|
// it is the one that applies to the column representing the row header
|
|
73
|
-
.flatMap(tf => tf.
|
|
73
|
+
.flatMap(tf => tf.addColumnFormatters([0], defaultFormatter, Infinity))
|
|
74
74
|
// add the column formatters for each column at the default (lowest) priority
|
|
75
75
|
// (notice that the columns are shifted by one for the columns because the row-header
|
|
76
76
|
// occupies the first column (index=0))
|
|
@@ -93,6 +93,50 @@ describe('creating tables with mixed data types', () => {
|
|
|
93
93
|
expect(tableData.hasFooter()).toBeFalsy()
|
|
94
94
|
})
|
|
95
95
|
|
|
96
|
+
test('should be able to create a table with string column and row headers and numeric values', () => {
|
|
97
|
+
|
|
98
|
+
const expectedData = DataFrame.from<string>([
|
|
99
|
+
['2/1/2021', '12345', 'gnm-f234', '123.45', '4'], // overwrite (1, 4) to remove $
|
|
100
|
+
['2/2/2021', '23456', 'gnm-g234', '$ 23.45', '5'],
|
|
101
|
+
['2/3/2021', '34567', 'gnm-h234', '$ 3.65', '400'], // overwrite (3, 5) to multiply by 10
|
|
102
|
+
['2/4/2021', '45678', 'gnm-i234', '$ 314.15', '90'], // overwrite (4, 5) to multiply by 10
|
|
103
|
+
]).getOrThrow()
|
|
104
|
+
|
|
105
|
+
const tableData = TableData.fromDataFrame<string | number | Date>(data)
|
|
106
|
+
.withColumnHeader(columnHeader)
|
|
107
|
+
.flatMap(td => td.withRowHeader(rowHeader))
|
|
108
|
+
.flatMap(tableData => TableFormatter.fromTableData(tableData)
|
|
109
|
+
// add the default formatter for the column header, at the highest priority so that
|
|
110
|
+
// it is the one that applies to the row representing the column header
|
|
111
|
+
.addRowFormatters([0], defaultFormatter, Infinity)
|
|
112
|
+
// add the default formatter for the row header, at the highest priority so that
|
|
113
|
+
// it is the one that applies to the column representing the row header
|
|
114
|
+
.flatMap(tf => tf.addColumnFormatters([0], defaultFormatter, Infinity))
|
|
115
|
+
// add the column formatters for each column at the default (lowest) priority
|
|
116
|
+
// (notice that the columns are shifted by one for the columns because the row-header
|
|
117
|
+
// occupies the first column (index=0))
|
|
118
|
+
.flatMap(tf => tf.addColumnFormatter(1, value => (value as Date).toLocaleDateString()))
|
|
119
|
+
.flatMap(tf => tf.addColumnFormatter(2, value => defaultFormatter(value)))
|
|
120
|
+
.flatMap(tf => tf.addColumnFormatter(4, value => `$ ${(value as number).toFixed(2)}`))
|
|
121
|
+
.flatMap(tf => tf.addColumnFormatter(5, value => `${(value as number).toFixed(0)}`))
|
|
122
|
+
// override the cell formatter for a select set of cells
|
|
123
|
+
.flatMap(tf => tf.addCellFormatter(1, 4, value => `${(value as number).toFixed(2)}`, 1000))
|
|
124
|
+
.flatMap(tf => tf.addCellFormatters([[3, 5], [4, 5]], value => `${((value as number) * 10).toFixed(0)}`, 1000))
|
|
125
|
+
// format the table data and get back a TableData<string>
|
|
126
|
+
.flatMap(tf => tf.formatTable())
|
|
127
|
+
)
|
|
128
|
+
.getOrThrow()
|
|
129
|
+
|
|
130
|
+
expect(tableData.columnHeader().getOrThrow()).toEqual(columnHeader)
|
|
131
|
+
expect(tableData.rowHeader().getOrThrow()).toEqual(rowHeader.map(hdr => defaultFormatter(hdr)))
|
|
132
|
+
expect(tableData.data().map(df => df.equals(expectedData)).getOrThrow()).toBeTruthy()
|
|
133
|
+
expect(tableData.tableColumnCount()).toEqual(5 + 1) // data + row-header
|
|
134
|
+
expect(tableData.tableRowCount()).toEqual(4 + 1) // data + column-header
|
|
135
|
+
expect(tableData.hasColumnHeader()).toBeTruthy()
|
|
136
|
+
expect(tableData.hasRowHeader()).toBeTruthy()
|
|
137
|
+
expect(tableData.hasFooter()).toBeFalsy()
|
|
138
|
+
})
|
|
139
|
+
|
|
96
140
|
test('should be report failures when formatting function fails', () => {
|
|
97
141
|
const columnHeader = ['Date-Time', 'Customer ID', 'Product ID', 'Purchase Price', 'Amount']
|
|
98
142
|
|
package/tableStyler.test.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {TableData} from "./
|
|
1
|
+
import {TableData} from "./TableData";
|
|
2
2
|
import {DataFrame} from "data-frame-ts"
|
|
3
|
-
import {defaultFormatter, TableFormatter} from "./
|
|
3
|
+
import {defaultFormatter, TableFormatter} from "./TableFormatter";
|
|
4
4
|
import {
|
|
5
5
|
type Border,
|
|
6
6
|
type CellStyle,
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
defaultColumnStyle,
|
|
12
12
|
defaultDimension,
|
|
13
13
|
defaultFooterStyle,
|
|
14
|
-
defaultRowHeaderStyle,
|
|
14
|
+
defaultRowHeaderStyle, defaultRowStyle,
|
|
15
15
|
defaultTableFont,
|
|
16
16
|
defaultTableMargin,
|
|
17
17
|
defaultTablePadding,
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
type RowHeaderStyle,
|
|
20
20
|
type Styling,
|
|
21
21
|
} from "./stylings";
|
|
22
|
-
import {type StyledTable, TableStyler} from "./
|
|
22
|
+
import {type StyledTable, TableStyler} from "./TableStyler";
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
describe('styling data tables', () => {
|
|
@@ -32,9 +32,10 @@ describe('styling data tables', () => {
|
|
|
32
32
|
[dateTimeFor(2, 2), 23456, 'gnm-g234', 23.45, 5],
|
|
33
33
|
[dateTimeFor(3, 3), 34567, 'gnm-h234', 3.65, 40],
|
|
34
34
|
[dateTimeFor(4, 4), 45678, 'gnm-i234', 314.15, 9],
|
|
35
|
+
[dateTimeFor(5, 5), 56789, 'gnm-j234', 618.3, 10],
|
|
35
36
|
]).getOrThrow()
|
|
36
37
|
const columnHeader = ['Date-Time', 'Customer ID', 'Product ID', 'Purchase Price', 'Amount']
|
|
37
|
-
const rowHeader = [1, 2, 3, 4]
|
|
38
|
+
const rowHeader = [1, 2, 3, 4, 5]
|
|
38
39
|
const footer = ['A', 'B', 'C', 'D', 'E']
|
|
39
40
|
|
|
40
41
|
describe('adding basic table styles', () => {
|
|
@@ -94,6 +95,23 @@ describe('styling data tables', () => {
|
|
|
94
95
|
test('should be able to retrieve the margin', () => {
|
|
95
96
|
expect(styledTable.tableMargin()).toEqual({...defaultTableMargin, left: 10, right: 10})
|
|
96
97
|
})
|
|
98
|
+
|
|
99
|
+
test('should be able to get a copy of the data-frame from the styler', () => {
|
|
100
|
+
const dataFrame = styledTable.data()
|
|
101
|
+
expect(dataFrame.equals(formattedTableData.unwrapDataFrame())).toBeTruthy()
|
|
102
|
+
})
|
|
103
|
+
|
|
104
|
+
test('should be able to report whether styled table has a row header', () => {
|
|
105
|
+
expect(styledTable.hasRowHeader()).toBeTruthy()
|
|
106
|
+
})
|
|
107
|
+
|
|
108
|
+
test('should be able to report whether styled table has a column header', () => {
|
|
109
|
+
expect(styledTable.hasColumnHeader()).toBeTruthy()
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
test('should be able to report whether styled table has a footer', () => {
|
|
113
|
+
expect(styledTable.hasFooter()).toBeTruthy()
|
|
114
|
+
})
|
|
97
115
|
})
|
|
98
116
|
|
|
99
117
|
test('should be able to set and retrieve style for the column header', () => {
|
|
@@ -183,26 +201,26 @@ describe('styling data tables', () => {
|
|
|
183
201
|
test('should return a failure when getting a style for a column index that is too large', () => {
|
|
184
202
|
const result = styledTable.stylesForTableCoordinates(1, 6)
|
|
185
203
|
expect(result.failed).toBeTruthy()
|
|
186
|
-
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: 1; column_index: 6; valid_row_index: [0,
|
|
204
|
+
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: 1; column_index: 6; valid_row_index: [0, 7); valid_column_index: [0, 6)")
|
|
187
205
|
})
|
|
188
206
|
|
|
189
207
|
test('should return a failure when getting a style for a column index that is less than 0', () => {
|
|
190
208
|
const result = styledTable.stylesForTableCoordinates(3, -1)
|
|
191
209
|
expect(result.failed).toBeTruthy()
|
|
192
|
-
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: 3; column_index: -1; valid_row_index: [0,
|
|
210
|
+
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: 3; column_index: -1; valid_row_index: [0, 7); valid_column_index: [0, 6)")
|
|
193
211
|
|
|
194
212
|
})
|
|
195
213
|
|
|
196
214
|
test('should return a failure when getting a style for a row index that is less than 0', () => {
|
|
197
215
|
const result = styledTable.stylesForTableCoordinates(-1, 3)
|
|
198
216
|
expect(result.failed).toBeTruthy()
|
|
199
|
-
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: -1; column_index: 3; valid_row_index: [0,
|
|
217
|
+
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: -1; column_index: 3; valid_row_index: [0, 7); valid_column_index: [0, 6)")
|
|
200
218
|
})
|
|
201
219
|
|
|
202
220
|
test('should return a failure when getting a style for a row index that is too large', () => {
|
|
203
|
-
const result = styledTable.stylesForTableCoordinates(
|
|
221
|
+
const result = styledTable.stylesForTableCoordinates(7, 3)
|
|
204
222
|
expect(result.failed).toBeTruthy()
|
|
205
|
-
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index:
|
|
223
|
+
expect(result.error).toEqual("(StyledTable::stylesFor) Invalid row and/or column index; row_index: 7; column_index: 3; valid_row_index: [0, 7); valid_column_index: [0, 6)")
|
|
206
224
|
})
|
|
207
225
|
|
|
208
226
|
test('should get the row header style for (1, 0) because table has row header style', () => {
|
|
@@ -264,5 +282,110 @@ describe('styling data tables', () => {
|
|
|
264
282
|
} as CellStyle)
|
|
265
283
|
})
|
|
266
284
|
})
|
|
285
|
+
|
|
286
|
+
describe('set styles for multiple rows, columns, and cells', () => {
|
|
287
|
+
|
|
288
|
+
function expectDefaultCellStyleFor(styledTable: StyledTable<string>, row: number, column: number) {
|
|
289
|
+
expect(styledTable.stylesForTableCoordinates(row, column).getOrThrow()).toEqual(defaultCellStyle)
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
test('should be able to set the style for multiple columns at once', () => {
|
|
293
|
+
const styledColumns = [1, 3, 4]
|
|
294
|
+
const styledTable: StyledTable<string> = TableStyler.fromTableData(formattedTableData)
|
|
295
|
+
.withColumnStyles(styledColumns, {padding: {left: 1000, right: 1111}}, 75)
|
|
296
|
+
.styleTable()
|
|
297
|
+
const unstyledRows = [1, 3, 4, 5]
|
|
298
|
+
const unstyledColumns = [0, 2, 5]
|
|
299
|
+
for (const row of unstyledRows) {
|
|
300
|
+
for (const column of unstyledColumns) {
|
|
301
|
+
expectDefaultCellStyleFor(styledTable, row, column)
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
for (const column of styledColumns) {
|
|
306
|
+
expect(styledTable.columnStyleFor(column).map(styling => styling.style).getOrThrow())
|
|
307
|
+
.toEqual({...defaultColumnStyle, padding: {left: 1000, right: 1111}})
|
|
308
|
+
}
|
|
309
|
+
})
|
|
310
|
+
|
|
311
|
+
test('should be able to set the style for all columns at once', () => {
|
|
312
|
+
const styledColumns = [0, 1, 2, 3, 4, 5]
|
|
313
|
+
const styledTable: StyledTable<string> = TableStyler.fromTableData(formattedTableData)
|
|
314
|
+
// an empty array means that all the columns should be styled
|
|
315
|
+
.withColumnStyles([], {padding: {left: 1000, right: 1111}}, 75)
|
|
316
|
+
.styleTable()
|
|
317
|
+
|
|
318
|
+
for (const column of styledColumns) {
|
|
319
|
+
expect(styledTable.columnStyleFor(column).map(styling => styling.style).getOrThrow())
|
|
320
|
+
.toEqual({...defaultColumnStyle, padding: {left: 1000, right: 1111}})
|
|
321
|
+
}
|
|
322
|
+
})
|
|
323
|
+
|
|
324
|
+
test('should be able to set the style for multiple rows at once', () => {
|
|
325
|
+
const styledRows = [1, 3, 4]
|
|
326
|
+
const styledTable: StyledTable<string> = TableStyler.fromTableData(formattedTableData)
|
|
327
|
+
.withRowStyles(styledRows, {padding: {top: 1000, bottom: 1111}}, 75)
|
|
328
|
+
.styleTable()
|
|
329
|
+
const unstyledRows = [0, 2]
|
|
330
|
+
const unstyledColumns = [0, 1, 2, 3, 4, 5]
|
|
331
|
+
for (const row of unstyledRows) {
|
|
332
|
+
for (const column of unstyledColumns) {
|
|
333
|
+
expectDefaultCellStyleFor(styledTable, row, column)
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
for (const row of styledRows) {
|
|
338
|
+
expect(styledTable.rowStyleFor(row).map(styling => styling.style).getOrThrow())
|
|
339
|
+
.toEqual({...defaultRowStyle, padding: {top: 1000, bottom: 1111}})
|
|
340
|
+
}
|
|
341
|
+
})
|
|
342
|
+
|
|
343
|
+
test('should be able to set the style for all rows at once', () => {
|
|
344
|
+
const styledRows = [0, 1, 2, 3, 4]
|
|
345
|
+
const styledTable: StyledTable<string> = TableStyler.fromTableData(formattedTableData)
|
|
346
|
+
// an empty array means that all the columns should be styled
|
|
347
|
+
.withRowStyles([], {padding: {top: 1000, bottom: 1111}}, 75)
|
|
348
|
+
.styleTable()
|
|
349
|
+
|
|
350
|
+
for (const row of styledRows) {
|
|
351
|
+
expect(styledTable.rowStyleFor(row).map(styling => styling.style).getOrThrow())
|
|
352
|
+
.toEqual({...defaultRowStyle, padding: {top: 1000, bottom: 1111}})
|
|
353
|
+
}
|
|
354
|
+
})
|
|
355
|
+
})
|
|
356
|
+
|
|
357
|
+
describe('conditionally set styles for cells', () => {
|
|
358
|
+
function expectDefaultCellStyleFor(styledTable: StyledTable<string>, row: number, column: number) {
|
|
359
|
+
expect(styledTable.stylesForTableCoordinates(row, column).getOrThrow()).toEqual(defaultCellStyle)
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
test('should be able to set the style for multiple columns at once', () => {
|
|
363
|
+
// const styledTable: StyledTable<string> = TableStyler.fromTableData(formattedTableData)
|
|
364
|
+
const styledTable: StyledTable<string> = TableStyler.fromDataFrame(formattedTableData.unwrapDataFrame())
|
|
365
|
+
.withCellStyleWhen(
|
|
366
|
+
(value, row, column) => parseInt(value) >= 45678 && column === 2,
|
|
367
|
+
{padding: {...defaultTablePadding, left: 1000, right: 1111}},
|
|
368
|
+
75
|
|
369
|
+
)
|
|
370
|
+
.styleTable()
|
|
371
|
+
const unstyledColumns = [0, 1, 3, 4]
|
|
372
|
+
const unstyledRows = [0, 1, 2, 3, 4, 5]
|
|
373
|
+
for (const row of unstyledRows) {
|
|
374
|
+
for (const column of unstyledColumns) {
|
|
375
|
+
expectDefaultCellStyleFor(styledTable, row, column)
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
expectDefaultCellStyleFor(styledTable, 0, 2)
|
|
379
|
+
expectDefaultCellStyleFor(styledTable, 1, 2)
|
|
380
|
+
expectDefaultCellStyleFor(styledTable, 2, 2)
|
|
381
|
+
expectDefaultCellStyleFor(styledTable, 3, 2)
|
|
382
|
+
|
|
383
|
+
for (const row of [4, 5]) {
|
|
384
|
+
expect(styledTable.cellStyleFor(row, 2).map(styling => styling.style).getOrThrow())
|
|
385
|
+
.toEqual({...defaultCellStyle, padding: {...defaultTablePadding, left: 1000, right: 1111}})
|
|
386
|
+
}
|
|
387
|
+
})
|
|
388
|
+
|
|
389
|
+
})
|
|
267
390
|
})
|
|
268
391
|
})
|
package/tableSvg.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {select, type Selection} from 'd3';
|
|
2
2
|
import {type BorderSelection, type GroupSelection, type RectSelection, type TextSelection} from "./d3types";
|
|
3
3
|
import {textHeightOf, textWidthOf} from "./tableUtils";
|
|
4
|
-
import {TableData} from "./
|
|
4
|
+
import {TableData} from "./TableData";
|
|
5
5
|
import {type Result} from "result-fn";
|
|
6
|
-
import {StyledTable} from "./
|
|
6
|
+
import {StyledTable} from "./TableStyler";
|
|
7
7
|
import {
|
|
8
8
|
BorderLocation,
|
|
9
9
|
type CellStyle,
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
type VerticalTextAlignment
|
|
17
17
|
} from './stylings';
|
|
18
18
|
import {DataFrame} from "data-frame-ts";
|
|
19
|
-
import {defaultFormatting} from "./
|
|
19
|
+
import {defaultFormatting} from "./TableFormatter";
|
|
20
20
|
|
|
21
21
|
export type ElementPlacementInfo = {
|
|
22
22
|
cellSelection: RectSelection
|
package/dist/tableFormatter.d.ts
DELETED
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
import { DataFrame, type Tag, type TagCoordinate, type TagValue } from "data-frame-ts";
|
|
2
|
-
import { type Result } from "result-fn";
|
|
3
|
-
import { TableData } from "./tableData";
|
|
4
|
-
/**
|
|
5
|
-
* Type representing a formatter function
|
|
6
|
-
*/
|
|
7
|
-
export type Formatter<D> = (value: D) => string;
|
|
8
|
-
/**
|
|
9
|
-
* Default formatter that converts a {@link value} of type `V` to a string
|
|
10
|
-
* @param value The value to convert
|
|
11
|
-
* @return a string representation of the {@link value}
|
|
12
|
-
*/
|
|
13
|
-
export declare function defaultFormatter<D>(value: D): string;
|
|
14
|
-
export type Formatting<V> = {
|
|
15
|
-
formatter: Formatter<V>;
|
|
16
|
-
priority: number;
|
|
17
|
-
};
|
|
18
|
-
export declare function defaultFormatting<D>(): Formatting<D>;
|
|
19
|
-
export declare enum TableFormatterType {
|
|
20
|
-
CELL = "cell-formatter",
|
|
21
|
-
COLUMN = "column-formatter",
|
|
22
|
-
ROW = "row-formatter"
|
|
23
|
-
}
|
|
24
|
-
export declare function isFormattingTag(tag: Tag<TagValue, TagCoordinate>): boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Represents a formatter used to apply row, column, and cell formatting to a data table.
|
|
27
|
-
* This class is used to define custom formatters for specific rows, columns, or cells,
|
|
28
|
-
* with support for priority-based selection of formatters.
|
|
29
|
-
*/
|
|
30
|
-
export declare class TableFormatter<V> {
|
|
31
|
-
private readonly dataFrame;
|
|
32
|
-
/**
|
|
33
|
-
* @param dataFrame A data-frame that will be tagged with the row, column, and
|
|
34
|
-
* cell formatters.
|
|
35
|
-
* @private
|
|
36
|
-
*/
|
|
37
|
-
private constructor();
|
|
38
|
-
/**
|
|
39
|
-
* Constructs a new {@link TableFormatter} from a {@link TableData} object. Underneath,
|
|
40
|
-
* this factory method merely unwraps the {@link DataFrame} from the {@link TableData}
|
|
41
|
-
* and hands it to the constructor.
|
|
42
|
-
* @param tableData The table data object from which to construct the table formatter
|
|
43
|
-
* @return A new {@link TableFormatter} based on the {@link TableData}
|
|
44
|
-
* @see TableFormatter.fromDataFrame
|
|
45
|
-
*/
|
|
46
|
-
static fromTableData<V>(tableData: TableData<V>): TableFormatter<V>;
|
|
47
|
-
/**
|
|
48
|
-
* Constructs a new {@link TableFormatter} from a {@link DataFrame} object
|
|
49
|
-
* @param dataFrame The data-frame object from which to construct the table formatter
|
|
50
|
-
* @return A new {@link TableFormatter} based on the {@link DataFrame}
|
|
51
|
-
@see TableFormatter.fromTableData
|
|
52
|
-
*/
|
|
53
|
-
static fromDataFrame<V>(dataFrame: DataFrame<V>): TableFormatter<V>;
|
|
54
|
-
/**
|
|
55
|
-
* Formatters convert the column value types to formatted strings. The formatter used to format a given
|
|
56
|
-
* cell depends on the priority of each formatter associated with that cell. The formatter with the
|
|
57
|
-
* highest priority is used. If two or more formatters for a given cell have the same priority, the selected
|
|
58
|
-
* formatter is indeterminant.
|
|
59
|
-
* @param columnIndex The index of the column to which to add the formatter
|
|
60
|
-
* @param formatter The formatter
|
|
61
|
-
* @param [priority = 0] The priority of this formatter. If cells have more than one associated formatter,
|
|
62
|
-
* the one with the highest priority number is used.
|
|
63
|
-
* @example
|
|
64
|
-
* ```typescript
|
|
65
|
-
* // create the data
|
|
66
|
-
* const data = DataFrame.from<string | number | Date>([
|
|
67
|
-
* [dateTimeFor(1, 1), 12345, 'gnm-f234', 123.45, 4],
|
|
68
|
-
* [dateTimeFor(2, 2), 23456, 'gnm-g234', 23.45, 5],
|
|
69
|
-
* [dateTimeFor(3, 3), 34567, 'gnm-h234', 3.65, 40],
|
|
70
|
-
* [dateTimeFor(4, 4), 45678, 'gnm-i234', 314.15, 9],
|
|
71
|
-
* ]).getOrThrow()
|
|
72
|
-
*
|
|
73
|
-
* // create the table-data object from the data, and then hand the table-data
|
|
74
|
-
* // to the table formatter, add column formats, and format the table, getting
|
|
75
|
-
* // back a new TableData<string>
|
|
76
|
-
* const tableData: TableData<string> = TableData.fromDataFrame<string | number | Date>(data)
|
|
77
|
-
* // from the table-data, create a table-formatter
|
|
78
|
-
* .flatMap(tableData => createTableFormatterFrom(tableData)
|
|
79
|
-
* // add a column formatter for the first column of dates
|
|
80
|
-
* .addColumnFormatter(0, value => (value as Date).toLocaleDateString())
|
|
81
|
-
* // add a column formatter to the second column of number
|
|
82
|
-
* .flatMap(tf => tf.addColumnFormatter(1, value => defaultFormatter(value)))
|
|
83
|
-
* // add a column formatter to the fourth column of currencies
|
|
84
|
-
* .flatMap(tf => tf.addColumnFormatter(3, value => `$ ${(value as number).toFixed(2)}`))
|
|
85
|
-
* .flatMap(tf => tf.addColumnFormatter(4, value => `${(value as number).toFixed(0)}`))
|
|
86
|
-
* // format the table into a new TableData<string> object
|
|
87
|
-
* .flatMap(tf => tf.formatTable())
|
|
88
|
-
* )
|
|
89
|
-
* .getOrThrow()
|
|
90
|
-
*
|
|
91
|
-
* // we expect the data-frame in the table data to be the following
|
|
92
|
-
* const expectedData = DataFrame.from<string>([
|
|
93
|
-
* ['2/1/2021', '12345', 'gnm-f234', '$ 123.45', '4'],
|
|
94
|
-
* ['2/2/2021', '23456', 'gnm-g234', '$ 23.45', '5'],
|
|
95
|
-
* ['2/3/2021', '34567', 'GNM-H234', '$ 3.65', '40'],
|
|
96
|
-
* ['2/4/2021', '45678', 'gnm-i234', '$ 314.15', '9'],
|
|
97
|
-
* ]).getOrThrow()
|
|
98
|
-
* ```
|
|
99
|
-
*/
|
|
100
|
-
addColumnFormatter(columnIndex: number, formatter: Formatter<V>, priority?: number): Result<TableFormatter<V>, string>;
|
|
101
|
-
addColumnFormatters(columnIndexes: Array<number>, formatter: Formatter<V>, priority?: number): Result<TableFormatter<V>, string>;
|
|
102
|
-
private static addColumnFormatters;
|
|
103
|
-
addRowFormatter(rowIndex: number, formatter: Formatter<V>, priority?: number): Result<TableFormatter<V>, string>;
|
|
104
|
-
addRowFormatters(rowIndexes: Array<number>, formatter: Formatter<V>, priority?: number): Result<TableFormatter<V>, string>;
|
|
105
|
-
private static addRowFormatters;
|
|
106
|
-
addCellFormatter(rowIndex: number, columnIndex: number, formatter: Formatter<V>, priority?: number): Result<TableFormatter<V>, string>;
|
|
107
|
-
addCellFormatters(cellIndexes: Array<[x: number, y: number]>, formatter: Formatter<V>, priority?: number): Result<TableFormatter<V>, string>;
|
|
108
|
-
private static addCellFormatters;
|
|
109
|
-
/**
|
|
110
|
-
* Formats the table headers, footer, and values using the formatters that have been added
|
|
111
|
-
* to this `TableData<V>` object and returns a new `TableData<string>` object where all the
|
|
112
|
-
* elements have been converted to a formatted string.
|
|
113
|
-
* @return a new `TableData<string>` object where all the elements have been converted to a
|
|
114
|
-
* formatted string.
|
|
115
|
-
* @example
|
|
116
|
-
* ```typescript
|
|
117
|
-
* function dateTimeFor(day: number, hour: number): Date {
|
|
118
|
-
* return new Date(2021, 1, day, hour, 0, 0, 0);
|
|
119
|
-
* }
|
|
120
|
-
*
|
|
121
|
-
* // the headers for the table
|
|
122
|
-
* const columnHeader = ['Date-Time', 'Customer ID', 'Product ID', 'Purchase Price', 'Amount']
|
|
123
|
-
* const rowHeader = [1, 2, 3, 4]
|
|
124
|
-
*
|
|
125
|
-
* // this is the actual data used to creat the data table (in row-form)
|
|
126
|
-
* const data = DataFrame.from<string | number | Date>([
|
|
127
|
-
* [dateTimeFor(1, 1), 12345, 'gnm-f234', 123.45, 4],
|
|
128
|
-
* [dateTimeFor(2, 2), 23456, 'gnm-g234', 23.45, 5],
|
|
129
|
-
* [dateTimeFor(3, 3), 34567, 'gnm-h234', 3.65, 40],
|
|
130
|
-
* [dateTimeFor(4, 4), 45678, 'gnm-i234', 314.15, 9],
|
|
131
|
-
* ]).getOrThrow()
|
|
132
|
-
*
|
|
133
|
-
* // this is what we expect that formatted data to look like
|
|
134
|
-
* const expectedData = DataFrame.from<string>([
|
|
135
|
-
* ['2/1/2021', '12345', 'gnm-f234', '$ 123.45', '4'],
|
|
136
|
-
* ['2/2/2021', '23456', 'gnm-g234', '$ 23.45', '5'],
|
|
137
|
-
* ['2/3/2021', '34567', 'gnm-h234', '$ 3.65', '40'],
|
|
138
|
-
* ['2/4/2021', '45678', 'gnm-i234', '$ 314.15', '9'],
|
|
139
|
-
* ]).getOrThrow()
|
|
140
|
-
*
|
|
141
|
-
* // 1. create a data-table that has a column-header and a row-header and mixed-type
|
|
142
|
-
* // data (number, string, Date)
|
|
143
|
-
* // 2. add formatters for the row and column headers (at highest priority)
|
|
144
|
-
* // 3. add formatters for some of the other data columns
|
|
145
|
-
* // 4. format the table
|
|
146
|
-
* const tableData = TableData.fromDataFrame<string | number | Date>(data)
|
|
147
|
-
* .withColumnHeader(columnHeader)
|
|
148
|
-
* .flatMap(table => table.withRowHeader(rowHeader))
|
|
149
|
-
* // add the default formatter for the column header, at the highest priority so that
|
|
150
|
-
* // it is the one that applies to the row representing the column header
|
|
151
|
-
* .flatMap(td => td.addRowFormatter(0, defaultFormatter, Infinity))
|
|
152
|
-
* // add the default formatter for the row header, at the highest priority so that
|
|
153
|
-
* // it is the one that applies to the column representing the row header
|
|
154
|
-
* .flatMap(td => td.addColumnFormatter(0, defaultFormatter, Infinity))
|
|
155
|
-
* // add the column formatters for each column at the default (lowest) priority
|
|
156
|
-
* // (notice that the columns are shifted by one for the columns because the row-header
|
|
157
|
-
* // occupies the first column (index=0))
|
|
158
|
-
* .flatMap(td => td.addColumnFormatter(1, value => (value as Date).toLocaleDateString()))
|
|
159
|
-
* .flatMap(td => td.addColumnFormatter(2, value => defaultFormatter(value)))
|
|
160
|
-
* .flatMap(td => td.addColumnFormatter(4, value => `$ ${(value as number).toFixed(2)}`))
|
|
161
|
-
* .flatMap(td => td.addColumnFormatter(5, value => `${(value as number).toFixed(0)}`))
|
|
162
|
-
* // format the table data and get back a TableData<string>
|
|
163
|
-
* .map(td => td.formatTable())
|
|
164
|
-
* .getOrThrow()
|
|
165
|
-
*
|
|
166
|
-
* // the column header of the formatted table should be the same as the one specified
|
|
167
|
-
* expect(tableData.columnHeader().getOrThrow()).toEqual(columnHeader)
|
|
168
|
-
*
|
|
169
|
-
* // the row header of the formatted table should be the same as the one specified
|
|
170
|
-
* expect(tableData.rowHeader().getOrThrow()).toEqual(rowHeader.map(hdr => defaultFormatter(hdr)))
|
|
171
|
-
*
|
|
172
|
-
* // the data should be equal to the expected data
|
|
173
|
-
* expect(tableData.data().map(df => df.equals(expectedData)).getOrThrow()).toBeTruthy()
|
|
174
|
-
* ```
|
|
175
|
-
*/
|
|
176
|
-
formatTable<C extends TagCoordinate>(): Result<TableData<string>, string>;
|
|
177
|
-
formatTableInto<C extends TagCoordinate, D = TableData<string>>(mapper: (dataFrame: DataFrame<string>) => D): Result<D, string>;
|
|
178
|
-
}
|
|
179
|
-
//# sourceMappingURL=tableFormatter.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tableFormatter.d.ts","sourceRoot":"","sources":["../tableFormatter.ts"],"names":[],"mappings":"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"}
|