Таблица

Таблица позволяет распределить и структурировать данные из разрезов и применять к ним меры. Чтобы построить виджет, добавьте таблицу в модель данных.

Настройки виджета

Помимо общих настроек, у виджета есть уникальные.

Настройка данных

Разрезы и меры

Для разрезов и мер доступны следующие общие настройки:

• Название
• Формула
• Формат
• Форматирование
• Ширина (в пикселях или процентах)
• Вид
• Отображать (Всегда/По переменной/По формуле)

Также для разреза можно скрыть пустые значения и назначить действия по клику.

Настройка вида для разрезов и мер различается.

Вид разреза

Параметр отвечает за окрашивание значения разреза в таблице. Доступные варианты:

• Без окрашивания
• Окрашивание текста
• Окрашивание фона ячейки

При выборе окрашивания для разрезов с типами Integer и Float доступны режимы По значениям, По правилу или По диапазону. Чтобы задать цвет, нажмите на поле настройки с иконкой шестеренки. В открывшейся панели нажмите + Значение.

В раскрывающемся списке введите или выберите значение, для которого настраивается окрашивание. Доступны режимы цвета Базовый или По правилу.

Также в поле можно вписать собственное значение, которого пока нет в таблице, но оно может быть добавлено позднее. Например, это может быть полезно, когда необходимо настроить окрашивание до передачи дашборда пользователям, а разрез с указанным значением будет добавлен в таблицу позже.

Вид меры

Параметр отвечает за окрашивание значения меры в таблице. Доступные варианты:

• Выключено (по умолчанию)
• Окрашивание текста
• Окрашивание ячейки
• Окрашивание таблицы
• Окрашивание таблицы по заданному диапазону
• Показатель со стрелкой (рост/падение)

Минимальное и максимальное значения при включении режима Окрашивание таблицы по заданному диапазону у настройки Вид проставляются автоматически:

• В формате Длительность при переключении единиц измерения в поле настройки диапазона в виде подсказки
• В формате Число как заданное значение

Для агрегированных показателей доступна настройка диаграммы:

• Минимальное значение (по умолчанию минимальное значение таблицы берется за 0%. Значения ниже или равные установленному будут приниматься за 0%).
• Максимальное значение (по умолчанию максимальное значение таблицы берется за 100%. Значения выше или равные установленному будут приниматься за 100%).
• Единицы измерения (для формата Длительность): дни/часы/минуты/секунды

Формулы в разрезах и мерах можно менять через раскрывающийся список. Подробная информация о редакторе формул представлена на соответствующей странице.

Настройка отображения

Размер текста

Регулирует размер текста в строках виджета.

Выравнивание

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

Настройки шапки таблицы

• Фон шапки таблицы: Авто/Базовый
• Толщина шрифта: Обычная/Большая
• Цвет текста: Авто/Базовый

Лимит строк

Ограничивает количество отображаемых строк на странице таблицы заданным значением.

Скрыть пустые значения

Позволяет не отображать пустые значения в таблице.

Итог

При активации переключателя в таблицу добавляется строка Итог. В строке вычисляется крайнее значение колонки меры. К колонке меры применяется та же формула, что и для расчета значений меры. Например, если формула меры min(...), итоговым значением будет минимальное значение из всего диапазона данных колонки.

Дополнительно для строки Итог можно настроить:

• Фон (Авто/Базовый)
• Толщина шрифта
• Цвет текста

Эти настройки доступны только при включении отображения строки Итог.

Настройка фильтрации

Для виджета применимы общие настройки фильтрации.

Настройка действий

Во вкладке Кнопки можно настроить запуск скрипта из дашборда.

После выбора скрипта над таблицей появляется кнопка, при клике на которую запускается скрипт. Для таблицы можно добавить несколько действий. В этом случае над ней появится несколько кнопок.

Режим просмотра

В режиме просмотра в таблице можно искать необходимые значения по разрезу. Поле поиска находится в шапке колонки. С помощью поиска можно найти несколько значений и выбрать их. После их выбора к дашборду применяется фильтр по этим значениям, как при обычной фильтрации по клику на значения в колонке таблицы.

