Table#

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

Можно использовать табличную визуализацию для отображения таких наборов данных, как:

• Общие запросы к базе данных, такие как журналы, трассировки, показатели

• Финансовые отчеты

• Списки клиентов

• Каталоги продуктов

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

Таблицы также предоставляют различные стили для визуализации данных внутри ячеек таблицы, такие как цветной текст и фон ячеек, датчики, спарклайны, ссылки на данные, JSON-код и изображения.

Предусловия#

• Пользователь авторизован и имеет права на редактирование дашборда.

• Источник данных возвращает структурированные данные в формате таблицы (со столбцами и строками).

• Визуализация «Table» доступна в списке типов панелей.

• Данные корректно преобразованы (при необходимости) для отображения в табличном виде.

Правила эксплуатации#

• Используйте Table для отображения структурированных данных — не подходит для визуального анализа временных трендов.

• Применяйте Column filter — для быстрой фильтрации значений без изменения запроса.

• Включайте Wrap text и Wrap header text — при наличии длинных текстов в ячейках или заголовках.

• Используйте Frozen columns — чтобы зафиксировать ключевые столбцы (например, имена объектов) при прокрутке.

• Настройте Cell type для конкретных столбцов — чтобы визуализировать данные как Gauge, Sparkline, Pill или Image.

• Применяйте Value mappings и Thresholds — для цветовой индикации статусов (например, OK — зеленый, Error — красный).

• Используйте Tooltip from field — для отображения дополнительной информации при наведении.

• Включайте Pagination — при большом количестве строк, чтобы избежать замедления интерфейса.

• Устанавливайте Minimum column width — для корректного отображения на мобильных устройствах.

• Используйте Table footer — для отображения итогов, средних и других агрегаций по столбцам.

• Применяйте Field overrides — для точечной настройки форматирования, цветов и типов ячеек.

Последовательность выполнения#

1. Убедитесь, что плагин визуализации «Table» установлен в продукте PVV.

2. Откройте дашборд визуализации в интерфейсе PVV.

3. Выберите тип визуализации «Table».

4. Настройте параметры конфигурации

   

5. Нажмите кнопку «Save Dashboard», чтобы отобразить визуализацию панели.

Поддерживаемые форматы данных#

Примеры#

В этом примере показан базовый набор данных, в котором есть данные для каждой ячейки таблицы:

Column1, Column2, Column3
value1 , value2 , value3
value4 , value5 , value6
value7 , value8 , value9

Если ячейка отсутствует или структура столбцов и строк таблицы неполна, как в следующем примере, визуализация таблицы не будет отображать какие-либо данные:

Column1, Column2, Column3
value1 , value2 , value3
gap1   , gap2
value4 , value5 , value6

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

Column filtering#

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

Turn on column filtering#

Чтобы включить фильтрацию по столбцам, выполните следующие действия:

1. В Grafana перейдите на панель мониторинга с таблицей, содержащей столбцы, которые вы хотите отфильтровать.

2. Наведите указатель мыши на любую часть панели, к которой вы хотите добавить ссылку, чтобы отобразить меню действий в правом верхнем углу.

3. Откройте меню и выберите Edit.

4. В панели редактора разверните раздел Table.

5. Установите переключатель Column filter switch.

Рядом с заголовком каждого столбца появится значок фильтра (воронка).

Filter column values#

Чтобы отфильтровать значения столбцов, выполните следующие действия:

1. Щелкните значок фильтра (воронка) рядом с заголовком столбца. Grafana отображает параметры фильтрации для этого столбца.

   

2. Установите чекбокс рядом со значениями, которые вы хотите отобразить, или нажмите Select all.

3. Введите текст в поле поиска вверху, чтобы отобразить эти значения на дисплее, чтобы вы могли выбрать их, а не прокручивать для поиска.

4. Выберите один из нескольких операторов для отображения значений столбцов:

   • Contains - соответствует шаблону регулярного выражения (оператор по умолчанию).

   • Expression - вычисляет логическое выражение. Символ $ представляет значение столбца в выражении (например, "$ >= 10 && $ <= 12").

   • Типичные операторы сравнения: =, !=, <, <=, >, >=..

5. Установите чекбокс над кнопками Ok и Cancel, чтобы добавить или удалить все отображаемые значения из фильтра.

Clear column filters#

Столбцы, в которых применены фильтры, помечены синим цветом рядом с заголовком.

