Pull to refresh

Руководство пользователя Kibana. Визуализация. Часть 6

Reading time 7 min
Views 17K
Original author: Elastic Stack
Пятая часть перевода официальной документации по визуализации данных в 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

Графы Vega


Предупреждение. Эта функция является экспериментальной и может быть изменена или удаленна в будущем выпуске. Elastic приложит все усилия, чтобы исправить любые проблемы, но экспериментальные функции не подлежат поддержке SLA официальных функций GA.
Вы можете строить визуализации данных Vega и VegaLite внутри Kibana, как в автономном режиме, так и поверх карты. Чтобы увидеть Vega в действии, посмотрите это короткое обзорное видео.

Начните работу с Vega


Следуйте этим шагам для создания вашей первой визуализации Vega.

  1. В Kibana выберите Visualize и добавьте визуализацию Vega. Вы должны увидеть граф по умолчанию.
  2. Попробуйте изменить mark из line в point, area, bar, circle, square, … (смотри документацию).
  3. Попробуйте остальные визуализации Vega или VegaLite. Вам может понадобится сделать URL-адреса абсолютными, к примеру заменить "url": "data/world-110m.json" на "url": "https://vega.github.io/editor/data/world-110m.json" (смотри примечание ниже).
  4. Используя утилиту 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


Когда используются примеры 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 вверху справа.

Какие просмотры доступны, зависит от инспектируемой визуализации.
Tags:
Hubs:
+5
Comments 5
Comments Comments 5

Articles