@genesislcap/pbc-reporting-ui 1.0.3 → 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.
Files changed (5) hide show
  1. package/README.md +83 -29
  2. package/docs/img/foundation-reporting_create-report.png +0 -0
  3. package/docs/img/foundation-reporting_show-reports.png +0 -0
  4. package/docs/img/foundation-reporting_view-report.png +0 -0
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,47 +1,101 @@
1
- # Web Client
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
- ## Frontend stack
15
+ # Reporting Micro front-end
4
16
 
5
- Genesis components are standards-based Web Components, making them compatible with almost any modern web framework.
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
- # Development
19
+ From the GUI, users can:
10
20
 
11
- 1. Install dependencies:
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
- ```shell
14
- npm run bootstrap
15
- ```
26
+ The micro front-end has a GUI that walks the user through generating a report.
16
27
 
17
- 2. Start Web development server in watch mode:
28
+ ![Example showing creating a new report](./docs/img/foundation-reporting_create-report.png)
18
29
 
19
- ```shell
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
- 3. Build for production:
32
+ ![Example showing the list of all generated reports](./docs/img/foundation-reporting_view-report.png)
24
33
 
25
- ```shell
26
- npm run build
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
+ ![Example showing the list of all generated reports](./docs/img/foundation-reporting_show-reports.png)
28
36
 
29
- Preview production build:
37
+ ## Set-up
30
38
 
31
- ```shell
32
- npm run serve
33
- ```
39
+ ### Front-end configuration
34
40
 
35
- ## Clean
41
+ To enable this micro front-end in your application, follow the steps below.
36
42
 
37
- Remove distribution and node_modules directories:
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
- ```shell
40
- npm run clean
45
+ ```javascript
46
+ {
47
+ ...
48
+ "dependencies": {
49
+ "@genesislcap/foundation-reporting": "latest"
50
+ },
51
+ ...
52
+ }
41
53
  ```
42
54
 
43
- Baseline task combines `clean` and `bootstrap` tasks into a single command:
55
+ 2. Import the module and configure the route in your routes **config.ts** file.
44
56
 
45
- ```shell
46
- npm run baseline
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
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/pbc-reporting-ui",
3
3
  "description": "Genesis PBC Reporting UI",
4
- "version": "1.0.3",
4
+ "version": "1.0.5",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-reporting.d.ts",