Fixed #469 - Charts do not immediately adapt to a smaller width when …

…you switch between visualizers
surveyjs · Sep 4, 2024 · 83743f8 · 83743f8
1 parent 6dad754
commit 83743f8
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/src/plotly/histogram.ts b/src/plotly/histogram.ts
@@ -27,9 +27,9 @@ export class HistogramPlotly extends HistogramModel {
 
   protected async renderContentAsync(container: HTMLElement) {
     const chartNode: HTMLElement = DocumentHelper.createElement("div");
-    await this._chartAdapter.create(chartNode);
     container.innerHTML = "";
     container.appendChild(chartNode);
+    await this._chartAdapter.create(chartNode);
     return container;
   }
 

diff --git a/src/plotly/matrix.ts b/src/plotly/matrix.ts
@@ -27,9 +27,9 @@ export class MatrixPlotly extends Matrix {
 
   protected async renderContentAsync(container: HTMLElement) {
     const chartNode: HTMLElement = DocumentHelper.createElement("div");
-    await this._chartAdapter.create(chartNode);
     container.innerHTML = "";
     container.appendChild(chartNode);
+    await this._chartAdapter.create(chartNode);
     return container;
   }
 }

diff --git a/src/plotly/matrixdropdown-grouped.ts b/src/plotly/matrixdropdown-grouped.ts
@@ -27,9 +27,9 @@ export class MatrixDropdownGroupedPlotly extends MatrixDropdownGrouped {
 
   protected async renderContentAsync(container: HTMLElement) {
     const chartNode: HTMLElement = DocumentHelper.createElement("div");
-    await this._chartAdapter.create(chartNode);
     container.innerHTML = "";
     container.appendChild(chartNode);
+    await this._chartAdapter.create(chartNode);
     return container;
   }
 }

diff --git a/src/plotly/rating.ts b/src/plotly/rating.ts
@@ -103,12 +103,15 @@ export class PlotlyGaugeAdapter {
     };
     PlotlySetup.onPlotCreating.fire(this.model, options);
 
-    return (<any>Plotly).newPlot(
+    const plot = (<any>Plotly).newPlot(
       chartNode,
       options.data,
       options.layout,
       options.config
     );
+    // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
+
+    return plot;
   }
 
   public destroy(node: HTMLElement) {
@@ -142,9 +145,9 @@ export class GaugePlotly extends NumberModel {
 
   protected async renderContentAsync(container: HTMLElement) {
     const chartNode: HTMLElement = DocumentHelper.createElement("div");
-    await this._chartAdapter.create(chartNode);
     container.innerHTML = "";
     container.appendChild(chartNode);
+    await this._chartAdapter.create(chartNode);
     return container;
   }
 }

diff --git a/src/plotly/selectBase.ts b/src/plotly/selectBase.ts
@@ -115,6 +115,7 @@ export class PlotlyChartAdapter {
       dragLayer && (dragLayer.style.cursor = "");
     });
 
+    // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
     this._chart = plot;
     return plot;
   }
@@ -158,9 +159,9 @@ export class SelectBasePlotly extends SelectBase {
 
   protected async renderContentAsync(container: HTMLElement) {
     const chartNode: HTMLElement = DocumentHelper.createElement("div");
-    await this._chartAdapter.create(chartNode);
     container.innerHTML = "";
     container.appendChild(chartNode);
+    await this._chartAdapter.create(chartNode);
     return container;
   }