Отображение отчетов как отдельных виджетов

Вы можете отображать отчеты как отдельные виджеты. Исходный код Report Manager включает 3 отдельных виджета:

• Отчет в виде таблицы (Table report)
• Отчет в виде древовидной карты (Treemap report)
• Отчет в виде диаграммы (Chart report)

Данные виджеты наследуют API и внешний вид от DataTable, TreeMap и Chart соответственно. Однако текущая конфигурация формируется на основе загруженного отчета.

Related sample:  Report Manager: Standalone Reports

Конфигурация виджетов и загрузка данных

Виджеты имеют общую конфигурацию:

rows: [
   {
      view: "report-table",
      report: table_report_config,
      reportUrl: "https://docs.webix.com/reports-backend/",
   },
   {
      view: "report-chart",
      report: chart_report_config,
      reportUrl: "https://docs.webix.com/reports-backend/",
   },
   {
      view: "report-treemap",
      report: treemap_report_config,
      reportUrl: "https://docs.webix.com/reports-backend/",
   }
]

Объект конфигурации каждого виджета включает следующие свойства:

• view - название виджета: "report-table", "report-chart", "report-treemap"
• report - JSON объект с конфигурацией отчета

Конфигурация отчета (JSON) соответствует структуре отчета, предоставляемой для модулей Report Manager. Например:

{
    "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,
    "type":"table"
}

• reportUrl - строковый URL для запроса отчета

Итоговый URL-адрес запроса аналогичен дефолтному методу Report Manager getData().

/api/objects/api/objects/sales/data

В данном примере "sales" – это название основного набора данных для отчета. Данные формы запроса будут включать конфигурацию отчета. Например:

Request

POST http://localhost:3000/api/objects/api/objects/sales/data
Form data
query: {"glue":"and","rules":[{"field":"companies.name","type":"text", ...}]}
columns: ["companies.name","sum.products.price",...]
joins: [{"sid":"sales","tid":"products",...]
limit: 
group: ["companies.name","year.sales.when"]

Response

Сервер возвращает данные отчета. Например:

[
  {
    "companies.name":"Beatty Group",
    "sum.products.price":"199884",
    "year.sales.when":"1900"
  },
  {
    "companies.name":"Beatty Group",
    "sum.products.price":"133256",
    "year.sales.when":"1901"
  },
  // другие объекты
]

Наверх