Работа с сервером

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

Pivot widget ожидает бэкенд сервер для загрузки данных. Передайте ссылку на сервер через параметр url:

webix.ui({
    view: "pivot",
    url:"http://localhost:3200/" });

Pivot загружает и сохраняет данные, используя заданный URL.

Вы можете скачать готовый бэкенд для Pivot.

Если у вас нет бэкенд сервера, вы можете кастомизировать методы сервиса Backend и предоставлять клиентские данные в виде промиса.

Вычисления на стороне сервера

Вы можете настроить Pivot так, чтобы все вычисления выполнялись на стороне сервера. Для этого задайте свойству externalProcessing значение true.

Локально Pivot использует встроенный математический движок, который делает все расчёты и выдаёт результат. На основании результата строится таблица по заданному алгоритму. Для случая externalProcessing:true ожидается, что с сервера придёт результат в том же виде, т.к. алгоритм одинаковый. В примерах из пакета Pivot на сервере используется тот же математический движок, что и у виджета, и результат имеет тот же формат (headers для построения колонок и result для распределения данных).

При внесении изменений Pivot посылает запрос на url/data со следующими параметрами: {structure, mode, table(?)} и ждет, пока сервер загрузит новые агрегированные данные.

Если пользователь открывает фильтр, он получает значения полей из url/fields/id.

Как мы уже говорили, образец сервера доступен для загрузки владельцам лицензии в виде zip-файла через клиентскую зону. Вы также можете использовать свой собственный сервер.

Если вы хотите получить конфигурацию с сервера, вы можете вызвать webix.ajax перед инициализацией view:

webix.ajax(url + "config").then(res => {
    webix.ui(
        webix.extend({
                view: "pivot",
                ...
            },
            res.json()
        )
    );
});

Если вы используете свой собственный сервер, измените параметры AJAX-запроса на путь к вашему конфигу.

Сервис Backend

Сервис Backend - это серверная модель, у которой есть методы для запросов на сервер.

Ниже вы найдёте полный список методов.

Как кастомизировать модель Backend

Чтобы менять запросы, получать и обрабатывать ответные данные вы можете:

создать свой бэкенд сервис и наследовать его от сервиса по умолчанию;
определять и переопределять методы;
использовать произвольный бэкенд сервис через свойство override.

class MyBackend extends pivot.services.Backend {
    // новые методы 
}
 
webix.ui({
    view: "pivot",
    url:"http://localhost:3200/",
    override: new Map([[pivot.services.Backend, MyBackend]]),
});

Как изменить запрос на сервер

Вы можете отправлять AJAX запросы на ваш сервер с помощью необходимых URL, напр.:

class MyBackend extends pivot.services.Backend {
  data() {
    return webix.ajax.get("//localhost:3200/")
      .then(res => res.json());
  }
}

Обработка клиентских данных

Если вам нужно заполнить Pivot данными на стороне клиента, вы можете вернуть их в виде промиса в следующих методах:

Данные с клиента

class MyBackend extends pivot.services.Backend {
  data() {
    return webix.promise.resolve(pivotData);
  }
}

Related sample: Pivot: Local Data

Методы сервиса Backend

В этой секции вы найдёте детальное описание следующих методов:

data()
collectFieldValues()

data()

Вызывается при инициализации виджета для загрузки данных.

В случае "externalProcessing:false":

Returns: промис с массивом объектов данных.

Request:

GET http://localhost:3000/

Response:

Сервер возвращает массив объектов данных.

[
   {
        "name": "Argentina",
        "year": 2005,
        "continent": "South America",
        "form": "Republic",
        "gdp": 181.357,
        "oil": 1.545,
        "balance": 4.699
    },
  // другие объекты
]

В случае "externalProcessing:true":

Parameters:

structure (object) - объект с текущей структурой данных.
mode (string) - текущий режим. Возможные значения: "tree", "table" или "chart".
table (object), optional - настройки для таблиц в режимах "Table" и "Tree".

Returns: промис с объектом данных.

Request:

GET http://localhost:3000/data?structure=%7B%22rows%22%3A%5B%22
form%22%2C%22name%22%5D%2C%22columns%22%3A%5B%22year%22%5D%2C%22
values%22%3A%5B%7B%22name%22%3A%22oil%22%2C%22operation%22%3A%22
sum%22%2C%22color%22%3A%22%23e33fc7%22%7D%5D%2C%22filters%22%
3A%5B%5D%2C%22groupBy%22%3A%22year%22%7D&mode=tree&table=%7B%7D

Response:

Сервер возвращает агрегированные данные.

[{
    "result": {
        "tree": [{ // data structure for Tree mode
            "id": 0, // branch/item id (root branch == 0)
            // data item with values assigned to columns 
            //(key == column, index == column ID)
            "values": {
                ...
            },
            "data": [{ // nested data
                "id": 1,
                "data": null, // no nested data in this item
                "values": {}, 
            }],
        }],
        "data": [...], // aggregated data (items without branches/structure)
        "rowData": [...], // results for totalColumn
        "columnData": [...], // results for footer totals
        "marks": [...] // css marks for highlighting min/max values in columns
    },
    "header": { // source of Pivot columns; here header has 2 rows (data.length) 
                //and there are 6 columns
        "data": [...],// system property: native math engine can eliminate 
                      //empty columns (according to the returned data)
        "nonEmpty": [0, 1, 2, 3, 4, 5], // all returned columns have some data, so
                                        //nonEmpty contains indices/IDs of all columns
        "meta": [...] // common meta for all modes, contains additional info: 
                      //operation displayed for each column header, chart colors, etc.
    }
}]

collectFieldValues()

Этот метод собирает значения полей. Работает только при externalProcessing: true.

Returns: промис с массивом объектов данных.

Request:

GET http://localhost:3000/fields/id

Response:

Сервер возвращает массив объектов значений полей:

[
    {"value":"South America","id":"South America","label":"South America"},
    // другие поля  
]

Наверх