Отображение PivotTable - Платформа CUBA. Отображение диаграмм и карт

3. Отображение PivotTable

PivotTable - табличный компонент для представления данных в виде сводной таблицы, в котором реализована возможность ручного перетаскивания её элементов для манипуляции данными и настройки таблицы непосредственно через 2D drag-and-drop UI. PivotTable полностью поддерживается библиотекой компонентов CUBA Studio.

PivotTable базируется на JavaScript библиотеке - https://github.com/nicolaskruchten/pivottable. На сайте автора библиотеки вы можете найти больше примеров компонента PivotTable: http://nicolas.kruchten.com/pivottable/examples/.

XML-имя компонента: pivotTable

Компонент реализован только для блока Web Client.

Пример описания таблицы в XML-дескрипторе экрана:

<chart:pivotTable id="tipsPivotTable"
                  datasource="tipsDs"
                  renderer="HEATMAP">
    <chart:properties>
        <chart:property name="row"/>
        <chart:property name="totalBill"/>
        <chart:property name="tip"/>
        <chart:property name="sex"/>
        <chart:property name="smoker"/>
        <chart:property name="day"/>
        <chart:property name="time"/>
        <chart:property name="size"/>
    </chart:properties>
    <chart:aggregation mode="SUM_OVER_SUM">
        <chart:property name="tip"/>
        <chart:property name="totalBill"/>
    </chart:aggregation>
    <chart:rows>
        <chart:row value="sex"/>
        <chart:row value="smoker"/>
    </chart:rows>
    <chart:columns>
        <chart:column value="day"/>
        <chart:column value="time"/>
    </chart:columns>
    <chart:sortersFunction>
        function(attr){
            if(attr=="Day"){
                return $.pivotUtilities.sortAs(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]);
            }
        }
    </chart:sortersFunction>
</chart:pivotTable>

элементы pivotTable

properties - коллекция ключ-значение атрибутов pivotTable, где ключ - имя атрибута в источнике данных, а значение - его локализованное значение, используемое при отображении.

derivedProperties - используется для добавления новых генерированных атрибутов к источнику данных таблицы. Представляет собой коллекцию ключ-значение, где ключ - имя генерированного атрибута, а значение - JavaScript функция для генерации значения этого атрибута.
- вложенные элементы derivedProperty должны иметь атрибут caption, который будет использоваться в качестве ключа.
- элемент function задаёт значение для derivedProperty.

hiddenProperties - список атрибутов, которые не будут отображаться в UI. Значением может быть либо ключ из properties, либо произвольная строка, соответствующая имени одного из сгенерированных атрибутов (т.е.ключ из derivedProperties). Только для редактируемого pivotTable.

hiddenFromAggregations - список атрибутов, которые не будут отображаться в выпадающих списках для агрегирования.

hiddenFromDragDrop - список атрибутов, которые не будут доступны для drag-and-drop в настройках таблицы в UI.

columns - список атрибутов, которые будут использоваться в качестве колонок. Значением может быть либо ключ из properties, либо имя сгенерированного атрибута.

columnOrder - порядок отображения колонок рендерером таблицы.

rows - список атрибутов, которые будут использоваться в качестве строк. Значением может быть либо ключ из properties, либо имя сгенерированного атрибута.

rowOrder - порядок отобраения строк рендерером таблицы.

exclusions - коллекция ключ-значение, где ключ - имена атрибутов (ключ из properties или имя сгенерированного атрибута), а значение - список значений этого атрибута, которые не будут использоваться при рендеринге. Только для редактируемого pivotTable.

inclusions - коллекция ключ-значение, где ключ - имена атрибутов (ключ из properties или имя сгенерированного атрибута), а значение - список значений этого атрибута, которые будут использоваться при рендеринге. Только для редактируемого pivotTable.

filterFunction - JavaScript код, который будет использоваться в качестве функции фильтрации.

renderers - описывает коллекцию рендереров, которые будут отображаться в списке доступных для выбора рендереров в UI.
- default выбор из списка предопределенных рендереров. Выбранный рендерер будет использоваться по умолчанию при загрузке компонента.
- вложенный элемент renderer имеет один атрибут type - выбор из списка предопределенных рендереров: AREA_CHART, BAR_CHART, COL_HEATMAP, HEATMAP, HORIZONTAL_BAR_CHART, HORIZONTAL_STACKED_BAR_CHART, LINE_CHART, ROW_HEATMAP, SCATTER_CHART, STACKED_BAR_CHART, TABLE_BAR_CHART, TABLE, TREEMAP, TSV_EXPORT.
Только для редактируемого pivotTable.

