CODEWITHSUNDEEP
powerbivega-litevegadeneb
Sojaboy
Sojaboy

Reputation: 11

Table visual with customized grid layout in Deneb (Vega-Lite)

I am trying to implement a custom PowerBI reporting visual for my work. Basically I need a table visual that is able to achieve a custom grid layout and I thought I'd turn to Deneb since the native matrix visual cannot achieve it.

I need to be able to place a field, "Comments", underneath the other columns for each row header, "Projects", and have it span the entire row.

I know Vega-Lite is not really for table visuals but not sure where else to turn as we are using PowerBI. Really would like to get better with Vega-Lite for custom PowerBI visuals.

Here is what the original table looks like (with sample data)

Table data

And here's the output grid layout I want to achieve:

Desired Output

The dataset is much larger and the Comments field in the data is very long, so that's why we need to wrap the field to its own row.

Here is what I have so far - just getting the projects on the Y-Axis which isn't much. Any help would be greatly appreciated!

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "data": {
    "values": [
      {"Project Name":"Project A", "Project Estimate": "12000000",  "Funded": "12000000","Budget":"12000000", "Comment":"This is some text"},
{"Project Name":"Project B", "Project Estimate": "9000000",  "Funded": "9000000","Budget":"9000000", "Comment":"This is some text"},
{"Project Name":"Project C", "Project Estimate": "6000000",  "Funded": "6000000","Budget":"6000000", "Comment":"This is some text"}
    ]
  },
  "mark": "text",
  "transform": [ 
    {"fold": ["Project Estimate","Budget","Funded","Comment"]
    }],
  "encoding": {
    "y": {"field": "Project Name","title":null},
    "text": {"field": "value", "type": "nominal"},
    "x": {"field": "key", "type": "nominal", "axis":null},
    "yOffset": {"field": "Project Name"}
  }
}

Upvotes: 1

Views: 1120

Answers (1)

Tom Martens
Tom Martens

Reputation: 214

maybe this brings you closer to what you are looking for: link to a gist

The idea behind my approach is to create stacks of "tables" using the facet view composition. Each view represents a Project. Each stack contains two text marks combined by vconcat. Each text mark has its own filter transform, either to get rid of the comment row or to keep it

facet by 
"project name" [
vconcat[
{ text mark 1 },
{ text mark 2 }
]]

Upvotes: 2

Related Questions