survey-analytics 3.0.0-beta.0 → 3.0.0-beta.1

package/README.md

@@ -4,7 +4,7 @@
 <video src="https://github.com/surveyjs/survey-analytics/assets/22315929/2ebc84e1-dc43-4873-8c72-a1b4125e8749"></video>
 
 
-[![Build Status](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_apis/build/status/SurveyJS%20Library?branchName=master)](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=7&branchName=master)
+[![Build Status](https://dev.azure.com/SurveyJS/V2%20Libraries/_apis/build/status%2Fanalytics%2FAnalytics%20Main?repoName=surveyjs%2Fsurvey-analytics&branchName=master)](https://dev.azure.com/SurveyJS/V2%20Libraries/_build/latest?definitionId=161&repoName=surveyjs%2Fsurvey-analytics&branchName=master)
 <a href="https://github.com/microsoft/playwright">
 <img alt="Tested with Playwright" src="https://img.shields.io/badge/tested%20with-Playwright-2fa4cf.svg">
 </a>

package/fesm/shared.mjs

@@ -1,51 +1,27 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v3.0.0-beta.0
+ * surveyjs - SurveyJS Dashboard library v3.0.0-beta.1
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
 import { h as NumberModel, S as SelectBase, B as BooleanModel, H as HistogramModel, M as Matrix, d as MatrixDropdownGrouped, P as PivotModel, R as RankingModel, s as VisualizerBase, _ as __awaiter } from './shared2.mjs';
-import { Event, ItemValue } from 'survey-core';
-import { l as localization, c as DataHelper, D as DashboardTheme } from './shared3.mjs';
+import { Event, getRGBaColor, ItemValue } from 'survey-core';
+import { l as localization, d as DataHelper, D as DashboardTheme } from './shared3.mjs';
 import Plotly from 'plotly.js-dist-min';
 import { i as isAllZeros, r as reverseAll } from './shared4.mjs';
 
 class PlotlySetup {
-    static getRgbaColor(propertyValue) {
-        let str = propertyValue;
-        if (!str)
-            return null;
-        const canvasElement = document.createElement("canvas");
-        if (!canvasElement)
-            return null;
-        const ctx = canvasElement.getContext("2d");
-        ctx.fillStyle = str;
-        if (ctx.fillStyle == "#000000") {
-            ctx.fillStyle = propertyValue;
-        }
-        const newStr = ctx.fillStyle;
-        const match = newStr.match(/color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\/\s*([\d.]+)\)/);
-        if (!match) {
-            return newStr;
-        }
-        const r = parseFloat(match[1]);
-        const g = parseFloat(match[2]);
-        const b = parseFloat(match[3]);
-        const alpha = parseFloat(match[4]);
-        const result = `rgba(${r}, ${g}, ${b}, ${alpha})`;
-        return result;
-    }
     static defaultModebarConfig(theme) {
         return {
             bgcolor: "transparent",
-            activecolor: PlotlySetup.getRgbaColor(theme.modebarActiveColor),
-            color: PlotlySetup.getRgbaColor(theme.modebarColor),
+            activecolor: getRGBaColor(theme.modebarActiveColor),
+            color: getRGBaColor(theme.modebarColor),
         };
     }
     static defaultTooltipConfig(theme) {
         const font = Object.assign(Object.assign({}, theme.tooltipFont), { size: parseFloat(theme.tooltipFont.size) });
         return {
-            bgcolor: PlotlySetup.getRgbaColor(theme.tooltipBackground),
+            bgcolor: getRGBaColor(theme.tooltipBackground),
             font: font,
         };
     }
@@ -81,7 +57,7 @@ class PlotlySetup {
             delete axisLabelFont.family;
         }
         return {
-            zerolinecolor: PlotlySetup.getRgbaColor(theme.axisGridColor),
+            zerolinecolor: getRGBaColor(theme.axisGridColor),
             automargin: true,
             tickfont: axisLabelFont
         };
@@ -94,20 +70,34 @@ class PlotlySetup {
         return Object.assign(Object.assign({}, PlotlySetup.defaultAxisConfig(theme)), { ticklabelstandoff: 8 });
     }
     static defaultAxisXWithGridLineConfig(theme) {
-        return Object.assign(Object.assign({}, PlotlySetup.defaultAxisXConfig(theme)), { gridcolor: PlotlySetup.getRgbaColor(theme.axisGridColor), griddash: "dot" });
+        return Object.assign(Object.assign({}, PlotlySetup.defaultAxisXConfig(theme)), { gridcolor: getRGBaColor(theme.axisGridColor), griddash: "dot" });
     }
     static defaultAxisYConfig(theme) {
         return Object.assign(Object.assign({}, PlotlySetup.defaultAxisConfig(theme)), { ticklabelstandoff: 16 });
     }
     static defaultAxisYWithGridLineConfig(theme) {
-        return Object.assign(Object.assign({}, PlotlySetup.defaultAxisYConfig(theme)), { gridcolor: PlotlySetup.getRgbaColor(theme.axisGridColor), griddash: "dot" });
+        return Object.assign(Object.assign({}, PlotlySetup.defaultAxisYConfig(theme)), { gridcolor: getRGBaColor(theme.axisGridColor), griddash: "dot" });
+    }
+    static defaultAxisTitleFont(theme) {
+        const font = theme.axisTitleFont;
+        const result = {
+            size: parseFloat(font.size),
+            color: font.color,
+        };
+        if (theme.isAxisLabelFontLoaded && theme.isAxisLabelFontLoaded()) {
+            result.family = font.family;
+        }
+        if (font.weight != null) {
+            result.weight = font.weight;
+        }
+        return result;
     }
     static defaultGaugeConfig(theme) {
         return {
-            bgcolor: PlotlySetup.getRgbaColor(theme.gaugeBackground),
-            bordercolor: PlotlySetup.getRgbaColor(theme.gaugeBackground),
+            bgcolor: getRGBaColor(theme.gaugeBackground),
+            bordercolor: getRGBaColor(theme.gaugeBackground),
             bar: {
-                color: PlotlySetup.getRgbaColor(theme.gaugeBarColor),
+                color: getRGBaColor(theme.gaugeBarColor),
                 thickness: 0.5,
             },
         };
@@ -335,6 +325,7 @@ class PlotlySetup {
         return { traces, layout, hasSeries };
     }
     static setupVBar(model, answersData) {
+        var _a, _b, _c, _d;
         let topMargin = 30;
         let bottomMargin = 30;
         let { datasets, labels, colors, texts, seriesLabels, labelsTitle, valuesTitle } = answersData;
@@ -358,12 +349,22 @@ class PlotlySetup {
             traceConfig.mode = "markers";
             traceConfig.marker = { color: colors };
         }
+        const yAxisInfo = model.getYAxisInfo();
+        const hasDualAxis = yAxisInfo.length >= 2;
         datasets.forEach((dataset, index) => {
             var trace = Object.assign({}, traceConfig, {
                 y: dataset,
                 name: hasSeries ? seriesLabels[index] : labels[index],
                 text: texts[index],
+                offsetgroup: index,
             });
+            if (hasDualAxis && hasSeries) {
+                const seriesName = seriesLabels[index];
+                const onSecondary = yAxisInfo[1].seriesName && yAxisInfo[1].seriesName.indexOf(seriesName) !== -1;
+                if (onSecondary) {
+                    trace.yaxis = "y2";
+                }
+            }
             if (model.showPercentages) {
                 let texttemplate = model.showOnlyPercentages ? "%{text}%" : "%{value} (%{text}%)";
                 trace.texttemplate = texttemplate;
@@ -372,6 +373,8 @@ class PlotlySetup {
         });
         const maxTicks = 50;
         const tickStep = Math.ceil(labels.length / maxTicks);
+        const primaryYAxisTitle = ((_b = (_a = yAxisInfo[0]) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.text) || valuesTitle;
+        const secondaryYAxisTitle = ((_d = (_c = yAxisInfo[1]) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.text) || "";
         const layout = {
             margin: {
                 t: topMargin,
@@ -385,7 +388,7 @@ class PlotlySetup {
             paper_bgcolor: "transparent",
             showlegend: hasSeries,
             bargap: isHistogram ? 0 : PlotlySetup.defaultBarGap,
-            yaxis: Object.assign(Object.assign({}, PlotlySetup.defaultAxisYWithGridLineConfig(model.theme)), { rangemode: "nonnegative", automargin: true }),
+            yaxis: Object.assign(Object.assign({}, PlotlySetup.defaultAxisYWithGridLineConfig(model.theme)), { rangemode: "nonnegative", automargin: true, title: primaryYAxisTitle ? { text: primaryYAxisTitle, font: PlotlySetup.defaultAxisTitleFont(model.theme) } : undefined }),
             xaxis: Object.assign(Object.assign({}, PlotlySetup.defaultAxisXConfig(model.theme)), { automargin: true, type: "category", tickmode: "array", tickvals: labels, ticktext: labels.map((label, index) => {
                     if (labels.length > maxTicks && index % tickStep !== 0) {
                         return "";
@@ -397,15 +400,16 @@ class PlotlySetup {
         if (labelsTitle) {
             layout.xaxis.title = { text: labelsTitle };
         }
-        if (valuesTitle) {
-            layout.yaxis.title = { text: valuesTitle };
-        }
-        if (model.showPercentages && model.showOnlyPercentages) {
-            layout.yaxis = Object.assign(Object.assign({}, PlotlySetup.defaultAxisYWithGridLineConfig(model.theme)), { tickformat: ".0%", range: [0, 1], ticklen: model.showOnlyPercentages ? 25 : 5, tickcolor: "transparent" });
+        if (hasDualAxis) {
+            layout.yaxis2 = Object.assign(Object.assign({}, PlotlySetup.defaultAxisYWithGridLineConfig(model.theme)), { overlaying: "y", anchor: "x", side: "right", title: secondaryYAxisTitle ? { text: secondaryYAxisTitle, font: PlotlySetup.defaultAxisTitleFont(model.theme) } : undefined });
         }
+        if (model.showPercentages && model.showOnlyPercentages) ;
         if (!model.getValueType || model.getValueType() != "date") {
             layout.xaxis = Object.assign(Object.assign({}, PlotlySetup.defaultAxisXConfig(model.theme)), { type: "category" });
         }
+        if (hasDualAxis) {
+            layout.xaxis.domain = [0.1, 0.9];
+        }
         return { traces, layout, hasSeries };
     }
     static setupScatter(model, answersData) {