survey-analytics 2.2.2 → 2.2.3

package/survey.analytics.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.2.2
+ * surveyjs - SurveyJS Dashboard library v2.2.3
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -7007,6 +7007,12 @@ var AlternativeVisualizersWrapper = /** @class */ (function (_super) {
             this.visualizer.setState(state.state);
         }
     };
+    AlternativeVisualizersWrapper.prototype.getValues = function () {
+        return this.visualizer.getValues();
+    };
+    AlternativeVisualizersWrapper.prototype.getLabels = function () {
+        return this.visualizer.getLabels();
+    };
     AlternativeVisualizersWrapper.prototype.getCalculatedValues = function () {
         return this.visualizer.getCalculatedValues();
     };
@@ -7314,6 +7320,8 @@ var englishStrings = {
     npsPromoters: "Promoters",
     npsPassives: "Passives",
     npsDetractors: "Detractors",
+    axisXSelectorTitle: "X axis:",
+    axisYSelectorTitle: "Y axis:"
 };
 // Uncomment the lines below if you create a custom dictionary.
 // Replace "en" with a custom locale code (for example, "fr" or "de"),
@@ -8661,13 +8669,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   AlternativeVisualizersWrapper: () => (/* reexport safe */ _alternativeVizualizersWrapper__WEBPACK_IMPORTED_MODULE_27__.AlternativeVisualizersWrapper),
 /* harmony export */   BooleanModel: () => (/* reexport safe */ _boolean__WEBPACK_IMPORTED_MODULE_19__.BooleanModel),
 /* harmony export */   DataProvider: () => (/* reexport safe */ _dataProvider__WEBPACK_IMPORTED_MODULE_14__.DataProvider),
-/* harmony export */   DocumentHelper: () => (/* reexport safe */ _utils_index__WEBPACK_IMPORTED_MODULE_33__.DocumentHelper),
+/* harmony export */   DocumentHelper: () => (/* reexport safe */ _utils_index__WEBPACK_IMPORTED_MODULE_34__.DocumentHelper),
 /* harmony export */   HistogramModel: () => (/* reexport safe */ _histogram__WEBPACK_IMPORTED_MODULE_20__.HistogramModel),
 /* harmony export */   Matrix: () => (/* reexport safe */ _matrix__WEBPACK_IMPORTED_MODULE_18__.Matrix),
 /* harmony export */   NpsAdapter: () => (/* reexport safe */ _nps__WEBPACK_IMPORTED_MODULE_32__.NpsAdapter),
 /* harmony export */   NpsVisualizer: () => (/* reexport safe */ _nps__WEBPACK_IMPORTED_MODULE_32__.NpsVisualizer),
 /* harmony export */   NpsVisualizerWidget: () => (/* reexport safe */ _nps__WEBPACK_IMPORTED_MODULE_32__.NpsVisualizerWidget),
 /* harmony export */   NumberModel: () => (/* reexport safe */ _number__WEBPACK_IMPORTED_MODULE_16__.NumberModel),
+/* harmony export */   PivotModel: () => (/* reexport safe */ _pivot__WEBPACK_IMPORTED_MODULE_33__.PivotModel),
 /* harmony export */   PostponeHelper: () => (/* reexport safe */ _visualizerBase__WEBPACK_IMPORTED_MODULE_21__.PostponeHelper),
 /* harmony export */   SelectBase: () => (/* reexport safe */ _selectBase__WEBPACK_IMPORTED_MODULE_17__.SelectBase),
 /* harmony export */   StatisticsTable: () => (/* reexport safe */ _statistics_table__WEBPACK_IMPORTED_MODULE_31__.StatisticsTable),
@@ -8722,7 +8731,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _text__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../text */ "./src/text.ts");
 /* harmony import */ var _statistics_table__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../statistics-table */ "./src/statistics-table.ts");
 /* harmony import */ var _nps__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../nps */ "./src/nps.ts");
-/* harmony import */ var _utils_index__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../utils/index */ "./src/utils/index.ts");
+/* harmony import */ var _pivot__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../pivot */ "./src/pivot.ts");
+/* harmony import */ var _utils_index__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../utils/index */ "./src/utils/index.ts");
 
 //localization
 