Чтобы удалить фильтр, щелкните по синему значку фильтра, а затем нажмите Clear filter.

Apply ad hoc filters from the table#

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

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

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

Sort columns#

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

Dataset selector#

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

Параметры конфигурации#

Panel options#

В разделе Параметры панели на панели редактора панелей задайте основные параметры, такие как заголовок и описание панели, а также ссылки на панели. Дополнительные сведения смотри в разделе Настройка параметров панели.

Table options#

Table footer options#

В нижнем колонтитуле таблицы отображаются результаты вычислений (и функции редуктора) по полям. Нижний колонтитул отображается только после выбора опции в раскрывающемся списке Calculation:

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

В нижнем колонтитуле таблицы:

• Можно применить несколько расчетов одновременно.

• По умолчанию функции вычислений и редуктора применяются ко всем полям таблицы. Чтобы управлять тем, к каким полям применяются вычисления или функции, добавьте нижний колонтитул таблицы в качестве переопределяющего элемента.

• Если вы включаете математическую функцию для нечислового поля, для этого поля ничего не отображается для этой функции.

На следующем рисунке применено несколько вычислений — Mean, Max, и Last:

Cell options#

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

Cell type#

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

Если вы хотите применить тип ячейки только к некоторым полям, а не ко всем, вы можете сделать это, используя Cell options > Cell type Переопределение поля типа ячейки.

Auto#

Это обычная ячейка с текстом и цифрами.

Она имеет следующие параметры ячейки:

Colored text#

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

Тип ячейки с цветным текстом имеет следующие параметры:

Colored background#

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

Можно задать цвет фоновой ячейки по строкам:

Тип ячейки с цветным фоном имеет следующие параметры:

Data links#

Если вы настроили ссылки на данные, то при выборе типа ячейки Auto текст ячейки становится интерактивным. Если вы измените тип ячейки на Data links, текст ячейки будет отображать заголовки настроенных ссылок на данные. Чтобы более детально контролировать применение текста ссылки на данные, используйте Cell option > Cell type > Data links.

Gauge#

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

Тип ячейки датчика имеет следующие параметры:

Gauge display mode

Можно установить три режима отображения датчика.

Value display

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

Sparkline#

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

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

JSON View#

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

Для типа ячейки просмотра JSON вы можете установить параметр включить Cell value inspect. Это позволяет проверять значения в ячейках таблицы. Когда переключатель включен, при нажатии на значок проверки в ячейке открывается панель проверки значений, которая содержит две вкладки: Plain text и Code editor.

Установите переключатель Tooltip from field, чтобы использовать значения из другого поля (или столбца) во всплывающей подсказке. Дополнительные сведения смотри в разделе «Tooltip from field».

Grafana пытается автоматически определить тип данных в ячейке и открывает панель с соответствующей вкладкой. Однако вы можете переключаться между вкладками.

Pill#

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

Цвета, применяемые к каждому фрагменту текста, сохраняются по всей таблице. Например, если слово «тест» сначала отображается в виде красной таблетки, оно всегда будет отображаться в виде красной таблетки.

Для типа ячейки «таблетки» поддерживаются следующие форматы данных:

• Значения, разделенные запятыми (cows,chickens,goats)

• Массивы JSON однородных ((["cows","chickens","goats"])) или смешанных ([1,2,3,"foo",42,"bar"]) типов

• Установите переключатель Tooltip from field, чтобы использовать значения из другого поля (или столбца) во всплывающей подсказке. Дополнительные сведения смотри в разделе «Подсказка из поля».

Markdown + HTML#

Тип ячеек Markdown + HTML отображает расширенный контент Markdown или HTML, отображаемый с использованием спецификации Markdown со вкусом GitHub. Это полезно, если вам нужно отобразить настроенную, предварительно отформатированную информацию наряду с табличными данными, такими как отформатированные строки, списки ссылок или другие динамические варианты.

Для этого типа ячеек вы можете переключить переключатель Dynamic height, который позволяет динамически изменять размер ячейки в зависимости от содержимого ячейки. Если вы используете динамическую высоту, мы настоятельно рекомендуем вам также включить Pagination, чтобы избежать проблем с производительностью в таблицах большего размера, поскольку включение динамической высоты отключает virtualization.

По умолчанию отображаемый HTML-код обрабатывается, а не обработанный HTML-код может отображаться в этих ячейках только в том случае, если для параметра disable_sanitize_html установлено значение true для вашего экземпляра Grafana.

