Работа с данными

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

Webix Pivot ожидает общий URL для загрузки и сохранения задач и ссылок:

view:"pivot", url:"remote/data"

Структура данных

Pivot ожидает массив данных с JSON данными для агрегации и отображения. Структура и поля данных могут быть полностью кастомными, как на примере ниже:

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

Сервисы для работы с данными

У Pivot есть следующие сервисы для работы с данными:

1. Local Data

• хранение данных на клиенте
• переопределение лимита данных
• работа с методами для отрисовки данных

const local = $$("pivot").getService("local");
// получаем массив настроек столбцов
const columns = pivot.getColumns();

2. Backend

• предоставляет методы запросов к серверу для получения данных и сохранения изменений

const back = $$("pivot").getService("backend");
back.data().then(data => console.log(data));

Операции с данными

Как получить данные Pivot

Чтобы получить текущие данные Pivot, вызовите метод getData() у сервиса Local Data.

const data = $$("pivot").getService("local").getData(false);

Метод принимает 1 параметр:

• force (boolean) - если true, виджет перезагрузит данные с сервера.

Перезагружаем данные

$$("pivot").getService("local").getData(true);

Метод возвращает объект со следующими полями:

• data (array) - 2D массив с данными для дерева (по массиву на каждую группу данных)
• header (array) - массив с объектами хедеров. У каждого объекта есть следующие поля:
  • id (number) - ID хедера
  • header (array) - содержит два объекта с полями text и operation
  • format (string) - формат значения хедера.
• marks (array) - 2D массив, где каждый элемент это или пустое значение, или массив со стилями для min/max значений столбцов и рядов
• total (array) - массив со значениями сумм столбцов. Каждый элемент, это или пустое значение, или сумма значений столбца.

Пример данных

data: [/* данные Pivot */],
header: [
  {
    id: 1,
    header: [{text: "oil"}, {operation: "max"}],
  },
  // другие хедеры
]
marks: [
  ["webix_min_x"]
  // другие стили
]
total: [2.946, 292.017, ... ]

Как получить поля Pivot

Чтобы получить текущие поля Pivot, вызовите метод getFields() у сервиса Local Data.

const fields = $$("pivot").getService("local").getFields();

Метод принимает 1 параметр:

• firstRow (object) - первый ряд данных.

$$("pivot").getService("local").getFields(data[0]);
/*
  "name": "Argentina",
  "year": 2005,
  "continent": "South America",
  "form": "Republic",
  "gdp": 181.357,
  "oil": 1.545,
  "balance": 4.699
*/

Метод возвращает массив объектов полей. Каждый объект включает в себя следующие поля:

• id (string) - ID поля
• type (number) - тип поля. Возможные значения:
  • "text" - если значение поля - строка
  • "number" - если значение поля - число
  • "date" - если значение поля - дата.
• value (string) - значение поля
• predicate (string) - обработчик поля
• prepare (function) - подготавливает сырые данные. Принимает 1 параметр - сырое значение (напр. "2007").

Вы можете переопределять поля (менять тип полей, значение и др.).

Как получить палитру чарту

Чтобы получить текущую палитру чарта, вызовите метод getPalette() у сервиса Local Data.

const palette = $$("pivot").getService("local").getPalette();

Метод возвращает 2D массив, где каждый внутренний массив - ряд цветов (соответствует рядам в интерфейсе):

[
  ["#e33fc7", "#a244ea", "#476cee", "#36abee", "#58dccd", "#a7ee70"],
  ["#d3ee36", "#eed236", "#ee9336", "#ee4339", "#595959", "#b85981"],
  // другие ряды
]

Вы также можете переопределить палитру по умолчанию.

Очистка данных

Вы можете вызвать clearAll, чтобы сбросить все сохраненные данные и настройки.

$$("$pivot").clearAll();

Перезагрузка данных

Чтобы перезагрузить данные после вызова clearAll, вам нужно вызвать соответствующий метод Local Data - getData(true). Логический параметр true вызовет принудительную перезагрузку с сервера.

$$("$pivot").getService("local").getData(true);

getData возвращает промис, который разрешается при получении данных. Как только данные будут получены, вы cможете установить исходную структуру для их отображения:

$$("$pivot").getService("local").getData(true).then(() => {
  $$("$pivot").setStructure({ /* structure params */ });
});

Наверх