@fluentui/react-charting 5.25.4 → 5.25.5

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -88,6 +88,18 @@ var getYMinMaxValues = function (series, layout) {
     }
     return {};
 };
+var getXMinMaxValues = function (series, layout) {
+    var _a;
+    var range = (_a = getXAxisProperties(series, layout)) === null || _a === void 0 ? void 0 : _a.range;
+    if (range && range.length === 2) {
+        return {
+            xMinValue: range[0],
+            xMaxValue: range[1],
+            showRoundOffXTickValues: false,
+        };
+    }
+    return {};
+};
 var getYAxisProperties = function (series, layout) {
     return layout === null || layout === void 0 ? void 0 : layout.yaxis;
 };
@@ -212,6 +224,64 @@ export var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate,
     }
     return x;
 };
+/**
+ * Formats text values according to the texttemplate specification
+ * Supports D3 format specifiers within %{text:format} patterns
+ * @param textValue The raw text value to format
+ * @param textTemplate The template string (e.g., "%{text:.1f}%", "%{text:.2%}", "%{text:,.0f}")
+ * @param index Optional index for array-based templates
+ * @returns Formatted text string
+ *
+ * Examples:
+ * - "%{text:.1f}%" → Formats number with 1 decimal place and adds % suffix
+ * - "%{text:.2%}" → Formats as percentage with 2 decimal places
+ * - "%{text:,.0f}" → Formats with thousands separator and no decimals
+ * - "%{text:$,.2f}" → Formats as currency with thousands separator and 2 decimals
+ */
+var formatTextWithTemplate = function (textValue, textTemplate, index) {
+    if (!textTemplate) {
+        return String(textValue);
+    }
+    var numVal = typeof textValue === 'number' ? textValue : parseFloat(String(textValue));
+    if (isNaN(numVal)) {
+        return String(textValue);
+    }
+    var template = typeof textTemplate === 'string' ? textTemplate : textTemplate[index || 0] || '';
+    // Match Plotly's texttemplate pattern: %{text:format} or %{text}
+    // Can be followed by any literal text like %, $, etc.
+    var plotlyPattern = /%\{text(?::([^}]+))?\}(.*)$/;
+    var match = template.match(plotlyPattern);
+    if (match) {
+        var formatSpec = match[1]; // The format specifier (e.g., ".1f", ".2%", ",.0f") or undefined
+        var suffix = match[2]; // Any text after the closing brace (e.g., "%", " units")
+        // If no format specifier is provided (e.g., %{text}%), try to infer from suffix
+        if (!formatSpec) {
+            // Check if suffix starts with % - assume simple percentage with 1 decimal
+            if (suffix.startsWith('%')) {
+                return "".concat(numVal.toFixed(1)).concat(suffix);
+            }
+            // No format specifier, just return the number with the suffix
+            return "".concat(numVal).concat(suffix);
+        }
+        try {
+            // Use D3 format function to apply the format specifier
+            var formatter = d3Format(formatSpec);
+            var formattedValue = formatter(numVal);
+            return "".concat(formattedValue).concat(suffix);
+        }
+        catch (error) {
+            // Try to extract precision for basic fallback
+            var precisionMatch = formatSpec.match(/\.(\d+)[f%]/);
+            var precision = precisionMatch ? parseInt(precisionMatch[1], 10) : 2;
+            // Check if it's a percentage format
+            if (formatSpec.includes('%')) {
+                return "".concat((numVal * 100).toFixed(precision), "%").concat(suffix);
+            }
+            return "".concat(numVal.toFixed(precision)).concat(suffix);
+        }
+    }
+    return String(textValue);
+};
 /**
  * Extracts unique X-axis categories from Plotly data traces
  * @param data Array of Plotly data traces
@@ -978,7 +1048,9 @@ colorMap, colorwayType, isDarkTheme) {
         height: height,
         innerRadius: innerRadius,
         hideLabels: hideLabels,
-        showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
+        showLabelsInPercent: firstData.textinfo
+            ? ['percent', 'label+percent', 'percent+label'].includes(firstData.textinfo)
+            : true,
         roundCorners: true,
         order: 'sorted',
     };
@@ -1007,6 +1079,11 @@ colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
             var rangeStart = _a[0], rangeEnd = _a[1];
             var rangeXValues = series.x.slice(rangeStart, rangeEnd);
             var rangeYValues = series.y.slice(rangeStart, rangeEnd);
+            var textValues = Array.isArray(series.text)
+                ? series.text.slice(rangeStart, rangeEnd)
+                : typeof series.text === 'string'
+                    ? series.text
+                    : undefined;
             rangeXValues.forEach(function (x, index2) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 if (!mapXToDataPoints[x]) {
@@ -1026,13 +1103,13 @@ colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
                 var opacity = getOpacity(series, index2);
                 var yVal = rangeYValues[index2];
                 var yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
+                var barLabel = Array.isArray(textValues) ? textValues[index2] : textValues;
+                // Apply texttemplate formatting if specified
+                if (barLabel && series.texttemplate) {
+                    barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index2);
+                }
                 if (series.type === 'bar') {
-                    mapXToDataPoints[x].chartData.push({
-                        legend: legend,
-                        data: yVal,
-                        color: (_h = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color,
-                        yAxisCalloutData: yAxisCalloutData,
-                    });
+                    mapXToDataPoints[x].chartData.push(__assign({ legend: legend, data: yVal, color: (_h = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color, yAxisCalloutData: yAxisCalloutData }, (barLabel ? { barLabel: String(barLabel) } : {})));
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
@@ -1065,6 +1142,14 @@ colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
         var _a, _b, _c;
         var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
         var resolveX = function (val) {
+            if (shape.xref === 'x domain') {
+                if (val === 0) {
+                    return xCategories[0];
+                }
+                if (val === 1) {
+                    return xCategories[xCategories.length - 1];
+                }
+            }
             if (typeof val === 'number' && Array.isArray(xCategories)) {
                 if (xCategories[val] !== undefined) {
                     return xCategories[val];
@@ -1115,7 +1200,7 @@ colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
     });
     var vsbcData = Object.values(mapXToDataPoints);
     var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: vsbcData, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, height: (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_f = vsbcData[0]) === null || _f === void 0 ? void 0 : _f.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: vsbcData, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, height: (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundedTicks: true, wrapXAxisLables: typeof ((_f = vsbcData[0]) === null || _f === void 0 ? void 0 : _f.xAxisPoint) === 'string' }), getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
 };
 export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -1173,12 +1258,13 @@ colorMap, colorwayType, isDarkTheme) {
                         : resolveColor(extractedBarColors_1, xIndex, legend, colorMap, (_h = (_g = (_f = processedInput.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
                     var opacity = getOpacity(series, xIndex);
                     var yVal = series.y[xIndex];
-                    return {
-                        x: x.toString(),
-                        y: yVal,
-                        yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
-                        color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
-                    };
+                    // Extract text value for barLabel
+                    var barLabel = Array.isArray(series.text) ? series.text[xIndex] : series.text;
+                    // Apply texttemplate formatting if specified
+                    if (barLabel && series.texttemplate) {
+                        barLabel = formatTextWithTemplate(barLabel, series.texttemplate, xIndex);
+                    }
+                    return __assign({ x: x.toString(), y: yVal, yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat), color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color }, (barLabel ? { barLabel: String(barLabel) } : {}));
                 })
                     .filter(function (item) { return typeof item !== 'undefined'; }),
                 useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
@@ -1216,7 +1302,7 @@ colorMap, colorwayType, isDarkTheme) {
         }
     });
     var annotations = getChartAnnotationsFromLayout(processedInput.layout, processedInput.data, isMultiPlot);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true, showYAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, roundedTicks: true, wrapXAxisLables: true, showYAxisLables: true }), getXMinMaxValues(processedInput.data[0], processedInput.layout)), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
 };
 export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -1272,13 +1358,18 @@ colorMap, colorwayType, isDarkTheme) {
                 : resolveColor(extractedColors, index, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
             var opacity = getOpacity(series, index);
             var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
-            vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_h = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color }, (isXString
+            // Handle text values and texttemplate formatting for histogram bins
+            var barLabel = Array.isArray(series.text) ? series.text[index] : series.text;
+            if (barLabel && series.texttemplate) {
+                barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index);
+            }
+            vbcData.push(__assign(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_h = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color }, (isXString
                 ? {}
-                : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
+                : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })), (barLabel ? { barLabel: String(barLabel) } : {})));
         });
     });
     var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-    return __assign(__assign(__assign(__assign({ data: vbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, supportNegativeData: true, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string', showYAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
+    return __assign(__assign(__assign(__assign(__assign({ data: vbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, supportNegativeData: true, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, roundedTicks: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string', showYAxisLables: true }, getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
 };
 export var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -1470,12 +1561,12 @@ colorMap, colorwayType, isDarkTheme) {
         scatterChartData: __spreadArray(__spreadArray([], chartData, true), lineShape, true),
     };
     var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-    var commonProps = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, wrapXAxisLables: shouldWrapLabels, showYAxisLables: true }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
+    var commonProps = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, wrapXAxisLables: shouldWrapLabels, showYAxisLables: true, roundedTicks: true }), getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
     if (isAreaChart) {
         return __assign({ data: chartProps, mode: mode }, commonProps);
     }
     else {
-        return __assign(__assign(__assign(__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax), (isScatterChart
+        return __assign(__assign(__assign(__assign({ data: isScatterChart ? scatterChartProps : chartProps, enableReflow: false }, commonProps), yMinMax), (isScatterChart
             ? __assign({ showYAxisLablesTooltip: true }, getAxisCategoryOrderProps(input.data, input.layout)) : {})), (!isScatterChart &&
             (function () {
                 var bars = mapColorFillBars(input.layout);
@@ -1498,7 +1589,7 @@ colorMap, colorwayType, isDarkTheme) {
         var legend = legends[index];
         return series.y
             .map(function (yValue, i) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (isInvalidValue(yValue)) {
                 return null;
             }
@@ -1509,12 +1600,7 @@ colorMap, colorwayType, isDarkTheme) {
                     : 0)
                 : resolveColor(extractedColors, i, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
             var opacity = getOpacity(series, i);
-            return {
-                x: isInvalidValue((_h = series.x) === null || _h === void 0 ? void 0 : _h[i]) ? 0 : series.x[i],
-                y: yValue,
-                legend: legend,
-                color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
-            };
+            return __assign({ x: isInvalidValue((_h = series.x) === null || _h === void 0 ? void 0 : _h[i]) ? 0 : series.x[i], y: yValue, legend: legend, color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color }, (((_k = series.text) === null || _k === void 0 ? void 0 : _k[i]) ? { barLabel: series.text[i].toString() } : {}));
         })
             .filter(function (point) { return point !== null; });
     })
@@ -1527,9 +1613,9 @@ colorMap, colorwayType, isDarkTheme) {
     var scalingFactor = 0.01;
     var gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     var barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-    return __assign(__assign(__assign(__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
+    return __assign(__assign(__assign(__assign(__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
             ? (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.yaxis2) === null || _m === void 0 ? void 0 : _m.title
-            : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
+            : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, roundedTicks: true }, getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
 };
 export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -1604,34 +1690,72 @@ colorMap, colorwayType, isDarkTheme) {
 export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
     var firstData = input.data[0];
     var heatmapDataPoints = [];
     var zMin = Number.POSITIVE_INFINITY;
     var zMax = Number.NEGATIVE_INFINITY;
+    // Build a 2D array of annotations based on their grid position
+    var annotationGrid = [];
+    var rawAnnotations = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.annotations;
+    if (rawAnnotations) {
+        var annotationsArray = Array.isArray(rawAnnotations) ? rawAnnotations : [rawAnnotations];
+        // Collect all unique x and y values from valid annotations
+        var xSet_1 = new Set();
+        var ySet_1 = new Set();
+        var validAnnotations_1 = [];
+        annotationsArray.forEach(function (a) {
+            if (a &&
+                typeof a.x === 'number' &&
+                typeof a.y === 'number' &&
+                typeof a.text === 'string' &&
+                (a.xref === 'x' || a.xref === undefined) &&
+                (a.yref === 'y' || a.yref === undefined)) {
+                xSet_1.add(a.x);
+                ySet_1.add(a.y);
+                validAnnotations_1.push({ x: a.x, y: a.y, text: cleanText(a.text) });
+            }
+        });
+        if (validAnnotations_1.length > 0) {
+            // Get sorted unique x and y values
+            var xValues_1 = Array.from(xSet_1).sort(function (a, b) { return a - b; });
+            var yValues_1 = Array.from(ySet_1).sort(function (a, b) { return a - b; });
+            // Initialize 2D grid and populate
+            validAnnotations_1.forEach(function (annotation) {
+                var xIdx = xValues_1.indexOf(annotation.x);
+                var yIdx = yValues_1.indexOf(annotation.y);
+                if (!annotationGrid[yIdx]) {
+                    annotationGrid[yIdx] = [];
+                }
+                annotationGrid[yIdx][xIdx] = annotation.text;
+            });
+        }
+    }
+    // Helper function to get annotation from 2D grid by index
+    var getAnnotationByIndex = function (xIdx, yIdx) { var _a; return (_a = annotationGrid[yIdx]) === null || _a === void 0 ? void 0 : _a[xIdx]; };
     if (firstData.type === 'histogram2d') {
-        var xValues_1 = [];
-        var yValues_1 = [];
+        var xValues_2 = [];
+        var yValues_2 = [];
         var zValues_1 = [];
-        (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, index) {
+        (_b = firstData.x) === null || _b === void 0 ? void 0 : _b.forEach(function (xVal, index) {
             var _a, _b;
             var zVal = (_a = getNumberAtIndexOrDefault(firstData.z, index)) !== null && _a !== void 0 ? _a : 0;
             if (isInvalidValue(xVal) || isInvalidValue((_b = firstData.y) === null || _b === void 0 ? void 0 : _b[index])) {
                 return;
             }
-            xValues_1.push(xVal);
-            yValues_1.push(firstData.y[index]);
+            xValues_2.push(xVal);
+            yValues_2.push(firstData.y[index]);
             zValues_1.push(zVal);
         });
-        var isXString_1 = isStringArray(xValues_1);
-        var isYString_1 = isStringArray(yValues_1);
-        var xBins_1 = createBins(xValues_1, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.size);
-        var yBins_1 = createBins(yValues_1, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.start, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.end, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.size);
+        var isXString_1 = isStringArray(xValues_2);
+        var isYString_1 = isStringArray(yValues_2);
+        var xBins_1 = createBins(xValues_2, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.start, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.end, (_e = firstData.xbins) === null || _e === void 0 ? void 0 : _e.size);
+        var yBins_1 = createBins(yValues_2, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.start, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.end, (_h = firstData.ybins) === null || _h === void 0 ? void 0 : _h.size);
         var zBins_1 = yBins_1.map(function () { return xBins_1.map(function () { return []; }); });
         var total_1 = 0;
-        xValues_1.forEach(function (xVal, index) {
+        xValues_2.forEach(function (xVal, index) {
             var xBinIdx = findBinIndex(xBins_1, xVal, isXString_1);
-            var yBinIdx = findBinIndex(yBins_1, yValues_1[index], isYString_1);
+            var yBinIdx = findBinIndex(yBins_1, yValues_2[index], isYString_1);
             if (xBinIdx !== -1 && yBinIdx !== -1) {
                 zBins_1[yBinIdx][xBinIdx].push(zValues_1[index]);
             }
@@ -1646,11 +1770,12 @@ colorMap, colorwayType, isDarkTheme) {
         xBins_1.forEach(function (xBin, xIdx) {
             yBins_1.forEach(function (yBin, yIdx) {
                 var zVal = calculateHistNorm(firstData.histnorm, z_1[yIdx][xIdx], total_1, isXString_1 ? xBin.length : getBinSize(xBin), isYString_1 ? yBin.length : getBinSize(yBin));
+                var annotationText = getAnnotationByIndex(xIdx, yIdx);
                 heatmapDataPoints.push({
                     x: isXString_1 ? xBin.join(', ') : getBinCenter(xBin),
                     y: isYString_1 ? yBin.join(', ') : getBinCenter(yBin),
                     value: zVal,
-                    rectText: zVal,
+                    rectText: annotationText || zVal,
                 });
                 if (typeof zVal === 'number') {
                     zMin = Math.min(zMin, zVal);
@@ -1660,17 +1785,27 @@ colorMap, colorwayType, isDarkTheme) {
         });
     }
     else {
-        (_h = firstData.x) === null || _h === void 0 ? void 0 : _h.forEach(function (xVal, xIdx) {
-            var _a;
+        // If x and y are not provided, generate indices based on z dimensions
+        var zArray_1 = firstData.z;
+        var xValues = firstData.x;
+        var yValues = firstData.y;
+        // Determine the dimensions from z array
+        var yLength_1 = (_j = zArray_1 === null || zArray_1 === void 0 ? void 0 : zArray_1.length) !== null && _j !== void 0 ? _j : 0;
+        var xLength = (_l = (_k = zArray_1 === null || zArray_1 === void 0 ? void 0 : zArray_1[0]) === null || _k === void 0 ? void 0 : _k.length) !== null && _l !== void 0 ? _l : 0;
+        // Use provided x/y values or generate indices
+        var xData = xValues !== null && xValues !== void 0 ? xValues : Array.from({ length: xLength }, function (_, i) { return i; });
+        var yData_1 = yValues !== null && yValues !== void 0 ? yValues : Array.from({ length: yLength_1 }, function (_, i) { return yLength_1 - 1 - i; });
+        xData.forEach(function (xVal, xIdx) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_a = firstData.y) === null || _a === void 0 ? void 0 : _a.forEach(function (yVal, yIdx) {
-                var _a, _b, _c, _d, _e, _f;
-                var zVal = (_b = (_a = firstData.z) === null || _a === void 0 ? void 0 : _a[yIdx]) === null || _b === void 0 ? void 0 : _b[xIdx];
+            yData_1.forEach(function (yVal, yIdx) {
+                var _a, _b, _c, _d, _e;
+                var zVal = (_a = zArray_1 === null || zArray_1 === void 0 ? void 0 : zArray_1[yIdx]) === null || _a === void 0 ? void 0 : _a[xIdx];
+                var annotationText = getAnnotationByIndex(xIdx, yIdx);
                 heatmapDataPoints.push({
-                    x: ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.xaxis) === null || _d === void 0 ? void 0 : _d.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
-                    y: ((_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.yaxis) === null || _f === void 0 ? void 0 : _f.type) === 'date' ? yVal : yVal,
+                    x: ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.xaxis) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
+                    y: ((_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.yaxis) === null || _e === void 0 ? void 0 : _e.type) === 'date' ? yVal : yVal,
                     value: zVal,
-                    rectText: zVal,
+                    rectText: annotationText || zVal,
                 });
                 if (typeof zVal === 'number') {
                     zMin = Math.min(zMin, zVal);
@@ -1680,7 +1815,7 @@ colorMap, colorwayType, isDarkTheme) {
         });
     }
     var heatmapData = {
-        legend: (_j = firstData.name) !== null && _j !== void 0 ? _j : '',
+        legend: (_m = firstData.name) !== null && _m !== void 0 ? _m : '',
         data: heatmapDataPoints,
         value: 0,
     };
@@ -1691,7 +1826,7 @@ colorMap, colorwayType, isDarkTheme) {
         getColorFromToken(DataVizPalette.color2),
         getColorFromToken(DataVizPalette.color3),
     ];
-    var colorscale = (_0 = (_u = (_q = (_m = (_k = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _k !== void 0 ? _k : (_l = input.layout) === null || _l === void 0 ? void 0 : _l.colorscale) !== null && _m !== void 0 ? _m : (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.coloraxis) === null || _p === void 0 ? void 0 : _p.colorscale) !== null && _q !== void 0 ? _q : (_t = (_s = (_r = input.layout) === null || _r === void 0 ? void 0 : _r.template) === null || _s === void 0 ? void 0 : _s.layout) === null || _t === void 0 ? void 0 : _t.colorscale) !== null && _u !== void 0 ? _u : (firstData.type === 'histogram2d' && ((_z = (_y = (_x = (_w = (_v = input.layout) === null || _v === void 0 ? void 0 : _v.template) === null || _w === void 0 ? void 0 : _w.data) === null || _x === void 0 ? void 0 : _x.histogram2d) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.colorscale))) !== null && _0 !== void 0 ? _0 : (_5 = (_4 = (_3 = (_2 = (_1 = input.layout) === null || _1 === void 0 ? void 0 : _1.template) === null || _2 === void 0 ? void 0 : _2.data) === null || _3 === void 0 ? void 0 : _3.heatmap) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.colorscale;
+    var colorscale = (_3 = (_x = (_t = (_q = (_o = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _o !== void 0 ? _o : (_p = input.layout) === null || _p === void 0 ? void 0 : _p.colorscale) !== null && _q !== void 0 ? _q : (_s = (_r = input.layout) === null || _r === void 0 ? void 0 : _r.coloraxis) === null || _s === void 0 ? void 0 : _s.colorscale) !== null && _t !== void 0 ? _t : (_w = (_v = (_u = input.layout) === null || _u === void 0 ? void 0 : _u.template) === null || _v === void 0 ? void 0 : _v.layout) === null || _w === void 0 ? void 0 : _w.colorscale) !== null && _x !== void 0 ? _x : (firstData.type === 'histogram2d' && ((_2 = (_1 = (_0 = (_z = (_y = input.layout) === null || _y === void 0 ? void 0 : _y.template) === null || _z === void 0 ? void 0 : _z.data) === null || _0 === void 0 ? void 0 : _0.histogram2d) === null || _1 === void 0 ? void 0 : _1[0]) === null || _2 === void 0 ? void 0 : _2.colorscale))) !== null && _3 !== void 0 ? _3 : (_8 = (_7 = (_6 = (_5 = (_4 = input.layout) === null || _4 === void 0 ? void 0 : _4.template) === null || _5 === void 0 ? void 0 : _5.data) === null || _6 === void 0 ? void 0 : _6.heatmap) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.colorscale;
     // determine if the types diverging, sequential or sequentialminus are present in colorscale
     if (colorscale &&
         typeof colorscale === 'object' &&
@@ -1715,13 +1850,13 @@ colorMap, colorwayType, isDarkTheme) {
     var rangeValuesForColorScale = Array.isArray(colorscale)
         ? colorscale.map(function (arr) { return arr[1]; })
         : defaultRange;
-    return __assign(__assign(__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width, height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout)), getAxisTickProps(input.data, input.layout));
+    return __assign(__assign(__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_9 = input.layout) === null || _9 === void 0 ? void 0 : _9.width, height: (_11 = (_10 = input.layout) === null || _10 === void 0 ? void 0 : _10.height) !== null && _11 !== void 0 ? _11 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout)), getAxisTickProps(input.data, input.layout));
 };
 export var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var _m = input.data[0], link = _m.link, node = _m.node;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _q = input.data[0], link = _q.link, node = _q.node;
     var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
         .map(function (val, index) {
         var _a, _b;
@@ -1737,8 +1872,9 @@ colorMap, colorwayType, isDarkTheme) {
         // Filter out negative nodes, unequal nodes and self-references (circular links)
         .filter(function (x) { return x !== null && x.source >= 0 && x.target >= 0 && x.source !== x.target; });
     var extractedNodeColors = extractColor((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
+    var extractedLinkColors = extractColor((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, link === null || link === void 0 ? void 0 : link.color, colorMap, isDarkTheme);
     var sankeyChartData = {
-        nodes: (_e = node.label) === null || _e === void 0 ? void 0 : _e.map(function (label, index) {
+        nodes: (_h = node.label) === null || _h === void 0 ? void 0 : _h.map(function (label, index) {
             var _a, _b, _c;
             var color = resolveColor(extractedNodeColors, index, label, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
             return {
@@ -1749,11 +1885,13 @@ colorMap, colorwayType, isDarkTheme) {
         }),
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         links: validLinks.map(function (validLink, index) {
-            return __assign({}, validLink);
+            var _a, _b, _c;
+            var color = resolveColor(extractedLinkColors, index, validLink.target, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
+            return __assign(__assign({}, validLink), { color: color });
         }),
     };
     var styles = {
-        root: __assign({}, (((_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.font) === null || _g === void 0 ? void 0 : _g.size) ? { fontSize: (_h = input.layout.font) === null || _h === void 0 ? void 0 : _h.size } : {})),
+        root: __assign({}, (((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.font) === null || _k === void 0 ? void 0 : _k.size) ? { fontSize: (_l = input.layout.font) === null || _l === void 0 ? void 0 : _l.size } : {})),
     };
     var chartTitle = getTitles(input.layout).chartTitle;
     return {
@@ -1761,8 +1899,8 @@ colorMap, colorwayType, isDarkTheme) {
             chartTitle: chartTitle,
             SankeyChartData: sankeyChartData,
         },
-        width: (_j = input.layout) === null || _j === void 0 ? void 0 : _j.width,
-        height: (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : 468,
+        width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width,
+        height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 468,
         styles: styles,
         enableReflow: false,
     };
@@ -2488,7 +2626,7 @@ var getIndexFromKey = function (key, pattern) {
     return parseInt(normalizedKey, 10) - 1;
 };
 export var isNonPlotType = function (chartType) {
-    return ['donut', 'sankey', 'pie', 'annotation'].includes(chartType);
+    return ['donut', 'sankey', 'pie', 'annotation', 'table', 'gauge', 'funnel'].includes(chartType);
 };
 export var getGridProperties = function (schema, isMultiPlot, validTracesInfo) {
     var _a;