survey-analytics 1.12.54 → 1.12.56

package/fesm/shared2.mjs

@@ -1,11 +1,11 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.3.6
+ * surveyjs - SurveyJS Dashboard library v2.3.11
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
 import { D as DocumentHelper, l as localization, g as createLoadingIndicator, b as DataHelper, e as createCommercialLicenseLink, f as svgTemplate, t as toPrecision } from './shared.mjs';
-import { Event, hasLicense, QuestionCommentModel, settings, ItemValue, surveyLocalization, IsTouch } from 'survey-core';
+import { Event, QuestionCustomModel, QuestionCompositeModel, hasLicense, QuestionCommentModel, settings, ItemValue, QuestionRatingModel, surveyLocalization, IsTouch } from 'survey-core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -43,6 +43,10 @@ class DataProvider {
     constructor(_data = []) {
         this._data = _data;
         this.filterValues = {};
+        /**
+         * Fires when data has been changed.
+         */
+        this.onFilterChanged = new Event();
         /**
          * Fires when data has been changed.
          */
@@ -79,13 +83,17 @@ class DataProvider {
                         const filterValueType = typeof filterValue;
                         const questionValue = item[key];
                         if (Array.isArray(questionValue)) {
-                            if (filterValueType !== "object")
+                            if (filterValueType === "object") {
+                                return !questionArrayValueContainsValue(questionValue, filterValue);
+                            }
+                            else {
                                 return questionValue.indexOf(filterValue) == -1;
+                            }
                         }
                         if (typeof questionValue === "object") {
                             if (filterValueType !== "object")
                                 return true;
-                            return !questionContainsValue(questionValue, filterValue);
+                            return !questionValueContainsValue(questionValue, filterValue);
                         }
                         const seriesValue = item[DataProvider.seriesMarkerKey];
                         if (!!seriesValue && filterValueType === "object") {
@@ -118,16 +126,37 @@ class DataProvider {
         var filterChanged = true;
         if (selectedValue !== undefined) {
             filterChanged = this.filterValues[questionName] !== selectedValue;
-            this.filterValues[questionName] = selectedValue;
+            if (filterChanged) {
+                this.filterValues[questionName] = selectedValue;
+            }
         }
         else {
             filterChanged = this.filterValues[questionName] !== undefined;
-            delete this.filterValues[questionName];
+            if (filterChanged) {
+                delete this.filterValues[questionName];
+            }
         }
         if (filterChanged) {
+            this.raiseFilterChanged(questionName, selectedValue);
             this.raiseDataChanged();
         }
     }
+    /**
+     * Resets filter.
+     */
+    resetFilter() {
+        if (Object.keys(this.filterValues).length === 0) {
+            return;
+        }
+        Object.keys(this.filterValues).forEach(key => delete this.filterValues[key]);
+        this.raiseFilterChanged();
+        this.raiseDataChanged();
+    }
+    raiseFilterChanged(questionName, selectedValue) {
+        if (!this.onFilterChanged.isEmpty) {
+            this.onFilterChanged.fire(this, { questionName, selectedValue });
+        }
+    }
     raiseDataChanged(questionName) {
         this._filteredData = undefined;
         if (!this.onDataChanged.isEmpty) {
@@ -137,9 +166,31 @@ class DataProvider {
     getFilters() {
         return Object.keys(this.filterValues).map(key => ({ field: key, type: "=", value: this.filterValues[key] }));
     }
+    fixDropdownData(dataNames) {
+        (this.data || []).forEach((dataItem) => {
+            let rawDataItem = dataItem[dataNames[0]];
+            if (!!rawDataItem && typeof rawDataItem === "object" && !Array.isArray(rawDataItem)) {
+                const arrayData = [];
+                Object.keys(rawDataItem).forEach((key) => {
+                    var nestedDataItem = Object.assign({}, rawDataItem[key]);
+                    nestedDataItem[DataProvider.seriesMarkerKey] = key;
+                    arrayData.push(nestedDataItem);
+                });
+                dataItem[dataNames[0]] = arrayData;
+            }
+        });
+    }
 }
 DataProvider.seriesMarkerKey = "__sa_series_name";
-function questionContainsValue(questionValue, filterValue) {
+function questionArrayValueContainsValue(questionValues, filterValue) {
+    for (let i = 0; i < questionValues.length; i++) {
+        if (questionValueContainsValue(questionValues[i], filterValue)) {
+            return true;
+        }
+    }
+    return false;
+}
+function questionValueContainsValue(questionValue, filterValue) {
     const questionValueKeys = Object.keys(questionValue);
     const filterValueKeys = Object.keys(filterValue);
     if (filterValueKeys.length > questionValueKeys.length)
@@ -282,16 +333,26 @@ class VisualizerFactory {
     static createVisualizer(question, data, options) {
         let type = question.getType();
         let creators = [];
+        let questionForCreator = question;
+        let optionsForCreator = Object.assign({}, options);
         if (type === "text" && question.inputType) {
             creators = VisualizationManager.getVisualizersByType(question.inputType, type);
         }
         else {
-            creators = VisualizationManager.getVisualizersByType(type);
+            let fallbackType = undefined;
+            if (question instanceof QuestionCustomModel) {
+                fallbackType = question.getDynamicType();
+                // questionForCreator = question.contentQuestion;
+            }
+            else if (question instanceof QuestionCompositeModel) {
+                fallbackType = "composite";
+            }
+            creators = VisualizationManager.getVisualizersByType(type, fallbackType);
         }
-        var visualizers = creators.map((creator) => new creator(question, data, options));
+        var visualizers = creators.map((creator) => new creator(questionForCreator, data, optionsForCreator));
         if (visualizers.length > 1) {
             const alternativesVisualizerConstructor = VisualizationManager.getAltVisualizerSelector();
-            let visualizer = new alternativesVisualizerConstructor(visualizers, question, data, options);
+            let visualizer = new alternativesVisualizerConstructor(visualizers, questionForCreator, data, optionsForCreator);
             return visualizer;
         }
         return visualizers[0];
@@ -325,51 +386,58 @@ function defaultStatisticsCalculator(data, dataInfo) {
             return valuesIndex[val.value];
         return valuesIndex[val];
     };
-    data.forEach((row) => {
-        dataNames.forEach((dataName, index) => {
-            const rowValue = row[dataName];
-            if (rowValue !== undefined || processMissingAnswers) {
-                const rowValues = Array.isArray(rowValue) ? rowValue : [rowValue];
-                if (series.length > 0) {
-                    const rowName = row[DataProvider.seriesMarkerKey];
-                    if (rowName !== undefined) {
-                        // Series are labelled by seriesMarkerKey in row data
-                        const seriesNo = seriesIndex[rowName] || 0;
-                        rowValues.forEach((val) => {
-                            const valIndex = getValueIndex(val);
-                            statistics[index][seriesNo][valIndex]++;
-                        });
-                    }
-                    else {
-                        // Series are the keys in question value (matrix question)
-                        // TODO: think about the de-normalization and combine with the previous case
-                        rowValues.forEach((val) => {
-                            series.forEach((seriesName) => {
-                                if (val[seriesName] !== undefined) {
-                                    const seriesNo = seriesIndex[seriesName] || 0;
-                                    const values = Array.isArray(val[seriesName]) ? val[seriesName] : [val[seriesName]];
-                                    values.forEach(value => {
-                                        const valIndex = getValueIndex(value);
-                                        statistics[index][seriesNo][valIndex]++;
-                                    });
-                                }
-                            });
-                        });
-                    }
+    const processDataRow = (dataRow, dataName, index) => {
+        const rowValue = dataRow[dataName];
+        if (rowValue !== undefined || processMissingAnswers) {
+            const rowValues = Array.isArray(rowValue) ? rowValue : [rowValue];
+            if (series.length > 0) {
+                const rowName = dataRow[DataProvider.seriesMarkerKey];
+                if (rowName !== undefined) {
+                    // Series are labelled by seriesMarkerKey in row data
+                    const seriesNo = seriesIndex[rowName] || 0;
+                    rowValues.forEach((val) => {
+                        const valIndex = getValueIndex(val);
+                        statistics[index][seriesNo][valIndex]++;
+                    });
                 }
                 else {
-                    // No series
+                    // Series are the keys in question value (matrix question)
+                    // TODO: think about the de-normalization and combine with the previous case
                     rowValues.forEach((val) => {
-                        const valIndex = getValueIndex(val);
-                        statistics[0][0][valIndex]++;
+                        series.forEach((seriesName) => {
+                            if (val[seriesName] !== undefined) {
+                                const seriesNo = seriesIndex[seriesName] || 0;
+                                const values = Array.isArray(val[seriesName]) ? val[seriesName] : [val[seriesName]];
+                                values.forEach(value => {
+                                    const valIndex = getValueIndex(value);
+                                    statistics[index][seriesNo][valIndex]++;
+                                });
+                            }
+                        });
                     });
                 }
             }
+            else {
+                // No series
+                rowValues.forEach((val) => {
+                    const valIndex = getValueIndex(val);
+                    statistics[0][0][valIndex]++;
+                });
+            }
+        }
+    };
+    data.forEach((dataRow) => {
+        const nestedDataRows = getNestedDataRows(dataRow, dataInfo);
+        nestedDataRows.forEach(nestedDataRow => {
+            dataNames.forEach((dataName, index) => {
+                processDataRow(nestedDataRow, dataName, index);
+            });
         });
     });
     return dataInfo.dataNames.length > 1 ? statistics : statistics[0];
 }
-function histogramStatisticsCalculator(data, intervals, seriesValues) {
+function histogramStatisticsCalculator(data, intervals, dataInfo, aggregateDataNames = []) {
+    const seriesValues = dataInfo.getSeriesValues();
     const statistics = [];
     if (seriesValues.length === 0) {
         seriesValues.push("");
@@ -378,8 +446,19 @@ function histogramStatisticsCalculator(data, intervals, seriesValues) {
         statistics.push(intervals.map(i => 0));
         data[seriesValues[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]++;
+                if (intervals[j].start <= dataValue.continuous && (dataValue.continuous < intervals[j].end || j == intervals.length - 1)) {
+                    if (aggregateDataNames.length > 0) {
+                        aggregateDataNames.forEach(aggregateDataName => {
+                            const aggregateDataValue = dataValue.row[aggregateDataName];
+                            const numberValue = parseFloat(aggregateDataValue);
+                            if (aggregateDataValue !== undefined && !isNaN(numberValue)) {
+                                statistics[i][j] += numberValue;
+                            }
+                        });
+                    }
+                    else {
+                        statistics[i][j]++;
+                    }
                     break;
                 }
             }
@@ -387,21 +466,25 @@ function histogramStatisticsCalculator(data, intervals, seriesValues) {
     }
     return statistics;
 }
-function mathStatisticsCalculator(data, dataName) {
+function mathStatisticsCalculator(data, dataInfo) {
     let resultMin = Number.MAX_VALUE, resultMax = -Number.MAX_VALUE, resultAverage = 0;
     let actualAnswerCount = 0;
-    data.forEach((rowData) => {
-        if (rowData[dataName] !== undefined) {
-            const questionValue = +rowData[dataName];
-            actualAnswerCount++;
-            resultAverage += questionValue;
-            if (resultMin > questionValue) {
-                resultMin = questionValue;
-            }
-            if (resultMax < questionValue) {
-                resultMax = questionValue;
+    data.forEach((dataRow) => {
+        const nestedDataRows = getNestedDataRows(dataRow, dataInfo);
+        nestedDataRows.forEach(nestedDataRow => {
+            const answerData = nestedDataRow[dataInfo.dataNames[0]];
+            if (answerData !== undefined) {
+                const questionValue = +answerData;
+                actualAnswerCount++;
+                resultAverage += questionValue;
+                if (resultMin > questionValue) {
+                    resultMin = questionValue;
+                }
+                if (resultMax < questionValue) {
+                    resultMax = questionValue;
+                }
             }
-        }
+        });
     });
     if (actualAnswerCount > 0) {
         resultAverage = resultAverage / actualAnswerCount;
@@ -409,6 +492,25 @@ function mathStatisticsCalculator(data, dataName) {
     resultAverage = Math.ceil(resultAverage * 100) / 100;
     return [resultAverage, resultMin, resultMax];
 }
+function getNestedDataRows(dataRow, dataInfo) {
+    let nestedDataRows = [];
+    if (!dataInfo.dataPath) {
+        nestedDataRows = [dataRow];
+    }
+    else {
+        if (dataRow[dataInfo.dataPath] === undefined)
+            return [];
+        if (typeof dataRow[dataInfo.dataPath] !== "object")
+            return [];
+        if (Array.isArray(dataRow[dataInfo.dataPath])) {
+            nestedDataRows = dataRow[dataInfo.dataPath];
+        }
+        else {
+            nestedDataRows = [dataRow[dataInfo.dataPath]];
+        }
+    }
+    return nestedDataRows;
+}
 
 class PostponeHelper {
     static postpone(fn, timeout) {
@@ -563,6 +665,9 @@ class VisualizerBase {
     get dataNames() {
         return [this.name];
     }
+    get dataPath() {
+        return this.options.dataPath;
+    }
     /**
      * Indicates whether the visualizer displays a header. This property is `true` when a visualized question has a correct answer.
      * @see hasFooter
@@ -689,6 +794,18 @@ class VisualizerBase {
         }
         return undefined;
     }
+    /**
+     * Returns the visualizer's title.
+     */
+    get title() {
+        return this.getTitle(this.question);
+    }
+    getTitle(question) {
+        var _a;
+        if (question === undefined)
+            return "";
+        return this.processText(((_a = question.locTitle) === null || _a === void 0 ? void 0 : _a.renderedHtml) ? question.locTitle.renderedHtml : question.title);
+    }
     /**
      * Returns the visualizer's type.
      */
@@ -717,9 +834,7 @@ class VisualizerBase {
      * @param data A data array with survey results to be visualized.
      */
     updateData(data) {
-        if (!this.options.dataProvider) {
-            this.dataProvider.data = data;
-        }
+        this.dataProvider.data = data;
         if (this.hasFooter) {
             this.footerVisualizer.updateData(data);
         }
@@ -1172,19 +1287,21 @@ class NumberModel extends VisualizerBase {
             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;
-        });
+        if (this.options.allowChangeVisualizerType !== false) {
+            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;
@@ -1258,7 +1375,7 @@ class NumberModel extends VisualizerBase {
         if (this._resultAverage === undefined ||
             this._resultMin === undefined ||
             this._resultMax === undefined) {
-            [this._resultAverage, this._resultMin, this._resultMax] = mathStatisticsCalculator(this.surveyData, this.dataNames[0]);
+            [this._resultAverage, this._resultMin, this._resultMax] = mathStatisticsCalculator(this.surveyData, this);
         }
         return [this._resultAverage, this._resultMin, this._resultMax];
     }
@@ -1383,19 +1500,21 @@ class SelectBase extends VisualizerBase {
                 this._chartType = this.options.defaultChartType;
             }
         }
-        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;
-        });
+        if (this.options.allowChangeVisualizerType !== false) {
+            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;
+            });
+        }
         this.registerToolbarItem("changeAnswersOrder", () => {
             if (this.isSupportAnswersOrder()) {
                 this.choicesOrderSelector = DocumentHelper.createSelector([
@@ -1571,6 +1690,11 @@ class SelectBase extends VisualizerBase {
         }
     }
     getSelectedItemByText(itemText) {
+        var _a;
+        if (this.question instanceof QuestionRatingModel) {
+            const rateValues = this.question.rateValues;
+            return (_a = rateValues === null || rateValues === void 0 ? void 0 : rateValues.filter((choice) => choice.text === itemText)[0]) !== null && _a !== void 0 ? _a : new ItemValue(parseFloat(itemText), itemText);
+        }
         const selBase = this.question;
         if (this.question.hasOther && itemText == selBase.otherText) {
             return selBase.otherItem;
@@ -1579,14 +1703,17 @@ class SelectBase extends VisualizerBase {
             return selBase.choices.filter((choice) => choice.text === itemText)[0];
         }
     }
-    setSelection(item) {
+    onSelectionChanged(item) {
         var _a;
+        if (this.onDataItemSelected !== undefined) {
+            this.onDataItemSelected(item !== undefined ? item.value : undefined, item !== undefined ? item.text : "");
+        }
+        this.stateChanged("filter", (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value);
+    }
+    setSelection(item) {
         if (this.selectedItem !== item) {
             this.selectedItem = item;
-            if (this.onDataItemSelected !== undefined) {
-                this.onDataItemSelected(item !== undefined ? item.value : undefined, item !== undefined ? item.text : "");
-            }
-            this.stateChanged("filter", (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value);
+            this.onSelectionChanged(item);
         }
     }
     get selection() {
@@ -1772,22 +1899,6 @@ class SelectBase extends VisualizerBase {
         }
         return percentages;
     }
-    answersDataReady(answersData) {
-        let result = {};
-        if (this.hideEmptyAnswers) {
-            result = hideEmptyAnswersInData(answersData);
-        }
-        else {
-            result = answersData;
-        }
-        if (this.topN > 0) {
-            result.datasets[0] = result.datasets[0].slice(-this.topN);
-            result.labels = result.labels.slice(-this.topN);
-            result.colors = result.colors.slice(-this.topN);
-            result.texts[0] = result.texts[0].slice(-this.topN);
-        }
-        return result;
-    }
     /**
      * Returns object with all infotmation for data visualization: datasets, labels, colors, additional texts (percentage).
      */
@@ -1823,7 +1934,15 @@ class SelectBase extends VisualizerBase {
                 texts,
                 seriesLabels,
             };
-            answersData = this.answersDataReady(answersData);
+            if (this.hideEmptyAnswers) {
+                answersData = hideEmptyAnswersInData(answersData);
+            }
+            if (this.topN > 0) {
+                answersData.datasets[0] = answersData.datasets[0].slice(-this.topN);
+                answersData.labels = answersData.labels.slice(-this.topN);
+                answersData.colors = answersData.colors.slice(-this.topN);
+                answersData.texts[0] = answersData.texts[0].slice(-this.topN);
+            }
             this.onAnswersDataReady.fire(this, answersData);
             return answersData;
         });
@@ -1961,6 +2080,144 @@ BooleanModel.trueColor = "";
 BooleanModel.falseColor = "";
 VisualizationManager.registerVisualizer("boolean", BooleanModel);
 
+function getQuarter(date) {
+    switch (Math.floor(date.getMonth() / 3) + 1) {
+        case 1: return "I";
+        case 2: return "II";
+        case 3: return "III";
+        case 4: return "IV";
+    }
+}
+function getBestIntervalMode(min, max) {
+    const start = new Date(min);
+    const end = new Date(max);
+    const totalMonths = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
+    if (totalMonths > 10 * 12)
+        return "decades";
+    if (totalMonths > 2 * 12)
+        return "years";
+    if (totalMonths > 1 * 12)
+        return "quarters";
+    if (totalMonths > 4)
+        return "months";
+    return "days";
+}
+const intervalCalculators = {
+    decades: (min, max) => {
+        const intervals = [];
+        let start = new Date(min);
+        start.setFullYear(Math.floor(start.getFullYear() / 10) * 10);
+        start.setMonth(0);
+        start.setDate(1);
+        start.setHours(0, 0, 0, 0);
+        let startYear = start.getFullYear();
+        const end = new Date(max);
+        const endYear = end.getFullYear();
+        while (startYear <= endYear) {
+            const intervalStart = new Date(startYear, 0, 1);
+            const intervalEnd = new Date(startYear + 10, 0, 1);
+            intervals.push({
+                start: intervalStart.getTime(),
+                end: intervalEnd.getTime(),
+                label: "" + startYear + "s"
+            });
+            startYear += 10;
+        }
+        return intervals;
+    },
+    years: (min, max) => {
+        const intervals = [];
+        let start = new Date(min);
+        start.setMonth(0);
+        start.setDate(1);
+        start.setHours(0, 0, 0, 0);
+        let startYear = start.getFullYear();
+        const end = new Date(max);
+        const endYear = end.getFullYear();
+        while (startYear <= endYear) {
+            const intervalStart = new Date(startYear, 0, 1);
+            const intervalEnd = new Date(startYear + 1, 0, 1);
+            intervals.push({
+                start: intervalStart.getTime(),
+                end: intervalEnd.getTime(),
+                label: "" + startYear
+            });
+            startYear++;
+        }
+        return intervals;
+    },
+    months: (min, max) => {
+        const intervals = [];
+        let start = new Date(min);
+        start.setDate(1);
+        start.setHours(0, 0, 0, 0);
+        let startYear = start.getFullYear();
+        let startMonth = start.getMonth();
+        const end = new Date(max);
+        const endYear = end.getFullYear();
+        const endMonth = end.getMonth();
+        while (startYear < endYear || (startYear === endYear && startMonth <= endMonth)) {
+            const intervalStart = new Date(startYear, startMonth, 1);
+            const intervalEnd = new Date(startYear, startMonth + 1, 1);
+            intervals.push({
+                start: intervalStart.getTime(),
+                end: intervalEnd.getTime(),
+                label: intervalStart.toLocaleDateString(undefined, { year: "numeric", month: "short" })
+            });
+            startMonth++;
+            if (startMonth >= 12) {
+                startMonth = 0;
+                startYear++;
+            }
+        }
+        return intervals;
+    },
+    quarters: (min, max) => {
+        const intervals = [];
+        let start = new Date(min);
+        start.setDate(1);
+        start.setHours(0, 0, 0, 0);
+        let startYear = start.getFullYear();
+        let startMonth = start.getMonth();
+        const end = new Date(max);
+        const endYear = end.getFullYear();
+        const endMonth = end.getMonth();
+        while (startYear < endYear || (startYear === endYear && startMonth <= endMonth)) {
+            const intervalStart = new Date(startYear, startMonth, 1);
+            const intervalEnd = new Date(startYear, startMonth + 3, 1);
+            intervals.push({
+                start: intervalStart.getTime(),
+                end: intervalEnd.getTime(),
+                label: getQuarter(intervalStart) + " " + intervalStart.getFullYear().toString()
+            });
+            startMonth += 3;
+            if (startMonth >= 12) {
+                startMonth = startMonth % 12;
+                startYear++;
+            }
+        }
+        return intervals;
+    },
+    days: (min, max) => {
+        const intervals = [];
+        let start = new Date(min);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(max);
+        end.setHours(0, 0, 0, 0);
+        while (start <= end) {
+            const intervalStart = new Date(start);
+            const intervalEnd = new Date(start);
+            intervalEnd.setDate(intervalEnd.getDate() + 1);
+            intervals.push({
+                start: intervalStart.getTime(),
+                end: intervalEnd.getTime(),
+                label: intervalStart.toLocaleDateString()
+            });
+            start.setDate(start.getDate() + 1);
+        }
+        return intervals;
+    }
+};
 class HistogramModel extends SelectBase {
     constructor(question, data, options, name) {
         super(question, data, options, name || "histogram");
@@ -1969,6 +2226,14 @@ class HistogramModel extends SelectBase {
         this._continuousData = undefined;
         this._cachedIntervals = undefined;
         this._intervalPrecision = 2;
+        this.showRunningTotalsBtn = undefined;
+        this.showGroupedBtn = undefined;
+        this.changeIntervalsModeSelector = undefined;
+        this.aggregateDataNameSelector = undefined;
+        this.intervalModes = ["auto", "decades", "years", "quarters", "months", "days"];
+        this._showRunningTotals = false;
+        this._showGrouped = false;
+        this._aggregateDataName = "";
         this._transposeData = false;
         if (this.options.intervalPrecision !== undefined) {
             this._intervalPrecision = this.options.intervalPrecision;
@@ -1980,6 +2245,61 @@ class HistogramModel extends SelectBase {
         else {
             this.valueType = "number";
         }
+        this._intervalsMode = this.valueType === "date" ? "auto" : "default";
+        if (this.allowChangeIntervals) {
+            this.registerToolbarItem("changeIntervalsMode", () => {
+                this.changeIntervalsModeSelector = DocumentHelper.createSelector(this.intervalModes.map((intervalModeValue) => {
+                    return {
+                        value: intervalModeValue,
+                        text: localization.getString("intervalMode_" + intervalModeValue),
+                    };
+                }), (option) => this.intervalsMode === option.value, (e) => {
+                    this.intervalsMode = e.target.value;
+                }, localization.getString("intervalModeTitle"));
+                return this.changeIntervalsModeSelector;
+            });
+        }
+        if (this.possibleAggregateDataNames.length > 0) {
+            this.registerToolbarItem("aggregateDataName", () => {
+                const choices = this.possibleAggregateDataNames.map((dataName) => {
+                    return typeof dataName === "string" ? { value: dataName, text: dataName } : dataName;
+                });
+                choices.unshift({ value: "", text: localization.getString("noneAggregateText") }),
+                    this.aggregateDataNameSelector = DocumentHelper.createSelector(choices, (option) => this.aggregateDataName === option.value, (e) => {
+                        this.aggregateDataName = e.target.value;
+                    }, localization.getString("selectAggregateText"));
+                this.updateAggregateDataNameSelector();
+                return this.aggregateDataNameSelector;
+            });
+        }
+        if (this.allowChangeIntervals && this.options.allowRunningTotals) {
+            this.registerToolbarItem("showRunningTotals", () => {
+                this.showRunningTotalsBtn = DocumentHelper.createButton(() => {
+                    this.showRunningTotals = !this.showRunningTotals;
+                });
+                this.updateShowRunningTotalsBtn();
+                return this.showRunningTotalsBtn;
+            });
+        }
+        if (this.allowChangeIntervals && this.options.allowCompareDatePeriods) {
+            this.registerToolbarItem("showGrouped", () => {
+                this.showGroupedBtn = DocumentHelper.createButton(() => {
+                    this.showGrouped = !this.showGrouped;
+                });
+                this.updateShowGroupedBtn();
+                return this.showGroupedBtn;
+            });
+        }
+    }
+    updateIntervalsModeSelector() {
+        if (!!this.changeIntervalsModeSelector) {
+            this.changeIntervalsModeSelector.getElementsByTagName("select")[0].value = this.intervalsMode;
+        }
+    }
+    updateAggregateDataNameSelector() {
+        if (!!this.aggregateDataNameSelector) {
+            this.aggregateDataNameSelector.getElementsByTagName("select")[0].value = this.aggregateDataName;
+        }
     }
     reset() {
         this._continuousData = undefined;
@@ -2022,6 +2342,17 @@ class HistogramModel extends SelectBase {
         this.reset();
         super.onDataChanged();
     }
+    onSelectionChanged(item) {
+        if (item !== undefined && this.onDataItemSelected !== undefined) {
+            if (this.valueType === "date") {
+                const currIntervalCalueIndex = this.intervalModes.indexOf(this.intervalsMode);
+                if (currIntervalCalueIndex > 0 && currIntervalCalueIndex < this.intervalModes.length - 1) {
+                    this.intervalsMode = this.intervalModes[currIntervalCalueIndex + 1];
+                }
+            }
+        }
+        super.onSelectionChanged(item);
+    }
     getContinuousValues() {
         if (this._cachedValues === undefined) {
             const series = this.getSeriesValues();
@@ -2031,20 +2362,26 @@ class HistogramModel extends SelectBase {
             this._continuousData = {};
             series.forEach(seriesValue => this._continuousData[seriesValue] = []);
             const hash = {};
-            this.data.forEach(dataItem => {
-                const answerData = dataItem[this.name];
-                if (answerData !== undefined) {
-                    const seriesValue = dataItem[DataProvider.seriesMarkerKey] || "";
-                    // TODO: _continuousData should be sorted in order to speed-up statistics calculation in the getData function
-                    this._continuousData[seriesValue].push(this.getContinuousValue(answerData));
-                    hash[answerData] = answerData;
-                }
+            this.data.forEach(dataRow => {
+                const nestedDataRows = getNestedDataRows(dataRow, this);
+                nestedDataRows.forEach(nestedDataRow => {
+                    const answerData = nestedDataRow[this.dataNames[0]];
+                    if (answerData !== undefined) {
+                        const seriesValue = nestedDataRow[DataProvider.seriesMarkerKey] || "";
+                        // TODO: _continuousData should be sorted in order to speed-up statistics calculation in the getData function
+                        this._continuousData[seriesValue].push({ continuous: this.getContinuousValue(answerData), row: nestedDataRow });
+                        hash[answerData] = answerData;
+                    }
+                });
             });
-            this._cachedValues = Object.keys(hash).map(key => ({ original: hash[key], continuous: this.getContinuousValue(key) }));
+            this._cachedValues = Object.keys(hash).map(key => ({ original: hash[key], continuous: this.getContinuousValue(key), row: hash[key].row }));
             this._cachedValues.sort((a, b) => a.continuous - b.continuous);
         }
         return this._cachedValues;
     }
+    isSupportSoftUpdateContent() {
+        return false;
+    }
     isSupportMissingAnswers() {
         return false;
     }
@@ -2092,29 +2429,220 @@ class HistogramModel extends SelectBase {
             if (continuousValues.length) {
                 let start = continuousValues[0].continuous;
                 const end = continuousValues[continuousValues.length - 1].continuous;
-                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;
+                const intervalsMode = this.intervalsMode === "auto" ? getBestIntervalMode(start, end) : this.intervalsMode;
+                if (intervalCalculators[intervalsMode] !== undefined) {
+                    this._cachedIntervals = intervalCalculators[intervalsMode](start, end);
+                }
+                else {
+                    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;
     }
+    get intervalsMode() {
+        if (this.hasCustomIntervals)
+            return "custom";
+        return this._intervalsMode;
+    }
+    set intervalsMode(val) {
+        if (this.allowChangeIntervals && this._intervalsMode !== val) {
+            this._intervalsMode = val;
+            if (!this.canShowGroupedDateSeries) {
+                this._showGrouped = false;
+            }
+            this.updateIntervalsModeSelector();
+            this.updateShowGroupedBtn();
+            this.onDataChanged();
+        }
+    }
+    get allowChangeIntervals() {
+        return this.valueType === "date" && !this.hasCustomIntervals && this.options.allowChangeIntervals === true;
+    }
+    get showRunningTotals() {
+        return this._showRunningTotals;
+    }
+    set showRunningTotals(val) {
+        this._showRunningTotals = val;
+        this.updateShowRunningTotalsBtn();
+        this.stateChanged("showRunningTotals", val);
+        this.refreshContent();
+    }
+    updateShowRunningTotalsBtn() {
+        if (!!this.showRunningTotalsBtn) {
+            this.showRunningTotalsBtn.innerText = this.showRunningTotals
+                ? localization.getString("noRunningTotals")
+                : localization.getString("runningTotals");
+        }
+    }
+    get showGrouped() {
+        return this._showGrouped;
+    }
+    set showGrouped(val) {
+        this._showGrouped = val;
+        this.updateShowGroupedBtn();
+        this.stateChanged("showGrouped", val);
+        this.refreshContent();
+    }
+    updateShowGroupedBtn() {
+        if (!!this.showGroupedBtn) {
+            this.showGroupedBtn.innerText = this.showGrouped
+                ? localization.getString("ungroupDateSeries")
+                : localization.getString("groupDateSeries");
+            this.showGroupedBtn.style.display = this.canShowGroupedDateSeries ? "inline" : "none";
+        }
+    }
+    get canShowGroupedDateSeries() {
+        return ["years", "quarters", "months"].indexOf(this.intervalsMode) !== -1;
+    }
+    get aggregateDataName() {
+        return this._aggregateDataName;
+    }
+    set aggregateDataName(val) {
+        if (this._aggregateDataName !== val) {
+            this._aggregateDataName = val;
+            this.onDataChanged();
+        }
+    }
+    get possibleAggregateDataNames() {
+        var _a, _b;
+        return (_b = (_a = this.questionOptions) === null || _a === void 0 ? void 0 : _a.aggregateDataNames) !== null && _b !== void 0 ? _b : [];
+    }
     convertFromExternalData(externalCalculatedData) {
         return [externalCalculatedData];
     }
     getCalculatedValuesCore() {
         this.getContinuousValues();
-        return histogramStatisticsCalculator(this._continuousData, this.intervals, this.getSeriesValues());
+        return histogramStatisticsCalculator(this._continuousData, this.intervals, this, [this.aggregateDataName].filter(name => !!name));
+    }
+    getCalculatedValues() {
+        const _super = Object.create(null, {
+            getCalculatedValues: { get: () => super.getCalculatedValues }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            const values = yield _super.getCalculatedValues.call(this);
+            const result = JSON.parse(JSON.stringify(values));
+            if (this.showRunningTotals) {
+                for (let i = 0; i < result.length; i++) {
+                    for (let j = 1; j < result[i].length; j++) {
+                        result[i][j] += result[i][j - 1];
+                    }
+                }
+            }
+            return result;
+        });
+    }
+    getGroupedDateAnswersData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let datasets = (yield this.getCalculatedValues());
+            let colors = this.getColors();
+            let labels = this.getLabels();
+            let seriesLabels = this.getSeriesLabels();
+            const intervals = [].concat(this.intervals);
+            const start = new Date(intervals[0].start);
+            const end = new Date(intervals[intervals.length - 1].end);
+            const startYear = start.getFullYear();
+            const endYear = end.getFullYear();
+            if (this.intervalsMode === "years") {
+                seriesLabels = [];
+                const groupedDatasets = [];
+                for (let year = Math.floor(startYear / 10) * 10; year <= endYear; year += 10) {
+                    seriesLabels.push(year.toString() + "s");
+                    groupedDatasets.push(new Array(10).fill(0));
+                }
+                for (let i = 0; i < intervals.length; i++) {
+                    const interval = intervals[i];
+                    const intervalDate = new Date(interval.start);
+                    const decade = Math.floor(intervalDate.getFullYear() / 10) * 10;
+                    const yearInDecade = intervalDate.getFullYear() - decade;
+                    const decadeIndex = Math.floor((decade - Math.floor(startYear / 10) * 10) / 10);
+                    groupedDatasets[decadeIndex][yearInDecade] = datasets[0][i];
+                }
+                datasets = groupedDatasets;
+                labels = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+            }
+            else if (this.intervalsMode === "quarters") {
+                seriesLabels = [];
+                const groupedDatasets = [];
+                for (let year = startYear; year <= endYear; year++) {
+                    seriesLabels.push(year.toString());
+                    groupedDatasets.push(new Array(4).fill(0));
+                }
+                for (let i = 0; i < intervals.length; i++) {
+                    const interval = intervals[i];
+                    const intervalDate = new Date(interval.start);
+                    const quarter = Math.floor(intervalDate.getMonth() / 3);
+                    const year = intervalDate.getFullYear();
+                    const yearIndex = year - startYear;
+                    groupedDatasets[yearIndex][quarter] = datasets[0][i];
+                }
+                datasets = groupedDatasets;
+                labels = ["I", "II", "III", "IV"];
+            }
+            else if (this.intervalsMode === "months") {
+                seriesLabels = [];
+                const groupedDatasets = [];
+                for (let year = startYear; year <= endYear; year++) {
+                    seriesLabels.push(year.toString());
+                    groupedDatasets.push(new Array(12).fill(0));
+                }
+                for (let i = 0; i < intervals.length; i++) {
+                    const interval = intervals[i];
+                    const intervalDate = new Date(interval.start);
+                    const month = intervalDate.getMonth();
+                    const year = intervalDate.getFullYear();
+                    const yearIndex = year - startYear;
+                    groupedDatasets[yearIndex][month] = datasets[0][i];
+                }
+                datasets = groupedDatasets;
+                labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+            }
+            let texts = datasets;
+            return {
+                datasets,
+                labels,
+                colors,
+                texts,
+                seriesLabels,
+            };
+        });
+    }
+    /**
+     * Returns object with all infotmation for data visualization: datasets, labels, colors, additional texts (percentage).
+     */
+    getAnswersData() {
+        const _super = Object.create(null, {
+            getAnswersData: { get: () => super.getAnswersData }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.showGrouped) {
+                return _super.getAnswersData.call(this);
+            }
+            const answersData = yield this.getGroupedDateAnswersData();
+            const continuousValues = this.getContinuousValues();
+            if (continuousValues.length) {
+                let start = continuousValues[0].continuous;
+                const end = continuousValues[continuousValues.length - 1].continuous;
+                const intervalsMode = this.intervalsMode === "auto" ? getBestIntervalMode(start, end) : this.intervalsMode;
+                if (intervalsMode === "years" && this.showGrouped) {
+                    answersData.labelsTitle = localization.getString("groupedYearsAxisTitle");
+                }
+            }
+            this.onAnswersDataReady.fire(this, answersData);
+            return answersData;
+        });
     }
     getValueType() {
         return this.valueType;
@@ -2664,7 +3192,7 @@ class AlternativeVisualizersWrapper extends VisualizerBase {
         }
     }
     constructor(visualizers, question, data, options) {
-        super(question, data, options);
+        super(question, data, options, "alternative");
         this.visualizers = visualizers;
         this.visualizersWithSelection = [];
         this.onAfterVisualizerRenderCallback = () => {
@@ -2690,12 +3218,14 @@ class AlternativeVisualizersWrapper extends VisualizerBase {
                 this.visualizersWithSelection.push(visualizer);
             }
         });
-        this.registerToolbarItem("changeVisualizer", () => this.visualizerSelector = DocumentHelper.createSelector(this.visualizers.map((visualizer) => {
-            return {
-                value: visualizer.type,
-                text: localization.getString("visualizer_" + visualizer.type),
-            };
-        }), (option) => this.visualizer.type === option.value, (e) => this.setVisualizer(e.target.value)), 0);
+        if (this.options.allowChangeVisualizerType !== false) {
+            this.registerToolbarItem("changeVisualizer", () => this.visualizerSelector = DocumentHelper.createSelector(this.visualizers.map((visualizer) => {
+                return {
+                    value: visualizer.type,
+                    text: localization.getString("visualizer_" + visualizer.type),
+                };
+            }), (option) => this.visualizer.type === option.value, (e) => this.setVisualizer(e.target.value)), 0);
+        }
         this.visualizer = visualizers[0];
         this.visualizer.onAfterRender.add(this.onAfterVisualizerRenderCallback);
         this.visualizer.onStateChanged.add(this.onVisualizerStateChangedCallback);
@@ -9775,6 +10305,50 @@ class MuuriLayoutEngine extends LayoutEngine {
     }
 }
 
+class VisualizationPanelDynamic extends VisualizerBase {
+    constructor(question, data, options = {}, name) {
+        super(question, data, options, name || "panelDynamic");
+        this._contentVisualizer = undefined;
+        this.onAfterRenderPanelCallback = () => {
+            this.afterRender(this.contentContainer);
+        };
+        this.loadingData = false;
+        var options = Object.assign({}, options);
+        options.allowHideQuestions = false;
+        options.allowDynamicLayout = false;
+        options.dataProvider = this.dataProvider;
+        options.dataPath = this.dataNames[0];
+        this._contentVisualizer = new VisualizationPanel(this.getQuestions(), [], options, undefined, false);
+        this._contentVisualizer.onAfterRender.add(this.onAfterRenderPanelCallback);
+    }
+    get contentVisualizer() {
+        return this._contentVisualizer;
+    }
+    setLocale(newLocale) {
+        super.setLocale(newLocale);
+        this._contentVisualizer.locale = newLocale;
+    }
+    resetFilter() {
+        this.contentVisualizer.resetFilter();
+    }
+    getQuestions() {
+        const paneldynamic = this.question;
+        return paneldynamic.template.questions;
+    }
+    destroyContent(container) {
+        this._contentVisualizer.clear();
+        super.destroyContent(this.contentContainer);
+    }
+    renderContent(container) {
+        this._contentVisualizer.render(container);
+    }
+    destroy() {
+        super.destroy();
+        this._contentVisualizer.onAfterRender.remove(this.onAfterRenderPanelCallback);
+    }
+}
+VisualizationManager.registerVisualizer("paneldynamic", VisualizationPanelDynamic);
+
 const questionElementClassName = "sa-question";
 const questionLayoutedElementClassName = "sa-question-layouted";
 if (!!document) {
@@ -9807,7 +10381,7 @@ class VisualizationPanel extends VisualizerBase {
         this.renderedQuestionsCount = 0;
         this.onAfterRenderQuestionCallback = (sender, options) => {
             this.renderedQuestionsCount++;
-            if (this.renderedQuestionsCount == this.questions.length) {
+            if (this.renderedQuestionsCount == this.visibleElements.length) {
                 this.renderedQuestionsCount = 0;
                 this.layoutEngine.update();
                 this.afterRender(this.contentContainer);
@@ -9886,7 +10460,7 @@ class VisualizationPanel extends VisualizerBase {
             options.layoutEngine ||
                 new MuuriLayoutEngine(this.allowDynamicLayout, "." + questionLayoutedElementClassName, this.allowDragDrop);
         this._layoutEngine.onMoveCallback = (order) => this.reorderVisibleElements(order);
-        this.showToolbar = true;
+        this.showToolbar = isRoot;
         if (this.options.survey) {
             localization.currentLocale = this.options.survey.locale;
         }
@@ -9903,11 +10477,7 @@ class VisualizationPanel extends VisualizerBase {
         if (this.supportSelection !== false) {
             this.registerToolbarItem("resetFilter", () => {
                 return DocumentHelper.createButton(() => {
-                    this.visualizers.forEach((visualizer) => {
-                        if (visualizer instanceof SelectBase || visualizer instanceof AlternativeVisualizersWrapper) {
-                            visualizer.setSelection(undefined);
-                        }
-                    });
+                    this.resetFilter();
                 }, localization.getString("resetFilter"));
             }, 900);
         }
@@ -9967,6 +10537,18 @@ class VisualizationPanel extends VisualizerBase {
             });
         }
     }
+    resetFilter() {
+        var _a;
+        (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.resetFilter();
+        this.visualizers.forEach((visualizer) => {
+            if (visualizer instanceof SelectBase || visualizer instanceof AlternativeVisualizersWrapper) {
+                visualizer.setSelection(undefined);
+            }
+            if (visualizer instanceof VisualizationPanelDynamic) {
+                visualizer.resetFilter();
+            }
+        });
+    }
     reorderVisibleElements(order) {
         const newElements = [];
         order.forEach(name => {
@@ -10068,13 +10650,15 @@ class VisualizationPanel extends VisualizerBase {
     buildVisualizers(questions) {
         questions.forEach((question) => {
             let visualizerOptions = Object.assign({}, this.options);
-            let visualizerData = this.surveyData;
+            if (visualizerOptions.dataProvider === undefined) {
+                visualizerOptions.dataProvider = this.dataProvider;
+            }
             let visualizer;
             if (Array.isArray(question)) {
-                visualizer = new (VisualizationManager.getPivotVisualizerConstructor())(question, visualizerData, visualizerOptions, undefined, false);
+                visualizer = new (VisualizationManager.getPivotVisualizerConstructor())(question, [], visualizerOptions, undefined, false);
             }
             else {
-                visualizer = this.createVisualizer(question, visualizerOptions, visualizerData);
+                visualizer = this.createVisualizer(question, visualizerOptions, []);
             }
             if (!visualizer) {
                 return;
@@ -10145,7 +10729,7 @@ class VisualizationPanel extends VisualizerBase {
             question = Array.isArray(question) ? question[0] : question;
             const element = this.getElement(question.name);
             if (!!element) {
-                element.displayName = this.processText(question.title);
+                element.displayName = this.getTitle(question);
             }
         });
         this.visualizers.forEach(v => {
@@ -10192,7 +10776,7 @@ class VisualizationPanel extends VisualizerBase {
             question = Array.isArray(question) ? question[0] : question;
             return {
                 name: question.name,
-                displayName: this.processText(question.title),
+                displayName: this.getTitle(question),
                 isVisible: true,
                 isPublic: true,
             };
@@ -10360,7 +10944,23 @@ class VisualizationPanel extends VisualizerBase {
      * @see IVisualizationPanelOptions.allowSelection
      */
     setFilter(questionName, selectedValue) {
-        this.dataProvider.setFilter(questionName, selectedValue);
+        if (!this.dataPath) {
+            this.dataProvider.setFilter(questionName, selectedValue);
+        }
+        else {
+            if (selectedValue !== undefined && selectedValue !== null) {
+                if (typeof selectedValue === "object" && Object.keys(selectedValue)[0]) {
+                    const seriesValue = Object.keys(selectedValue)[0];
+                    this.dataProvider.setFilter(this.dataPath, { [questionName]: selectedValue[seriesValue], [DataProvider.seriesMarkerKey]: seriesValue });
+                }
+                else {
+                    this.dataProvider.setFilter(this.dataPath, { [questionName]: selectedValue });
+                }
+            }
+            else {
+                this.dataProvider.setFilter(this.dataPath, undefined);
+            }
+        }
     }
     getState() {
         return {
@@ -10449,69 +11049,9 @@ class VisualizationPanel extends VisualizerBase {
     }
 }
 
-class VisualizationPanelDynamic extends VisualizerBase {
-    constructor(question, data, options = {}, name) {
-        super(question, data, options, name || "panelDynamic");
-        this._panelVisualizer = undefined;
-        this.onAfterRenderPanelCallback = () => {
-            this.afterRender(this.contentContainer);
-        };
-        this.loadingData = false;
-        var options = Object.assign({}, options);
-        options.allowDynamicLayout = false;
-        options.dataProvider = undefined;
-        this._panelVisualizer = new VisualizationPanel(this.getQuestions(), [], options, undefined, false);
-        this._panelVisualizer.onAfterRender.add(this.onAfterRenderPanelCallback);
-        this.updateData(data);
-    }
-    setLocale(newLocale) {
-        super.setLocale(newLocale);
-        this._panelVisualizer.locale = newLocale;
-    }
-    get type() {
-        return "panelDynamic";
-    }
-    updatePanelVisualizerData() {
-        let panelData = [];
-        this.data.forEach((dataItem) => {
-            if (dataItem[this.question.name] !== undefined) {
-                panelData = panelData.concat(dataItem[this.question.name]);
-            }
-        });
-        this._panelVisualizer.updateData(panelData);
-    }
-    updateData(data) {
-        super.updateData(data);
-        this.updatePanelVisualizerData();
-    }
-    onDataChanged() {
-        this.updatePanelVisualizerData();
-        super.onDataChanged();
-    }
-    getQuestions() {
-        const paneldynamic = this.question;
-        return paneldynamic.template.questions;
-    }
-    destroyContent(container) {
-        this._panelVisualizer.clear();
-        super.destroyContent(this.contentContainer);
-    }
-    renderContent(container) {
-        this._panelVisualizer.render(container);
-    }
-    destroy() {
-        super.destroy();
-        this._panelVisualizer.onAfterRender.remove(this.onAfterRenderPanelCallback);
-    }
-}
-VisualizationManager.registerVisualizer("paneldynamic", VisualizationPanelDynamic);
-
 class VisualizationMatrixDynamic extends VisualizationPanelDynamic {
-    constructor(question, data, options) {
-        super(question, data, options);
-    }
-    get type() {
-        return "matrixDynamic";
+    constructor(question, data, options, name) {
+        super(question, data, options, name || "matrixDynamic");
     }
     getQuestions() {
         const matrixdynamic = this.question;
@@ -10537,28 +11077,29 @@ function isChoicesArraysEqual(choices1, choices2) {
 class VisualizationMatrixDropdown extends VisualizerBase {
     constructor(question, data, options = {}, name) {
         super(question, data, options, name || "matrixDropdown");
-        this._matrixDropdownVisualizer = undefined;
+        this._contentVisualizer = undefined;
         this.onPanelAfterRenderCallback = () => {
             this.afterRender(this.contentContainer);
         };
         this.loadingData = false;
         this._childOptions = Object.assign({}, options);
         this._childOptions.disableLocaleSwitch = true;
-        this._childOptions.dataProvider = undefined;
         this._childOptions.allowDynamicLayout = false;
         this._childOptions.transposeData = true;
+        this._childOptions.dataProvider = this.dataProvider;
+        this._childOptions.dataPath = this.dataNames[0];
         this._childOptions.seriesValues = question.rows.map((row) => row.value);
         this._childOptions.seriesLabels = question.rows.map((row) => row.text);
+        this.dataProvider.fixDropdownData(this.dataNames);
         if (this.canGroupColumns) {
             var creators = VisualizationManager.getVisualizersByType("matrixdropdown-grouped");
-            this._matrixDropdownVisualizer = new creators[0](this.question, [], this._childOptions);
+            this._contentVisualizer = new creators[0](this.question, [], this._childOptions);
         }
         else {
             const innerQuestions = this.getQuestions();
-            this._matrixDropdownVisualizer = new VisualizationPanel(innerQuestions, [], this._childOptions, undefined, false);
+            this._contentVisualizer = new VisualizationPanel(innerQuestions, [], this._childOptions, undefined, false);
         }
-        this._matrixDropdownVisualizer.onAfterRender.add(this.onPanelAfterRenderCallback);
-        this.updateData(data);
+        this._contentVisualizer.onAfterRender.add(this.onPanelAfterRenderCallback);
     }
     get canGroupColumns() {
         const innerQuestions = this.getQuestions();
@@ -10568,32 +11109,14 @@ class VisualizationMatrixDropdown extends VisualizerBase {
     setLocale(newLocale) {
         super.setLocale(newLocale);
         this._childOptions.seriesLabels = this.question.rows.map((row) => row.text);
-        this._matrixDropdownVisualizer.locale = newLocale;
+        this._contentVisualizer.locale = newLocale;
     }
-    get matrixDropdownVisualizer() {
-        return this._matrixDropdownVisualizer;
-    }
-    updateDropdownVisualizerData() {
-        let panelData = [];
-        this.data.forEach((dataItem) => {
-            let rawDataItem = dataItem[this.question.name];
-            if (!!rawDataItem) {
-                Object.keys(rawDataItem).forEach((key) => {
-                    var nestedDataItem = Object.assign({}, rawDataItem[key]);
-                    nestedDataItem[DataProvider.seriesMarkerKey] = key;
-                    panelData.push(nestedDataItem);
-                });
-            }
-        });
-        this._matrixDropdownVisualizer.updateData(panelData);
+    get contentVisualizer() {
+        return this._contentVisualizer;
     }
     updateData(data) {
         super.updateData(data);
-        this.updateDropdownVisualizerData();
-    }
-    onDataChanged() {
-        this.updateDropdownVisualizerData();
-        super.onDataChanged();
+        this.dataProvider.fixDropdownData(this.dataNames);
     }
     getQuestions() {
         const matrixdropdown = this.question;
@@ -10606,19 +11129,32 @@ class VisualizationMatrixDropdown extends VisualizerBase {
         });
     }
     destroyContent(container) {
-        this._matrixDropdownVisualizer.clear();
+        this._contentVisualizer.clear();
         super.destroyContent(this.contentContainer);
     }
     renderContent(container) {
-        this._matrixDropdownVisualizer.render(container);
+        this._contentVisualizer.render(container);
     }
     destroy() {
         super.destroy();
-        this._matrixDropdownVisualizer.onAfterRender.remove(this.onPanelAfterRenderCallback);
+        this._contentVisualizer.onAfterRender.remove(this.onPanelAfterRenderCallback);
     }
 }
 VisualizationManager.registerVisualizer("matrixdropdown", VisualizationMatrixDropdown);
 
+class VisualizationComposite extends VisualizationPanelDynamic {
+    constructor(question, data, options, name) {
+        super(question, data, options, name || "composite");
+    }
+    getQuestions() {
+        const questionComposite = this.question;
+        const innerQuestions = [];
+        questionComposite.contentPanel.addQuestionsToList(innerQuestions);
+        return innerQuestions;
+    }
+}
+VisualizationManager.registerVisualizer("composite", VisualizationComposite);
+
 var stopWords$3 = [
     "...",
     "a",
@@ -12627,5 +13163,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, 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, VisualizationPanelDynamic as d, VisualizationMatrixDynamic as e, VisualizationMatrixDropdown as f, WordCloud as g, hideEmptyAnswersInData as h, Text as i, StatisticsTableAdapter as j, StatisticsTable as k, StatisticsTableBoolean as l, NpsVisualizerWidget as m, NpsAdapter as n, NpsVisualizer as o, PivotModel as p, defaultStatisticsCalculator as q, 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, VisualizationPanelDynamic as d, VisualizationMatrixDynamic as e, VisualizationMatrixDropdown as f, getBestIntervalMode as g, hideEmptyAnswersInData as h, intervalCalculators as i, VisualizationComposite as j, WordCloud as k, Text as l, StatisticsTableAdapter as m, StatisticsTable as n, StatisticsTableBoolean as o, NpsVisualizerWidget as p, NpsAdapter as q, NpsVisualizer as r, PivotModel as s, textHelper as t, defaultStatisticsCalculator as u };
 //# sourceMappingURL=shared2.mjs.map