Интеграция с Angular
Предполагается знакомство с основными концепциями и паттернами Angular. Для повторения см. документацию Angular.
DHTMLX Pivot интегрируется с Angular как обычный компонент. Для полного рабочего примера см. демо Angular Pivot на GitHub.
Создание проекта
Перед началом установите Angular CLI и Node.js.
Следующая команда создаёт новый Angular-проект с именем my-angular-pivot-app:
ng new my-angular-pivot-app
При запросе Angular CLI отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering) — данное руководство предполагает клиентский рендеринг.
Команда установит все необходимые инструменты. Дополнительные команды не требуются.
Установка зависимостей
Перейдите в директорию нового проекта:
cd my-angular-pivot-app
Установите зависимости и запустите сервер разработки с помощью менеджера пакетов yarn:
yarn
yarn start # или: yarn dev
Приложение должно запуститься на локальном порту (например, http://localhost:3000).
Создание Pivot
Добавьте пакет Pivot в проект, затем оберните Pivot в Angular-компонент.
Шаг 1. Установка пакета
Загрузите ознакомительный пакет Pivot и следуйте инструкциям в README. Ознакомительный пакет Pivot действителен в течение 30 дней.
Шаг 2. Создание компонента
Создайте Angular-компонент, который монтирует Pivot. Добавьте папку pivot в src/app/ и создайте файл src/app/pivot/pivot.component.ts. Затем выполните следующие шаги:
Импорт исходных файлов
Откройте src/app/pivot/pivot.component.ts и импортируйте пакет Pivot. Путь импорта зависит от редакции пакета:
- PRO-версия (установлена из локальной папки):
import { Pivot } from 'dhx-pivot-package';
- Ознакомительная версия:
import { Pivot } from '@dhx/trial-pivot';
В этом руководстве используется ознакомительная версия Pivot.
Настройка контейнера и монтирование Pivot
Чтобы отобразить Pivot на странице, определите элемент-контейнер в шаблоне компонента, затем инициализируйте Pivot в хуке ngOnInit с помощью конструктора. Уничтожьте Pivot в хуке ngOnDestroy.
Следующий фрагмент кода определяет минимальный Angular-компонент Pivot:
import { Pivot } from '@dhx/trial-pivot';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "pivot", // имя шаблона, используемое в файле "app.component.ts" как <pivot />
styleUrls: ["./pivot.component.css"], // подключение CSS-файла
template: `<div #container className="widget"></div>`,
})
export class PivotComponent implements OnInit, OnDestroy {
// ссылка на контейнер для Pivot
@ViewChild('container', { static: true }) pivot_container!: ElementRef;
private _table!: Pivot;
ngOnInit() {
// инициализация компонента Pivot
this._table = new Pivot(this.pivot_container.nativeElement, {});
}
ngOnDestroy(): void {
this._table.destructor(); // уничтожение Pivot при размонтировании
}
}
Добавление стилей
Чтобы Pivot отображался корректно, создайте файл src/app/pivot/pivot.component.css со стилями для страницы и контейнера Pivot:
/* импорт стилей Pivot */
@import "@dhx/trial-pivot/dist/pivot.css";
/* стили для начальной страницы */
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
/* стили для контейнера Pivot */
.widget {
width: 100%;
height: 100%;
}
Загрузка данных
Чтобы передать данные в Pivot, подготовьте набор данных. Создайте файл src/app/pivot/data.ts и экспортируйте данные и метаданные полей:
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"
}, // другие элементы данных
];
const fields: any = [
{
"id": "cogs",
"label": "Cogs",
"type": "number"
},
{
"id": "date",
"label": "Date",
"type": "date"
}, // другие поля
];
return { dataset, fields };
};
Откройте src/app/pivot/pivot.component.ts, импортируйте getData и примените набор данных в ngOnInit():
import { Pivot } from '@dhx/trial-pivot';
import { getData } from "./data"; // импорт данных
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(); // извлечение данных и метаданных полей
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"
}, // другие значения
]
},
// другие свойства конфигурации
});
}
ngOnDestroy(): void {
this._table.destructor();
}
}
Компонент готов к использованию. При монтировании Pivot отрисовывается с переданными данными. Полный список свойств конфигурации см. в документации API Pivot.
Обработка событий
Действия пользователя в Pivot генерируют события, на которые можно подписаться. Полный список событий см. в обзоре событий.
Следующий фрагмент кода расширяет ngOnInit слушателем события open-filter, который выводит в консоль идентификатор поля при открытии фильтра пользователем:
// ...
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"
}, // другие значения
]
}
});
this._table.api.on("open-filter", (ev) => {
console.log("The field id for which the filter is activated:", ev.id);
});
}
ngOnDestroy(): void {
this._table.destructor();
}
Шаг 3. Добавление Pivot в приложение
Чтобы встроить PivotComponent в приложение, откройте src/app/app.component.ts и замените код по умолчанию следующим:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<pivot/>` // шаблон, созданный в файле "pivot.component.ts"
})
export class AppComponent {
name = "";
}
Затем создайте фай л src/app/app.module.ts и зарегистрируйте 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 {}
Наконец, откройте src/main.ts и замените его содержимое следующим кодом начальной загрузки:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
Запустите приложение, чтобы увидеть отрисовку данных в Pivot на странице.
Pivot теперь интегрирован с Angular. Настройте конфигурацию в соответствии с требованиями проекта. Итоговый пример см. в angular-pivot-demo на GitHub.