Vega-lite Concatenating views with 'concat' error message: "Invalid spec"

Elastic Stack Kibana
1

Hi,
I'm trying to use vega-lite visualization in Kibana using concatenating views, specifically concat. Basically I have four numbers which I've calculated using various aggregations from elasticsearch which I want to display as plain text but with corresponding labels. This is what I get using Vega editor:

1
1.png1081×116 8.34 KB

And the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"data": {
"values": [{"In": "40,005.65", "Out": "37,344.35", "Diff": "2,661.30", "Perc": "93.35 %"}]
},
"background": "red",

  "config": {
    "style": {
      "cell": {
        "stroke": "transparent"
      }
    },
    "text": {
      "fontSize": 48,
      "fontWeight": 500,
      "color": "yellow",
      "align": "left"
    }
  },


  "columns": 4,

  "spacing": 0,

  "concat": [
    {
      "mark": {
        "type": "text",
        "dx": 0,
        "text": "In",
        "fontSize": 24,
        "fontWeight": "normal"
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30,
        "text": "Out",
        "fontSize": 24,
        "fontWeight": "normal"
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30,
        "text": "Difference",
        "fontSize": 24,
        "fontWeight": "normal"
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30,
        "text": "Percentage",
        "fontSize": 24,
        "fontWeight": "normal"
      }
    },    
    {
      "mark": {
        "type": "text"
      },
      "encoding": {
        "text": {
          "field": "In", 
          "type": "ordinal"
        }
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30
      },
      "encoding": {
        "text": {
          "field": "Out", 
          "type": "ordinal"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "dx": 30
      },
      "encoding": {
        "text": {
          "field": "Diff", 
          "type": "ordinal"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "dx": 30
      },
      "encoding": {
        "text": {
          "field": "Perc", 
          "type": "ordinal"
        }
      }
    }
  ]
}

But when I switch to Kibana UI I'm getting an error "Invalid spec". The query part is returning the data OK that's not the problem, if I use hconcat instead of concat everything displays but I want labels to be above the data.
The code from Kibana is:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"title": "",
"data": {...},

  "transform": [
    { "calculate": "datum.pay_in_sum_amount.value_as_string", "as": "In" },
    { "calculate": "datum.pay_out_sum_amount.sum_amount.value_as_string", "as": "Out" },
    { "calculate": "datum.ggr.value_as_string", "as": "Diff" },
    { "calculate": "datum.rtp.value_as_string + ' %'", "as": "Perc" }
  ],

  "background": "red",

  "autosize": {"type": "fit"},
  
  "config": {
    "style": {
      "cell": {
        "stroke": "transparent"
      }
    },
    "text": {
      "fontSize": 48,
      "fontStyle": "Bold",
      "color": "yellow",
      "align": "left"
    }
  },

  "columns": 4,

  "spacing": 0,

  "concat": [
    {
      "mark": {
        "type": "text",
        "dx": 0,
        "text": "In",
        "fontSize": 24
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30,
        "text": "Out",
        "fontSize": 24
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30,
        "text": "Difference",
        "fontSize": 24
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30,
        "text": "Percentage",
        "fontSize": 24
      }
    },    
    {
      "mark": {
        "type": "text"
      },
      "encoding": {
        "text": {
          "field": "In", 
          "type": "ordinal"
        }
      }
    },    
    {
      "mark": {
        "type": "text",
        "dx": 30
      },
      "encoding": {
        "text": {
          "field": "Out", 
          "type": "ordinal"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "dx": 30
      },
      "encoding": {
        "text": {
          "field": "Diff", 
          "type": "ordinal"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "dx": 30
      },
      "encoding": {
        "text": {
          "field": "Perc", 
          "type": "ordinal"
        }
      }
    }
  ]
}
2

Ok, so to reply to myself, I thing the problem is in vega-lite version. Kibana supports v2.6.0. and concat property was introduced in v3 I think.
I'm running Kibana in AWS, is there a way to force vega-lite v3 ?

3

Hi @Josip_Cagalj,

Unfortunately it's not possible right now. But I've been told that adding support for vega-lite v3 is planned in the scope of this issue. Feel free to follow it to track progress.

Best,
Oleg

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.