Пятая часть перевода официальной документации по визуализации данных в Kibana.
Ссылка на оригинальный материал: Kibana User Guide [6.6] » Visualize
Ссылка на 1 часть: Руководство пользователя Kibana. Визуализация. Часть 1
Ссылка на 2 часть: Руководство пользователя Kibana. Визуализация. Часть 2
Ссылка на 3 часть: Руководство пользователя Kibana. Визуализация. Часть 3
Ссылка на 4 часть: Руководство пользователя Kibana. Визуализация. Часть 4
Ссылка на 5 часть: Руководство пользователя Kibana. Визуализация. Часть 5
Содержание:
1. Vega Graphs
2. Inspecting Visualizations
Предупреждение. Эта функция является экспериментальной и может быть изменена или удаленна в будущем выпуске. Elastic приложит все усилия, чтобы исправить любые проблемы, но экспериментальные функции не подлежат поддержке SLA официальных функций GA.
Вы можете строить визуализации данных Vega и VegaLite внутри Kibana, как в автономном режиме, так и поверх карты. Чтобы увидеть Vega в действии, посмотрите это короткое обзорное видео.
Следуйте этим шагам для создания вашей первой визуализации Vega.
VegaLite — это упрощенная версия Vega, полезная для быстрого старта, но имеющая ряд ограничений. VegaLite автоматически преобразовывается в Vega перед выполнением. Сравните logstash-simple_line-vega и logstash-simple_line-vegalite (оба используют некоторые данные logstash из Elasticsearch). Вы можете использовать этот редактор для конвертации VegaLite в Vega.
По умолчанию, элемент данных Vega может использовать встроенные и внешние данные с параметром
Вот пример запроса Elasticsearch, который подсчитывает количество документов во всех индексах. Запрос использует поле
Полный результат имеет следующий тип структуры:
Обратите внимания что
Для большинства графов нам нужен только список значений сегмента, поэтому мы используем выражение
Запрос может быть указан с индивидуальным диапазоном и контекстной информационной панелью. Этот запрос эквивалентен
Это возможность доступа к файлам Elastic Map Service согласно некоторого механизма.
Карта Kibana по умолчанию может использоваться как база для графа Vega. Чтобы включить, граф должен определить
Эта визуализация автоматически внедрит проекцию под названием
Используйте инструменты браузера для отладки (к примеру, F12 или Ctrl+Shift+J в Chrome) для инспекции переменной
Если вы используете запрос Elasticsearch, убедитесь, что полученные данные это то что вы ожидали. Самый легкий путь посмотреть это, используя вкладку «networking» в инструментах отладки браузера (к примеру, F12). Немного модифицируйте граф, чтобы он делал поисковый запрос и просматривал ответ сервера. Другой подход заключается в использовании вкладки Kibana Dev Tools — помещает имя индекса внутрь первой линии:
Если вам нужно поделится графом с кем-то, вы можете скопировать ответ строки данных на gist.github.com, возможно с расширением .json, используйте кнопку [raw], и использовать этот url непосредственно в вашем графе.
Для запрета Vega использовать источники данных, не относящиеся к ES, добавьте
Когда используются примеры Vega и VegaLite, вам нужно модифицировать секцию «data» для использования абсолютного URL. К примеру, замените
Эти опции специфичны для Kibana. Поддержка карты имеет дополнительные опции конфигурации.
Vega и VegaLite.
По умолчанию, графы Vega в Kibana будут использовать модель макета
Vega на карте.
Все графы Vega будут игнорировать значения
Многие визуализации позволяют вам инспектировать данные, лежащие в основе визуализации.
Для инспекции визуализации, кликните кнопку Inspect в редакторе или выберите Inspect из меню панели Dashboard.
Начальный экран показывает основные данные для визуализации. Вы можете загрузить данные как файл значений, разделенные запятой (CSV) в форматах Formatted или Raw. Formatted загружает данные в формате таблицы. Raw загружает данные как представлено — даты как временные метки, числа без тисячных разделителей и т. д.
Для просмотра запросов, что собирают данные, выберите Requests из меню View вверху справа.
Какие просмотры доступны, зависит от инспектируемой визуализации.
Ссылка на оригинальный материал: Kibana User Guide [6.6] » Visualize
Ссылка на 1 часть: Руководство пользователя Kibana. Визуализация. Часть 1
Ссылка на 2 часть: Руководство пользователя Kibana. Визуализация. Часть 2
Ссылка на 3 часть: Руководство пользователя Kibana. Визуализация. Часть 3
Ссылка на 4 часть: Руководство пользователя Kibana. Визуализация. Часть 4
Ссылка на 5 часть: Руководство пользователя Kibana. Визуализация. Часть 5
Содержание:
1. Vega Graphs
2. Inspecting Visualizations
Графы Vega
Предупреждение. Эта функция является экспериментальной и может быть изменена или удаленна в будущем выпуске. Elastic приложит все усилия, чтобы исправить любые проблемы, но экспериментальные функции не подлежат поддержке SLA официальных функций GA.
Вы можете строить визуализации данных Vega и VegaLite внутри Kibana, как в автономном режиме, так и поверх карты. Чтобы увидеть Vega в действии, посмотрите это короткое обзорное видео.
Начните работу с Vega
Следуйте этим шагам для создания вашей первой визуализации Vega.
- В Kibana выберите Visualize и добавьте визуализацию Vega. Вы должны увидеть граф по умолчанию.
- Попробуйте изменить
mark
изline
вpoint
,area
,bar
,circle
,square
, … (смотри документацию). - Попробуйте остальные визуализации Vega или VegaLite. Вам может понадобится сделать URL-адреса абсолютными, к примеру заменить
"url": "data/world-110m.json"
на"url": "https://vega.github.io/editor/data/world-110m.json"
(смотри примечание ниже). - Используя утилиту makelogs, создайте некоторые данные logstash и попробуйте примеры logstash (Не используйте makelogs на производственном кластере).
Vega vs VegaLite
VegaLite — это упрощенная версия Vega, полезная для быстрого старта, но имеющая ряд ограничений. VegaLite автоматически преобразовывается в Vega перед выполнением. Сравните logstash-simple_line-vega и logstash-simple_line-vegalite (оба используют некоторые данные logstash из Elasticsearch). Вы можете использовать этот редактор для конвертации VegaLite в Vega.
Запросы Elasticsearch
По умолчанию, элемент данных Vega может использовать встроенные и внешние данные с параметром
"url"
. Kibana добавляет поддержку для непосредственных запросов Elasticsearch путем перезагрузки значения "url"
.Вот пример запроса Elasticsearch, который подсчитывает количество документов во всех индексах. Запрос использует поле
@timestamp
, чтобы отфильтровать временной диапазон и разбить его на сегменты гистограммы.// An object instead of a string for the url value
// is treated as a context-aware Elasticsearch query.
url: {
// Filter the time picker (upper right corner) with this field
%timefield%: @timestamp
// Apply dashboard context filters when set
%context%: true
// Which indexes to search
index: _all
// The body element may contain "aggs" and "query" subfields
body: {
aggs: {
time_buckets: {
date_histogram: {
// Use date histogram aggregation on @timestamp field
field: @timestamp
// interval value will depend on the daterange picker
// Use an integer to set approximate bucket count
interval: { %autointerval%: true }
// Make sure we get an entire range, even if it has no data
extended_bounds: {
min: { %timefilter%: "min" }
max: { %timefilter%: "max" }
}
// Use this for linear (e.g. line, area) graphs
// Without it, empty buckets will not show up
min_doc_count: 0
}
}
}
// Speed up the response by only including aggregation results
size: 0
}
}
Полный результат имеет следующий тип структуры:
{
"aggregations": {
"time_buckets": {
"buckets": [{
"key_as_string": "2015-11-30T22:00:00.000Z",
"key": 1448920800000,
"doc_count": 28
}, {
"key_as_string": "2015-11-30T23:00:00.000Z",
"key": 1448924400000,
"doc_count": 330
}, ...
Обратите внимания что
"key"
является меткой времени Unix и может использоваться без преобразований выражениями даты Vega.Для большинства графов нам нужен только список значений сегмента, поэтому мы используем выражение
format: {property: "aggregations.time_buckets.buckets"}
что бы сфокусироваться только на тех данных, что нам нужны.Запрос может быть указан с индивидуальным диапазоном и контекстной информационной панелью. Этот запрос эквивалентен
"%context%": true, "%timefield%": "@timestamp"
, за исключением сдвига временного диапазона на 10 минут назад.{
body: {
query: {
bool: {
must: [
// This string will be replaced
// with the auto-generated "MUST" clause
"%dashboard_context-must_clause%"
{
range: {
// apply timefilter (upper right corner)
// to the @timestamp variable
@timestamp: {
// "%timefilter%" will be replaced with
// the current values of the time filter
// (from the upper right corner)
"%timefilter%": true
// Only work with %timefilter%
// Shift current timefilter by 10 units back
shift: 10
// week, day (default), hour, minute, second
unit: minute
}
}
}
]
must_not: [
// This string will be replaced with
// the auto-generated "MUST-NOT" clause
"%dashboard_context-must_not_clause%"
]
}
}
}
}
"%timefilter%"
также может использоваться для определения одного минимального или максимального значения. Как показано выше, extended_bounds
в date_histogram может быть установлен с двумя значениями — минимум и максимум. Вместо жесткого кодирования значения вы можете использовать "min": {"%timefilter%": "min"}
, который будет перезаписан на начало текущего временного диапазона. Значения shift
и unit
также поддерживаются. «Интервал» может быть установлен динамически, в зависимости от выбранного в настоящий момент диапазона: "interval": {"%autointerval%": 10}
будет пытаться получить около 10-15 точек данных (сегментов).Файлы Elastic Map
Это возможность доступа к файлам Elastic Map Service согласно некоторого механизма.
url: {
// "type" defaults to "elasticsearch" otherwise
type: emsfile
// Name of the file, exactly as in the Region map visualization
name: World Countries
}
// The result is a geojson file, get its features to use
// this data source with the "shape" marks
// https://vega.github.io/vega/docs/marks/shape/
format: {property: "features"}
Vega с картой
Карта Kibana по умолчанию может использоваться как база для графа Vega. Чтобы включить, граф должен определить
type=map
в конфигурации хоста.{
"config": {
"kibana": {
"type": "map",
// Initial map position
"latitude": 40.7, // default 0
"longitude": -74, // default 0
"zoom": 7, // default 2
// defaults to "default". Use false to disable base layer.
"mapStyle": false,
// default 0
"minZoom": 5,
// defaults to the maximum for the given style,
// or 25 when base is disabled
"maxZoom": 13,
// defaults to true, shows +/- buttons to zoom in/out
"zoomControl": false,
// defaults to true, disables mouse wheel zoom
"scrollWheelZoom": false,
// When false, repaints on each move frame.
// Makes the graph slower when moving the map
"delayRepaint": true, // default true
}
},
/* the rest of Vega JSON */
}
Эта визуализация автоматически внедрит проекцию под названием
"projection"
. Используйте это для вычисления положения всех гео-ориентированных меток. Дополнительно, вы можете использовать долготу, широту и масштабирование. Эти сигналы могут быть использованы в графе или могут быть обновлены для изменения позиционирования карты.Отладка
Консоль отладки брузера
Используйте инструменты браузера для отладки (к примеру, F12 или Ctrl+Shift+J в Chrome) для инспекции переменной
VEGA_DEBUG
: *view
— доступ до Просмотра объекта Vega. Смотри Vega Debugging Guide на предмет как инспектировать данные и сигналы во время исполнения. Для VegaLite VEGA_DEBUG.view.data('source_0')
получает основной набор данных. Для Vega это использует имя данных, что определенно в вашей спецификации Vega. * vega_spec
спецификация графа Vega JSON после некоторых модификаций от Kibana. В случае с VegaLite это вывод компилятора VegaLite. * vegalite_spec
— если это граф VegaLite, спецификация JSON графа перед компиляцией VegaLiteДанные
Если вы используете запрос Elasticsearch, убедитесь, что полученные данные это то что вы ожидали. Самый легкий путь посмотреть это, используя вкладку «networking» в инструментах отладки браузера (к примеру, F12). Немного модифицируйте граф, чтобы он делал поисковый запрос и просматривал ответ сервера. Другой подход заключается в использовании вкладки Kibana Dev Tools — помещает имя индекса внутрь первой линии:
GET <INDEX_NAME>/_search
, и добавить ваш запрос следующей строкой (только значение поля "query"
).Если вам нужно поделится графом с кем-то, вы можете скопировать ответ строки данных на gist.github.com, возможно с расширением .json, используйте кнопку [raw], и использовать этот url непосредственно в вашем графе.
Для запрета Vega использовать источники данных, не относящиеся к ES, добавьте
vega.enableExternalUrls: false
в файл kibana.yml.Полезные ссылки
- Редактор — включает примеры для Vega и VegaLite, но не поддерживает какие-либо специфичные функции Kibana на подобие запросов Elasticsearch и интерактивные базовые карты.
- Учебники, документы и примеры VegaLite.
- Учебники, документы и примеры Vega.
Использование примеров Vega и VegaLite
Когда используются примеры Vega и VegaLite, вам нужно модифицировать секцию «data» для использования абсолютного URL. К примеру, замените
"url": "data/world-110m.json"
на "url": "https://vega.github.io/editor/data/world-110m.json"
. Также в регулярных примерах Vega используют модель макета "autosize": "pad"
, а Kibana использует fit
. Удалите все значения autosize
, width
и height
. Смотри ниже размеры и позиционирование.Дополнительные опции конфигурирования
Эти опции специфичны для Kibana. Поддержка карты имеет дополнительные опции конфигурации.
{
config: {
kibana: {
// Placement of the Vega-defined signal bindings.
// Can be `left`, `right`, `top`, or `bottom` (default).
controlsLocation: top
// Can be `vertical` or `horizontal` (default).
controlsDirection: vertical
// If true, hides most of Vega and VegaLite warnings
hideWarnings: true
// Vega renderer to use: `svg` or `canvas` (default)
renderer: canvas
}
}
/* the rest of Vega code */
}
Размер и позиция
Vega и VegaLite.
По умолчанию, графы Vega в Kibana будут использовать модель макета
autosize = { type: 'fit', contains: 'padding' }
для графов Vega и VegaLite. Модель fit
использует все доступное пространство, игнорируя значения width
и height
, но учитывает значения отступа. Вы можете переопределить это поведение, указав другое значение autosize
.Vega на карте.
Все графы Vega будут игнорировать значения
autosize
, width
, height
и padding
, используя модель fit
с нулевым отступом.Инспекция визуализаций
Многие визуализации позволяют вам инспектировать данные, лежащие в основе визуализации.
Для инспекции визуализации, кликните кнопку Inspect в редакторе или выберите Inspect из меню панели Dashboard.
Начальный экран показывает основные данные для визуализации. Вы можете загрузить данные как файл значений, разделенные запятой (CSV) в форматах Formatted или Raw. Formatted загружает данные в формате таблицы. Raw загружает данные как представлено — даты как временные метки, числа без тисячных разделителей и т. д.
Для просмотра запросов, что собирают данные, выберите Requests из меню View вверху справа.
Какие просмотры доступны, зависит от инспектируемой визуализации.