I am trying to create a custom visual in power bi using Deneb and Vega code.
I need a small multiple chart that groups the Projects in columns by phase. I also have to add an icon to show the status of the project (Red, Amber, or Green). The phases should be sorted in this order(Ideation, Initiating, Planning, Executing, Closing, Completed, Deferred, Off-Ramped). also if there is no data for a Phase the phase should still show the column heading. I can not get the chart to include phases when there is no data and the phases are not sorted correctly. I also can not get drill through to work correctly when I right click on a project name.
The final product should look like this. Final
Here is my code
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": {"name": "dataset"},
"signals": [
{"name": "gridColumns", "value": 8},
{"name": "gridPadding", "value": 5}
],
"marks": [
{
"type": "group",
"layout": {
"align": "all",
"bounds": "full",
"columns": {"signal": "gridColumns"},
"padding": {"signal": "gridPadding"}
},
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "facetData",
"data": "dataset",
"groupby": "Gating_Phase"
}
},
"sort": {"field": "Gating_Phase", "order": "ascending"},
"encode": {
"enter": {
"width": {"value": 180},
"height": {"value": 250}
}
},
"title": {
"text": {"signal": "parent['Gating_Phase']"},
"anchor": "start",
"fontSize": {"value": 14},
"fontWeight": "bold"
},
"marks": [
{
"type": "symbol",
"from": {"data": "facetData"},
"encode": {
"enter": {
"x": {"value": 50},
"y": {"scale": "yScale", "field": "Project Name"},
"size": {"value": 100},
"fill": {"scale": "colorScale", "field": "Overall_Health"}
}
}
},
{
"type": "text",
"from": {"data": "facetData"},
"encode": {
"enter": {
"x": {"value": 70},
"y": {"scale": "yScale", "field": "Project Name"},
"text": {"field": "Project Name"},
"fill": {"value": "black"},
"fontSize": {"value": 10},
"baseline": {"value": "top"},
"lineBreak": {"value": " "}
}
}
}
]
}
]
}
],
"scales": [
{
"name": "phaseScale",
"type": "ordinal",
"domain": ["Ideation", "Initiating", "Planning", "Executing", "Closing", "Completed", "Deferred", "Off-Ramped"],
"range": "width"
},
{
"name": "yScale",
"type": "point",
"domain": {"data": "dataset", "field": "Project Name"},
"range": [40, 200]
},
{
"name": "colorScale",
"type": "ordinal",
"domain": ["3 - Red", "2 - Amber", "1 - Green"],
"range": ["#d7191c", "#fdae61", "#1a9641"]
}
]
}