Full screen action

[domoritz]

It would be great to have an action to open a chart in full screen.

[jmaFinistereVar]

I tried to develop this functionality for a project but I am not sure I chose the right solution. I first tried with addSignalListener but after couple of hours searching for examples did not succeed (I always receive an Unrecognized signal name error message). I then opted for an addEventListener and now my figure re-sizes when I double click on it.

• Here is my html file <div #dsHist id="distanceHistogram"></div>

• and the corresponding Angular code

ngAfterViewInit()   
{  
        let el: string = "#distanceHistogram";  
        let data: Array<{ distance_km: number }> = [];  
        for (let i = 0; i < 10000; i++) {  
            data.push({ distance_km: Math.floor(Math.random() * 100) });  
        }
       embed.default(el, {
            data: { values: data },
            mark: "bar",
            encoding: {
                x: {
                    field: "distance_km",
                    type: "quantitative",
                    title: "Distance (km)"
                },
                y: {
                    aggregate: "count",
                    type: "quantitative"
                }
            }
        })
            .then((res: embed.Result) => {    
                let view: vega.View = res.view;
                view.width(FullScreenTry02Component.WIDTH_PX);
                view.height(FullScreenTry02Component.HEIGHT_PX);

                view.addEventListener("dblclick", function (name, value) {
                    this._fullScreen = !this._fullScreen;
                    if (this._fullScreen) {
                        view.width(FullScreenTry02Component.WIDTH_PX_FULL_SCREEN);
                        view.height(FullScreenTry02Component.HEIGHT_PX_FULL_SCREEN);
                    }
                    else {
                        view.width(FullScreenTry02Component.WIDTH_PX);
                        view.height(FullScreenTry02Component.HEIGHT_PX);
                    }
                })
                return res.view.runAsync();
            })
            .then(v => {
                let view: vega.View = v;
            })
            .catch(function (err) {
                throw new Error(err);
            })
}

Now the figure re-sizes correctly when I double-click but I am not sure at all the solution I propose is correct. What's more I still do not know how to add a full screen icon as displayed in the figure below (peraphs should I use layers) ?

Any feedback will be greatly appreciated !

[domoritz]

My idea was to add another action to the Vega-Embed actions, which is independent of Vega signals. See https://github.com/vega/vega-embed/blob/1fcb4389fd95e6025fc308a6b5af6b3c92660c97/src/embed.ts#L323

[domoritz]

Closing since noone has asked for this yet.

[metasoarous]

Doh; Apparently I missed the boat on this! I think this is a great idea, and would definitely use it! Please consider reopening.

Thanks!

[domoritz]

Wanna send a pull request? I'm happy to help with reviews.

[metasoarous]

Maybe; LOL. It's not high priority for me right now, but I might consider working on it at some point.

How do you feel about reopening so that folks interested in contributing can find it more easily?

Thanks as always