mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
[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
This commit is contained in:
Wylie Conlon
GitHub
parent
e59c78c2b1
commit
d4a9b4bc0b
8 changed files with 199 additions and 107 deletions
|
|
@ -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]]
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ exports[`VegaVisualizations VegaVisualization - basics should show vega blank re
|
|||
|
||||
exports[`VegaVisualizations VegaVisualization - basics should show vega graph (may fail in dev env) 1`] = `"<div class=\\"vgaVis__view\\" style=\\"height: 100%; cursor: default;\\" role=\\"graphics-document\\" aria-roledescription=\\"visualization\\" aria-label=\\"Vega visualization\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" version=\\"1.1\\" class=\\"marks\\" width=\\"512\\" height=\\"512\\" viewBox=\\"0 0 512 512\\" style=\\"background-color: transparent;\\"><g fill=\\"none\\" stroke-miterlimit=\\"10\\" transform=\\"translate(0,0)\\"><g class=\\"mark-group role-frame root\\" role=\\"graphics-object\\" aria-roledescription=\\"group mark container\\"><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0,0h512v512h-512Z\\"></path><g><g class=\\"mark-group role-scope\\" role=\\"graphics-object\\" aria-roledescription=\\"group mark container\\"><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0,0h0v0h0Z\\"></path><g><g class=\\"mark-area role-mark\\" role=\\"graphics-symbol\\" aria-roledescription=\\"area mark container\\"><path d=\\"M0,512C18.962962962962962,512,37.925925925925924,512,56.888888888888886,512C75.85185185185185,512,94.81481481481481,512,113.77777777777777,512C132.74074074074073,512,151.7037037037037,512,170.66666666666666,512C189.62962962962962,512,208.59259259259258,512,227.55555555555554,512C246.5185185185185,512,265.48148148148147,512,284.44444444444446,512C303.4074074074074,512,322.3703703703704,512,341.3333333333333,512C360.29629629629625,512,379.25925925925924,512,398.2222222222222,512C417.18518518518516,512,436.1481481481481,512,455.1111111111111,512C474.0740740740741,512,493.037037037037,512,512,512L512,355.2C493.037037037037,324.79999999999995,474.0740740740741,294.4,455.1111111111111,294.4C436.1481481481481,294.4,417.18518518518516,457.6,398.2222222222222,457.6C379.25925925925924,457.6,360.29629629629625,233.60000000000002,341.3333333333333,233.60000000000002C322.3703703703704,233.60000000000002,303.4074074074074,435.2,284.44444444444446,435.2C265.48148148148147,435.2,246.5185185185185,345.6,227.55555555555554,345.6C208.59259259259258,345.6,189.62962962962962,451.2,170.66666666666666,451.2C151.7037037037037,451.2,132.74074074074073,252.8,113.77777777777777,252.8C94.81481481481481,252.8,75.85185185185185,346.1333333333333,56.888888888888886,374.4C37.925925925925924,402.66666666666663,18.962962962962962,412.5333333333333,0,422.4Z\\" fill=\\"#54B399\\" fill-opacity=\\"1\\"></path></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0,0h0v0h0Z\\"></path><g><g class=\\"mark-area role-mark\\" role=\\"graphics-symbol\\" aria-roledescription=\\"area mark container\\"><path d=\\"M0,422.4C18.962962962962962,412.5333333333333,37.925925925925924,402.66666666666663,56.888888888888886,374.4C75.85185185185185,346.1333333333333,94.81481481481481,252.8,113.77777777777777,252.8C132.74074074074073,252.8,151.7037037037037,451.2,170.66666666666666,451.2C189.62962962962962,451.2,208.59259259259258,345.6,227.55555555555554,345.6C246.5185185185185,345.6,265.48148148148147,435.2,284.44444444444446,435.2C303.4074074074074,435.2,322.3703703703704,233.60000000000002,341.3333333333333,233.60000000000002C360.29629629629625,233.60000000000002,379.25925925925924,457.6,398.2222222222222,457.6C417.18518518518516,457.6,436.1481481481481,294.4,455.1111111111111,294.4C474.0740740740741,294.4,493.037037037037,324.79999999999995,512,355.2L512,307.2C493.037037037037,275.2,474.0740740740741,243.2,455.1111111111111,243.2C436.1481481481481,243.2,417.18518518518516,371.2,398.2222222222222,371.2C379.25925925925924,371.2,360.29629629629625,22.399999999999977,341.3333333333333,22.399999999999977C322.3703703703704,22.399999999999977,303.4074074074074,278.4,284.44444444444446,278.4C265.48148148148147,278.4,246.5185185185185,204.8,227.55555555555554,192C208.59259259259258,179.20000000000002,189.62962962962962,185.6,170.66666666666666,172.8C151.7037037037037,160.00000000000003,132.74074074074073,83.19999999999999,113.77777777777777,83.19999999999999C94.81481481481481,83.19999999999999,75.85185185185185,83.19999999999999,56.888888888888886,83.19999999999999C37.925925925925924,83.19999999999999,18.962962962962962,164.79999999999998,0,246.39999999999998Z\\" fill=\\"#6092C0\\" fill-opacity=\\"1\\"></path></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g></g></g></svg></div><div class=\\"vgaVis__controls vgaVis__controls--column\\"></div>"`;
|
||||
|
||||
exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 1`] = `"<div class=\\"vgaVis__view\\" style=\\"height: 100%; cursor: default;\\" role=\\"graphics-document\\" aria-roledescription=\\"visualization\\" aria-label=\\"Vega visualization\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" version=\\"1.1\\" class=\\"marks\\" width=\\"512\\" height=\\"506\\" viewBox=\\"0 0 512 506\\" style=\\"background-color: transparent;\\"><g fill=\\"none\\" stroke-miterlimit=\\"10\\" transform=\\"translate(7,5)\\"><g class=\\"mark-group role-frame root\\" role=\\"graphics-object\\" aria-roledescription=\\"group mark container\\"><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0.5,0.5h498v494h-498Z\\" fill=\\"transparent\\" stroke=\\"#ddd\\"></path><g><g class=\\"mark-line role-mark marks\\" role=\\"graphics-object\\" aria-roledescription=\\"line mark container\\"><path aria-label=\\"key: Dec 11, 2017; doc_count: 0\\" role=\\"graphics-symbol\\" aria-roledescription=\\"line mark\\" d=\\"M0,494L55.33333333333333,494L110.66666666666666,494L166,44.953999999999986L221.33333333333331,32.9004L276.6666666666667,33.59199999999998L332,480.8596L387.3333333333333,494L442.66666666666663,494L498,494\\" stroke=\\"#54B399\\" stroke-width=\\"2\\"></path></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g></g></g></svg></div><div class=\\"vgaVis__controls vgaVis__controls--column\\"></div>"`;
|
||||
exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 1`] = `"<ul class=\\"vgaVis__messages\\"><li class=\\"vgaVis__message vgaVis__message--warn\\"><pre class=\\"vgaVis__messageCode\\">\\"width\\" and \\"height\\" params are ignored because \\"autosize\\" is enabled. Set \\"autosize\\": \\"none\\" to disable</pre></li></ul><div class=\\"vgaVis__view\\" style=\\"height: 100%; cursor: default;\\" role=\\"graphics-document\\" aria-roledescription=\\"visualization\\" aria-label=\\"Vega visualization\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" version=\\"1.1\\" class=\\"marks\\" width=\\"0\\" height=\\"0\\" viewBox=\\"0 0 0 0\\" style=\\"background-color: transparent;\\"><g fill=\\"none\\" stroke-miterlimit=\\"10\\" transform=\\"translate(7,7)\\"><g class=\\"mark-group role-frame root\\" role=\\"graphics-object\\" aria-roledescription=\\"group mark container\\"><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0.5,0.5h0v0h0Z\\" fill=\\"transparent\\" stroke=\\"#ddd\\"></path><g><g class=\\"mark-line role-mark marks\\" role=\\"graphics-object\\" aria-roledescription=\\"line mark container\\"><path aria-label=\\"key: Dec 11, 2017; doc_count: 0\\" role=\\"graphics-symbol\\" aria-roledescription=\\"line mark\\" d=\\"M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0\\" stroke=\\"#54B399\\" stroke-width=\\"2\\"></path></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g></g></g></svg></div><div class=\\"vgaVis__controls vgaVis__controls--column\\"></div>"`;
|
||||
|
||||
exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 2`] = `"<div class=\\"vgaVis__view\\" style=\\"height: 100%; cursor: default;\\" role=\\"graphics-document\\" aria-roledescription=\\"visualization\\" aria-label=\\"Vega visualization\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" version=\\"1.1\\" class=\\"marks\\" width=\\"256\\" height=\\"250\\" viewBox=\\"0 0 256 250\\" style=\\"background-color: transparent;\\"><g fill=\\"none\\" stroke-miterlimit=\\"10\\" transform=\\"translate(7,5)\\"><g class=\\"mark-group role-frame root\\" role=\\"graphics-object\\" aria-roledescription=\\"group mark container\\"><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0.5,0.5h242v238h-242Z\\" fill=\\"transparent\\" stroke=\\"#ddd\\"></path><g><g class=\\"mark-line role-mark marks\\" role=\\"graphics-object\\" aria-roledescription=\\"line mark container\\"><path aria-label=\\"key: Dec 11, 2017; doc_count: 0\\" role=\\"graphics-symbol\\" aria-roledescription=\\"line mark\\" d=\\"M0,238L26.888888888888886,238L53.77777777777777,238L80.66666666666666,21.657999999999994L107.55555555555554,15.850799999999998L134.44444444444446,16.183999999999987L161.33333333333331,231.66920000000002L188.22222222222223,238L215.1111111111111,238L242,238\\" stroke=\\"#54B399\\" stroke-width=\\"2\\"></path></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g></g></g></svg></div><div class=\\"vgaVis__controls vgaVis__controls--column\\"></div>"`;
|
||||
exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 2`] = `"<ul class=\\"vgaVis__messages\\"><li class=\\"vgaVis__message vgaVis__message--warn\\"><pre class=\\"vgaVis__messageCode\\">\\"width\\" and \\"height\\" params are ignored because \\"autosize\\" is enabled. Set \\"autosize\\": \\"none\\" to disable</pre></li></ul><div class=\\"vgaVis__view\\" style=\\"height: 100%; cursor: default;\\" role=\\"graphics-document\\" aria-roledescription=\\"visualization\\" aria-label=\\"Vega visualization\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" version=\\"1.1\\" class=\\"marks\\" width=\\"256\\" height=\\"250\\" viewBox=\\"0 0 256 250\\" style=\\"background-color: transparent;\\"><g fill=\\"none\\" stroke-miterlimit=\\"10\\" transform=\\"translate(7,5)\\"><g class=\\"mark-group role-frame root\\" role=\\"graphics-object\\" aria-roledescription=\\"group mark container\\"><g transform=\\"translate(0,0)\\"><path class=\\"background\\" aria-hidden=\\"true\\" d=\\"M0.5,0.5h242v238h-242Z\\" fill=\\"transparent\\" stroke=\\"#ddd\\"></path><g><g class=\\"mark-line role-mark marks\\" role=\\"graphics-object\\" aria-roledescription=\\"line mark container\\"><path aria-label=\\"key: Dec 11, 2017; doc_count: 0\\" role=\\"graphics-symbol\\" aria-roledescription=\\"line mark\\" d=\\"M0,238L26.888888888888886,238L53.77777777777777,238L80.66666666666666,21.657999999999994L107.55555555555554,15.850799999999998L134.44444444444446,16.183999999999987L161.33333333333331,231.66920000000002L188.22222222222223,238L215.1111111111111,238L242,238\\" stroke=\\"#54B399\\" stroke-width=\\"2\\"></path></g></g><path class=\\"foreground\\" aria-hidden=\\"true\\" d=\\"\\" display=\\"none\\"></path></g></g></g></svg></div><div class=\\"vgaVis__controls vgaVis__controls--column\\"></div>"`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
'width height',
|
||||
check({ autosize: 'fit', width: 1, height: 2 }, true, 0, 0, false, false, 1)
|
||||
'no warnings for default config',
|
||||
check({ width: 'container', height: 'container' }, 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)
|
||||
'warning when attempting to use invalid setting',
|
||||
check(
|
||||
{ width: '300', height: '300' },
|
||||
true,
|
||||
{
|
||||
autosize: { type: 'fit', contains: 'padding' },
|
||||
width: 'container',
|
||||
height: 'container',
|
||||
},
|
||||
1
|
||||
)
|
||||
);
|
||||
test(
|
||||
'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(
|
||||
'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));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -75,8 +75,6 @@ export class VegaParser {
|
|||
mapConfig?: object;
|
||||
vlspec?: VegaSpec;
|
||||
useResize?: boolean;
|
||||
paddingWidth?: number;
|
||||
paddingHeight?: number;
|
||||
containerDir?: ControlsLocation | ControlsDirection;
|
||||
controlsDir?: ControlsLocation;
|
||||
searchAPI: SearchAPI;
|
||||
|
|
@ -157,9 +155,9 @@ The URL is an identifier only. Kibana and your browser will never access this UR
|
|||
this._parseControlPlacement();
|
||||
if (this.useMap) {
|
||||
this.mapConfig = this._parseMapConfig();
|
||||
} else if (this.spec && this.spec.autosize === undefined) {
|
||||
// Default autosize should be fit, unless it's a map (leaflet-vega handles that)
|
||||
this.spec.autosize = { type: 'fit', contains: 'padding' };
|
||||
this.useResize = false;
|
||||
} else if (this.spec) {
|
||||
this._compileWithAutosize();
|
||||
}
|
||||
|
||||
await this._resolveDataUrls();
|
||||
|
|
@ -167,15 +165,86 @@ The URL is an identifier only. Kibana and your browser will never access this UR
|
|||
if (this.isVegaLite) {
|
||||
this._compileVegaLite();
|
||||
}
|
||||
}
|
||||
|
||||
this._calcSizing();
|
||||
/**
|
||||
* Ensure that Vega and Vega-Lite will take the full width of the container unless
|
||||
* the user has explicitly disabled this setting by setting it to "none".
|
||||
* Also sets the default width to include the padding. This creates the least configuration
|
||||
* needed for most cases, with the option to do more.
|
||||
*/
|
||||
private _compileWithAutosize() {
|
||||
const defaultAutosize = {
|
||||
type: 'fit',
|
||||
contains: 'padding',
|
||||
};
|
||||
|
||||
let autosize = this.spec.autosize;
|
||||
let useResize = true;
|
||||
|
||||
if (!this.isVegaLite && autosize && typeof autosize === 'object' && 'signal' in autosize) {
|
||||
// Vega supports dynamic autosize information, so we ignore it
|
||||
return;
|
||||
}
|
||||
|
||||
if (!autosize && typeof autosize !== 'undefined') {
|
||||
this._onWarning(
|
||||
i18n.translate('visTypeVega.vegaParser.autoSizeDoesNotAllowFalse', {
|
||||
defaultMessage:
|
||||
'{autoSizeParam} is enabled, it can only be disabled by setting {autoSizeParam} to {noneParam}',
|
||||
values: {
|
||||
autoSizeParam: '"autosize"',
|
||||
noneParam: '"none"',
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof autosize === 'string') {
|
||||
useResize = autosize !== 'none';
|
||||
autosize = { ...defaultAutosize, type: autosize };
|
||||
} else if (typeof autosize === 'object') {
|
||||
autosize = { ...defaultAutosize, ...autosize } as {
|
||||
type: string;
|
||||
contains: string;
|
||||
};
|
||||
useResize = Boolean(autosize?.type && autosize?.type !== 'none');
|
||||
} else {
|
||||
autosize = defaultAutosize;
|
||||
}
|
||||
|
||||
if (
|
||||
useResize &&
|
||||
((this.spec.width && this.spec.width !== 'container') ||
|
||||
(this.spec.height && this.spec.height !== 'container'))
|
||||
) {
|
||||
this._onWarning(
|
||||
i18n.translate('visTypeVega.vegaParser.widthAndHeightParamsAreIgnored', {
|
||||
defaultMessage:
|
||||
'{widthParam} and {heightParam} params are ignored because {autoSizeParam} is enabled. Set {autoSizeParam}: {noneParam} to disable',
|
||||
values: {
|
||||
widthParam: '"width"',
|
||||
heightParam: '"height"',
|
||||
autoSizeParam: '"autosize"',
|
||||
noneParam: '"none"',
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (useResize) {
|
||||
this.spec.width = 'container';
|
||||
this.spec.height = 'container';
|
||||
}
|
||||
|
||||
this.spec.autosize = autosize;
|
||||
this.useResize = useResize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert VegaLite to Vega spec
|
||||
* @private
|
||||
*/
|
||||
_compileVegaLite() {
|
||||
private _compileVegaLite() {
|
||||
this.vlspec = this.spec;
|
||||
const logger = vega.logger(vega.Warn); // note: eslint has a false positive here
|
||||
logger.warn = this._onWarning.bind(this);
|
||||
|
|
@ -226,62 +295,6 @@ The URL is an identifier only. Kibana and your browser will never access this UR
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process graph size and padding
|
||||
* @private
|
||||
*/
|
||||
_calcSizing() {
|
||||
this.useResize = false;
|
||||
|
||||
// Padding is not included in the width/height by default
|
||||
this.paddingWidth = 0;
|
||||
this.paddingHeight = 0;
|
||||
if (this.spec) {
|
||||
if (!this.useMap) {
|
||||
// when useResize is true, vega's canvas size will be set based on the size of the container,
|
||||
// and will be automatically updated on resize events.
|
||||
// We delete width & height if the autosize is set to "fit"
|
||||
// We also set useResize=true in case autosize=none, and width & height are not set
|
||||
const autosize = this.spec.autosize?.type || this.spec.autosize;
|
||||
if (autosize === 'fit' || (autosize === 'none' && !this.spec.width && !this.spec.height)) {
|
||||
this.useResize = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.useResize && this.spec.padding && this.spec.autosize?.contains !== 'padding') {
|
||||
if (typeof this.spec.padding === 'object') {
|
||||
this.paddingWidth += (+this.spec.padding.left || 0) + (+this.spec.padding.right || 0);
|
||||
this.paddingHeight += (+this.spec.padding.top || 0) + (+this.spec.padding.bottom || 0);
|
||||
} else {
|
||||
this.paddingWidth += 2 * (+this.spec.padding || 0);
|
||||
this.paddingHeight += 2 * (+this.spec.padding || 0);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.useResize && (this.spec.width || this.spec.height)) {
|
||||
if (this.isVegaLite) {
|
||||
delete this.spec.width;
|
||||
delete this.spec.height;
|
||||
} else {
|
||||
this._onWarning(
|
||||
i18n.translate(
|
||||
'visTypeVega.vegaParser.widthAndHeightParamsAreIgnoredWithAutosizeFitWarningMessage',
|
||||
{
|
||||
defaultMessage:
|
||||
'The {widthParam} and {heightParam} params are ignored with {autosizeParam}',
|
||||
values: {
|
||||
autosizeParam: 'autosize=fit',
|
||||
widthParam: '"width"',
|
||||
heightParam: '"height"',
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate container-direction CSS property for binding placement
|
||||
* @private
|
||||
|
|
|
|||
|
|
@ -193,9 +193,8 @@ export class VegaBaseView {
|
|||
// This might be due to https://github.com/jquery/jquery/issues/3808
|
||||
// Which is being fixed as part of jQuery 3.3.0
|
||||
const heightExtraPadding = 6;
|
||||
const width = Math.max(0, this._$container.width() - this._parser.paddingWidth);
|
||||
const height =
|
||||
Math.max(0, this._$container.height() - this._parser.paddingHeight) - heightExtraPadding;
|
||||
const width = Math.max(0, this._$container.width());
|
||||
const height = Math.max(0, this._$container.height()) - heightExtraPadding;
|
||||
|
||||
if (view.width() !== width || view.height() !== height) {
|
||||
view.width(width).height(height);
|
||||
|
|
|
|||
|
|
@ -4145,7 +4145,6 @@
|
|||
"visTypeVega.vegaParser.unrecognizedControlsLocationValueErrorMessage": "認識されない {controlsLocationParam} 値[{locToDirMap}] のいずれかである必要があります",
|
||||
"visTypeVega.vegaParser.unrecognizedDirValueErrorMessage": "認識されない {dirParam} 値[{expectedValues}] のいずれかである必要があります",
|
||||
"visTypeVega.vegaParser.VLCompilerShouldHaveGeneratedSingleProtectionObjectErrorMessage": "内部エラー:Vega-Lite コンパイラーがシングルプロジェクションオブジェクトを生成したはずです",
|
||||
"visTypeVega.vegaParser.widthAndHeightParamsAreIgnoredWithAutosizeFitWarningMessage": "{widthParam} と {heightParam} パラメーターは {autosizeParam} で無視されます",
|
||||
"visTypeVega.visualization.indexNotFoundErrorMessage": "インデックス {index} が見つかりません",
|
||||
"visTypeVega.visualization.renderErrorTitle": "Vega エラー",
|
||||
"visTypeVega.visualization.unableToFindDefaultIndexErrorMessage": "デフォルトのインデックスが見つかりません",
|
||||
|
|
|
|||
|
|
@ -4146,7 +4146,6 @@
|
|||
"visTypeVega.vegaParser.unrecognizedControlsLocationValueErrorMessage": "无法识别的 {controlsLocationParam} 值。应为 [{locToDirMap}] 之一",
|
||||
"visTypeVega.vegaParser.unrecognizedDirValueErrorMessage": "{dirParam} 值无法识别。应为 [{expectedValues}] 之一",
|
||||
"visTypeVega.vegaParser.VLCompilerShouldHaveGeneratedSingleProtectionObjectErrorMessage": "内部错误：Vega-Lite 编译器应已生成单个投影对象",
|
||||
"visTypeVega.vegaParser.widthAndHeightParamsAreIgnoredWithAutosizeFitWarningMessage": "使用 {autosizeParam} 时，将忽略 {widthParam} 和 {heightParam} 参数",
|
||||
"visTypeVega.visualization.indexNotFoundErrorMessage": "找不到索引 {index}",
|
||||
"visTypeVega.visualization.renderErrorTitle": "Vega 错误",
|
||||
"visTypeVega.visualization.unableToFindDefaultIndexErrorMessage": "找不到默认索引",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue