survey-analytics 1.11.13 → 1.12.1

package/survey.analytics.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v1.11.13
+ * surveyjs - SurveyJS Dashboard library v1.12.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -34,10 +34,10 @@ var code = "<svg style=\"display:none;\"><symbol viewBox=\"0 0 16 16\" id=\"sa-s
 
 /***/ }),
 
-/***/ "./src/choices-table.scss":
-/*!********************************!*\
-  !*** ./src/choices-table.scss ***!
-  \********************************/
+/***/ "./src/nps.scss":
+/*!**********************!*\
+  !*** ./src/nps.scss ***!
+  \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -47,10 +47,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/nps.scss":
-/*!**********************!*\
-  !*** ./src/nps.scss ***!
-  \**********************/
+/***/ "./src/statistics-table.scss":
+/*!***********************************!*\
+  !*** ./src/statistics-table.scss ***!
+  \***********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -7349,6 +7349,7 @@ var englishStrings = {
     chartType_scatter: "Scatter",
     chartType_gauge: "Gauge",
     chartType_bullet: "Bullet",
+    chartType_line: "Line",
     hideButton: "Hide",
     makePrivateButton: "Make private",
     makePublicButton: "Make public",
@@ -7385,6 +7386,8 @@ var englishStrings = {
     answer: "Answer",
     correctAnswer: "Correct answer: ",
     percent: "Percent",
+    percentage: "Percentage",
+    statistics_chart: "Chart",
     responses: "Responses",
     visualizer_nps: "NPS",
     npsScore: "NPS",
@@ -8390,151 +8393,6 @@ var BooleanModel = /** @class */ (function (_super) {
 
 
 
-/***/ }),
-
-/***/ "./src/choices-table.ts":
-/*!******************************!*\
-  !*** ./src/choices-table.ts ***!
-  \******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ChoicesTable: () => (/* binding */ ChoicesTable),
-/* harmony export */   ChoicesTableAdapter: () => (/* binding */ ChoicesTableAdapter)
-/* harmony export */ });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/utils/helpers.ts");
-/* harmony import */ var _selectBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectBase */ "./src/selectBase.ts");
-/* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./localizationManager */ "./src/localizationManager.ts");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ "./src/utils/index.ts");
-
-
-
-
-var styles = __webpack_require__(/*! ./choices-table.scss */ "./src/choices-table.scss");
-var ChoicesTableAdapter = /** @class */ (function () {
-    function ChoicesTableAdapter(model) {
-        this.model = model;
-    }
-    ChoicesTableAdapter.prototype.create = function (container) {
-        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
-            var _a, datasets, labels, colors, texts, seriesLabels, hasSeries, emptyTextNode;
-            var _this = this;
-            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, this.model.getAnswersData()];
-                    case 1:
-                        _a = _b.sent(), datasets = _a.datasets, labels = _a.labels, colors = _a.colors, texts = _a.texts, seriesLabels = _a.seriesLabels;
-                        hasSeries = seriesLabels.length > 1;
-                        emptyTextNode = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("p", "", {
-                            innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_2__.localization.getString("noResults"),
-                        });
-                        if (datasets.length === 0 || datasets[0].length === 0) {
-                            container.appendChild(emptyTextNode);
-                            return [2 /*return*/];
-                        }
-                        datasets.forEach(function (data, idx) {
-                            var tableNode = (_utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("table", "sa-choices-table"));
-                            tableNode.style.backgroundColor = _this.model.backgroundColor;
-                            container.appendChild(tableNode);
-                            var headerRow = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("tr");
-                            var labelCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("th", "sa-choices-table__cell-header", {
-                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_2__.localization.getString("answer"),
-                            });
-                            headerRow.appendChild(labelCell);
-                            var sparklineCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("th", "sa-choices-table__cell-header", {
-                                textContent: "",
-                            });
-                            headerRow.appendChild(sparklineCell);
-                            var percentCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("th", "sa-choices-table__cell-header", {
-                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_2__.localization.getString("percent"),
-                            });
-                            headerRow.appendChild(percentCell);
-                            var valueCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("th", "sa-choices-table__cell-header", {
-                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_2__.localization.getString("responses"),
-                            });
-                            headerRow.appendChild(valueCell);
-                            tableNode.appendChild(headerRow);
-                            data.forEach(function (rowData, index) {
-                                var row = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("tr");
-                                var labelCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("td", "sa-choices-table__cell", {
-                                    textContent: labels[index],
-                                });
-                                row.appendChild(labelCell);
-                                var sparklineCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("td", "sa-choices-table__cell");
-                                var outerBar = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("div", "sa-choices-sparkline");
-                                var innerBar = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("div", "sa-choices-sparkline-value");
-                                innerBar.style.width = texts[idx][index] + "%";
-                                outerBar.appendChild(innerBar);
-                                sparklineCell.appendChild(outerBar);
-                                row.appendChild(sparklineCell);
-                                var percentCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("td", "sa-choices-table__cell sa-choices-table__cell-value", {
-                                    textContent: "" + texts[idx][index] + "%",
-                                });
-                                row.appendChild(percentCell);
-                                var valueCell = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("td", "sa-choices-table__cell sa-choices-table__cell-value", {
-                                    textContent: rowData,
-                                });
-                                row.appendChild(valueCell);
-                                tableNode.appendChild(row);
-                            });
-                            container.className = "sa-choices-table__container";
-                            container.appendChild(tableNode);
-                        });
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    ChoicesTableAdapter.prototype.destroy = function (node) {
-        node.innerHTML = "";
-    };
-    return ChoicesTableAdapter;
-}());
-
-var ChoicesTable = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ChoicesTable, _super);
-    function ChoicesTable(question, data, options, name) {
-        var _this = _super.call(this, question, data, options, name || "choices") || this;
-        _this._choicesTableAdapter = new ChoicesTableAdapter(_this);
-        _this.answersOrder = "asc";
-        _this.showPercentages = true;
-        return _this;
-    }
-    ChoicesTable.prototype.destroyContent = function (container) {
-        this._choicesTableAdapter.destroy(container);
-        _super.prototype.destroyContent.call(this, container);
-    };
-    ChoicesTable.prototype.renderContentAsync = function (container) {
-        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
-            var tableNode;
-            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        tableNode = _utils__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("div");
-                        return [4 /*yield*/, this._choicesTableAdapter.create(tableNode)];
-                    case 1:
-                        _a.sent();
-                        container.innerHTML = "";
-                        container.appendChild(tableNode);
-                        return [2 /*return*/, container];
-                }
-            });
-        });
-    };
-    ChoicesTable.prototype.destroy = function () {
-        this._choicesTableAdapter.destroy(this.contentContainer);
-        _super.prototype.destroy.call(this);
-    };
-    return ChoicesTable;
-}(_selectBase__WEBPACK_IMPORTED_MODULE_1__.SelectBase));
-
-// VisualizationManager.registerVisualizer("radiogroup", ChoicesTable);
-// VisualizationManager.registerVisualizer("dropdown", ChoicesTable);
-// VisualizationManager.registerVisualizer("checkbox", ChoicesTable);
-
-
 /***/ }),
 
 /***/ "./src/dataProvider.ts":