rendererOptions - описывает опции рендереров. В данный момент только два типа рендереров могут быть кастомизированы:
- все виды heatmap. Можно задать JavaScript-функцию генерации цвета для ячеек.
- все виды графиков. Можно задать размер графика.

sortersFunction - JavaScript код, который будет использоваться в качестве функции сортировки заголовков строк и колонок.
Элементы агрегирования pivotTable
aggregation - настройки для функции, которая будет использоваться для агрегирования значений в каждой ячейке.

атрибуты aggregation:

mode - выбор из списка предопределенных функций.

caption - локализуемое значение, которое будет отображаться в UI.

custom - если true, то значение mode игнорируется, и будет использоваться JavaScript код, заданный во вложенном элементе function.

элементы aggregation:

function - JavaScript код, используемый в качестве функции агрегирования.

property - список атрибутов, которые будут использоваться в качестве входных параметров функции агрегирования. Значением может быть либо ключ из properties, либо имя сгенерированного атрибута. Только для нередактируемого pivotTable.

Например:

<chart:aggregation mode="SUM_OVER_SUM" custom="true"> <chart:property name="tip"/> <chart:property name="Total Bill"/> </chart:aggregation>

aggregationProperties - список атрибутов, которые будут установлены в выпадающих списках для значений агрегаторов. Значением может быть либо ключ из properties, либо имя сгенерированного атрибута. Только для редактируемого pivotTable.

Например:

<chart:aggregationProperties> <chart:property name="tip"/> <chart:property name="totalBill"/> </chart:aggregationProperties>

aggregations - описывает коллекцию агрегаторов, которые будут отображаться в списке доступных для выбора агрегаторов в UI.

атрибуты aggregations:

атрибут default - выбор из списка предопределенных функций агрегирования. Выбранная функция агрегирования будет установлена по умолчанию при загрузке компонента.

вложенный элемент aggregation используется так же, как aggregation, но у него отсутствует вложенный элемент property. Только для редактируемого pivotTable.

Например:

<chart:aggregations default="COUNT"> <chart:aggregation caption="Count"/> <chart:aggregation mode="SUM_OVER_SUM"/> </chart:aggregations>

атрибуты pivotTable

datasource - ссылка на источник данных, указанный в блоке dsContext XML-дескриптора экрана. Источник должен иметь тип collectionDatasource.

editable - если true, в UI будут отображаться элементы для манипуляций с данными, в противном случае будут отображены только данные.

menuLimit - максимальное количество значений, отображаемых во всплывающем меню. Если значение превышено, появляется соответствующее сообщение. Только для редактируемого pivotTable.

renderer - выбор из списка предустановленных рендереров, служащих для отображения данных. Только для редактируемого pivotTable.

autoSortUnusedProperties - определяет, будут ли неиспользованные атрибуты сортироваться в UI. Только для редактируемого pivotTable.

unusedPropertiesVertical - определяет, будут ли неиспользованные атрибуты отображаться вертикально (если true) или горизонтально (если false или по умолчанию). Если задано как число, тогда, если суммарная длина имен атрибутов в символах превысит это число, атрибуты будут показаны вертикально.

Слушатели pivotTable:

addCellClickListener - добавляет слушатель кликов по ячейкам таблицы PivotTable. Событие CellClickEvent отрабатывает только для табличных типов рендереров (TABLE, HEATMAP, TABLE_BAR_CHART, COL_HEATMAP, ROW_HEATMAP).
```
tipsPivotTableUI.addCellClickListener(event -> {
    showNotification("Value: " + event.getValue() + ",\n"
        + "Filters applied: " + event.getFilters());
});
```

addRefreshListener - добавляет слушатель событий обновления PivotTable. Событие RefreshEvent отрабатывает только для редактируемой таблицы PivotTable.
```
tipsPivotTableUI.addRefreshListener(event -> {
    showNotification("Row order :" + event.getRowOrder() + ",\n"
        + "Inclusions: " + event.getInclusions());
});
```
Событие RefreshEvent содержит в себе информацию о текущем состоянии таблицы: aggregation, aggregationProperties, columns, columnOrder, exclusions, inclusions, renderer, rowOrder, rows.

Атрибуты pivotTable: autoSortUnusedProperties - datasource - editable - height - menuLimit - renderer - unusedPropertiesVertical - width
Элементы pivotTable: aggregation - aggregationProperties - aggregations - columnOrder - columns - derivedProperties - exclusions - filterFunction - hiddenFromAggregations - hiddenFromDragDrop - hiddenProperties - inclusions - properties - rendererOptions - renderers - rowOrder - rows - sortersFunction
API: addCellClickListener - addRefreshListener