Pivot это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.
Кастомизация компонентов и моделей подразумевает работу с исходным кодом.
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()
для изменений в UIinit()
для изменений в UI и поведении компонентовЧтобы использовать 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
Больше примеров кастомизации смотрите в Практические руководства.
Рекомендации
1. Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вы можете скрывать компоненты.
class CustomBar extends pivot.views.toolbar {
init(view) {
// логика по умолчанию
super.init(view);
// прячем кнопку "Configure Pivot"
view.queryView("template").hide();
}
}
2. Получить экземпляр компонента внутри Jet можно следующими способами:
$$(id)
у JetView.Метод работает для внутреннего компонента, у которого определён локальный ID (localId
).
init() {
// исходная логика
super.init();
// получаем экземпляр компонента с localId = "form"
const config = this.$$("config");
}
localId
не определён.init(view) {
// исходная логика
super.init();
// получаем экземпляр первой кнопки
const button = view.queryView("icon");
}
3. С помощью кода ниже можно определить, в компактном ли режиме приложение в данный момент:
const compact = this.getParam("compact", true);
Метод доступен из любого компонента или сервиса.
4. Чтобы получить текущее состояние приложения и его реактивные свойства воспользуйтесь одним из способов ниже:
const state = this.app.getState();
// или
const state = this.getParam("state");
Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:
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 - это очень гибкий виджет в отношении кастомизаций: вы можете менять в нём практически всё, что угодно. Однако следует помнить о следующих моментах:
Обратите внимание, что у кода для Edge Сhromium должен быть другой синтаксис.