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

4. Отображение 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.

Рисунок 46. PivotTable

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

<chart:pivotTable id="tipsPivotTable"
                  dataContainer="tipsDc"
                  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

dataContainer – ссылка на контейнер данных, указанный в секции data XML-дескриптора экрана. Контейнер должен иметь тип CollectionContainer.

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

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

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

showColTotals – отображение суммы по каждому столбцу. Значение по умолчанию true. Только для табличных рендереров.

showRowTotals – отображение суммы по каждой строке. Значение по умолчанию true. Только для табличных рендереров.

showUI – видимость UI-элементов редактируемого pivotTable. Значение по умолчанию true.

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 – dataContainer – 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