feat: support autosize fit for faceted plots

[drgould]

Based on discussion in #5219 and stealing some code from #5225, this adds support for specifying the outer plot dimensions and sizing the inner facets automatically which subsequently allows unlocking autosize: fit(-x/-y) for faceted plots.

Note: this is only for specs which explicitly define the facet operator at the top level.

• Add tests
• Update docs

[domoritz]

This is exciting. @drgould let us know when this is ready for a review.

I know @willium was interested in this feature as well.

[domoritz]

Hi @drgould, do you plan to finish this pull request?

[drgould]

Sorry, yeah I haven't had a chance to get back to this. My team has been hard at work implementing vega-lite into our product and this kinda fell on the back burner. We just launched it on Tues. so now were starting to pick back up some of this tech debt. The version we're currently using is a bit behind and we've been in need some of the new features so this will likely be prioritized very soon.

[domoritz]

Oh, that's awesome to hear. Congrats on launching the feature 🎉 . If you want, you can send a pull request to add it to https://vega.github.io/vega-lite/ecosystem.html.

More generally, I would be happy to collaborate more closely on features and make sure to do a quick review/release turn around when you need a particular feature for your product. You have probably seen our roadmap and if there are bigger things you would like to tackle, we can add it there as well.

[wmarques]

Hi @domoritz @drgould !
We would really need this feature as we are developing customisable widget dashboards using vega-lite.
So having responsive grouped bar charts is mandatory for us and I think it's impossible without this ticket.

Do you need any help to merge this ? I'd be glad to help on that in order to have this into vega-lite :)

[domoritz]

@wmarques yes, I won't have the cycles to implement this but I can review a pull request. Could you open a new pull request with this code and any improvements you want to make?

[wmarques]

@domoritz Sure, i'll check if this code works for us first, thanks for the quick answer !

[domoritz]

Thank you for offering to help. I look forward to your contributions.

[drgould]

@wmarques If all you need is a "responsive" grouped bar it's fairly easy to accomplish without faceting using a few transforms and a labelExpr: https://vega.github.io/editor/#/gist/2d591c1cea91c8281e27900240f058b8/grouped_bar_single_layer.json

As for finishing up this PR, it's finally in my tasks for this sprint so I should be finishing it up very soon.

[wmarques]

@drgould Oh thanks alot I'll look into your example !
And that's great news for this ticket :)
Thank you both for your very fast help !

[domoritz]

Just wanted to check in to see whether you need any help with getting this over the finish line. Please mark the pull request as ready for review when you want me to look at it.

[drgould]

Ok I think I have this in a good enough place to open this up for review. I need a bit of guidance about any additional unit/spec/visual tests that might help as well as for the changes to the docs.

Edit: looking into the failing tests.
Edit 2: tests fixed

[domoritz]

The example generation depends on specifics of the OS so we usually let the ci do it (see contributing docs). If the ci doesn't do it for you, can you check your setup in your fork? I can help if there is some issue with it.

[drgould]

Yeah there definitely seems to be an issue with how the fork is set up. The really weird thing is it was working when I originally created this PR and didn't touch any of the workflows/etc. so ¯\_(ツ)_/¯

The only thing I see that's obviously wrong is the check workflow can't commit likely because the actions bot key is meant for this repo rather than the fork. But regardless the examples still aren't building correctly.

[domoritz]

Can you try setting a GH_PAT in your repo secrets of your fork? If it doesn't work, I can copy your branch into this repo when you think it's ready.

You can definitely build the schema locally, though (using yarn schema).

[domoritz]

I copied the pull request to our repo over at #7356 so we can build the examples.

[domoritz]

This is great and pretty close to being done! I also just finished a deadline so I have more time to do faster reviews. If you can address the issues I found, I think we can merge this soon.

Here are a few problems I found.

