Empezando con el widget comodín

Documentos > Dashboards > Guías para crear gráficos > Empezando con el widget comodín

Información general

El widget comodín es una potente y flexible herramienta de visualización en Datadog que permite crear representaciones visuales personalizadas utilizando la gramática Vega-Lite.

Objetivos del tutorial

Al final de este tutorial, podrás:

Utilizar conceptos de Vega-Lite para definir visualizaciones en widgets comodín.
Importar una consulta de un widget existente.

Requisitos previos

Una cuenta Datadog con acceso a notebooks o dashboards.
Dispones de telemetría como datos de rastreo APM o métricas de duración de las solicitudes.
Tienes conocimiento de los widgets y dashboards básicos de Datadog y puedes añadir un widget y editarlo.

Paso 1: Importar una consulta existente

En lugar de empezar desde cero, importa una consulta de un widget existente. Copia la consulta de un widget que te interese explorar más a fondo (como una lista principal). Para empezar, puedes utilizar widgets de tus dashboards precreados.

Ve a un dashboard existente con un widget útil (lista principal de consultas de bases de datos).
Utiliza el menú de widgets o el atajo de teclado (Ctrl/CMD + C) para copiar el widget.
En un nuevo dashboard, añada un widget comodín.
En el editor, borra la consulta por defecto ().
Pega la solicitud copiada con Ctrl/Cmd + V. La consulta y los campos asociados se transfieren automáticamente.

Paso 2: Afinar la consulta

En el editor de consultas:

Despliega Data Preview (Vista previa de datos) para identificar los campos devueltos por la consulta.
Junto a tu consulta, haz clic en As (Como) para añadir un alias a tu consulta. Esto añade claridad, por ejemplo, cambia el nombre a p50:trace.http.request{*} by {service}→ p50.

Paso 3: Generar una visualización de forma automática

En la parte superior del editor de consultas:

Haz clic en la pestaña Define Visual (Definir Visual).
Presiona Cmd + Mayúsc + P (Mac) or Ctrl + Mayúsc + P (Windows/Linux) para abrir la Paleta de comandos.
Selecciona Auto-select chart (Seleccionar gráfico de forma automática).

Datadog crea automáticamente una visualización basada en tu consulta.

Utiliza la paleta de comandos(Cmd + Mayús + P) para seleccionar de forma automática un tipo de gráfico basado en tu consulta, añadir o editar codificaciones, o rotar ejes/cambiar el tipo de gráfico.

Ejemplo guiado de generación automática

En un nuevo widget comodín, haz clic en la pestaña JSON del editor de consultas y pega la siguiente consulta:

{
  "response_format": "scalar",
  "queries": [
    {
      "query":       "avg:system.cpu.user{*} by {env}",
      "data_source": "metrics",
      "name":        "query1",
      "aggregator":  "last"
    },
    {
      "query":       "max:system.cpu.user{*} by {env}",
      "data_source": "metrics",
      "name":        "query2",
      "aggregator":  "last"
    }
  ],
  "formulas": [
    { "formula": "query1" },
    { "formula": "query2" }
  ],
  "sort": {
    "count": 15,
    "order_by": [
      {
        "type":   "formula",
        "index":  0,
        "order":  "desc"
      }
    ]
  }
}

Haz clic en Save Edits (Guardar modificaciones).
En la parte superior del editor de consultas, haz clic en la pestaña Define Visual )Definir Visual).
Presiona Cmd + Mayúsc + P (Mac) or Ctrl + Mayúsc + P (Windows/Linux) para abrir la Paleta de comandos.
Selecciona Auto-select chart (Seleccionar gráfico de forma automática). El gráfico cambia de forma automática de diagrama de barras a diagrama de dispersión.

Paso 4: Añadir un menú contextual

Para añadir interactividad a tu gráfico, activa el menú contextual.

En el editor visual JSON, copia y pega el siguiente ejemplo de widget de gráfico de barras para ver cómo añadir un menú contextual. Este ejemplo incluye las configuraciones Tooltip y Menú contextual.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "descripción": "Gráfico de barras que muestra el uso de la CPU por entorno con soporte del menú contextual Datadog ",
  "data": {
 "name": "table1"
  },
  "marca": "bar",
  "encoding": {
 "x": {
   "field": "env",
   "type": "nominal",
   "sort": "-y",
   "title": "Environment"
 },
 "y": {
   "field": "query1",
   "type": "quantitative",
   "title": "CPU Usage (%)"
 },
 "tooltip": [
   {
     "field": "env",
     "type": "nominal"
   },
   {
     "field": "query1",
     "type": "quantitative",
     "title": "CPU Usage (%)"
   },
   {
     "field": "timestamp",
     "type": "temporal",
     "title": "Timestamp"
   }
 ]
  },
  "params": [
 {
   "name": "datadogPointSelection",
   "select": "point"
 }
  ]
}

Ejecuta y guarda el widget.
En tu panel de control, busca el widget que acabas de crear y haz clic en cualquier punto de datos del gráfico para abrir un menú contextual.