[Vega] Fix unexpected change in autosizing behavior post upgrade (#77408

)

* [Vega] Fix unexpected change in autosizing behavior post upgrade

* Add docs

* Fix type issues

* Fix i18n and snapshot

* Fix snapshot?

* Fix time in snapshot

* Update style of sizing function

docs/user/dashboard/vega-reference.asciidoc

@@ -11,7 +11,7 @@ For additional *Vega* and *Vega-Lite* information, refer to the reference sectio
 
 {kib} has extended Vega and Vega-Lite with extensions that support:
 
-* Default height and width
+* Automatic sizing
 * Default theme to match {kib}
 * Writing {es} queries using the time range and filters from dashboards
 * Using the Elastic Map Service in Vega maps
@@ -22,12 +22,35 @@ For additional *Vega* and *Vega-Lite* information, refer to the reference sectio
 
 [float]
 [[vega-sizing-and-positioning]]
-==== Default height and width
+==== Automatic sizing
 
-By default, Vega visualizations use the `autosize = { type: 'fit', contains: 'padding' }` layout.
-`fit` uses all available space, ignores `width` and `height` values,
-and respects the padding values. To override this behavior, change the
-`autosize` value.
+Most users will want their Vega visualizations to take the full available space, so unlike
+Vega examples, `width` and `height` are not required parameters in {kib}. To set the width
+or height manually, set `autosize: none`. For example, to set the height to a specific pixel value:
+
+```
+autosize: none
+width: container
+height: 200
+```
+
+The default {kib} settings which are inherited by your visualizations are:
+
+```
+autosize: {
+  type: fit
+  contains: padding
+}
+width: container
+height: container
+```
+
+{kib} is able to merge your custom `autosize` settings with the defaults. The options `fit-x`
+and `fit-y` are supported but not recommended over the default `fit` setting.
+
+To learn more, read about
+https://vega.github.io/vega/docs/specification/#autosize[autosize]
+in the Vega documentation.
 
 [float]
 [[vega-theme]]

src/plugins/vis_type_vega/public/data_model/types.ts

@@ -43,10 +43,17 @@ interface Encoding {
   y: Coordinate;
 }
 
-interface AutoSize {
-  type: string;
-  contains: string;
-}
+type AutoSize =
+  | 'pad'
+  | 'fit'
+  | 'fit-x'
+  | 'fit-y'
+  | 'none'
+  | {
+      type: string;
+      contains: string;
+    }
+  | { signal: string };
 
 interface Padding {
   left: number;
@@ -105,8 +112,8 @@ export interface VegaSpec {
   title?: string;
   autosize?: AutoSize;
   projections?: Projection[];
-  width?: number;
-  height?: number;
+  width?: number | 'container';
+  height?: number | 'container';
   padding?: number | Padding;
   _hostConfig?: KibanaConfig;
   config: VegaSpecConfig;

src/plugins/vis_type_vega/public/data_model/vega_parser.test.js

@@ -371,43 +371,95 @@ describe('VegaParser._parseConfig', () => {
   test('_hostConfig', check({ _hostConfig: { a: 1 } }, { a: 1 }, {}, 1));
 });
 
-describe('VegaParser._calcSizing', () => {
-  function check(
-    spec,
-    useResize,
-    paddingWidth,
-    paddingHeight,
-    isVegaLite,
-    expectedSpec,
-    warnCount
-  ) {
+describe('VegaParser._compileWithAutosize', () => {
+  function check(spec, useResize, expectedSpec, warnCount) {
     return async () => {
       expectedSpec = expectedSpec || cloneDeep(spec);
       const vp = new VegaParser(spec);
-      vp.isVegaLite = !!isVegaLite;
-      vp._calcSizing();
+      vp._compileWithAutosize();
       expect(vp.useResize).toEqual(useResize);
-      expect(vp.paddingWidth).toEqual(paddingWidth);
-      expect(vp.paddingHeight).toEqual(paddingHeight);
       expect(vp.spec).toEqual(expectedSpec);
       expect(vp.warnings).toHaveLength(warnCount || 0);
     };
   }
 
-  test('no size', check({ autosize: {} }, false, 0, 0));
-  test('fit', check({ autosize: 'fit' }, true, 0, 0));
-  test('fit obj', check({ autosize: { type: 'fit' } }, true, 0, 0));
-  test('padding const', check({ autosize: 'fit', padding: 10 }, true, 20, 20));
   test(
-    'padding obj',
-    check({ autosize: 'fit', padding: { left: 5, bottom: 7, right: 6, top: 8 } }, true, 11, 15)
+    'empty config',
+    check({}, true, {
+      autosize: { type: 'fit', contains: 'padding' },
+      width: 'container',
+      height: 'container',
+    })
+  );
+  test(
+    'no warnings for default config',
+    check({ width: 'container', height: 'container' }, true, {
+      autosize: { type: 'fit', contains: 'padding' },
+      width: 'container',
+      height: 'container',
+    })
+  );
+  test(
+    'warning when attempting to use invalid setting',
+    check(
+      { width: '300', height: '300' },
+      true,
+      {
+        autosize: { type: 'fit', contains: 'padding' },
+        width: 'container',
+        height: 'container',
+      },
+      1
+    )
   );
   test(
-    'width height',
-    check({ autosize: 'fit', width: 1, height: 2 }, true, 0, 0, false, false, 1)
+    'autosize none',
+    check({ autosize: 'none' }, false, { autosize: { type: 'none', contains: 'padding' } })
+  );
+  test(
+    'autosize=fit',
+    check({ autosize: 'fit' }, true, {
+      autosize: { type: 'fit', contains: 'padding' },
+      width: 'container',
+      height: 'container',
+    })
   );
   test(
-    'VL width height',
-    check({ autosize: 'fit', width: 1, height: 2 }, true, 0, 0, true, { autosize: 'fit' }, 0)
+    'autosize=pad',
+    check({ autosize: 'pad' }, true, {
+      autosize: { type: 'pad', contains: 'padding' },
+      width: 'container',
+      height: 'container',
+    })
+  );
+  test(
+    'empty autosize object',
+    check({ autosize: {} }, true, {
+      autosize: { type: 'fit', contains: 'padding' },
+      height: 'container',
+      width: 'container',
+    })
+  );
+  test(
+    'warning on falsy arguments',
+    check(
+      { autosize: false },
+      true,
+      {
+        autosize: { type: 'fit', contains: 'padding' },
+        height: 'container',
+        width: 'container',
+      },
+      1
+    )
+  );
+  test(
+    'partial autosize object',
+    check({ autosize: { contains: 'content' } }, true, {
+      autosize: { contains: 'content', type: 'fit' },
+      height: 'container',
+      width: 'container',
+    })
   );
+  test('autosize signals are ignored', check({ autosize: { signal: 'asdf' } }, undefined));
 });