@@ -8758,6 +8768,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 /***/ }),
@@ -8842,6 +8853,7 @@ var HistogramModel = /** @class */ (function (_super) {
         _this._continiousData = undefined;
         _this._cachedIntervals = undefined;
         _this._intervalPrecision = 2;
+        _this._transposeData = false;
         if (_this.options.intervalPrecision !== undefined) {
             _this._intervalPrecision = _this.options.intervalPrecision;
         }
@@ -9389,7 +9401,9 @@ __webpack_require__.r(__webpack_exports__);
 var Matrix = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(Matrix, _super);
     function Matrix(question, data, options, name) {
-        return _super.call(this, question, data, options, name || "matrix") || this;
+        var _this = _super.call(this, question, data, options, name || "matrix") || this;
+        _this._transposeData = true;
+        return _this;
         // this.getAnswersData();
     }
     Object.defineProperty(Matrix.prototype, "matrixQuestion", {
@@ -9472,17 +9486,6 @@ var Matrix = /** @class */ (function (_super) {
         }
         return result;
     };
-    Matrix.prototype.getCalculatedValuesCore = function () {
-        var statistics = _super.prototype.getCalculatedValuesCore.call(this);
-        var series = this.getSeriesValues();
-        var values = this.getValues();
-        var preparedData = [];
-        values.forEach(function (val, valueIndex) {
-            var seriesData = series.map(function (seriesName, seriesIndex) { return statistics[seriesIndex][valueIndex]; });
-            preparedData.push(seriesData);
-        });
-        return preparedData;
-    };
     return Matrix;
 }(_selectBase__WEBPACK_IMPORTED_MODULE_2__.SelectBase));
 
@@ -9923,6 +9926,416 @@ var NumberModel = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/pivot.ts":
+/*!**********************!*\
+  !*** ./src/pivot.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PivotModel: () => (/* binding */ PivotModel)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/utils/helpers.ts");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _selectBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./selectBase */ "./src/selectBase.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ "./src/utils/index.ts");
+/* harmony import */ var _visualizerBase__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./visualizerBase */ "./src/visualizerBase.ts");
+/* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./localizationManager */ "./src/localizationManager.ts");
+
+
+
+
+
+
+var PivotModel = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PivotModel, _super);
+    function PivotModel(questions, data, options, name) {
+        var _this = _super.call(this, null, data, options, name || "pivot") || this;
+        _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(function (question) { return ["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", function () {
+            return _this.axisXSelector = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createSelector(_this.questions.map(function (question) {
+                return {
+                    value: question.name,
+                    text: question.title || question.name,
+                };
+            }), function (option) { return _this.axisXQuestionName === option.value; }, function (e) { _this.axisXQuestionName = e.target.value; _this.setupPivot(); }, _localizationManager__WEBPACK_IMPORTED_MODULE_5__.localization.getString("axisXSelectorTitle"));
+        });
+        _this.registerToolbarItem("axisYSelector0", _this.createYSelecterGenerator());
+        _this.setupPivot();
+        return _this;
+    }
+    PivotModel.prototype.createYSelecterGenerator = function () {
+        var _this = this;
+        var selectorIndex = this.axisYSelectors.length;
+        return function () {
+            var selector = _this.axisYSelectors[selectorIndex];
+            if (!selector) {
+                selector = _this.createAxisYSelector(selectorIndex);
+                _this.axisYSelectors.push(selector);
+            }
+            return selector;
+        };
+    };
+    PivotModel.prototype.setAxisQuestions = function () {
+        var axisQuestionNames = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            axisQuestionNames[_i] = arguments[_i];
+        }
+        if (axisQuestionNames.length < 1) {
+            return;
+        }
+        this.axisXQuestionName = axisQuestionNames[0];
+        this.axisYQuestionNames = axisQuestionNames.splice(1);
+        this.setupPivot();
+    };
+    PivotModel.prototype.onAxisYSelectorChanged = function (index, value) {
+        this.axisYQuestionNames[index] = value;
+        if (index < this.axisYSelectors.length - 1) {
+            if (!value) {
+                for (var 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();
+    };
+    PivotModel.prototype.createAxisYSelector = function (selectorIndex) {
+        var _this = this;
+        var selector = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createSelector([{ value: "", text: "Not selected" }].concat(this.questions.map(function (question) {
+            return {
+                value: question.name,
+                text: question.title || question.name,
+            };
+        })), function (option) { return _this.axisYQuestionNames[selectorIndex] === option.value; }, function (e) { _this.onAxisYSelectorChanged(selectorIndex, e.target.value); }, selectorIndex ? undefined : _localizationManager__WEBPACK_IMPORTED_MODULE_5__.localization.getString("axisYSelectorTitle"));
+        return selector;
+    };
+    PivotModel.prototype.getQuestionValueType = function (question) {
+        var questionType = question.getType();
+        if (questionType === "text" && (question["inputType"] === "date" || question["inputType"] === "datetime")) {
+            return "date";
+        }
+        else if (questionType === "text" || questionType === "rating" || questionType === "expression" || questionType === "range") {
+            return "number";
+        }
+        return "enum";
+    };
+    PivotModel.prototype.setupPivot = function () {
+        var _this = this;
+        var questionX = this.questions.filter(function (q) { return q.name === _this.axisXQuestionName; })[0];
+        if (!questionX) {
+            return;
+        }
+        this.question = questionX;
+        this.valueType = this.getQuestionValueType(questionX);
+        this.questionsY = this.axisYQuestionNames.map(function (name) {
+            var questionY = _this.questions.filter(function (q) { return q.name === name; })[0];
+            if (!!questionY) {
+                return _this.getQuestionValueType(questionY) === "enum" ? new _selectBase__WEBPACK_IMPORTED_MODULE_2__.SelectBase(questionY, []) : new _visualizerBase__WEBPACK_IMPORTED_MODULE_4__.VisualizerBase(questionY, []);
+            }
+        }).filter(function (q) { return !!q; });
+        this.onDataChanged();
+    };
+    PivotModel.prototype.reset = function () {
+        this._continiousData = undefined;
+        this._cachedValues = undefined;
+        this._cachedIntervals = undefined;
+    };
+    PivotModel.prototype.getContiniousValue = function (value) {
+        if (this.valueType === "date") {
+            return Date.parse(value);
+        }
+        return parseFloat(value);
+    };
+    PivotModel.prototype.getString = function (value) {
+        if (this.valueType === "date") {
+            return new Date(value).toLocaleDateString();
+        }
+        return "" + value;
+    };
+    PivotModel.prototype.toPrecision = function (value) {
+        var base = Math.pow(10, this._intervalPrecision);
+        return Math.round(base * value) / base;
+    };
+    PivotModel.prototype.getSelectedItemByText = function (itemText) {
+        if (this.hasCustomIntervals || this.getContiniousValues().length > PivotModel.UseIntervalsFrom) {
+            var interval = this.intervals.filter(function (interval) { return interval.label === itemText; })[0];
+            return new survey_core__WEBPACK_IMPORTED_MODULE_1__.ItemValue(interval, interval !== undefined ? interval.label : "");
+        }
+        var labels = this.getLabels();
+        var labelIndex = labels.indexOf(itemText);
+        return new survey_core__WEBPACK_IMPORTED_MODULE_1__.ItemValue(this.getValues()[labelIndex], labels[labelIndex]);
+    };
+    /**
+     * Updates visualizer data.
+     */
+    PivotModel.prototype.updateData = function (data) {
+        this.reset();
+        _super.prototype.updateData.call(this, data);
+    };
+    PivotModel.prototype.onDataChanged = function () {
+        this.reset();
+        _super.prototype.onDataChanged.call(this);
+    };
+    PivotModel.prototype.getContiniousValues = function () {
+        var _this = this;
+        if (this._cachedValues === undefined) {
+            this._continiousData = [];
+            if (this.valueType === "enum") {
+                this._cachedValues = [];
+                return this._cachedValues;
+            }
+            var hash_1 = {};
+            this.data.forEach(function (dataItem) {
+                var answerData = dataItem[_this.name];
+                if (answerData !== undefined) {
+                    // TODO: _continiousData should be sorted in order to speed-up statistics calculation in the getData function
+                    _this._continiousData.push({ continious: _this.getContiniousValue(answerData), row: dataItem });
+                    hash_1[answerData] = { value: answerData, row: dataItem };
+                }
+            });
+            this._cachedValues = Object.keys(hash_1).map(function (key) { return ({ original: hash_1[key].value, continious: _this.getContiniousValue(key), row: hash_1[key].row }); });
+            this._cachedValues.sort(function (a, b) { return a.continious - b.continious; });
+        }
+        return this._cachedValues;
+    };
+    PivotModel.prototype.isSupportAnswersOrder = function () {
+        return false;
+    };
+    PivotModel.prototype.isSupportMissingAnswers = function () {
+        return false;
+    };
+    Object.defineProperty(PivotModel.prototype, "needUseRateValues", {
+        get: function () {
+            return this.question.getType() == "rating" && Array.isArray(this.question["rateValues"]) && this.question["rateValues"].length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PivotModel.prototype.getSeriesValues = function () {
+        var _this = this;
+        if (this.questionsY.length === 0) {
+            return this.options.seriesValues || [];
+        }
+        var seriesValues = [];
+        this.questionsY.forEach(function (q) {
+            if (_this.getQuestionValueType(q.question) === "enum") {
+                seriesValues.push.apply(seriesValues, q.getValues().reverse());
+            }
+            else {
+                seriesValues.push(q.question.name);
+            }
+        });
+        return seriesValues;
+    };
+    PivotModel.prototype.getSeriesLabels = function () {
+        var _this = this;
+        if (this.questionsY.length === 0) {
+            return this.getSeriesValues();
+        }
+        var seriesLabels = [];
+        this.questionsY.forEach(function (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;
+    };
+    PivotModel.prototype.getValues = function () {
+        if (this.valueType === "enum") {
+            return _super.prototype.getValues.call(this).reverse();
+        }
+        return this.intervals.map(function (interval) { return interval.start; });
+    };
+    PivotModel.prototype.getLabels = function () {
+        if (this.valueType === "enum") {
+            return _super.prototype.getLabels.call(this).reverse();
+        }
+        return this.intervals.map(function (interval) { return interval.label; });
+    };
+    Object.defineProperty(PivotModel.prototype, "hasCustomIntervals", {
+        get: function () {
+            return !!this.questionOptions && Array.isArray(this.questionOptions.intervals);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PivotModel.prototype, "intervals", {
+        get: function () {
+            if (this.hasCustomIntervals) {
+                return this.questionOptions.intervals;
+            }
+            if (this.question.getType() == "rating") {
+                if (this.needUseRateValues) {
+                    var rateValues_1 = this.question["rateValues"];
+                    rateValues_1.sort(function (iv1, iv2) { return iv1.value - iv2.value; });
+                    return rateValues_1.map(function (rateValue, i) { return ({
+                        start: rateValue.value,
+                        end: i < rateValues_1.length - 1 ? rateValues_1[i + 1].value : rateValue.value + 1,
+                        label: rateValue.text
+                    }); });
+                }
+                else {
+                    var rateIntervals = [];
+                    for (var i = (this.question["rateMin"] || 0); i <= (this.question["rateMax"] || (PivotModel.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) {
+                var continiousValues = this.getContiniousValues();
+                this._cachedIntervals = [];
+                if (continiousValues.length) {
+                    var start = continiousValues[0].continious;
+                    var end = continiousValues[continiousValues.length - 1].continious;
+                    var intervalsCount = PivotModel.IntervalsCount;
+                    var delta = (end - start) / intervalsCount;
+                    for (var i = 0; i < intervalsCount; ++i) {
+                        var next = start + delta;
+                        var istart = this.toPrecision(start);
+                        var 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;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PivotModel.prototype.convertFromExternalData = function (externalCalculatedData) {
+        return [externalCalculatedData];
+    };
+    PivotModel.prototype.getSeriesValueIndexes = function () {
+        var _this = this;
+        var seriesValueIndexes = {};
+        var valueIndex = 0;
+        for (var i = 0; i < this.questionsY.length; ++i) {
+            var questionValueType = this.getQuestionValueType(this.questionsY[i].question);
+            if (questionValueType === "enum") {
+                this.questionsY[i].getValues().reverse().forEach(function (value) {
+                    seriesValueIndexes[_this.questionsY[i].name + "_" + value] = valueIndex++;
+                });
+            }
+            else {
+                seriesValueIndexes[this.questionsY[i].name] = valueIndex++;
+            }
+        }
+        return seriesValueIndexes;
+    };
+    PivotModel.prototype.updateStatisticsSeriesValue = function (statistics, dataRow, valueIndex, seriesValueIndexes) {
+        for (var j = 0; j < this.questionsY.length; ++j) {
+            if (dataRow[this.questionsY[j].name] !== undefined) {
+                var questionValueType = this.getQuestionValueType(this.questionsY[j].question);
+                if (questionValueType === "enum" || questionValueType === "date") {
+                    var seriesValueIndex = seriesValueIndexes[this.questionsY[j].name + "_" + dataRow[this.questionsY[j].name]];
+                    statistics[seriesValueIndex][valueIndex]++;
+                }
+                else {
+                    var seriesValueIndex = seriesValueIndexes[this.questionsY[j].name];
+                    statistics[seriesValueIndex][valueIndex] += parseFloat(dataRow[this.questionsY[j].name]);
+                }
+            }
+        }
+    };
+    PivotModel.prototype.getCalculatedValuesCore = function () {
+        var _this = this;
+        var statistics = [];
+        var series = this.getSeriesValues();
+        if (series.length === 0) {
+            series.push("");
+        }
+        var seriesValueIndexes = this.getSeriesValueIndexes();
+        if (this.valueType === "enum") {
+            var values = this.getValues();
+            var valueIndexes_1 = {};
+            values.forEach(function (value, index) {
+                valueIndexes_1[value] = index;
+            });
+            for (var i = 0; i < series.length; ++i) {
+                statistics.push(values.map(function (i) { return 0; }));
+            }
+            this.data.forEach(function (dataRow) {
+                var answerData = dataRow[_this.name];
+                if (answerData !== undefined && valueIndexes_1[answerData] !== undefined) {
+                    var valueIndex = valueIndexes_1[answerData];
+                    if (_this.questionsY.length === 0) {
+                        statistics[0][valueIndex]++;
+                    }
+                    else {
+                        _this.updateStatisticsSeriesValue(statistics, dataRow, valueIndex, seriesValueIndexes);
+                    }
+                }
+            });
+        }
+        else {
+            var continiousValues = this.getContiniousValues();
+            var intervals_1 = this.intervals;
+            for (var i = 0; i < series.length; ++i) {
+                statistics.push(intervals_1.map(function (i) { return 0; }));
+            }
+            this._continiousData.forEach(function (dataValue) {
+                for (var valueIndex = 0; valueIndex < intervals_1.length; ++valueIndex) {
+                    if (intervals_1[valueIndex].start <= dataValue.continious && (dataValue.continious < intervals_1[valueIndex].end || valueIndex == intervals_1.length - 1)) {
+                        if (_this.questionsY.length === 0) {
+                            statistics[0][valueIndex]++;
+                        }
+                        else {
+                            _this.updateStatisticsSeriesValue(statistics, dataValue.row, valueIndex, seriesValueIndexes);
+                        }
+                        break;
+                    }
+                }
+            });
+        }
+        return statistics;
+    };
+    PivotModel.IntervalsCount = 10;
+    PivotModel.UseIntervalsFrom = 10;
+    return PivotModel;
+}(_selectBase__WEBPACK_IMPORTED_MODULE_2__.SelectBase));
+
+
+
 /***/ }),
 
 /***/ "./src/plotly/boolean.ts":
@@ -10065,20 +10478,6 @@ var HistogramPlotly = /** @class */ (function (_super) {
             });
         });
     };
-    HistogramPlotly.prototype.getCalculatedValuesCore = function () {
-        var statistics = _super.prototype.getCalculatedValuesCore.call(this);
-        var series = this.getSeriesValues();
-        var values = this.getValues();
-        if (series.length > 1) {
-            var preparedData_1 = [];
-            values.forEach(function (val, valueIndex) {
-                var seriesData = series.map(function (seriesValue, seriesIndex) { return statistics[seriesIndex][valueIndex]; });
-                preparedData_1.push(seriesData);
-            });
-            return preparedData_1;
-        }
-        return statistics;
-    };
     HistogramPlotly.prototype.getValueType = function () {
         return this.valueType;
     };
@@ -10107,6 +10506,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   HistogramPlotly: () => (/* reexport safe */ _histogram__WEBPACK_IMPORTED_MODULE_6__.HistogramPlotly),
 /* harmony export */   MatrixDropdownGroupedPlotly: () => (/* reexport safe */ _matrixdropdown_grouped__WEBPACK_IMPORTED_MODULE_5__.MatrixDropdownGroupedPlotly),
 /* harmony export */   MatrixPlotly: () => (/* reexport safe */ _matrix__WEBPACK_IMPORTED_MODULE_2__.MatrixPlotly),
+/* harmony export */   PivotPlotly: () => (/* reexport safe */ _pivot__WEBPACK_IMPORTED_MODULE_8__.PivotPlotly),
 /* harmony export */   PlotlyBoolChartAdapter: () => (/* reexport safe */ _boolean__WEBPACK_IMPORTED_MODULE_3__.PlotlyBoolChartAdapter),
 /* harmony export */   PlotlyChartAdapter: () => (/* reexport safe */ _selectBase__WEBPACK_IMPORTED_MODULE_1__.PlotlyChartAdapter),
 /* harmony export */   PlotlyGaugeAdapter: () => (/* reexport safe */ _rating__WEBPACK_IMPORTED_MODULE_7__.PlotlyGaugeAdapter),
@@ -10122,6 +10522,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _matrixdropdown_grouped__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./matrixdropdown-grouped */ "./src/plotly/matrixdropdown-grouped.ts");
 /* harmony import */ var _histogram__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./histogram */ "./src/plotly/histogram.ts");
 /* harmony import */ var _rating__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./rating */ "./src/plotly/rating.ts");
+/* harmony import */ var _pivot__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./pivot */ "./src/plotly/pivot.ts");
+
 
 
 
@@ -10252,6 +10654,69 @@ var MatrixDropdownGroupedPlotly = /** @class */ (function (_super) {
 _visualizationManager__WEBPACK_IMPORTED_MODULE_1__.VisualizationManager.registerVisualizer("matrixdropdown-grouped", MatrixDropdownGroupedPlotly);
 
 
+/***/ }),
+
+/***/ "./src/plotly/pivot.ts":
+/*!*****************************!*\
+  !*** ./src/plotly/pivot.ts ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PivotPlotly: () => (/* binding */ PivotPlotly)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/utils/helpers.ts");
+/* harmony import */ var _pivot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../pivot */ "./src/pivot.ts");
+/* harmony import */ var _selectBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./selectBase */ "./src/plotly/selectBase.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "./src/utils/index.ts");
+/* harmony import */ var _visualizationManager__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../visualizationManager */ "./src/visualizationManager.ts");
+
+
+
+
+
+var PivotPlotly = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PivotPlotly, _super);
+    function PivotPlotly(questions, data, options, name) {
+        var _this = _super.call(this, questions, data, options, name) || this;
+        _this.chartTypes = PivotPlotly.types;
+        _this._chartType = _this.chartTypes[0];
+        _this._chartAdapter = new _selectBase__WEBPACK_IMPORTED_MODULE_2__.PlotlyChartAdapter(_this);
+        return _this;
+    }
+    PivotPlotly.prototype.destroyContent = function (container) {
+        this._chartAdapter.destroy(container.children[0]);
+        _super.prototype.destroyContent.call(this, container);
+    };
+    PivotPlotly.prototype.renderContentAsync = function (container) {
+        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
+            var chartNode;
+            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        chartNode = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("div");
+                        container.innerHTML = "";
+                        container.appendChild(chartNode);
+                        return [4 /*yield*/, this._chartAdapter.create(chartNode)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, container];
+                }
+            });
+        });
+    };
+    PivotPlotly.prototype.getValueType = function () {
+        return this.valueType;
+    };
+    PivotPlotly.types = ["vbar", "bar", "line", "stackedbar", "pie", "doughnut"]; // ["vbar", "bar"];
+    return PivotPlotly;
+}(_pivot__WEBPACK_IMPORTED_MODULE_1__.PivotModel));
+
+_visualizationManager__WEBPACK_IMPORTED_MODULE_4__.VisualizationManager.registerPivotVisualizer(PivotPlotly);
+
+
 /***/ }),
 
 /***/ "./src/plotly/ranking.ts":
