survey-analytics 2.2.2 → 2.2.4

package/fesm/shared2.mjs

@@ -1,11 +1,11 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.2.2
+ * 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, QuestionCommentModel, settings, ItemValue, hasLicense, surveyLocalization, IsTouch, Helpers } from 'survey-core';
 import { D as DocumentHelper, l as localization, f as createLoadingIndicator, a as DataHelper, e as svgTemplate, d as createCommercialLicenseLink, t as toPrecision } from './shared.mjs';
+import { Event, QuestionCommentModel, settings, ItemValue, hasLicense, surveyLocalization, IsTouch, Helpers } from 'survey-core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -240,8 +240,15 @@ class VisualizationManager {
     static registerAltVisualizerSelector(constructor) {
         VisualizationManager.alternativesVisualizer = constructor;
     }
+    static getPivotVisualizerConstructor() {
+        return VisualizationManager.pivotVisualizer || VisualizerBase;
+    }
+    static registerPivotVisualizer(constructor) {
+        VisualizationManager.pivotVisualizer = constructor;
+    }
 }
 VisualizationManager.alternativesVisualizer = undefined;
+VisualizationManager.pivotVisualizer = undefined;
 VisualizationManager.vizualizers = {};
 
 /**
@@ -349,6 +356,7 @@ class VisualizerBase {
         this.contentContainer = undefined;
         this.footerContainer = undefined;
         this._supportSelection = false;
+        this._chartAdapter = undefined;
         /**
          * An event that is raised after the visualizer's content is rendered.
          *
@@ -447,12 +455,12 @@ class VisualizerBase {
     get hasFooter() {
         return (!!this.question && (this.question.hasComment || this.question.hasOther));
     }
-    createVisualizer(question, options) {
+    createVisualizer(question, options, data) {
         let visualizerOptions = Object.assign({}, options || this.options);
         if (visualizerOptions.dataProvider === undefined) {
             visualizerOptions.dataProvider = this.dataProvider;
         }
-        return VisualizerFactory.createVisualizer(question, this.data, visualizerOptions);
+        return VisualizerFactory.createVisualizer(question, data || this.data, visualizerOptions);
     }
     /**
      * Allows you to access the footer visualizer. Returns `undefined` if the footer is absent.
@@ -666,9 +674,10 @@ class VisualizerBase {
         if (!!this.options && typeof this.options.destroyContent === "function") {
             this.options.destroyContent(container, this);
         }
-        else {
-            container.innerHTML = "";
+        else if (this._chartAdapter) {
+            this._chartAdapter.destroy(container.children[0]);
         }
+        container.innerHTML = "";
     }
     renderHeader(container) {
         if (!!this.options && typeof this.options.renderHeader === "function") {
@@ -682,10 +691,16 @@ class VisualizerBase {
     }
     renderContentAsync(container) {
         return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => {
+            if (this._chartAdapter) {
+                const chartNode = DocumentHelper.createElement("div");
+                container.innerHTML = "";
+                container.appendChild(chartNode);
+                yield this._chartAdapter.create(chartNode);
+            }
+            else {
                 container.innerText = localization.getString("noVisualizerForQuestion");
-                resolve(container);
-            });
+            }
+            return container;
         });
     }
     ensureQuestionIsReady() {
@@ -764,10 +779,31 @@ class VisualizerBase {
         targetElement.appendChild(this.footerContainer);
         this.renderFooter(this.footerContainer);
     }
-    updateContent() {
+    updateToolbar() {
+        if (!!this.toolbarContainer) {
+            PostponeHelper.postpone(() => {
+                this.destroyToolbar(this.toolbarContainer);
+                this.renderToolbar(this.toolbarContainer);
+            });
+        }
+    }
+    isSupportSoftUpdateContent() {
+        return false;
+    }
+    softUpdateContent() {
+    }
+    hardUpdateContent() {
         this.destroyContent(this.contentContainer);
         this.renderContent(this.contentContainer);
     }
+    updateContent() {
+        if (!this.isSupportSoftUpdateContent()) {
+            this.hardUpdateContent();
+        }
+        else {
+            this.softUpdateContent();
+        }
+    }
     /**
      * Re-renders the visualizer and its content.
      */
@@ -958,6 +994,7 @@ class VisualizerBase {
     }
 }
 VisualizerBase.suppressVisualizerStubRendering = false;
+VisualizerBase.chartAdapterType = undefined;
 // public static otherCommentQuestionType = "comment"; // TODO: make it configureable - allow choose what kind of question/visualizer will be used for comments/others
 VisualizerBase.otherCommentCollapsed = true;
 VisualizerBase.customColors = [];
@@ -1031,6 +1068,131 @@ function defaultStatisticsCalculator(data, dataInfo) {
     return dataInfo.dataNames.length > 1 ? statistics : statistics[0];
 }
 
