0

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

Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
Tom Martens
  • 118
  • 7

2 Answers2

2

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"}
      }
    }
  ]
}
Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
  • 1
    Hey David, thank you very much for the solution. I was considering a rect for the background but then I got distracted. Your hack using the bar is another proof of Vega-Lite's (Vega's) versatility though. As I'm trying to compose some table formatting examples for my colleagues I want to avoid vega at the moment. – Tom Martens May 27 '23 at 02:30
2

Its a bit of a hack but try this..

Above your hconcat add a spacing setting:

"spacing": 0,
"hconcat": [

Then add some new dummy layers where you want your actual spaces. For example after concat 1 and 3:

{"width": 20, "mark": {"type": "text", "align": "center"}},

When you say Header do you mean your X axis labels?

For your label colors you can just add in your X axis axis code after the labelAngle.

Do this for each hconcat element and change the color to grey, steelblue etc

"labelAngle": 0, "labelColor": "orange"

Adam

APB Reports
  • 985
  • 10