Search code examples
powerbidata-analysispowerbi-desktopvega-litedeneb

formatting text marks in a hconcat composition

I have this gist: my sample table

I have two questions:

  • Can I control the spacing between the 2nd "sumofvals" and the 3rd "the individuals" view control separately, I want them closer together
  • Can I extend the coloring to the "header" as well

Tom

Solution

  • You can uniformly control spacing but not individually. However, you can add in some fake views to hack it as follows.

    As for the background colours, these are axis labels and the way I have done this in the past is to overlay marks at the right axis position. Again this is all very hacky and you're probably best using Vega.

    enter image description here

    {
  "data": {
    "values": [
      {
        "rowh": "Asia",
        "rowgroup": "I",
        "vals": 2000000,
        "val": 3000000,
        "valt": 11000000
      },
      {
        "rowh": "Asia",
        "rowgroup": "II",
        "vals": 2000000,
        "val": 8000000,
        "valt": 11000000
      },
      {
        "rowh": "Europe",
        "rowgroup": "I",
        "vals": 2000000,
        "val": 3000000,
        "valt": 6000000
      },
      {
        "rowh": "Europe",
        "rowgroup": "II",
        "vals": 2000000,
        "valt": 1000000,
        "val": 6000000
      },
      {
        "rowh": "US",
        "rowgroup": "I",
        "vals": 2000000,
        "val": 2000000,
        "valt": 7000000
      },
      {
        "rowh": "US",
        "rowgroup": "II",
        "vals": 2000000,
        "val": 3000000,
        "valt": 7000000
      }
    ]
  },
  "transform": [
    {
      "joinaggregate": [{"field": "val", "op": "sum", "as": "rowgroupsum"}],
      "groupby": ["rowh"]
    },
    {"calculate": "'Start'", "as": "labels"},
    {"calculate": "'End'", "as": "labele"},
    {"calculate": "'sumofvals'", "as": "labelvalsum"},
    {"calculate": "datum['vals']+datum['rowgroupsum']", "as": "labelse"}
  ],
  "config": {"concat": {"spacing": 0}},
  "hconcat": [
    {
      "width": 50,
      "mark": {"type": "text", "align": "center"},
      "encoding": {
        "y": {"field": "rowh", "type": "nominal"},
        "x": {
          "field": "labels",
          "type": "nominal",
          "axis": {"title": null, "orient": "top", "labelAngle": 0}
        },
        "text": {"field": "vals", "type": "quantitative", "format": "0.1s"}
      }
    },
    {"width": 30, "mark": {"type": "text"}},
    {
      "width": 50,
      "view": {"fill": "steelblue", "stroke": "black"},
      "layer": [
        {"mark": {"type": "bar"}, "encoding": {"y": {"value": -20}}},
        {
          "mark": {"type": "text"},
          "encoding": {"y": {"value": -10}, "text": {"value": "sumofvals"}}
        },
        {
          "mark": {"type": "text", "align": "center"},
          "encoding": {
            "y": {"field": "rowh", "type": "nominal", "axis": null},
            "x": {
              "field": "labelvalsum",
              "type": "nominal",
              "axis": {"title": null, "orient": "top", "labelAngle": 0}
            },
            "text": {
              "field": "rowgroupsum",
              "type": "quantitative",
              "format": "0.1s"
            }
          }
        }
      ]
    },
    {
      "width": 50,
      "view": {"fill": "lightgrey"},
      "mark": {"type": "text", "align": "center"},
      "encoding": {
        "y": {"field": "rowh", "type": "nominal", "axis": null},
        "x": {
          "field": "rowgroup",
          "type": "nominal",
          "axis": {"title": null, "orient": "top", "labelAngle": 0}
        },
        "text": {"field": "val", "type": "quantitative", "format": "0.1s"}
      }
    },
    {"width": 30, "mark": {"type": "text"}},
    {
      "width": 50,
      "view": {"fill": "orange"},
      "mark": {"type": "text", "align": "center"},
      "encoding": {
        "y": {"field": "rowh", "type": "nominal", "axis": null},
        "x": {
          "field": "labele",
          "type": "nominal",
          "axis": {"title": null, "orient": "top", "labelAngle": 0}
        },
        "text": {"field": "labelse", "type": "quantitative", "format": "0.2s"}
      }
    }
  ]
}