survey-analytics 2.2.2 → 2.2.3

package/fesm/survey.analytics.core.mjs

@@ -1,10 +1,10 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.2.2
+ * surveyjs - SurveyJS Dashboard library v2.2.3
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
 export { D as DocumentHelper, l as localization, s as surveyStrings } from './shared.mjs';
-export { A as AlternativeVisualizersWrapper, B as BooleanModel, D as DataProvider, H as HistogramModel, M as Matrix, n as NpsAdapter, o as NpsVisualizer, m as NpsVisualizerWidget, N as NumberModel, P as PostponeHelper, S as SelectBase, l as StatisticsTable, k as StatisticsTableAdapter, j as Text, T as TextTableAdapter, b as VisualizationManager, g as VisualizationMatrixDropdown, f as VisualizationMatrixDynamic, c as VisualizationPanel, e as VisualizationPanelDynamic, a as VisualizerBase, V as VisualizerFactory, i as WordCloud, W as WordCloudAdapter, d as defaultStatisticsCalculator, h as hideEmptyAnswersInData, t as textHelper } from './shared2.mjs';
+export { A as AlternativeVisualizersWrapper, B as BooleanModel, D as DataProvider, H as HistogramModel, M as Matrix, n as NpsAdapter, o as NpsVisualizer, m as NpsVisualizerWidget, N as NumberModel, p as PivotModel, P as PostponeHelper, S as SelectBase, l as StatisticsTable, k as StatisticsTableAdapter, j as Text, T as TextTableAdapter, b as VisualizationManager, g as VisualizationMatrixDropdown, f as VisualizationMatrixDynamic, c as VisualizationPanel, e as VisualizationPanelDynamic, a as VisualizerBase, V as VisualizerFactory, i as WordCloud, W as WordCloudAdapter, d as defaultStatisticsCalculator, h as hideEmptyAnswersInData, t as textHelper } from './shared2.mjs';
 import 'survey-core';
 //# sourceMappingURL=survey.analytics.core.mjs.map

package/fesm/survey.analytics.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.2.2
+ * surveyjs - SurveyJS Dashboard library v2.2.3
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -7,7 +7,7 @@
 import { Event, ItemValue } from 'survey-core';
 import { l as localization, D as DocumentHelper, a as DataHelper } from './shared.mjs';
 export { s as surveyStrings } from './shared.mjs';
-import { b as VisualizationManager, S as SelectBase, _ as __awaiter, M as Matrix, B as BooleanModel, d as defaultStatisticsCalculator, H as HistogramModel, N as NumberModel } from './shared2.mjs';
+import { b as VisualizationManager, S as SelectBase, _ as __awaiter, M as Matrix, B as BooleanModel, d as defaultStatisticsCalculator, H as HistogramModel, N as NumberModel, p as PivotModel } from './shared2.mjs';
 export { A as AlternativeVisualizersWrapper, D as DataProvider, n as NpsAdapter, o as NpsVisualizer, m as NpsVisualizerWidget, P as PostponeHelper, l as StatisticsTable, k as StatisticsTableAdapter, j as Text, T as TextTableAdapter, g as VisualizationMatrixDropdown, f as VisualizationMatrixDynamic, c as VisualizationPanel, e as VisualizationPanelDynamic, a as VisualizerBase, V as VisualizerFactory, i as WordCloud, W as WordCloudAdapter, h as hideEmptyAnswersInData, t as textHelper } from './shared2.mjs';
 import Plotly from 'plotly.js-dist-min';
 
