Кастомизация Pivot

Pivot это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.

Jet приложение и внутренние модули

Pivot построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.

Компоненты

Интерфейс Pivot разбит по частям (компонентам). Каждый компонент, это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.

Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.

views
  config
    properties
    index.js
  chart.js
  mode.js
  ...

Модели/Сервисы

В моделях Pivot описана логика для работы со шкалами и данными. В Webix Jet модели называются сервисами.

Исходный код для моделей (сервисов Jet) находятся в папке sources/models.

models
  LocalData.js
  Backend.js

Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:

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

Кастомизация компонентов

При кастомизации компонента вы можете:

• переопределить метод config(), чтобы изменить UI
• переопределить метод init(), чтобы изменить UI и поведение компонента
• переопределить любой существующий метод, но делайте это с осторожностью
• добавлять и вызывать свои методы

Чтобы определить, какой компонент отвечает за нужную часть интерфейса, обратитесь к карте классов.

Использование colorselect как палитру для чартов

Чтобы использовать ColorSelector в качестве палитры для чарта, создайте кастомный класс и наследуйте его от pivot.views["config/properties/values"]. Переопределите метод ItemConfig() таким образом, чтобы он возвращал конфигурацию с контролом.

class CustomValuesProperty extends pivot.views["config/properties/values"] {
  ItemConfig(val, i) {
    const config = super.ItemConfig(val, i);
    config[1].suggest = {
      padding: 0,
      type: "colorselect",
      body: {
        button: true,
      },
    };
    return config;
  }
}

Затем переопределите компонент (класс) по умолчанию с помощью свойства override:

webix.ui({
  view: "pivot",
  structure: {
    rows: ["form", "name"],
    columns: ["year"],
    values: [{ name: "oil", operation: ["min", "sum"] }],
  },
  override: new Map([
    [pivot.views["config/properties/values"], CustomValuesProperty],   ]),
});

Related sample:  Pivot: Custom Palette for Chart Mode

Рекомендации

Скрытие компонентов

Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вместо этого вы можете скрывать компоненты.

class CustomBar extends pivot.views.toolbar {
    init(view) {
    // логика по умолчанию 
        super.init(view);
    // прячем кнопку "Configure Pivot"
        view.queryView("template").hide();
    }
}

Доступ к экземплярам компонентов

Внутри Jet-компонента получить экземпляр компонента можно двумя способами.

Метод $$(id) у JetView работает для внутреннего компонента, у которого задана настройка localId:

init() {
    // исходная логика
    super.init();
    // получаем экземпляр компонента с localId = "form"
    const config = this.$$("config");
}

Если localId не задан, используйте queryView:

init(view) {
    // исходная логика
    super.init();
    // получаем экземпляр первой кнопки 
    const button = view.queryView("icon");
}

Проверка компактного режима

Определить, в компактном ли режиме находится приложение, можно из любого компонента или сервиса:

const compact = this.getParam("compact", true);

Получение свойств состояния

Получить текущее состояние приложения и его реактивные свойства можно из любого компонента или сервиса:

const state = this.app.getState();
// или
const state = this.getParam("state");

Кастомизация сервисов Jet

При кастомизации сервиса вы можете:

• добавлять и вызывать свои методы
• переопределить любой существующий метод, но делайте это с осторожностью

Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:

class MyBackend extends pivot.services.Backend {
  data() {
    // клиентские данные
    return webix.promise.resolve(data);
  }
}

Затем переопределите класс по умолчанию вашим с помощью свойства override:

webix.ui({
    view: "pivot",
    url: "https://docs.webix.com/pivot-backend/",
    override: new Map([[pivot.services.Backend, MyBackend]]),
});

Related sample:  Pivot: Local Data

Обратная совместимость

Pivot - это гибкий компонент: вы можете менять в нём практически всё. Однако помните о следующем:

• Внутренняя логика модулей Pivot может меняться в последующих релизах.
• Мы сделаем всё, чтобы оставить сигнатуры методов без изменений, но в случае необходимости возможны критические изменения.

Наверх