ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix plotly responsiveness (#13119)

Browse Source
This commit is contained in:
Chris LaFreniere
2020-10-28 15:40:46 -07:00
committed by GitHub
parent 9d776863a1
commit 31817c5494
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/sql/workbench/contrib/notebook/browser/outputs/plotlyOutput.component.ts
View File

@@ -82,6 +82,7 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
PlotlyOutputComponent.Plotly = import('plotly.js-dist-min'); PlotlyOutputComponent.Plotly = import('plotly.js-dist-min');
} }
this._plotDiv = this.output.nativeElement; this._plotDiv = this.output.nativeElement;
this._plotDiv.style.maxWidth = '700px';
this.renderPlotly(); this.renderPlotly();
this._initialized = true; this._initialized = true;
} }
@@ -103,13 +104,9 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
this.errorText = undefined; this.errorText = undefined;
const figure = this.getFigure(true); const figure = this.getFigure(true);
if (figure) { if (figure) {
figure.layout = figure.layout || {}; let config = { responsive: true };
if (!figure.layout.width && !figure.layout.autosize) {
// Workaround: to avoid filling up the entire cell, use plotly's default
figure.layout.width = Math.min(700, this._plotDiv.clientWidth);
}
PlotlyOutputComponent.Plotly.then(plotly => { PlotlyOutputComponent.Plotly.then(plotly => {
return plotly.newPlot(this._plotDiv, figure.data, figure.layout); return plotly.newPlot(this._plotDiv, figure.data, figure.layout, config);
}).catch(e => this.displayError(e)); }).catch(e => this.displayError(e));
} }
this._rendered = true; this._rendered = true;