@@ -9816,11 +9674,11 @@ var HistogramPlotly = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         chartNode = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
+                        container.innerHTML = "";
+                        container.appendChild(chartNode);
                         return [4 /*yield*/, this._chartAdapter.create(chartNode)];
                     case 1:
                         _a.sent();
-                        container.innerHTML = "";
-                        container.appendChild(chartNode);
                         return [2 /*return*/, container];
                 }
             });
@@ -9843,7 +9701,7 @@ var HistogramPlotly = /** @class */ (function (_super) {
     HistogramPlotly.prototype.getValueType = function () {
         return this.valueType;
     };
-    HistogramPlotly.types = ["vbar", "bar", "scatter"];
+    HistogramPlotly.types = ["vbar", "bar"];
     return HistogramPlotly;
 }(_histogram__WEBPACK_IMPORTED_MODULE_2__.HistogramModel));
 
@@ -9936,11 +9794,11 @@ var MatrixPlotly = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         chartNode = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
+                        container.innerHTML = "";
+                        container.appendChild(chartNode);
                         return [4 /*yield*/, this._chartAdapter.create(chartNode)];
                     case 1:
                         _a.sent();
-                        container.innerHTML = "";
-                        container.appendChild(chartNode);
                         return [2 /*return*/, container];
                 }
             });