Specs with row/column and autosize do not work.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "height": 500,
  "autosize": {
    "type": "fit"
  },
  "data": {"url": "data/barley.json"},
  "mark": "bar",
  "encoding": {
    "column": {"field": "year"},
    "x": {"field": "yield", "type": "quantitative", "aggregate": "sum"},
    "y": {"field": "variety", "type": "nominal"},
    "color": {"field": "site", "type": "nominal"}
  }
}

Note that this spec also generates a warning "Autosize "fit" only works for single views and layered views.", which is not correct anymore since we do support fit for faceted plots as well.

This should be a simple fix in the normalized where we should generate.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {"type": "fit"},
  "width": 500,
  "height": 500,
  "padding": 0,
  "data": {"url": "data/barley.json"},
  "facet": {"column": {"field": "year"}},
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "yield", "type": "quantitative", "aggregate": "sum"},
      "y": {"field": "variety", "type": "nominal"},
      "color": {"field": "site", "type": "nominal"}
    }
  }
}

Adding autosize to x in this chart with wrapped facet breaks it

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "trellis_barley",
  "width": 500,
  "autosize": {
    "type": "fit-x"
  },
  "padding": 0,
  "data": {"url": "data/barley.json"},
  "columns": 2,
  "facet": {
    "field": "site",
    "type": "ordinal",
    "sort": {"op": "median", "field": "yield"}
  },
  "spec": {
    "height": {"step": 12},
    "mark": "point",
    "encoding": {
      "x": {
        "aggregate": "median",
        "field": "yield",
        "type": "quantitative",
        "scale": {"zero": false}
      },
      "y": {"field": "variety", "type": "ordinal", "sort": "-x"},
      "color": {"field": "year", "type": "nominal"}
    }
  }
}

[domoritz]

@drgould is there anything I can help with to get this pull request over the finish line?

[drgould]

Sorry been working on some other things and haven't had a chance to get back to this. I'll hopefully have some time to make those changes soon.

[cdomergue]

Hello.

Doest the pyramidal distribution (ie: using hconcat) will be affected by this feature and became responsive ?

Thank you.

Code: Vega editor

[domoritz]

No, this is for faceted charts only. We already support single view and layered plots.

[kanitw]

Thanks so much for submitting the PR! It's not very common that people digged deep into the codebase to submit enhancement, so we really appreciate that. I think this would be an awesome addition for Vega-Lite.

To add to @domoritz's point, this PR currently only have one example, which might not cover different cases we want to support.

To make sure that we have tested (and have regression tests) for different cases, could you please include more examples, showing combinations of the following variations?

• Width/Height -- currently in the only example provided, we see that width and height are only outside. However, it would be great to have examples that test when there is a width at the facet level, but the height is based on the unit spec's height.

• Facet -- In the only example provided, the example is a facet column. And you include facet row, facet row x column, and wrapped facet?

If some of these cases do not work, please instead add warning messages by using log.warn() from src/log and add new log messages to src/log/messages.

[kanitw]

generally

"by default"?

[domoritz]

@drgould Is there anything we can help with to get this pull request over the finish line?

[drgould]

Our priorities shifted quite significantly a couple months ago and I haven't had any time to get back to this. I was hoping I would be able to carve out some time to finish this up but realistically I won't be able to do any work on this for at least 3 months. At this point it might be better if someone else takes this over.

[domoritz]

Thanks for the update and good luck with the new direction @drgould.

@wmarques do you have time to take it from here?

[smashmirrorcardboardface]

is this likely to get released soon? its exactly what i need

[domoritz]

Since it's not merged, no. Please help us push it over the finish line if you need it.

[fgenoese]

Interested in this one as well.

[BradyJ27]

Since it's not merged, no. Please help us push it over the finish line if you need it.

Would you be able to summarize what is needed for this to be completed? I may have some time to look into it!

[domoritz]

That's awesome. It's been a while so I can't summarize it but you should find everything in the comments in this pull request. Let us know if you have specific questions.