Установите переключатель Tooltip from field, чтобы использовать значения из другого поля (или столбца) во всплывающей подсказке. Дополнительные сведения смотри в разделе «Подсказка из поля».

Image#

Если у вас есть значение поля, представляющее собой URL-адрес изображения или изображение в кодировке base64, этот тип ячейки отображает его как изображение.

Он имеет следующие опции:

Actions#

В ячейке отображается кнопка, при нажатии на которую запускается обычный вызов API без проверки подлинности. Настройте вызов API с помощью следующих параметров:

Tooltip from field#

Включите переключатель Tooltip from field, чтобы использовать значения из другого поля (или столбца) во всплывающей подсказке.

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

Когда в ячейку добавляется всплывающая подсказка из поля, в правом верхнем или левом верхнем углу ячейки отображается фишка:

Наведите курсор мыши на чип, чтобы отобразить всплывающую подсказку.

При включении переключателя также отображается параметр размещения всплывающей подсказки, который определяет, где окно всплывающей подсказки открывается при наведении курсора. Выберите один из следующих вариантов: Auto, Top, Right, Bottom, и Left.

Содержимое всплывающей подсказки определяется значениями исходного поля и не может быть изменено напрямую. Однако вы можете повлиять на отображение значения, используя переопределения, такие как сопоставления значений, как показано в примере: Всплывающая подсказка из поля с сопоставлениями значений.

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

Всплывающая подсказка из поля с использованием переопределений#

Следующая таблица содержит пять видимых полей (столбцов), а также скрытое поле под названием «Информация»:

• Поле «Информация» скрыто с помощью свойства Table > Hide in table.

• К полю «Краткий текст» были применены следующие переопределения:

  • Значения из поля «Информация» используются в качестве текста всплывающей подсказки для ячеек «Краткий текст» с помощью свойства Cell options > Tooltip from field.

  • Свойство Cell options > Tooltip placement задано для управления размещением всплывающей подсказки.

Теперь, когда вы наводите курсор на чип в столбце «Краткий текст», во всплывающей подсказке появляются соответствующие значения из столбца «Информация»:

Всплывающая подсказка из поля с сопоставлениями значений#

Хотя содержимое всплывающей подсказки определяется значениями исходного поля и не может быть изменено напрямую, вы можете использовать переопределения полей в исходном поле для управления отображением этого значения.

Например, если столбец «Info» используется в качестве исходного поля для значений всплывающей подсказки, вы можете настроить сопоставление значений. В этом случае значение «up» сопоставляется слову «Good»:

Теперь, когда вы наводите курсор на чип в ячейке «Краткий текст», отображенное значение появляется во всплывающей подсказке:

Standard options#

Standard options в панели редактора панелей позволяют изменять способ отображения данных полей в визуализациях. При установке стандартного параметра изменение применяется ко всем полям или рядам. Для более детального управления отображением полей обратитесь к разделу Настройка переопределений.

Чтобы узнать больше, обратитесь к разделу Настройка стандартных параметров.

Data links and actions#

Ссылки на данные позволяют создавать ссылки на другие панели, сводные панели и внешние ресурсы, сохраняя при этом контекст исходной панели. Можно создавать ссылки, содержащие название серии или даже значение под курсором. Дополнительные сведения смотри в разделе Настройка ссылок на данные и действий.

Для каждого канала передачи данных установите следующие параметры:

• Title

• URL

• Open in new tab

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

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

Value mappings#

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

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

• Condition - выберите, что будет отображаться в отображаемом тексте и (необязательно) цвете:

  • Value - Конкретные значения

  • Range - Числовые диапазоны

  • Regex - Регулярные выражения

  • Special - специальные значения, такие как Null, NaN (не число), или логические значения, такие как true и false

• Display text - Отображаемый текст

• Color - Цвет (необязательно)

• Icon- Значок (только на холсте)

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

Thresholds#

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

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

Чтобы узнать больше, обратитесь к разделу Настройка пороговых значений.

Field overrides#

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

Выберите один из следующих вариантов переопределения:

Результат#

После настройки и сохранения панели с визуализацией Table выполните следующие шаги для проверки корректности ее работы:

1. Проверка отображения данных
   Убедитесь, что:

   • Все строки и столбцы отображаются корректно.

   • Нет пропущенных или поврежденных ячеек (например, из-за неполной структуры данных).

   • Типы данных (текст, числа, даты) отображаются в соответствии с ожиданиями.

   • При наличии нескольких наборов данных — переключатель Dataset selector отображается и позволяет выбирать между ними.