@@ -9996,11 +9854,11 @@ var MatrixDropdownGroupedPlotly = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         chartNode = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
+                        container.innerHTML = "";
+                        container.appendChild(chartNode);
                         return [4 /*yield*/, this._chartAdapter.create(chartNode)];
                     case 1:
                         _a.sent();
-                        container.innerHTML = "";
-                        container.appendChild(chartNode);
                         return [2 /*return*/, container];
                 }
             });
@@ -10116,7 +9974,7 @@ var PlotlyGaugeAdapter = /** @class */ (function () {
     });
     PlotlyGaugeAdapter.prototype.create = function (chartNode) {
         return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
-            var question, _a, level, minValue, maxValue, rateValues, colors, data, chartMargin, layout, config, options;
+            var question, _a, level, minValue, maxValue, rateValues, colors, data, chartMargin, layout, config, options, plot;
             var _this = this;
             return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_b) {
                 switch (_b.label) {
@@ -10197,7 +10055,9 @@ var PlotlyGaugeAdapter = /** @class */ (function () {
                             config: config,
                         };
                         _setup__WEBPACK_IMPORTED_MODULE_5__.PlotlySetup.onPlotCreating.fire(this.model, options);
-                        return [2 /*return*/, plotly_js_dist_min__WEBPACK_IMPORTED_MODULE_6___default().newPlot(chartNode, options.data, options.layout, options.config)];
+                        plot = plotly_js_dist_min__WEBPACK_IMPORTED_MODULE_6___default().newPlot(chartNode, options.data, options.layout, options.config);
+                        // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
+                        return [2 /*return*/, plot];
                 }
             });
         });
@@ -10229,11 +10089,11 @@ var GaugePlotly = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         chartNode = _utils_index__WEBPACK_IMPORTED_MODULE_3__.DocumentHelper.createElement("div");
+                        container.innerHTML = "";
+                        container.appendChild(chartNode);
                         return [4 /*yield*/, this._chartAdapter.create(chartNode)];
                     case 1:
                         _a.sent();
-                        container.innerHTML = "";
-                        container.appendChild(chartNode);
                         return [2 /*return*/, container];
                 }
             });
@@ -10379,6 +10239,7 @@ var PlotlyChartAdapter = /** @class */ (function () {
                             var dragLayer = getDragLayer();
                             dragLayer && (dragLayer.style.cursor = "");
                         });
+                        // setTimeout(() => Plotly.Plots.resize(chartNode), 10);
                         this._chart = plot;
                         return [2 /*return*/, plot];
                 }
@@ -10402,7 +10263,7 @@ var SelectBasePlotly = /** @class */ (function (_super) {
             _this.chartTypes.push("stackedbar");
         }
         if (options.allowExperimentalFeatures) {
-            _this.chartTypes.splice(1, 0, "vbar");
+            // this.chartTypes.splice(1, 0, "vbar");
         }
         _this._chartType = _this.chartTypes[0];
         if (_this.chartTypes.indexOf(options.defaultChartType) !== -1) {
@@ -10422,11 +10283,11 @@ var SelectBasePlotly = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         chartNode = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
+                        container.innerHTML = "";
+                        container.appendChild(chartNode);
                         return [4 /*yield*/, this._chartAdapter.create(chartNode)];
                     case 1:
                         _a.sent();
-                        container.innerHTML = "";
-                        container.appendChild(chartNode);
                         return [2 /*return*/, container];
                 }
             });
@@ -10446,7 +10307,7 @@ var SelectBasePlotly = /** @class */ (function (_super) {
         }
         return statistics;
     };
