Create Custom Visualization for Kibana

[mastersmit (Smit)]

I have a requirement to create a visualisation that replicates one of the legacy system.
In the below screenshot it shows the expected and what i have so far...

I could create a frontend, but was hoping if there is a way i could create a visualisation and embed as part of dashboard.

[aaron-nimocks]

Can you go into further detail about the functionality and how this would work?

[mastersmit (Smit)]

Hi Aaron,

Functionality is similiar to what I have achieved using DataTable i.e. I search by a reference number in the field, I am able to see the a single record (as a row, in the table view).

What I want to achieve, is a more customised view of that same exact data, into a more business friendly (i.e. aligning to the legacy system view).

let me know if this helps.

Regards.

[aaron-nimocks]

Got it, thanks for the explanation.

So good news is you don't need to build a custom frontend for this and can use Vega. Bad news is Vega could be a large learning curve depending on your background.

Below is an example of how to draw boxes and put text on the screen which you can copy/paste in the Vega Editor to view this. In my example I am using static data for demo purposes so when you build this in Kibana you will need to do a query against an index to pull the data.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 300,
  "height": 150,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [{"name": "Release Date", "value": "8 February 2010"}]
    }
  ],
  "marks": [
    {
      "name": "boxOuter",
      "type": "rect",
      "encode": {
        "enter": {
          "stroke": {"value": "black"},
          "x": {"signal": "padding.left"},
          "y": {"signal": "padding.top"},
          "width": {"signal": "width - padding.right - padding.left"},
          "height": {"signal": "height - padding.top - padding.bottom"},
          "cornerRadius": {"value": 15}
        }
      }
    },
    {
      "name": "boxHeader",
      "type": "rect",
      "encode": {
        "enter": {
          "fill": {"value": "#8aacb8"},
          "stroke": {"value": "black"},
          "x": {"signal": "padding.left"},
          "y": {"signal": "padding.top"},
          "width": {"signal": "width - padding.right - padding.left"},
          "height": {"signal": "height / 4"},
          "cornerRadiusTopLeft": {"value": 15},
          "cornerRadiusTopRight": {"value": 15}
        }
      }
    },
    {
      "name": "boxHeaderText",
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "padding.top + ((height / 4) / 2)"},
          "text": {"field": "name"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"signal": "(width / 20) + 15"},
          "fill": {"value": "#222b2e"}
        }
      }
    },
    {
      "name": "boxText",
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "(height / 2) + ((height / 4) / 2)"},
          "text": {"field": "value"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"signal": "(width / 20) + 20"},
          "fill": {"value": "#eb2d3a"}
        }
      }
    }
  ]
}

[mastersmit (Smit)]

Amazing. Thanks Aaron for prompt & thorough response.

Let me look into Vega, definitely a new topic but if that solves my problem, its a try worth giving.

Thanks again.

Have a great weekend!

[mastersmit (Smit)]

@aaron-nimocks

"width": 300,
  "height": 150,
  "padding": 5,

@aaron-nimocks Manage to do a few twicks, but now i am wondering how do i get the orderId from the search filter of the dashboard?

Here is the so-far result:

{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  "params": [
    { "element": }
  ],
  data: {
    url: {
      index: kibana_sample_data_ecommerce
      body: {
        query: {
          match: {
            order_id: {
              query: "572928"
            }
          }
        }
        size: 3
      }
    }
    format: {
      property: hits.hits
    }
  }
  width: 300
  height: 150
  autosize: fit
  title: {
    text: Order Details
    fontSize: 24
    fontWeight: normal
    anchor: start
  }
  layer: [
    {
      mark: {
        type: text
        fontSize: 24
        dx: -300
        dy: -130
      }
      encoding: {
        text: {
          value: Order Id:
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 14
        dx: -200
        dy: -130
      }
      encoding: {
        text: {
          field: _source.order_id
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 24
        dx: -290
        dy: -100
      }
      encoding: {
        text: {
          value: Full Name:
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 14
        dx: -170
        dy: -100
      }
      encoding: {
        text: {
          field: _source.customer_full_name
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 24
        dx: -270
        dy: -70
      }
      encoding: {
        text: {
          value: Taxable Price:
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 14
        dx: -170
        dy: -70
      }
      encoding: {
        text: {
          field: _source.taxful_total_price
        }
        color: {
          value: black
        }
      }
    }
  ]
}

[Felix_Roessel]

AFAIK
If you remove the query filter in vega it will take the filter context from the dashboard.

[mastersmit (Smit)]

Simple, yet effective. I had to add this
%context%: true
%timefield%: order_date

and it worked in Viz, but when i embed the same in the dashboard, the search is not picking up... anything extra i have to do?

[Felix_Roessel]

Don't have time to test it..
But this one is picking up the dashboard search context:

Sankey visualization example at elastic content share

This may help to dig into the issue

[aaron-nimocks]

Can you post your spec? Not sure why it wouldn't work in a dashboard but does in a visualization.

[mastersmit (Smit)]

Thanks @aaron-nimocks @Felix_Roessel Not sure what was the problem, i tried the same today and it worked even in the dashboard (however i did recreate the dashboard).