@genesislcap/pbc-reporting-ui 1.0.4 → 1.0.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/README.md +83 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,47 +1,101 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: 'Foundation Reporting'
|
|
3
|
+
sidebar_label: 'Foundation Reporting'
|
|
4
|
+
sidebar_position: 3
|
|
5
|
+
id: foundation-reporting
|
|
6
|
+
keywords: [web, frontend, ui, micro-front-ends, reporting]
|
|
7
|
+
tags:
|
|
8
|
+
- web
|
|
9
|
+
- frontend
|
|
10
|
+
- ui
|
|
11
|
+
- micro-front-ends
|
|
12
|
+
- reporting
|
|
13
|
+
---
|
|
2
14
|
|
|
3
|
-
|
|
15
|
+
# Reporting Micro front-end
|
|
4
16
|
|
|
5
|
-
|
|
6
|
-
Our state-of-the-art design system and component set is built on top of
|
|
7
|
-
[Microsoft FAST](https://www.fast.design/docs/introduction/).
|
|
17
|
+
The Reporting micro front-end enables your users to create report specifications, run them, or save them for later use.
|
|
8
18
|
|
|
9
|
-
|
|
19
|
+
From the GUI, users can:
|
|
10
20
|
|
|
11
|
-
|
|
21
|
+
- select columns from existing data sources
|
|
22
|
+
- save the report with a name and retrieve it for future use
|
|
23
|
+
- apply ad hoc filtering to a report
|
|
24
|
+
- export the report results to .csv format
|
|
12
25
|
|
|
13
|
-
|
|
14
|
-
npm run bootstrap
|
|
15
|
-
```
|
|
26
|
+
The micro front-end has a GUI that walks the user through generating a report.
|
|
16
27
|
|
|
17
|
-
|
|
28
|
+
|
|
18
29
|
|
|
19
|
-
|
|
20
|
-
npm run dev
|
|
21
|
-
```
|
|
30
|
+
Once the report is created it can be viewed in the GUI, and also exported to a `.csv` file.
|
|
22
31
|
|
|
23
|
-
|
|
32
|
+
|
|
24
33
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```
|
|
34
|
+
All the generated reports are stored for retrieval later. The report configuration is saved and the report updated when the user runs the report again.
|
|
35
|
+
|
|
28
36
|
|
|
29
|
-
|
|
37
|
+
## Set-up
|
|
30
38
|
|
|
31
|
-
|
|
32
|
-
npm run serve
|
|
33
|
-
```
|
|
39
|
+
### Front-end configuration
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
To enable this micro front-end in your application, follow the steps below.
|
|
36
42
|
|
|
37
|
-
|
|
43
|
+
1. Add `@genesislcap/foundation-reporting` as a dependency in your **package.json** file. Whenever you change the dependencies of your project, run the `$ npm run bootstrap` command again. There is more information on this in the [package.json basics](../../../web/basics/package-json-basics/) page.
|
|
38
44
|
|
|
39
|
-
```
|
|
40
|
-
|
|
45
|
+
```javascript
|
|
46
|
+
{
|
|
47
|
+
...
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@genesislcap/foundation-reporting": "latest"
|
|
50
|
+
},
|
|
51
|
+
...
|
|
52
|
+
}
|
|
41
53
|
```
|
|
42
54
|
|
|
43
|
-
|
|
55
|
+
2. Import the module and configure the route in your routes **config.ts** file.
|
|
44
56
|
|
|
45
|
-
|
|
46
|
-
|
|
57
|
+
**Synchronous example**
|
|
58
|
+
|
|
59
|
+
```javascript {9}
|
|
60
|
+
// Import
|
|
61
|
+
import {Reporting} from '@genesislcap/foundation-reporting';
|
|
62
|
+
|
|
63
|
+
// Routes configure
|
|
64
|
+
public configure() {
|
|
65
|
+
...
|
|
66
|
+
this.routes.map(
|
|
67
|
+
...
|
|
68
|
+
{path: 'reporting', element: Reporting, title: 'Reporting', name: 'reporting'},
|
|
69
|
+
...
|
|
70
|
+
);
|
|
71
|
+
}
|
|
47
72
|
```
|
|
73
|
+
|
|
74
|
+
**Asynchronous example**
|
|
75
|
+
|
|
76
|
+
```javascript {9}
|
|
77
|
+
// Import
|
|
78
|
+
import {Reporting} from '@genesislcap/foundation-reporting';
|
|
79
|
+
|
|
80
|
+
// Routes async configure
|
|
81
|
+
public async configure() {
|
|
82
|
+
...
|
|
83
|
+
this.routes.map(
|
|
84
|
+
...
|
|
85
|
+
{path: 'reporting', element: (await import('@genesislcap/foundation-reporting')).Reporting, title: 'Reporting', name: 'reporting'},
|
|
86
|
+
...
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
:::info
|
|
92
|
+
If there are no reports in the database, you will see an error on the web page saying there are no reports to load - this is expected behaviour.
|
|
93
|
+
:::
|
|
94
|
+
|
|
95
|
+
## License
|
|
96
|
+
|
|
97
|
+
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
|
|
98
|
+
|
|
99
|
+
### Licensed components
|
|
100
|
+
Genesis low-code platform
|
|
101
|
+
|
package/package.json
CHANGED