@truedat/profile 4.54.2 → 4.54.5

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/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [4.54.5] 2022-10-25
4
+
5
+ ### Changed
6
+
7
+ - [TD-4860] `ProfilingGraph` now uses `Progress` component from
8
+ `semantic-ui-react` instead of `react-vis`
9
+
3
10
  ## [4.45.0] 2022-05-26
4
11
 
5
12
  ### Changed
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@truedat/profile",
3
- "version": "4.54.2",
3
+ "version": "4.54.5",
4
4
  "description": "Truedat Web Custom",
5
5
  "sideEffects": false,
6
6
  "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
34
34
  "@testing-library/jest-dom": "^5.16.4",
35
35
  "@testing-library/react": "^12.0.0",
36
36
  "@testing-library/user-event": "^13.2.1",
37
- "@truedat/test": "4.54.0",
37
+ "@truedat/test": "4.54.5",
38
38
  "babel-jest": "^28.1.0",
39
39
  "babel-plugin-dynamic-import-node": "^2.3.3",
40
40
  "babel-plugin-lodash": "^3.3.4",
@@ -87,9 +87,9 @@
87
87
  ]
88
88
  },
89
89
  "dependencies": {
90
- "@truedat/auth": "4.54.2",
91
- "@truedat/core": "4.54.2",
92
- "@truedat/df": "4.54.2",
90
+ "@truedat/auth": "4.54.5",
91
+ "@truedat/core": "4.54.5",
92
+ "@truedat/df": "4.54.5",
93
93
  "lodash": "^4.17.21",
94
94
  "path-to-regexp": "^1.7.0",
95
95
  "prop-types": "^15.8.1",
@@ -98,7 +98,6 @@
98
98
  "react-moment": "^1.1.2",
99
99
  "react-redux": "^7.2.4",
100
100
  "react-router-dom": "^5.2.0",
101
- "react-vis": "^1.11.7",
102
101
  "redux": "^4.1.1",
103
102
  "redux-saga": "^1.1.3",
104
103
  "redux-saga-routines": "^3.2.3",
@@ -110,5 +109,5 @@
110
109
  "react-dom": ">= 16.8.6 < 17",
111
110
  "semantic-ui-react": ">= 0.88.2 < 2.1"
112
111
  },
113
- "gitHead": "5f8e708ced0c68fbe8a38373f3cc579702f3e7e4"
112
+ "gitHead": "4238196902808489e5fbd4d572b480b1702975be"
114
113
  }
@@ -2,7 +2,7 @@ import _ from "lodash/fp";
2
2
  import React, { useState } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import { connect } from "react-redux";
5
- import { Button, Icon, Grid } from "semantic-ui-react";
5
+ import { Button, Icon, Grid, Segment } from "semantic-ui-react";
6
6
  import { FormattedMessage } from "react-intl";
7
7
  import ProfilingGraph from "./ProfilingGraph";
8
8
  import ProfilingPatterns from "./ProfilingPatterns";
@@ -50,17 +50,9 @@ export const ProfilingElements = ({ profile }) => {
50
50
  )}
51
51
 
52
52
  {!_.isEmpty(most_frequent) && _.isEmpty(patterns) && (
53
- <>
54
- <Grid>
55
- <Grid.Column width={16}>
56
- <p>
57
- <FormattedMessage id="structure.field.graph.title" />:
58
- </p>
59
- </Grid.Column>
60
- </Grid>
61
-
53
+ <Segment attached="bottom">
62
54
  <ProfilingGraph />
63
- </>
55
+ </Segment>
64
56
  )}
65
57
 
