ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Plotly output resize (#16313)

Browse Source 
Allow plotly to resize based on the size of the output itself, not only when the window is resized. This allows cells in Notebook Views to adjust based on  resize.
This commit is contained in:
Daniel Grajeda
2021-07-21 22:06:26 -06:00
committed by GitHub
parent c5c7ca019d
commit fd954ddcb2
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@@ -740,7 +740,7 @@
"rxjs/**", "rxjs/**",
"ng2-charts", "ng2-charts",
"chart.js", "chart.js",
"plotly.js-dist-min", "plotly.js",
"angular2-grid", "angular2-grid",
"html-query-plan", "html-query-plan",
"turndown", "turndown",

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

@@ -12,7 +12,8 @@ import { IMimeComponent } from 'sql/workbench/contrib/notebook/browser/outputs/m
import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces'; import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
import { MimeModel } from 'sql/workbench/services/notebook/browser/outputs/mimemodel'; import { MimeModel } from 'sql/workbench/services/notebook/browser/outputs/mimemodel';
import { getErrorMessage } from 'vs/base/common/errors'; import { getErrorMessage } from 'vs/base/common/errors';
import { getResizesObserver } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellWidgets';
import * as Plotly from 'plotly.js';
type ObjectType = object; type ObjectType = object;
interface FigureLayout extends ObjectType { interface FigureLayout extends ObjectType {
@@ -26,12 +27,6 @@ interface Figure extends ObjectType {
layout: Partial<FigureLayout>; layout: Partial<FigureLayout>;
} }
declare class PlotlyHTMLElement extends HTMLDivElement {
data: object;
layout: object;
newPlot: () => void;
redraw: () => void;
}
@Component({ @Component({
selector: PlotlyOutputComponent.SELECTOR, selector: PlotlyOutputComponent.SELECTOR,
@@ -42,7 +37,7 @@ declare class PlotlyHTMLElement extends HTMLDivElement {
export class PlotlyOutputComponent extends AngularDisposable implements IMimeComponent, OnInit { export class PlotlyOutputComponent extends AngularDisposable implements IMimeComponent, OnInit {
public static readonly SELECTOR: string = 'plotly-output'; public static readonly SELECTOR: string = 'plotly-output';
private static Plotly?: Promise<typeof import('plotly.js-dist-min')>; private static Plotly?: Promise<typeof Plotly>;
@ViewChild('output', { read: ElementRef }) private output: ElementRef; @ViewChild('output', { read: ElementRef }) private output: ElementRef;
@@ -50,7 +45,8 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
private _rendered: boolean = false; private _rendered: boolean = false;
private _cellModel: ICellModel; private _cellModel: ICellModel;
private _bundleOptions: MimeModel.IOptions; private _bundleOptions: MimeModel.IOptions;
private _plotDiv: PlotlyHTMLElement; private _plotDiv: Plotly.PlotlyHTMLElement;
private _plotly: typeof Plotly;
public errorText: string; public errorText: string;
constructor() { constructor() {
@@ -83,8 +79,13 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
} }
this._plotDiv = this.output.nativeElement; this._plotDiv = this.output.nativeElement;
this._plotDiv.style.maxWidth = '700px'; this._plotDiv.style.maxWidth = '700px';
this._plotDiv.style.width = '100%';
this.renderPlotly(); this.renderPlotly();
this._initialized = true; this._initialized = true;
this._register(getResizesObserver(this._plotDiv, undefined, () => {
this.resize();
})).startObserving();
} }
renderPlotly(): void { renderPlotly(): void {
@@ -106,6 +107,7 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
if (figure) { if (figure) {
let config = { responsive: true }; let config = { responsive: true };
PlotlyOutputComponent.Plotly.then(plotly => { PlotlyOutputComponent.Plotly.then(plotly => {
this._plotly = plotly;
return plotly.newPlot(this._plotDiv, figure.data, figure.layout, config); return plotly.newPlot(this._plotDiv, figure.data, figure.layout, config);
}).catch(e => this.displayError(e)); }).catch(e => this.displayError(e));
} }
@@ -137,6 +139,10 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
// No need to re-layout for now as Plotly is doing its own resize handling. // No need to re-layout for now as Plotly is doing its own resize handling.
} }
private resize() {
this._plotly.Plots.resize(this._plotDiv);
}
public hasError(): boolean { public hasError(): boolean {
return !types.isUndefinedOrNull(this.errorText); return !types.isUndefinedOrNull(this.errorText);
} }