-    SelectBasePlotly.types = ["bar", "pie", "doughnut", "scatter"];
+    SelectBasePlotly.types = ["bar", "vbar", "pie", "doughnut"];
     SelectBasePlotly.displayModeBar = undefined;
     return SelectBasePlotly;
 }(_selectBase__WEBPACK_IMPORTED_MODULE_2__.SelectBase));
@@ -10664,6 +10525,20 @@ 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") {
+            labels = [].concat(labels).reverse();
+            colors = [].concat(colors.slice(0, labels.length)).reverse();
+            var ts_1 = [];
+            texts.forEach(function (text) {
+                ts_1.push([].concat(text).reverse());
+            });
+            texts = ts_1;
+            var ds_1 = [];
+            datasets.forEach(function (dataset) {
+                ds_1.push([].concat(dataset).reverse());
+            });
+            datasets = ds_1;
+        }
         var traces = [];
         var hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
         var layout = {
@@ -10685,10 +10560,10 @@ var PlotlySetup = /** @class */ (function () {
             showlegend: false,
         };
         var traceConfig = {
-            type: "bar",
+            type: model.chartType === "line" ? "line" : "bar",
             customdata: hasSeries ? seriesLabels : labels,
             hoverinfo: "x+y",
-            mode: "markers",
+            mode: model.chartType === "line" ? "lines+markers" : "markers",
             textposition: "none",
             width: 0.5,
             bargap: 0.5,
@@ -10721,6 +10596,7 @@ var PlotlySetup = /** @class */ (function () {
         }
         if (!model.getValueType || model.getValueType() != "date") {
             layout.xaxis = {
+                automargin: true,
                 type: "category",
             };
         }
@@ -10812,6 +10688,7 @@ var PlotlySetup = /** @class */ (function () {
     PlotlySetup.setups = {
         bar: PlotlySetup.setupBar,
         vbar: PlotlySetup.setupVBar,
+        line: PlotlySetup.setupVBar,
         stackedbar: PlotlySetup.setupBar,
         doughnut: PlotlySetup.setupPie,
         pie: PlotlySetup.setupPie,
@@ -11057,7 +10934,7 @@ var SelectBase = /** @class */ (function (_super) {
             this.emptyAnswersBtn.innerText = this._hideEmptyAnswers
                 ? _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("showEmptyAnswers")
                 : _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("hideEmptyAnswers");
-            if (this.chartType == "bar" || this.chartType == "vbar" || this.chartType == "scatter") {
+            if (this.chartType == "bar" || this.chartType == "vbar" || this.chartType == "line" || this.chartType == "scatter") {
                 this.emptyAnswersBtn.style.display = "inline";
             }
             else {
@@ -11082,6 +10959,7 @@ var SelectBase = /** @class */ (function (_super) {
         if (!!this.choicesOrderSelector) {
             if (this.chartType == "bar" ||
                 this.chartType == "vbar" ||
+                this.chartType == "line" ||
                 this.chartType == "scatter" ||
                 ((this.chartType == "pie" || this.chartType == "doughnut") &&
                     this.topN > 0)) {
@@ -11500,6 +11378,152 @@ var SelectBase = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/statistics-table.ts":
+/*!*********************************!*\
+  !*** ./src/statistics-table.ts ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StatisticsTable: () => (/* binding */ StatisticsTable),
+/* harmony export */   StatisticsTableAdapter: () => (/* binding */ StatisticsTableAdapter)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/utils/helpers.ts");
+/* harmony import */ var _selectBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectBase */ "./src/selectBase.ts");
+/* harmony import */ var _visualizationManager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./visualizationManager */ "./src/visualizationManager.ts");
+/* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./localizationManager */ "./src/localizationManager.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ "./src/utils/index.ts");
+
+
+
+
+
+var styles = __webpack_require__(/*! ./statistics-table.scss */ "./src/statistics-table.scss");
+var StatisticsTableAdapter = /** @class */ (function () {
+    function StatisticsTableAdapter(model) {
+        this.model = model;
+    }
+    StatisticsTableAdapter.prototype.create = function (container) {
+        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
+            var _a, datasets, labels, colors, texts, seriesLabels, hasSeries, emptyTextNode;
+            var _this = this;
+            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, this.model.getAnswersData()];
+                    case 1:
+                        _a = _b.sent(), datasets = _a.datasets, labels = _a.labels, colors = _a.colors, texts = _a.texts, seriesLabels = _a.seriesLabels;
+                        hasSeries = seriesLabels.length > 1;
+                        emptyTextNode = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("p", "", {
+                            innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("noResults"),
+                        });
+                        if (datasets.length === 0 || datasets[0].length === 0) {
+                            container.appendChild(emptyTextNode);
+                            return [2 /*return*/];
+                        }
+                        datasets.forEach(function (data, idx) {
+                            var tableNode = (_utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("table", "sa-statistics-table"));
+                            tableNode.style.backgroundColor = _this.model.backgroundColor;
+                            container.appendChild(tableNode);
+                            var headerRow = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("tr");
+                            var labelCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("th", "sa-statistics-table__cell-header", {
+                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("answer"),
+                            });
+                            headerRow.appendChild(labelCell);
+                            var sparklineCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("th", "sa-statistics-table__cell-header", {
+                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("statistics_chart"),
+                            });
+                            headerRow.appendChild(sparklineCell);
+                            var percentCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("th", "sa-statistics-table__cell-header", {
+                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("percentage"),
+                            });
+                            headerRow.appendChild(percentCell);
+                            var valueCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("th", "sa-statistics-table__cell-header", {
+                                textContent: _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("responses"),
+                            });
+                            headerRow.appendChild(valueCell);
+                            tableNode.appendChild(headerRow);
+                            for (var index = data.length - 1; index >= 0; index--) {
+                                var row = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("tr");
+                                var labelCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("td", "sa-statistics-table__cell", {
+                                    textContent: labels[index],
+                                });
+                                row.appendChild(labelCell);
+                                var sparklineCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("td", "sa-statistics-table__cell");
+                                var outerBar = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-choices-sparkline");
+                                var innerBar = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-choices-sparkline-value");
+                                innerBar.style.width = texts[idx][index] + "%";
+                                outerBar.appendChild(innerBar);
+                                sparklineCell.appendChild(outerBar);
+                                row.appendChild(sparklineCell);
+                                var percentCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("td", "sa-statistics-table__cell sa-statistics-table__cell-value", {
+                                    textContent: "" + texts[idx][index] + "%",
+                                });
+                                row.appendChild(percentCell);
+                                var valueCell = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("td", "sa-statistics-table__cell sa-statistics-table__cell-value", {
+                                    textContent: data[index],
+                                });
+                                row.appendChild(valueCell);
+                                tableNode.appendChild(row);
+                            }
+                            container.className = "sa-statistics-table__container";
+                            container.appendChild(tableNode);
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    StatisticsTableAdapter.prototype.destroy = function (node) {
+        node.innerHTML = "";
+    };
+    return StatisticsTableAdapter;
+}());
+
+var StatisticsTable = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(StatisticsTable, _super);
+    function StatisticsTable(question, data, options, name) {
+        var _this = _super.call(this, question, data, options, name || "choices") || this;
+        _this._statisticsTableAdapter = new StatisticsTableAdapter(_this);
+        _this.showPercentages = true;
+        return _this;
+    }
+    StatisticsTable.prototype.destroyContent = function (container) {
+        this._statisticsTableAdapter.destroy(container);
+        _super.prototype.destroyContent.call(this, container);
+    };
+    StatisticsTable.prototype.renderContentAsync = function (container) {
+        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
+            var tableNode;
+            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        tableNode = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
+                        return [4 /*yield*/, this._statisticsTableAdapter.create(tableNode)];
+                    case 1:
+                        _a.sent();
+                        container.innerHTML = "";
+                        container.appendChild(tableNode);
+                        return [2 /*return*/, container];
+                }
+            });
+        });
+    };
+    StatisticsTable.prototype.destroy = function () {
+        this._statisticsTableAdapter.destroy(this.contentContainer);
+        _super.prototype.destroy.call(this);
+    };
+    return StatisticsTable;
+}(_selectBase__WEBPACK_IMPORTED_MODULE_1__.SelectBase));
+
+_visualizationManager__WEBPACK_IMPORTED_MODULE_2__.VisualizationManager.registerVisualizer("radiogroup", StatisticsTable);
+_visualizationManager__WEBPACK_IMPORTED_MODULE_2__.VisualizationManager.registerVisualizer("dropdown", StatisticsTable);
+_visualizationManager__WEBPACK_IMPORTED_MODULE_2__.VisualizationManager.registerVisualizer("checkbox", StatisticsTable);
+
+
 /***/ }),
 
 /***/ "./src/text.ts":
@@ -15593,24 +15617,32 @@ var WordCloudWidget = /** @class */ (function () {
         var _this = this;
         this._renderedTarget = target;
         var cloudElement = document.createElement("div");
+        document.body.appendChild(cloudElement);
+        cloudElement.style.position = "fixed";
+        cloudElement.style.top = "-1000px";
+        cloudElement.style.width = "0";
+        cloudElement.style.height = "0";
+        var startPoint = {
+            x: cloudElement.offsetWidth / 2,
+            y: cloudElement.offsetHeight / 2
+        };
+        var _a = this.arrangeWords(cloudElement, startPoint), yMin = _a[0], yMax = _a[1];
+        this._placedWords.forEach(function (wordInfo) {
+            wordInfo.element.style.top = wordInfo.top - yMin + _this._options.padding + "px";
+        });
+        cloudElement.remove();
+        cloudElement.style.top = "auto";
+        cloudElement.style.left = "50%";
         cloudElement.className = "sa-visualizer-wordcloud";
         cloudElement.style.position = "relative";
-        target.appendChild(cloudElement);
         if (this._options.maxHeight > 0) {
             cloudElement.style.height = this._options.maxHeight + "px";
             cloudElement.style.overflow = "auto";
         }
-        var startPoint = {
-            x: cloudElement.offsetWidth / 2,
-            y: cloudElement.offsetHeight / 2
-        };
-        var _a = this.arrangeWords(cloudElement, startPoint), yMin = _a[0], yMax = _a[1];
         if (this._options.maxHeight == 0) {
             cloudElement.style.height = yMax - yMin + this._options.padding * 2 + "px";
         }
-        this._placedWords.forEach(function (wordInfo) {
-            wordInfo.element.style.top = wordInfo.top - yMin + _this._options.padding + "px";
-        });
+        target.appendChild(cloudElement);
     };
     WordCloudWidget.prototype.dispose = function () {
         if (!!this._renderedTarget) {
@@ -15653,7 +15685,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-// import WordCloudLib from "wordcloud";
 
 var WordCloudAdapter = /** @class */ (function () {
     function WordCloudAdapter(model) {
@@ -15666,54 +15697,6 @@ var WordCloudAdapter = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    WordCloudAdapter.prototype.createWordCloud2 = function (node) {
-        return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
-            var data, colors, canvasNode, emptyTextNode, config, options;
-            var _this = this;
-            return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__generator)(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.model.getCalculatedValues()];
-                    case 1:
-                        data = _a.sent();
-                        colors = this.model.getColors();
-                        canvasNode = (_utils__WEBPACK_IMPORTED_MODULE_5__.DocumentHelper.createElement("canvas", ""));
-                        emptyTextNode = _utils__WEBPACK_IMPORTED_MODULE_5__.DocumentHelper.createElement("p", "", {
-                            innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_6__.localization.getString("noResults"),
-                        });
-                        if (data.length === 0) {
-                            node.appendChild(emptyTextNode);
-                            return [2 /*return*/];
-                        }
-                        node.appendChild(canvasNode);
-                        config = {
-                            list: data,
-                            weightFactor: WordCloudAdapter.weightFactor,
-                            abortThreshold: WordCloudAdapter.abortThreshold,
-                            drawOutOfBound: WordCloudAdapter.drawOutOfBound,
-                            shrinkToFit: WordCloudAdapter.shrinkToFit,
-                            fontFamily: "Segoe UI Bold, sans-serif",
-                            color: function (word, weight) {
-                                return _this.model.getRandomColor();
-                            },
-                            rotateRatio: 0.5,
-                            rotationSteps: 2,
-                            backgroundColor: this.model.backgroundColor,
-                            click: function (item) {
-                                // eslint-disable-next-line no-console
-                                console.log(item[0] + ": " + item[1]);
-                            },
-                        };
-                        options = {
-                            canvas: canvasNode,
-                            config: config
-                        };
-                        WordCloudAdapter.onWordcloudCreating.fire(this.model, options);
-                        // this._wordcloud = WordCloudLib(options.canvas, options.config as any);
-                        return [2 /*return*/, this._wordcloud];
-                }
-            });
-        });
-    };
     WordCloudAdapter.prototype.create = function (element) {
         return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function () {
             var data, colors, emptyTextNode, config, options;
@@ -15968,8 +15951,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   AlternativeVisualizersWrapper: () => (/* reexport safe */ _alternativeVizualizersWrapper__WEBPACK_IMPORTED_MODULE_25__.AlternativeVisualizersWrapper),
 /* harmony export */   BooleanModel: () => (/* reexport safe */ _boolean__WEBPACK_IMPORTED_MODULE_17__.BooleanModel),
 /* harmony export */   BooleanPlotly: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_26__.BooleanPlotly),
-/* harmony export */   ChoicesTable: () => (/* reexport safe */ _choices_table__WEBPACK_IMPORTED_MODULE_30__.ChoicesTable),
-/* harmony export */   ChoicesTableAdapter: () => (/* reexport safe */ _choices_table__WEBPACK_IMPORTED_MODULE_30__.ChoicesTableAdapter),
 /* harmony export */   DataProvider: () => (/* reexport safe */ _dataProvider__WEBPACK_IMPORTED_MODULE_12__.DataProvider),
 /* harmony export */   DocumentHelper: () => (/* reexport safe */ _utils_index__WEBPACK_IMPORTED_MODULE_32__.DocumentHelper),
 /* harmony export */   GaugePlotly: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_26__.GaugePlotly),
@@ -15989,6 +15970,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   RankingPlotly: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_26__.RankingPlotly),
 /* harmony export */   SelectBase: () => (/* reexport safe */ _selectBase__WEBPACK_IMPORTED_MODULE_15__.SelectBase),
 /* harmony export */   SelectBasePlotly: () => (/* reexport safe */ _plotly_index__WEBPACK_IMPORTED_MODULE_26__.SelectBasePlotly),
+/* harmony export */   StatisticsTable: () => (/* reexport safe */ _statistics_table__WEBPACK_IMPORTED_MODULE_30__.StatisticsTable),
+/* harmony export */   StatisticsTableAdapter: () => (/* reexport safe */ _statistics_table__WEBPACK_IMPORTED_MODULE_30__.StatisticsTableAdapter),
 /* harmony export */   Text: () => (/* reexport safe */ _text__WEBPACK_IMPORTED_MODULE_29__.Text),
 /* harmony export */   TextTableAdapter: () => (/* reexport safe */ _text__WEBPACK_IMPORTED_MODULE_29__.TextTableAdapter),
 /* harmony export */   VisualizationManager: () => (/* reexport safe */ _visualizationManager__WEBPACK_IMPORTED_MODULE_20__.VisualizationManager),
@@ -16036,7 +16019,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordcloud_wordcloud__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../wordcloud/wordcloud */ "./src/wordcloud/wordcloud.ts");
 /* harmony import */ var _wordcloud_stopwords_index__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../wordcloud/stopwords/index */ "./src/wordcloud/stopwords/index.ts");
 /* harmony import */ var _text__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../text */ "./src/text.ts");
-/* harmony import */ var _choices_table__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../choices-table */ "./src/choices-table.ts");
+/* harmony import */ var _statistics_table__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../statistics-table */ "./src/statistics-table.ts");
 /* harmony import */ var _nps__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../nps */ "./src/nps.ts");
 /* harmony import */ var _utils_index__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../utils/index */ "./src/utils/index.ts");