Looking for an annunciator panel heat map visualization

Elastic Observability
4

Hi Bob,

Your question piqued my interest and I tried to implement a custom Vega visualization. I tested this in 7.15.0 so I'm not sure if it will work in 7.12.0.

It's not as pretty as the Metrics app, but should be embeddable into a dashboard.

Let me know if you are able to use it. :slightly_smiling_face:

{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  title: Metrics by Node
  data: {
    url: {
      /*
        An object instead of a string for the "url" param is treated as an Elasticsearch query. Anything inside this object is not part of the Vega language, but only understood by Kibana and Elasticsearch server. This query calculates the average CPU percent for each unique host name for the time interval selected in the Time Picker.
        
        Kibana has a special handling for the fields surrounded by "%".  They are processed before the the query is sent to Elasticsearch. This way the query becomes context aware, and can use the time range and the dashboard filters.
      */

      // Apply dashboard context filters when set.
      %context%: true
      %timefield%: @timestamp
      index: metricbeat-*
      body: {
        aggs: {
          nodes: {
            terms: {
              field: host.name
            }
            aggs: {
              avg_cpu: {
                avg: {
                  field: system.cpu.total.pct
                }
              }
            }
          }
        }
        size: 0
      }
    }
    format: {
      property: aggregations.nodes.buckets
    }
  }
  /**
    Use a facet operator to split the panels into three columns.
    However, I can't figure out how to get rid of the labels above each square.
    But you could remove the second object in the layer array below if you don't
    mind the label being above the square.
  */
  columns: 3
  facet: {
    field: key
    type: ordinal
    header: {
      title: false
    }
  }
  spec: {
    encoding: {
      /**
        Here we take the value from the avg_cpu aggregation above
        and use that to determine the color.
      */
      color: {
        field: avg_cpu.value
        type: quantitative
      }
    }
    /**
      We use multiple layers to support creating both the squares 
      and the text labels centered on the square.
    */
    layer: [
      {
        mark: square
      }
      {
        mark: {
          type: text
        }
        encoding: {
          text: {
            field: key
          }
          color: {
            value: black
          }
        }
      }
    ]
  }
  config: {
    square: {
      // Set each square size in pixel area (128px * 128px).
      size: 16384
    }
  }
}
1 Like