Integration mit Angular
Grundkenntnisse der Konzepte und Muster von Angular werden vorausgesetzt. Zur Auffrischung lesen Sie die Angular-Dokumentation.
DHTMLX Pivot lässt sich wie eine reguläre Komponente in Angular einbinden. Ein vollständiges, lauffähiges Beispiel finden Sie in der Angular Pivot Demo auf GitHub.
Projekt erstellen
Installieren Sie Angular CLI und Node.js, bevor Sie beginnen.
Der folgende Befehl erstellt ein neues Angular-Projekt mit dem Namen my-angular-pivot-app:
ng new my-angular-pivot-app
Deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering), wenn die Angular CLI danach fragt — dieser Guide setzt eine client-seitig gerenderte App voraus.
Der Befehl installiert alle erforderlichen Werkzeuge. Weitere Befehle sind nicht notwendig.
Abhängigkeiten installieren
Wechseln Sie in das neue Projektverzeichnis:
cd my-angular-pivot-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem Paketmanager yarn:
yarn
yarn start # oder: yarn dev
Die App sollte auf einem lokalen Port erreichbar sein (zum Beispiel http://localhost:3000).
Pivot erstellen
Fügen Sie das Pivot-Paket zum Projekt hinzu und binden Sie Pivot anschließend in eine Angular-Komponente ein.
Schritt 1. Paket installieren
Laden Sie das Pivot-Testpaket herunter und folgen Sie den Anweisungen in der README-Datei. Das Testpaket ist 30 Tage gültig.
Schritt 2. Komponente erstellen
Erstellen Sie eine Angular-Komponente, die Pivot einbindet. Legen Sie einen Ordner pivot unter src/app/ an und erstellen Sie die Datei src/app/pivot/pivot.component.ts. Folgen Sie dann diesen Schritten:
Quelldateien importieren
Öffnen Sie src/app/pivot/pivot.component.ts und importieren Sie das Pivot-Paket. Der Import-Pfad hängt von der Paketedition ab:
- PRO-Version (aus einem lokalen Ordner installiert):
import { Pivot } from 'dhx-pivot-package';
- Testversion:
import { Pivot } from '@dhx/trial-pivot';
Dieses Tutorial verwendet die Testversion von Pivot.
Container einrichten und Pivot einbinden
Um Pivot auf der Seite anzuzeigen, definieren Sie ein Container-Element im Component-Template und initialisieren Sie Pivot im ngOnInit-Hook über den Konstruktor. Zerstören Sie Pivot im ngOnDestroy-Hook.
Das folgende Code-Snippet definiert eine minimale Pivot Angular-Komponente:
import { Pivot } from '@dhx/trial-pivot';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "pivot", // Template-Name, der in "app.component.ts" als <pivot /> verwendet wird
styleUrls: ["./pivot.component.css"], // CSS-Datei einbinden
template: `<div #container className="widget"></div>`,
})
export class PivotComponent implements OnInit, OnDestroy {
// Container-Referenz für Pivot
@ViewChild('container', { static: true }) pivot_container!: ElementRef;
private _table!: Pivot;
ngOnInit() {
// Pivot-Komponente initialisieren
this._table = new Pivot(this.pivot_container.nativeElement, {});
}
ngOnDestroy(): void {
this._table.destructor(); // Pivot beim Entfernen zerstören
}
}
Stile hinzufügen
Damit Pivot korrekt gerendert wird, erstellen Sie src/app/pivot/pivot.component.css mit Stilen für die Seite und den Pivot-Container:
/* Pivot-Stile importieren */
@import "@dhx/trial-pivot/dist/pivot.css";
/* Stile für die Startseite */
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
/* Stile für den Pivot-Container */
.widget {
width: 100%;
height: 100%;
}
Daten laden
Um Pivot mit Daten zu versorgen, bereiten Sie einen Datensatz vor. Erstellen Sie src/app/pivot/data.ts und exportieren Sie die Daten sowie die Feld-Metadaten:
export function getData() {
const dataset = [
{
"cogs": 51,
"date": "10/1/2018",
"inventory_margin": 503,
"margin": 71,
"market_size": "Major Market",
"market": "Central",
"marketing": 46,
"product_line": "Leaves",
"product_type": "Herbal Tea",
"product": "Lemon",
"profit": -5,
"sales": 122,
"state": "Colorado",
"expenses": 76,
"type": "Decaf"
},
{
"cogs": 52,
"date": "10/1/2018",
"inventory_margin": 405,
"margin": 71,
"market_size": "Major Market",
"market": "Central",
"marketing": 17,
"product_line": "Leaves",
"product_type": "Herbal Tea",
"product": "Mint",
"profit": 26,
"sales": 123,
"state": "Colorado",
"expenses": 45,
"type": "Decaf"
}, // weitere Datensätze
];
const fields: any = [
{
"id": "cogs",
"label": "Cogs",
"type": "number"
},
{
"id": "date",
"label": "Date",
"type": "date"
}, // weitere Felder
];
return { dataset, fields };
};
Öffnen Sie src/app/pivot/pivot.component.ts, importieren Sie getData und wenden Sie den Datensatz in ngOnInit() an:
import { Pivot } from '@dhx/trial-pivot';
import { getData } from "./data"; // Daten importieren
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "pivot",
styleUrls: ["./pivot.component.css"],
template: `<div #container className="widget"></div>`,
})
export class PivotComponent implements OnInit, OnDestroy {
@ViewChild('container', { static: true }) pivot_container!: ElementRef;
private _table!: Pivot;
ngOnInit() {
const { dataset, fields } = getData(); // Daten und Feld-Metadaten entpacken
this._table = new Pivot(this.pivot_container.nativeElement, {
fields,
data: dataset,
config: {
rows: ["state", "product_type"],
columns: ["product_line", "type"],
values: [
{
field: "profit",
method: "sum"
}, // weitere Werte
]
},
// weitere Konfigurationseigenschaften
});
}
ngOnDestroy(): void {
this._table.destructor();
}
}
Die Komponente ist jetzt einsatzbereit. Beim Einbinden rendert Pivot die übergebenen Daten. Die vollständige Liste der Konfigurationseigenschaften finden Sie in der Pivot API-Dokumentation.
Events behandeln
Benutzeraktionen in Pivot lösen Events aus, die Sie abonnieren können. Die vollständige Liste der Events finden Sie in der Events-Übersicht.
Das folgende Code-Snippet erweitert ngOnInit um einen open-filter-Event-Listener, der die Feld-ID protokolliert, wenn ein Benutzer einen Filter öffnet:
// ...
ngOnInit() {
const { dataset, fields } = getData();
this._table = new Pivot(this.pivot_container.nativeElement, {
fields,
data: dataset,
config: {
rows: ["state", "product_type"],
columns: ["product_line", "type"],
values: [
{
field: "profit",
method: "sum"
}, // weitere Werte
]
}
});
this._table.api.on("open-filter", (ev) => {
console.log("Die Feld-ID, für die der Filter aktiviert wird:", ev.id);
});
}
ngOnDestroy(): void {
this._table.destructor();
}
Schritt 3. Pivot zur App hinzufügen
Um PivotComponent in die App einzubetten, öffnen Sie src/app/app.component.ts und ersetzen Sie den Standardcode durch Folgendes:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<pivot/>` // Template, das in "pivot.component.ts" erstellt wurde
})
export class AppComponent {
name = "";
}
Erstellen Sie dann src/app/app.module.ts und registrieren Sie PivotComponent:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { PivotComponent } from "./pivot/pivot.component";
@NgModule({
declarations: [AppComponent, PivotComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Öffnen Sie abschließend src/main.ts und ersetzen Sie den Inhalt durch folgenden Bootstrap-Code:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
Starten Sie die App, um zu sehen, wie Pivot die Daten auf der Seite rendert.
Pivot ist nun in Angular integriert. Passen Sie die Konfiguration an die Anforderungen Ihres Projekts an. Das vollständige Beispiel finden Sie in der angular-pivot-demo auf GitHub.