2. Проверка заголовков и форматирования

   • Убедитесь, что:

     • Заголовки столбцов отображаются (если включено Show table header).

     • Имена столбцов соответствуют источникам данных или переопределениям (Display name).

     • Выравнивание текста (Column alignment) применяется корректно: по левому, центру или правому краю.

     • Перенос текста (Wrap text, Wrap header text) работает при длинных значениях.

3. Проверка сортировки

   • Убедитесь, что:

     • При клике на заголовок столбца данные сортируются по возрастанию/убыванию.

     • При удерживании Ctrl или Cmd можно добавить дополнительные уровни сортировки.

     • Сортировка корректно работает для чисел, дат и текста.

4. Проверка фильтрации

   • Убедитесь, что:

     • При включенном Column filter рядом с заголовками появляются значки воронки.

     • Фильтрация по значениям работает: можно выбирать/отменять значения, использовать поиск.

     • Операторы фильтрации (Contains, =, >, выражения) работают корректно.

     • Отфильтрованные столбцы помечаются синим значком.

     • Кнопка Clear filter сбрасывает фильтр.

     • Ad hoc фильтры (через значки в ячейках) корректно добавляют фильтры на панели.

5. Проверка пагинации и прокрутки

   • Убедитесь, что:

     • При включенной Enable pagination отображается постраничная навигация.

     • Количество строк на странице соответствует настройкам.

     • Прокрутка работает плавно, особенно при большом объеме данных.

     • Замороженные столбцы (Frozen columns) остаются на месте при горизонтальной прокрутке.

6. Проверка типов ячеек и стилизации

   • Убедитесь, что:

     • Для каждого столбца применен нужный Cell type (например, Gauge, Sparkline, Image).

     • Colored text и Colored background отображают цвета в соответствии с порогами, цветовой схемой или сопоставлениями значений.

     • Gauge отображается с выбранным режимом (Basic, Gradient, Retro LCD) и корректно отображает значение.

     • Sparkline строит график на основе временных рядов (если данные преобразованы соответствующим образом).

     • Image отображает изображения по URL или base64.

     • JSON View позволяет просматривать структуру объекта.

     • Markdown + HTML корректно рендерит разметку (при условии, что disable_sanitize_html разрешен).

     • Pill отображает списки значений в цветных блоках.

     • Actions отображает кнопки, и вызовы API работают при нажатии.

7. Проверка нижнего колонтитула (Table footer)

   • Убедитесь, что:

     • При выборе функции расчета (Calculation) в колонтитуле отображаются итоги (сумма, среднее, максимум и т.д.).

     • Расчеты применяются только к числовым полям.

     • При использовании Field overrides — вычисления можно настроить для конкретных столбцов.

8. Проверка всплывающих подсказок (Tooltip from field)

   • Убедитесь, что:

     • При включении Tooltip from field в ячейке появляется чип.

     • При наведении на чип отображается содержимое из выбранного поля.

     • Размещение подсказки (Tooltip placement) соответствует выбранному (Top, Bottom и т.д.).

     • Если применяются Value mappings к исходному полю — отображаемое значение в подсказке также изменяется.

9. Проверка ссылок и действий

   • Убедитесь, что:

     • Data links работают:

       • При одной ссылке — переход по одному клику.

       • При нескольких — открывается меню выбора.

       • Контекст (временной диапазон, переменные) сохраняется.

     • Actions (API-вызовы):

       • Отображаются с правильным заголовком.

       • При нажатии — выполняется запрос с указанными параметрами (метод, заголовки, тело).

       • Подтверждение действия (если задано) отображается корректно.

10. Проверка производительности и адаптивности

    • Убедитесь, что:

      • Таблица быстро загружается даже при большом объеме данных.

      • При включенной динамической высоте и Markdown — пагинация помогает избежать тормозов.

      • На мобильных устройствах таблица отображается корректно (при необходимости уменьшена минимальная ширина столбца).

      • При изменении размера панели — таблица адаптируется.

11. Проверка отображения в разных режимах

    • Убедитесь, что:

      • Визуализация корректно отображается в режиме редактирования и в режиме просмотра.

      • Все настройки сохраняются после перезагрузки дашборда.

      • При открытии в полноэкранном режиме — элементы не обрезаются.

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