@truedat/dd 4.44.5 → 4.45.3

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 (31) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/package.json +7 -7
  3. package/src/components/StructureCrumbs.js +28 -11
  4. package/src/components/StructureItem.js +2 -1
  5. package/src/components/StructureSummary.js +7 -9
  6. package/src/components/StructureTabPane.js +4 -2
  7. package/src/components/__tests__/StructureItem.spec.js +23 -6
  8. package/src/components/__tests__/StructureItems.spec.js +14 -4
  9. package/src/components/__tests__/StructureProperties.spec.js +1 -1
  10. package/src/components/__tests__/StructureSummary.spec.js +13 -0
  11. package/src/components/__tests__/__snapshots__/StructureItem.spec.js.snap +68 -43
  12. package/src/components/__tests__/__snapshots__/StructureItems.spec.js.snap +47 -4
  13. package/src/components/__tests__/__snapshots__/StructureProperties.spec.js.snap +22 -0
  14. package/src/components/__tests__/__snapshots__/StructureSummary.spec.js.snap +102 -11
  15. package/src/components/__tests__/__snapshots__/StructureTabPane.spec.js.snap +1 -1
  16. package/src/components/index.js +0 -6
  17. package/src/reducers/structure.js +1 -0
  18. package/src/reducers/structures.js +2 -0
  19. package/src/selectors/__tests__/getStructureParent.spec.js +13 -4
  20. package/src/selectors/__tests__/getStructureProperties.spec.js +2 -2
  21. package/src/selectors/getSortedStructureChildren.js +1 -1
  22. package/src/selectors/getStructureFieldColumns.js +20 -14
  23. package/src/selectors/getStructureParent.js +9 -4
  24. package/src/selectors/getStructureProperties.js +12 -0
  25. package/src/selectors/structureColumnsSelector.js +11 -3
  26. package/src/components/ProfilingElements.js +0 -89
  27. package/src/components/ProfilingGraph.js +0 -89
  28. package/src/components/ProfilingPatterns.js +0 -57
  29. package/src/components/StructureProfiling.js +0 -124
  30. package/src/components/__tests__/StructureProfiling.spec.js +0 -45
  31. package/src/components/__tests__/__snapshots__/StructureProfiling.spec.js.snap +0 -444