66
58
  {_.isEmpty(most_frequent) && !_.isEmpty(patterns) && (
@@ -1,81 +1,61 @@
1
1
  import _ from "lodash/fp";
2
- import React, { useState } from "react";
2
+ import React from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import { connect } from "react-redux";
5
- import { Label } from "semantic-ui-react";
6
- import { FormattedMessage } from "react-intl";
7
- import { XYPlot, XAxis, YAxis, HorizontalBarSeries, Hint } from "react-vis";
5
+ import { Progress, Table } from "semantic-ui-react";
6
+ import { FormattedMessage, FormattedNumber } from "react-intl";
8
7
 
9
8
  const getDistribution = _.flow(
10
9
  _.pathOr("[]", "most_frequent"),
11
10
  _.map(({ k, v }) => ({ x: v, y: k })),
12
11
  _.orderBy("x", "desc"),
13
- _.take(30),
14
- _.reverse
12
+ _.take(30)
15
13
  );
16
14
 
17
- const getMinMax = _.flow(
18
- _.map("x"),
19
- (d) => [_.min(d) - 1, _.max(d)],
20
- _.defaultTo([-Infinity, Infinity])
15
+ export const ProfilingGraph = ({ count, distribution }) => (
16
+ <Table
17
+ basic="very"
18
+ className="distribution"
19
+ compact={distribution.length > 10}
20
+ >
21
+ <Table.Header>
22
+ <Table.Row>
23
+ <Table.HeaderCell textAlign="right">
24
+ <FormattedMessage id="profile.frequencyChart.value" />
25
+ </Table.HeaderCell>
26
+ <Table.HeaderCell textAlign="right">
27
+ <FormattedMessage id="profile.frequencyChart.count" />
28
+ </Table.HeaderCell>
29
+ <Table.HeaderCell textAlign="right">
30
+ <FormattedMessage id="profile.frequencyChart.percent" />
31
+ </Table.HeaderCell>
32
+ <Table.HeaderCell />
33
+ </Table.Row>
34
+ </Table.Header>
35
+ <Table.Body>
36
+ {distribution.map(({ x, y }, i) => (
37
+ <Table.Row key={i}>
38
+ <Table.Cell content={y} textAlign="right" collapsing />
39
+ <Table.Cell textAlign="right" collapsing>
40
+ <FormattedNumber value={x} />
41
+ </Table.Cell>
42
+ <Table.Cell textAlign="right" collapsing>
43
+ <FormattedNumber
44
+ value={x / count}
45
+ style="percent"
46
+ minimumFractionDigits={1}
47
+ maximumFractionDigits={1}
48
+ />
49
+ </Table.Cell>
50
+ <Table.Cell>
51
+ <Progress percent={(100 * x) / count} />
52
+ </Table.Cell>
53
+ </Table.Row>
54
+ ))}
55
+ </Table.Body>
56
+ </Table>
21
57
  );
22
58
 
23
- const formatNumber = (num) =>
24
- num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
25
-
26
- export const ProfilingGraph = ({ count, distribution }) => {
27
- const [hintValue, setHintValue] = useState(null);
28
- const data = _.map((d) => ({ color: d.y == hintValue?.y ? 0 : 1, ...d }))(
29
- distribution
30
- );
31
- return (
32
- <XYPlot
33
- yType="ordinal"
34
- xType="linear"
35
- width={800}
36
- height={400}
37
- margin={{ left: 180 }}
38
- xDomain={getMinMax(data)}
39
- colorRange={["#ed5c17", "#002057"]}
40
- >
41
- <YAxis
42
- tickFormat={_.truncate({ length: 30 })}
43
- style={{ fontSize: "12px", width: "100px" }}
44
- />
45
- <XAxis style={{ fontSize: "12px" }} />
46
- <HorizontalBarSeries
47
- onValueMouseOver={setHintValue}
48
- onValueMouseOut={() => setHintValue(null)}
49
- data={data}
50
- />
51
- {hintValue ? (
52
- <Hint
53
- style={{ width: "500px", bottom: "190px" }}
54
- align={{ horizontal: "right", vertical: "top" }}
55
- value={hintValue}
56
- >
57
- <Label pointing="left" className="graph">
58
- <div>
59
- <div>
60
- <FormattedMessage id="structure.field.graph.value" />
61
- {hintValue.y}
62
- </div>
63
- <div>
64
- <FormattedMessage id="structure.field.graph.count" />
65
- {formatNumber(hintValue.x)}
66
- </div>
67
- <div>
68
- <FormattedMessage id="structure.field.graph.percentage" />
69
- {Math.floor((hintValue.x / count) * 100) + "%"}
70
- </div>
71
- </div>
72
- </Label>
73
- </Hint>
74
- ) : null}
75
- </XYPlot>
76
- );
77
- };
78
-
79
59
  ProfilingGraph.propTypes = {
80
60
  count: PropTypes.number,
81
61
  distribution: PropTypes.arrayOf(PropTypes.object),
@@ -154,291 +154,106 @@ exports[`<StructureProfiling /> matches the latest snapshot (fields) 1`] = `
154
154
  exports[`<StructureProfiling /> matches the latest snapshot (profile) 1`] = `
155
155
  <div>
156
156
  <div
157
- class="ui grid"
157
+ class="ui bottom attached segment"
158
158
  >
159
- <div
160
- class="sixteen wide column"
159
+ <table
160
+ class="ui very basic table distribution"
161
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)"
162
+ <thead
163
+ class=""
181
164
  >
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)"
165
+ <tr
166
+ class=""
193
167
  >
194
- <g
195
- class="rv-xy-plot__axis__tick"
196
- style="font-size: 12px; width: 100px;"
197
- transform="translate(0, 262.5)"
168
+ <th
169
+ class="right aligned"
198
170
  >
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)"
171
+ Value
172
+ </th>
173
+ <th
174
+ class="right aligned"
221
175
  >
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)"
176
+ Count
177
+ </th>
178
+ <th
179
+ class="right aligned"
180
+ >
181
+ %
182
+ </th>
183
+ <th
184
+ class=""
185
+ />
186
+ </tr>
187
+ </thead>
188
+ <tbody
189
+ class=""
246
190
  >
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)"
191
+ <tr
192
+ class=""
258
193
  >
259
- <g
260
- class="rv-xy-plot__axis__tick"
261
- style="font-size: 12px;"
262
- transform="translate(18.484848484848484, 0)"
194
+ <td
195
+ class="collapsing right aligned"
263
196
  >
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)"
197
+ bar
198
+ </td>
199
+ <td
200
+ class="collapsing right aligned"
286
201
  >
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)"
202
+ 42
203
+ </td>
204
+ <td
205
+ class="collapsing right aligned"
309
206
  >
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)"
207
+ 420.0%
208
+ </td>
209
+ <td
210
+ class=""
332
211
  >
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)"
212
+ <div
213
+ class="ui progress"
214
+ data-percent="100"
347
215
  >
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)"
216
+ <div
217
+ class="bar"
218
+ style="width: 100%;"
219
+ />
220
+ </div>
221
+ </td>
222
+ </tr>
223
+ <tr
224
+ class=""
225
+ >
226
+ <td
227
+ class="collapsing right aligned"
355
228
  >
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)"
229
+ foo
230
+ </td>
231
+ <td
232
+ class="collapsing right aligned"
378
233
  >
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)"
234
+ 10
235
+ </td>
236
+ <td
237
+ class="collapsing right aligned"
401
238
  >
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)"
239
+ 100.0%
240
+ </td>
241
+ <td
242
+ class=""
243
+ >
244
+ <div
245
+ class="ui progress"
246
+ data-percent="100"
416
247
  >
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>
248
+ <div
249
+ class="bar"
250
+ style="width: 100%;"
251
+ />
252
+ </div>
253
+ </td>
254
+ </tr>
255
+ </tbody>
256
+ </table>
442
257
  </div>
443
258
  </div>
444
259
  `;