Настройка Pivot

Так как Pivot - это приложение на базе Webix Jet, оно состоит из отдельных Webix компонентов. Эти компоненты можно переопределить или же работать с отдельными настройками чата.

Базовая конфигурация

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

• url (string) - URL для загрузки данных
• fields - определяет поля данных
• mode (string) - определяет режим отображения данных. Возможные значения:
  • "tree" - режим дерева (по умолчанию)
  • "table" - режим таблицы
  • "chart" - режим чарта.
• structure - задает настройки для Pivot. У каждого объекта есть следующие поля:
  • rows (array) - массив рядов таблицы
  • columns (array) - массив столбцов таблицы. Эквивалентно полю groupBy в режиме "chart"
  • values (array) - массив с настройками значений. Каждый объект содержит следующие поля:
    • name (string) - название поля
    • operation (string, array) - название операции. Встроенной ("sum", "min", "max", "avg", "wavg", "count", "any") или кастомная. Свойство принимает строку или массив строк
    • format (function) - форматирующая функция
    • color (string) - цвет для секций чартов.
  • filters (array) - массив полей для фильтрации.
  • groupBy (string) - название поля, по которому происходит группирование. Используется в режиме чарта. Эквивалентно полю columns в режимах "table" и "tree".
• datatable - определяет настройки для таблиц Pivot. Внутри объекта вы можете использовать свойства из объекта конфигурации Datatable, а также следующие поля:
  • footer (boolean, string) - определяет, показывать ли сумму значений каждого столбца. Возможные значения:
    • true
    • false (по умолчанию)
    • "sumOnly" - true чтобы отобразить суммы только для столбцов "sum".
  • minX (boolean) - подсвечивает минимальное значение ряда
  • maxX (boolean) - подсвечивает максимальное значение ряда
  • minY (boolean) - подсвечивает минимальное значение столбца
  • maxY (boolean) - подсвечивает максимальное значение столбца
  • cleanRows (boolean) - удаляет повторяющиеся значения в первом столбце (в режиме table).
  • totalColumn (boolean, string) - определяет, показывать ли столбец(столбцы) с итоговыми значениями. Возможными значениями являются:
    • true
    • false
    • "sumOnly" - вычисляет итоговые значения только для столбцов, к которым применяется функция "sum".
  • transpose (boolean) - размещает результаты математических вычислений по горизонтальной оси
• chart - определяет настройки для чарта Pivot. Внутри объекта вы можете использовать свойства из объекта конфигурации Chart. Базовые поля:
  • type (string) - тип чарта
  • scale (string) - шкала чарта
  • legend (object) - легенда чарта
  • scaleColor (string) - цвета шкалы. HEX код или название цвета ("#999999", или "grey")
  • xAxis.lines (boolean) - если false, линии оси X не отображаются
  • yAxis.lines (boolean) - если false, линии оси Y не отображаются
  • labels (boolean) - если false, лейблы не отображаются
  • lines (boolean) - если false, линии осей не отображаются. true по умолчанию.
  • 3D (boolean) - задает 3D диаграмму (только типы pie и donut)
• operations (object) - хранит кастомные операции
• predicates (object) - позволяет добавить кастомные обработчики для дат
• locale (object) - название текущего языка или объект с настройками языка
• readonly (boolean) - если true, пользователь не сможет настраивать Pivot. По умолчанию false
• compact (boolean) - компактный режим. По умолчанию undefined
• override (object) - используется при переопределении классов по умолчанию.

webix.ui({
  view: "pivot",
  url: "https://docs.webix.com/pivot-backend/",
  mode: "chart",
  structure: {
    groupBy: "year",
    rows: ["form", "name"],
    values: [{ name: "oil", operation: ["min", "sum"] }],
  }
});

Related sample:  Pivot: Chart Mode

Реактивные свойств

Свойства mode, structure, datatable, chart, и readonly также доступны как реактивные через состояние виджета. Они хранят глобальное состояние приложение и позволяют разработчикам отслеживать его изменения. Любые изменения реактивных свойства незамедлительно отражаются в интерфейсе. Также у Pivot есть и другие свойства:

• config (boolean) - определяет, открыта ли форма
• fields (array) - массив с объектами полей. У каждого объекта есть следующие свойства:
  • name (string) - название поля
  • value (string) - значение поля
  • type (number) - тип поля. Возможные значения:
    • "text" - если значение поля - строка
    • "number" - если значение поля - число
    • "date" - если значение поля - дата.
  • predicate (string) - обработчик predicate
  • prepare (function) - подготавливает сырые данные. Принимает эти данные в качестве параметра (напр. "2007").

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

webix.ui({
    view:"pivot", 
    id:"pivot",
    url: "https://docs.webix.com/pivot-backend/"
});
 
const state = $$("pivot").getState();
/*
  {
    chart: {
      scale: "linear",
      type: "bar"
    },
    config: true,
    datatable: {
      footer: true,
      maxY: true
    },
    fields: [
      {name: "oil", value: "oil", type: 1, predicate: "date"},
      // other fields
    ],
    mode: "tree",
    readonly: false,
    structure: { ...structure config }
  }
*/

Отслеживание изменений реактивных свойств

Следить за изменениями реактивных свойств можно с помощью обработчика $observe:

$$("pivot")
  .getState()
  .$observe("structure", (structure, old) => {
    if (
      old &&
      structure.filters.length &&
      !structure.filters.find(o => o.external)
    )
      $$("filter").setValue("");
  });

Related sample:  Pivot: External Filters

В примере выше, текущий state доступен через экземпляр JetApp, который, в свою очередь, доступен в обработчике onInit.

Наверх