@@ -1,124 +0,0 @@
1
- import _ from "lodash/fp";
2
- import React from "react";
3
- import PropTypes from "prop-types";
4
- import { connect } from "react-redux";
5
- import { Table } from "semantic-ui-react";
6
- import { useIntl } from "react-intl";
7
- import { Link } from "react-router-dom";
8
- import { linkTo } from "@truedat/core/routes";
9
- import { getSortedFields } from "../selectors";
10
- import ProfilingElements from "./ProfilingElements";
11
-
12
- const calculatePercent = (value_count, total_count) =>
13
- ((parseFloat(value_count) / parseFloat(total_count)) * 100).toFixed(2) + "%";
14
-
15
- const calculateUniquePercent = ({ unique_count, total_count }) =>
16
- calculatePercent(unique_count, total_count);
17
- const calculateNullPercent = ({ null_count, total_count }) =>
18
- calculatePercent(null_count, total_count);
19
-
20
- const calculateMode = (distribution) =>
21
- _.isEmpty(distribution)
22
- ? "-"
23
- : _.flow(_.orderBy("v", "desc"), _.head, _.prop("k"))(distribution);
24
-
25
- export const FieldProfileRow = ({ profile, data_structure_id, name }) => {
26
- const { unique_count, null_count, total_count, min, max, most_frequent } =
27
- profile;
28
- const uniquePercent =
29
- !_.isNil(unique_count) && !_.isNil(total_count) && total_count > 0
30
- ? calculateUniquePercent(profile)
31
- : "-";
32
- const nullPercent =
33
- !_.isNil(null_count) && !_.isNil(total_count)
34
- ? calculateNullPercent(profile)
35
- : "-";
36
-
37
- const maxLength = 50;
38
- const truncFn = _.truncate({ length: maxLength });
39
- const minValue = _.isNil(min) ? "-" : truncFn(min);
40
- const maxValue = _.isNil(max) ? "-" : truncFn(max);
41
- const minTitle = !_.isNil(min) && min.length > maxLength ? min : "";
42
- const maxTitle = !_.isNil(max) && max.length > maxLength ? max : "";
43
- const modeValue = _.isNil(most_frequent) ? "-" : calculateMode(most_frequent);
44
-
45
- return (
46
- <Table.Row>
47
- <Table.Cell>
48
- <Link
49
- to={
50
- _.isNil(most_frequent)
51
- ? linkTo.STRUCTURE({ id: data_structure_id })
52
- : linkTo.STRUCTURE_PROFILE({ id: data_structure_id })
53
- }
54
- >
55
- {name}
56
- </Link>
57
- </Table.Cell>
58
- <Table.Cell className="text-right" content={uniquePercent} />
59
- <Table.Cell className="text-right" content={nullPercent} />
60
- <Table.Cell>
61
- <span title={minTitle}> {minValue} </span>
62
- </Table.Cell>
63
- <Table.Cell>
64
- <span title={maxTitle}> {maxValue} </span>
65
- </Table.Cell>
66
- <Table.Cell content={modeValue} />
67
- </Table.Row>
68
- );
69
- };
70
-
71
- FieldProfileRow.propTypes = {
72
- data_structure_id: PropTypes.number,
73
- name: PropTypes.string,
74
- profile: PropTypes.object,
75
- };
76
-
77
- export const StructureProfiling = ({ fields }) => {
78
- const { formatMessage } = useIntl();
79
- return _.isEmpty(fields) ? (
80
- <ProfilingElements />
81
- ) : (
82
- <Table>
83
- <Table.Header>
84
- <Table.Row>
85
- <Table.HeaderCell
86
- content={formatMessage({ id: "profiling.field.name" })}
87
- />
88
- <Table.HeaderCell
89
- className="text-right"
90
- content={formatMessage({ id: "profiling.field.unique" })}
91
- />
92
- <Table.HeaderCell
93
- className="text-right"
94
- content={formatMessage({ id: "profiling.field.null" })}
95
- />
96
- <Table.HeaderCell
97
- content={formatMessage({ id: "profiling.field.min" })}
98
- />
99
- <Table.HeaderCell
100
- content={formatMessage({ id: "profiling.field.max" })}
101
- />
102
- <Table.HeaderCell
103
- content={formatMessage({ id: "profiling.field.mode" })}
104
- />
105
- </Table.Row>
106
- </Table.Header>
107
- <Table.Body>
108
- {fields.map((field, i) => (
109
- <FieldProfileRow key={i} {...field} />
110
- ))}
111
- </Table.Body>
112
- </Table>
113
- );
114
- };
115
-
116
- StructureProfiling.propTypes = {
117
- fields: PropTypes.array,
118
- };
119
-
120
- const mapStateToProps = (state) => ({
121
- fields: _.filter(_.has("profile"))(getSortedFields(state)),
122
- });
123
-
124
- export default connect(mapStateToProps)(StructureProfiling);
@@ -1,45 +0,0 @@
1
- import React from "react";
2
- import { render } from "@truedat/test/render";
3
- import StructureProfiling from "../StructureProfiling";
4
-
5
- const profile = {
6
- unique_count: 5,
7
- null_count: 2,
8
- total_count: 10,
9
- min: "33",
10
- max: "40",
11
- most_frequent: [
12
- { k: "foo", v: 10 },
13
- { k: "bar", v: 42 },
14
- ],
15
- };
16
-
17
- const messages = {
18
- en: {
19
- "profiling.field.max": "max",
20
- "profiling.field.min": "min",
21
- "profiling.field.mode": "mode",
22
- "profiling.field.name": "name",
23
- "profiling.field.null": "null",
24
- "profiling.field.unique": "unique",
25
- "structure.field.graph.title": "Frequency chart",
26
- },
27
- };
28
-
29
- describe("<StructureProfiling />", () => {
30
- it("matches the latest snapshot (fields)", () => {
31
- const structureFields = [
32
- { data_structure_id: 123, name: "field1", profile },
33
- { data_structure_id: 122, name: "field2", profile },
34
- ];
35
- const state = { structureFields };
36
- const { container } = render(<StructureProfiling />, { messages, state });
37
- expect(container).toMatchSnapshot();
38
- });
39
-
40
- it("matches the latest snapshot (profile)", () => {
41
- const state = { structureProfile: profile };
42
- const { container } = render(<StructureProfiling />, { messages, state });
43
- expect(container).toMatchSnapshot();
44
- });
45
- });
@@ -1,444 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<StructureProfiling /> matches the latest snapshot (fields) 1`] = `
4
- <div>
5
- <table
6
- class="ui table"
7
- >
8
- <thead
9
- class=""
10
- >
11
- <tr
12
- class=""
13
- >
14
- <th
15
- class=""
16
- >
17
- name
18
- </th>
19
- <th
20
- class="text-right"
21
- >
22
- unique
23
- </th>
24
- <th
25
- class="text-right"
26
- >
27
- null
28
- </th>
29
- <th
30
- class=""
31
- >
32
- min
33
- </th>
34
- <th
35
- class=""
36
- >
37
- max
38
- </th>
39
- <th
40
- class=""
41
- >
42
- mode
43
- </th>
44
- </tr>
45
- </thead>
46
- <tbody
47
- class=""
48
- >
49
- <tr
50
- class=""
51
- >
52
- <td
53
- class=""
54
- >
55
- <a
56
- href="/structures/123/profile"
57
- >
58
- field1
59
- </a>
60
- </td>
61
- <td
62
- class="text-right"
63
- >
64
- 50.00%
65
- </td>
66
- <td
67
- class="text-right"
68
- >
69
- 20.00%
70
- </td>
71
- <td
72
- class=""
73
- >
74
- <span
75
- title=""
76
- >
77
-
78
- 33
79
-
80
- </span>
81
- </td>
82
- <td
83
- class=""
84
- >
85
- <span
86
- title=""
87
- >
88
-
89
- 40
90
-
91
- </span>
92
- </td>
93
- <td
94
- class=""
95
- >
96
- bar
97
- </td>
98
- </tr>
99
- <tr
100
- class=""
101
- >
102
- <td
103
- class=""
104
- >
105
- <a
106
- href="/structures/122/profile"
107
- >
108
- field2
109
- </a>
110
- </td>
111
- <td
112
- class="text-right"
113
- >
114
- 50.00%
115
- </td>
116
- <td
117
- class="text-right"
118
- >
119
- 20.00%
120
- </td>
121
- <td
122
- class=""
123
- >
124
- <span
125
- title=""
126
- >
127
-
128
- 33
129
-
130
- </span>
131
- </td>
132
- <td
133
- class=""
134
- >
135
- <span
136
- title=""
137
- >
138
-
139
- 40
140
-
141
- </span>
142
- </td>
143
- <td
144
- class=""
145
- >
146
- bar
147
- </td>
148
- </tr>
149
- </tbody>
150
- </table>
151
- </div>
152
- `;
153
-
154
- exports[`<StructureProfiling /> matches the latest snapshot (profile) 1`] = `
155
- <div>
156
- <div
157
- class="ui grid"
158
- >
159
- <div
160
- class="sixteen wide column"
161
- >
162
- <p>
163
- Frequency chart
164
- :
165
- </p>
166
- </div>
167
- </div>
168
- <div
169
- class="rv-xy-plot "
170
- style="width: 800px; height: 400px;"
171
- >
172
- <svg
173
- class="rv-xy-plot__inner"
174
- height="400"
175
- width="800"
176
- >
177
- <g
178
- class="rv-xy-plot__axis rv-xy-plot__axis--vertical "
179
- style="font-size: 12px; width: 100px;"
180
- transform="translate(0,10)"
181
- >
182
- <line
183
- class="rv-xy-plot__axis__line"
184
- style="font-size: 12px; width: 100px;"
185
- x1="180"
186
- x2="180"
187
- y1="0"
188
- y2="350"
189
- />
190
- <g
191
- class="rv-xy-plot__axis__ticks"
192
- transform="translate(180, 0)"
193
- >
194
- <g
195
- class="rv-xy-plot__axis__tick"
196
- style="font-size: 12px; width: 100px;"
197
- transform="translate(0, 262.5)"
198
- >
199
- <line
200
- class="rv-xy-plot__axis__tick__line"
201
- style="font-size: 12px; width: 100px;"
202
- x1="6"
203
- x2="-6"
204
- y1="0"
205
- y2="0"
206
- />
207
- <text
208
- class="rv-xy-plot__axis__tick__text"
209
- dy="0.32em"
210
- style="font-size: 12px; width: 100px;"
211
- text-anchor="end"
212
- transform="translate(-14, 0)"
213
- >
214
- foo
215
- </text>
216
- </g>
217
- <g
218
- class="rv-xy-plot__axis__tick"
219
- style="font-size: 12px; width: 100px;"
220
- transform="translate(0, 87.5)"
221
- >
222
- <line
223
- class="rv-xy-plot__axis__tick__line"
224
- style="font-size: 12px; width: 100px;"
225
- x1="6"
226
- x2="-6"
227
- y1="0"
228
- y2="0"
229
- />
230
- <text
231
- class="rv-xy-plot__axis__tick__text"
232
- dy="0.32em"
233
- style="font-size: 12px; width: 100px;"
234
- text-anchor="end"
235
- transform="translate(-14, 0)"
236
- >
237
- bar
238
- </text>
239
- </g>
240
- </g>
241
- </g>
242
- <g
243
- class="rv-xy-plot__axis rv-xy-plot__axis--horizontal "
244
- style="font-size: 12px;"
245
- transform="translate(180,360)"
246
- >
247
- <line
248
- class="rv-xy-plot__axis__line"
249
- style="font-size: 12px;"
250
- x1="0"
251
- x2="610"
252
- y1="0"
253
- y2="0"
254
- />
255
- <g
256
- class="rv-xy-plot__axis__ticks"
257
- transform="translate(0, 0)"
258
- >
259
- <g
260
- class="rv-xy-plot__axis__tick"
261
- style="font-size: 12px;"
262
- transform="translate(18.484848484848484, 0)"
263
- >
264
- <line
265
- class="rv-xy-plot__axis__tick__line"
266
- style="font-size: 12px;"
267
- x1="0"
268
- x2="0"
269
- y1="-6"
270
- y2="6"
271
- />
272
- <text
273
- class="rv-xy-plot__axis__tick__text"
274
- dy="0.72em"
275
- style="font-size: 12px;"
276
- text-anchor="middle"
277
- transform="translate(0, 14)"
278
- >
279
- 10
280
- </text>
281
- </g>
282
- <g
283
- class="rv-xy-plot__axis__tick"
284
- style="font-size: 12px;"
285
- transform="translate(110.9090909090909, 0)"
286
- >
287
- <line
288
- class="rv-xy-plot__axis__tick__line"
289
- style="font-size: 12px;"
290
- x1="0"
291
- x2="0"
292
- y1="-6"
293
- y2="6"
294
- />
295
- <text
296
- class="rv-xy-plot__axis__tick__text"
297
- dy="0.72em"
298
- style="font-size: 12px;"
299
- text-anchor="middle"
300
- transform="translate(0, 14)"
301
- >
302
- 15
303
- </text>
304
- </g>
305
- <g
306
- class="rv-xy-plot__axis__tick"
307
- style="font-size: 12px;"
308
- transform="translate(203.33333333333331, 0)"
309
- >
310
- <line
311
- class="rv-xy-plot__axis__tick__line"
312
- style="font-size: 12px;"
313
- x1="0"
314
- x2="0"
315
- y1="-6"
316
- y2="6"
317
- />
318
- <text
319
- class="rv-xy-plot__axis__tick__text"
320
- dy="0.72em"
321
- style="font-size: 12px;"
322
- text-anchor="middle"
323
- transform="translate(0, 14)"
324
- >
325
- 20
326
- </text>
327
- </g>
328
- <g
329
- class="rv-xy-plot__axis__tick"
330
- style="font-size: 12px;"
331
- transform="translate(295.75757575757575, 0)"
332
- >
333
- <line
334
- class="rv-xy-plot__axis__tick__line"
335
- style="font-size: 12px;"
336
- x1="0"
337
- x2="0"
338
- y1="-6"
339
- y2="6"
340
- />
341
- <text
342
- class="rv-xy-plot__axis__tick__text"
343
- dy="0.72em"
344
- style="font-size: 12px;"
345
- text-anchor="middle"
346
- transform="translate(0, 14)"
347
- >
348
- 25
349
- </text>
350
- </g>
351
- <g
352
- class="rv-xy-plot__axis__tick"
353
- style="font-size: 12px;"
354
- transform="translate(388.1818181818182, 0)"
355
- >
356
- <line
357
- class="rv-xy-plot__axis__tick__line"
358
- style="font-size: 12px;"
359
- x1="0"
360
- x2="0"
361
- y1="-6"
362
- y2="6"
363
- />
364
- <text
365
- class="rv-xy-plot__axis__tick__text"
366
- dy="0.72em"
367
- style="font-size: 12px;"
368
- text-anchor="middle"
369
- transform="translate(0, 14)"
370
- >
371
- 30
372
- </text>
373
- </g>
374
- <g
375
- class="rv-xy-plot__axis__tick"
376
- style="font-size: 12px;"
377
- transform="translate(480.60606060606057, 0)"
378
- >
379
- <line
380
- class="rv-xy-plot__axis__tick__line"
381
- style="font-size: 12px;"
382
- x1="0"
383
- x2="0"
384
- y1="-6"
385
- y2="6"
386
- />
387
- <text
388
- class="rv-xy-plot__axis__tick__text"
389
- dy="0.72em"
390
- style="font-size: 12px;"
391
- text-anchor="middle"
392
- transform="translate(0, 14)"
393
- >
394
- 35
395
- </text>
396
- </g>
397
- <g
398
- class="rv-xy-plot__axis__tick"
399
- style="font-size: 12px;"
400
- transform="translate(573.0303030303031, 0)"
401
- >
402
- <line
403
- class="rv-xy-plot__axis__tick__line"
404
- style="font-size: 12px;"
405
- x1="0"
406
- x2="0"
407
- y1="-6"
408
- y2="6"
409
- />
410
- <text
411
- class="rv-xy-plot__axis__tick__text"
412
- dy="0.72em"
413
- style="font-size: 12px;"
414
- text-anchor="middle"
415
- transform="translate(0, 14)"
416
- >
417
- 40
418
- </text>
419
- </g>
420
- </g>
421
- </g>
422
- <g
423
- class="rv-xy-plot__series rv-xy-plot__series--bar "
424
- transform="translate(180,10)"
425
- >
426
- <rect
427
- height="148.75"
428
- style="opacity: 1; stroke: rgb(0, 32, 87); fill: rgb(0, 32, 87);"
429
- width="18.484848484848484"
430
- x="0"
431
- y="188.125"
432
- />
433
- <rect
434
- height="148.75"
435
- style="opacity: 1; stroke: rgb(0, 32, 87); fill: rgb(0, 32, 87);"
436
- width="610"
437
- x="0"
438
- y="13.125"
439
- />
440
- </g>
441
- </svg>
442
- </div>
443
- </div>
444
- `;