Интеграция со Svelte

совет

Предполагается знакомство с основными концепциями и паттернами Svelte. Для повторения см. документацию Svelte.

DHTMLX Pivot интегрируется со Svelte как обычный компонент. Для полного рабочего примера см. демо Svelte Pivot на GitHub.

Создание проекта

информация

Перед началом установите Node.js. Vite — опционально.

Следующая команда запускает инструмент создания проекта Vite и позволяет выбрать шаблон Svelte:

npm create vite@latest

Назовите проект my-svelte-pivot-app.

Установка зависимостей

Перейдите в директорию нового проекта:

cd my-svelte-pivot-app

Установите зависимости и запустите сервер разработки с помощью менеджера пакетов:

• с yarn:

yarn 
yarn start # или: yarn dev

• с npm:

npm install
npm run dev

Приложение должно запуститься на локальном порту (например, http://localhost:3000).

Создание Pivot

Добавьте пакет Pivot в проект, затем оберните Pivot в компонент Svelte.

Шаг 1. Установка пакета

Загрузите ознакомительный пакет Pivot и следуйте инструкциям в README. Ознакомительный пакет Pivot действителен в течение 30 дней.

Шаг 2. Создание компонента

Создайте компонент Svelte, который монтирует Pivot. Добавьте новый файл src/Pivot.svelte.

Импорт исходных файлов

Откройте src/Pivot.svelte и импортируйте исходные файлы Pivot. Пути импорта зависят от редакции пакета:

• PRO-версия (установлена из локальной папки):

Pivot.svelte

<script>
import { Pivot } from 'dhx-pivot-package';
import 'dhx-pivot-package/dist/pivot.css';
</script>

Если пакет поставляется с минифицированными ресурсами, импортируйте pivot.min.css вместо pivot.css.

• Ознакомительная версия:

Pivot.svelte

<script>
import { Pivot } from '@dhx/trial-pivot';
import '@dhx/trial-pivot/dist/pivot.css';
</script>

В этом руководстве используется ознакомительная версия Pivot.

Настройка контейнера и монтирование Pivot

Чтобы отобразить Pivot на странице, добавьте контейнер div, затем инициализируйте Pivot в хуке жизненного цикла onMount с помощью конструктора. Уничтожьте Pivot в хуке onDestroy.

Следующий фрагмент кода определяет минимальный компонент Svelte для Pivot:

Pivot.svelte

<script>
    import { onMount, onDestroy } from "svelte";
    import { Pivot } from "@dhx/trial-pivot";
    import "@dhx/trial-pivot/dist/pivot.css";

    let container; // ссылка на контейнер для Pivot
    let table;

    onMount(() => {
        // инициализация компонента Pivot
        table = new Pivot(container, {});
    });

    onDestroy(() => {
        table.destructor(); // уничтожение Pivot при размонтировании
    });
</script>

<div bind:this={container} class="widget"></div>

Добавление стилей

Чтобы Pivot отображался корректно, добавьте следующие стили в основной CSS-файл проекта:

main.css

/* стили для начальной страницы */
html,
body,
#app { /* используйте корневой контейнер #app */
    height: 100%;
    padding: 0;
    margin: 0;
}

/* стили для контейнера Pivot */
.widget {
    height: 100%;
    width: 100%;
}

Загрузка данных

Чтобы передать данные в Pivot, подготовьте набор данных. Создайте src/data.js и экспортируйте данные и метаданные полей:

data.js

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 = [
        {
            "id": "cogs",
            "label": "Cogs",
            "type": "number"
        },
        {
            "id": "date",
            "label": "Date",
            "type": "date"
        }, // другие поля
    ];

    return { dataset, fields };
};

Откройте src/App.svelte, импортируйте данные и передайте их новому компоненту <Pivot/> как пропсы:

App.svelte

<script>
    import Pivot from "./Pivot.svelte";
    import { getData } from "./data.js";

    const { fields, dataset } = getData();
</script>

<Pivot fields={fields} dataset={dataset} />

Откройте src/Pivot.svelte, объявите входящие пропсы с помощью export let и примените их к объекту конфигурации Pivot:

Pivot.svelte

<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"
                }, // другие значения
            ]
        },
        // другие свойства конфигурации
    });
});

onDestroy(() => {
    table.destructor();
});
</script>

<div bind:this={container} class="widget"></div>

Компонент готов к использованию. При монтировании Pivot отображает переданные данные. Полный список свойств конфигурации см. в документации API Pivot.

Обработка событий

Действия пользователя в Pivot вызывают события, на которые можно подписаться. Полный список событий см. в обзоре событий.

Следующий фрагмент кода расширяет onMount обработчиком события open-filter, который записывает в лог идентификатор поля при открытии пользователем фильтра:

Pivot.svelte

<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"
                }, // другие значения
            ]
        },
        // другие свойства конфигурации
    });

    table.api.on("open-filter", (ev) => {
        console.log("Идентификатор поля, для которого активирован фильтр:", ev.id);
    });
});

onDestroy(() => {
    table.destructor();
});
</script>

// ...

Запустите приложение, чтобы увидеть, как Pivot отображает данные на странице.

Pivot теперь интегрирован со Svelte. Настройте конфигурацию в соответствии с требованиями проекта. Финальный пример см. на svelte-pivot-demo на GitHub.