@@ -10699,20 +11164,6 @@ var SelectBasePlotly = /** @class */ (function (_super) {
             this._chartAdapter.update(chartNode);
         }
     };
-    SelectBasePlotly.prototype.getCalculatedValuesCore = function () {
-        var statistics = _super.prototype.getCalculatedValuesCore.call(this);
-        var series = this.getSeriesValues();
-        var values = this.getValues();
-        if (series.length > 1) {
-            var preparedData_1 = [];
-            values.forEach(function (val, valueIndex) {
-                var seriesData = series.map(function (seriesValue, seriesIndex) { return statistics[seriesIndex][valueIndex]; });
-                preparedData_1.push(seriesData);
-            });
-            return preparedData_1;
-        }
-        return statistics;
-    };
     SelectBasePlotly.types = ["bar", "vbar", "pie", "doughnut"];
     SelectBasePlotly.displayModeBar = undefined;
     return SelectBasePlotly;
@@ -10751,38 +11202,44 @@ var PlotlySetup = /** @class */ (function () {
     };
     PlotlySetup.setupPie = function (model, answersData) {
         var datasets = answersData.datasets, labels = answersData.labels, colors = answersData.colors, texts = answersData.texts, seriesLabels = answersData.seriesLabels;
-        var traces = [];
         var hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
+        var layoutColumns = 2;
+        var traces = [];
         var traceConfig = {
             type: model.chartType,
-            y: hasSeries ? seriesLabels : labels,
-            text: (hasSeries ? seriesLabels : labels).map(function (label) {
+            labels: labels,
+            customdata: labels,
+            text: labels.map(function (label) {
                 return PlotlySetup.getTruncatedLabel(label, model.labelTruncateLength);
             }),
-            hoverinfo: "x+y",
-            mode: "markers",
-            marker: {},
+            hoverinfo: "label+value+percent",
+            textposition: "inside",
         };
-        traceConfig.hoverinfo = "label+value+percent";
-        traceConfig.marker.colors = colors;
-        traceConfig.textposition = "inside";
         if (model.chartType === "doughnut") {
             traceConfig.type = "pie";
             traceConfig.hole = 0.4;
         }
         if (!hasSeries) {
+            traceConfig.mode = "markers",
+                traceConfig.marker = { color: colors };
             traceConfig.marker.symbol = "circle";
             traceConfig.marker.size = 16;
         }
         datasets.forEach(function (dataset, index) {
-            traces.push(Object.assign({}, traceConfig, {
-                values: dataset,
-                labels: hasSeries ? seriesLabels : labels,
-                customdata: hasSeries ? seriesLabels : labels,
-            }));
+            var isNotEmpty = dataset.some(function (value) { return value != 0; });
+            if (isNotEmpty) {
+                traces.push(Object.assign({}, traceConfig, {
+                    values: dataset,
+                    domain: {
+                        column: traces.length % layoutColumns,
+                        row: Math.floor(traces.length / layoutColumns),
+                    },
+                    title: { position: "bottom center", text: seriesLabels[index] }
+                }));
+            }
         });
         var radius = labels.length < 10 ? labels.length * 50 + 100 : 550;
-        var height = radius * Math.round(traces.length / 2) + 25;
+        var height = (radius + 25) * Math.ceil(traces.length / layoutColumns);
         var layout = {
             font: {
                 family: "Segoe UI, sans-serif",
@@ -10805,21 +11262,7 @@ var PlotlySetup = /** @class */ (function () {
         };
         if (hasSeries) {
             layout.annotations = [];
-            labels.forEach(function (label, index) {
-                traces[index].title = { position: "bottom center", text: label };
-            });
-            traces = traces.filter(function (t) { return !(t.values.length === 1 && t.values[0] === 0); });
-            traces.forEach(function (label, index) {
-                traces[index].domain = {
-                    column: index % 2,
-                    row: Math.floor(index / 2),
-                };
-            });
-            layout.grid = {
-                rows: Math.round(traces.length / 2),
-                columns: 2,
-            };
-            layout.height = radius * Math.round(traces.length / 2) + 25;
+            layout.grid = { rows: Math.ceil(traces.length / layoutColumns), columns: layoutColumns };
         }
         return { traces: traces, layout: layout, hasSeries: hasSeries };
     };
@@ -10828,36 +11271,45 @@ var PlotlySetup = /** @class */ (function () {
         var topMargin = 30;
         var bottomMargin = 30;
         var datasets = answersData.datasets, labels = answersData.labels, colors = answersData.colors, texts = answersData.texts, seriesLabels = answersData.seriesLabels;
-        var traces = [];
         var hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
-        var yFullTexts = hasSeries ? seriesLabels : labels;
+        var traces = [];
         var traceConfig = {
-            type: model.chartType,
-            y: yFullTexts,
-            text: yFullTexts,
-            customdata: hasSeries ? seriesLabels : labels,
+            type: model.chartType === "line" ? "line" : "bar",
+            y: labels,
+            customdata: labels,
             hoverinfo: "text",
             orientation: "h",
-            mode: "markers",
             textposition: "none",
-            width: 0.5,
-            bargap: 0.5,
-            marker: {},
         };
-        traceConfig.marker.color = colors;
+        if (!hasSeries) {
+            traceConfig.width = 0.5;
+            traceConfig.bargap = 0.5;
+            traceConfig.mode = "markers",
+                traceConfig.marker = { color: colors };
+        }
         datasets.forEach(function (dataset, index) {
+            var traceName = hasSeries ? seriesLabels[index] : labels[index];
+            var percentString = model.showPercentages ? "%" : "";
             var trace = Object.assign({}, traceConfig, {
                 x: dataset,
+                name: traceName,
+                width: hasSeries && model.chartType !== "stackedbar" ? 0.5 / seriesLabels.length : 0.5,
                 text: texts[index],
-                hovertext: yFullTexts.map(function (label, labelIndex) {
-                    return "".concat(texts[index][labelIndex], ", ").concat(label);
+                hovertext: labels.map(function (label, labelIndex) {
+                    if (model.showOnlyPercentages) {
+                        return "".concat(texts[index][labelIndex]).concat(percentString);
+                    }
+                    else {
+                        return hasSeries ? "".concat(traceName, " : ").concat(label, ", ").concat(texts[index][labelIndex]).concat(percentString) : "".concat(texts[index][labelIndex]).concat(percentString, ", ").concat(label);
+                    }
                 }),
             });
             if (model.showPercentages) {
                 var texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
                 trace.textposition = "inside";
                 trace.texttemplate = texttemplate;
-                trace.bargap = 0.1;
+                trace.width = hasSeries && model.chartType !== "stackedbar" ? 0.7 / seriesLabels.length : 0.9;
+                trace.bargap = hasSeries && model.chartType !== "stackedbar" ? 0.3 / seriesLabels.length : 0.1;
             }
             traces.push(trace);
         });
@@ -10877,60 +11329,49 @@ var PlotlySetup = /** @class */ (function () {
             },
             colorway: colors,
             hovermode: "closest",
+            plot_bgcolor: model.backgroundColor,
+            paper_bgcolor: model.backgroundColor,
+            showlegend: hasSeries,
+            barmode: hasSeries && model.chartType == "stackedbar" ? "stack" : "group",
+            xaxis: {
+                rangemode: "nonnegative",
+                automargin: true,
+            },
             yaxis: {
                 automargin: true,
                 type: "category",
                 orientation: "h",
                 tickmode: "array",
-                tickvals: yFullTexts,
-                ticktext: yFullTexts.map(function (label) {
+                tickvals: labels,
+                ticktext: labels.map(function (label) {
                     return PlotlySetup.getTruncatedLabel(label, model.labelTruncateLength) + "  ";
                 }),
             },
-            xaxis: {
-                rangemode: "nonnegative",
-                automargin: true,
-                // dtick: 1
-            },
-            plot_bgcolor: model.backgroundColor,
-            paper_bgcolor: model.backgroundColor,
-            showlegend: false,
         };
-        if (hasSeries) {
-            layout.showlegend = true;
-            if (model.chartType == "stackedbar") {
-                layout.barmode = "stack";
-                layout.height =
-                    (seriesLabels.length + 1) * lineHeight +
-                        topMargin +
-                        bottomMargin;
-            }
-            else {
-                layout.height =
-                    (labels.length + 1) * lineHeight * seriesLabels.length +
-                        topMargin +
-                        bottomMargin;
-            }
-            labels.forEach(function (label, index) {
-                traces[index].marker.color = undefined;
-                traces[index].name = label;
-                if (model.chartType === "stackedbar") {
-                    traces[index].type = "bar";
-                    traces[index].width = 0.5;
-                }
-                else {
-                    traces[index].width =
-                        (model.showPercentages ? 0.7 : 0.5) / traces.length;
-                }
-            });
-            traces.forEach(function (trace, traceIndex) {
-                var percentString = model.showPercentages ? "%" : "";
-                traces[traceIndex].hovertext = [];
-                yFullTexts.forEach(function (yFullText, yFullTextIndex) {
-                    traces[traceIndex].hovertext.push("".concat(trace.y[yFullTextIndex], " : ").concat(trace.name, ", ").concat(trace.text[yFullTextIndex]).concat(percentString));
-                });
-            });
+        if (hasSeries && model.chartType !== "stackedbar") {
+            layout.height =
+                (labels.length * seriesLabels.length + 1) * lineHeight +
+                    topMargin +
+                    bottomMargin;
         }
+        // labels.forEach((label, index) => {
+        //   traces[index].marker.color = undefined;
+        //   traces[index].name = label;
+        //   if (model.chartType === "stackedbar") {
+        //     traces[index].type = "bar";
+        //     traces[index].width = 0.5;
+        //   } else {
+        //     traces[index].width =
+        //       (model.showPercentages ? 0.7 : 0.5) / traces.length;
+        //   }
+        // });
+        // traces.forEach((trace, traceIndex) => {
+        //   const percentString = model.showPercentages ? "%" : "";
+        //   traces[traceIndex].hovertext = [];
+        //   yFullTexts.forEach((yFullText, yFullTextIndex) => {
+        //     traces[traceIndex].hovertext.push(`${trace.y[yFullTextIndex]} : ${trace.name}, ${trace.text[yFullTextIndex]}${percentString}`);
+        //   });
+        // });
         if (["ar", "fa"].indexOf(_localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.currentLocale) !== -1) {
             layout.xaxis.autorange = "reversed";
             layout.yaxis.side = "right";
@@ -10947,9 +11388,11 @@ var PlotlySetup = /** @class */ (function () {
         var topMargin = 30;
         var bottomMargin = 30;
         var datasets = answersData.datasets, labels = answersData.labels, colors = answersData.colors, texts = answersData.texts, seriesLabels = answersData.seriesLabels;
-        if (model.type !== "histogram") {
+        var hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
+        if (model.type !== "histogram" && model.type !== "pivot") {
             labels = [].concat(labels).reverse();
-            colors = [].concat(colors.slice(0, labels.length)).reverse();
+            seriesLabels = [].concat(seriesLabels).reverse();
+            colors = [].concat(colors.slice(0, hasSeries ? seriesLabels.length : labels.length)).reverse();
             var ts_1 = [];
             texts.forEach(function (text) {
                 ts_1.push([].concat(text).reverse());
@@ -10962,7 +11405,37 @@ var PlotlySetup = /** @class */ (function () {
             datasets = ds_1;
         }
         var traces = [];
-        var hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
+        var traceConfig = {
+            type: model.chartType === "line" ? "line" : "bar",
+            x: labels,
+            customdata: hasSeries ? seriesLabels : labels,
+            hoverinfo: hasSeries ? undefined : "x+y",
+            orientation: "v",
+            textposition: "none",
+        };
+        if (model.type === "histogram" || !hasSeries) {
+            traceConfig.width = 0.5;
+            traceConfig.bargap = 0.5;
+            traceConfig.mode = "markers",
+                traceConfig.marker = { color: colors };
+        }
+        datasets.forEach(function (dataset, index) {
+            var trace = Object.assign({}, traceConfig, {
+                y: dataset,
+                name: hasSeries ? seriesLabels[index] : labels[index],
+                text: texts[index],
+            });
+            if (model.showPercentages) {
+                var texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
+                trace.textposition = "inside";
+                trace.texttemplate = texttemplate;
+                if (!hasSeries) {
+                    trace.width = 0.9;
+                    trace.bargap = 0.1;
+                }
+            }
+            traces.push(trace);
+        });
         var layout = {
             font: {
                 family: "Segoe UI, sans-serif",
@@ -10979,34 +11452,21 @@ var PlotlySetup = /** @class */ (function () {
             hovermode: "closest",
             plot_bgcolor: model.backgroundColor,
             paper_bgcolor: model.backgroundColor,
-            showlegend: false,
-        };
-        var traceConfig = {
-            type: model.chartType === "line" ? "line" : "bar",
-            customdata: hasSeries ? seriesLabels : labels,
-            hoverinfo: "x+y",
-            mode: model.chartType === "line" ? "lines+markers" : "markers",
-            textposition: "none",
-            width: 0.5,
-            bargap: 0.5,
-            marker: {},
+            showlegend: hasSeries,
+            yaxis: {
+                rangemode: "nonnegative",
+                automargin: true,
+            },
+            xaxis: {
+                automargin: true,
+                type: "category",
+                tickmode: "array",
+                tickvals: labels,
+                ticktext: labels.map(function (label) {
+                    return PlotlySetup.getTruncatedLabel(label, model.labelTruncateLength) + "  ";
+                }),
+            },
         };
-        traceConfig.marker.color = colors;
-        datasets.forEach(function (dataset, index) {
-            var trace = Object.assign({}, traceConfig, {
-                x: labels,
-                y: model.showPercentages ? texts[index].map(function (y) { return y / 100; }) : dataset,
-                text: texts[index],
-            });
-            if (model.showPercentages) {
-                var texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
-                trace.textposition = "inside";
-                trace.texttemplate = texttemplate;
-                trace.width = 0.9;
-                trace.bargap = 0.1;
-            }
-            traces.push(trace);
-        });
         if (model.showPercentages && model.showOnlyPercentages) {
             layout.yaxis = {
                 automargin: true,
@@ -11182,9 +11642,9 @@ function hideEmptyAnswersInData(answersData) {
     seriesDataExistence.length = answersData.seriesLabels.length;
     var 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;
             }
@@ -11201,14 +11661,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]) {
             var dataset = [];
             var 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);
@@ -11246,14 +11706,19 @@ var SelectBase = /** @class */ (function (_super) {
          * options fields can be modified
          */
         _this.onAnswersDataReady = new survey_core__WEBPACK_IMPORTED_MODULE_1__.Event();
-        question.visibleChoicesChangedCallback = function () {
-            _this.dataProvider.raiseDataChanged();
-        };
+        if (!!question) { // TODO: move somewhere else
+            question.visibleChoicesChangedCallback = function () {
+                _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;
@@ -11741,9 +12206,9 @@ var SelectBase = /** @class */ (function (_super) {
         var series = this.getSeriesValues();
         var innerCalculatedData = [];
         if (series.length > 0) {
-            for (var i = 0; i < values.length; i++) {
+            for (var j = 0; j < series.length; j++) {
                 var seriesData = [];
-                for (var j = 0; j < series.length; j++) {
+                for (var i = 0; i < values.length; i++) {
                     if (!!externalCalculatedData[series[j]]) {
                         seriesData.push(externalCalculatedData[series[j]][values[i]] || 0);
                     }
@@ -12357,9 +12822,15 @@ __webpack_require__.r(__webpack_exports__);
 var DocumentHelper = /** @class */ (function () {
     function DocumentHelper() {
     }
-    DocumentHelper.createSelector = function (options, isSelected, handler) {
+    DocumentHelper.createSelector = function (options, isSelected, handler, title) {
         var selectWrapper = document.createElement("div");
         selectWrapper.className = "sa-question__select-wrapper";
+        if (title) {
+            var titleElement = DocumentHelper.createElement("span", "sa-question__select-title", {
+                innerText: title,
+            });
+            selectWrapper.appendChild(titleElement);
+        }
         var select = document.createElement("select");
         select.className = "sa-question__select";
         options.forEach(function (option) {
@@ -12665,7 +13136,14 @@ var VisualizationManager = /** @class */ (function () {
     VisualizationManager.registerAltVisualizerSelector = function (constructor) {
         VisualizationManager.alternativesVisualizer = constructor;
     };
+    VisualizationManager.getPivotVisualizerConstructor = function () {
+        return VisualizationManager.pivotVisualizer || _visualizerBase__WEBPACK_IMPORTED_MODULE_0__.VisualizerBase;
+    };
+    VisualizationManager.registerPivotVisualizer = function (constructor) {
+        VisualizationManager.pivotVisualizer = constructor;
+    };
     VisualizationManager.alternativesVisualizer = undefined;
+    VisualizationManager.pivotVisualizer = undefined;
     VisualizationManager.vizualizers = {};
     return VisualizationManager;
 }());
@@ -12712,6 +13190,7 @@ var VisualizationMatrixDropdown = /** @class */ (function (_super) {
         _this._childOptions.disableLocaleSwitch = true;
         _this._childOptions.dataProvider = undefined;
         _this._childOptions.allowDynamicLayout = false;
+        _this._childOptions.transposeData = true;
         _this._childOptions.seriesValues = question.rows.map(function (row) { return row.value; });
         _this._childOptions.seriesLabels = question.rows.map(function (row) { return row.text; });
         var innerQuestions = _this.getQuestions();
@@ -12871,6 +13350,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _layoutEngine__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./layoutEngine */ "./src/layoutEngine.ts");
 /* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./svgbundle */ "./src/svgbundle.ts");
 /* harmony import */ var _visualizationPanel_scss__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./visualizationPanel.scss */ "./src/visualizationPanel.scss");
+/* harmony import */ var _visualizationManager__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./visualizationManager */ "./src/visualizationManager.ts");
+
 
 
 
@@ -13192,7 +13673,15 @@ var VisualizationPanel = /** @class */ (function (_super) {
     VisualizationPanel.prototype.buildVisualizers = function (questions) {
         var _this = this;
         questions.forEach(function (question) {
-            var visualizer = _this.createVisualizer(question);
+            var visualizerOptions = Object.assign({}, _this.options);
+            var visualizerData = _this.surveyData;
+            var visualizer;
+            if (Array.isArray(question)) {
+                visualizer = new (_visualizationManager__WEBPACK_IMPORTED_MODULE_11__.VisualizationManager.getPivotVisualizerConstructor())(question, visualizerData, visualizerOptions);
+            }
+            else {
+                visualizer = _this.createVisualizer(question, visualizerOptions, visualizerData);
+            }
             if (!visualizer) {
                 return;
             }
@@ -13261,6 +13750,7 @@ var VisualizationPanel = /** @class */ (function (_super) {
         var _this = this;
         _super.prototype.setLocale.call(this, newLocale);
         (this.questions || []).forEach(function (question) {
+            question = Array.isArray(question) ? question[0] : question;
             var element = _this.getElement(question.name);
             if (!!element) {
                 element.displayName = _this.processText(question.title);
@@ -13328,6 +13818,7 @@ var VisualizationPanel = /** @class */ (function (_super) {
     VisualizationPanel.prototype.buildElements = function (questions) {
         var _this = this;
         return (questions || []).map(function (question) {
+            question = Array.isArray(question) ? question[0] : question;
             return {
                 name: question.name,
                 displayName: _this.processText(question.title),
@@ -13552,7 +14043,7 @@ var VisualizationPanel = /** @class */ (function (_super) {
             this._settingState = true;
             try {
                 if (Array.isArray(newState.elements)) {
-                    var questionNames_1 = this.questions.map(function (q) { return q.name; });
+                    var questionNames_1 = this.questions.map(function (q) { return Array.isArray(q) ? q[0].name : q.name; });
                     this._elements = [].concat(newState.elements.filter(function (e) { return (questionNames_1.indexOf(e.name) !== -1); }));
                 }
                 if (typeof newState.locale !== "undefined")
@@ -13929,12 +14420,12 @@ var VisualizerBase = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    VisualizerBase.prototype.createVisualizer = function (question, options) {
+    VisualizerBase.prototype.createVisualizer = function (question, options, data) {
         var visualizerOptions = Object.assign({}, options || this.options);
         if (visualizerOptions.dataProvider === undefined) {
             visualizerOptions.dataProvider = this.dataProvider;
         }
-        return _visualizerFactory__WEBPACK_IMPORTED_MODULE_3__.VisualizerFactory.createVisualizer(question, this.data, visualizerOptions);
+        return _visualizerFactory__WEBPACK_IMPORTED_MODULE_3__.VisualizerFactory.createVisualizer(question, data || this.data, visualizerOptions);
     };
     Object.defineProperty(VisualizerBase.prototype, "footerVisualizer", {
         /**
@@ -14277,6 +14768,15 @@ var VisualizerBase = /** @class */ (function () {
         targetElement.appendChild(this.footerContainer);
         this.renderFooter(this.footerContainer);
     };
+    VisualizerBase.prototype.updateToolbar = function () {
+        var _this = this;
+        if (!!this.toolbarContainer) {
+            PostponeHelper.postpone(function () {
+                _this.destroyToolbar(_this.toolbarContainer);
+                _this.renderToolbar(_this.toolbarContainer);
+            });
+        }
+    };
     VisualizerBase.prototype.updateContent = function () {
         this.destroyContent(this.contentContainer);
         this.renderContent(this.contentContainer);
@@ -16554,6 +17054,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   NpsVisualizer: () => (/* reexport safe */ _summary_core__WEBPACK_IMPORTED_MODULE_1__.NpsVisualizer),
 /* harmony export */   NpsVisualizerWidget: () => (/* reexport safe */ _summary_core__WEBPACK_IMPORTED_MODULE_1__.NpsVisualizerWidget),
 /* harmony export */   NumberModel: () => (/* reexport safe */ _summary_core__WEBPACK_IMPORTED_MODULE_1__.NumberModel),
+/* harmony export */   PivotModel: () => (/* reexport safe */ _summary_core__WEBPACK_IMPORTED_MODULE_1__.PivotModel),
+/* harmony export */   PivotPlotly: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_0__.PivotPlotly),
 /* harmony export */   PlotlyBoolChartAdapter: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_0__.PlotlyBoolChartAdapter),
 /* harmony export */   PlotlyChartAdapter: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_0__.PlotlyChartAdapter),
 /* harmony export */   PlotlyGaugeAdapter: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_0__.PlotlyGaugeAdapter),