Integration mit Svelte
Grundkenntnisse der Konzepte und Muster von Svelte werden vorausgesetzt. Zur Auffrischung lesen Sie die Svelte-Dokumentation.
DHTMLX Pivot lässt sich als reguläre Komponente in Svelte integrieren. Ein vollständiges, funktionsfähiges Setup finden Sie in der Svelte Pivot-Demo auf GitHub.
Projekt erstellen
Der folgende Befehl führt das Vite-Projektgerüst-Tool aus und ermöglicht die Auswahl einer Svelte-Vorlage:
npm create vite@latest
Benennen Sie das Projekt my-svelte-pivot-app.
Abhängigkeiten installieren
Wechseln Sie in das neu erstellte Projektverzeichnis:
cd my-svelte-pivot-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit Ihrem Paketmanager:
- mit yarn:
yarn
yarn start # oder: yarn dev
- mit npm:
npm install
npm run dev
Die App sollte auf einem lokalen Port laufen (zum Beispiel http://localhost:3000).
Pivot erstellen
Fügen Sie das Pivot-Paket zum Projekt hinzu und binden Sie Pivot anschließend in eine Svelte-Komponente ein.
Schritt 1. Paket installieren
Laden Sie das Test-Pivot-Paket herunter und folgen Sie den Schritten in der README-Datei. Das Test-Pivot-Paket ist 30 Tage gültig.
Schritt 2. Komponente erstellen
Erstellen Sie eine Svelte-Komponente, die Pivot einbindet. Fügen Sie eine neue Datei src/Pivot.svelte hinzu.
Quelldateien importieren
Öffnen Sie src/Pivot.svelte und importieren Sie die Pivot-Quelldateien. Die Import-Pfade hängen von der Paketversion ab:
- PRO-Version (aus einem lokalen Ordner installiert):
<script>
import { Pivot } from 'dhx-pivot-package';
import 'dhx-pivot-package/dist/pivot.css';
</script>
Wenn das Paket minimierte Assets enthält, importieren Sie pivot.min.css anstelle von pivot.css.
- Testversion:
<script>
import { Pivot } from '@dhx/trial-pivot';
import '@dhx/trial-pivot/dist/pivot.css';
</script>
Dieses Tutorial verwendet die Testversion von Pivot.
Container einrichten und Pivot einbinden
Um Pivot auf der Seite anzuzeigen, fügen Sie ein Container-div hinzu und initialisieren Sie Pivot dann im onMount-Lifecycle-Hook mithilfe des Konstruktors. Zerstören Sie Pivot im onDestroy-Hook.
Der folgende Code-Ausschnitt definiert eine minimale Pivot-Svelte-Komponente:
<script>
import { onMount, onDestroy } from "svelte";
import { Pivot } from "@dhx/trial-pivot";
import "@dhx/trial-pivot/dist/pivot.css";
let container; // Container-Referenz für Pivot
let table;
onMount(() => {
// Pivot-Komponente initialisieren
table = new Pivot(container, {});
});
onDestroy(() => {
table.destructor(); // Pivot beim Unmount zerstören
});
</script>
<div bind:this={container} class="widget"></div>
Styles hinzufügen
Damit Pivot korrekt gerendert wird, fügen Sie die folgenden Styles zur CSS-Hauptdatei des Projekts hinzu:
/* Styles für die Startseite */
html,
body,
#app { /* #app-Root-Container verwenden */
height: 100%;
padding: 0;
margin: 0;
}
/* Styles für den Pivot-Container */
.widget {
height: 100%;
width: 100%;
}
Daten laden
Um Pivot mit Daten zu versorgen, bereiten Sie einen Datensatz vor. Erstellen Sie src/data.js und exportieren Sie die Daten und 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 = [
{
"id": "cogs",
"label": "Cogs",
"type": "number"
},
{
"id": "date",
"label": "Date",
"type": "date"
}, // weitere Felder
];
return { dataset, fields };
};
Öffnen Sie src/App.svelte, importieren Sie die Daten und übergeben Sie sie als Props an die neue <Pivot/>-Komponente:
<script>
import Pivot from "./Pivot.svelte";
import { getData } from "./data.js";
const { fields, dataset } = getData();
</script>
<Pivot fields={fields} dataset={dataset} />
Öffnen Sie src/Pivot.svelte, deklarieren Sie die eingehenden Props mit export let und wenden Sie sie auf das Pivot-Konfigurationsobjekt an:
<script>
import { onMount, onDestroy } from "svelte";
import { Pivot } from "@dhx/trial-pivot";
import "@dhx/trial-pivot/dist/pivot.css";
export let fields;
export let dataset;
let container;
let table;
onMount(() => {
table = new Pivot(container, {
fields,
data: dataset,
config: {
rows: ["state", "product_type"],
columns: ["product_line", "type"],
values: [
{
field: "profit",
method: "sum"
}, // weitere Werte
]
},
// weitere Konfigurationseigenschaften
});
});
onDestroy(() => {
table.destructor();
});
</script>
<div bind:this={container} class="widget"></div>
Die Komponente ist nun einsatzbereit. Beim Einbinden rendert Pivot mit den ü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 Übersicht der Events.
Der folgende Code-Ausschnitt erweitert onMount um einen open-filter-Event-Listener, der die Feld-ID protokolliert, wenn ein Benutzer einen Filter öffnet:
<script>
// ...
let table;
onMount(() => {
table = new Pivot(container, {
fields,
data: dataset,
config: {
rows: ["state", "product_type"],
columns: ["product_line", "type"],
values: [
{
field: "profit",
method: "sum"
}, // weitere Werte
]
},
// weitere Konfigurationseigenschaften
});
table.api.on("open-filter", (ev) => {
console.log("Die Feld-ID, für die der Filter aktiviert wurde:", ev.id);
});
});
onDestroy(() => {
table.destructor();
});
</script>
// ...
Starten Sie die App, um zu sehen, wie Pivot die Daten auf der Seite rendert.
Pivot ist nun in Svelte integriert. Passen Sie die Konfiguration an die Anforderungen Ihres Projekts an. Das vollständige Beispiel finden Sie in der svelte-pivot-demo auf GitHub.