@genesislcap/pbc-reporting-ui 1.0.4 → 1.0.6

package/README.md

@@ -1,47 +1,87 @@
-# Web Client
+# Reporting Micro front-end
 
-## Frontend stack
+The Reporting micro front-end enables your users to create report specifications, run them, or save them for later use.
 
-Genesis components are standards-based Web Components, making them compatible with almost any modern web framework.
-Our state-of-the-art design system and component set is built on top of
-[Microsoft FAST](https://www.fast.design/docs/introduction/).
+From the GUI, users can:
 
-# Development
+- select columns from existing data sources
+- save the report with a name and retrieve it for future use
+- apply ad hoc filtering to a report
+- export the report results to .csv  format
 
-1. Install dependencies:
+The micro front-end has a GUI that walks the user through generating a report.
 
-```shell
-npm run bootstrap
-```
+![Example showing creating a new report](./docs/img/foundation-reporting_create-report.png)
 
-2. Start Web development server in watch mode:
+Once the report is created it can be viewed in the GUI, and also exported to a `.csv` file.
 
-```shell
-npm run dev
-```
+![Example showing the list of all generated reports](./docs/img/foundation-reporting_view-report.png)
 
-3. Build for production:
+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.
+![Example showing the list of all generated reports](./docs/img/foundation-reporting_show-reports.png)
 
-```shell
-npm run build
-```
+## Set-up
 
-Preview production build:
+### Front-end configuration
 
-```shell
-npm run serve
+To enable this micro front-end in your application, follow the steps below.
+
+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.
+
+```javascript
+{
+  ...
+  "dependencies": {
+    "@genesislcap/foundation-reporting": "latest"
+  },
+  ...
+}
 ```
 
-## Clean
+2. Import the module and configure the route in your routes **config.ts** file.
 
-Remove distribution and node_modules directories:
+**Synchronous example**
 
-```shell
-npm run clean
-```
+```javascript {9}
+// Import
+import {Reporting} from '@genesislcap/foundation-reporting';
 
-Baseline task combines `clean` and `bootstrap` tasks into a single command:
+// Routes configure
+public configure() {
+  ...
+  this.routes.map(
+    ...
+    {path: 'reporting', element: Reporting, title: 'Reporting', name: 'reporting'},
+    ...
+  );
+}
+```
 
-```shell
-npm run baseline
+**Asynchronous example**
+
+```javascript {9}
+// Import
+import {Reporting} from '@genesislcap/foundation-reporting';
+
+// Routes async configure
+public async configure() {
+  ...
+  this.routes.map(
+    ...
+    {path: 'reporting', element: (await import('@genesislcap/foundation-reporting')).Reporting, title: 'Reporting', name: 'reporting'},
+    ...
+  );
+}
 ```
+
+:::info
+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.
+:::
+
+## License
+
+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.
+
+### Licensed components
+Genesis low-code platform
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-reporting-ui",
   "description": "Genesis PBC Reporting UI",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-reporting.d.ts",