Add chart.responsiveResize(true) option to switch to viewBox resizing…

[atomless]

… instead of fixed width and height attributes

[gordonwoodhull]

The implementation looks nice and clean. I'll need at least two tests

1. asserting that width and height are not set, and viewBox is set, when this flag is set
2. the contrapositive

As I've noted, this is only one of many strategies for responsive resizing, so I'd prefer the name to have viewBox in in it somewhere.

[gordonwoodhull]

Thanks @atomless!

[atomless]

@gordonwoodhull, good point. I'll change the option name to .useViewBox(bool)

Can you offer any pointers on the tests, I normally use Ava for tests so am not familia with this style. I presume it should go in the base-mixin-spec?

[gordonwoodhull]

Yes, it should go in the base-mixin-spec.

I know writing tests in an alien style is a burden; just do your best on that part. Checking whether an attr exists would be something like

   expect(chart.svg().attr('viewBox')).not.toBeNull();

Also, for future reference, it's best not to check in the artifacts when submitting a PR. This is easy for me to clean up, though.

[atomless]

Okay. More specifically, in the base-mixin-spec, I can't locate a test for the width and height attr that normally gets added to the root svg and that the viewBox attr replaces if enabled. Seems the viewbox test should belong near that test or is there not one for that?

[gordonwoodhull]

Yup, looks like we don't check that attribute in particular. (We test .width() and .height() for a lot of charts, but getting total coverage for a library with this scope would be really difficult.)

Thematically, I'd guess this belongs after the "calculation of dimensions" test, since it's another method for responsive layout.

[gordonwoodhull]

Hi @atomless, I'm in the process of merging this for dc.js 2.1.7.

I'm updating the examples in http://dc-js.github.io/dc.js/resizing/ so that we can test them by eye - please check it out once this is released. Just click on any of the examples and then add resize=viewbox.

Currently it applies .width(600).height(400) which seems to work pretty well for the text sizes. Is that about what you use?

I haven't implemented the heatmap example because the screen is divided. Could do it with a little work.

We can continue to refine this feature in 2.1.* as we get more experience with it.

[gordonwoodhull]

Released in 2.1.7 under the name useViewBoxResizing. Test and example commits are linked above.

It works pretty well. Thanks @atomless!

[dahlbyk]

SEO bump: try using this if you need a dc.js print stylesheet.