Пролистывать страницы можно с помощью панели постраничной навигации, которая расположена в правом нижнем углу виджета. Панель появляется автоматически при превышении значения, заданного в параметре Лимит строк.

Подробнее о виджете Таблица в видеокурсе.

Пример создания таблицы с иерархической структурой и динамическим отображением показателей

Предположим, что нам нужно построить таблицу для анализа ассортимента товаров. Мы хотим видеть структуру ассортимента по категориям, переходить к подкатегориям и при необходимости открывать детализацию по конкретным товарам. При этом на каждом уровне детализации должна отображаться разная информация. Например, на уровне подкатегорий можно показать количество товаров в подкатегории и среднюю цену единицы товара, а на уровне конкретных товаров — цену единицы для каждого товара.

Таким образом, нам нужна таблица, которая позволяет перемещаться по иерархии Категория — Подкатегория — Товар и при переходе между уровнями автоматически изменяет отображаемые показатели. Решить эту задачу можно с помощью иерархического разреза и настройки действий по клику. При переходе на следующий уровень иерархии таблица будет одновременно менять значение переменной, которая управляет отображением показателей.

Рассмотрим способ настройки такой таблицы.

1. Создадим или откроем дашборд для анализа ассортимента.
2. Перейдем в настройки дашборда и создадим новую переменную типа Статический список. Укажем название — Уровень детализации.
3. Добавим значения переменной Категория, Подкатегория и Товар, затем укажем значение по умолчанию Категория и сохраним переменную. Переменная нужна, чтобы настроить отображение колонок таблицы в зависимости от значения переменной.
4. Создадим новую переменную типа Вводимое значение. Для переменной укажем название Фильтр категории и тип данных — Текст. Переменная нужна, чтобы управлять фильтрацией элементов на разных уровнях детализации.
5. Аналогичным образом создадим переменную Фильтр подкатегории.
6. Добавим на дашборд новый виджет Таблица и укажем заголовок Структура ассортимента и ценовые показатели.
7. Создадим иерархический разрез. Для этого нажмем кнопку + Разрез, в раскрывающемся списке выберем тип разреза Иерархия, затем — таблицу Продукция и колонку Категория товара. Это будет первый уровень иерархии.
8. Аналогичным способом добавим два следующих уровня иерархии — Подкатегория товара и Товар.
9. Настроим переход от верхнего уровня иерархии к нижнему. Для этого откроем настройки разреза Категория товара и в поле Действие по клику добавим действие Открыть вложенное.
10. Настроим обновление переменной Уровень детализации при переходе на новый уровень иерархии. Данная настройка понадобится позднее для того, чтобы управлять отображением показателей для каждого уровня иерархии. В блоке Обновить переменные нажмем на иконку Шестеренка, добавим переменную Уровень детализации. Далее выберем способ ввода Задать формулой и укажем формулу 'Подкатегория'.
11. Добавим еще одну переменную, которая должна обновляться при переходе на новый уровень иерархии. Для этого нажмем кнопку + Переменная, в раскрывающемся списке выберем переменную Фильтр категории, затем укажем способ ввода Из колонки и колонку Категория товара из таблицы Продукция. Эта настройка понадобится, чтобы управлять фильтрацией элементов в таблице при переходе на другой уровень иерархии.
12. С помощью кнопки Назад вернемся к настройкам иерархии и аналогичным образом для разреза Подкатегория настроим переход на уровень детализации по товарам и обновление переменных. Для этого в поле Действие по клику добавим действие Открыть вложенное, затем в блоке Обновить переменные добавим переменную Уровень детализации, выберем способ ввода Задать формулой и укажем формулу 'Товар'. Добавим еще одну переменную Фильтр подкатегории со способом ввода Из колонки, укажем колонку Подкатегория товара из таблицы Продукция.
13. С помощью кнопки Назад вернемся к настройкам данных таблицы и убедимся, что создан иерархический разрез с тремя уровнями: Категория товара — Подкатегория товара — Товар.
14. Добавим меру, которая будет показывать количество товаров в каждой подкатегории. Для этого нажмем кнопку + Мера и в раскрывающемся списке выберем таблицу с продукцией и колонку Товар. Затем укажем формулу count(distinct Товар), чтобы посчитать количество товаров в подкатегории. Переименуем меру в Число уникальных товаров и оставим параметры форматирования по умолчанию.
15. Настроим отображение меры. Раскроем поле Настройки отображения, в области Отображать выберем опцию По переменной, затем — переменную Уровень детализации и значение Подкатегория. Теперь мера Число уникальных товаров будет отображаться только на уровне Подкатегория.
16. Добавим еще одну меру для расчета средней цены товаров в подкатегории. Нажмем кнопку + Мера, в раскрывающемся списке выберем таблицу с продукцией и колонку Цена единицы, затем укажем вид агрегации Среднее. Переименуем меру в Средняя цена единицы и оставим параметры форматирования по умолчанию.
17. Раскроем поле Настройки отображения, в области Отображать выберем опцию По переменной, затем укажем переменную Уровень детализации и значение Подкатегория. Таким образом, мера Средняя цена единицы тоже будет отображаться только на уровне Подкатегория.
18. Добавим колонку с ценой для конкретных товаров. Для этого нажмем кнопку + Разрез, в раскрывающемся списке выберем таблицу с продукцией и колонку Цена единицы.
19. Раскроем поле Настройки отображения, в области Отображать выберем опцию По переменной, затем укажем переменную Уровень детализации и значение Товар. Теперь колонка с ценой единицы будет отображаться только на уровне Товар.
20. Перейдем на вкладку Фильтрация на боковой панели и в поле Режим фильтрации выберем значение Отключено. Это позволит использовать клик по элементам таблицы только для перехода по иерархии.
21. Добавим фильтр для ограничения элементов при переходе с уровня категорий на уровень подкатегорий. Для этого нажмем кнопку + Фильтр и в раскрывающемся списке выберем Настроить, чтобы задать свою формулу.
22. В открывшемся редакторе формул укажем '"product"."Категория товара"=${Фильтр категории}'.
23. Аналогичным образом добавим еще один фильтр с формулой "product"."Подкатегория товара"=${Фильтр подкатегории}'
24. Опубликуем дашборд и проверим результат. В режиме просмотра отобразится таблица Структура ассортимента и ценовые показатели, в которой на верхнем уровне будет показана только колонка Категория товара.
25. Нажмем на любую категорию и перейдем на уровень Подкатегория. На этом уровне появятся дополнительные показатели: Число уникальных товаров и Средняя цена единицы для каждой подкатегории.
26. Нажмем на одну из подкатегорий и перейдем на уровень Товар. На этом уровне отобразится список товаров и колонка с ценой единицы для каждого товара.
27. При переходе между уровнями иерархии автоматически изменяется значение переменной Уровень детализации, поэтому таблица показывает только те показатели, для которых настроено отображение по соответствующему значению переменной. При возврате на предыдущий уровень с помощью кнопки Назад значение переменной также обновляется, и набор отображаемых колонок изменяется.

