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

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

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

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

Более подробную информацию о роутах и параметрах читайте в статье Работа с сервером.

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

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

Отчёты

Report Manager ожидает JSON данные, где каждый элемент массива - объект со следующими полями:

  • id (number) - ID модуля (отчёты)
  • name (string) - название модуля
  • text (string) - строка с конфигурацией модуля. Может быть конвертирована в JSON
  • updated (string) - дата последнего изменения отчёта в формате ISO.

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

id: 22
name: "Company per region"
text: "{
    "desc":"Created on 10/28/2020",
    "data":"companies",
    "joins":[...],
    "query":"",
    "columns":[{"id":"companies.region_id","name":"Region",...],
    "group":{"by":[{"id":"companies.region_id"}],"columns":[...]},
    "meta":{"freeze":1},"sort":null}",
updated: "2020-10-29T12:38:14Z"

Сервисы данных

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

1. Local

  • хранит данные в коллекциях на клиентской стороне
  • предоставляет методы для получения отчётов (модулей) и работы с ними
  • предоставляет методы для получения моделей (источников данных) и работы с ними
  • предоставляет методы для получения запросов и работы с ними
const local = $$("reports").getService("local");
const modules = local.getModules(); // получаем отчёты

3. Charts

  • предоставляет методы для получения типов чартов
  • хранит массив цветов, с которыми можно работать
const charts = $$("reports").getService("charts");
charts.getTypes(); // получаем массив типов чартов
 
/*
[
  {id: "line", value: "Line", icon: "mdi mdi-chart-line"},
  {id: "spline", value: "Spline", icon: "mdi mdi-chart-bell-curve-cumulative"},
  {id: "area", value: "Area", icon: "mdi mdi-chart-areaspline"},
  // другие типы
]
*/

2. Helpers

  • предоставляет методы для поиска и проверки соответствия
const helpers = $$("reports").getService("helpers");
// проверяем, содержит ли поле какие-либо символы, кроме цифр
helpers.hasNonDigits(input);

3. Backend

  • предоставляет методы запросов к серверу для получения данных и сохранения изменений
const back = $$("reports").getService("backend");
back.getModels().then((data) => console.log(data));

Смотрите папку models исходного кода, чтобы познакомиться с сигнатурами методов.

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

Как получить модули

Модуль - это конфигурация отчёта. Все модули хранятся в коллекции данных. Чтобы получить коллекцию, вызовите метод getModules() у сервиса Local.

const modules = $$("myReports").getService("local").getModules();

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

Получаем первый модуль

const modules = $$("myReports").getService("local").getModules();
modules.waitData.then(function(){
   modules.getItem(modules.getFirstId()); // получаем первый модуль
});

С помощью сериализации коллекции можно получить массив всех модулей:

Сериализация коллекции модулей

const modules = $$("myReports").getService("local").getModules();
modules.waitData.then(function(){
 const arr = modules.serialize(); // получаем массив модулей
  /*[
      {
        id: 22
        name: "Company per region"
        text: "{
          "desc":"Created on 10/28/2020",
          "data":"companies",
          "joins":[...],
          "query":"",
          "columns":[{"id":"companies.region_id","name":"Region",...],
          "group":{"by":[{"id":"companies.region_id"}],"columns":[...]},
          "meta":{"freeze":1},"sort":null}",
        updated: "2020-10-29T12:38:14Z"
      },
  ...
  ]*/
});

Как получить модели

Модели - это источники данных. Все модели хранятся в коллекции данных. Чтобы получить коллекцию, вызовите метод getModels() у сервиса Local. Метод принимает 1 параметр:

  • now (boolean) - если true, мы подразумеваем, что коллекция уже загружена и доступна на клиенте.
$$("myReports").getService("local").getModels().then(sources => {
 // делаем что-либо с моделями
});

Метод возвращает хэш источников данных:

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

{
  companies: {id: "companies", name: "Companies", data: [...], refs: [...]},
  persons: {id: "persons", name: "Persons", data: [...], refs: [...]},
  products: {id: "products", name: "Products", data: [...], [...]},
  sales: {id: "sales", name: "Sales", data: [...], refs: [...]}
}

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

Запросы используются для фильтрации отчётов. Все запросы хранятся в коллекции данных. Чтобы получить коллекцию, вызовите метод getQueries() у сервиса Local.

const queries = $$("myReports").getService("local").getQueries();

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

Получаем первый запрос

const queries = $$("myReports").getService("local").getQueries();
queries.waitData.then(function(){
   queries.getItem(queries.getFirstId()); // получаем первый запрос
});

С помощью сериализации коллекции можно получить массив всех запросов:

Сериализация коллекции запросов

const queries = $$("myReports").getService("local").getQueries();
queries.waitData.then(function(){
 const arr = queries.serialize(); // получаем массив запросов
  /*[
      {
        id: 20,
        models: ["companies", "persons"],
        name: "myFilter",
        text: { ...конфиг запроса },
        value: "myFilter"
      },
  ...
  ]*/
});

Related sample:  Report Manager: Data Operations

Наверх