Главный осенний релиз 2021 года был ознаменован целым рядом важных обновлений в библиотеке Webix. Среди прочих изменений, особое место занимает глубокий апдейт одного из комплексных виджетов библиотеки. И в этой статье речь пойдет о флагмане релиза 9.0, а именно, о новом Webix JavaScript Pivot. Давайте разбираться что же изменилось и как апдейт сказался на функционале, интерфейсе и организации кода в целом.
Отличия в интерфейсе
А начнем мы, пожалуй, с изменений, которые первоочередно бросаются в глаза. Давайте сравним обновления, которые затронули интерфейс нового виджета. И здесь есть о чем рассказать.
Дело в том, что команда Webix разработала принципиально новый, более удобный и гибко настраиваемый интерфейс. К примеру, задачи, которые раньше решались двумя виджетами Pivot и Pivot-chart, каждый из которых нужно было отдельно инициализировать и настраивать, в новой версии решаются простым кликом по контролу на тулбаре.
К слову, тулбар тоже весьма заметно изменился. Он стал статичным и теперь, помимо фильтров, включает в себя контролы для управления виджетом.
Кардинально изменилась и панель настроек. Вместо громоздкого модального окна в старом Pivot, в новой версии появилась компактная панель в правой части виджета. Обо всем этом и не только я расскажу более детально.
Режимы отображения
В новой версии Pivot, пользователь может переключаться между 3 режимами отображения данных:
- Таблица
- Дерево
- Чарт.
Для этого у виджета предусмотрены специальные контролы на тулбаре.
Режимы Таблица и Дерево очень похожи. Главные их отличия заключаются в структуре левой панели, на которой отображаются названия рядов сводной таблицы.
Режим Дерево
В режиме Дерево, ряды на левой панели имеют древовидную структуру, которая была унаследована от предыдущей версии Pivot. Вы можете сворачивать и разворачивать ряды вместе с их содержимым, а также управлять вложенностью и отображением рядов через соответствующие контролы на панели настроек.
Режим Таблица
В новом режиме Таблица, названия рядов отображаются в столбцах таблицы на левой панели. Здесь вы по-прежнему можете управлять их приоритетом и отображением через соответствующие контролы на панели настроек.
Единственный нюанс заключается в том, что к общим настройкам добавляется чекбокс «Clean rows». Он позволяет убирать повторяющиеся значения в крайнем левом столбце рядов с наивысшим приоритетом. Такой подход значительно упрощает визуальный поиск информации на сводной таблице.
Режим Чарт
Режим Чарт — это по сути ремейк виджета Pivot-chart. Левая панель здесь отсутствует, поскольку данные отображаются в виде гибко настраиваемых диаграмм (вместо сводной таблицы). Вы также можете управлять настройками диаграмм через соответствующие контролы на панели настроек.
Компактный режим
Если мы уже говорим о режимах отображения, то не лишним будет упомянуть и о компактном режиме, который появился в новой версии Pivot. Теперь пользователи могут просматривать данные и настраивать сводные таблицы и диаграммы на своих мобильных устройствах.
Особенности предыдущей версии Pivot
Предыдущая версия виджета позволяла использовать только два «условных» режима: Дерево и Чарт. Их можно назвать «условными» по той причине, что каждый из них представлял собой отдельный виджет, который нужно было инициализировать и настраивать.
Согласитесь, что создавать новые виджеты менее удобно, чем просто кликнуть по кнопке и отобразить данные в нужной вам форме.
Pivot (предыдущая версия)
Pivot-chart (предыдущая версия)
Тулбар
Теперь давайте рассмотрим изменения, которые коснулись тулбара виджета. Если в предыдущем Pivot он появлялся только при добавлении фильтров, то в новой версии тулбар становится уже статичным и включает следующие элементы:
— кнопка «Configure Pivot» для отображения панели настроек
— добавленные фильтры, которые позволяют гибко настраивать множественную фильтрацию
— контролы для переключения между режимами Дерево, Таблица и Чарт.
Визуальные отличия вы можете увидеть на изображениях ниже:
Тулбар нового Pivot
Тулбар старого Pivot
Панель настроек
Значительных изменений претерпела панель настроек. В старой версии виджета настройки отображались в виде модального окна, которое появлялось при клике по кнопке «Click to configure».
Чтобы настроить виджет, вам нужно было перетащить одно из значений секции «Fields» в соответствующий блок настроек (Filters, Columns, Rows прочие) и добавить ему дополнительные параметры (в случае с Filters и Values). При этом, изменения вступали в силу только после клика по кнопке «Apply» в правом верхнем углу этой панели.
В новой версии Pivot, настраивать виджет стало гораздо удобнее. Панель настроек приобрела более компактный вид. Теперь она появляется в правой части виджета при клике по кнопке «Configure Pivot» на тулбаре. При этом, основной экран виджета остается в поле вашего зрения, а все изменения незамедлительно отражаются на соответствующих панелях (тулбар, левая панель, таблица или панель чарта).
Изменился и сам процесс настройки. Вместо не совсем удобного перетаскивания элементов из блока в блок, сейчас вам нужно кликнуть по круглой кнопке со знаком «+» в соответствующей секции, которую вы хотите изменить, и выбрать желаемое значение из выпадающего списка опций. Другие же секции можно свернуть, что делает панель настроек еще компактнее.
Помимо удобного интерфейса для управления данными, расширились и сами настройки. Так, в секции Values, которая позволяет настраивать значения сводной таблицы и чарта, добавились дополнительные функции:
— avg — среднее значение
— wavg — средневзвешенное значение двух параметров
— any — значение по умолчанию.
Но вы также можете добавлять и кастомные операции по своему усмотрению.
Общие настройки таблицы
В режимах Таблица и Дерево, на панели настроек появляется новая секция для общей конфигурации сводной таблицы. Здесь вы можете подсвечивать минимальные и максимальные значения рядов и столбцов, а также управлять футером таблицы.
Обратите внимание, что в старом Pivot вы также могли подсвечивать максимальные и минимальные значения. Но сделать это можно было только для рядов таблицы, и только через API.
Подобные изменения коснулись и футера таблицы. Раньше он активировался через соответствующие настройки в объекте конфигурации виджета, а теперь для этого предусмотрены специальные контролы.
Общие настройки чарта
Изменилась и панель настроек виджета Pivot-chart, который теперь стал режимом Чарт.
Pivot-chart (старая версия)
Общая структура настроек осталась прежней, но добавились новые фичи, которые раньше были доступны только через API. А именно, в секции Chart вы теперь можете делать следующее:
— задавать лейблы для осей X и Y
— задавать цвет шкалы
— показывать/прятать линии чарта
— задавать плавные линии для типа Radar.
Помимо прочего, добавились и новые типы диаграмм. Если в старой версии вы могли использовать всего лишь 3 типа: Bar, Line и Radar, то в новом виджете появились еще 3 диаграммы:
— Area
— Spline
— Spline Area.
Конфигурация
Теперь давайте перейдем к наиболее значимым изменениям, которые произошли в коде виджета. Дело в том, что старый Pivot разрабатывался как обычный Webix компонент. Для его инициализации вам нужно было использовать конструктор webix.ui(), который принимает объект с настройками компонента:
view: "pivot",
structure: {
rows: ["form", "name"],
columns: ["year"],
values: [
{ name: "gdp", operation: "sum"},
{ name: "oil", operation: "sum"}
],
filters: [ ]
},
data: pivot_data
});
Такой подход не предусматривает динамическую смену локали и накладывает ряд ограничений при кастомизации виджета, о которой мы поговорим чуть позже.
Новый Pivot очень сильно отличается от своего предшественника внутренней структурой кода. Основное отличие в том, что виджет разрабатывался как Jet приложение. Его главное преимущество заключается в гибкости настроек и широких возможностях для кастомизации.
Инициализировать новый виджет теперь можно двумя способами:
— как обычный Webix компонент (как и в предыдущей версии)
view: "pivot",
url: "https://docs.webix.com/pivot-backend/",
structure: {
rows: ["form", "name"],
columns: ["year"],
values: [{ name: "oil", operation: ["min", "sum"] }]
}
});
— как Jet приложение
url: "https://docs.webix.com/pivot-backend/",
structure: {
rows: ["form", "name"],
columns: ["year"],
values: [{ name: "oil", operation: ["min", "sum"] }],
}
});
app.render(document.body);
Учитывая то, что обновленный Pivot объединяет в себе функционал двух предыдущих версий, его настройки также изменились. Например, значительно упростилась работа с фильтрами.
В старом Pivot вы могли оперировать только 4 типами фильтров, а именно: text, select, multiselect и datepicker. Если нужно было отобразить фильтры по умолчанию, вам следовало указать значение, к которому будет применен фильтр, и желаемый тип в объекте массива filters:
filters: [{name: "date", type: "datepicker"}],
...
}
Вместе с этим, у виджета было специальное API для работы с фильтрами, которое исчезло из за ненадобности. К примеру, пропали методы filter() и getFilterView(), а также целый ряд свойств для настройки фильтров: filterLabelAlign, filterMap, filterMinWidth, filterWidth и filterPlaceholder.
А в новом виджете фильтровать данные стало гораздо проще. Во-первых, вместо нескольких отдельных компонентов для фильтрации (text, datepicker и другие), здесь используется только один компонент filter. По сути, он с лихвой покрывает все задачи своих предшественников. Во-вторых, вы по-прежнему можете устанавливать фильтры по умолчанию, но теперь не нужно указывать его тип и целый ряд сопутствующих настроек:
filters: [{name: "continent"}, {name: "name"}, {name: "year"}],
...
}
Если же встроенных фильтров вам показалось недостаточно, вы всегда можете создать дополнительные.
Появились и совсем новые настройки. Теперь вы можете задавать режим по умолчанию через свойство mode и новые операции с данными через свойство operations.
mode: "table", // устанавливает режим table по умолчанию
operations: { // объект с кастомными операциями
floor: v => v.reduce((acc, a) => acc + Math.floor(a), 0),
...
}
Как я уже упоминал выше, в новом Pivot пользователь может динамически менять локали с помощью метода setLang() плагина Jet. В предыдущей версии локализация была статичной и задавалась только при инициализации.
Кастомизация
Теперь давайте сравним возможности кастомизации нового и старого Pivot. Как я уже упоминал выше, в новой версии кастомизация стала более гибкой. Это связано с особенностями фреймворка Webix Jet, на котором написан виджет.
Но вместе с этим, появились и дополнительные трудности. Например, чтобы изменить ту или иную часть интерфейса или его поведение, вам нужно понимать как устроен код нового виджета на фреймворке Jet. Для освоения самого фреймворка вы можете для начала ознакомиться с вводной статьей или же сразу перейти к изучению его документации.
Если коротко, то каждая часть интерфейса виджета представляет собой отдельный класс. Если вы хотите изменить поведение или внешний вид какой либо части, вам следует создать новый класс, унаследовав его от соответствующего класса по умолчанию. Затем, вам нужно изменить или добавить новую логику нужных элементов и подменить старый класс новым, передав их в override (смотрите код ниже).
Давайте посмотрим на наглядном примере, как добавить кастомную палитру для выбора цвета чарта:
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;
}
}
// инициализируем компонент
webix.ui({
view: "pivot",
mode: "chart",
structure: {
...
},
// перезаписываем класс по умолчанию, заменяя его кастомным
override: new Map([
[pivot.views["config/properties/values"], CustomValuesProperty],
]),
});
});
В старом Pivot все делалось совсем по другому. Вы не могли, например, заменить встроенные элементы своими собственными. А для того чтобы добавить новый функционал, вам нужно было обрабатывать определенные события виджета.
Давайте посмотрим на наглядном примере, как добавить дополнительное поле поиска в секцию Fields на панели настроек:
{
id: "pivot",
view: "pivot",
structure: {
...
},
popup:{
on:{
onViewInit: function(name, config){
if(name == "fieldsLayout")
config.rows.splice(1,0,{
id: "fieldsFilter",
css: "fields_search",
view: "search",
on:{
onTimedKeyPress:function(){
var value = this.getValue().toLowerCase();
$$("pivot").getConfigWindow().$$("fields").filter("name",value);
}
}
});
}
}
}
}
]
Заключение
В этой статье мы рассмотрели главные отличия между старым и новым Webix Pivot. Как вы могли убедиться, интерфейс виджета стал более удобным. Появились 3 режима отображения данных и расширились некоторые настройки, которые раньше были доступны только через API или же вовсе отсутствовали. Помимо этого, изменился подход в построении кода, что значительно расширило возможности настройки и кастомизации. Детали работы с новым Pivot вы найдете в его документации.