Настройка виджета в YAML

Виджет можно редактировать не только в образе, но и в YAML-редакторе. В таблице ниже представлены ключи и значения, которые можно использовать для настройки. Подробнее о том, как работать с ключом value, описано на страницах Значения разрезов и мер в YAML и Процессные разрезы и меры в YAML. Форматы данных, которые можно использовать, описаны на соответствующей странице. Общие параметры для виджетов описаны на странице Настройка виджетов в YAML.

Настройки данных в YAML

Разрезы и меры в YAML (ключ dimensionsAndMeasures)

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

Иерархический разрез (ключ hierarchyDimensions)

Диапазон в YAML (ключ range)

Окрашивание значений разреза (блок color)

В этом блоке указываются значения разреза и назначаются цвета для них.

Пример использования блока:

color:
  mode: VALUES
  items:
    - value: Соц.сеть/UGC-площадка
      color:
        mode: BASE
        value: "#4f77a4"
    - value: Внутренний канал
      color:
        mode: BASE
        value: "#222F3E"

Настройки отображения в YAML

Настройки фильтрации в YAML

Настройки действий в YAML

Пример настроенного виджета в YAML-редакторе

widgets:
  - key: table (1)
    apiVersion: "17"
    type: TABLE
    settings:
      titleColor:
        mode: AUTO
      titleSize: 14
      paddings: 8
      titleWeight: NORMAL
      textSize: 12
      filterMode: DEFAULT
      ignoreFilters: false
      stateName: null
      title: ""
      showMarkdown: false
      markdownMeasures: []
      markdownText: Описание
      verticalAlign: TOP
      rowsLimit: 15
      dimensionsAndMeasures:
        - type: DIMENSION
          name: Номер заявки
          value:
            mode: FORMULA
            formula: '"case_table"."case_id"'
          dbDataType: String
          formatting:
            value: AUTO
            mode: BASE
          hideEmptyValues: false
          format:
            value: STRING
            mode: BASE
          onClick: []
          displayCondition:
            mode: DISABLED
          width:
            value: null
            mode: PIXEL
          displayMode: NONE
        - type: DIMENSION
          name: Вид услуги
          value:
            mode: FORMULA
            formula: '"case_table"."dir_services_def"'
          dbDataType: String
          formatting:
            value: AUTO
            mode: BASE
          hideEmptyValues: false
          format:
            value: STRING
            mode: BASE
          onClick: []
          displayCondition:
            mode: DISABLED
          width:
            value: null
            mode: PIXEL
          displayMode: NONE
        - type: DIMENSION
          name: Канал связи
          value:
            mode: FORMULA
            formula: '"case_table"."intr_type"'
          dbDataType: String
          formatting:
            value: AUTO
            mode: BASE
          hideEmptyValues: false
          format:
            value: STRING
            mode: BASE
          onClick: []
          displayCondition:
            mode: DISABLED
          width:
            value: null
            mode: PIXEL
          displayMode: NONE
        - type: DIMENSION
          name: Время начала
          value:
            mode: FORMULA
            formula: '"case_table"."start"'
          dbDataType: String
          formatting:
            value: AUTO
            mode: BASE
          hideEmptyValues: false
          format:
            value: STRING
            mode: BASE
          onClick: []
          displayCondition:
            mode: DISABLED
          width:
            value: null
            mode: PIXEL
          displayMode: NONE
        - type: DIMENSION
          name: Время завершения
          value:
            mode: FORMULA
            formula: '"case_table"."finish"'
          dbDataType: String
          formatting:
            value: AUTO
            mode: BASE
          hideEmptyValues: false
          format:
            value: STRING
            mode: BASE
          onClick: []
          displayCondition:
            mode: DISABLED
          width:
            value: null
            mode: PIXEL
          displayMode: NONE
        - type: MEASURE
          name: Топ user_name
          value:
            outerAggregation: count
            mode: AGGREGATION
            templateName: top
            processKey: null
            caseCaseIdFormula: null
            eventName: null
            eventNameFormula: null
            filters: []
            tableName: UserInfo
            columnName: user_name
            eventTimeFormula: null
          dbDataType: UInt64
          displayMode: NONE
          displayCondition:
            mode: DISABLED
          width:
            value: null
            mode: PIXEL
          format:
            value: NUMBER
            mode: BASE
          formatting:
            value: AUTO
            mode: BASE
      filters: []
      showTotal: false
      markdownTextSize: 26
      headColor:
        mode: BASE
        value: "#222F3E"
      headWeight: BOLD
      headTextColor:
        mode: AUTO
      totalTextColor:
        mode: AUTO
      totalWeight: BOLD
      totalColor:
        mode: AUTO
      actionButtons: []
    localApiVersion: "2"