Vega

Vega 和 Vega-Lite 是开源的声明式可视化语言工具，你可以使用它们结合 UDB-SX 数据和 Vega 数据 创建自定义数据可视化。这些工具特别适合熟悉直接编写 UDB-SX 查询的高级用户。 在 opensearch_dashboards.yml 文件中启用 vis_type_vega 插件后，你可以使用 Vega 规范 编写 JSON 或 HJSON 格式的可视化定义，或者在 Vega 规范中指定一个或多个 UDB-SX 查询。默认情况下，该插件已设置为 true。

从多个数据源创建 Vega 可视化

在开始前，请确保以下配置已在 config/udbsx_dasboards.yaml 文件中启用。

data_source.enabled: true
vis_type_vega.enabled: true

在你在 UDB-SX Dashboards 中配置了多个数据源之后，就可以使用 Vega 查询这些数据源。以下 GIF 展示了在 UDB-SX Dashboards 中创建 Vega 可视化的过程。

步骤 1：设置并连接数据源

打开 UDB-SX Dashboards，按照以下步骤操作：

1. 从左侧菜单中选择 控制面板管理。

2. 选择 数据源，然后点击 创建数据源连接 按钮。

3. 在 创建数据源 页面中，输入连接详情和端点 URL

4. 在 首页 页面中，选择 添加示例数据。在 数据源 下拉菜单中选择你新建的数据源，然后点击 添加数据 按钮，为 Web示例日志） 数据集添加数据。

步骤 2：创建可视化

1. 从左侧菜单中选择 可视化。

2. 在 可视化） 页面中，选择 创建可视化），然后在弹出窗口中选择 Vega。

步骤 3：添加 Vega 规范

默认情况下，查询使用来自本地集群的数据。你可以在 Vega 规范中的每个 UDB-SX 查询中为其分配不同的 data_source_name 值。
这样可以在单个可视化中跨不同数据源查询多个索引。

1. 确认你创建的数据源已在 data_source_name 字段中指定。
   或者，在你的 Vega 规范中，在 url 属性下添加 data_source_name 字段，以通过名称指定目标数据源。

2. 复制以下 Vega 规范，然后点击右下角的 更新 按钮。可视化应会自动显示。

{
  $schema: https://vega.github.io/schema/vega-lite/v5.json
  data: {
    url: {
      %context%: true
      %timefield%: @timestamp
      index: opensearch_dashboards_sample_data_logs
      data_source_name: YOUR_DATA_SOURCE_TITLE
      body: {
        aggs: {
          1: {
            date_histogram: {
              field: @timestamp
              fixed_interval: 3h
              time_zone: America/Los_Angeles
              min_doc_count: 1
            }
            aggs: {
              2: {
                avg: {
                  field: bytes
                }
              }
            }
          }
        }
        size: 0
      }
    }
    format: {
      property: aggregations.1.buckets
    }
  }
  transform: [
    {
      calculate: datum.key
      as: timestamp
    }
    {
      calculate: datum[2].value
      as: bytes
    }
  ]
  layer: [
    {
      mark: {
        type: line
      }
    }
    {
      mark: {
        type: circle
        tooltip: true
      }
    }
  ]
  encoding: {
    x: {
      field: timestamp
      type: temporal
      axis: {
        title: @timestamp
      }
    }
    y: {
      field: bytes
      type: quantitative
      axis: {
        title: Average bytes
      }
    }
    color: {
      datum: Average bytes
      type: nominal
    }
  }
}