survey-analytics 2.2.3 → 2.2.4

package/fesm/survey.analytics.mjs

@@ -1,14 +1,14 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.2.3
+ * surveyjs - SurveyJS Dashboard library v2.2.4
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
 import { Event, ItemValue } from 'survey-core';
-import { l as localization, D as DocumentHelper, a as DataHelper } from './shared.mjs';
-export { s as surveyStrings } from './shared.mjs';
-import { b as VisualizationManager, S as SelectBase, _ as __awaiter, M as Matrix, B as BooleanModel, d as defaultStatisticsCalculator, H as HistogramModel, N as NumberModel, p as PivotModel } from './shared2.mjs';
-export { A as AlternativeVisualizersWrapper, D as DataProvider, n as NpsAdapter, o as NpsVisualizer, m as NpsVisualizerWidget, P as PostponeHelper, l as StatisticsTable, k as StatisticsTableAdapter, j as Text, T as TextTableAdapter, g as VisualizationMatrixDropdown, f as VisualizationMatrixDynamic, c as VisualizationPanel, e as VisualizationPanelDynamic, a as VisualizerBase, V as VisualizerFactory, i as WordCloud, W as WordCloudAdapter, h as hideEmptyAnswersInData, t as textHelper } from './shared2.mjs';
+import { l as localization, a as DataHelper } from './shared.mjs';
+export { D as DocumentHelper, s as surveyStrings } from './shared.mjs';
+import { N as NumberModel, b as VisualizationManager, S as SelectBase, d as defaultStatisticsCalculator, B as BooleanModel, H as HistogramModel, M as Matrix, p as PivotModel, R as RankingModel, a as VisualizerBase, _ as __awaiter } from './shared2.mjs';
+export { A as AlternativeVisualizersWrapper, D as DataProvider, n as NpsAdapter, o as NpsVisualizer, m as NpsVisualizerWidget, P as PostponeHelper, l as StatisticsTable, k as StatisticsTableAdapter, j as Text, T as TextTableAdapter, g as VisualizationMatrixDropdown, f as VisualizationMatrixDynamic, c as VisualizationPanel, e as VisualizationPanelDynamic, V as VisualizerFactory, i as WordCloud, W as WordCloudAdapter, h as hideEmptyAnswersInData, t as textHelper } from './shared2.mjs';
 import Plotly from 'plotly.js-dist-min';
 
 class PlotlySetup {
@@ -372,6 +372,49 @@ class PlotlySetup {
         }
         return { traces, layout, hasSeries };
     }