@@ -17,38 +17,44 @@ class PlotlySetup {
     }
     static setupPie(model, answersData) {
         let { datasets, labels, colors, texts, seriesLabels, } = answersData;
-        let traces = [];
         const hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
+        const layoutColumns = 2;
+        let traces = [];
         const traceConfig = {
             type: model.chartType,
-            y: hasSeries ? seriesLabels : labels,
-            text: (hasSeries ? seriesLabels : labels).map((label) => {
+            labels: labels,
+            customdata: labels,
+            text: labels.map((label) => {
                 return PlotlySetup.getTruncatedLabel(label, model.labelTruncateLength);
             }),
-            hoverinfo: "x+y",
-            mode: "markers",
-            marker: {},
+            hoverinfo: "label+value+percent",
+            textposition: "inside",
         };
-        traceConfig.hoverinfo = "label+value+percent";
-        traceConfig.marker.colors = colors;
-        traceConfig.textposition = "inside";
         if (model.chartType === "doughnut") {
             traceConfig.type = "pie";
             traceConfig.hole = 0.4;
         }
         if (!hasSeries) {
+            traceConfig.mode = "markers",
+                traceConfig.marker = { color: colors };
             traceConfig.marker.symbol = "circle";
             traceConfig.marker.size = 16;
         }
         datasets.forEach((dataset, index) => {
-            traces.push(Object.assign({}, traceConfig, {
-                values: dataset,
-                labels: hasSeries ? seriesLabels : labels,
-                customdata: hasSeries ? seriesLabels : labels,
-            }));
+            const isNotEmpty = dataset.some((value) => value != 0);
+            if (isNotEmpty) {
+                traces.push(Object.assign({}, traceConfig, {
+                    values: dataset,
+                    domain: {
+                        column: traces.length % layoutColumns,
+                        row: Math.floor(traces.length / layoutColumns),
+                    },
+                    title: { position: "bottom center", text: seriesLabels[index] }
+                }));
+            }
         });
         const radius = labels.length < 10 ? labels.length * 50 + 100 : 550;
-        const height = radius * Math.round(traces.length / 2) + 25;
+        const height = (radius + 25) * Math.ceil(traces.length / layoutColumns);
         const layout = {
             font: {
                 family: "Segoe UI, sans-serif",
@@ -71,21 +77,7 @@ class PlotlySetup {
         };
         if (hasSeries) {
             layout.annotations = [];
-            labels.forEach((label, index) => {
-                traces[index].title = { position: "bottom center", text: label };
-            });
-            traces = traces.filter(t => !(t.values.length === 1 && t.values[0] === 0));
-            traces.forEach((label, index) => {
-                traces[index].domain = {
-                    column: index % 2,
-                    row: Math.floor(index / 2),
-                };
-            });
-            layout.grid = {
-                rows: Math.round(traces.length / 2),
-                columns: 2,
-            };
-            layout.height = radius * Math.round(traces.length / 2) + 25;
+            layout.grid = { rows: Math.ceil(traces.length / layoutColumns), columns: layoutColumns };
         }
         return { traces, layout, hasSeries };
     }
@@ -94,36 +86,45 @@ class PlotlySetup {
         let topMargin = 30;
         let bottomMargin = 30;
         let { datasets, labels, colors, texts, seriesLabels, } = answersData;
-        const traces = [];
         const hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
-        const yFullTexts = hasSeries ? seriesLabels : labels;
+        const traces = [];
         const traceConfig = {
-            type: model.chartType,
-            y: yFullTexts,
-            text: yFullTexts,
-            customdata: hasSeries ? seriesLabels : labels,
+            type: model.chartType === "line" ? "line" : "bar",
+            y: labels,
+            customdata: labels,
             hoverinfo: "text",
             orientation: "h",
-            mode: "markers",
             textposition: "none",
-            width: 0.5,
-            bargap: 0.5,
-            marker: {},
         };
-        traceConfig.marker.color = colors;
+        if (!hasSeries) {
+            traceConfig.width = 0.5;
+            traceConfig.bargap = 0.5;
+            traceConfig.mode = "markers",
+                traceConfig.marker = { color: colors };
+        }
         datasets.forEach((dataset, index) => {
-            var trace = Object.assign({}, traceConfig, {
+            const traceName = hasSeries ? seriesLabels[index] : labels[index];
+            const percentString = model.showPercentages ? "%" : "";
+            const trace = Object.assign({}, traceConfig, {
                 x: dataset,
+                name: traceName,
+                width: hasSeries && model.chartType !== "stackedbar" ? 0.5 / seriesLabels.length : 0.5,
                 text: texts[index],
-                hovertext: yFullTexts.map((label, labelIndex) => {
-                    return `${texts[index][labelIndex]}, ${label}`;
+                hovertext: labels.map((label, labelIndex) => {
+                    if (model.showOnlyPercentages) {
+                        return `${texts[index][labelIndex]}${percentString}`;
+                    }
+                    else {
+                        return hasSeries ? `${traceName} : ${label}, ${texts[index][labelIndex]}${percentString}` : `${texts[index][labelIndex]}${percentString}, ${label}`;
+                    }
                 }),
             });
             if (model.showPercentages) {
                 let texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
                 trace.textposition = "inside";
                 trace.texttemplate = texttemplate;
-                trace.bargap = 0.1;
+                trace.width = hasSeries && model.chartType !== "stackedbar" ? 0.7 / seriesLabels.length : 0.9;
+                trace.bargap = hasSeries && model.chartType !== "stackedbar" ? 0.3 / seriesLabels.length : 0.1;
             }
             traces.push(trace);
         });
@@ -143,60 +144,49 @@ class PlotlySetup {
             },
             colorway: colors,
             hovermode: "closest",
+            plot_bgcolor: model.backgroundColor,
+            paper_bgcolor: model.backgroundColor,
+            showlegend: hasSeries,
+            barmode: hasSeries && model.chartType == "stackedbar" ? "stack" : "group",
+            xaxis: {
+                rangemode: "nonnegative",
+                automargin: true,
+            },
             yaxis: {
                 automargin: true,
                 type: "category",
                 orientation: "h",
                 tickmode: "array",
-                tickvals: yFullTexts,
-                ticktext: yFullTexts.map((label) => {
+                tickvals: labels,
+                ticktext: labels.map((label) => {
                     return PlotlySetup.getTruncatedLabel(label, model.labelTruncateLength) + "  ";
                 }),
             },
-            xaxis: {
-                rangemode: "nonnegative",
-                automargin: true,
-                // dtick: 1
-            },
-            plot_bgcolor: model.backgroundColor,
-            paper_bgcolor: model.backgroundColor,
-            showlegend: false,
         };
-        if (hasSeries) {
-            layout.showlegend = true;
-            if (model.chartType == "stackedbar") {
-                layout.barmode = "stack";
-                layout.height =
-                    (seriesLabels.length + 1) * lineHeight +
-                        topMargin +
-                        bottomMargin;
-            }
-            else {
-                layout.height =
-                    (labels.length + 1) * lineHeight * seriesLabels.length +
-                        topMargin +
-                        bottomMargin;
-            }
-            labels.forEach((label, index) => {
-                traces[index].marker.color = undefined;
-                traces[index].name = label;
-                if (model.chartType === "stackedbar") {
-                    traces[index].type = "bar";
-                    traces[index].width = 0.5;
-                }
-                else {
-                    traces[index].width =
-                        (model.showPercentages ? 0.7 : 0.5) / traces.length;
-                }
-            });
-            traces.forEach((trace, traceIndex) => {
-                const percentString = model.showPercentages ? "%" : "";
-                traces[traceIndex].hovertext = [];
-                yFullTexts.forEach((yFullText, yFullTextIndex) => {
-                    traces[traceIndex].hovertext.push(`${trace.y[yFullTextIndex]} : ${trace.name}, ${trace.text[yFullTextIndex]}${percentString}`);
-                });
-            });
+        if (hasSeries && model.chartType !== "stackedbar") {
+            layout.height =
+                (labels.length * seriesLabels.length + 1) * lineHeight +
+                    topMargin +
+                    bottomMargin;
         }
+        // labels.forEach((label, index) => {
+        //   traces[index].marker.color = undefined;
+        //   traces[index].name = label;
+        //   if (model.chartType === "stackedbar") {
+        //     traces[index].type = "bar";
+        //     traces[index].width = 0.5;
+        //   } else {
+        //     traces[index].width =
+        //       (model.showPercentages ? 0.7 : 0.5) / traces.length;
+        //   }
+        // });
+        // traces.forEach((trace, traceIndex) => {
+        //   const percentString = model.showPercentages ? "%" : "";
+        //   traces[traceIndex].hovertext = [];
+        //   yFullTexts.forEach((yFullText, yFullTextIndex) => {
+        //     traces[traceIndex].hovertext.push(`${trace.y[yFullTextIndex]} : ${trace.name}, ${trace.text[yFullTextIndex]}${percentString}`);
+        //   });
+        // });
         if (["ar", "fa"].indexOf(localization.currentLocale) !== -1) {
             layout.xaxis.autorange = "reversed";
             layout.yaxis.side = "right";
@@ -213,9 +203,11 @@ class PlotlySetup {
         let topMargin = 30;
         let bottomMargin = 30;
         let { datasets, labels, colors, texts, seriesLabels, } = answersData;
-        if (model.type !== "histogram") {
+        const hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
+        if (model.type !== "histogram" && model.type !== "pivot") {
             labels = [].concat(labels).reverse();
-            colors = [].concat(colors.slice(0, labels.length)).reverse();
+            seriesLabels = [].concat(seriesLabels).reverse();
+            colors = [].concat(colors.slice(0, hasSeries ? seriesLabels.length : labels.length)).reverse();
             const ts = [];
             texts.forEach(text => {
                 ts.push([].concat(text).reverse());
@@ -228,7 +220,37 @@ class PlotlySetup {
             datasets = ds;
         }
         const traces = [];
-        const hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix";
+        const traceConfig = {
+            type: model.chartType === "line" ? "line" : "bar",
+            x: labels,
+            customdata: hasSeries ? seriesLabels : labels,
+            hoverinfo: hasSeries ? undefined : "x+y",
+            orientation: "v",
+            textposition: "none",
+        };
+        if (model.type === "histogram" || !hasSeries) {
+            traceConfig.width = 0.5;
+            traceConfig.bargap = 0.5;
+            traceConfig.mode = "markers",
+                traceConfig.marker = { color: colors };
+        }
+        datasets.forEach((dataset, index) => {
+            var trace = Object.assign({}, traceConfig, {
+                y: dataset,
+                name: hasSeries ? seriesLabels[index] : labels[index],
+                text: texts[index],
+            });
+            if (model.showPercentages) {
+                let texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
+                trace.textposition = "inside";
+                trace.texttemplate = texttemplate;
+                if (!hasSeries) {
+                    trace.width = 0.9;
+                    trace.bargap = 0.1;
+                }
+            }
+            traces.push(trace);
+        });
         const layout = {
             font: {
                 family: "Segoe UI, sans-serif",
@@ -245,34 +267,21 @@ class PlotlySetup {
             hovermode: "closest",
             plot_bgcolor: model.backgroundColor,
             paper_bgcolor: model.backgroundColor,
-            showlegend: false,
-        };
-        const traceConfig = {
-            type: model.chartType === "line" ? "line" : "bar",
-            customdata: hasSeries ? seriesLabels : labels,
-            hoverinfo: "x+y",
-            mode: model.chartType === "line" ? "lines+markers" : "markers",
-            textposition: "none",
-            width: 0.5,
-            bargap: 0.5,
-            marker: {},
+            showlegend: hasSeries,
+            yaxis: {
+                rangemode: "nonnegative",
+                automargin: true,
+            },
+            xaxis: {
+                automargin: true,
+                type: "category",
+                tickmode: "array",
+                tickvals: labels,
+                ticktext: labels.map((label) => {
+                    return PlotlySetup.getTruncatedLabel(label, model.labelTruncateLength) + "  ";
+                }),
+            },
         };
-        traceConfig.marker.color = colors;
-        datasets.forEach((dataset, index) => {
-            var trace = Object.assign({}, traceConfig, {
-                x: labels,
-                y: model.showPercentages ? texts[index].map(y => y / 100) : dataset,
-                text: texts[index],
-            });
-            if (model.showPercentages) {
-                let texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
-                trace.textposition = "inside";
-                trace.texttemplate = texttemplate;
-                trace.width = 0.9;
-                trace.bargap = 0.1;
-            }
-            traces.push(trace);
-        });
         if (model.showPercentages && model.showOnlyPercentages) {
             layout.yaxis = {
                 automargin: true,
@@ -532,20 +541,6 @@ class SelectBasePlotly extends SelectBase {
             this._chartAdapter.update(chartNode);
         }
     }
-    getCalculatedValuesCore() {
-        const statistics = super.getCalculatedValuesCore();
-        const series = this.getSeriesValues();
-        const values = this.getValues();
-        if (series.length > 1) {
-            const preparedData = [];
-            values.forEach((val, valueIndex) => {
-                const seriesData = series.map((seriesValue, seriesIndex) => statistics[seriesIndex][valueIndex]);
-                preparedData.push(seriesData);
-            });
-            return preparedData;
-        }
-        return statistics;
-    }
 }
 SelectBasePlotly.types = ["bar", "vbar", "pie", "doughnut"];
 SelectBasePlotly.displayModeBar = undefined;
@@ -754,20 +749,6 @@ class HistogramPlotly extends HistogramModel {
             return container;
         });
     }
-    getCalculatedValuesCore() {
-        const statistics = super.getCalculatedValuesCore();
-        const series = this.getSeriesValues();
-        const values = this.getValues();
-        if (series.length > 1) {
-            const preparedData = [];
-            values.forEach((val, valueIndex) => {
-                const seriesData = series.map((seriesValue, seriesIndex) => statistics[seriesIndex][valueIndex]);
-                preparedData.push(seriesData);
-            });
-            return preparedData;
-        }
-        return statistics;
-    }
     getValueType() {
         return this.valueType;
     }
@@ -900,5 +881,32 @@ VisualizationManager.registerVisualizer("number", GaugePlotly);
 VisualizationManager.registerVisualizer("rating", GaugePlotly);
 VisualizationManager.registerVisualizer("expression", GaugePlotly);
 
-export { BooleanModel, BooleanPlotly, DocumentHelper, GaugePlotly, HistogramModel, HistogramPlotly, Matrix, MatrixDropdownGroupedPlotly, MatrixPlotly, NumberModel, PlotlyBoolChartAdapter, PlotlyChartAdapter, PlotlyGaugeAdapter, PlotlySetup, RankingPlotly, SelectBase, SelectBasePlotly, VisualizationManager, defaultStatisticsCalculator, localization };
+class PivotPlotly extends PivotModel {
+    constructor(questions, data, options, name) {
+        super(questions, data, options, name);
+        this.chartTypes = PivotPlotly.types;
+        this._chartType = this.chartTypes[0];
+        this._chartAdapter = new PlotlyChartAdapter(this);
+    }
+    destroyContent(container) {
+        this._chartAdapter.destroy(container.children[0]);
+        super.destroyContent(container);
+    }
+    renderContentAsync(container) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const chartNode = DocumentHelper.createElement("div");
+            container.innerHTML = "";
+            container.appendChild(chartNode);
+            yield this._chartAdapter.create(chartNode);
+            return container;
+        });
+    }
+    getValueType() {
+        return this.valueType;
+    }
+}
+PivotPlotly.types = ["vbar", "bar", "line", "stackedbar", "pie", "doughnut"]; // ["vbar", "bar"];
+VisualizationManager.registerPivotVisualizer(PivotPlotly);
+
+export { BooleanModel, BooleanPlotly, DocumentHelper, GaugePlotly, HistogramModel, HistogramPlotly, Matrix, MatrixDropdownGroupedPlotly, MatrixPlotly, NumberModel, PivotModel, PivotPlotly, PlotlyBoolChartAdapter, PlotlyChartAdapter, PlotlyGaugeAdapter, PlotlySetup, RankingPlotly, SelectBase, SelectBasePlotly, VisualizationManager, defaultStatisticsCalculator, localization };
 //# sourceMappingURL=survey.analytics.mjs.map