Hi,
I have created a pie chart using Vega. When you click on a part of pie chart, it should redirect you to another dashboard in Kibana based on the part that was clicked.
So, I believe I'll have to add filters to the other dashboard link based on the part that was clicked so that the redirected dashboard will have the filters applied.
How can this be achieved using Vega ( add filter to dashboard link) ?
Can anyone help in this ?
The Vega spec looks like this -
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Event counts from all indexes",
"data": [
{
"name": "availabledata",
"url": {
"index": "available-book*",
"body": {
"aggs": {"avail_name": {"terms": {"field": "name.keyword"}}},
"size": 0
}
},
"format": {"property": "aggregations.avail_name.buckets"},
"transform": [{"type": "project", "fields": ["key"], "as": ["avail_book"]}]
},
{
"name": "totaldata",
"url": {
"index": "total-book*",
"body": {
"aggs": {"total_name": {"terms": {"field": "name.keyword"}}},
"size": 0
}
},
"format": {"property": "aggregations.total_name.buckets"},
"transform": [
{"type": "project", "fields": ["key"], "as": ["total_books"]},
{
"type": "lookup",
"from": "availabledata",
"key": "avail_book",
"fields": ["total_books"],
"values": ["avail_book"],
"as": ["available_books"]
},
{
"type": "aggregate",
"fields": ["total_books", "available_books"],
"ops": ["valid", "valid"],
"as": ["total_book", "available_book"]
},
{
"type": "formula",
"expr": "(datum.total_books)-(datum.available_book)",
"as": "unavailable_book"
},
{
"type": "fold",
"fields": ["available_book", "unavailable_book"],
"as": ["status", "value"]
},
{"type": "pie", "field": "value", "sort": {"value": true}}
]
},
{
"name": "selected",
"on": [
{"trigger": "clear", "remove": true},
{"trigger": "!shift", "remove": true},
{"trigger": "!shift && clicked", "insert": "clicked"},
{"trigger": "shift && clicked", "toggle": "clicked"}
]
}
],
"signals": [
{
"name": "clear",
"value": true,
"on": [
{"events": "mouseup[!event.item]", "update": "true", "force": true}
]
},
{
"name": "shift",
"value": false,
"on": [
{
"events": "@legendSymbol:click, @legendLabel:click",
"update": "event.shiftKey",
"force": true
}
]
},
{
"name": "clicked",
"value": null,
"on": [
{
"events": "@legendSymbol:click, @legendLabel:click",
"update": "{value: datum.value}",
"force": true
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "totaldata", "field": "status"},
"range": ["#1f77b4", "#ff7f0e"]
}
],
"legends": [
{
"stroke": "color",
"title": "MsgId",
"encode": {
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
"fill": {"value": "transparent"},
"strokeWidth": {"value": 2},
"opacity": [
{
"test": "!length(data('selected')) || indata('selected', 'value', datum.value)",
"value": 1
},
{"value": 0.15}
],
"size": {"value": 64}
}
},
"labels": {
"name": "legendLabel",
"interactive": true,
"update": {
"opacity": [
{
"test": "!length(data('selected')) || indata('selected', 'value', datum.value)",
"value": 1
},
{"value": 0.25}
]
}
}
}
}
],
"marks": [
{
"name": "mark_donut",
"type": "arc",
"from": {"data": "totaldata"},
"encode": {
"update": {
"fill": {"scale": "color", "field": "status"},
"x": {"signal": "width/2"},
"y": {"signal": "height/2"},
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"value": 0.02},
"innerRadius": {"value": 60},
"outerRadius": {"value": 100},
"tooltip": {
"signal": "{'Status': datum.status, 'Value': datum.value}",
"nearest": true
},
"opacity": [
{
"test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
"value": 0.7
},
{"value": 0.15}
],
"stroke": [
{
"test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
"scale": "color",
"field": "status"
},
{"value": "#ccc"}
]
href:{
value: "#/dashboard/3e708620-885a-11ee-8faf-6719c714f0a0"
}
}
}
},
{
"name": "mark_value",
"type": "text",
"from": {"data": "totaldata"},
"encode": {
"enter": {
"text": {
"signal": "if(datum['endAngle'] - datum['startAngle'] < 0.3, '', datum['value'])"
},
"x": {"signal": "width/2"},
"y": {"signal": "height/2"},
"radius": {"value": 75},
"theta": {"signal": "(datum['startAngle'] + datum['endAngle'])/2"},
"fill": {"value": "black"},
"fontSize": {"value": 12},
"align": {"value": "center"},
"baseline": {"value": "middle"}
"opacity": [
{
"test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
"value": 1
},
{"value": 0.11}
]
"fillOpacity": [
{
"test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
"value": 1
},
{"value": 0.11}
]
}
}
},
{
"name": "marks_text",
"type": "text",
"style": ["text"],
"from": {"data": "totaldata"},
"encode": {
"enter": {
"fill": {"value": "#6092C0"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontWeight": {"value": "bold"}
},
"update": {
"opacity": {"value": 1},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"},
"text": {"field": "total_pdu"},
"fontSize": {"value": 30}
},
"hover": {"opacity": {"value": 0.5}}
}
}
]
}