+    static setupGauge(model, answersData) {
+        let [level, minValue, maxValue] = answersData;
+        if (model.question.getType() === "rating") {
+            const rateValues = model.question.visibleRateValues;
+            maxValue = rateValues[rateValues.length - 1].value;
+            minValue = rateValues[0].value;
+        }
+        const colors = model.generateColors(maxValue, minValue, NumberModel.stepsCount);
+        if (NumberModel.showAsPercentage) {
+            level = DataHelper.toPercentage(level, maxValue);
+            minValue = DataHelper.toPercentage(minValue, maxValue);
+            maxValue = DataHelper.toPercentage(maxValue, maxValue);
+        }
+        var traces = [
+            {
+                type: "indicator",
+                mode: "gauge+number",
+                gauge: {
+                    axis: { range: [minValue, maxValue] },
+                    shape: model.chartType,
+                    bgcolor: "white",
+                    bar: { color: colors[0] },
+                },
+                value: level,
+                text: model.name,
+                domain: { x: [0, 1], y: [0, 1] },
+            },
+        ];
+        const chartMargin = model.chartType === "bullet" ? 60 : 30;
+        var layout = {
+            height: 250,
+            margin: {
+                l: chartMargin,
+                r: chartMargin,
+                b: chartMargin,
+                t: chartMargin,
+                pad: 5
+            },
+            plot_bgcolor: model.backgroundColor,
+            paper_bgcolor: model.backgroundColor,
+        };
+        return { traces, layout, hasSeries: false };
+    }
 }
 PlotlySetup.imageExportFormat = "png";
 /**
@@ -391,6 +434,8 @@ PlotlySetup.setups = {
     doughnut: PlotlySetup.setupPie,
     pie: PlotlySetup.setupPie,
     scatter: PlotlySetup.setupScatter,
+    gauge: PlotlySetup.setupGauge,
+    bullet: PlotlySetup.setupGauge,
 };
 PlotlySetup.getTruncatedLabel = (label, labelTruncateLength) => {
     const truncateSymbols = "...";
@@ -404,262 +449,9 @@ PlotlySetup.getTruncatedLabel = (label, labelTruncateLength) => {
     return label.substring(0, labelTruncateLength) + truncateSymbols;
 };
 
-class PlotlyChartAdapter {
-    constructor(model) {
-        this.model = model;
-        this._chart = undefined;
-    }
-    patchConfigParameters(chartNode, traces, layout, config) { }
-    get chart() {
-        return this._chart;
-    }
-    create(chartNode) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const [plot, plotlyOptions] = yield this.update(chartNode);
-            chartNode["on"]("plotly_click", (data) => {
-                if (data.points.length > 0) {
-                    let itemText = "";
-                    if (!plotlyOptions.hasSeries) {
-                        itemText = Array.isArray(data.points[0].customdata)
-                            ? data.points[0].customdata[0]
-                            : data.points[0].customdata;
-                        const item = this.model.getSelectedItemByText(itemText);
-                        this.model.setSelection(item);
-                    }
-                    else {
-                        itemText = data.points[0].data.name;
-                        const propertyLabel = data.points[0].label;
-                        const seriesValues = this.model.getSeriesValues();
-                        const seriesLabels = this.model.getSeriesLabels();
-                        const propertyValue = seriesValues[seriesLabels.indexOf(propertyLabel)];
-                        const selectedItem = this.model.getSelectedItemByText(itemText);
-                        const item = new ItemValue({ [propertyValue]: selectedItem.value }, propertyLabel + ": " + selectedItem.text);
-                        this.model.setSelection(item);
-                    }
-                    // const itemText = plotlyOptions.hasSeries
-                    //   ? data.points[0].data.name
-                    //   : Array.isArray(data.points[0].customdata)
-                    //     ? data.points[0].customdata[0]
-                    //     : data.points[0].customdata;
-                    // const item: ItemValue = this.model.getSelectedItemByText(itemText);
-                    // this.model.setSelection(item);
-                }
-            });
-            var getDragLayer = () => chartNode.getElementsByClassName("nsewdrag")[0];
-            chartNode["on"]("plotly_hover", () => {
-                const dragLayer = getDragLayer();
-                dragLayer && (dragLayer.style.cursor = "pointer");
-            });
-            chartNode["on"]("plotly_unhover", () => {
-                const dragLayer = getDragLayer();
-                dragLayer && (dragLayer.style.cursor = "");
-            });
-            // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
-            this._chart = plot;
-            return plot;
-        });
-    }
-    update(chartNode) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const answersData = yield this.model.getAnswersData();
-            var plotlyOptions = PlotlySetup.setup(this.model.chartType, this.model, answersData);
-            let config = {
-                displaylogo: false,
-                responsive: true,
-                locale: localization.currentLocale,
-                modeBarButtonsToRemove: ["toImage"],
-                modeBarButtonsToAdd: [
-                    {
-                        name: "toImageSjs",
-                        title: localization.getString("saveDiagramAsPNG"),
-                        icon: Plotly.Icons.camera,
-                        click: (gd) => {
-                            let options = {
-                                format: PlotlySetup.imageExportFormat,
-                                // width: 800,
-                                // height: 600,
-                                filename: this.model.question.name,
-                            };
-                            PlotlySetup.onImageSaving.fire(this.model, options);
-                            Plotly.downloadImage(gd, options);
-                        },
-                    },
-                ],
-            };
-            if (SelectBasePlotly.displayModeBar !== undefined) {
-                config.displayModeBar = SelectBasePlotly.displayModeBar;
-            }
-            this.patchConfigParameters(chartNode, plotlyOptions.traces, plotlyOptions.layout, config);
-            let options = {
-                traces: plotlyOptions.traces,
-                layout: plotlyOptions.layout,
-                config: config,
-            };
-            PlotlySetup.onPlotCreating.fire(this.model, options);
-            const plot = Plotly.react(chartNode, options.traces, options.layout, options.config);
-            return [plot, plotlyOptions];
-        });
-    }
-    destroy(node) {
-        if (!!node) {
-            Plotly.purge(node);
-        }
-        this._chart = undefined;
-    }
-}
-class SelectBasePlotly extends SelectBase {
-    constructor(question, data, options = {}, name) {
-        super(question, data, options, name);
-        this.chartTypes = [].concat(SelectBasePlotly.types);
-        if (this.getSeriesValues().length > 0 && this.chartTypes.indexOf("stackedbar") === -1) {
-            this.chartTypes.push("stackedbar");
-        }
-        if (options.allowExperimentalFeatures) ;
-        this._chartType = this.chartTypes[0];
-        if (this.chartTypes.indexOf(options.defaultChartType) !== -1) {
-            this._chartType = options.defaultChartType;
-        }
-        this._chartAdapter = new PlotlyChartAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            yield this._chartAdapter.create(chartNode);
-            return container;
-        });
-    }
-    updateContent() {
-        var _a;
-        const chartNode = (_a = this.contentContainer) === null || _a === void 0 ? void 0 : _a.children[0];
-        if (chartNode) {
-            this._chartAdapter.update(chartNode);
-        }
-    }
-}
-SelectBasePlotly.types = ["bar", "vbar", "pie", "doughnut"];
-SelectBasePlotly.displayModeBar = undefined;
-VisualizationManager.registerVisualizer("checkbox", SelectBasePlotly);
-VisualizationManager.registerVisualizer("radiogroup", SelectBasePlotly);
-VisualizationManager.registerVisualizer("dropdown", SelectBasePlotly);
-VisualizationManager.registerVisualizer("imagepicker", SelectBasePlotly);
-VisualizationManager.registerVisualizer("tagbox", SelectBasePlotly);
-
-class MatrixPlotly extends Matrix {
-    constructor(question, data, options, name) {
-        super(question, data, options, name);
-        this.chartTypes = MatrixPlotly.types;
-        this._chartType = this.chartTypes[0];
-        this._chartAdapter = new PlotlyChartAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            yield this._chartAdapter.create(chartNode);
-            return container;
-        });
-    }
-}
-MatrixPlotly.types = ["bar", "stackedbar", "pie", "doughnut"];
-VisualizationManager.registerVisualizer("matrix", MatrixPlotly);
-
-class PlotlyBoolChartAdapter extends PlotlyChartAdapter {
-    constructor(model) {
-        super(model);
-    }
-    patchConfigParameters(chartNode, traces, layout, config) {
-        const colors = this.model.getColors();
-        const boolColors = [
-            BooleanPlotly.trueColor || colors[0],
-            BooleanPlotly.falseColor || colors[1],
-        ];
-        if (this.model.showMissingAnswers) {
-            boolColors.push(colors[2]);
-        }
-        if (this.model.chartType === "pie" || this.model.chartType === "doughnut") {
-            traces.forEach((trace) => {
-                trace.marker.colors = boolColors;
-            });
-        }
-        else if (this.model.chartType === "bar") {
-            traces.forEach((trace) => {
-                trace.marker.color = boolColors;
-            });
-        }
-    }
-}
-class BooleanPlotly extends BooleanModel {
-    constructor(question, data, options, name) {
-        super(question, data, options, name);
-        this.chartTypes = BooleanPlotly.types;
-        this._chartType = this.chartTypes[0];
-        this._chartAdapter = new PlotlyBoolChartAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            yield this._chartAdapter.create(chartNode);
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            return container;
-        });
-    }
-}
-BooleanPlotly.types = ["pie", "bar", "doughnut"];
-VisualizationManager.registerVisualizer("boolean", BooleanPlotly);
-
-class RankingPlotly extends SelectBasePlotly {
-    getQuestionResults() {
-        const name = this.question.name;
-        return this.data.map((dataItem) => dataItem[name]);
-    }
-    getEmptyData() {
-        const choices = this.getValues();
-        let data = [];
-        data.length = choices.length;
-        data.fill(0);
-        return data;
-    }
-    getCalculatedValuesCore() {
-        const results = this.getQuestionResults();
-        const choices = this.getValues();
-        let plotlyData = this.getEmptyData();
-        results.forEach((result) => {
-            this.applyResultToPlotlyData(result, plotlyData, choices);
-        });
-        return [plotlyData];
-    }
-    applyResultToPlotlyData(result, plotlyData, choices) {
-        if (!result || !plotlyData || !choices)
-            return;
-        result.forEach((resultValue, resultValueIndex, result) => {
-            let index = choices.indexOf(resultValue);
-            plotlyData[index] =
-                +plotlyData[index] + (result.length - resultValueIndex);
-        });
-    }
-}
-VisualizationManager.registerVisualizer("ranking", RankingPlotly);
-
 class MatrixDropdownGrouped extends SelectBase {
     constructor(question, data, options, name) {
         super(question, data, options, name || "matrixDropdownGrouped");
-        // this.getAnswersData();
     }
     get matrixQuestion() {
         return this.question;
@@ -696,124 +488,153 @@ class MatrixDropdownGrouped extends SelectBase {
             getSeriesValues: () => rows,
             getSeriesLabels: () => rows,
         });
-        const preparedData = [];
-        values.forEach((val, valueIndex) => {
-            const seriesData = series.map((seriesName, seriesIndex) => statistics[seriesIndex][0][valueIndex]);
-            preparedData.push(seriesData);
-        });
-        return preparedData;
+        return statistics.map(s => s[0]);
     }
 }
+VisualizationManager.registerVisualizer("matrixdropdown-grouped", MatrixDropdownGrouped);
 
-class MatrixDropdownGroupedPlotly extends MatrixDropdownGrouped {
-    constructor(question, data, options, name) {
-        super(question, data, options, name);
-        this.chartTypes = MatrixDropdownGroupedPlotly.types;
-        this._chartType = this.chartTypes[0];
-        this._chartAdapter = new PlotlyChartAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            yield this._chartAdapter.create(chartNode);
-            return container;
-        });
-    }
+class SelectBasePlotly extends SelectBase {
 }
-MatrixDropdownGroupedPlotly.types = ["stackedbar", "bar", "pie", "doughnut"];
-VisualizationManager.registerVisualizer("matrixdropdown-grouped", MatrixDropdownGroupedPlotly);
-
+SelectBasePlotly.types = ["bar", "vbar", "pie", "doughnut"];
+SelectBasePlotly.displayModeBar = undefined;
+class BooleanPlotly extends BooleanModel {
+}
+BooleanPlotly.types = ["pie", "bar", "doughnut"];
 class HistogramPlotly extends HistogramModel {
-    constructor(question, data, options, name) {
-        super(question, data, options, name);
-        this.chartTypes = HistogramPlotly.types;
-        this._chartType = this.chartTypes[0];
-        this._chartAdapter = new PlotlyChartAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            yield this._chartAdapter.create(chartNode);
-            return container;
-        });
-    }
-    getValueType() {
-        return this.valueType;
-    }
 }
 HistogramPlotly.types = ["vbar", "bar"];
-VisualizationManager.registerVisualizer("date", HistogramPlotly);
-VisualizationManager.registerVisualizer("number", HistogramPlotly);
-VisualizationManager.registerVisualizer("rating", HistogramPlotly);
+class MatrixPlotly extends Matrix {
+}
+MatrixPlotly.types = ["bar", "stackedbar", "pie", "doughnut"];
+class MatrixDropdownGroupedPlotly extends MatrixDropdownGrouped {
+}
+MatrixDropdownGroupedPlotly.types = ["stackedbar", "bar", "pie", "doughnut"];
+class PivotPlotly extends PivotModel {
+}
+PivotPlotly.types = ["vbar", "bar", "line", "stackedbar", "pie", "doughnut"]; // ["vbar", "bar"];
+class GaugePlotly extends NumberModel {
+}
+GaugePlotly.displayModeBar = undefined;
+GaugePlotly.types = ["gauge", "bullet"];
+class RankingPlotly extends RankingModel {
+}
 
-class PlotlyGaugeAdapter {
+class PlotlyChartAdapter {
     constructor(model) {
         this.model = model;
         this._chart = undefined;
     }
+    patchConfigParameters(chartNode, traces, layout, config) {
+        if (this.model.question.getType() === "boolean") {
+            const colors = this.model.getColors();
+            const boolColors = [
+                BooleanModel.trueColor || colors[0],
+                BooleanModel.falseColor || colors[1],
+            ];
+            if (this.model.showMissingAnswers) {
+                boolColors.push(colors[2]);
+            }
+            const chartType = this.model.chartType;
+            if (chartType === "pie" || chartType === "doughnut") {
+                traces.forEach((trace) => {
+                    trace.marker.colors = boolColors;
+                });
+            }
+            else if (chartType === "bar") {
+                traces.forEach((trace) => {
+                    trace.marker.color = boolColors;
+                });
+            }
+        }
+        if (this.model.type === "number") {
+            config.displayModeBar = true;
+        }
+    }
     get chart() {
         return this._chart;
     }
+    getChartTypes() {
+        const visualizerType = this.model.type;
+        if (visualizerType === "boolean") {
+            return BooleanPlotly.types;
+        }
+        else if (visualizerType === "number") {
+            return GaugePlotly.types;
+        }
+        else if (visualizerType === "selectBase") {
+            return SelectBasePlotly.types;
+        }
+        else if (visualizerType === "histogram") {
+            return HistogramPlotly.types;
+        }
+        else if (visualizerType === "matrix") {
+            return MatrixPlotly.types;
+        }
+        else if (visualizerType === "matrixDropdownGrouped") {
+            return MatrixDropdownGroupedPlotly.types;
+        }
+        else if (visualizerType === "pivot") {
+            return PivotPlotly.types;
+        }
+        return [];
+    }
     create(chartNode) {
         return __awaiter(this, void 0, void 0, function* () {
-            const question = this.model.question;
-            let [level, minValue, maxValue] = yield this.model.getCalculatedValues();
-            if (question.getType() === "rating") {
-                const rateValues = question.visibleRateValues;
-                maxValue = rateValues[rateValues.length - 1].value;
-                minValue = rateValues[0].value;
-            }
-            const colors = this.model.generateColors(maxValue, minValue, GaugePlotly.stepsCount);
-            if (GaugePlotly.showAsPercentage) {
-                level = DataHelper.toPercentage(level, maxValue);
-                minValue = DataHelper.toPercentage(minValue, maxValue);
-                maxValue = DataHelper.toPercentage(maxValue, maxValue);
+            const [plot, plotlyOptions] = yield this.update(chartNode);
+            if (this.model instanceof SelectBase) {
+                const _model = this.model;
+                chartNode["on"]("plotly_click", (data) => {
+                    if (data.points.length > 0) {
+                        let itemText = "";
+                        if (!plotlyOptions.hasSeries) {
+                            itemText = Array.isArray(data.points[0].customdata)
+                                ? data.points[0].customdata[0]
+                                : data.points[0].customdata;
+                            const item = _model.getSelectedItemByText(itemText);
+                            _model.setSelection(item);
+                        }
+                        else {
+                            itemText = data.points[0].data.name;
+                            const propertyLabel = data.points[0].label;
+                            const seriesValues = this.model.getSeriesValues();
+                            const seriesLabels = this.model.getSeriesLabels();
+                            const propertyValue = seriesValues[seriesLabels.indexOf(propertyLabel)];
+                            const selectedItem = _model.getSelectedItemByText(itemText);
+                            const item = new ItemValue({ [propertyValue]: selectedItem.value }, propertyLabel + ": " + selectedItem.text);
+                            _model.setSelection(item);
+                        }
+                        // const itemText = plotlyOptions.hasSeries
+                        //   ? data.points[0].data.name
+                        //   : Array.isArray(data.points[0].customdata)
+                        //     ? data.points[0].customdata[0]
+                        //     : data.points[0].customdata;
+                        // const item: ItemValue = this.model.getSelectedItemByText(itemText);
+                        // this.model.setSelection(item);
+                    }
+                });
             }
-            var data = [
-                {
-                    type: "indicator",
-                    mode: "gauge+number",
-                    gauge: {
-                        axis: { range: [minValue, maxValue] },
-                        shape: this.model.chartType,
-                        bgcolor: "white",
-                        bar: { color: colors[0] },
-                    },
-                    value: level,
-                    text: question.name,
-                    domain: { x: [0, 1], y: [0, 1] },
-                },
-            ];
-            const chartMargin = this.model.chartType === "bullet" ? 60 : 30;
-            var layout = {
-                height: 250,
-                margin: {
-                    l: chartMargin,
-                    r: chartMargin,
-                    b: chartMargin,
-                    t: chartMargin,
-                    pad: 5
-                },
-                plot_bgcolor: this.model.backgroundColor,
-                paper_bgcolor: this.model.backgroundColor,
-            };
-            const config = {
-                displayModeBar: true,
-                locale: localization.currentLocale,
-                responsive: true,
+            var getDragLayer = () => chartNode.getElementsByClassName("nsewdrag")[0];
+            chartNode["on"]("plotly_hover", () => {
+                const dragLayer = getDragLayer();
+                dragLayer && (dragLayer.style.cursor = "pointer");
+            });
+            chartNode["on"]("plotly_unhover", () => {
+                const dragLayer = getDragLayer();
+                dragLayer && (dragLayer.style.cursor = "");
+            });
+            // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
+            this._chart = plot;
+            return plot;
+        });
+    }
+    update(chartNode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const answersData = (this.model instanceof SelectBase) ? yield this.model.getAnswersData() : yield this.model.getCalculatedValues();
+            var plotlyOptions = PlotlySetup.setup(this.model.chartType, this.model, answersData);
+            let config = {
                 displaylogo: false,
+                responsive: true,
+                locale: localization.currentLocale,
                 modeBarButtonsToRemove: ["toImage"],
                 modeBarButtonsToAdd: [
                     {
@@ -833,18 +654,18 @@ class PlotlyGaugeAdapter {
                     },
                 ],
             };
-            if (GaugePlotly.displayModeBar !== undefined) {
-                config.displayModeBar = GaugePlotly.displayModeBar;
+            if (SelectBasePlotly.displayModeBar !== undefined) {
+                config.displayModeBar = SelectBasePlotly.displayModeBar;
             }
+            this.patchConfigParameters(chartNode, plotlyOptions.traces, plotlyOptions.layout, config);
             let options = {
-                data: data,
-                layout: layout,
+                traces: plotlyOptions.traces,
+                layout: plotlyOptions.layout,
                 config: config,
             };
             PlotlySetup.onPlotCreating.fire(this.model, options);
-            const plot = Plotly.newPlot(chartNode, options.data, options.layout, options.config);
-            // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
-            return plot;
+            const plot = Plotly.react(chartNode, options.traces, options.layout, options.config);
+            return [plot, plotlyOptions];
         });
     }
     destroy(node) {
@@ -854,59 +675,7 @@ class PlotlyGaugeAdapter {
         this._chart = undefined;
     }
 }
-class GaugePlotly extends NumberModel {
-    constructor(question, data, options, name) {
-        super(question, data, options, name);
-        this.chartTypes = GaugePlotly.types;
-        this.chartType = this.chartTypes[0];
-        this._chartAdapter = new PlotlyGaugeAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            yield this._chartAdapter.create(chartNode);
-            return container;
-        });
-    }
-}
-GaugePlotly.displayModeBar = undefined;
-GaugePlotly.types = ["gauge", "bullet"];
-VisualizationManager.registerVisualizer("number", GaugePlotly);
-VisualizationManager.registerVisualizer("rating", GaugePlotly);
-VisualizationManager.registerVisualizer("expression", GaugePlotly);
-
-class PivotPlotly extends PivotModel {
-    constructor(questions, data, options, name) {
-        super(questions, data, options, name);
-        this.chartTypes = PivotPlotly.types;
-        this._chartType = this.chartTypes[0];
-        this._chartAdapter = new PlotlyChartAdapter(this);
-    }
-    destroyContent(container) {
-        this._chartAdapter.destroy(container.children[0]);
-        super.destroyContent(container);
-    }
-    renderContentAsync(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chartNode = DocumentHelper.createElement("div");
-            container.innerHTML = "";
-            container.appendChild(chartNode);
-            yield this._chartAdapter.create(chartNode);
-            return container;
-        });
-    }
-    getValueType() {
-        return this.valueType;
-    }
-}
-PivotPlotly.types = ["vbar", "bar", "line", "stackedbar", "pie", "doughnut"]; // ["vbar", "bar"];
-VisualizationManager.registerPivotVisualizer(PivotPlotly);
+VisualizerBase.chartAdapterType = PlotlyChartAdapter;
 
-export { BooleanModel, BooleanPlotly, DocumentHelper, GaugePlotly, HistogramModel, HistogramPlotly, Matrix, MatrixDropdownGroupedPlotly, MatrixPlotly, NumberModel, PivotModel, PivotPlotly, PlotlyBoolChartAdapter, PlotlyChartAdapter, PlotlyGaugeAdapter, PlotlySetup, RankingPlotly, SelectBase, SelectBasePlotly, VisualizationManager, defaultStatisticsCalculator, localization };
+export { BooleanModel, BooleanPlotly, GaugePlotly, HistogramModel, HistogramPlotly, Matrix, MatrixDropdownGroupedPlotly, MatrixPlotly, NumberModel, PivotModel, PivotPlotly, PlotlyChartAdapter, PlotlySetup, RankingModel, RankingPlotly, SelectBase, SelectBasePlotly, VisualizationManager, VisualizerBase, defaultStatisticsCalculator, localization };
 //# sourceMappingURL=survey.analytics.mjs.map