Flexmonster Pivot Table & Charts integration with Angular

Website: www.flexmonster.com

Flexmonster Pivot Table & Charts

Flexmonster Pivot is a powerful JavaScript tool for interactive web reporting. It allows you to visualize and analyze data from JSON, CSV, SQL, NoSQL, Elasticsearch, and OLAP data sources quickly and conveniently. Flexmonster is designed to integrate seamlessly with any client-side framework and can be easily embedded into your application.

This repository contains a sample Angular project for Flexmonster Pivot Table & Charts.

Note: This version of the project uses the ngx-flexmonster wrapper, which is Ivy-compatible. Switch to the ng-flexmonster branch for the project with the legacy ng-flexmonster wrapper.

Table of contents:

• Prerequisites
• Installation
• Related Flexmonster docs

Prerequisites

• Node.js 16 or later

Installation

1. Download a .zip archive with the sample project or clone it from GitHub with the following command:

git clone https://github.com/flexmonster/pivot-angular.git && cd pivot-angular

2. Install the npm dependencies described in package.json:

npm install

3. Run the sample project:

ng serve

To see the result, open http://localhost:4200/ in your browser.

Related Flexmonster docs

• Integration with Angular — learn how to integrate Flexmonster into an Angular project.
• Usage examples in Angular — see details on Flexmonster usage.

DEV Anleitung

Deployment auf Github Pages

• Anleitungen: Siehe Github Doku und Anleitung für Angular
  • Der Ordner in dem Repository für die Pages muss wirklich docs heissen (oder es muss in den Root-Ordner).
  • Achtung: Das dauert jeweils noch einen Moment (siehe Pipeline unter Github-Actions)
• Offenbar gibt es mehr Problem mit der CSP, als das auf dem Dev-Server der Fall war.
• Beachte: Ich kopiere jetzt jeweils einfach den Inhalt vom dist Ordner rüber und lösche die alten Files. Dabei muss ich folgendes beachten
  • Die folgenden Files stehen lassen: server.py, fullCSP.html und reducedCSP.html
    • Das server.py ist im Parent-Ordner, ist also kein Problem.
  • Im index.html die Änderungen nicht einfach reverten: Brauche auf der zweituntersten Zeile die neuen Namen der Files im <script> Tag. Eventuell auch noch die Anpassung der CSS-Styles ein paar Zeilen weiter oben.
  • Passe diesen <script> Tag auch analog im fullCSP.html und reducedCSP.html an: einfach rüberkopieren.

Lokales Servieren der gebauten Seite

• Serviere das kurz lokal, um zu testen, ob alles funktioniert.
• Gehe einfach mit der Command-Line in den Ordner, wo das index.html liegt
• Führe python -m http.server 8080 aus.

Deployment

• Einfach im fgubler-ergon.github.io Repository auf den main Branch pushen.

Trouble Shooting

Prod-Build Optimierungen

• Durch den PROD-Build werden einige Optimierungen gemacht, die vielleicht Probleme mit der CSP machen können. Da muss ich halt etwas experimentieren.
  • Kann auch ng serve --prod machen, um das zu debuggen.

Mehrfache Auslieferung mit fullCSP.html und reducedCSP.html

• Liefere jetzt neben index.html auch noch ein fullCSP.html und reducedCSP.htmlaus, um zu zeigen was mit der vollen und einer noch stärker reduzierten CSP passiert.
• Achtung: Das fullCSP.html und reducedCSP.html ist nicht im Build drinn => das liegt im Github-Pages Repository schon drinn, darf aber beim Rüberkopieren nicht gelöscht werden.
  • Die JS Files heissen ja nach jedem Build anders. Muss somit den unteren Teil vom index.html jeweils noch kurz rüberkopieren. Ist der <script> Tag auf der zweituntersten Zeile.