+class NumberModel extends VisualizerBase {
+    constructor(question, data, options = {}, name) {
+        super(question, data, options, name || "number");
+        if (VisualizerBase.chartAdapterType) {
+            this._chartAdapter = new VisualizerBase.chartAdapterType(this);
+            this.chartTypes = this._chartAdapter.getChartTypes();
+            this.chartType = this.chartTypes[0];
+        }
+        this.registerToolbarItem("changeChartType", () => {
+            if (this.chartTypes.length > 1) {
+                return DocumentHelper.createSelector(this.chartTypes.map((chartType) => {
+                    return {
+                        value: chartType,
+                        text: localization.getString("chartType_" + chartType),
+                    };
+                }), (option) => this.chartType === option.value, (e) => {
+                    this.setChartType(e.target.value);
+                });
+            }
+            return null;
+        });
+    }
+    onDataChanged() {
+        this._resultAverage = undefined;
+        this._resultMin = undefined;
+        this._resultMax = undefined;
+        super.onDataChanged();
+    }
+    onChartTypeChanged() { }
+    setChartType(chartType) {
+        if (this.chartTypes.indexOf(chartType) !== -1 &&
+            this.chartType !== chartType) {
+            this.chartType = chartType;
+            this.onChartTypeChanged();
+            if (!!this.contentContainer) {
+                this.destroyContent(this.contentContainer);
+                this.renderContent(this.contentContainer);
+            }
+            this.invokeOnUpdate();
+        }
+    }
+    destroy() {
+        this._resultAverage = undefined;
+        this._resultMin = undefined;
+        this._resultMax = undefined;
+        super.destroy();
+    }
+    generateText(maxValue, minValue, stepsCount) {
+        let texts = [];
+        if (stepsCount === 5) {
+            texts = [
+                "very high (" + maxValue + ")",
+                "high",
+                "medium",
+                "low",
+                "very low (" + minValue + ")",
+            ];
+        }
+        else {
+            texts.push(maxValue);
+            for (let i = 0; i < stepsCount - 2; i++) {
+                texts.push("");
+            }
+            texts.push(minValue);
+        }
+        if (!!NumberModel.generateTextsCallback) {
+            return NumberModel.generateTextsCallback(this.question, maxValue, minValue, stepsCount, texts);
+        }
+        return texts;
+    }
+    generateValues(maxValue, stepsCount) {
+        const values = [];
+        for (let i = 0; i < stepsCount; i++) {
+            values.push(maxValue / stepsCount);
+        }
+        values.push(maxValue);
+        return values;
+    }
+    generateColors(maxValue, minValue, stepsCount) {
+        const palette = this.getColors();
+        const colors = [];
+        for (let i = 0; i < stepsCount; i++) {
+            colors.push(palette[i]);
+        }
+        colors.push("rgba(255, 255, 255, 0)");
+        return colors;
+    }
+    convertFromExternalData(externalCalculatedData) {
+        return [externalCalculatedData.value || 0, externalCalculatedData.minValue || 0, externalCalculatedData.maxValue || 0];
+    }
+    getCalculatedValuesCore() {
+        if (this._resultAverage === undefined ||
+            this._resultMin === undefined ||
+            this._resultMax === undefined) {
+            this._resultMin = Number.MAX_VALUE;
+            this._resultMax = -Number.MAX_VALUE;
+            this._resultAverage = 0;
+            let actualAnswerCount = 0;
+            this.data.forEach((rowData) => {
+                if (rowData[this.question.name] !== undefined) {
+                    const questionValue = +rowData[this.question.name];
+                    actualAnswerCount++;
+                    this._resultAverage += questionValue;
+                    if (this._resultMin > questionValue) {
+                        this._resultMin = questionValue;
+                    }
+                    if (this._resultMax < questionValue) {
+                        this._resultMax = questionValue;
+                    }
+                }
+            });
+            if (actualAnswerCount > 0) {
+                this._resultAverage = this._resultAverage / actualAnswerCount;
+            }
+            this._resultAverage = Math.ceil(this._resultAverage * 100) / 100;
+        }
+        return [this._resultAverage, this._resultMin, this._resultMax];
+    }
+}
+NumberModel.stepsCount = 5;
+NumberModel.showAsPercentage = false;
+VisualizationManager.registerVisualizer("number", NumberModel, 200);
+VisualizationManager.registerVisualizer("rating", NumberModel, 200);
+VisualizationManager.registerVisualizer("expression", NumberModel);
+
 function hideEmptyAnswersInData(answersData) {
     const result = {
         datasets: [],
@@ -1056,9 +1218,9 @@ function hideEmptyAnswersInData(answersData) {
     seriesDataExistence.length = answersData.seriesLabels.length;
     const valuesDataExistence = [];
     valuesDataExistence.length = answersData.labels.length;
-    for (var valueIndex = 0; valueIndex < answersData.labels.length; valueIndex++) {
-        for (var seriesIndex = 0; seriesIndex < answersData.seriesLabels.length; seriesIndex++) {
-            if (answersData.datasets[valueIndex][seriesIndex] != 0) {
+    for (var seriesIndex = 0; seriesIndex < answersData.seriesLabels.length; seriesIndex++) {
+        for (var valueIndex = 0; valueIndex < answersData.labels.length; valueIndex++) {
+            if (answersData.datasets[seriesIndex][valueIndex] != 0) {
                 seriesDataExistence[seriesIndex] = true;
                 valuesDataExistence[valueIndex] = true;
             }
@@ -1075,14 +1237,14 @@ function hideEmptyAnswersInData(answersData) {
             result.seriesLabels.push(answersData.seriesLabels[seriesIndex]);
         }
     }
-    for (var valueIndex = 0; valueIndex < answersData.labels.length; valueIndex++) {
-        if (valuesDataExistence[valueIndex]) {
+    for (var seriesIndex = 0; seriesIndex < answersData.datasets.length; seriesIndex++) {
+        if (seriesDataExistence[seriesIndex]) {
             const dataset = [];
             const texts = [];
-            for (var seriesIndex = 0; seriesIndex < answersData.datasets.length; seriesIndex++) {
-                if (seriesDataExistence[seriesIndex]) {
-                    dataset.push(answersData.datasets[valueIndex][seriesIndex]);
-                    texts.push(answersData.texts[valueIndex][seriesIndex]);
+            for (var valueIndex = 0; valueIndex < answersData.labels.length; valueIndex++) {
+                if (valuesDataExistence[valueIndex]) {
+                    dataset.push(answersData.datasets[seriesIndex][valueIndex]);
+                    texts.push(answersData.texts[seriesIndex][valueIndex]);
                 }
             }
             result.datasets.push(dataset);
@@ -1119,17 +1281,34 @@ class SelectBase extends VisualizerBase {
          * options fields can be modified
          */
         this.onAnswersDataReady = new Event();
-        question.visibleChoicesChangedCallback = () => {
-            this.dataProvider.raiseDataChanged();
-        };
+        if (!!question) { // TODO: move somewhere else
+            question.visibleChoicesChangedCallback = () => {
+                this.dataProvider.raiseDataChanged();
+            };
+        }
         this._showPercentages = this.options.showPercentages === true;
         this._showOnlyPercentages = this.options.showOnlyPercentages === true;
         if (this.options.percentagePrecision) {
             this._percentagePrecision = this.options.percentagePrecision;
         }
+        if (this.options.transposeData !== undefined) {
+            this._transposeData = this.options.transposeData;
+        }
         this._hideEmptyAnswers = this.options.hideEmptyAnswers === true;
         this._answersOrder = this.options.answersOrder || "default";
         this._showMissingAnswers = this.isSupportMissingAnswers() && this.options.showMissingAnswers === true;
+        if (this.options.allowExperimentalFeatures) ;
+        if (VisualizerBase.chartAdapterType) {
+            this._chartAdapter = new VisualizerBase.chartAdapterType(this);
+            this.chartTypes = this._chartAdapter.getChartTypes();
+            if (this.getSeriesValues().length > 0 && this.chartTypes.indexOf("stackedbar") === -1) {
+                this.chartTypes.push("stackedbar");
+            }
+            this._chartType = this.chartTypes[0];
+            if (this.chartTypes.indexOf(this.options.defaultChartType) !== -1) {
+                this._chartType = this.options.defaultChartType;
+            }
+        }
         this.registerToolbarItem("changeChartType", () => {
             if (this.chartTypes.length > 1) {
                 return DocumentHelper.createSelector(this.chartTypes.map((chartType) => {
@@ -1307,6 +1486,16 @@ class SelectBase extends VisualizerBase {
         const selectBaseQuestion = this.question;
         return resultValues.map((value) => ItemValue.getTextOrHtmlByValue(selectBaseQuestion.choices, value)).join(", ");
     }
+    isSupportSoftUpdateContent() {
+        return true;
+    }
+    softUpdateContent() {
+        var _a;
+        const chartNode = (_a = this.contentContainer) === null || _a === void 0 ? void 0 : _a.children[0];
+        if (chartNode) {
+            this._chartAdapter.update(chartNode);
+        }
+    }
     getSelectedItemByText(itemText) {
         const selBase = this.question;
         if (this.question.hasOther && itemText == selBase.otherText) {
@@ -1562,9 +1751,9 @@ class SelectBase extends VisualizerBase {
         const series = this.getSeriesValues();
         const innerCalculatedData = [];
         if (series.length > 0) {
-            for (let i = 0; i < values.length; i++) {
+            for (let j = 0; j < series.length; j++) {
                 const seriesData = [];
-                for (let j = 0; j < series.length; j++) {
+                for (let i = 0; i < values.length; i++) {
                     if (!!externalCalculatedData[series[j]]) {
                         seriesData.push(externalCalculatedData[series[j]][values[i]] || 0);
                     }
@@ -1617,10 +1806,252 @@ class SelectBase extends VisualizerBase {
 }
 SelectBase.topNValuesDefaults = [-1, 5, 10, 20];
 SelectBase._stateProperties = ["chartType", "answersOrder", "hideEmptyAnswers", "topN"];
+VisualizationManager.registerVisualizer("checkbox", SelectBase);
+VisualizationManager.registerVisualizer("radiogroup", SelectBase);
+VisualizationManager.registerVisualizer("dropdown", SelectBase);
+VisualizationManager.registerVisualizer("imagepicker", SelectBase);
+VisualizationManager.registerVisualizer("tagbox", SelectBase);
+
+class BooleanModel extends SelectBase {
+    constructor(question, data, options, name) {
+        super(question, data, options, name || "boolean");
+    }
+    getCorrectAnswerText() {
+        const correctAnswerValue = this.booleanQuestion.correctAnswer;
+        if (this.booleanQuestion.valueTrue !== undefined && this.booleanQuestion.valueTrue === correctAnswerValue || !!correctAnswerValue) {
+            return this.booleanQuestion.locLabelTrue.textOrHtml;
+        }
+        if (this.booleanQuestion.valueFalse !== undefined && this.booleanQuestion.valueFalse === correctAnswerValue || !correctAnswerValue) {
+            return this.booleanQuestion.locLabelFalse.textOrHtml;
+        }
+        return correctAnswerValue;
+    }
+    get booleanQuestion() {
+        return this.question;
+    }
+    getSelectedItemByText(itemText) {
+        const labels = this.getLabels();
+        const values = this.getValues();
+        return new ItemValue(values[labels.indexOf(itemText)], itemText);
+    }
+    getValues() {
+        const values = [
+            this.booleanQuestion.valueTrue !== undefined
+                ? this.booleanQuestion.valueTrue
+                : true,
+            this.booleanQuestion.valueFalse !== undefined
+                ? this.booleanQuestion.valueFalse
+                : false,
+        ];
+        if (this.showMissingAnswers) {
+            values.push(undefined);
+        }
+        return values;
+    }
+    getLabels() {
+        var labels = [].concat(this.getValues());
+        if (this.booleanQuestion.labelTrue !== undefined) {
+            labels[0] = this.booleanQuestion.locLabelTrue.textOrHtml;
+        }
+        if (this.booleanQuestion.labelFalse !== undefined) {
+            labels[1] = this.booleanQuestion.locLabelFalse.textOrHtml;
+        }
+        if (this.showMissingAnswers) {
+            labels[2] = localization.getString("missingAnswersLabel");
+        }
+        return labels;
+    }
+}
+BooleanModel.trueColor = "";
+BooleanModel.falseColor = "";
+VisualizationManager.registerVisualizer("boolean", BooleanModel);
+
+class HistogramModel extends SelectBase {
+    constructor(question, data, options, name) {
+        super(question, data, options, name || "histogram");
+        this.valueType = "number";
+        this._cachedValues = undefined;
+        this._continiousData = undefined;
+        this._cachedIntervals = undefined;
+        this._intervalPrecision = 2;
+        this._transposeData = false;
+        if (this.options.intervalPrecision !== undefined) {
+            this._intervalPrecision = this.options.intervalPrecision;
+        }
+        const questionType = question.getType();
+        if (questionType === "text" && (question["inputType"] === "date" || question["inputType"] === "datetime")) {
+            this.valueType = "date";
+        }
+        else {
+            this.valueType = "number";
+        }
+    }
+    reset() {
+        this._continiousData = undefined;
+        this._cachedValues = undefined;
+        this._cachedIntervals = undefined;
+    }
+    getContiniousValue(value) {
+        if (this.valueType === "date") {
+            return Date.parse(value);
+        }
+        return parseFloat(value);
+    }
+    getString(value) {
+        if (this.valueType === "date") {
+            return new Date(value).toLocaleDateString();
+        }
+        return "" + value;
+    }
+    toPrecision(value) {
+        const base = Math.pow(10, this._intervalPrecision);
+        return Math.round(base * value) / base;
+    }
+    getSelectedItemByText(itemText) {
+        if (this.hasCustomIntervals || this.getContiniousValues().length > HistogramModel.UseIntervalsFrom) {
+            const interval = this.intervals.filter(interval => interval.label === itemText)[0];
+            return new ItemValue(interval, interval !== undefined ? interval.label : "");
+        }
+        const labels = this.getLabels();
+        const labelIndex = labels.indexOf(itemText);
+        return new ItemValue(this.getValues()[labelIndex], labels[labelIndex]);
+    }
+    /**
+     * Updates visualizer data.
+     */
+    updateData(data) {
+        this.reset();
+        super.updateData(data);
+    }
+    onDataChanged() {
+        this.reset();
+        super.onDataChanged();
+    }
+    getContiniousValues() {
+        if (this._cachedValues === undefined) {
+            const series = this.getSeriesValues();
+            if (series.length === 0) {
+                series.push("");
+            }
+            this._continiousData = {};
+            series.forEach(seriesValue => this._continiousData[seriesValue] = []);
+            const hash = {};
+            this.data.forEach(dataItem => {
+                const answerData = dataItem[this.name];
+                if (answerData !== undefined) {
+                    const seriesValue = dataItem[DataProvider.seriesMarkerKey] || "";
+                    // TODO: _continiousData should be sorted in order to speed-up statistics calculation in the getData function
+                    this._continiousData[seriesValue].push(this.getContiniousValue(answerData));
+                    hash[answerData] = answerData;
+                }
+            });
+            this._cachedValues = Object.keys(hash).map(key => ({ original: hash[key], continious: this.getContiniousValue(key) }));
+            this._cachedValues.sort((a, b) => a.continious - b.continious);
+        }
+        return this._cachedValues;
+    }
+    isSupportMissingAnswers() {
+        return false;
+    }
+    get needUseRateValues() {
+        return this.question.getType() == "rating" && Array.isArray(this.question["rateValues"]) && this.question["rateValues"].length > 0;
+    }
+    getValues() {
+        return this.intervals.map(interval => interval.start);
+    }
+    getLabels() {
+        return this.intervals.map(interval => interval.label);
+    }
+    get hasCustomIntervals() {
+        return !!this.questionOptions && Array.isArray(this.questionOptions.intervals);
+    }
+    get intervals() {
+        if (this.hasCustomIntervals) {
+            return this.questionOptions.intervals;
+        }
+        if (this.question.getType() == "rating") {
+            if (this.needUseRateValues) {
+                const rateValues = this.question["rateValues"];
+                rateValues.sort((iv1, iv2) => iv1.value - iv2.value);
+                return rateValues.map((rateValue, i) => ({
+                    start: rateValue.value,
+                    end: i < rateValues.length - 1 ? rateValues[i + 1].value : rateValue.value + 1,
+                    label: rateValue.text
+                }));
+            }
+            else {
+                const rateIntervals = [];
+                for (let i = (this.question["rateMin"] || 0); i <= (this.question["rateMax"] || (HistogramModel.IntervalsCount - 1)); i += (this.question["rateStep"] || 1)) {
+                    rateIntervals.push({
+                        start: i,
+                        end: i + 1,
+                        label: "" + (!!this.question["rateMin"] && !!this.question["rateMax"] ? i : (i + "-" + (i + 1)))
+                    });
+                }
+                return rateIntervals;
+            }
+        }
+        if (this._cachedIntervals === undefined) {
+            const continiousValues = this.getContiniousValues();
+            this._cachedIntervals = [];
+            if (continiousValues.length) {
+                let start = continiousValues[0].continious;
+                const end = continiousValues[continiousValues.length - 1].continious;
+                const intervalsCount = HistogramModel.IntervalsCount;
+                const delta = (end - start) / intervalsCount;
+                for (let i = 0; i < intervalsCount; ++i) {
+                    const next = start + delta;
+                    const istart = this.toPrecision(start);
+                    const inext = this.toPrecision(next);
+                    this._cachedIntervals.push({
+                        start: istart,
+                        end: i < intervalsCount - 1 ? inext : inext + delta / 100,
+                        label: "" + this.getString(istart) + "-" + this.getString(inext)
+                    });
+                    start = next;
+                }
+            }
+        }
+        return this._cachedIntervals;
+    }
+    convertFromExternalData(externalCalculatedData) {
+        return [externalCalculatedData];
+    }
+    getCalculatedValuesCore() {
+        this.getContiniousValues();
+        const intervals = this.intervals;
+        const statistics = [];
+        const series = this.getSeriesValues();
+        if (series.length === 0) {
+            series.push("");
+        }
+        for (var i = 0; i < series.length; ++i) {
+            statistics.push(intervals.map(i => 0));
+            this._continiousData[series[i]].forEach(dataValue => {
+                for (let j = 0; j < intervals.length; ++j) {
+                    if (intervals[j].start <= dataValue && (dataValue < intervals[j].end || j == intervals.length - 1)) {
+                        statistics[i][j]++;
+                        break;
+                    }
+                }
+            });
+        }
+        return statistics;
+    }
+    getValueType() {
+        return this.valueType;
+    }
+}
+HistogramModel.IntervalsCount = 10;
+HistogramModel.UseIntervalsFrom = 10;
+VisualizationManager.registerVisualizer("date", HistogramModel);
+VisualizationManager.registerVisualizer("number", HistogramModel, 100);
+VisualizationManager.registerVisualizer("rating", HistogramModel, 100);
 
 class Matrix extends SelectBase {
     constructor(question, data, options, name) {
         super(question, data, options, name || "matrix");
+        this._transposeData = true;
         // this.getAnswersData();
     }
     get matrixQuestion() {
@@ -1662,124 +2093,141 @@ class Matrix extends SelectBase {
     }
     hideEmptyAnswersInData(answersData) {
         const result = {
-            datasets: [],
-            labels: [],
-            colors: [],
-            texts: [],
-            seriesLabels: [],
-        };
-        const hasAnswersInAllSeriesArr = this.getHasAnswersInAllSeriesArray(answersData.datasets);
-        for (let i = 0; i < answersData.datasets.length; i++) {
-            const hasAnswersInSeries = this.getHasAnswersInSeries(answersData.datasets[i]);
-            if (hasAnswersInSeries) {
-                result.labels.push(answersData.labels[i]);
-                result.colors.push(answersData.colors[i]);
-            }
-            else {
-                continue;
-            }
-            const datasets = [];
-            const texts = [];
-            for (let j = 0; j < answersData.datasets[0].length; j++) {
-                if (hasAnswersInAllSeriesArr[j]) {
-                    datasets.push(answersData.datasets[i][j]);
-                    texts.push(answersData.texts[i][j]);
-                }
-            }
-            result.datasets.push(datasets);
-            result.texts.push(texts);
-        }
-        for (let i = 0; i < answersData.datasets[0].length; i++) {
-            if (hasAnswersInAllSeriesArr[i]) {
-                result.seriesLabels.push(answersData.seriesLabels[i]);
-            }
-        }
-        return result;
-    }
-    getCalculatedValuesCore() {
-        const statistics = super.getCalculatedValuesCore();
-        const series = this.getSeriesValues();
-        const values = this.getValues();
-        const preparedData = [];
-        values.forEach((val, valueIndex) => {
-            const seriesData = series.map((seriesName, seriesIndex) => statistics[seriesIndex][valueIndex]);
-            preparedData.push(seriesData);
-        });
-        return preparedData;
-    }
-}
-
-class BooleanModel extends SelectBase {
-    constructor(question, data, options, name) {
-        super(question, data, options, name || "boolean");
-    }
-    getCorrectAnswerText() {
-        const correctAnswerValue = this.booleanQuestion.correctAnswer;
-        if (this.booleanQuestion.valueTrue !== undefined && this.booleanQuestion.valueTrue === correctAnswerValue || !!correctAnswerValue) {
-            return this.booleanQuestion.locLabelTrue.textOrHtml;
-        }
-        if (this.booleanQuestion.valueFalse !== undefined && this.booleanQuestion.valueFalse === correctAnswerValue || !correctAnswerValue) {
-            return this.booleanQuestion.locLabelFalse.textOrHtml;
-        }
-        return correctAnswerValue;
-    }
-    get booleanQuestion() {
-        return this.question;
-    }
-    getSelectedItemByText(itemText) {
-        const labels = this.getLabels();
-        const values = this.getValues();
-        return new ItemValue(values[labels.indexOf(itemText)], itemText);
-    }
-    getValues() {
-        const values = [
-            this.booleanQuestion.valueTrue !== undefined
-                ? this.booleanQuestion.valueTrue
-                : true,
-            this.booleanQuestion.valueFalse !== undefined
-                ? this.booleanQuestion.valueFalse
-                : false,
-        ];
-        if (this.showMissingAnswers) {
-            values.push(undefined);
-        }
-        return values;
-    }
-    getLabels() {
-        var labels = [].concat(this.getValues());
-        if (this.booleanQuestion.labelTrue !== undefined) {
-            labels[0] = this.booleanQuestion.locLabelTrue.textOrHtml;
-        }
-        if (this.booleanQuestion.labelFalse !== undefined) {
-            labels[1] = this.booleanQuestion.locLabelFalse.textOrHtml;
+            datasets: [],
+            labels: [],
+            colors: [],
+            texts: [],
+            seriesLabels: [],
+        };
+        const hasAnswersInAllSeriesArr = this.getHasAnswersInAllSeriesArray(answersData.datasets);
+        for (let i = 0; i < answersData.datasets.length; i++) {
+            const hasAnswersInSeries = this.getHasAnswersInSeries(answersData.datasets[i]);
+            if (hasAnswersInSeries) {
+                result.labels.push(answersData.labels[i]);
+                result.colors.push(answersData.colors[i]);
+            }
+            else {
+                continue;
+            }
+            const datasets = [];
+            const texts = [];
+            for (let j = 0; j < answersData.datasets[0].length; j++) {
+                if (hasAnswersInAllSeriesArr[j]) {
+                    datasets.push(answersData.datasets[i][j]);
+                    texts.push(answersData.texts[i][j]);
+                }
+            }
+            result.datasets.push(datasets);
+            result.texts.push(texts);
         }
-        if (this.showMissingAnswers) {
-            labels[2] = localization.getString("missingAnswersLabel");
+        for (let i = 0; i < answersData.datasets[0].length; i++) {
+            if (hasAnswersInAllSeriesArr[i]) {
+                result.seriesLabels.push(answersData.seriesLabels[i]);
+            }
         }
-        return labels;
+        return result;
     }
 }
-BooleanModel.trueColor = "";
-BooleanModel.falseColor = "";
+VisualizationManager.registerVisualizer("matrix", Matrix);
 
-class HistogramModel extends SelectBase {
-    constructor(question, data, options, name) {
-        super(question, data, options, name || "histogram");
-        this.valueType = "number";
+class PivotModel extends SelectBase {
+    constructor(questions, data, options, name) {
+        super(null, data, options, name || "pivot");
+        this.questions = questions;
+        this.valueType = "enum";
         this._cachedValues = undefined;
         this._continiousData = undefined;
         this._cachedIntervals = undefined;
         this._intervalPrecision = 2;
+        this.axisYSelectors = [];
+        this.axisYQuestionNames = [];
+        this.questionsY = [];
+        this.questions = this.questions.filter((question) => ["matrixdropdown", "matrixdynamic", "matrix", "file", "signature", "multipletext", "comment", "html", "image"].indexOf(question.getType()) === -1);
         if (this.options.intervalPrecision !== undefined) {
             this._intervalPrecision = this.options.intervalPrecision;
         }
+        this.axisXQuestionName = this.questions.length > 0 ? this.questions[0].name : undefined;
+        this.registerToolbarItem("axisXSelector", () => this.axisXSelector = DocumentHelper.createSelector(this.questions.map((question) => {
+            return {
+                value: question.name,
+                text: question.title || question.name,
+            };
+        }), (option) => this.axisXQuestionName === option.value, (e) => { this.axisXQuestionName = e.target.value; this.setupPivot(); }, localization.getString("axisXSelectorTitle")));
+        this.registerToolbarItem("axisYSelector0", this.createYSelecterGenerator());
+        this.setupPivot();
+    }
+    createYSelecterGenerator() {
+        const selectorIndex = this.axisYSelectors.length;
+        return () => {
+            let selector = this.axisYSelectors[selectorIndex];
+            if (!selector) {
+                selector = this.createAxisYSelector(selectorIndex);
+                this.axisYSelectors.push(selector);
+            }
+            return selector;
+        };
+    }
+    setAxisQuestions(...axisQuestionNames) {
+        if (axisQuestionNames.length < 1) {
+            return;
+        }
+        this.axisXQuestionName = axisQuestionNames[0];
+        this.axisYQuestionNames = axisQuestionNames.splice(1);
+        this.setupPivot();
+    }
+    onAxisYSelectorChanged(index, value) {
+        this.axisYQuestionNames[index] = value;
+        if (index < this.axisYSelectors.length - 1) {
+            if (!value) {
+                for (let i = index + 1; i < this.axisYSelectors.length; ++i) {
+                    this.unregisterToolbarItem("axisYSelector" + i);
+                }
+                this.axisYSelectors = this.axisYSelectors.slice(0, index + 1);
+                this.axisYQuestionNames = this.axisYQuestionNames.slice(0, index + 1);
+                this.updateToolbar();
+            }
+        }
+        else {
+            if (!!value) {
+                this.registerToolbarItem("axisYSelector" + this.axisYSelectors.length, this.createYSelecterGenerator());
+                this.updateToolbar();
+            }
+        }
+        this.setupPivot();
+    }
+    createAxisYSelector(selectorIndex) {
+        const selector = DocumentHelper.createSelector([{ value: "", text: "Not selected" }].concat(this.questions.map((question) => {
+            return {
+                value: question.name,
+                text: question.title || question.name,
+            };
+        })), (option) => this.axisYQuestionNames[selectorIndex] === option.value, (e) => { this.onAxisYSelectorChanged(selectorIndex, e.target.value); }, selectorIndex ? undefined : localization.getString("axisYSelectorTitle"));
+        return selector;
+    }
+    getQuestionValueType(question) {
         const questionType = question.getType();
         if (questionType === "text" && (question["inputType"] === "date" || question["inputType"] === "datetime")) {
-            this.valueType = "date";
+            return "date";
         }
-        else {
-            this.valueType = "number";
+        else if (questionType === "text" || questionType === "rating" || questionType === "expression" || questionType === "range") {
+            return "number";
+        }
+        return "enum";
+    }
+    setupPivot() {
+        const questionX = this.questions.filter((q) => q.name === this.axisXQuestionName)[0];
+        if (!questionX) {
+            return;
         }
+        this.question = questionX;
+        this.valueType = this.getQuestionValueType(questionX);
+        this.questionsY = this.axisYQuestionNames.map((name) => {
+            const questionY = this.questions.filter((q) => q.name === name)[0];
+            if (!!questionY) {
+                return this.getQuestionValueType(questionY) === "enum" ? new SelectBase(questionY, []) : new VisualizerBase(questionY, []);
+            }
+        }).filter((q) => !!q);
+        this.onDataChanged();
     }
     reset() {
         this._continiousData = undefined;
@@ -1803,7 +2251,7 @@ class HistogramModel extends SelectBase {
         return Math.round(base * value) / base;
     }
     getSelectedItemByText(itemText) {
-        if (this.hasCustomIntervals || this.getContiniousValues().length > HistogramModel.UseIntervalsFrom) {
+        if (this.hasCustomIntervals || this.getContiniousValues().length > PivotModel.UseIntervalsFrom) {
             const interval = this.intervals.filter(interval => interval.label === itemText)[0];
             return new ItemValue(interval, interval !== undefined ? interval.label : "");
         }
@@ -1824,37 +2272,74 @@ class HistogramModel extends SelectBase {
     }
     getContiniousValues() {
         if (this._cachedValues === undefined) {
-            const series = this.getSeriesValues();
-            if (series.length === 0) {
-                series.push("");
+            this._continiousData = [];
+            if (this.valueType === "enum") {
+                this._cachedValues = [];
+                return this._cachedValues;
             }
-            this._continiousData = {};
-            series.forEach(seriesValue => this._continiousData[seriesValue] = []);
             const hash = {};
             this.data.forEach(dataItem => {
                 const answerData = dataItem[this.name];
                 if (answerData !== undefined) {
-                    const seriesValue = dataItem[DataProvider.seriesMarkerKey] || "";
                     // TODO: _continiousData should be sorted in order to speed-up statistics calculation in the getData function
-                    this._continiousData[seriesValue].push(this.getContiniousValue(answerData));
-                    hash[answerData] = answerData;
+                    this._continiousData.push({ continious: this.getContiniousValue(answerData), row: dataItem });
+                    hash[answerData] = { value: answerData, row: dataItem };
                 }
             });
-            this._cachedValues = Object.keys(hash).map(key => ({ original: hash[key], continious: this.getContiniousValue(key) }));
+            this._cachedValues = Object.keys(hash).map(key => ({ original: hash[key].value, continious: this.getContiniousValue(key), row: hash[key].row }));
             this._cachedValues.sort((a, b) => a.continious - b.continious);
         }
         return this._cachedValues;
     }
+    isSupportAnswersOrder() {
+        return false;
+    }
     isSupportMissingAnswers() {
         return false;
     }
     get needUseRateValues() {
         return this.question.getType() == "rating" && Array.isArray(this.question["rateValues"]) && this.question["rateValues"].length > 0;
     }
+    getSeriesValues() {
+        if (!this.questionsY || this.questionsY.length === 0) {
+            return this.options.seriesValues || [];
+        }
+        const seriesValues = [];
+        this.questionsY.forEach(q => {
+            if (this.getQuestionValueType(q.question) === "enum") {
+                seriesValues.push.apply(seriesValues, q.getValues().reverse());
+            }
+            else {
+                seriesValues.push(q.question.name);
+            }
+        });
+        return seriesValues;
+    }
+    getSeriesLabels() {
+        if (this.questionsY.length === 0) {
+            return this.getSeriesValues();
+        }
+        const seriesLabels = [];
+        this.questionsY.forEach(q => {
+            if (this.getQuestionValueType(q.question) === "enum") {
+                seriesLabels.push.apply(seriesLabels, q.getLabels().reverse());
+            }
+            else {
+                seriesLabels.push(q.question.title || q.question.name);
+            }
+        });
+        return seriesLabels;
+    }
     getValues() {
+        if (this.valueType === "enum") {
+            return super.getValues().reverse();
+        }
         return this.intervals.map(interval => interval.start);
     }
     getLabels() {
+        if (this.valueType === "enum") {
+            return super.getLabels().reverse();
+        }
         return this.intervals.map(interval => interval.label);
     }
     get hasCustomIntervals() {
@@ -1876,7 +2361,7 @@ class HistogramModel extends SelectBase {
             }
             else {
                 const rateIntervals = [];
-                for (let i = (this.question["rateMin"] || 0); i <= (this.question["rateMax"] || (HistogramModel.IntervalsCount - 1)); i += (this.question["rateStep"] || 1)) {
+                for (let i = (this.question["rateMin"] || 0); i <= (this.question["rateMax"] || (PivotModel.IntervalsCount - 1)); i += (this.question["rateStep"] || 1)) {
                     rateIntervals.push({
                         start: i,
                         end: i + 1,
@@ -1892,7 +2377,7 @@ class HistogramModel extends SelectBase {
             if (continiousValues.length) {
                 let start = continiousValues[0].continious;
                 const end = continiousValues[continiousValues.length - 1].continious;
-                const intervalsCount = HistogramModel.IntervalsCount;
+                const intervalsCount = PivotModel.IntervalsCount;
                 const delta = (end - start) / intervalsCount;
                 for (let i = 0; i < intervalsCount; ++i) {
                     const next = start + delta;
@@ -1912,147 +2397,131 @@ class HistogramModel extends SelectBase {
     convertFromExternalData(externalCalculatedData) {
         return [externalCalculatedData];
     }
+    getSeriesValueIndexes() {
+        const seriesValueIndexes = {};
+        let valueIndex = 0;
+        for (var i = 0; i < this.questionsY.length; ++i) {
+            const questionValueType = this.getQuestionValueType(this.questionsY[i].question);
+            if (questionValueType === "enum") {
+                this.questionsY[i].getValues().reverse().forEach((value) => {
+                    seriesValueIndexes[this.questionsY[i].name + "_" + value] = valueIndex++;
+                });
+            }
+            else {
+                seriesValueIndexes[this.questionsY[i].name] = valueIndex++;
+            }
+        }
+        return seriesValueIndexes;
+    }
+    updateStatisticsSeriesValue(statistics, dataRow, valueIndex, seriesValueIndexes) {
+        for (let j = 0; j < this.questionsY.length; ++j) {
+            if (dataRow[this.questionsY[j].name] !== undefined) {
+                const questionValueType = this.getQuestionValueType(this.questionsY[j].question);
+                if (questionValueType === "enum" || questionValueType === "date") {
+                    const seriesValueIndex = seriesValueIndexes[this.questionsY[j].name + "_" + dataRow[this.questionsY[j].name]];
+                    statistics[seriesValueIndex][valueIndex]++;
+                }
+                else {
+                    const seriesValueIndex = seriesValueIndexes[this.questionsY[j].name];
+                    statistics[seriesValueIndex][valueIndex] += parseFloat(dataRow[this.questionsY[j].name]);
+                }
+            }
+        }
+    }
     getCalculatedValuesCore() {
-        this.getContiniousValues();
-        const intervals = this.intervals;
         const statistics = [];
         const series = this.getSeriesValues();
         if (series.length === 0) {
             series.push("");
         }
-        for (var i = 0; i < series.length; ++i) {
-            statistics.push(intervals.map(i => 0));
-            this._continiousData[series[i]].forEach(dataValue => {
-                for (let j = 0; j < intervals.length; ++j) {
-                    if (intervals[j].start <= dataValue && (dataValue < intervals[j].end || j == intervals.length - 1)) {
-                        statistics[i][j]++;
-                        break;
+        const seriesValueIndexes = this.getSeriesValueIndexes();
+        if (this.valueType === "enum") {
+            const values = this.getValues();
+            const valueIndexes = {};
+            values.forEach((value, index) => {
+                valueIndexes[value] = index;
+            });
+            for (var i = 0; i < series.length; ++i) {
+                statistics.push(values.map(i => 0));
+            }
+            this.data.forEach(dataRow => {
+                const answerData = dataRow[this.name];
+                if (answerData !== undefined && valueIndexes[answerData] !== undefined) {
+                    const valueIndex = valueIndexes[answerData];
+                    if (this.questionsY.length === 0) {
+                        statistics[0][valueIndex]++;
+                    }
+                    else {
+                        this.updateStatisticsSeriesValue(statistics, dataRow, valueIndex, seriesValueIndexes);
                     }
                 }
             });
         }
-        return statistics;
-    }
-}
-HistogramModel.IntervalsCount = 10;
-HistogramModel.UseIntervalsFrom = 10;
-
-class NumberModel extends VisualizerBase {
-    constructor(question, data, options = {}, name) {
-        super(question, data, options, name || "number");
-        this.registerToolbarItem("changeChartType", () => {
-            if (this.chartTypes.length > 1) {
-                return DocumentHelper.createSelector(this.chartTypes.map((chartType) => {
-                    return {
-                        value: chartType,
-                        text: localization.getString("chartType_" + chartType),
-                    };
-                }), (option) => this.chartType === option.value, (e) => {
-                    this.setChartType(e.target.value);
-                });
-            }
-            return null;
-        });
-    }
-    onDataChanged() {
-        this._resultAverage = undefined;
-        this._resultMin = undefined;
-        this._resultMax = undefined;
-        super.onDataChanged();
-    }
-    onChartTypeChanged() { }
-    setChartType(chartType) {
-        if (this.chartTypes.indexOf(chartType) !== -1 &&
-            this.chartType !== chartType) {
-            this.chartType = chartType;
-            this.onChartTypeChanged();
-            if (!!this.contentContainer) {
-                this.destroyContent(this.contentContainer);
-                this.renderContent(this.contentContainer);
-            }
-            this.invokeOnUpdate();
-        }
-    }
-    destroy() {
-        this._resultAverage = undefined;
-        this._resultMin = undefined;
-        this._resultMax = undefined;
-        super.destroy();
-    }
-    generateText(maxValue, minValue, stepsCount) {
-        let texts = [];
-        if (stepsCount === 5) {
-            texts = [
-                "very high (" + maxValue + ")",
-                "high",
-                "medium",
-                "low",
-                "very low (" + minValue + ")",
-            ];
-        }
         else {
-            texts.push(maxValue);
-            for (let i = 0; i < stepsCount - 2; i++) {
-                texts.push("");
+            this.getContiniousValues();
+            const intervals = this.intervals;
+            for (var i = 0; i < series.length; ++i) {
+                statistics.push(intervals.map(i => 0));
             }
-            texts.push(minValue);
-        }
-        if (!!NumberModel.generateTextsCallback) {
-            return NumberModel.generateTextsCallback(this.question, maxValue, minValue, stepsCount, texts);
+            this._continiousData.forEach(dataValue => {
+                for (let valueIndex = 0; valueIndex < intervals.length; ++valueIndex) {
+                    if (intervals[valueIndex].start <= dataValue.continious && (dataValue.continious < intervals[valueIndex].end || valueIndex == intervals.length - 1)) {
+                        if (this.questionsY.length === 0) {
+                            statistics[0][valueIndex]++;
+                        }
+                        else {
+                            this.updateStatisticsSeriesValue(statistics, dataValue.row, valueIndex, seriesValueIndexes);
+                        }
+                        break;
+                    }
+                }
+            });
         }
-        return texts;
+        return statistics;
     }
-    generateValues(maxValue, stepsCount) {
-        const values = [];
-        for (let i = 0; i < stepsCount; i++) {
-            values.push(maxValue / stepsCount);
-        }
-        values.push(maxValue);
-        return values;
+    getValueType() {
+        return this.valueType;
     }
-    generateColors(maxValue, minValue, stepsCount) {
-        const palette = this.getColors();
-        const colors = [];
-        for (let i = 0; i < stepsCount; i++) {
-            colors.push(palette[i]);
-        }
-        colors.push("rgba(255, 255, 255, 0)");
-        return colors;
+    isSupportSoftUpdateContent() {
+        return false;
     }
-    convertFromExternalData(externalCalculatedData) {
-        return [externalCalculatedData.value || 0, externalCalculatedData.minValue || 0, externalCalculatedData.maxValue || 0];
+}
+PivotModel.IntervalsCount = 10;
+PivotModel.UseIntervalsFrom = 10;
+VisualizationManager.registerPivotVisualizer(PivotModel);
+
+class RankingModel extends SelectBase {
+    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() {
-        if (this._resultAverage === undefined ||
-            this._resultMin === undefined ||
-            this._resultMax === undefined) {
-            this._resultMin = Number.MAX_VALUE;
-            this._resultMax = -Number.MAX_VALUE;
-            this._resultAverage = 0;
-            let actualAnswerCount = 0;
-            this.data.forEach((rowData) => {
-                if (rowData[this.question.name] !== undefined) {
-                    const questionValue = +rowData[this.question.name];
-                    actualAnswerCount++;
-                    this._resultAverage += questionValue;
-                    if (this._resultMin > questionValue) {
-                        this._resultMin = questionValue;
-                    }
-                    if (this._resultMax < questionValue) {
-                        this._resultMax = questionValue;
-                    }
-                }
-            });
-            if (actualAnswerCount > 0) {
-                this._resultAverage = this._resultAverage / actualAnswerCount;
-            }
-            this._resultAverage = Math.ceil(this._resultAverage * 100) / 100;
-        }
-        return [this._resultAverage, this._resultMin, this._resultMax];
+        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);
+        });
     }
 }
-NumberModel.stepsCount = 5;
-NumberModel.showAsPercentage = false;
+VisualizationManager.registerVisualizer("ranking", RankingModel);
 
 class AlternativeVisualizersWrapper extends VisualizerBase {
     updateVisualizerSelector() {
@@ -2188,6 +2657,12 @@ class AlternativeVisualizersWrapper extends VisualizerBase {
             this.visualizer.setState(state.state);
         }
     }
+    getValues() {
+        return this.visualizer.getValues();
+    }
+    getLabels() {
+        return this.visualizer.getLabels();
+    }
     getCalculatedValues() {
         return this.visualizer.getCalculatedValues();
     }
@@ -9443,7 +9918,15 @@ class VisualizationPanel extends VisualizerBase {
     }
     buildVisualizers(questions) {
         questions.forEach((question) => {
-            const visualizer = this.createVisualizer(question);
+            let visualizerOptions = Object.assign({}, this.options);
+            let visualizerData = this.surveyData;
+            let visualizer;
+            if (Array.isArray(question)) {
+                visualizer = new (VisualizationManager.getPivotVisualizerConstructor())(question, visualizerData, visualizerOptions);
+            }
+            else {
+                visualizer = this.createVisualizer(question, visualizerOptions, visualizerData);
+            }
             if (!visualizer) {
                 return;
             }
@@ -9510,6 +9993,7 @@ class VisualizationPanel extends VisualizerBase {
     setLocale(newLocale) {
         super.setLocale(newLocale);
         (this.questions || []).forEach((question) => {
+            question = Array.isArray(question) ? question[0] : question;
             const element = this.getElement(question.name);
             if (!!element) {
                 element.displayName = this.processText(question.title);
@@ -9556,6 +10040,7 @@ class VisualizationPanel extends VisualizerBase {
     }
     buildElements(questions) {
         return (questions || []).map((question) => {
+            question = Array.isArray(question) ? question[0] : question;
             return {
                 name: question.name,
                 displayName: this.processText(question.title),
@@ -9756,7 +10241,7 @@ class VisualizationPanel extends VisualizerBase {
         this._settingState = true;
         try {
             if (Array.isArray(newState.elements)) {
-                const questionNames = this.questions.map(q => q.name);
+                const questionNames = this.questions.map(q => Array.isArray(q) ? q[0].name : q.name);
                 this._elements = [].concat(newState.elements.filter(e => (questionNames.indexOf(e.name) !== -1)));
             }
             if (typeof newState.locale !== "undefined")
@@ -9890,6 +10375,7 @@ class VisualizationMatrixDropdown extends VisualizerBase {
         this._childOptions.disableLocaleSwitch = true;
         this._childOptions.dataProvider = undefined;
         this._childOptions.allowDynamicLayout = false;
+        this._childOptions.transposeData = true;
         this._childOptions.seriesValues = question.rows.map((row) => row.value);
         this._childOptions.seriesLabels = question.rows.map((row) => row.text);
         const innerQuestions = this.getQuestions();
@@ -11941,5 +12427,5 @@ NpsVisualizer.DetractorScore = 6;
 NpsVisualizer.PromoterScore = 9;
 // VisualizationManager.registerVisualizer("rating", NpsVisualizer);
 
-export { AlternativeVisualizersWrapper as A, BooleanModel as B, DataProvider as D, HistogramModel as H, Matrix as M, NumberModel as N, PostponeHelper as P, SelectBase as S, TextTableAdapter as T, VisualizerFactory as V, WordCloudAdapter as W, __awaiter as _, VisualizerBase as a, VisualizationManager as b, VisualizationPanel as c, defaultStatisticsCalculator as d, VisualizationPanelDynamic as e, VisualizationMatrixDynamic as f, VisualizationMatrixDropdown as g, hideEmptyAnswersInData as h, WordCloud as i, Text as j, StatisticsTableAdapter as k, StatisticsTable as l, NpsVisualizerWidget as m, NpsAdapter as n, NpsVisualizer as o, textHelper as t };
+export { AlternativeVisualizersWrapper as A, BooleanModel as B, DataProvider as D, HistogramModel as H, Matrix as M, NumberModel as N, PostponeHelper as P, RankingModel as R, SelectBase as S, TextTableAdapter as T, VisualizerFactory as V, WordCloudAdapter as W, __awaiter as _, VisualizerBase as a, VisualizationManager as b, VisualizationPanel as c, defaultStatisticsCalculator as d, VisualizationPanelDynamic as e, VisualizationMatrixDynamic as f, VisualizationMatrixDropdown as g, hideEmptyAnswersInData as h, WordCloud as i, Text as j, StatisticsTableAdapter as k, StatisticsTable as l, NpsVisualizerWidget as m, NpsAdapter as n, NpsVisualizer as o, PivotModel as p, textHelper as t };
 //# sourceMappingURL=shared2.mjs.map